:root{
    --mint:#51C0A8;            /* PRIMARY */
    --mint-bright:#6FE0C4;     /* lifted tint for glow/gradients */
    --mint-deep:#2F9A82;      /* gradients / dark bgs only - fails 4.5:1 as text on light */
    --mint-text:#237A64;      /* accessible teal for text + icons on light bgs (4.9:1) */
    --navy:#2C307D;            /* secondary brand */
    --abyss:#0B0E26;           /* deep navy-black ground */
    --abyss-2:#0E1230;
    --ink:#171A2E;
    --soft:#5A6078;
    --paper:#F6F8FC;
    --line:#E4E8F2;
    --disp:"Bricolage Grotesque", system-ui, sans-serif;
    --body:"Hanken Grotesk", system-ui, sans-serif;
    --mono:"Space Mono", ui-monospace, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1160px;margin:0 auto;padding:0 36px}
  a{color:inherit;text-decoration:none}

  .skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:80}
  .skip:focus{left:0}
  a:focus-visible,button:focus-visible{outline:3px solid var(--mint-bright);outline-offset:3px;border-radius:4px}

  .mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em}

  /* buttons */
  .btn{font-family:var(--disp);font-weight:700;font-size:1.02rem;padding:16px 30px;border:none;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
  .btn-primary{background:var(--mint);color:#06231C;box-shadow:0 0 0 1px rgba(111,224,196,.4), 0 14px 40px -12px rgba(81,192,168,.7)}
  .btn-primary:hover{background:var(--mint-bright);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(111,224,196,.6), 0 20px 50px -12px rgba(81,192,168,.9)}
  .btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.02)}
  .btn-ghost:hover{border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
  .btn-arrow{transition:transform .18s ease}
  .btn:hover .btn-arrow{transform:translateX(3px)}

  /* ============ HERO ============ */
  .hero{position:relative;background:var(--abyss);color:#fff;overflow:hidden;min-height:96vh;display:flex;align-items:center}
  #flow{position:absolute;inset:0;width:100%;height:100%;display:block}
  .hero-aura{position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(60% 60% at 78% 18%, rgba(81,192,168,.22), transparent 60%),
      radial-gradient(55% 60% at 12% 88%, rgba(44,48,125,.55), transparent 62%),
      linear-gradient(180deg, rgba(11,14,38,.2), rgba(11,14,38,.78));
  }
  .hero-inner{position:relative;z-index:2;width:100%;padding:150px 36px 100px}
  /* Defensive: an old inline <style> block on the live page sets
     .hero-inner{padding-top:240px !important}. Delete that block and this rule
     can lose its !important (or go away entirely). */
  .hero .hero-inner{padding-top:150px !important}
  .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
  .brandbar{position:absolute;top:30px;left:0;right:0;z-index:3;max-width:1160px;margin:0 auto;
    padding:0 36px;display:flex;justify-content:flex-start;align-items:center}
  /* ===== program logo =====
     Asset is pre-cropped, so no compensation needed. Sized by width; height
     follows the natural aspect ratio. The .hero prefix only exists to outrank
     a stale `.brandbar .logo-img{height:168px}` rule still on the live page -
     delete that inline <style> block and the prefix can go. */
  .hero .brandbar .logo{display:block;flex:none;line-height:0}
  .hero .brandbar .logo-img{display:block;width:250px;max-width:100%;height:auto}

  .eyebrow{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint-bright);display:inline-flex;align-items:center;gap:12px;margin-bottom:26px}
  .eyebrow::before{content:"";width:30px;height:1.5px;background:var(--mint)}
  h1{font-family:var(--disp);font-weight:700;font-size:clamp(1.95rem,5.8vw,4.7rem);line-height:.99;letter-spacing:-.025em;margin-bottom:26px}
  h1 .grad{background:linear-gradient(100deg,var(--mint-bright),var(--mint) 55%,#9aa6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .lede{font-size:1.22rem;color:#C7CCEA;max-width:40ch;margin-bottom:38px;line-height:1.5}
  .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

  /* ===== climate console (signature) ===== */
  .console{position:relative;border-radius:22px;padding:26px;
    background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transform:perspective(1200px) rotateX(0deg) rotateY(0deg);transition:transform .25s ease}
  .console::before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
    background:radial-gradient(80% 60% at 80% 0%, rgba(111,224,196,.16), transparent 60%)}
  .console-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
  .console-head .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#AEB6DD}
  .console-head .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-bright);display:inline-flex;align-items:center;gap:8px}
  .console-head .tag .dot{width:8px;height:8px;border-radius:50%;background:var(--mint-bright);box-shadow:0 0 12px 2px rgba(111,224,196,.8)}
  .gauge{display:flex;align-items:center;gap:18px;margin-bottom:22px}
  .dial{position:relative;width:96px;height:96px;flex:none}
  .dial .lab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .dial .lab b{font-family:var(--disp);font-weight:700;font-size:1.05rem;color:#fff;line-height:1}
  .dial .lab span{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:#9AA2CC;margin-top:4px}
  .gauge .cap{font-family:var(--body);font-size:.92rem;color:#C7CCEA;line-height:1.45}
  .gauge .cap b{color:#fff;font-weight:600;font-family:var(--disp)}
  .meters{display:grid;gap:15px}
  .meter .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
  .meter .name{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#C2C8EC}
  .meter .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-bright)}
  .track{height:7px;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden}
  .fill{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--mint-deep),var(--mint-bright));box-shadow:0 0 10px rgba(111,224,196,.7);transition:width 1.3s cubic-bezier(.2,.8,.2,1)}

  /* ============ STRIP ============ */
  .strip{background:var(--abyss);border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:2}
  .strip .wrap{display:flex;flex-wrap:wrap;gap:16px 44px;justify-content:space-between;padding:26px 36px}
  .strip span{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#A8B0D6;display:inline-flex;align-items:center;gap:11px}
  .strip span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(81,192,168,.8)}

  /* ============ PILLARS (editorial, temperature spine) ============ */
  .pillars{background:var(--paper);padding:108px 0 96px}
  .sec-head{max-width:62ch;margin-bottom:30px}
  .sec-tag{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint-text);display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
  .sec-tag::before{content:"";width:30px;height:1.5px;background:var(--mint)}
  h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,4.4vw,3.1rem);letter-spacing:-.02em;line-height:1.05;color:var(--navy);max-width:18ch}
  .sec-head p{color:var(--soft);font-size:1.16rem;margin-top:18px;max-width:56ch}

  .flist{position:relative;margin-top:30px}
  .flist::before{content:"";position:absolute;left:39px;top:54px;bottom:54px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--mint-bright),var(--mint) 30%,#7e84d6 72%,var(--navy));opacity:.55}
  .feature{position:relative;display:grid;grid-template-columns:80px 1fr;gap:46px;padding:42px 0;border-bottom:1px solid var(--line)}
  .feature:last-child{border-bottom:none}
  .node{position:relative;z-index:1;width:80px;height:80px;border-radius:20px;background:#fff;border:2px solid var(--accent);
    display:flex;align-items:center;justify-content:center;color:var(--accent);
    box-shadow:0 16px 34px -16px rgba(44,48,125,.4)}
  .node svg{width:36px;height:36px}
  .node .idx{position:absolute;top:-12px;right:-12px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;
    font-family:var(--mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
  .f-body .ftag{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:700}
  .f-body h3{font-family:var(--disp);font-weight:700;font-size:1.72rem;line-height:1.1;letter-spacing:-.01em;color:var(--navy);margin:9px 0 7px}
  .f-body .promise{font-family:var(--disp);font-weight:600;font-size:1.12rem;color:var(--accent);margin-bottom:20px}
  .f-body ul{list-style:none;display:grid;gap:13px;max-width:64ch}
  .f-body li{position:relative;padding-left:28px;color:var(--soft);font-size:1.05rem;line-height:1.5}
  .f-body li::before{content:"";position:absolute;left:2px;top:.62em;width:11px;height:2px;background:var(--accent);border-radius:2px}
  .f-seo{--accent:var(--mint-text)}
  .f-acc{--accent:var(--navy)}
  .f-best{--accent:var(--mint-text)}
  .f-perf{--accent:var(--navy)}

  /* ============ PROCESS (build journey) ============ */
  .process{background:linear-gradient(180deg,#F1F7F6,#EDF0FA);padding:104px 0}
  .steps{position:relative;margin-top:54px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .steps::before{content:"";position:absolute;top:34px;left:12.5%;right:12.5%;height:3px;border-radius:3px;
    background:linear-gradient(90deg,var(--mint-bright),var(--mint) 32%,#8086d6 72%,var(--navy));opacity:.65;z-index:0}
  .step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
  .step .dot{width:68px;height:68px;border-radius:50%;background:linear-gradient(150deg,var(--mint-deep),var(--mint-bright));
    color:#06231C;font-family:var(--disp);font-weight:800;font-size:1.55rem;display:flex;align-items:center;justify-content:center;
    border:5px solid #fff;box-shadow:0 16px 32px -12px rgba(47,154,130,.55)}
  .step:last-child .dot{background:linear-gradient(150deg,var(--navy),#5a60c8);color:#fff}
  .step h3{font-family:var(--disp);font-weight:700;font-size:1.2rem;color:var(--navy);margin:20px 0 8px}
  .step p{color:var(--soft);font-size:.99rem;line-height:1.45;max-width:25ch}
  @media (max-width:900px){
    .process{padding:80px 0}
    .steps{grid-template-columns:1fr;gap:26px;margin-top:38px}
    .steps::before{display:none}
    .step{flex-direction:row;text-align:left;gap:20px;align-items:flex-start}
    .step .dot{flex:none;width:54px;height:54px;font-size:1.25rem;border-width:4px}
    .step h3{margin:2px 0 6px}
    .step p{max-width:none}
  }

  /* ============ DELIVERABLES (atmospheric) ============ */
  .deliver{position:relative;background:var(--abyss);color:#fff;padding:104px 0;overflow:hidden}
  .deliver::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(50% 60% at 85% 12%, rgba(81,192,168,.16), transparent 60%),
              radial-gradient(55% 60% at 8% 95%, rgba(44,48,125,.6), transparent 62%)}
  .deliver .wrap{position:relative;z-index:1}
  .deliver .sec-tag{color:var(--mint-bright)}
  .deliver h2{color:#fff;max-width:24ch}
  .dgrid{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .dcard{position:relative;border-radius:18px;padding:30px 32px;
    background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:transform .2s ease, border-color .2s ease}
  .dcard:hover{transform:translateY(-4px);border-color:rgba(111,224,196,.5)}
  .dcard .k{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-bright);display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .dcard .k::before{content:"";width:22px;height:1.5px;background:var(--mint)}
  .dcard h3{font-family:var(--disp);font-weight:700;font-size:1.32rem;margin-bottom:11px;line-height:1.12}
  .dcard p{color:#BDC3E6;font-size:1.02rem;line-height:1.5}

  .ownbar{margin-top:22px;display:flex;align-items:center;gap:24px;border-radius:18px;padding:28px 34px;
    background:linear-gradient(135deg, rgba(81,192,168,.16), rgba(81,192,168,.05));
    border:1px solid rgba(111,224,196,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .ownbar .keywrap{flex:none;width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;
    background:rgba(81,192,168,.18);border:1px solid rgba(111,224,196,.5);color:var(--mint-bright)}
  .ownbar .keywrap svg{width:28px;height:28px}
  .ownbar h3{font-family:var(--disp);font-weight:700;font-size:1.34rem;color:#fff;margin-bottom:6px;line-height:1.1}
  .ownbar p{color:#CFD4EE;font-size:1.04rem;line-height:1.5;max-width:74ch}
  @media (max-width:900px){ .ownbar{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 24px} }

  /* ============ CLOSING ============ */
  .close{position:relative;background:var(--abyss-2);color:#fff;text-align:center;padding:120px 0;overflow:hidden}
  .close::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 90% at 50% 6%, rgba(81,192,168,.24), transparent 60%)}
  .close .wrap{position:relative;z-index:1}
  .close .sec-tag{justify-content:center;color:var(--mint-bright)}
  .close h2{color:#fff;max-width:20ch;margin:0 auto 18px;font-size:clamp(1.85rem,5vw,3.5rem)}
  .close p{color:#C7CCEA;font-size:1.2rem;margin:0 auto 36px;max-width:50ch}
  .close .cta-row{justify-content:center}

  footer{background:var(--abyss);color:#fff;padding:40px 0;border-top:1px solid rgba(255,255,255,.08)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
  footer .logo{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
  footer .logo span{color:var(--mint)}
  footer .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9097C0}
  /* status pill: moved out of the hero brandbar, keeps its right-hand position */
  footer .stat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:#A8B0D6;display:inline-flex;gap:9px;align-items:center;flex:none}
  footer .stat .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(81,192,168,.18)}
  @media (max-width:900px){
    footer .wrap{justify-content:flex-start;gap:12px 20px}
  }

  /* reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  @media (max-width:900px){
    .hero{min-height:auto}
    /* tighter gutters than the 36px desktop wrap; 36px is too much at 390px wide */
    .wrap{padding:0 22px}
    .strip .wrap{padding:22px}
    .hero-inner{padding:96px 22px 64px}
    .hero .hero-inner{padding-top:96px!important}
    .brandbar{top:24px;padding:0 22px}
    .hero .brandbar .logo-img{width:172px}
    h1{line-height:1.04}
    .lede{font-size:1.06rem;margin-bottom:30px;max-width:none}
    .eyebrow{margin-bottom:20px}
    /* stacked, equal-width buttons instead of one wide and one narrow */
    .hero .cta-row{flex-direction:column;align-items:stretch;gap:12px}
    .hero .cta-row .btn{width:100%;justify-content:center}
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .console{max-width:460px}
    .dgrid{grid-template-columns:1fr}
    .flist::before{display:none}
    .feature{grid-template-columns:1fr;gap:20px;padding:34px 0}
    .node{width:64px;height:64px;border-radius:16px}
    .node svg{width:30px;height:30px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .fill{transition:none}
    .btn,.dcard,.console,.btn-arrow{transition:none}
    .pulse{animation:none!important}
    #flow{display:none}
    .btn:hover,.dcard:hover{transform:none}
    .btn:hover .btn-arrow{transform:none}
  }

  .pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(81,192,168,.20)}50%{box-shadow:0 0 0 8px rgba(81,192,168,.04)}}

  /* footer contact links */
  footer .foot-link{color:inherit}
  footer .foot-email{text-transform:none}

  /* ===== showcase: real site mockup ===== */
  .showcase{position:relative;background:var(--abyss);color:#fff;padding:104px 0;overflow:hidden}
  .showcase::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(55% 60% at 80% 8%, rgba(81,192,168,.16), transparent 60%),
              radial-gradient(50% 60% at 8% 96%, rgba(44,48,125,.55), transparent 62%)}
  .showcase .wrap{position:relative;z-index:1}
  .showcase .sec-tag{color:var(--mint-bright)}
  .showcase .sec-tag::before{background:var(--mint)}
  .showcase h2{color:#fff}
  .showcase .sec-head p{color:#BDC3E6}
  .showcase-fig{margin:0}
  .browser{margin:46px 0 0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0E1230;
    box-shadow:0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(111,224,196,.06)}
  .browser-bar{display:flex;align-items:center;gap:16px;padding:13px 18px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.10)}
  .browser-dots{display:flex;gap:8px;flex:none}
  .browser-dots span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.20)}
  .browser-url{flex:1;max-width:440px;height:28px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;gap:9px;padding:0 13px;color:#8C93BD}
  .browser-url svg{width:14px;height:14px;flex:none}
  .browser img{display:block;width:100%;height:auto}
  .showcase .cap{margin-top:20px;text-align:center;color:#AEB6DD;font-size:1.02rem}
  @media (max-width:900px){
    .showcase{padding:80px 0}
    .browser-url{display:none}
  }