/* =====================
   Oveople Design System
   Centralized styles for cohesive UI
   ===================== */

:root{
  /* Brand Palette */
  --brand:#2563eb;
  --brand-2:#60a5fa;
  --brand-dark:#1d4ed8; /* added for stronger contrast */
  --brand-dark-2:#1e40af; /* deepest shade for hover */
  --accent:#b91c1c;

  /* Neutral / Surfaces */
  --bg:#f7f9ff;
  --bg-soft:#f2f6ff;
  --surface:#ffffff;
  --line:#e2e8f0;
  --shadow:0 10px 30px rgba(2,6,23,.08);

  /* Text */
  --text:#0b1020;
  --muted:#465575;

  /* Radii */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;

  /* Typography scale */
  --font-system:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --fs-hero:clamp(2rem,5vw,3.5rem);
  --fs-h2:clamp(1.5rem,3vw,2.2rem);
  --fs-lead:clamp(1rem,1.8vw,1.25rem);
  --fs-small:.78rem;

  /* Motion */
  --easing:cubic-bezier(.16,.8,.24,1);
  --transition: .35s var(--easing);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.55 var(--font-system); -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto; display:block}
a{text-decoration:none; color:inherit}

/* Accessibility utilities */
.skip-link{position:fixed; left:8px; top:8px; background:var(--brand); color:#fff; padding:.6rem .9rem; border-radius:var(--radius-sm); font-weight:600; transform:translateY(-140%); transition:transform .3s ease; z-index:1000}
.skip-link:focus{transform:translateY(0); outline:3px solid var(--brand-2);}

:focus-visible{outline:3px solid var(--brand-2); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}}

