:root{
    --ink:#0E1526;
    --paper:#F6F7F9;
    --surface:#FFFFFF;
    --primary:#2E4BFF;
    --primary-dark:#1B2E99;
    --line:#DEE2EA;
    --accent:#17B890;
    --muted:#5B6472;
    --radius:14px;
    --maxw:1200px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em;}
  .mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  section{position:relative; padding:120px 0;}

  /* Signature spine: a vertical circuit line with nodes tracking each section,
     representing the systems integration this firm sells */
  .spine{
    position:fixed; top:0; left:18px; bottom:0; width:2px;
    background:var(--line); z-index:5; display:none;
  }
  .spine-fill{
    position:absolute; top:0; left:0; width:100%; height:0;
    background:var(--primary); transition:height .15s linear;
  }
  .spine-node{
    position:absolute; left:50%; transform:translateX(-50%);
    width:9px; height:9px; border-radius:50%;
    background:var(--surface); border:2px solid var(--line);
    transition:all .25s ease;
  }
  .spine-node.active{ border-color:var(--primary); background:var(--primary); box-shadow:0 0 0 4px rgba(46,75,255,0.15);}
  @media(min-width:1160px){ .spine{display:block;} }

  /* Utility bar */
  .topbar{
    background:var(--ink); color:#C9CEDB; font-size:12.5px;
  }
  .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:9px 32px; gap:20px; }
  .topbar-left{ display:flex; gap:26px; flex-wrap:wrap; }
  .topbar a{ color:#C9CEDB; transition:color .2s; }
  .topbar a:hover{ color:#fff; }
  .topbar-left span{ display:inline-flex; align-items:center; gap:7px; }
  @media(max-width:760px){ .topbar-left span:nth-child(3){ display:none; } }
  @media(max-width:560px){ .topbar{ display:none; } }

  /* Nav */
  header{
    position:sticky; top:0; z-index:20;
    background:rgba(246,247,249,0.86); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; }
  .logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; display:flex; align-items:center; gap:9px;}
  .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--primary);}
  .logo-img{ height:52px; width:auto; display:block; }
  .navlinks{ display:flex; gap:36px; font-size:14.5px; font-weight:500; }
  .navlinks a{ color:var(--muted); transition:color .2s; position:relative; }
  .navlinks a:hover, .navlinks a:focus-visible{ color:var(--ink); }
  .navcta{
    background:var(--ink); color:#fff; padding:10px 20px; border-radius:100px;
    font-size:14px; font-weight:500;
  }
  .navcta:hover{ background:var(--primary); }

  /* Services nav dropdown (desktop) — <details>/<summary> so it works on
     click/tap without extra JS; a small outside-click handler in main.js
     just closes it, see the guarded querySelectorAll block there. */
  .nav-dropdown{ position:relative; }
  .nav-dropdown > summary{
    display:flex; align-items:center; gap:5px; cursor:pointer; list-style:none;
    color:var(--muted); transition:color .2s;
  }
  .nav-dropdown > summary::-webkit-details-marker{ display:none; }
  .nav-dropdown > summary:hover, .nav-dropdown > summary:focus-visible{ color:var(--ink); }
  .nav-dropdown .nav-caret{ width:9px; height:9px; transition:transform .2s ease; }
  .nav-dropdown[open] > summary .nav-caret{ transform:rotate(180deg); }
  .nav-dropdown-panel{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
    background:var(--paper); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 24px 48px -24px rgba(14,21,38,0.28); padding:8px; min-width:260px;
    display:flex; flex-direction:column; gap:2px; z-index:20;
  }
  .nav-dropdown-panel a{
    padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500;
    color:var(--ink); white-space:nowrap; position:static;
  }
  .nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible{ background:var(--surface); color:var(--primary); }

  .navtoggle{
    display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--surface); align-items:center; justify-content:center; cursor:pointer;
    flex-shrink:0;
  }
  .navtoggle span, .navtoggle span::before, .navtoggle span::after{
    display:block; width:18px; height:2px; background:var(--ink); position:relative;
    transition:transform .25s ease, opacity .25s ease, background .25s ease;
  }
  .navtoggle span::before, .navtoggle span::after{ content:''; position:absolute; left:0; }
  .navtoggle span::before{ top:-6px; }
  .navtoggle span::after{ top:6px; }
  .navtoggle[aria-expanded="true"] span{ background:transparent; }
  .navtoggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .navtoggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

  .mobile-menu{
    position:fixed; inset:0; z-index:30;
    background:rgba(14,21,38,0.55); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .mobile-menu.open{ opacity:1; pointer-events:auto; }
  .mobile-menu-panel{
    position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw);
    background:var(--surface); box-shadow:-16px 0 40px rgba(14,21,38,0.18);
    padding:24px 28px; display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .mobile-menu.open .mobile-menu-panel{ transform:translateX(0); }
  .mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
  .mobile-menu-close{
    width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
  }
  .mobile-navlinks{ display:flex; flex-direction:column; gap:6px; }
  .mobile-navlinks a{
    font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; color:var(--ink);
    padding:12px 4px; border-bottom:1px solid var(--line);
  }
  .mobile-navlinks .nav-dropdown{ border-bottom:1px solid var(--line); }
  .mobile-navlinks .nav-dropdown > summary{
    font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; color:var(--ink);
    padding:12px 4px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .mobile-navlinks .nav-dropdown .nav-caret{ width:14px; height:14px; flex-shrink:0; }
  .mobile-navlinks .nav-dropdown-panel{
    position:static; transform:none; box-shadow:none; border:none; background:transparent;
    padding:0 0 10px 4px; min-width:0; gap:0;
  }
  .mobile-navlinks .nav-dropdown-panel a{
    font-family:'Inter',sans-serif; font-size:15.5px; font-weight:500; color:var(--muted);
    padding:9px 4px; border-bottom:none;
  }
  .mobile-menu .navcta{ display:inline-flex; margin-top:28px; text-align:center; justify-content:center; }

  /* 980px, not 820px: with 7 nav items (added "Products") the nav overflows
     and wraps/collides with the CTA button below ~960px — verified by
     screenshot at 850px showing "Case Studies" wrapping into "Start a
     project". Bumped with margin above that measured overflow point. */
  @media(max-width:980px){
    .navlinks{ display:none; }
    header .navcta{ display:none; }
    .navtoggle{ display:flex; }
  }
  @media(min-width:981px){ .mobile-menu{ display:none !important; } }

  /* Hero */
  .hero{ padding:100px 0 90px; overflow:hidden; }
  .hero .wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--muted); text-transform:uppercase;
    margin-bottom:22px;
  }
  .eyebrow::before{ content:''; width:16px; height:1px; background:var(--primary); }
  h1.hero-title{
    font-size:clamp(38px,5.4vw,64px); font-weight:700; line-height:1.04;
    margin-bottom:26px;
  }
  h1.hero-title .accent-word{ color:var(--primary); }
  .hero-sub{ font-size:17.5px; color:var(--muted); max-width:480px; margin-bottom:36px; }
  .btnrow{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border-radius:100px; font-weight:600; font-size:14.5px;
    transition:transform .2s, background .2s, color .2s, box-shadow .2s;
  }
  .btn-primary{ background:var(--ink); color:#fff; }
  .btn-primary:hover{ background:var(--primary); transform:translateY(-2px); box-shadow:0 10px 24px rgba(46,75,255,0.25); }
  .btn-ghost{ border:1px solid var(--line); color:var(--ink); background:var(--surface); }
  .btn-ghost:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }

  .cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--ink); color:#C9CEDB; padding:18px 20px;
    box-shadow:0 -8px 24px rgba(0,0,0,0.18);
  }
  .cookie-banner-inner{
    max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap;
  }
  .cookie-banner-inner p{ font-size:13.5px; line-height:1.5; margin:0; max-width:640px; }
  .cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
  .cookie-banner-actions .btn{ padding:10px 20px; font-size:13.5px; }
  .cookie-banner-actions .btn-ghost{ border-color:#3A4358; color:#C9CEDB; background:transparent; }
  .cookie-banner-actions .btn-ghost:hover{ border-color:var(--primary); color:#fff; }

  /* Reused mini data-table primitive (screenshots section) */
  .dash-table{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .dash-row{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; padding:9px 14px; align-items:center; border-top:1px solid var(--line); }
  .dash-row:first-child{ border-top:none; background:var(--surface); }
  .dash-row span{ height:7px; border-radius:4px; background:var(--line); }
  .dash-row .fill{ background:var(--primary); opacity:.5; }

  /* Hero visual: connected ecosystem diagram */
  .hero-visual{ position:relative; width:100%; padding:58px 40px 40px; }
  .ecosys-visual{ position:relative; aspect-ratio:1/1; }
  .ecosys-glow{
    position:absolute; inset:6%; border-radius:50%;
    background:radial-gradient(circle, rgba(46,75,255,0.14), rgba(23,184,144,0.06) 55%, transparent 75%);
    filter:blur(18px); z-index:0;
  }
  .ecosys-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
  .ecosys-line{ stroke:var(--line); stroke-width:1.4; fill:none; }
  .ecosys-line.live{ stroke:url(#ecoLineGrad); stroke-dasharray:5 7; animation:ecoDash 7s linear infinite; opacity:.85; }
  @keyframes ecoDash{ to{ stroke-dashoffset:-120; } }
  @media(prefers-reduced-motion:reduce){ .ecosys-line.live{ animation:none; } }

  .ecosys-core{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
    width:82px; height:82px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #2a3557, var(--ink) 65%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    box-shadow:0 22px 40px -16px rgba(14,21,38,0.5), 0 0 0 6px rgba(46,75,255,0.08);
    color:#fff;
  }
  .ecosys-core .dot{ width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 12px 2px rgba(46,75,255,0.7); }
  .ecosys-core span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; letter-spacing:.02em; }

  .ecosys-node{
    position:absolute; transform:translate(-50%,-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    animation:floaty 6s ease-in-out infinite;
  }
  .ecosys-icon{
    width:50px; height:50px; border-radius:15px;
    background:linear-gradient(155deg, var(--surface), var(--paper));
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 28px -14px rgba(14,21,38,0.3);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .ecosys-icon svg{ width:22px; height:22px; stroke:var(--primary); transition:stroke .25s ease; }
  .ecosys-node:hover .ecosys-icon{
    transform:translateY(-3px) scale(1.06); border-color:var(--primary);
    box-shadow:0 18px 34px -14px rgba(46,75,255,0.35);
  }
  .ecosys-node:hover .ecosys-icon svg{ stroke:var(--accent); }
  .ecosys-label{
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.03em; color:var(--muted);
    background:var(--paper); padding:2px 8px; border-radius:100px; white-space:nowrap;
  }
  @media(prefers-reduced-motion:reduce){ .ecosys-node{ animation:none; } }

  @keyframes floaty{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-8px); } }

  @media(max-width:640px){
    .ecosys-icon{ width:42px; height:42px; border-radius:12px; }
    .ecosys-icon svg{ width:18px; height:18px; }
    .ecosys-core{ width:68px; height:68px; }
    .ecosys-label{ font-size:9px; padding:2px 6px; }
  }

  /* Trust strip */
  .trust-strip{ display:flex; flex-wrap:wrap; gap:11px 24px; margin-top:36px; padding-top:26px; border-top:1px solid var(--line); }
  .trust-item{
    font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; letter-spacing:.02em;
    display:inline-flex; align-items:center; gap:7px;
  }
  .trust-item::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }
  .trust-item strong{ color:var(--ink); font-family:'Inter',sans-serif; font-weight:600; }

  @media(max-width:960px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-visual{ width:100%; max-width:420px; margin:0 auto; padding:48px 26px 30px; }
  }

  /* Ecosystem strip */
  .ecosystem-strip{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; }
  .eco-label{ font-size:11.5px; color:var(--muted); text-align:center; margin-bottom:20px; }
  .eco-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .eco-badge{
    display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:100px;
    border:1px solid var(--line); font-size:13px; font-weight:500; color:var(--muted);
    filter:grayscale(1); opacity:.7; transition:filter .2s, opacity .2s, border-color .2s, color .2s, background .2s;
  }
  .eco-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--primary); flex-shrink:0; }
  .eco-badge:hover{ filter:grayscale(0); opacity:1; border-color:var(--primary); color:var(--ink); background:rgba(46,75,255,0.05); }

  /* Section headers */
  .section-head{ max-width:820px; margin-bottom:56px; }
  .section-head .eyebrow{ margin-bottom:16px; }
  .section-head h2{ font-size:clamp(28px,3.6vw,40px); font-weight:600; margin-bottom:16px; }
  .section-head p{ color:var(--muted); font-size:16px; }

  /* About */
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
  .about-copy p{ color:var(--muted); margin-bottom:18px; font-size:16px; }
  .pillars{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
  .pillar{
    border:1px solid var(--line); border-radius:var(--radius); padding:20px;
    background:var(--surface);
  }
  .pillar .tag{ display:block; font-size:11px; color:var(--primary); margin-bottom:8px; }
  .pillar h4{ font-size:15px; font-weight:600; margin-bottom:6px; }
  .pillar p{ font-size:13.5px; color:var(--muted); margin:0; }
  @media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }

  .values-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
  .value-chip{
    border:1px solid var(--line); border-radius:100px; padding:8px 16px;
    font-size:13px; font-family:'IBM Plex Mono',monospace; color:var(--ink);
    background:var(--surface);
  }

  /* About + Team merge divider */
  .about-team-divider{
    margin:64px 0 40px; padding-top:48px; border-top:1px solid var(--line); max-width:640px;
  }
  .about-team-divider .eyebrow{ margin-bottom:16px; }
  .about-team-divider h3{ font-size:26px; font-weight:600; margin-bottom:10px; }
  .about-team-divider p{ color:var(--muted); font-size:15px; }

  /* Services */
  #services{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .service-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px 28px; display:flex; flex-direction:column;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .service-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -26px rgba(14,21,38,0.25); border-color:var(--primary); }
  .service-card .icon{
    width:44px; height:44px; border-radius:12px; background:var(--surface);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    transition:background .25s ease;
  }
  .service-card .icon svg{ width:20px; height:20px; stroke:var(--primary); transition:stroke .25s ease; }
  .service-card:hover .icon{ background:var(--primary); }
  .service-card:hover .icon svg{ stroke:#fff; }
  .service-card .num{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted); margin-bottom:10px; display:block; }
  .service-card h3{ font-size:18px; font-weight:600; margin-bottom:10px; }
  .service-card p{ font-size:14px; color:var(--muted); margin-bottom:16px; }
  .service-card ul{ list-style:none; }
  .service-card li{ font-size:13.5px; color:var(--ink); padding:5px 0; border-top:1px dashed var(--line); }
  .service-card li:first-child{ border-top:none; }
  .service-learn{
    display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
    color:var(--primary); margin-top:auto; padding-top:20px;
  }
  .service-learn svg{ width:14px; height:14px; transition:transform .2s ease; }
  .service-card:hover .service-learn svg{ transform:translateX(4px); }
  @media(max-width:920px){ .service-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:640px){ .service-grid{ grid-template-columns:1fr; } }

  /* Verticals */
  .vert-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
  .vert-card{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .vert-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -26px rgba(14,21,38,0.25); border-color:var(--primary); }
  .vert-visual{
    height:118px; background:var(--surface); border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  }
  .vert-visual::before{
    content:''; position:absolute; width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle, rgba(46,75,255,0.08), transparent 70%);
    top:-50px; right:-50px;
  }
  .vert-visual .icon{
    width:52px; height:52px; border-radius:14px; background:var(--ink);
    display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
    transition:background .25s ease;
  }
  .vert-visual .icon svg{ width:24px; height:24px; stroke:#fff; }
  .vert-card:hover .vert-visual .icon{ background:var(--primary); }
  .vert-body{ padding:26px 28px 28px; }
  .vert-card h4{ font-size:16px; font-weight:600; margin-bottom:8px; }
  .vert-card p{ font-size:13.5px; color:var(--muted); margin-bottom:18px; }
  .vert-cta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--primary); }
  .vert-cta svg{ width:14px; height:14px; transition:transform .2s ease; }
  .vert-card:hover .vert-cta svg{ transform:translateX(4px); }
  @media(max-width:820px){ .vert-row{ grid-template-columns:1fr; } }

  /* STOS Delivery Framework */
  #process{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background-color:var(--surface);
    background-image:radial-gradient(circle, rgba(14,21,38,0.08) 1px, transparent 1px);
    background-size:24px 24px;
  }
  .framework-container{
    position:relative; background:var(--paper); border:1px solid var(--line); border-radius:22px;
    padding:44px 40px 40px;
  }
  .framework-container::before{
    content:''; position:absolute; top:14px; left:14px; width:20px; height:20px;
    border-top:2px solid var(--primary); border-left:2px solid var(--primary); opacity:.3;
  }
  .framework-container::after{
    content:''; position:absolute; bottom:14px; right:14px; width:20px; height:20px;
    border-bottom:2px solid var(--primary); border-right:2px solid var(--primary); opacity:.3;
  }
  .framework-intro{
    position:relative; z-index:1; max-width:740px; margin:0 auto 36px; text-align:center;
    font-size:14.5px; color:var(--muted); line-height:1.65;
  }
  .framework-grid{ position:relative; z-index:1; display:flex; flex-direction:column; gap:20px; }
  .framework-row{ display:flex; align-items:stretch; gap:0; }
  .framework-card{
    flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 26px; position:relative; overflow:hidden;
    transition:opacity .6s ease, transform .6s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .framework-row:nth-child(1) .framework-card:nth-child(1){ transition-delay:0s; }
  .framework-row:nth-child(1) .framework-card:nth-child(3){ transition-delay:.08s; }
  .framework-row:nth-child(2) .framework-card:nth-child(1){ transition-delay:.16s; }
  .framework-row:nth-child(2) .framework-card:nth-child(3){ transition-delay:.24s; }
  .framework-row:nth-child(3) .framework-card:nth-child(1){ transition-delay:.32s; }
  .framework-row:nth-child(3) .framework-card:nth-child(3){ transition-delay:.4s; }
  .framework-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(14,21,38,0.22); border-color:var(--primary); }
  .framework-bignum{
    position:absolute; top:6px; right:16px; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:60px; line-height:1; color:transparent; -webkit-text-stroke:1px var(--line); z-index:0;
    transition:-webkit-text-stroke-color .3s ease;
  }
  .framework-card:hover .framework-bignum{ -webkit-text-stroke-color:rgba(46,75,255,0.3); }
  .framework-icon{
    width:44px; height:44px; border-radius:12px; background:var(--paper); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px; position:relative; z-index:1;
    transition:transform .3s ease, background .3s ease, border-color .3s ease;
  }
  .framework-icon svg{ width:20px; height:20px; stroke:var(--primary); transition:stroke .3s ease; }
  .framework-card:hover .framework-icon{ transform:scale(1.05); background:var(--primary); border-color:var(--primary); }
  .framework-card:hover .framework-icon svg{ stroke:#fff; }
  .framework-stage{ position:relative; z-index:1; font-size:11px; color:var(--primary); display:block; margin-bottom:8px; }
  .framework-card h3{ position:relative; z-index:1; font-size:18px; font-weight:600; margin-bottom:8px; }
  .framework-card > p{ position:relative; z-index:1; font-size:13.5px; color:var(--muted); margin-bottom:14px; }
  .framework-highlights{ position:relative; z-index:1; list-style:none; display:flex; flex-direction:column; gap:7px; }
  .framework-highlights li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink); }
  .framework-highlights li svg{ width:13px; height:13px; stroke:var(--accent); flex-shrink:0; }

  /* Go-live milestone emphasis */
  .framework-card--featured{
    border-color:rgba(46,75,255,0.35);
    background:linear-gradient(175deg, rgba(46,75,255,0.05), var(--surface) 60%);
  }
  .framework-card--featured:hover{ border-color:var(--primary); }
  .framework-card--featured .framework-icon{ background:var(--primary); border-color:var(--primary); }
  .framework-card--featured .framework-icon svg{ stroke:#fff; }
  .framework-milestone{
    position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px;
    font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--primary);
    background:rgba(46,75,255,0.08); border:1px solid rgba(46,75,255,0.25); border-radius:100px;
    padding:4px 10px; margin-bottom:12px;
  }

  /* Connector: a light link, not a directional arrow */
  .framework-arrow{ flex:0 0 44px; display:flex; align-items:center; justify-content:center; }
  .framework-arrow svg{ width:100%; height:16px; overflow:visible; }
  .fw-line{ stroke:var(--line); stroke-width:1.5; }
  .fw-dot{ fill:var(--primary); opacity:.4; animation:fwPulse 3.4s ease-in-out infinite; }
  @keyframes fwPulse{ 0%,55%,100%{ opacity:.35; } 25%{ opacity:.7; } }
  @media(prefers-reduced-motion:reduce){ .fw-dot{ animation:none; } }

  .framework-trust{
    margin-top:40px; border:1px solid var(--line); border-radius:100px; padding:16px 32px;
    display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; background:var(--surface);
  }
  .framework-trust-item{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; }
  .framework-trust-item svg{ width:15px; height:15px; stroke:var(--accent); flex-shrink:0; }

  .framework-note{
    margin-top:20px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px;
    padding:18px 24px; background:var(--surface); font-size:13.5px; color:var(--muted); line-height:1.6;
  }

  @media(max-width:820px){
    .framework-row{ flex-direction:column; }
    .framework-arrow{ flex:0 0 auto; width:100%; height:26px; position:relative; }
    .framework-arrow svg{ display:none; }
    .framework-arrow::before{
      content:''; position:absolute; left:50%; top:0; bottom:0; width:1.5px; background:var(--line); transform:translateX(-50%);
    }
    .framework-arrow::after{
      content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
      background:var(--primary); opacity:.45; transform:translate(-50%,-50%);
    }
  }
  @media(max-width:640px){
    .framework-container{ padding:32px 22px 28px; border-radius:18px; }
  }
  @media(max-width:560px){
    .framework-bignum{ font-size:46px; }
    .framework-trust{ border-radius:var(--radius); padding:20px; gap:12px 22px; }
  }

  /* Scroll reveal */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.revealed{ opacity:1; transform:translateY(0); }
  @media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* Microsoft ecosystem (deep section) */
  .eco-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .eco-card{
    border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; background:var(--surface);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .eco-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -22px rgba(14,21,38,0.2); border-color:var(--primary); }
  .eco-card .icon{
    width:40px; height:40px; border-radius:10px; background:var(--ink);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .eco-card .icon svg{ width:19px; height:19px; stroke:#fff; }
  .eco-card h4{ font-size:15px; font-weight:600; margin-bottom:6px; }
  .eco-card p{ font-size:13px; color:var(--muted); }
  @media(max-width:920px){ .eco-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .eco-grid{ grid-template-columns:1fr; } }

  /* Business Solutions in Action */
  .solutions-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .solution-card{
    border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);
    display:flex; flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .solution-card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -26px rgba(14,21,38,0.28); border-color:var(--primary); }
  .solution-visual{
    padding:30px; background:var(--paper); border-bottom:1px solid var(--line);
    min-height:176px; display:flex; align-items:center; justify-content:center;
    transition:transform .4s ease;
  }
  .solution-card:hover .solution-visual{ transform:scale(1.02); }
  .solution-body{ padding:26px 28px 28px; display:flex; flex-direction:column; flex:1; }
  .solution-body h3{ font-size:19px; font-weight:600; margin-bottom:8px; }
  .solution-body > p{ font-size:14px; color:var(--muted); margin-bottom:18px; }
  .solution-highlights{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; margin-bottom:20px; }
  .solution-highlight{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); }
  .solution-highlight::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }
  .solution-learn{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--primary); margin-top:auto; }
  .solution-learn svg{ width:14px; height:14px; transition:transform .2s ease; }
  .solution-card:hover .solution-learn svg{ transform:translateX(4px); }

  .solutions-note{
    margin-top:32px; border:1px solid var(--line); border-left:3px solid var(--primary); border-radius:12px;
    padding:20px 26px; background:var(--surface); font-family:'Space Grotesk',sans-serif; font-size:15.5px;
    font-weight:500; color:var(--ink); line-height:1.55;
  }
  .solutions-note strong{ color:var(--primary); }

  /* Mini mockup primitives used inside solution visuals */
  .sol-kpis{ display:flex; gap:10px; margin-bottom:14px; width:100%; }
  .sol-kpi{ flex:1; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface); }
  .sol-kpi-label{ font-size:9px; color:var(--muted); display:block; margin-bottom:4px; letter-spacing:.04em; }
  .sol-kpi-val{ font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; color:var(--ink); }
  .sol-kpi-val.accent{ color:var(--accent); }
  .mock-bars{ display:flex; align-items:flex-end; gap:6px; height:70px; width:100%; }
  .mock-bars span{ flex:1; background:var(--line); border-radius:3px 3px 0 0; }
  .mock-bars span.hi{ background:var(--primary); }
  .mock-donut{ width:76px; height:76px; border-radius:50%; margin:0 auto; background:conic-gradient(var(--primary) 0 62%, var(--accent) 62% 85%, var(--line) 85% 100%); position:relative; flex-shrink:0; }
  .mock-donut::after{ content:''; position:absolute; inset:14px; border-radius:50%; background:var(--paper); }
  .mock-list{ display:flex; flex-direction:column; gap:8px; width:100%; }
  .mock-list-row{ display:flex; align-items:center; gap:8px; }
  .mock-list-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; }
  .mock-list-row span:last-child{ height:7px; border-radius:4px; background:var(--line); flex:1; }
  .mock-phone{ width:104px; flex-shrink:0; border:6px solid var(--ink); border-radius:20px; overflow:hidden; background:var(--surface); }
  .mock-phone-head{ background:var(--ink); height:14px; }
  .mock-phone-body{ padding:12px 10px; display:flex; flex-direction:column; gap:8px; }
  .mock-phone-body .mock-card{ border:1px solid var(--line); border-radius:8px; padding:8px; }
  .mock-phone-body .mock-card .bar{ height:6px; border-radius:3px; background:var(--line); margin-bottom:5px; }
  .mock-phone-body .mock-card .bar.short{ width:50%; }
  .mock-pos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
  .mock-pos-item{ border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--surface); }
  .mock-pos-item .bar{ height:6px; border-radius:3px; background:var(--line); margin-bottom:5px; }
  .mock-pos-total{ grid-column:1/-1; border-radius:8px; background:var(--ink); color:#fff; padding:9px 12px; display:flex; justify-content:space-between; font-size:12px; font-weight:600; }
  .solution-visual-split{ display:flex; align-items:center; gap:18px; width:100%; }
  .solution-visual-split .mock-list{ flex:1; }

  @media(max-width:920px){ .solutions-grid{ grid-template-columns:1fr; } }
  @media(max-width:640px){
    .solutions-grid{
      display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:16px;
      overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; margin:0 -4px;
    }
    .solution-card{ scroll-snap-align:start; }
  }

  /* Case studies */
  .case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .case-card{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:26px;
    display:flex; flex-direction:column; gap:16px; position:relative;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .case-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(14,21,38,0.22); border-color:var(--primary); }
  .case-sample{
    position:absolute; top:14px; right:14px; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:3px 9px;
  }
  .case-industry{ font-size:11px; color:var(--primary); }
  .case-card h3{ font-size:18px; font-weight:600; }
  .case-block .case-label{ font-size:10.5px; color:var(--muted); display:block; margin-bottom:5px; }
  .case-block p{ font-size:13.5px; color:var(--ink); line-height:1.5; }
  .case-tech{ display:flex; flex-wrap:wrap; gap:6px; }
  .tech-chip{ font-size:11px; border:1px solid var(--line); border-radius:100px; padding:4px 10px; color:var(--muted); background:var(--paper); }
  .case-results{ display:grid; grid-template-columns:1fr 1fr; gap:10px; border-top:1px dashed var(--line); padding-top:14px; }
  .case-result strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:20px; color:var(--primary); }
  .case-result span{ font-size:11.5px; color:var(--muted); }
  .case-learn{
    display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
    color:var(--primary); margin-top:auto;
  }
  .case-learn svg{ width:14px; height:14px; transition:transform .2s ease; }
  .case-card:hover .case-learn svg{ transform:translateX(4px); }
  @media(max-width:920px){ .case-grid{ grid-template-columns:1fr; } }

  /* Testimonials */
  .testimonials{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .testi-carousel{ max-width:720px; margin:0 auto; position:relative; }
  .testi-track-wrap{ overflow:hidden; border-radius:var(--radius); }
  .testi-track{ display:flex; transition:transform .4s ease; }
  .testi-card{
    flex:0 0 100%; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
    padding:40px 44px; text-align:center;
  }
  .testi-quote{ font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:500; line-height:1.5; margin-bottom:24px; }
  .testi-person{ display:flex; align-items:center; justify-content:center; gap:12px; }
  .testi-avatar{
    width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; flex-shrink:0;
  }
  .testi-name{ font-weight:600; font-size:14.5px; text-align:left; }
  .testi-role{ font-size:12.5px; color:var(--muted); text-align:left; }
  .testi-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:24px; }
  .testi-arrow{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; color:var(--ink);
  }
  .testi-arrow:hover{ border-color:var(--primary); color:var(--primary); }
  .testi-arrow svg{ width:15px; height:15px; }
  .testi-dots{ display:flex; gap:8px; }
  .testi-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:.2s; border:none; padding:0; }
  .testi-dot.active{ background:var(--primary); width:22px; border-radius:5px; }
  @media(max-width:640px){ .testi-card{ padding:30px 24px; } .testi-quote{ font-size:16.5px; } }

  /* Team */
  .team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .team-card{ text-align:center; }
  .team-photo{
    width:100%; aspect-ratio:1/1; border-radius:var(--radius); background:var(--surface);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .team-photo .initial{
    width:64px; height:64px; border-radius:50%; background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px;
  }
  .team-card h4{ font-size:15.5px; font-weight:600; }
  .team-card .role{ font-size:12.5px; color:var(--primary); margin:3px 0 8px; }
  .team-card p{ font-size:12.5px; color:var(--muted); }
  @media(max-width:820px){ .team-grid{ grid-template-columns:1fr 1fr; } }

  /* Contact */
  #contact{ background:var(--surface); border-top:1px solid var(--line); }
  .contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; }
  .info-block{ margin-bottom:28px; }
  .info-block .tag{ font-size:11.5px; color:var(--primary); display:block; margin-bottom:8px; }
  .info-block .val{ font-size:16px; font-weight:500; }
  .social-row{ display:flex; gap:12px; margin-top:32px; }
  .social-row a{
    width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:.2s;
  }
  .social-row a:hover{ border-color:var(--primary); color:var(--primary); }
  form{ display:flex; flex-direction:column; gap:16px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  label{ font-size:12.5px; color:var(--muted); margin-bottom:6px; display:block; }
  input, textarea{
    width:100%; border:1px solid var(--line); border-radius:10px; padding:13px 14px;
    background:var(--paper); font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);
    transition:border-color .2s;
  }
  input:focus, textarea:focus{ outline:none; border-color:var(--primary); }
  textarea{ resize:vertical; min-height:120px; }
  @media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } .form-row{ grid-template-columns:1fr; } }

  .form-status{
    display:none; align-items:center; gap:10px; padding:14px 16px; border-radius:10px;
    font-size:14px; font-weight:500;
  }
  .form-status.show{ display:flex; }
  .form-status.success{ background:rgba(23,184,144,0.1); color:#0E7A5E; border:1px solid rgba(23,184,144,0.3); }
  .form-status.error{ background:rgba(220,53,69,0.08); color:#B3222E; border:1px solid rgba(220,53,69,0.3); }
  button[type="submit"]:disabled{ opacity:0.6; cursor:not-allowed; }

  /* Stats grid */
  .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
  .stat-card{
    border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; background:var(--surface);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .stat-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -18px rgba(14,21,38,0.22); border-color:var(--primary); }
  .stat-icon{
    width:38px; height:38px; border-radius:10px; background:var(--paper);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .stat-icon svg{ width:18px; height:18px; stroke:var(--primary); }
  .stat-num{ font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; color:var(--ink); }
  .stat-label{ font-size:13px; color:var(--muted); margin-top:4px; }
  @media(max-width:760px){ .stats-grid{ grid-template-columns:1fr 1fr; } }

  /* Challenges (pain points) */
  #challenges{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .challenge-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .challenge-card{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
    display:flex; flex-direction:column; overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .challenge-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -24px rgba(14,21,38,0.22); border-color:var(--primary); }
  .chal-block{ padding:20px 24px; }
  .chal-problem{ display:flex; flex-direction:column; gap:10px; }
  .chal-problem .qmark{
    width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700;
  }
  .chal-tag{ font-size:10px; color:var(--muted); display:block; margin-bottom:2px; }
  .chal-problem p{ font-size:14.5px; color:var(--ink); line-height:1.5; font-style:italic; }
  .chal-arrow{
    width:22px; height:22px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; margin:-11px auto; position:relative; z-index:1; color:var(--muted);
  }
  .chal-arrow svg{ width:11px; height:11px; }
  .chal-solution{ background:var(--surface); }
  .chal-solution p{ font-size:13.5px; color:var(--muted); line-height:1.5; }
  .chal-service{ display:flex; align-items:center; justify-content:space-between; background:var(--surface); }
  .chal-service-name{ font-size:13px; font-weight:600; color:var(--primary); }
  .chal-cta{
    display:flex; align-items:center; justify-content:center; gap:6px; padding:15px;
    font-size:13px; font-weight:600; color:var(--ink); border-top:1px solid var(--line);
    background:var(--surface); margin-top:auto; transition:background .2s ease, color .2s ease;
  }
  .chal-cta svg{ width:13px; height:13px; transition:transform .2s ease; }
  .challenge-card:hover .chal-cta{ background:var(--ink); color:#fff; }
  .challenge-card:hover .chal-cta svg{ transform:translateX(4px); }
  @media(max-width:920px){ .challenge-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:640px){ .challenge-grid{ grid-template-columns:1fr; } }

  /* CTA band */
  .cta-band{
    background:var(--ink); color:#fff; border-radius:20px; padding:64px 56px;
    display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
    margin:72px 32px 0;
  }
  .cta-band-copy{ max-width:520px; }
  .cta-band h2{ font-size:clamp(24px,3vw,34px); font-weight:600; }
  .cta-band-copy p{ color:#C9CEDB; font-size:14.5px; margin-top:10px; }
  .cta-band .btn-primary{ background:var(--primary); }
  .cta-band .btn-primary:hover{ background:#fff; color:var(--ink); }

  footer{ padding:64px 0 0; }
  .footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-bottom:48px; }
  .footer-col h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:16px; }
  .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
  .footer-col a, .footer-col p{ font-size:13.5px; color:var(--ink); }
  .footer-col a:hover{ color:var(--primary); }
  .footer-bottom{
    border-top:1px solid var(--line); padding:24px 0;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  }
  footer p{ font-size:13px; color:var(--muted); }
  .footer-brand{ display:flex; align-items:center; gap:10px; }
  .footer-logo-img{ height:30px; width:auto; display:block; }
  @media(max-width:920px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:460px){ .footer-grid{ grid-template-columns:1fr; } .cta-band{ padding:44px 28px; margin:56px 16px 0; } }

  ::selection{ background:var(--primary); color:#fff; }
  :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }