/* ==========================================================================
   MIMSHACK FORGE — HOMEPAGE SECTIONS
   ========================================================================== */

.ms-section-inner{ max-width: var(--ms-container-max); margin:0 auto; padding: var(--ms-space-2xl) var(--ms-space-md); }
.ms-section-inner h2{ font-size: var(--ms-size-h2); margin-bottom: var(--ms-space-md); }
.ms-link-cta{ display:inline-block; margin-top: var(--ms-space-md); font-weight:700; color: var(--ms-color-primary-blue); text-decoration:none; }
.ms-link-cta--light{ color: var(--ms-color-gold-accent); }

/* Hero */
.ms-home-hero{ background: linear-gradient(180deg, var(--ms-color-bg-light), var(--ms-color-white)); border-bottom:1px solid var(--ms-color-border); }
.ms-home-hero__inner{ max-width: 760px; margin:0 auto; text-align:center; padding: var(--ms-space-2xl) var(--ms-space-md); }
.ms-eyebrow{ text-transform:uppercase; letter-spacing:0.06em; font-size:0.8rem; font-weight:700; color: var(--ms-color-primary-blue); margin-bottom: var(--ms-space-sm); }
.ms-home-hero h1{ font-size: var(--ms-size-display); margin: 0 0 var(--ms-space-md); }
.ms-home-hero__lead{ color: var(--ms-color-text-muted); font-size:1.1rem; margin-bottom: var(--ms-space-lg); }
.ms-home-hero__actions{ display:flex; gap: var(--ms-space-sm); justify-content:center; flex-wrap:wrap; }

.ms-btn--ghost{ border:1px solid var(--ms-color-deep-navy); color: var(--ms-color-deep-navy); }
.ms-btn--ghost:hover{ background: var(--ms-color-deep-navy); color: var(--ms-color-white); }
.ms-btn--ghost-light{ border:1px solid rgba(255,255,255,0.5); color: var(--ms-color-white); }
.ms-btn--ghost-light:hover{ background: rgba(255,255,255,0.15); }
.ms-care-card .ms-btn{ width:100%; }
.ms-btn--outline{ border:1px solid var(--ms-color-border); color: var(--ms-color-deep-navy); background: var(--ms-color-white); }
.ms-btn--outline:hover{ border-color: var(--ms-color-primary-blue); color: var(--ms-color-primary-blue); }

/* Ecosystem */
.ms-ecosystem-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--ms-space-md); }
.ms-ecosystem-card{ background: var(--ms-color-bg-light); border-radius: var(--ms-radius-md); padding: var(--ms-space-md); border-top: 3px solid var(--ms-color-primary-blue); }
.ms-ecosystem-card h3{ margin:0 0 0.4rem; font-size:1.05rem; letter-spacing:0.02em; }
.ms-ecosystem-card p{ margin:0; font-size:0.9rem; color: var(--ms-color-text-muted); }

/* What are you building */
.ms-home-build{ background: var(--ms-color-deep-navy); color: var(--ms-color-white); }
.ms-home-build h2{ color: var(--ms-color-white); }
.ms-build-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--ms-space-sm); }
.ms-build-option{
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
  border-radius: var(--ms-radius-sm); padding: var(--ms-space-sm) var(--ms-space-md);
  color: var(--ms-color-white); text-decoration:none; font-weight:600;
  transition: background var(--ms-duration-hover) var(--ms-ease);
}
.ms-build-option:hover{ background: var(--ms-color-primary-blue); }

/* Dark portfolio band */
.ms-home-portfolio--dark{ background: var(--ms-color-deep-navy); color: var(--ms-color-white); }
.ms-home-portfolio--dark h2{ color: var(--ms-color-white); }

/* Digital Care */
.ms-care-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--ms-space-md); margin: var(--ms-space-md) 0; }
.ms-care-card{
  border-radius: var(--ms-radius-md); padding: var(--ms-space-md); text-align:center;
  color: var(--ms-color-white); box-shadow: var(--ms-shadow-md);
}
.ms-care-card h3{ margin:0 0 0.4rem; font-size:1.05rem; color: var(--ms-color-white); }
.ms-care-card__price{ font-size:1.5rem; font-weight:700; color: var(--ms-color-white); margin: 0 0 var(--ms-space-sm); }
.ms-care-card__price span{ font-size:0.85rem; font-weight:400; color: rgba(255,255,255,0.75); }