/* Layout */
.container{width:min(1200px,92%); margin-inline:auto}
header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:70px}
.logo{display:flex; align-items:center; gap:.75rem}
.logo img{width:90px; height:90px; object-fit:contain}
.nav-links{display:flex; gap:1.25rem; align-items:center}
.nav-links a{color:#1f2a44; font-weight:500}
.nav-links a:hover{color:var(--brand)}

/* Mobile nav */
.burger{display:none; background:none; border:0; color:#0f172a; font-size:1.55rem; line-height:1; cursor:pointer}
@media (max-width:820px){
  .burger{display:block}
  .nav-links{position:fixed; inset:70px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:.3s var(--easing); padding:1rem 1.2rem; flex-direction:column; align-items:flex-start}
  .nav-links[data-open="true"]{transform:translateY(0)}
}
/* On very small screens keep logo a bit smaller so it doesn't dominate */
@media (max-width:560px){
  .logo img{width:90px; height:90px}
}

/* Buttons */
.btn{display:inline-block; padding:.78rem 1.15rem; border-radius:999px; border:1px solid transparent; font-weight:700; letter-spacing:.2px; font-size:.95rem; position:relative; overflow:hidden; transition:.25s var(--easing);}
.btn.primary{background:linear-gradient(135deg,var(--brand-dark),var(--brand)); color:#fff; box-shadow:var(--shadow); text-shadow:0 1px 1px rgba(0,0,0,.25)}
.btn.primary:hover,.btn.primary:focus-visible{background:linear-gradient(135deg,var(--brand-dark-2),var(--brand-dark)); color:#fff; box-shadow:0 6px 24px -4px rgba(30,64,175,.45),0 0 0 3px rgba(96,165,250,.35)}
.btn.primary:active{filter:brightness(.95); box-shadow:0 4px 14px -4px rgba(30,64,175,.45)}
@media (forced-colors:active){
  .btn.primary{forced-color-adjust:auto;}
}
.btn.ghost{border-color:var(--line); color:#0f172a; background:#fff}
.btn:hover{ /* no vertical movement per request */ transform:none}
.btn:active{transform:none}

/* Hero */
.hero{position:relative; padding:clamp(72px,10vw,120px) 0 72px; overflow:hidden}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:-2; background:
  radial-gradient(800px 400px at 15% 20%, rgba(37,99,235,.18), transparent 60%),
  radial-gradient(600px 300px at 85% 30%, rgba(185,28,28,.12), transparent 60%),
  linear-gradient(180deg,#ffffff 0%,#f3f6ff 100%);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
h1{margin:.4rem 0 1rem; font-size:var(--fs-hero); line-height:1.12; letter-spacing:-.5px}
.lead{color:#374151; font-size:var(--fs-lead)}
.hero-cta{display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; margin-top:1.35rem; flex-wrap:wrap}

/* Glass hero container */
.hero-glass-container{position:relative; background:rgba(255,255,255,.15); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-radius:24px; border:1px solid rgba(255,255,255,.2); padding:3rem 2.5rem; box-shadow:0 8px 32px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.1); transition:var(--transition); overflow:hidden}
.hero-glass-container::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
.hero-glass-container::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.1) 0%,transparent 50%), radial-gradient(circle at 80% 80%,rgba(255,255,255,.05) 0%,transparent 50%); pointer-events:none}
.hero-glass-container:hover{box-shadow:0 12px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.2)}
@media (max-width:900px){.hero-glass-container{padding:2rem 1.5rem; border-radius:20px}}

/* Full-width video background */
.hero-fullwidth{position:absolute; inset:0; z-index:-1; overflow:hidden} /* sits above gradient bg */
.hero-fullwidth video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7}

/* Liquid Glass Buttons (hierarchy clarified) */
.liquidGlass-wrapper{position:relative; display:inline-flex; font-weight:600; overflow:hidden; color:#000; cursor:pointer; border:none; text-decoration:none; border-radius:3rem; padding:1rem 2rem; background:transparent; transition:all .45s cubic-bezier(.175,.885,.32,2.2); box-shadow:0 4px 10px -2px rgba(15,23,42,.18),0 0 16px -4px rgba(15,23,42,.1)}
.liquidGlass-effect{position:absolute; inset:0; backdrop-filter:blur(4px); filter:url(#glass-distortion); overflow:hidden; isolation:isolate; border-radius:inherit}
.liquidGlass-tint{position:absolute; inset:0; background:rgba(255,255,255,.28); border-radius:inherit}
.liquidGlass-text{position:relative; z-index:1; font-size:1rem; letter-spacing:.2px}

/* Primary (white liquid glass) */
.liquidGlass-wrapper.primary{padding:0.95rem 2rem; background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.28)); border:1px solid rgba(255,255,255,.55); box-shadow:0 10px 24px rgba(11,16,32,.15), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(11,16,32,.08);} 
.liquidGlass-wrapper.primary .liquidGlass-tint{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25))}
.liquidGlass-wrapper.primary .liquidGlass-text{color:var(--text); text-shadow:0 1px 0 rgba(255,255,255,.35)}
.liquidGlass-wrapper.primary:hover{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38)); box-shadow:0 12px 28px rgba(11,16,32,.18), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(11,16,32,.08)}
.liquidGlass-wrapper.primary:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.25),0 10px 24px rgba(11,16,32,.15)}
.liquidGlass-wrapper.primary:active{filter:brightness(.97)}

/* Ghost / Secondary (ultralight) */
.liquidGlass-wrapper.ghost{background:rgba(255,255,255,.08); padding:.9rem 1.5rem; border:1px solid rgba(255,255,255,.35); box-shadow:0 4px 14px -4px rgba(11,16,32,.22), inset 0 1px 0 rgba(255,255,255,.4);} 
.liquidGlass-wrapper.ghost .liquidGlass-tint{background:rgba(255,255,255,.08)}
.liquidGlass-wrapper.ghost .liquidGlass-text{color:var(--text)}
.liquidGlass-wrapper.ghost:hover{background:rgba(255,255,255,.14)}
.liquidGlass-wrapper.ghost:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.25)}
.liquidGlass-wrapper.ghost:active{background:rgba(255,255,255,.18)}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
  /* No movement variants already, keep for future-proofing */
}

