:root{
    --navy:#060B18; --panel:#0A1122; --panel-2:#0D1526; --line:#1B2740;
    --cyan:#0EA5E9; --cyan-bright:#38E1FF; --ice:#E0F7FF;
    --text:#DCE6F5; --muted:#7C8BA5; --muted-2:#56637C;
    --steel:#0F1A2E; --roofx:#0EA5E9; /* Roofgrid accent = Liftori blue */
    --maxw:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--navy);color:var(--text);font-family:'Archivo',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--cyan);color:var(--navy)}

  #webgl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;
    background:radial-gradient(1200px 800px at 72% 6%,rgba(14,165,233,.18),transparent 60%),radial-gradient(900px 700px at 10% 92%,rgba(56,225,255,.07),transparent 55%),var(--navy);}
  .content{position:relative;z-index:2}

  .display{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;line-height:.98;letter-spacing:-.02em}
  .eyebrow{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan-bright)}
  .muted{color:var(--muted)}

  header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;transition:background .3s,border-color .3s,padding .3s;border-bottom:1px solid transparent}
  header.scrolled{background:rgba(6,11,24,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:14px 40px}
  .brand{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;letter-spacing:-.01em}
  .brand b{color:var(--ice)} .brand span{color:var(--cyan)}
  nav.links{display:flex;gap:28px;align-items:center}
  nav.links a{font-size:14px;color:var(--muted);font-weight:500;transition:color .2s}
  nav.links a:hover{color:var(--ice)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:11px 20px;border-radius:2px;border:1px solid var(--cyan);color:var(--navy);background:var(--cyan-bright);transition:transform .18s,box-shadow .18s,background .2s;cursor:pointer}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(56,225,255,.28)}
  .btn.ghost{background:transparent;color:var(--ice);border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--cyan);box-shadow:none}
  .btn.lg{padding:16px 30px;font-size:15px}
  .btn.orange{background:var(--roofx);border-color:var(--roofx);color:var(--navy)}
  .btn.orange:hover{box-shadow:0 10px 30px rgba(14,165,233,.28)}

  section{padding:120px 40px;position:relative}
  .wrap{max-width:var(--maxw);margin:0 auto}
  .kicker-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}
  .kicker-row .rule{height:1px;width:54px;background:linear-gradient(90deg,var(--cyan),transparent)}
  .head-xl{font-size:clamp(38px,5.5vw,74px);color:var(--ice);text-transform:uppercase;line-height:.96}
  .head-xl .sub{color:var(--cyan-bright)}
  .lead-copy{max-width:640px;color:var(--muted);font-size:18px;margin-top:22px}

  /* hero */
  .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:120px}
  .hero .wrap{max-width:1180px}
  .hero h1{font-size:clamp(52px,9vw,132px);color:var(--ice);text-transform:uppercase}
  .hero h1 .accent{color:var(--cyan-bright)}
  .hero .lede{max-width:560px;margin-top:28px;font-size:20px;color:var(--text)}
  .hero .lede b{color:var(--ice);font-weight:600}
  .hero .cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
  .hero .microproof{display:flex;gap:26px;margin-top:44px;flex-wrap:wrap;color:var(--muted-2);font-size:13px;letter-spacing:.04em}
  .hero .microproof b{color:var(--ice);font-family:'Bricolage Grotesque';font-weight:700;margin-right:6px}
  .scrollcue{position:absolute;left:40px;bottom:34px;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
  .scrollcue .track{width:1px;height:46px;background:var(--line);position:relative;overflow:hidden}
  .scrollcue .track::after{content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;background:var(--cyan-bright);animation:drop 2.4s cubic-bezier(.6,0,.2,1) infinite}
  @keyframes drop{0%{top:-46px}60%,100%{top:46px}}

  /* three paths */
  .paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
  .path{background:linear-gradient(180deg,rgba(13,21,38,.86),rgba(10,17,34,.92));padding:42px 32px;position:relative;transition:background .3s,transform .3s;min-height:330px;display:flex;flex-direction:column}
  .path:hover{background:linear-gradient(180deg,rgba(16,28,52,.95),rgba(11,19,38,.97));transform:translateY(-6px)}
  .path .idx{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;color:var(--cyan);letter-spacing:.1em}
  .path.pop::before{content:"MOST POPULAR";position:absolute;top:18px;right:18px;font-size:10px;letter-spacing:.18em;color:var(--navy);background:var(--cyan-bright);padding:5px 9px;font-weight:700}
  .path h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:28px;color:var(--ice);margin:18px 0 12px;letter-spacing:-.01em}
  .path p{color:var(--muted);font-size:15.5px;flex:1}
  .path .tags{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 22px}
  .path .tags span{font-size:11.5px;color:var(--text);border:1px solid var(--line);padding:5px 10px}
  .path .price{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:auto}
  .path .price em{font-style:normal;color:var(--muted);font-size:13px}
  .path .price a{color:var(--cyan-bright);font-weight:600;font-size:15px}

  /* ROOFGRID spotlight */
  .roofx-sec{background:linear-gradient(180deg,rgba(9,15,28,.55),rgba(6,11,24,.75));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .roofx-flag{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--roofx);margin-bottom:22px}
  .roofx-flag .dot{width:7px;height:7px;background:var(--roofx);border-radius:50%;box-shadow:0 0 0 4px rgba(14,165,233,.16)}
  .roofx-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .roofx-copy h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(40px,6vw,78px);color:var(--ice);line-height:.94;margin:6px 0 18px;text-transform:uppercase}
  .roofx-copy h2 span{color:var(--roofx)}
  .roofx-copy .sell{color:var(--text);font-size:18px;max-width:520px}
  .roofx-feats{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:34px 0}
  .roofx-feats div{border-left:2px solid var(--roofx);padding:4px 0 4px 14px}
  .roofx-feats b{font-family:'Bricolage Grotesque';font-weight:700;color:var(--ice);display:block;font-size:15px}
  .roofx-feats em{font-style:normal;color:var(--muted);font-size:13.5px}
  .roofx-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .roofx-cta .live{font-size:12.5px;color:var(--muted);letter-spacing:.03em}

  /* Roofgrid product board mock */
  .board{background:linear-gradient(170deg,#0C1526,#070C1A);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5)}
  .board .bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line)}
  .board .bar .d{width:9px;height:9px;border-radius:50%;background:var(--line)}
  .board .bar .ttl{margin-left:8px;font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;color:var(--ice)}
  .board .bar .ttl span{color:var(--roofx)}
  .board .bar .tag{margin-left:auto;font-size:10px;letter-spacing:.14em;color:var(--roofx);border:1px solid rgba(14,165,233,.4);padding:3px 8px;border-radius:3px}
  .board .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
  .board .col{background:#0A1122;padding:12px 11px;min-height:230px}
  .board .col .ch{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;display:flex;justify-content:space-between}
  .board .col .ch b{color:var(--cyan-bright);font-weight:700}
  .jc{background:#0D1526;border:1px solid var(--line);border-radius:7px;padding:10px;margin-bottom:9px}
  .jc .nm{font-size:12px;color:var(--text);font-weight:600}
  .jc .sub{font-size:10.5px;color:var(--muted-2);margin-top:2px}
  .jc .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
  .jc .amt{font-size:12px;color:var(--cyan-bright);font-weight:700;font-family:'Bricolage Grotesque'}
  .jc .pill{font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
  .jc .pill.hot{color:var(--roofx);border-color:rgba(14,165,233,.5)}
  .jc .pill.ok{color:#48D597;border-color:rgba(72,213,151,.4)}

  /* services (what we build) */
  .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
  .svc-card{border:1px solid var(--line);background:rgba(10,17,34,.78);padding:34px 28px;transition:border-color .3s,transform .3s}
  .svc-card:hover{border-color:var(--cyan);transform:translateY(-5px)}
  .svc-card .no{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;color:var(--cyan);letter-spacing:.08em}
  .svc-card h4{font-family:'Bricolage Grotesque';font-weight:800;font-size:23px;color:var(--ice);margin:14px 0 12px;text-transform:uppercase;letter-spacing:.01em}
  .svc-card ul{list-style:none;margin-top:16px}
  .svc-card li{color:var(--muted);font-size:14px;padding:7px 0;border-top:1px solid var(--line)}
  .svc-card li:first-child{border-top:0}

  /* pipeline */
  .pipe-track{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
  .stage{border:1px solid var(--line);background:rgba(10,17,34,.78);padding:26px 22px;position:relative;transition:border-color .3s,transform .3s}
  .stage:hover{border-color:var(--cyan);transform:translateY(-5px)}
  .stage .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:42px;color:var(--line);line-height:1}
  .stage h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;color:var(--ice);margin:12px 0 8px;text-transform:uppercase}
  .stage p{color:var(--muted);font-size:14px}
  .stage:hover .n{color:var(--cyan)}
  .pipe-note{margin-top:30px;color:var(--muted);font-size:15px;max-width:720px;border-left:2px solid var(--cyan);padding-left:16px}
  .pipe-note b{color:var(--ice)}

  /* digital products grid */
  .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
  .pg{background:rgba(10,17,34,.85);padding:28px 26px;transition:background .3s}
  .pg:hover{background:rgba(16,26,46,.95)}
  .pg .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
  .pg h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;color:var(--ice);margin:10px 0 8px}
  .pg p{color:var(--muted);font-size:13.5px;min-height:56px}
  .pg .pr{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
  .pg .pr b{font-family:'Bricolage Grotesque';color:var(--cyan-bright);font-size:16px}
  .pg .pr em{font-style:normal;font-size:11px;color:var(--muted-2)}

  /* pricing */
  .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
  .tier{background:var(--panel);padding:30px 20px;display:flex;flex-direction:column;position:relative}
  .tier.best{background:linear-gradient(180deg,rgba(14,165,233,.1),var(--panel))}
  .tier.best::before{content:"MOST COMMON";position:absolute;top:-1px;left:-1px;right:-1px;text-align:center;font-size:9.5px;letter-spacing:.18em;color:var(--navy);background:var(--cyan-bright);padding:4px;font-weight:700}
  .tier .lvl{font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
  .tier h4{font-family:'Bricolage Grotesque';font-weight:800;font-size:20px;color:var(--ice);margin:8px 0 4px}
  .tier .amt{font-family:'Bricolage Grotesque';font-weight:800;font-size:30px;color:var(--cyan-bright);margin:12px 0 2px}
  .tier .amt small{font-size:12px;color:var(--muted);font-weight:400}
  .tier .terms{font-size:11px;color:var(--muted-2);min-height:30px}
  .tier ul{list-style:none;margin:14px 0 0;flex:1}
  .tier li{font-size:12.5px;color:var(--text);padding:6px 0;border-top:1px solid var(--line);display:flex;gap:7px}
  .tier li:first-child{border-top:0}
  .tier li .k{color:var(--cyan)}
  .tier li.off{color:var(--muted-2)} .tier li.off .k{color:var(--muted-2)}
  .plans-note{margin-top:24px;color:var(--muted);font-size:14px}
  .plans-note b{color:var(--ice)}

  /* client builds */
  .builds{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
  .build{border:1px solid var(--line);background:rgba(10,17,34,.8);padding:30px 26px;transition:border-color .3s,transform .3s}
  .build:hover{border-color:var(--cyan);transform:translateY(-5px)}
  .build .lb{font-size:11px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
  .build h4{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;color:var(--ice);margin:10px 0 10px;text-transform:uppercase}
  .build p{color:var(--muted);font-size:14px}
  .build .tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
  .build .tags span{font-size:11px;color:var(--text);border:1px solid var(--line);padding:4px 9px}
  .build a{color:var(--cyan-bright);font-weight:600;font-size:14px}

  /* product / BOLO */
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;margin-top:14px}
  .prod-copy h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(40px,6vw,74px);color:var(--ice);line-height:.96;margin:20px 0 18px}
  .prod-copy p{color:var(--muted);font-size:17px;max-width:480px}
  .fsl{display:flex;margin:32px 0;border:1px solid var(--line)}
  .fsl div{flex:1;padding:20px;border-right:1px solid var(--line)} .fsl div:last-child{border-right:0}
  .fsl b{font-family:'Bricolage Grotesque';font-weight:800;display:block;font-size:18px;color:var(--cyan-bright);letter-spacing:.04em}
  .fsl em{font-style:normal;font-size:13px;color:var(--muted)}
  .phone{justify-self:center;width:290px;height:580px;border-radius:38px;border:1px solid var(--line);background:linear-gradient(170deg,#0C1526,#070C1A);padding:16px;position:relative;box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
  .phone .notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#070C1A;border-radius:0 0 14px 14px;z-index:3}
  .screen{height:100%;border-radius:26px;overflow:hidden;background:var(--navy);border:1px solid var(--line);display:flex;flex-direction:column}
  .screen .top{padding:26px 16px 12px;border-bottom:1px solid var(--line)}
  .screen .top .t{font-family:'Bricolage Grotesque';font-weight:800;font-size:15px;color:var(--ice)}
  .screen .top .s{font-size:11px;color:var(--muted)}
  .screen .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .card{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .card .ph{height:74px;background-color:#15233d;background-size:cover;background-position:center;background-repeat:no-repeat}
  .card .meta{padding:8px 9px}
  .card .meta .nm{font-size:11px;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .meta .pr{font-size:12px;color:var(--cyan-bright);font-weight:700}
  .verdict{margin:2px 14px 14px;border:1px solid var(--cyan);border-radius:8px;padding:12px 14px;background:rgba(14,165,233,.08)}
  .verdict .lb{font-size:10px;letter-spacing:.16em;color:var(--cyan-bright);text-transform:uppercase}
  .verdict .bg{font-family:'Bricolage Grotesque';font-weight:800;color:var(--ice);font-size:18px;margin-top:3px}
  .verdict .rg{font-size:11px;color:var(--muted);margin-top:2px}

  /* consulting */
  .consult-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
  .cc{background:rgba(10,17,34,.85);padding:30px 24px}
  .cc h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:19px;color:var(--ice);margin-bottom:10px}
  .cc p{color:var(--muted);font-size:14px}

  /* CRM feature grid */
  .crm-sec{background:linear-gradient(180deg,rgba(9,15,28,.55),rgba(6,11,24,.7));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .crm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
  .cf{background:rgba(10,17,34,.85);padding:26px 22px}
  .cf b{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;color:var(--ice);display:block;margin-bottom:7px}
  .cf p{color:var(--muted);font-size:13px}
  /* about our CRM — included vs add-on */
  .incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
  .incl{border:1px solid var(--line);background:rgba(10,17,34,.8);padding:32px 30px}
  .incl-h{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--ice);text-transform:uppercase;margin-bottom:16px}
  .incl ul{list-style:none}
  .incl li{font-size:14.5px;color:var(--text);padding:12px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
  .incl li:first-child{border-top:0}
  .incl li .k{color:var(--cyan);flex-shrink:0}
  .incl li em{font-style:normal;color:var(--muted-2);font-size:12.5px}
  .pillx{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;flex-shrink:0;align-self:center}
  .pillx.soon{color:var(--cyan-bright);border-color:rgba(56,225,255,.4)}
  .pillx.addon{color:var(--ice);border-color:var(--line)}
  @media (max-width:900px){.incl-grid{grid-template-columns:1fr}}

  /* stats + quote */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
  .stat{background:var(--panel);padding:38px 26px}
  .stat .big{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(36px,4.4vw,56px);color:var(--cyan-bright);line-height:1}
  .stat .lbl{color:var(--muted);font-size:14px;margin-top:8px}
  .quote{max-width:820px;margin:80px auto 0;text-align:center}
  .quote p{font-family:'Bricolage Grotesque';font-weight:600;font-size:clamp(24px,3.2vw,38px);color:var(--ice);line-height:1.25;letter-spacing:-.01em}
  .quote cite{display:block;margin-top:22px;color:var(--muted);font-style:normal;font-size:15px;letter-spacing:.04em}

  /* careers + affiliate row */
  .two-band{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
  .band{border:1px solid var(--line);background:rgba(10,17,34,.8);padding:44px 40px}
  .band h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:28px;color:var(--ice);text-transform:uppercase;margin-bottom:12px}
  .band p{color:var(--muted);font-size:15px;margin-bottom:22px}
  .band .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
  .band .tags span{font-size:11.5px;color:var(--text);border:1px solid var(--line);padding:5px 10px}
  .band small{display:block;margin-top:16px;color:var(--muted-2);font-size:12.5px}

  /* final */
  .final{text-align:center;padding:150px 40px 120px}
  .final h2{font-size:clamp(54px,10vw,150px);color:var(--ice);text-transform:uppercase;line-height:.9}
  .final h2 .accent{color:var(--cyan-bright)}
  .final p{color:var(--muted);font-size:19px;max-width:520px;margin:26px auto 0}
  .final .cta-row{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}

  footer{border-top:1px solid var(--line);background:rgba(6,11,24,.9);padding:56px 40px 40px;position:relative;z-index:2}
  .foot{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
  .foot .vet{display:flex;flex-direction:column;gap:6px}
  .foot .vet .badge{font-size:11px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase}
  .foot .vet .big{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;color:var(--ice)}
  .foot .meta{color:var(--muted-2);font-size:13px;text-align:right}

  .banner{position:relative;z-index:30;background:var(--panel-2);border-bottom:1px solid var(--line);text-align:center;font-size:13.5px;color:var(--text);padding:11px 40px}
  .banner b{color:var(--cyan-bright)} .banner a{color:var(--ice);border-bottom:1px solid var(--cyan);padding-bottom:1px;margin-left:6px}

  .sec-note{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted-2);letter-spacing:.04em}

  .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}

  @media (max-width:1000px){
    .tiers{grid-template-columns:1fr 1fr} .consult-grid,.crm-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:900px){
    header{padding:16px 20px} nav.links{display:none}
    section{padding:84px 20px} .scrollcue{left:20px}
    .paths-grid,.svc,.prod-grid,.builds,.two-band{grid-template-columns:1fr}
    .roofx-split,.split{grid-template-columns:1fr;gap:44px}
    .pipe-track{grid-template-columns:1fr 1fr} .stats{grid-template-columns:1fr 1fr}
    .roofx-feats{grid-template-columns:1fr} .board .cols{grid-template-columns:1fr}
    .tiers{grid-template-columns:1fr} .foot{flex-direction:column;align-items:flex-start} .foot .meta{text-align:left}
  }

  /* ===== V3 ASCENT additions ===== */
  /* A6 film grain + vignette (above canvas, below content) */
  .fx-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .fx-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(120% 120% at 50% 42%,transparent 58%,rgba(2,5,12,.55) 100%);}
  /* A7 atmosphere bands */
  .atmo{position:fixed;left:-10%;right:-10%;z-index:1;pointer-events:none;height:40vh;filter:blur(70px);opacity:.55}
  .atmo.a1{top:6%;background:linear-gradient(90deg,transparent,rgba(14,165,233,.05),transparent);animation:atmoDrift1 52s ease-in-out infinite alternate}
  .atmo.a2{bottom:4%;background:linear-gradient(90deg,transparent,rgba(56,225,255,.04),transparent);animation:atmoDrift2 68s ease-in-out infinite alternate}
  @keyframes atmoDrift1{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
  @keyframes atmoDrift2{from{transform:translateX(4%)}to{transform:translateX(-4%)}}

  /* C1 altimeter rail */
  .altimeter{position:fixed;top:0;right:22px;height:100vh;width:120px;z-index:35;pointer-events:none}
  .altimeter .rail{position:absolute;right:26px;top:16vh;height:68vh;width:1px;background:linear-gradient(180deg,transparent,var(--line) 10%,var(--line) 90%,transparent)}
  .altimeter .tick{position:absolute;right:22px;width:9px;height:1px;background:var(--muted-2);opacity:.7}
  .altimeter .stop{position:absolute;right:38px;transform:translateY(-50%);font-family:'Bricolage Grotesque';font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--muted-2);white-space:nowrap;text-align:right;pointer-events:auto;cursor:pointer;transition:color .25s}
  .altimeter .stop:hover,.altimeter .stop.on{color:var(--cyan-bright)}
  .altimeter .marker{position:absolute;right:22px;width:12px;height:12px;margin-right:-5px;transform:translateY(-50%) rotate(45deg);border:1px solid var(--cyan-bright);background:rgba(56,225,255,.14);box-shadow:0 0 12px rgba(56,225,255,.5)}
  .altimeter .alt{position:absolute;right:38px;transform:translateY(-50%);font-family:'Bricolage Grotesque';font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--cyan-bright);white-space:nowrap;text-align:right}
  @media (max-width:1100px){.altimeter{display:none}}

  /* C2 hero headline split + shimmer */
  .hero h1 .ch{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity}
  /* per-char sweep: the old parent-level background-clip:text shimmer went fully
     transparent once the headline was split into .ch spans (text lives in children,
     so the clipped gradient never painted) - chars now sweep color individually */
  .hero h1 .accent .ch.shim{animation:chShim .9s ease-out 1}
  @keyframes chShim{0%{color:var(--cyan-bright)}45%{color:#ffffff;text-shadow:0 0 20px rgba(223,246,255,.6)}100%{color:var(--cyan-bright);text-shadow:none}}

  /* C4/C7 card "pop" hover - ported from the rep landing page (.lo-prod / .lo-card) */
  .path,.svc-card,.stage,.build,.pg,.tier,.cc,.cf,.band,.incl,.board{
    position:relative;
    transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .38s,box-shadow .38s,background .38s;}
  .path:hover,.svc-card:hover,.stage:hover,.build:hover,.pg:hover,.tier:hover,.cc:hover,.cf:hover,.band:hover,.incl:hover,.board:hover{
    transform:translateY(-8px);
    border-color:rgba(14,165,233,.55);
    box-shadow:0 30px 70px -30px rgba(14,165,233,.6), inset 0 0 0 1px rgba(56,225,255,.35);
    z-index:20;}
  @media (prefers-reduced-motion: reduce){
    .path,.svc-card,.stage,.build,.pg,.tier,.cc,.cf,.band,.incl,.board{transition:none}
    .path:hover,.svc-card:hover,.stage:hover,.build:hover,.pg:hover,.tier:hover,.cc:hover,.cf:hover,.band:hover,.incl:hover,.board:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(56,225,255,.35)}
  }

  /* C6 headline clip reveal (head-xl separated from .rv in JS) */
  .head-xl{opacity:0;clip-path:inset(0 0 100% 0);transform:skewY(.8deg);transition:clip-path .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),opacity .6s}
  .head-xl.hx-in{opacity:1;clip-path:inset(0 0 0 0);transform:skewY(0)}

  /* C8 nav sliding underline */
  nav.links{position:relative}
  nav.links a.on{color:var(--cyan-bright)}
  .nav-underline{position:absolute;bottom:-6px;left:0;height:1px;width:0;background:var(--cyan-bright);opacity:0;pointer-events:none}

  /* C9 marquee proof band */
  .marquee{margin:46px 0 6px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .marquee .mtrack{display:inline-flex;white-space:nowrap;will-change:transform;animation:marqMove 28s linear infinite}
  .marquee:hover .mtrack{animation-play-state:paused}
  .marquee .mi{font-family:'Bricolage Grotesque';font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);padding:0 24px;transition:color .3s,opacity .3s}
  .marquee .mi.struck{text-decoration:line-through;text-decoration-color:var(--cyan);color:var(--muted-2);opacity:.85}
  @keyframes marqMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* Roofgrid board live flash */
  .jc.flash{border-color:var(--cyan)!important;box-shadow:-2px 0 0 0 var(--cyan) inset;transition:box-shadow .3s,border-color .3s}
  .board .col .ch b.bump{animation:countBump .5s ease-out 1}
  @keyframes countBump{0%{transform:scale(1)}40%{transform:scale(1.35);color:#ffffff}100%{transform:scale(1)}}

  @media (prefers-reduced-motion: reduce){
    .atmo,.marquee .mtrack{animation:none!important}
    .head-xl{opacity:1;clip-path:inset(0 0 0 0);transform:none;transition:none}
    .rv{transition:none}
  }

/* ===== V3 wizard modal + affiliate (data layer) ===== */
.wzr-open{overflow:hidden}
.wz-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:5vh 20px;background:rgba(3,7,16,.78);backdrop-filter:blur(6px);overflow-y:auto}
.wz-overlay.on{display:flex}
.wz-modal{width:100%;max-width:560px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:14px;box-shadow:0 50px 120px rgba(0,0,0,.6);position:relative;overflow:hidden}
.wz-modal::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--cyan-bright),transparent)}
.wz-head{padding:26px 30px 0;position:relative}
.wz-eyebrow{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan-bright)}
.wz-title{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px;color:var(--ice);margin-top:8px;line-height:1.05}
.wz-sub{color:var(--muted);font-size:14px;margin-top:8px}
.wz-x{position:absolute;top:20px;right:22px;width:34px;height:34px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:18px;line-height:1;border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s}
.wz-x:hover{color:var(--ice);border-color:var(--cyan)}
.wz-ref{display:none;align-items:center;gap:8px;margin:16px 30px 0;padding:9px 14px;border:1px solid rgba(56,225,255,.35);background:rgba(14,165,233,.08);border-radius:8px;font-size:12.5px;color:var(--ice)}
.wz-ref .rdot{width:7px;height:7px;border-radius:50%;background:var(--cyan-bright);box-shadow:0 0 0 4px rgba(56,225,255,.14)}
.wz-steps{display:flex;gap:8px;padding:22px 30px 0}
.wz-steps .sdot{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.wz-steps .sdot.on{background:var(--cyan-bright)}
.wz-steps .sdot.done{background:var(--cyan)}
.wz-body{padding:22px 30px 30px}
.wz-panel{display:none}
.wz-panel.on{display:block;animation:wzFade .35s ease}
@keyframes wzFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wz-field{margin-bottom:16px}
.wz-field label{display:block;font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:7px;text-transform:uppercase}
.wz-field input,.wz-field select,.wz-field textarea{width:100%;background:var(--navy);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:'Archivo',sans-serif;font-size:15px;padding:12px 14px;transition:border-color .2s}
.wz-field textarea{min-height:84px;resize:vertical}
.wz-field input:focus,.wz-field select:focus,.wz-field textarea:focus{outline:none;border-color:var(--cyan)}
.wz-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C8BA5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.wz-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wz-nav{display:flex;gap:12px;margin-top:22px;align-items:center}
.wz-nav .grow{flex:1}
.wz-err{color:#ff8f8f;font-size:13px;margin-top:12px;min-height:16px}
.wz-success{display:none;padding:44px 30px 46px;text-align:center}
.wz-success.on{display:block}
.wz-success .mark{width:58px;height:58px;border-radius:50%;border:1px solid var(--cyan);background:rgba(14,165,233,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--cyan-bright);font-size:26px;font-family:'Bricolage Grotesque'}
.wz-success h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:28px;color:var(--ice);text-transform:uppercase}
.wz-success p{color:var(--muted);font-size:15px;margin-top:12px;max-width:380px;margin-left:auto;margin-right:auto}
.wz-success .btn{margin-top:22px}
.wz-success .wz-success-alt{font-size:13px;color:var(--muted-2);margin-top:14px}
@media (max-width:560px){.wz-two{grid-template-columns:1fr}.wz-title{font-size:22px}}

/* affiliate signup (careers page) */
.aff-form .wz-field{margin-bottom:16px}
.aff-success{display:none}
.aff-success.on{display:block}
.aff-code{font-family:'Bricolage Grotesque';font-weight:800;font-size:30px;letter-spacing:.06em;color:var(--cyan-bright);background:var(--navy);border:1px solid var(--line);border-radius:8px;padding:16px;text-align:center;margin:14px 0 10px}
.aff-link{font-size:13px;color:var(--muted);text-align:center;word-break:break-all}
.aff-err{color:#ff8f8f;font-size:13px;margin-top:10px;display:none}

/* subpage first-section clearance under fixed header + banner */
body[data-page]:not([data-page="home"]) .content > section:first-child{padding-top:150px}
/* footer slim link row */
.foot-links{max-width:var(--maxw);margin:0 auto 26px;display:flex;flex-wrap:wrap;gap:10px 26px;border-bottom:1px solid var(--line);padding-bottom:24px}
.foot-links a{font-size:13px;color:var(--muted);transition:color .2s}
.foot-links a:hover{color:var(--cyan-bright)}

/* ===== BOLO Go phone: scroll-in entrance + scan + float ===== */
.phone{will-change:transform}
.screen{position:relative}
.phone-scan{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;opacity:0;z-index:4;
  background:linear-gradient(180deg,rgba(56,225,255,0),rgba(56,225,255,.14) 62%,rgba(56,225,255,.40));
  border-bottom:1px solid rgba(56,225,255,.7)}
.phone-scan.on{animation:phoneScan 1.15s cubic-bezier(.4,0,.2,1) 1}
@keyframes phoneScan{0%{opacity:0;transform:translateY(-45%)}12%{opacity:1}100%{opacity:0;transform:translateY(235%)}}
.verdict{transition:box-shadow .4s,border-color .4s}
.verdict.pop{animation:verdictPop .62s ease-out 1;box-shadow:0 0 26px rgba(56,225,255,.5)}
@keyframes verdictPop{0%{transform:scale(.92);opacity:.5}55%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.phone-scan{display:none}.verdict.pop{animation:none}}

/* ===== BOLO FIND/SCAN/SELL band: smoked backdrop + readable white subtext ===== */
.fsl{background:rgba(6,11,24,.58);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-color:rgba(56,225,255,.22)}
.fsl em{color:#EAF3FF}

/* ===== "Why teams switch" scrolling tag ribbon: smoked backdrop + white text ===== */
.marquee{background:rgba(6,11,24,.60);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-color:rgba(56,225,255,.22)}
.marquee .mi{color:#EAF3FF}
.marquee .mi.struck{color:#EAF3FF;opacity:.6}

/* ===== Mobile optimization ===== */
html,body{max-width:100%;overflow-x:hidden}
*{-webkit-text-size-adjust:100%}
@media (max-width:640px){
  header{padding:14px 16px}
  .hero{padding-top:88px;min-height:88vh}
  .hero h1{font-size:clamp(30px,8.6vw,48px);line-height:1.06}
  .hero .lede{font-size:16px;margin-top:20px}
  .hero .cta-row{margin-top:28px}
  .hero .microproof{gap:14px 20px;margin-top:32px}
  .head-xl{font-size:clamp(29px,8vw,44px)}
  .lead-copy{font-size:16px}
  .final{padding:96px 18px 84px}
  .final h2{font-size:clamp(38px,12.5vw,60px)}
  .final p{font-size:17px}
  .roofx-copy h2,.prod-copy h2{font-size:clamp(33px,9.5vw,52px)}
  section{padding:64px 18px}
  .board .col{min-height:auto}
  .phone{width:260px;height:520px}
  .foot-links{gap:8px 16px}
  .banner{font-size:12.5px;padding:10px 16px}
  .wz-modal{margin:0 4px}
}
@media (max-width:400px){
  .hero h1{font-size:30px}
  .final h2{font-size:34px}
  .head-xl{font-size:27px}
}

/* ===== Mobile hamburger menu ===== */
.nav-toggle{display:none;width:44px;height:40px;border:1px solid var(--line);background:rgba(10,17,34,.6);border-radius:8px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ice);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(82vw,330px);z-index:130;background:linear-gradient(180deg,var(--panel-2),var(--panel));border-left:1px solid var(--line);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:82px 26px 34px;gap:2px;box-shadow:-30px 0 80px rgba(0,0,0,.55);overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font-family:'Bricolage Grotesque';font-weight:700;font-size:19px;color:var(--ice);padding:15px 2px;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.mobile-menu a:active{color:var(--cyan-bright)}
.mobile-menu .btn{margin-top:22px;justify-content:center;padding:15px 20px;font-size:15px}
.mobile-backdrop{position:fixed;inset:0;z-index:125;background:rgba(3,7,16,.62);opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-backdrop.open{opacity:1;pointer-events:auto}
@media (max-width:900px){ .nav-toggle{display:flex} header .btn{display:none} }
@media (min-width:901px){ .nav-toggle,.mobile-menu,.mobile-backdrop{display:none!important} }