.ms-care-grad--blue{ background: linear-gradient(135deg, var(--ms-color-primary-blue), #073881); }
.ms-care-grad--navy{ background: linear-gradient(135deg, #4C545F, var(--ms-color-deep-navy)); }
.ms-care-grad--gold{ background: linear-gradient(135deg, #F7C440, var(--ms-color-gold-accent)); }
.ms-care-grad--deep{ background: linear-gradient(135deg, var(--ms-color-primary-blue), var(--ms-color-deep-navy)); }

/* Team */
.ms-team-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--ms-space-md); }
.ms-team-card{ text-align:center; }
.ms-team-card__photo img{ border-radius: 50%; width:120px; height:120px; object-fit:cover; margin: 0 auto var(--ms-space-sm); }
.ms-team-card h3{ margin:0 0 0.2rem; }
.ms-team-card__role{ color: var(--ms-color-primary-blue); font-weight:600; font-size:0.85rem; margin:0 0 0.5rem; }
.ms-team-card__bio{ color: var(--ms-color-text-muted); font-size:0.88rem; }

/* Why */
.ms-why-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--ms-space-md); }
.ms-why-card h3{ font-size:1rem; margin-bottom:0.3rem; }
.ms-why-card p{ color: var(--ms-color-text-muted); font-size:0.9rem; margin:0; }

/* Final CTA */
.ms-home-final-cta{ background: linear-gradient(135deg, var(--ms-color-deep-navy), #141B24); color: var(--ms-color-white); text-align:center; }
.ms-home-final-cta h2{ color: var(--ms-color-white); }
.ms-home-final-cta p{ max-width:640px; margin:0 auto var(--ms-space-lg); color: rgba(255,255,255,0.8); }

/* Hero visual + layout */
.ms-hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--ms-space-xl); align-items:center; text-align:left; }
.ms-hero-text{ text-align:left; }
.ms-hero-visual{ display:flex; padding-top: var(--ms-space-md); }

/* Illustrated hero scene */



@media (max-width: 860px){
  .ms-hero-grid{ grid-template-columns: 1fr; text-align:center; }
  .ms-hero-text{ text-align:center; }
  .ms-home-hero__actions{ justify-content:center; }
  .ms-hero-visual{ max-width: 360px; margin: var(--ms-space-lg) auto 0; }
}

/* Scroll reveal */
.ms-reveal{ opacity:0; transform: translateY(24px); transition: opacity 0.6s var(--ms-ease), transform 0.6s var(--ms-ease); }
.ms-reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .ms-reveal{ opacity:1; transform:none; transition:none; }
}

/* Who We Serve */
.ms-serve-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--ms-space-sm); }
.ms-serve-card{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding: var(--ms-space-md); border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-light); border: 1px solid var(--ms-color-border);
  color: var(--ms-color-deep-navy); text-decoration:none; font-weight:600;
  transition: border-color var(--ms-duration-hover) var(--ms-ease), color var(--ms-duration-hover) var(--ms-ease);
}
.ms-serve-card:hover{ border-color: var(--ms-color-primary-blue); color: var(--ms-color-primary-blue); }


/* === Hero: corporate navy background, no photograph === */
.ms-home-hero{ position:relative; overflow:hidden; color:#fff; border-bottom:0;
  background:
    radial-gradient(900px 480px at 88% 8%, rgba(11,94,215,0.40), transparent 62%),
    radial-gradient(640px 360px at 6% 100%, rgba(244,176,0,0.10), transparent 60%),
    linear-gradient(160deg, #111B2C 0%, #1F2937 100%); }
.ms-home-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 72% 40%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at 72% 40%, #000 25%, transparent 72%); }
.ms-home-hero__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:96px 24px; }
.ms-hero-grid{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap:48px; align-items:center; text-align:left; }
.ms-hero-text{ text-align:left; }
.ms-home-hero .ms-eyebrow{ color: var(--ms-color-gold-accent); letter-spacing:0.14em; text-transform:uppercase; font-size:0.8rem; font-weight:700; margin:0 0 16px; }
.ms-home-hero h1{ color:#fff; font-size:2.6rem; font-size: clamp(2.4rem, 5vw, 4rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 20px; }
.ms-home-hero__lead{ color: rgba(255,255,255,0.84); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width:34rem; margin:0 0 32px; }
.ms-home-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; }
.ms-home-hero .ms-btn--primary{ background: var(--ms-color-primary-blue); }
.ms-home-hero .ms-btn--primary:hover{ background: #0A4FB5; }
.ms-home-hero .ms-btn--ghost{ border:1px solid rgba(255,255,255,0.7); color:#fff; background:transparent; }
.ms-home-hero .ms-btn--ghost:hover{ background: rgba(255,255,255,0.12); color:#fff; }
.ms-home-hero .ms-btn:focus-visible{ outline:3px solid var(--ms-color-gold-accent); outline-offset:3px; }
.ms-hero-visual{ display:flex; justify-content:center; align-items:center; }
.ms-hero-network{ width:100%; max-width:480px; height:auto; overflow:visible; }
.ms-hero-network__links line{ stroke: rgba(255,255,255,0.22); stroke-width:1.2; }
.ms-hero-network__nodes circle{ fill: rgba(255,255,255,0.85); }
.ms-hero-network__nodes circle.is-gold{ fill: var(--ms-color-gold-accent); }

/* Digital Care cards: contents centred, buttons sized inside the card */
.ms-care-card{ display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.ms-care-card .ms-btn{ width:100%; }

@media (max-width: 860px){
  .ms-hero-grid{ grid-template-columns:1fr; text-align:center; gap:40px; }
  .ms-hero-text{ text-align:center; }
  .ms-home-hero__inner{ padding:64px 20px; }
  .ms-home-hero__lead{ margin-left:auto; margin-right:auto; }
  .ms-home-hero__actions{ justify-content:center; }
  .ms-hero-network{ max-width:300px; }
}
@media (max-width: 480px){
  .ms-home-hero__actions .ms-btn{ width:100%; max-width:320px; }
}