/* Quiet text link CTA (secondary demoted, redesigned) */
.hero-cta .link-quiet{--q-bg:rgba(255,255,255,.0); --q-bg-hover:rgba(255,255,255,.55); position:relative; font-weight:600; font-size:.85rem; letter-spacing:.02em; color:var(--brand-dark-2); text-decoration:none; padding:.55rem .7rem .55rem; line-height:1; display:inline-flex; align-items:center; gap:.4rem; border-radius:12px; isolation:isolate; -webkit-backdrop-filter:saturate(160%) blur(6px); backdrop-filter:saturate(160%) blur(6px); background:var(--q-bg); transition:background .35s var(--easing), color .35s var(--easing)}
/* Gradient underline grow */
.hero-cta .link-quiet::after{content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; background:linear-gradient(90deg,var(--brand),var(--accent)); transform:scaleX(.25); transform-origin:left; opacity:.55; transition:transform .5s var(--easing), opacity .35s var(--easing)}
/* Soft halo / hairline border */
.hero-cta .link-quiet::before{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),rgba(255,255,255,0)); opacity:0; mix-blend-mode:overlay; transition:opacity .4s var(--easing)}
.hero-cta .link-quiet:hover{background:var(--q-bg-hover); color:var(--brand-dark);}
.hero-cta .link-quiet:hover::after{transform:scaleX(1); opacity:.9}
.hero-cta .link-quiet:hover::before{opacity:.7}
.hero-cta .link-quiet:focus-visible{outline:0; box-shadow:0 0 0 4px rgba(96,165,250,.4); background:var(--q-bg-hover)}
.hero-cta .link-quiet:active{background:rgba(255,255,255,.8)}

/* Modifier: subtle underline only (no pill background) */
.hero-cta .link-quiet.variant-underline{background:transparent; padding:.4rem .1rem .35rem}
.hero-cta .link-quiet.variant-underline:hover{background:transparent}
.hero-cta .link-quiet.variant-underline:focus-visible{box-shadow:none}
.hero-cta .link-quiet.variant-underline::before{display:none}

/* Modifier: arrow shift animation */
.hero-cta .link-quiet span.arrow{display:inline-block; transition:transform .45s var(--easing)}
.hero-cta .link-quiet:hover span.arrow{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .hero-cta .link-quiet::after{transition:none}
  .hero-cta .link-quiet span.arrow{transition:none}
}

/* Inline demoted link (Option A - redesigned) */
.link-inline{display:inline-flex; align-items:center; gap:.4rem; margin-top:0; font-weight:500; font-size:1rem; letter-spacing:.01em; color:rgba(30,58,138,.7); text-decoration:none; position:relative; padding:.25rem .1rem; line-height:1.2; transition:color .35s ease}
.link-inline .arrow{display:inline-block; font-size:.7rem; opacity:.7; transition:transform .35s var(--easing), opacity .35s ease}
.link-inline:hover{color:rgba(30,58,138,1)}
.link-inline:hover .arrow{transform:translateX(3px); opacity:1}
.link-inline:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(96,165,250,.35); border-radius:4px}
.link-inline:active{opacity:.8}

/* Global Sections */
section{padding:72px 0; border-top:1px solid var(--line)}
h2{font-size:var(--fs-h2); margin:0 0 1rem; line-height:1.15; letter-spacing:-.5px}
.muted{color:var(--muted)}

/* Two column layout */
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
@media (max-width:900px){.twocol{grid-template-columns:1fr}}

/* About specific */
.principles{list-style:none; margin:1.2rem 0 1.6rem; padding:0; display:flex; flex-wrap:wrap; gap:.55rem}
.principles li{padding:.45rem .85rem; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:.7rem; font-weight:600; letter-spacing:.05em; color:#1e293b; box-shadow:0 4px 10px rgba(2,6,23,.04)}
.about-visual{position:relative; width:100%; max-width:500px; margin-inline:auto}
.image-stack{position:relative; border-radius:28px; overflow:hidden; aspect-ratio:16/10; background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(185,28,28,.12)); box-shadow:0 24px 48px -12px rgba(2,6,23,.18),0 8px 24px -6px rgba(2,6,23,.12)}
.image-stack img{width:100%; height:100%; object-fit:cover}
.value-card{position:absolute; background:#ffffffcc; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:20px; padding:.85rem .95rem; width:190px; box-shadow:0 10px 30px rgba(2,6,23,.18); animation:fadeUp .7s ease both}
.value-card h4{margin:0 0 .25rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.value-card p{margin:0; font-size:.78rem; line-height:1.3; color:#334155}
.value-card.first{top:8%; right:-6%}
.value-card.second{bottom:6%; left:-6%; animation-delay:.1s}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}

/* Stats */
.stats-band{display:flex; gap:2rem; flex-wrap:wrap; margin:0 0 1.6rem}
.stat{display:flex; flex-direction:column}
.stat .count{font-size:1.9rem; font-weight:700; background:linear-gradient(90deg,var(--brand),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat label{font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}

/* Journey timeline */
.journey-band{background:linear-gradient(180deg,#f7f9ff 0%,#eef4ff 100%); padding:80px 0 64px; position:relative; overflow:hidden}
.timeline{display:flex; gap:2.5rem; flex-wrap:wrap; margin:48px 0 0; padding:0; list-style:none; position:relative}
.timeline::before{content:""; position:absolute; top:18px; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 50%,var(--accent) 100%); opacity:.35}
.milestone{position:relative; flex:1 1 180px; min-width:180px; padding-top:72px; text-align:center}
.milestone .year{position:absolute; top:0; left:50%; transform:translateX(-50%); background:#fff; border:2px solid var(--brand-2); color:#1e293b; font-weight:600; font-size:.8rem; /* fixed height for consistent center line alignment */ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 14px; border-radius:999px; box-shadow:0 6px 18px rgba(2,6,23,.12)}
.milestone h3{margin:.2rem 0 .4rem; font-size:.95rem}
.milestone p{margin:0; font-size:.78rem; line-height:1.35; color:#475569}
@media (max-width:780px){
  .timeline{flex-direction:column; gap:1.2rem; margin-top:32px}
  .timeline::before{display:none}
  /* Use a CSS var for consistent year badge width; increase padding-left so text never overlaps the badge */
  .milestone{--year-width:60px; flex:none; padding:0 0 0 calc(var(--year-width) + 14px); text-align:left; min-width:0; margin:0; position:relative}
  .milestone + .milestone{margin-top:.6rem}
  .milestone .year{left:0; transform:none; width:var(--year-width); padding:0 0; font-size:.78rem}
  .milestone h3{margin:.1rem 0 .3rem}
}

/* Mission section */
.mission-section{position:relative; padding:90px 0 88px; background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%); overflow:hidden}
.engage-card{display:flex; flex-direction:column; gap:1.2rem; padding:1.6rem 1.7rem 1.8rem; background:rgba(255,255,255,.6); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border:1px solid var(--line); border-radius:26px; position:relative; overflow:hidden; /* positioning vars for engagement steps */ --engage-badge-left:1rem; --engage-badge-size:38px; --engage-gap:1rem}
.engage-overline{margin:0; font:600 11px/1.2 var(--font-system); letter-spacing:.18em; text-transform:uppercase; color:var(--brand); position:relative; padding-left:1.1rem}
.engage-overline::before{content:""; position:absolute; left:0; top:50%; width:6px; height:6px; background:linear-gradient(135deg,var(--brand),var(--accent)); border-radius:50%; transform:translateY(-50%)}
/* Engagement flow (refined alignment using CSS variables) */
.engage-steps{list-style:none; margin:.35rem 0 0; padding:0; display:flex; flex-direction:column; gap:var(--engage-gap); position:relative}
/* Master vertical rail perfectly centered under badges */
.engage-steps::before{content:""; position:absolute; left:calc(var(--engage-badge-left) + var(--engage-badge-size)/2); top:calc(var(--engage-badge-size)/2 + .25rem); bottom:calc(var(--engage-badge-size)/2 - .25rem); width:2px; background:linear-gradient(var(--brand), var(--accent)); opacity:.33; border-radius:2px; pointer-events:none}
.engage-steps li{position:relative; background:linear-gradient(140deg,#ffffff 0%,#f2f7ff 100%); border:1px solid var(--line); border-radius:18px; padding:1rem 1.1rem 1rem calc(var(--engage-badge-left) + var(--engage-badge-size) + 1.1rem); overflow:hidden; opacity:0; transform:translateY(22px); box-shadow:0 4px 10px -4px rgba(15,23,42,.06)}
.engage-steps li:hover{box-shadow:0 8px 22px -6px rgba(15,23,42,.15); transform:translateY(18px)}
.engage-steps li.reveal{opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s var(--easing), box-shadow .4s var(--easing)}
.engage-steps li::before{content:attr(data-step); position:absolute; left:var(--engage-badge-left); top:1rem; width:var(--engage-badge-size); height:var(--engage-badge-size); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.7rem; letter-spacing:.16em; color:var(--brand); background:#fff; background-clip:padding-box; border:2px solid var(--brand-2); border-radius:12px; box-shadow:0 4px 10px -2px rgba(37,99,235,.25), inset 0 0 0 1px rgba(37,99,235,.18)}
/* Individual segment extension so rail passes behind cards */
.engage-steps li:not(:last-child)::after{content:""; position:absolute; left:calc(var(--engage-badge-left) + var(--engage-badge-size)/2 - 1px); top:calc(1rem + var(--engage-badge-size)); bottom:calc(-1 * (var(--engage-gap) / 2)); width:2px; background:linear-gradient(var(--brand-2), rgba(37,99,235,0)); opacity:.45; pointer-events:none}
.engage-steps li h3{margin:.15rem 0 .45rem; font-size:1rem}
.engage-steps li p{margin:0; font-size:.8rem; line-height:1.35; color:#475569}
@media (max-width:640px){
  .engage-card{--engage-badge-left:.85rem; --engage-badge-size:34px; --engage-gap:.85rem}
  .engage-steps li{padding:1rem .9rem 1rem calc(var(--engage-badge-left) + var(--engage-badge-size) + .9rem)}
  .engage-steps li::before{top:.95rem}
}

.mission-operating{margin:1.4rem 0 0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.op-card{position:relative; background:linear-gradient(135deg,#ffffff 0%,#f3f8ff 100%); border:1px solid var(--line); border-radius:18px; padding:1rem .95rem .95rem 1rem; display:grid; grid-template-columns:42px 1fr; gap:.75rem; align-items:start; overflow:hidden; opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s var(--easing)}
.op-card.reveal{opacity:1; transform:translateY(0)}
.op-icon{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(185,28,28,.12)); color:#1e3a8a; box-shadow:inset 0 0 0 1px rgba(37,99,235,.25)}
.op-card h3{margin:0 0 .35rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#1e293b}
.op-card p{margin:0; font-size:.74rem; line-height:1.35; color:#475569}

/* Services (expanded) */
.services-intro{max-width:640px}
.service-filters{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.2rem 0 1.4rem}
.service-filters button{border:1px solid var(--line); background:#fff; padding:.5rem .85rem; border-radius:999px; font-size:.7rem; letter-spacing:.12em; font-weight:600; text-transform:uppercase; cursor:pointer; color:#1e293b; transition:.25s var(--easing)}
.service-filters button[aria-pressed="true"], .service-filters button:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.services-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.05rem; margin-top:1.2rem}
.service-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; padding:1.25rem 1.2rem 1.1rem; background:linear-gradient(135deg,#ffffff 0%,#f5f8ff 100%); box-shadow:0 4px 8px -2px rgba(15,23,42,.08),0 14px 32px -10px rgba(15,23,42,.12); transition:.3s var(--easing); opacity:0; transform:translateY(18px)}
.service-card.reveal{opacity:1; transform:translateY(0)}
.service-card:hover{transform:translateY(-4px); box-shadow:0 10px 24px -4px rgba(15,23,42,.14),0 22px 44px -12px rgba(15,23,42,.18)}
.service-card .icon-wrap{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(185,28,28,.10)); color:#1e3a8a; margin:0 0 .75rem; box-shadow:inset 0 0 0 1px rgba(37,99,235,.25)}
.service-card .overline{font:600 10px/1.1 var(--font-system); letter-spacing:.18em; text-transform:uppercase; color:var(--brand); margin:0 0 .45rem}
.service-card h3{margin:.05rem 0 .55rem; font-size:1rem; line-height:1.2}
.service-card .desc{margin:0; font-size:.8rem; line-height:1.4; color:#475569}
.service-card .impact{margin:.7rem 0 0; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--brand)}
.service-card .expand{align-self:flex-start; margin:.85rem 0 0; font-size:.7rem; border:1px solid var(--line); background:#fff; padding:.45rem .7rem; border-radius:8px; cursor:pointer; font-weight:600; letter-spacing:.05em; display:inline-flex; gap:.4rem; align-items:center}
.service-card .expand svg{width:14px; height:14px; transition:.3s var(--easing)}
.service-card .expand[aria-expanded="true"] svg{transform:rotate(180deg)}
.service-card .details{margin:.65rem 0 0; font-size:.75rem; line-height:1.35; border-top:1px solid var(--line); padding-top:.6rem; animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

.service-count{margin:.4rem 0 0; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.trust-band{margin:2.5rem 0 0; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,#ffffff 0%,#f2f6ff 100%); display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; font-size:.75rem; line-height:1.2}
.trust-band .label{font-weight:700; letter-spacing:.12em; color:#1e293b}
.trust-badge{display:inline-flex; align-items:center; gap:.4rem; background:#fff; padding:.5rem .7rem; border:1px solid var(--line); border-radius:999px; font-weight:600; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:#1e3a8a; position:relative; overflow:hidden}
.trust-badge::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(37,99,235,.18),transparent 65%); opacity:.55; pointer-events:none}

/* Differentiators */
#why{position:relative; background:linear-gradient(180deg,#f6f9ff 0%,#eef4ff 100%)}
.why-header{max-width:720px; margin:0 0 1.8rem}
.why-lead{font-size:1.05rem; line-height:1.5; color:#334155; margin:.8rem 0 0; max-width:62ch}
.diff-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:stretch}
.diff{position:relative; background:linear-gradient(140deg,#ffffff 0%,#eef5ff 35%,#f8fbff 100%); border:1px solid var(--line); border-radius:22px; padding:1.05rem 1.1rem 1.2rem; display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s var(--easing)}
.diff.reveal{opacity:1; transform:translateY(0)}
.diff .overline{margin:0 0 .55rem; font:600 10px/1.1 var(--font-system); letter-spacing:.18em; text-transform:uppercase; color:var(--brand)}
.diff h3{margin:.15rem 0 .4rem; font-size:1rem; line-height:1.25; color:#0f172a}
.diff p{margin:.2rem 0 0; font-size:.78rem; line-height:1.4; color:#475569}
.diff p.problem{color:var(--accent); font-weight:600}
.diff p.result{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-top:.75rem; color:var(--brand)}
.proof-band{margin:2rem 0 0; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,#ffffff 0%,#f2f6ff 100%); font-size:.78rem; line-height:1.45; color:#334155; box-shadow:0 6px 22px -6px rgba(2,6,23,.12)}

/* CTA */
.cta{padding:64px; border-radius:var(--radius); background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(185,28,28,.10)); border:1px solid var(--line); text-align:center; box-shadow:var(--shadow)}

/* Footer */
footer{padding:48px 0; border-top:1px solid var(--line); background:#fff}
.foot{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:center}
@media (max-width:820px){.foot{grid-template-columns:1fr; text-align:center}}
.social{display:flex; gap:.6rem}
.chip{display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--line); color:#1f2a44; font-size:.85rem; background:#fff}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Motion preference fallbacks */
@media (prefers-reduced-motion:reduce){
  .diff,.service-card,.op-card,.engage-steps li{opacity:1 !important; transform:none !important; transition:none !important}
  .hero-glass-container:hover{transform:none}
}