:root{
    --bg:#14110d;
    --bg-2:#1b1712;
    --panel:#221d17;
    --panel-2:#2a241d;
    --line:rgba(214,182,109,0.16);
    --line-soft:rgba(255,255,255,0.07);
    --ink:#f6efe1;
    --muted:#b9ad97;
    --muted-2:#8d8270;
    --gold:#bda779;
    --gold-2:#d0bd8c;
    --gold-grad:linear-gradient(135deg,#d1bd8b,#987843);
    --green:#5fc6a6;
    --blue:#6ea8e6;
    --violet:#b69be6;
    --red:#e0768a;
    --radius:18px;
    --shadow:0 24px 60px rgba(0,0,0,0.45);
    --surface-bg:
      radial-gradient(circle at 16% 0%,rgba(231,200,126,.055),transparent 34%),
      linear-gradient(160deg,rgba(35,31,27,.90),rgba(18,16,13,.97));
    --surface-border:rgba(214,182,109,.15);
    --surface-border-hover:rgba(214,182,109,.28);
    --surface-shadow:0 18px 44px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035);
    --surface-shadow-hover:0 24px 58px rgba(0,0,0,.38),0 0 18px rgba(214,182,109,.045),inset 0 1px 0 rgba(255,255,255,.045);
    --maxw:1180px;
    --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:112px}
  body{
    font-family:var(--font);
    background:
      radial-gradient(1100px 600px at 80% -10%, rgba(214,182,109,0.055), transparent 60%),
      radial-gradient(900px 500px at -10% 20%, rgba(110,168,230,0.06), transparent 55%),
      var(--bg);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;   /* fallback for Safari < 16 / older browsers */
    overflow-x:clip;     /* modern: clips without making body a scroll container (keeps sticky working) */
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* scroll progress */
  #progress{position:fixed;top:0;left:0;height:0.5px;width:0;z-index:100;
    background:linear-gradient(90deg,rgba(214,182,109,.2),rgba(231,200,126,.8));
    box-shadow:0 0 1.5px rgba(214,182,109,.25)}

  /* NAV */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:90;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(20,17,13,0.72);
    border-bottom:1px solid var(--line-soft)}
  /* TOP BAR (above the menu) */
  .topbar{border-bottom:1px solid var(--line-soft);
    background:linear-gradient(90deg,rgba(214,182,109,.06),rgba(214,182,109,.02))}
  .topbar-inner{display:flex;align-items:center;justify-content:space-between;
    height:38px;max-width:var(--maxw);margin:0 auto;padding:0 24px;font-size:12.5px;color:var(--muted)}
  .tb-left{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-left .tb-cta{color:var(--gold);font-weight:300;transition:.18s}
  .tb-left .tb-cta:hover{color:var(--gold-2);text-shadow:0 0 8px rgba(214,182,109,.16)}
  .tb-right{display:flex;align-items:center;gap:14px;white-space:nowrap}
  .tb-right .tb-item{display:flex;align-items:center;gap:6px;transition:.18s}
  .tb-right a.tb-item:hover{color:var(--gold)}
  .tb-sep{width:1px;height:14px;background:var(--line)}
  @media(max-width:1080px){.topbar{display:none}}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;
    height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .logo{display:flex;align-items:center;gap:11px;letter-spacing:.02em}
  .logo .mark{width:40px;height:40px;flex-shrink:0;
    background:url('images/lisra-logo.png?v=20260630-2a') center/contain no-repeat;
    color:transparent;font-size:0;
    filter:drop-shadow(0 4px 10px rgba(184,138,50,.4))}
  .logo-full{height:46px;width:auto;display:block}
  @media(max-width:560px){.logo-full{height:40px}}
  .logo-text{display:flex;flex-direction:column;line-height:1.08;align-items:stretch}
  .logo-text .brand{font-weight:400;font-size:18px}
  /* tagline stretched to the SAME width as the name (left & right edges aligned) */
  .logo-tag{font-size:11px;font-weight:500;color:var(--muted-2);
    text-align:justify;text-align-last:justify}
  .logo .tag{font-size:9px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:2px 7px;margin-left:2px}
  .nav-links{display:flex;gap:4px;align-items:center}
  .nav-links a{font-size:13px;color:var(--muted);padding:8px 11px;border-radius:9px;transition:.18s;font-weight:500}
  .nav-links a:not(.nav-cta):hover{color:var(--ink);background:rgba(214,182,109,.08);
    animation:navGlow 1.3s ease-in-out infinite}
  /* gold shade that blinks/pulses on hover */
  @keyframes navGlow{
    0%,100%{box-shadow:inset 0 -2px 0 rgba(214,182,109,.22), 0 2px 9px rgba(214,182,109,.04)}
    50%{box-shadow:inset 0 -2px 0 rgba(214,182,109,.48), 0 3px 18px rgba(214,182,109,.17)}
  }
  @keyframes labelGlow{
    0%,100%{box-shadow:0 0 6px rgba(214,182,109,.06), 0 4px 14px rgba(0,0,0,.3)}
    50%{box-shadow:0 0 22px rgba(214,182,109,.22), 0 4px 14px rgba(0,0,0,.3)}
  }
  .nav-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#b9a371 0%,#8f7341 52%,#5f4a2b 100%);
    color:#21170b !important;font-weight:500 !important;padding:9px 17px !important;border-radius:13px !important;
    box-shadow:0 10px 24px rgba(184,138,50,.04),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(85,55,12,.10)}
  .nav-cta::before{content:"";position:absolute;inset:1px;border-radius:12px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 48%,rgba(80,50,10,.05))}
  .nav-cta:hover{filter:none;transform:translateY(-1px);box-shadow:0 14px 30px rgba(184,138,50,.05),inset 0 1px 0 rgba(255,255,255,.18)}
  .burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);
    border-radius:9px;padding:7px 10px;font-size:18px;cursor:pointer}
  @media(max-width:1080px){
    .nav-links{position:fixed;top:64px;left:0;right:0;flex-direction:column;gap:0;
      background:rgba(20,17,13,.97);border-bottom:1px solid var(--line);padding:8px;
      transform:translateY(-130%);transition:.3s;align-items:stretch}
    .nav-links.open{transform:translateY(0)}
    .nav-links a{padding:12px}
    .burger{display:block}
  }

  /* SECTION SHELL */
  section{padding:92px 0;border-bottom:1px solid var(--line-soft);position:relative}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:300;
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
    border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:20px;
    background:rgba(214,182,109,.06)}
  h2.title{font-family:var(--display);font-size:28px;line-height:1.18;
    font-weight:300;letter-spacing:-.015em;margin-bottom:14px}
  .feature-title{font-size:28px;line-height:1.16;letter-spacing:-.02em}
  .feature-title .soft{display:block;color:var(--muted);font-weight:500}
  .subsection-title{font-size:28px;line-height:1.18;margin-top:60px}
  .subsection-title.center{text-align:center;margin-top:58px}
  .lede{font-size:15px;line-height:1.68;color:var(--muted);max-width:760px;margin-bottom:8px}
  .grad{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  /* brand wordmark: "Lisra" normal weight + ink colour · "Ai" bold deep-gold · never all-caps */
  .brand,.rname{font-weight:400;color:var(--ink);text-transform:none}
  .brand .ai{color:#987843;font-weight:700}

  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* HERO */
  .hero{padding:150px 0 80px;border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
  .hero > *{position:relative;z-index:1}
  /* full-width flowing streak background */
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
  .hero-bg svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:150%;min-width:1600px;height:140%;opacity:.5;
    overflow:hidden;filter:blur(2.5px);animation:heroDrift 30s ease-in-out infinite alternate}
  @keyframes heroDrift{0%{transform:translate(-52%,-50%)}100%{transform:translate(-48%,-50%)}}
  @media(max-width:720px){.hero-bg svg{display:none}}
  @media(max-width:1080px){.hero{padding:104px 0 80px}}
  .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:34px;align-items:center;text-align:left}
  .hero h1{font-family:var(--display);font-weight:300;font-size:36px;
    line-height:1.18;letter-spacing:-.015em;margin-bottom:20px}
  .node .nm{font-weight:300;letter-spacing:-.01em}
  .hero p.sub{font-size:15px;line-height:1.68;color:var(--muted);max-width:560px;margin:0 0 12px}
  .hero .micro{font-size:15px;line-height:1.68;color:var(--muted-2);max-width:540px;margin:0 0 30px}
  .hero .eyebrow{margin-bottom:18px}
  .hero .btns{justify-content:flex-start;margin-bottom:0}
  @media(max-width:940px){
    .hero{padding:104px 0 70px}
    .hero-grid{grid-template-columns:1fr;text-align:center;gap:18px}
    .hero p.sub,.hero .micro{margin-left:auto;margin-right:auto}
    .hero .btns{justify-content:center}
    .hero-visual{order:-1;width:min(360px,80vw);margin:6px auto 8px}
  }
  .hero-eyebrow-mob{display:none}
  @media(max-width:480px){
    .hero-eyebrow-mob{display:inline-flex;order:1;margin:0 auto 0}
    .hero-eyebrow-desk{display:none}
    .hero-visual{order:2;width:min(340px,88vw);justify-self:center;margin:8px auto 28px}
    .hero-copy{order:3;text-align:center}
    .hero-copy h1{font-size:33px;line-height:1.2}
    .hero-copy h1,.hero-copy p{text-align:center}
    .hero-copy p.sub,.hero-copy p.micro{margin-left:auto;margin-right:auto}
    .hero-copy .btns{display:flex;flex-wrap:nowrap;justify-content:center;gap:10px}
    .hero-copy .btns .btn{flex:1 1 0;min-width:0;max-width:156px;padding:11px 10px;font-size:13px;border-radius:12px;white-space:nowrap}
  }

  /* hero node-network: one brain → every industry */
  .hnet{position:relative;width:100%;max-width:450px;aspect-ratio:1/1;margin:0 auto}
  .hnet .lines{position:absolute;inset:0;width:100%;height:100%}
  .hnet .orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    border:1px dashed rgba(214,182,109,.15);border-radius:50%}
  .hnet .orbit.o1{width:52%;height:52%}
  .hnet .orbit.o2{width:100%;height:100%}
  .hnet-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
    width:104px;height:104px;border-radius:25px;display:grid;place-items:center;text-align:center;
    background:radial-gradient(circle at 50% 34%,rgba(231,200,126,.4),rgba(154,119,39,.14));
    border:1px solid rgba(214,182,109,.55);animation:hubPulse 3.2s ease-in-out infinite}
  .hnet-core .hc-ic{font-size:21px;line-height:1;height:22px;display:flex;align-items:center;justify-content:center;overflow:visible}
  .hnet-core .hc-t{font-size:11px;font-weight:300;margin-top:26px}
  .hnet-core .hc-s{font-size:6.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
  .hnode{position:absolute;transform:translate(-50%,-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:5px;animation:bob 4s ease-in-out infinite}
  .hnode .av{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:23px;
    background:linear-gradient(165deg,var(--panel),var(--bg-2));border:1px solid var(--line);
    box-shadow:0 8px 20px rgba(0,0,0,.45);transition:.2s}
  .hnode .lb{font-size:10px;font-weight:300;color:var(--muted);white-space:nowrap}
  .hnode:hover .av{border-color:var(--gold);box-shadow:0 0 20px rgba(214,182,109,.35);transform:translateY(-2px)}
  @keyframes bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
  .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:54px}
  .btn{position:relative;isolation:isolate;overflow:hidden;padding:14px 27px;border-radius:14px;font-weight:500;font-size:15px;cursor:pointer;
    border:1px solid var(--surface-border);transition:transform .2s,box-shadow .2s,border-color .2s,background .2s,color .2s;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;letter-spacing:-.005em}
  .btn::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;opacity:.55;
    background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 45%,rgba(0,0,0,.08))}
  .btn.primary{background:linear-gradient(135deg,#b9a371 0%,#90733f 48%,#604a2a 100%);color:#21170b;border-color:rgba(208,189,140,.13);
    box-shadow:0 12px 28px rgba(184,138,50,.04),0 2px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(80,50,10,.12) inset}
  .btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(184,138,50,.05),0 0 14px rgba(214,182,109,.012),0 2px 0 rgba(255,255,255,.08) inset}
  .btn.ghost{background:linear-gradient(160deg,rgba(35,31,27,.78),rgba(18,16,13,.88));color:var(--ink);
    border-color:rgba(214,182,109,.20);box-shadow:0 12px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)}
  .btn.ghost:hover{transform:translateY(-2px);background:linear-gradient(160deg,rgba(42,36,29,.88),rgba(18,16,13,.92));
    border-color:rgba(214,182,109,.24);box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 18px rgba(214,182,109,.018),inset 0 1px 0 rgba(255,255,255,.045)}
  .btn:focus-visible,.nav-cta:focus-visible{outline:2px solid rgba(231,200,126,.22);outline-offset:3px}
  .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .stat{position:relative;overflow:hidden;background:var(--surface-bg);
    border:1px solid var(--surface-border);border-radius:18px;padding:18px 18px 17px;min-height:122px;
    box-shadow:var(--surface-shadow);transition:border-color .2s,box-shadow .2s}
  .stat:before{content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(120deg,rgba(255,255,255,.06),transparent 34%,transparent 70%,rgba(214,182,109,.045));opacity:.7}
  .stat-k{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;
    font-size:10px;font-weight:300;letter-spacing:.13em;text-transform:uppercase;
    color:#cdbb8e;text-shadow:0 0 10px rgba(214,182,109,.14)}
  .stat-k:before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(214,182,109,.58);
    box-shadow:0 0 12px rgba(214,182,109,.30)}
  .stat .n{position:relative;z-index:1;font-size:clamp(25px,3.2vw,34px);font-weight:300;line-height:1;
    margin-top:15px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.01em}
  .stat .l{position:relative;z-index:1;font-size:12.8px;font-weight:400;color:var(--muted);margin-top:10px;line-height:1.6;max-width:220px}
  .stat:hover{border-color:var(--surface-border-hover);box-shadow:var(--surface-shadow-hover)}
  @media(max-width:720px){.stat-row{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:420px){.stat-row{grid-template-columns:1fr}.stat{min-height:auto}}

  /* generic grids/cards */
  .grid{display:grid;gap:18px;margin-top:34px}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
  .card{background:linear-gradient(165deg,var(--panel),var(--bg-2));
    border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative;
    transition:.22s}
  .card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
  .card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:rgba(214,182,109,.12);border:1px solid var(--line);margin-bottom:14px;font-size:22px}
  .card h3{font-size:17px;font-weight:300;margin-bottom:7px}
  .card p{font-size:14px;color:var(--muted)}
  .card ul{margin-top:10px;padding-left:0;list-style:none}
  .card li{font-size:13.5px;color:var(--muted);padding-left:20px;position:relative;margin:5px 0}
  .card li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;
    background:var(--gold-grad)}
  .pill{display:inline-block;font-size:11px;font-weight:300;letter-spacing:.04em;
    padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--gold);
    background:rgba(214,182,109,.08)}
  .pill.green{color:var(--green);border-color:rgba(95,198,166,.3);background:rgba(95,198,166,.08)}
  .pill.blue{color:var(--blue);border-color:rgba(110,168,230,.3);background:rgba(110,168,230,.08)}

  .card p,
  .opp-card p,
  .node .nd,
  .compact-example p,
  .home-explain p,
  .case-query p,
  .chcard>p,
  .svc .sd,
  .faq p{
    font-size:15px;
    line-height:1.65;
  }

  /* problem vs solution */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
  @media(max-width:760px){.split{grid-template-columns:1fr}}
  .box{border-radius:var(--radius);padding:24px;border:1px solid var(--line)}
  .box.bad{background:linear-gradient(165deg,rgba(224,118,138,.08),var(--bg-2));border-color:rgba(224,118,138,.25)}
  .box.good{background:linear-gradient(165deg,rgba(95,198,166,.08),var(--bg-2));border-color:rgba(95,198,166,.28)}
  .box h4{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
  .box li{list-style:none;font-size:14px;color:var(--muted);padding:7px 0 7px 26px;position:relative;
    border-top:1px solid var(--line-soft)}
  .box li:first-of-type{border-top:none}
  .box.bad li::before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:300}
  .box.good li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:300}

  /* ===== OPPORTUNITY — before/after visual diagrams ===== */
  .opp-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:32px}
  .opp-card{position:relative;border-radius:var(--radius);padding:20px 20px 22px;border:1px solid var(--line);
    background:linear-gradient(165deg,var(--panel),var(--bg-2))}
  .opp-before{border-color:rgba(224,118,138,.22)}
  .opp-after{border-color:rgba(214,182,109,.34)}
  .opp-tag{display:inline-block;font-size:10.5px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 11px;border-radius:999px;margin-bottom:6px;white-space:nowrap}
  .opp-tag.bad{color:#e0768a;background:rgba(224,118,138,.1);border:1px solid rgba(224,118,138,.3)}
  .opp-tag.good{color:var(--gold);background:rgba(214,182,109,.1);border:1px solid rgba(214,182,109,.35)}
  .opp-stage{position:relative;margin:10px 0 14px}
  .opp-stage svg{display:block;width:100%;height:auto}
  .opp-tile{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:12px;
    display:grid;place-items:center;font-size:20px;z-index:2;
    background:linear-gradient(165deg,var(--bg-2),#191510);border:1px solid var(--line);box-shadow:0 6px 14px rgba(0,0,0,.45)}
  .opp-scatter .opp-tile{filter:grayscale(.25);opacity:.92}
  .opp-core{width:70px;height:70px;border-radius:18px;flex-direction:column;gap:1px;z-index:3;
    background:radial-gradient(circle at 50% 34%,rgba(231,200,126,.42),rgba(154,119,39,.16));
    border:1px solid rgba(214,182,109,.6);box-shadow:0 0 26px rgba(214,182,109,.3)}
  .opp-core .cc-ic{font-size:22px;line-height:1}
  .opp-core .cc-t{font-size:11px;font-weight:300;margin-top:2px}
  .opp-float{position:absolute;right:8px;bottom:6px;z-index:4;font-size:10.5px;font-weight:300;
    padding:5px 10px;border-radius:999px;color:#e0768a;background:rgba(224,118,138,.12);border:1px solid rgba(224,118,138,.32)}
  .opp-float.good{color:var(--gold);background:rgba(214,182,109,.12);border-color:rgba(214,182,109,.34)}
  .opp-h4{font-size:16px;font-weight:300;margin-bottom:6px}
  .opp-top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
  .opp-top-row .opp-tag{margin-bottom:0}
  .opp-bill{flex-shrink:0;font-size:10.5px;font-weight:300;color:var(--gold);white-space:nowrap;
    background:rgba(214,182,109,.12);border:1px solid rgba(214,182,109,.34);padding:4px 11px;border-radius:999px}
  .opp-bill.bad{color:#e0768a;background:rgba(224,118,138,.12);border-color:rgba(224,118,138,.32)}
  .opp-card p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
  .opp-vs{align-self:center;display:grid;place-items:center}
  .opp-vs span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:12px;font-weight:300;
    color:var(--gold);background:rgba(214,182,109,.1);border:1px solid rgba(214,182,109,.35)}
  .opp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
  .opp-stat{text-align:center;border:1px solid var(--line);border-radius:14px;padding:15px 10px;
    background:linear-gradient(160deg,var(--panel),var(--bg-2))}
  .opp-stat .lbl{display:block;font-size:9.5px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted-2);margin-bottom:8px;line-height:1.35}
  .opp-stat .to{display:block;font-size:20px;font-weight:300;letter-spacing:-.01em;line-height:1.1;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .opp-stat .from{display:block;font-size:11px;color:var(--muted-2);margin-top:5px;
    text-decoration:line-through;text-decoration-color:rgba(224,118,138,.6)}
  /* unified hub — hero-style radial: brain core + thin dashed, animated spokes */
  .opp-hub{position:relative;width:100%;max-width:300px;margin:8px auto 14px;aspect-ratio:1 / 0.8}
  .opp-hub .opp-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .opp-hub .opp-lines line{stroke:rgba(214,182,109,.55);stroke-width:.7;stroke-dasharray:2.4 3;
    vector-effect:non-scaling-stroke;animation:oppFlow 1.5s linear infinite}
  .opp-hub .opp-lines .opp-orbit{fill:none;stroke:rgba(214,182,109,.14);stroke-width:.5;
    stroke-dasharray:1.4 2.6;vector-effect:non-scaling-stroke}
  @keyframes oppFlow{to{stroke-dashoffset:-21.2}}
  /* "signal": several thin streaks continuously flow hub → icon → around it → back (never empty) */
  .opp-rain path{stroke-dasharray:6 19;animation:oppRain 1.9s linear infinite}
  /* desync every spoke — different speeds + offsets so they arrive at random, not all together */
  .opp-rain path:nth-child(1){animation-duration:1.8s;animation-delay:-0.3s}
  .opp-rain path:nth-child(2){animation-duration:2.6s;animation-delay:-1.4s}
  .opp-rain path:nth-child(3){animation-duration:1.5s;animation-delay:-0.9s}
  .opp-rain path:nth-child(4){animation-duration:2.3s;animation-delay:-0.2s}
  .opp-rain path:nth-child(5){animation-duration:2.0s;animation-delay:-1.7s}
  .opp-rain path:nth-child(6){animation-duration:1.6s;animation-delay:-0.6s}
  @keyframes oppRain{from{stroke-dashoffset:0}to{stroke-dashoffset:-25}}
  .opp-float-tr{top:6px;right:8px;bottom:auto}
  @media(prefers-reduced-motion:reduce){.opp-rain path{animation:none;opacity:0}}
  .opp-node{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:12px;
    display:grid;place-items:center;z-index:2;
    background:linear-gradient(165deg,var(--bg-2),#191510);border:1px solid rgba(214,182,109,.32);box-shadow:0 6px 14px rgba(0,0,0,.45)}
  .opp-node svg{width:20px;height:20px;stroke:#e7c87e;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .opp-coreT{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
    width:92px;height:92px;border-radius:22px;display:grid;place-items:center;text-align:center;line-height:1.05;
    background:radial-gradient(circle at 50% 34%,rgba(231,200,126,.4),rgba(154,119,39,.14));
    border:1px solid rgba(214,182,109,.55);box-shadow:0 0 32px rgba(214,182,109,.3);
    animation:hubPulse 3.2s ease-in-out infinite}
  .opp-coreT .oc-ic{font-size:30px;line-height:1}
  .opp-coreT .oc-t{font-size:12.5px;font-weight:300;margin-top:3px}
  .opp-coreT .oc-s{font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  @media(prefers-reduced-motion:reduce){.opp-hub .opp-lines line{animation:none}}
  @media(max-width:760px){
    .opp-compare{grid-template-columns:1fr}
    .opp-vs{transform:rotate(90deg);margin:-4px auto}
    .opp-stats{grid-template-columns:repeat(2,1fr)}
    .opp-top-row{flex-wrap:wrap;gap:8px}
  }
  @media(max-width:430px){
    .opp-tag{font-size:9.5px;padding:4px 9px}
    .opp-bill{font-size:9.5px;padding:4px 9px}
  }

  /* ARCHITECTURE DIAGRAM */
  .diagram{margin-top:38px;display:flex;flex-direction:column;align-items:center;gap:0}
  .node{width:100%;max-width:760px;border-radius:16px;padding:20px 22px;text-align:center;
    border:1px solid var(--line);background:linear-gradient(165deg,var(--panel),var(--bg-2))}
  .node.master{max-width:880px;background:linear-gradient(135deg,rgba(231,200,126,.16),rgba(184,138,50,.06));
    border-color:var(--gold);box-shadow:0 0 40px rgba(214,182,109,.12)}
  .node .nt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:300}
  .node .nm{font-size:clamp(22px,3vw,30px);font-weight:300;font-family:var(--display);margin:4px 0 6px}
  .node .nd{font-size:14px;color:var(--muted)}
  .connector{width:2px;height:34px;background:linear-gradient(var(--gold),transparent)}
  .branch{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:13px;font-weight:300;margin:6px 0}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;max-width:880px;margin-top:8px}
  @media(max-width:680px){.two{grid-template-columns:1fr}}
  .chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
  .chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
    color:var(--muted);background:rgba(255,255,255,.02)}

  /* FLOW (how it works) */
  .flow{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:36px;align-items:stretch}
  @media(max-width:900px){.flow{grid-template-columns:repeat(2,1fr)}}
  .step{background:linear-gradient(165deg,var(--panel),var(--bg-2));border:1px solid var(--line);
    border-radius:14px;padding:16px 12px;text-align:center;position:relative}
  .step .si{font-size:24px}
  .step .sn{font-size:11px;color:var(--gold);font-weight:300;letter-spacing:.06em;margin:6px 0 3px}
  .step .sd{font-size:12px;color:var(--muted)}

  /* layered stack */
  .stack{margin-top:34px;display:flex;flex-direction:column;gap:10px}
  .layer{border:1px solid var(--line);border-radius:14px;padding:18px 20px;
    background:linear-gradient(165deg,var(--panel),var(--bg-2))}
  .layer .lh{display:flex;align-items:center;gap:10px;font-weight:300;font-size:15px;margin-bottom:10px}
  .layer .badge{font-size:10px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;
    padding:3px 8px;border-radius:6px;background:rgba(214,182,109,.14);color:var(--gold)}
  .layer .badge.b2{background:rgba(110,168,230,.14);color:var(--blue)}
  .tags{display:flex;flex-wrap:wrap;gap:7px}
  .tags span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.03);
    border:1px solid var(--line-soft);border-radius:8px;padding:6px 11px;
    transition:border-color .22s ease,background .22s ease,transform .22s ease,color .22s ease}
  .tags span svg{width:15px;height:15px;flex:none;display:block;fill:none;stroke:url(#lisraIconGrad);
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:#dcb86e;
    transition:filter .22s ease,transform .22s ease}
  .tags span:hover{border-color:rgba(220,184,110,.42);background:rgba(220,184,110,.07);transform:translateY(-1px);color:var(--ink)}
  .tags span:hover svg{filter:brightness(1.18) drop-shadow(0 0 4px rgba(232,201,128,.5));transform:scale(1.09)}

  /* TABLE */
  .tbl{margin-top:32px;border:1px solid var(--line);border-radius:var(--radius);
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .tbl table{min-width:480px}
  @media(max-width:560px){th,td{padding:10px 12px;font-size:12.5px}
    thead th{font-size:10.5px}}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
  thead th{background:rgba(214,182,109,.07);color:var(--gold);font-size:12px;
    letter-spacing:.06em;text-transform:uppercase;font-weight:300}
  tbody tr:hover{background:rgba(214,182,109,.04)}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
  .row-hi{background:rgba(95,198,166,.06)}

  /* pricing tiers */
  .tier{display:flex;flex-direction:column}
  .tier.feat{border-color:var(--gold);box-shadow:0 0 40px rgba(214,182,109,.12)}
  .tier .price{font-size:34px;font-weight:300;letter-spacing:-.02em;margin:6px 0}
  .tier .price small{font-size:14px;color:var(--muted);font-weight:500}
  .tier .who{font-size:13px;color:var(--gold);margin-bottom:14px}

  /* timeline */
  .timeline{margin-top:36px;position:relative;padding-left:28px}
  .timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
    background:linear-gradient(var(--gold),rgba(214,182,109,.1))}
  .tl{position:relative;padding:0 0 26px 22px}
  .tl::before{content:"";position:absolute;left:-27px;top:3px;width:16px;height:16px;border-radius:50%;
    background:var(--bg);border:3px solid var(--gold);box-shadow:0 0 0 4px rgba(214,182,109,.12)}
  .tl.done::before{background:var(--gold-grad);border-color:var(--gold)}
  .tl .when{font-size:12px;font-weight:300;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
  .tl h4{font-size:16px;margin:3px 0 5px}
  .tl p{font-size:13.5px;color:var(--muted)}

  /* callout / note */
  .note{margin-top:26px;border:1px dashed var(--line);border-radius:14px;padding:16px 18px;
    font-size:13px;color:var(--muted-2);background:rgba(255,255,255,.02)}
  .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
  @media(max-width:760px){.kpi-strip{grid-template-columns:repeat(2,1fr)}}
  .kpi{border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;
    background:linear-gradient(165deg,var(--panel),var(--bg-2))}
  .kpi .v{font-size:26px;font-weight:300;background:var(--gold-grad);-webkit-background-clip:text;
    background-clip:text;color:transparent}
  .kpi .k{font-size:12px;color:var(--muted);margin-top:3px}

  /* invest CTA */
  .cta-final{text-align:center;background:
    radial-gradient(700px 300px at 50% 0%,rgba(214,182,109,.14),transparent 60%);
    border:1px solid var(--line);border-radius:24px;padding:56px 26px;margin-top:20px}
  footer{padding:54px 0 36px;text-align:left;color:var(--muted-2);font-size:13px;
    border-top:1px solid var(--line-soft)}
  .foot{display:grid;grid-template-columns:minmax(240px,280px) 1fr;gap:48px;align-items:start}
  .foot-right{display:flex;flex-direction:column;min-width:0}
  .foot-cols{display:grid;grid-template-columns:minmax(390px,1fr) minmax(230px,260px);gap:46px;align-items:start}
  .foot-links{display:grid;grid-template-columns:repeat(3,minmax(108px,1fr));gap:30px}
  .foot-news{width:100%}
  @media(max-width:1100px){.foot{grid-template-columns:1fr;gap:36px}
    .foot-cols{grid-template-columns:minmax(390px,1fr) minmax(230px,260px);gap:34px}}
  @media(max-width:760px){.foot-cols{grid-template-columns:1fr;gap:32px}}
  @media(max-width:680px){.foot-links{grid-template-columns:1fr 1fr;gap:28px 36px}
    .foot-news{width:100%}}
  @media(max-width:520px){.foot-links{grid-template-columns:1fr;gap:24px}}
  .footer-logo-full{display:block;line-height:0}
  .footer-logo-full img{display:block;height:46px;width:auto;max-width:100%;filter:drop-shadow(0 8px 18px rgba(184,138,50,.16))}
  .foot-tag{font-size:13.5px;color:var(--muted);max-width:300px;margin-top:16px;line-height:1.65}
  .foot-co{font-size:12.5px;color:var(--muted-2);margin-top:18px;line-height:1.7;max-width:300px}
  .foot-product{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.01em}
  .foot-co strong{color:var(--ink);font-weight:300}
  .foot-co a{color:var(--muted)}
  .foot-co a:hover{color:var(--gold)}
  .foot-contact{display:grid;gap:4px;margin-top:10px}
  .foot-contact span{display:block}
  .foot-contact b{color:var(--ink);font-weight:300}
  /* ===== FOOTER NEWSLETTER ===== */
  .foot-news{padding-top:2px}
  .foot-news h4{font-size:12px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
  .news-sub{font-size:12.5px;color:var(--muted);line-height:1.6;max-width:280px;margin-bottom:16px}
  .news-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
  .news-row{display:flex;align-items:stretch;gap:8px;max-width:300px}
  .news-row input[type=email]{flex:1;min-width:0;height:42px;padding:0 14px;border-radius:11px;
    border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);font-size:13.5px;
    font-family:inherit;transition:border-color .2s,background .2s}
  .news-row input[type=email]::placeholder{color:var(--muted-2)}
  .news-row input[type=email]:focus{outline:none;border-color:rgba(214,182,109,.55);background:rgba(214,182,109,.05)}
  .news-row button{flex-shrink:0;width:46px;height:42px;border:none;border-radius:11px;cursor:pointer;
    display:grid;place-items:center;color:#241d12;background:var(--gold-grad);
    box-shadow:0 6px 16px rgba(214,182,109,.22);transition:transform .2s,box-shadow .2s,filter .2s}
  .news-row button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 22px rgba(214,182,109,.32)}
  .news-row button:active{transform:translateY(0)}
  .news-row button svg{width:18px;height:18px;stroke-width:2.1}
  .news-note{display:block;font-size:11px;color:var(--muted-2);margin-top:9px;letter-spacing:.01em}
  .foot-social{display:flex;gap:10px;margin-top:18px}
  .foot-social a{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;
    place-items:center;color:var(--muted);background:rgba(255,255,255,.03);transition:.2s}
  .foot-social a:hover{color:var(--gold);border-color:var(--gold);background:rgba(214,182,109,.1);transform:translateY(-2px)}
  .foot-social svg{width:16px;height:16px}
  .fikhsons-link{color:var(--muted-2);text-decoration:none;transition:color .2s}
  .fikhsons-link:hover{color:var(--gold)}
  .foot-col h4{font-size:12px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
  .foot-col a{display:block;font-size:13.5px;color:var(--muted);padding:5px 0;transition:.18s}
  .foot-col a:hover{color:var(--gold)}
  .foot-col .foot-addr{display:block;font-size:13px;color:var(--muted);padding:5px 0;line-height:1.55}
  /* ===== VERIFIED CREDENTIALS STRIP — clean, uniform, monochrome ===== */
  .foot-certs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:flex-start;
    gap:22px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-soft)}
  .foot-certs .cert{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;min-width:0}
  .cert-cap{font-size:8px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .cert-mark{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:300;
    letter-spacing:-.005em;color:var(--ink);white-space:nowrap;transition:color .2s}
  .cert:hover .cert-mark{color:#fff}
  .cert-mark svg{width:22px;height:22px;flex-shrink:0;stroke-width:1.6;color:var(--gold);
    opacity:.85;transition:opacity .2s}
  .cert:hover .cert-mark svg{opacity:1}
  .cert-mark sup{font-size:6.5px;font-weight:300;color:var(--gold);top:-.7em;margin-left:1px}
  @media(max-width:680px){
    .foot-certs{grid-template-columns:repeat(2,minmax(120px,1fr));gap:26px 30px;padding-top:24px}
  }
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    border-top:1px solid var(--line-soft);padding-top:22px;margin-top:30px;font-size:12.5px;color:var(--muted-2)}
  .foot-bottom .links{display:flex;gap:20px}
  .foot-bottom a{color:var(--muted-2);transition:.18s}
  .foot-bottom a:hover{color:var(--gold)}
  @media(max-width:560px){
    /* centre everything in the footer on mobile */
    .foot{text-align:center}
    .foot-brand{display:flex;flex-direction:column;align-items:center}
    .footer-logo-full img{height:40px}
    .foot-brand .logo{justify-content:center}
    .foot-tag,.foot-co{max-width:340px;margin-left:auto;margin-right:auto}
    .foot-contact{width:100%;max-width:318px;margin:16px auto 0;gap:9px;text-align:left}
    .foot-contact span{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:start;line-height:1.45}
    .foot-contact b{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#cdbb8e}
    .foot-contact a{word-break:break-word}
    .foot-news{max-width:340px;margin-left:auto;margin-right:auto}
    .news-sub{margin-left:auto;margin-right:auto}
    .news-row{margin-left:auto;margin-right:auto}
    .foot-social{justify-content:center}
    /* full-width cols so the dividers span across, content stays centred */
    .foot-links{gap:0}
    .foot-col{text-align:center;border-top:1px solid var(--line-soft);padding:22px 0}
    .foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:12px}
    .foot-bottom .links{justify-content:center;flex-wrap:wrap}
    .copy-line2{display:block;margin-top:2px}
  }
  .disclaimer{font-size:11.5px;color:var(--muted-2);margin:22px 0 0;line-height:1.7;text-align:left}

  /* ===== RIGHT-SIDE VERTICAL DOT NAV (extra sticky bar) ===== */
  .dotnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:80;
    display:flex;flex-direction:column;gap:19px;align-items:flex-end}
  .dotnav a{position:relative;display:flex;align-items:center;justify-content:flex-end;cursor:pointer}
  /* label = same button style as the top-nav active item, but KEEP the left arrow tip.
     absolutely placed so it never shifts the dot column; its right cap tucks under the dot */
  .dotnav .dlabel{position:absolute;right:-2px;top:50%;z-index:1;opacity:0;
    transform:translateY(-50%) translateX(8px);
    transition:opacity .25s cubic-bezier(.2,.7,.2,1),transform .25s cubic-bezier(.2,.7,.2,1);
    white-space:nowrap;font-size:12px;font-weight:300;letter-spacing:.01em;color:var(--gold);
    background:rgba(214,182,109,.13);border:1px solid rgba(214,182,109,.32);
    padding:7px 22px 7px 14px;border-radius:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  /* left-pointing arrow tip (kept) — inherits the same gold button look */
  .dotnav .dlabel::before{content:"";position:absolute;left:-7px;top:50%;
    transform:translateY(-50%) rotate(45deg);width:13px;height:13px;
    background:rgba(214,182,109,.13);
    border-left:1px solid rgba(214,182,109,.32);border-bottom:1px solid rgba(214,182,109,.32)}
  /* dot stays in the column and sits ON TOP of the label's right cap */
  .dotnav .ddot{position:relative;z-index:2;
    width:6px;height:6px;border-radius:50%;border:1.5px solid var(--muted-2);
    background:transparent;opacity:.55;flex-shrink:0;
    transition:.25s cubic-bezier(.2,.7,.2,1)}
  .dotnav a:hover .dlabel{opacity:1;transform:translateY(-50%);
    animation:navGlow 1.3s ease-in-out infinite}
  .dotnav a:hover .ddot{border-color:var(--gold);opacity:1;transform:scale(1.25)}
  .dotnav a.active .ddot{width:9px;height:9px;border:none;background:linear-gradient(135deg,#d7bd78,#8b6628);opacity:1;
    box-shadow:0 0 8px rgba(231,200,126,.24),0 1px 2px rgba(0,0,0,.4)}
  /* active label = top-nav active button style: gold underline + soft gold shade */
  .dotnav a.active .dlabel{opacity:1;transform:translateY(-50%);
    box-shadow:inset 0 -2px 0 rgba(214,182,109,.44), 0 3px 14px rgba(214,182,109,.064)}
  @media(max-width:1040px){.dotnav{display:none}}   /* hide on tablets/phones to avoid overlap */

  /* scroll-spy active nav */
  .nav-links a.active:not(.nav-cta){color:var(--gold);background:rgba(214,182,109,.07);
    box-shadow:inset 0 -2px 0 rgba(214,182,109,.44), 0 3px 14px rgba(214,182,109,.064)}

  /* ===== Ai AGENT WORKFLOW DIAGRAM ===== */
  .agentwf{margin-top:18px;display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:14px;align-items:start}
  @media(max-width:880px){.agentwf{grid-template-columns:1fr}}
  .wfcol{display:flex;flex-direction:column;gap:10px}
  .wfhead{font-size:11.5px;font-weight:300;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted-2);text-align:center;margin-bottom:2px}
  .wfchip{border:1px solid var(--line);border-radius:13px;padding:12px 14px;
    background:linear-gradient(165deg,var(--panel),var(--bg-2));display:flex;gap:11px;align-items:flex-start}
  .wfchip .em{font-size:18px;line-height:1.3}
  .wfchip .t{font-weight:300;font-size:13.5px}
  .wfchip .d{font-size:12px;color:var(--muted)}
  .brainbox{border:1px solid var(--gold);border-radius:18px;padding:16px 16px 14px;
    background:linear-gradient(165deg,rgba(231,200,126,.10),var(--bg-2));
    box-shadow:0 0 44px rgba(214,182,109,.14)}
  .brainbox .bt{font-weight:300;font-size:15px;text-align:center;margin-bottom:4px}
  .brainbox .bsub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:12px}
  .feeders{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .feeder{border:1px dashed var(--line);border-radius:10px;padding:8px 10px;font-size:11.5px;
    color:var(--muted);background:rgba(255,255,255,.02);text-align:center}
  .feeder b{color:var(--ink);display:block;font-size:12px}
  .loop{display:flex;flex-direction:column;gap:0}
  .lstep{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px dashed var(--line-soft)}
  .lstep:first-child{border-top:none}
  .lstep .ln{flex-shrink:0;width:22px;height:22px;border-radius:7px;background:var(--gold-grad);
    color:#2a2018;font-weight:300;font-size:12px;display:grid;place-items:center;margin-top:1px}
  .lstep .lt{font-weight:300;font-size:13.5px}
  .lstep .ld{font-size:12px;color:var(--muted)}
  .loopback{margin-top:10px;text-align:center;font-size:12px;font-weight:300;color:var(--gold);
    border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:rgba(214,182,109,.07)}
  .wfout{margin-top:16px;border:1px solid var(--green);border-radius:14px;padding:14px 18px;
    background:linear-gradient(165deg,rgba(95,198,166,.09),var(--bg-2));font-size:13.5px;color:var(--ink)}
  .wfout b{color:var(--green)}
  .vs{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:620px){.vs{grid-template-columns:1fr}}
  .vsbox{border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:13px}
  .vsbox .vh{font-weight:300;font-size:13.5px;margin-bottom:5px}
  .vsbox.plain{color:var(--muted)}
  .vsbox.agent{border-color:var(--gold);background:rgba(214,182,109,.05)}

  .home-explain{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .home-explain .mini-card{border:1px solid var(--line);border-radius:14px;padding:16px;
    background:linear-gradient(165deg,var(--panel),var(--bg-2))}
  .home-explain .mini-k{font-size:10.5px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
  .home-explain h3{font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
  .home-explain p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
  .compact-example{margin-top:28px;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
    background:linear-gradient(165deg,rgba(214,182,109,.055),rgba(255,255,255,.02))}
  .compact-example .ex-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
  .compact-example .ex-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
    border:1px solid var(--line);background:rgba(214,182,109,.09)}
  .compact-example h3{font-size:16px;margin-bottom:4px}
  .compact-example p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
  .ex-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .ex-steps span{border:1px solid var(--line-soft);border-radius:12px;padding:11px 12px;background:rgba(0,0,0,.16);
    color:var(--muted);font-size:12px;line-height:1.45}
  .ex-steps b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:3px}
  .platform-brief{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .platform-brief .brief-card{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:linear-gradient(165deg,var(--panel),var(--bg-2))}
  .platform-brief .brief-card h3{font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .brief-list{display:flex;flex-wrap:wrap;gap:7px}
  .brief-list span{font-size:12px;color:var(--muted);border:1px solid var(--line-soft);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.025)}
  @media(max-width:820px){.home-explain,.ex-steps,.platform-brief{grid-template-columns:1fr}}

  .case-study{position:relative;margin-top:18px;border:1px solid rgba(214,182,109,.42);border-radius:18px;
    background:
      linear-gradient(rgba(214,182,109,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(214,182,109,.03) 1px,transparent 1px),
      radial-gradient(circle at 18% 0%,rgba(231,200,126,.15),transparent 32%),
      radial-gradient(circle at 86% 100%,rgba(95,198,166,.10),transparent 30%),
      linear-gradient(165deg,rgba(214,182,109,.08),rgba(255,255,255,.025));
    background-size:34px 34px,34px 34px,auto,auto,auto;
    box-shadow:0 22px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden}
  .case-study:before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
    background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.055) 50%,transparent 80%);
    transform:translateX(-62%);animation:caseSheen 7s ease-in-out infinite}
  @keyframes caseSheen{0%,58%{transform:translateX(-62%)}100%{transform:translateX(62%)}}
  .case-query{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:18px 20px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.22);z-index:1}
  .case-prompt{display:flex;align-items:center;gap:12px;min-width:0}
  .case-query .qmark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
    background:rgba(214,182,109,.12);border:1px solid rgba(214,182,109,.34);font-size:18px;
    box-shadow:0 0 0 5px rgba(214,182,109,.04)}
  .case-query p{margin:0;color:var(--ink);font-size:15px}
  .case-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(95,198,166,.35);
    border-radius:999px;padding:7px 10px;color:var(--green);font-size:11px;font-weight:300;letter-spacing:.08em;
    text-transform:uppercase;background:rgba(95,198,166,.08);white-space:nowrap}
  .case-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
  .case-graph{position:relative;padding:28px 20px 24px;z-index:1}
  .case-rail{position:absolute;left:7%;right:7%;top:101px;height:2px;
    background:linear-gradient(90deg,transparent,rgba(214,182,109,.58),rgba(95,198,166,.48),transparent)}
  .case-rail:before{content:"";position:absolute;left:50%;top:50%;width:86px;height:86px;border-radius:24px;
    transform:translate(-50%,-50%);border:1px solid rgba(214,182,109,.32);
    background:radial-gradient(circle at 50% 28%,rgba(231,200,126,.26),rgba(214,182,109,.06));
    box-shadow:0 0 34px rgba(214,182,109,.16)}
  .case-rail:after{content:"";position:absolute;inset:-1px;width:24%;border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(231,200,126,.96),rgba(95,198,166,.72),transparent);
    animation:caseFlow 3.8s linear infinite}
  .case-core{position:absolute;left:50%;top:101px;transform:translate(-50%,-50%);z-index:3;text-align:center;
    font-size:10px;font-weight:300;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
  .case-core span{display:block;color:var(--ink);font-size:12px;letter-spacing:0;text-transform:none;margin-top:2px}
  @keyframes caseFlow{0%{transform:translateX(-20%)}100%{transform:translateX(420%)}}
  .case-nodes{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;z-index:2}
  .case-node{position:relative;min-height:154px;border:1px solid rgba(214,182,109,.18);border-radius:15px;padding:14px 12px;
    background:linear-gradient(180deg,rgba(42,36,29,.96),rgba(27,23,18,.9));text-align:center;
    box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045);transition:.24s}
  .case-node:nth-child(even){margin-top:18px}
  .case-node:hover{transform:translateY(-4px);border-color:rgba(214,182,109,.5);box-shadow:0 18px 42px rgba(0,0,0,.36),0 0 26px rgba(214,182,109,.13)}
  .case-node:before{content:attr(data-step);position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:7px;
    display:grid;place-items:center;background:rgba(214,182,109,.1);border:1px solid rgba(214,182,109,.22);
    color:var(--gold);font-size:10px;font-weight:300}
  .case-node .orb{width:48px;height:48px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 28%,rgba(231,200,126,.34),rgba(214,182,109,.08));
    border:1px solid rgba(214,182,109,.42);box-shadow:0 0 0 5px rgba(214,182,109,.045)}
  .case-node .si{font-size:20px}
  .case-node .sn{font-size:10.5px;font-weight:300;letter-spacing:.11em;text-transform:uppercase;color:var(--gold)}
  .case-node .sd{font-size:12px;color:var(--muted);line-height:1.45;margin-top:8px}
  .case-output{margin-top:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .case-result{position:relative;border:1px solid var(--line-soft);border-radius:13px;padding:13px 14px 13px 38px;
    background:rgba(0,0,0,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
  .case-result:before{content:"";position:absolute;left:14px;top:17px;width:10px;height:10px;border-radius:50%;
    background:var(--green);box-shadow:0 0 12px rgba(95,198,166,.75)}
  .case-result b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
  .case-result span{font-size:12px;color:var(--muted);line-height:1.45}
  @media(max-width:920px){.case-query{align-items:flex-start;flex-direction:column}.case-rail,.case-core{display:none}
    .case-nodes{grid-template-columns:1fr 1fr}.case-node,.case-node:nth-child(even){min-height:134px;margin-top:0}
    .case-output{grid-template-columns:1fr}}
  @media(max-width:540px){.case-graph{padding:20px 14px}.case-nodes{grid-template-columns:1fr}.case-node{text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:12px}
    .case-node .orb{margin:0;grid-row:1/3}.case-node .sd{margin-top:5px}.case-node:before{top:12px;right:12px}
    .case-query{padding:16px}.case-prompt{align-items:flex-start}}
  @media (prefers-reduced-motion:reduce){.case-rail:after,.case-study:before{animation:none}.case-node:hover{transform:none}}

  /* ===== CHANNELS: RADIAL HUB + PRODUCT MOCKUPS ===== */
  .hub{position:relative;width:100%;max-width:470px;aspect-ratio:1/1;margin:34px auto 8px}
  .hub .lines{position:absolute;inset:0;width:100%;height:100%}
  .hub .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    border:1px solid rgba(214,182,109,.12);border-radius:50%}
  .hub .ring.r1{width:46%;height:46%}
  .hub .ring.r2{width:74%;height:74%}
  .hub .ring.r3{width:100%;height:100%;border-style:dashed;opacity:.45}
  .hub-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
    width:144px;height:144px;border-radius:50%;display:grid;place-items:center;text-align:center;
    background:radial-gradient(circle at 50% 34%,rgba(231,200,126,.38),rgba(154,119,39,.12));
    border:1px solid rgba(214,182,109,.5);
    animation:hubPulse 3.2s ease-in-out infinite}
  @keyframes hubPulse{
    0%,100%{box-shadow:0 0 0 6px rgba(214,182,109,.05),0 0 40px rgba(214,182,109,.28),inset 0 1px 0 rgba(255,255,255,.2)}
    50%{box-shadow:0 0 0 11px rgba(214,182,109,.08),0 0 66px rgba(214,182,109,.46),inset 0 1px 0 rgba(255,255,255,.25)}}
  .hub-core .hc-ic{font-size:36px;line-height:1}
  .hub-core .hc-t{font-size:13px;font-weight:400;color:var(--ink);margin-top:10px}
  .hub-core .hc-s{font-size:8.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:1px}
  .hub-node{position:absolute;transform:translate(-50%,-50%);z-index:2;
    display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12.5px;font-weight:300;
    background:linear-gradient(165deg,var(--panel),var(--bg-2));border:1px solid var(--line);
    border-radius:999px;padding:7px 13px;box-shadow:0 6px 16px rgba(0,0,0,.4);transition:.2s}
  .hub-node .hn-ic{font-size:15px}
  .hub-node:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(214,182,109,.3);transform:translate(-50%,-50%) scale(1.06)}
  @media(max-width:540px){.hub{max-width:330px}.hub-node{font-size:11px;padding:6px 10px}.hub-core{width:96px;height:96px}}

  /* CHANNELS: graph card (left) + reel video card (right), equal height */
  .why-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:22px;margin-top:30px;align-items:stretch}
  .why-card{position:relative;border:1px solid var(--line);border-radius:20px;display:grid;place-items:center;
    box-shadow:0 18px 46px rgba(0,0,0,.3)}
  .why-graph{padding:16px;overflow:hidden;
    background:radial-gradient(circle at 50% 42%,rgba(40,33,15,.5),rgba(16,13,9,.55)),linear-gradient(165deg,var(--panel),var(--bg-2))}
  .why-graph .hub{margin:0;max-width:640px;width:100%}
  .why-graph .hub-core{width:108px;height:108px}
  .why-graph .hub-core .hc-ic{font-size:38px}
  .why-graph .hub-core .hc-t{bottom:13px}
  .why-graph .hub-core .hc-s{bottom:4px}
  .why-vidcard{padding:16px;background:linear-gradient(165deg,var(--panel),var(--bg-2))}
  .why-vid-wrap{position:relative;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;cursor:pointer;
    border:1px solid var(--line-soft);background:#000}
  .why-vid-wrap video{width:100%;height:100%;object-fit:cover;display:block}
  .why-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s;pointer-events:none;padding-left:3px}
  .why-vid-wrap.paused .why-play{opacity:1}
  @media(max-width:880px){
    .why-row{grid-template-columns:1fr}
    .why-graph{padding:20px}
    .why-vid-wrap{max-width:320px;margin:0 auto}
  }

  .chgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
  @media(max-width:980px){.chgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.chgrid{grid-template-columns:1fr}}
  .chcard{background:linear-gradient(165deg,var(--panel),var(--bg-2));border:1px solid var(--line);
    border-radius:16px;padding:16px;transition:.22s}
  .chcard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
  .chc-head{display:flex;align-items:center;gap:9px;font-weight:300;font-size:14.5px}
  .chc-head .em{font-size:18px}
  .chcard>p{font-size:12.5px;color:var(--muted);margin-top:12px}
  .mock{margin-top:12px;border:1px solid var(--line-soft);border-radius:11px;padding:11px;
    background:rgba(0,0,0,.24);min-height:120px;display:flex;flex-direction:column;gap:7px;font-size:11px}
  .mhead{display:flex;align-items:center;gap:6px;color:var(--muted-2);font-size:9.5px;
    letter-spacing:.05em;text-transform:uppercase}
  .dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);
    box-shadow:0 0 8px var(--green);animation:blink 1.4s infinite}
  @keyframes blink{50%{opacity:.35}}
  .bubble{padding:6px 10px;border-radius:10px;max-width:88%;line-height:1.35}
  .bubble.in{background:rgba(255,255,255,.06);align-self:flex-start;border-bottom-left-radius:3px;color:var(--muted)}
  .bubble.out{align-self:flex-end;border-bottom-right-radius:3px;color:var(--ink);
    background:linear-gradient(135deg,rgba(214,182,109,.22),rgba(154,119,39,.16));
    border:1px solid rgba(214,182,109,.3)}
  .wave{display:flex;align-items:center;gap:3px;height:26px;margin:2px 0}
  .wave i{width:3px;height:14px;border-radius:3px;background:linear-gradient(180deg,#d4bb77,#806127);
    animation:eq 1s ease-in-out infinite}
  @keyframes eq{0%,100%{height:5px;opacity:.6}50%{height:22px;opacity:1}}
  .statline{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-soft);padding:5px 0}
  .statline:last-child{border-bottom:none}
  .statline b{color:var(--gold-2);font-variant-numeric:tabular-nums}
  .crmrow{display:flex;align-items:center;justify-content:space-between;gap:8px;
    border:1px solid var(--line-soft);border-radius:8px;padding:6px 9px}
  .crmrow .nm{font-weight:300;color:var(--ink)}
  .stg{font-size:9px;font-weight:300;padding:2px 8px;border-radius:999px;white-space:nowrap}
  .stg.new{color:var(--blue);background:rgba(110,168,230,.14)}
  .stg.qual{color:var(--gold-2);background:rgba(214,182,109,.16)}
  .stg.won{color:var(--green);background:rgba(95,198,166,.16)}

  /* ===== INTEGRATIONS: horizontal connector hub ===== */
  .intg{position:relative;width:100%;max-width:1000px;margin:38px auto 0;aspect-ratio:1000/520}
  .intg .lines{position:absolute;inset:0;width:100%;height:100%}
  .intg .ilogo{position:absolute;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:16px;
    display:grid;place-items:center;background:linear-gradient(165deg,var(--panel),var(--bg-2));
    border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.5);z-index:2;transition:.2s}
  .intg .ilogo img{width:30px;height:30px}
  .intg .ilogo:hover{border-color:var(--gold);box-shadow:0 0 22px rgba(214,182,109,.32);
    transform:translate(-50%,-50%) scale(1.09)}
  .intg-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
    width:128px;height:128px;border-radius:32px;display:grid;place-items:center;text-align:center;
    background:radial-gradient(circle at 50% 34%,rgba(231,200,126,.42),rgba(154,119,39,.14));
    border:1px solid rgba(214,182,109,.55);animation:hubPulse 3.2s ease-in-out infinite}
  .intg-core .hc-ic{font-size:34px}
  .intg-core .hc-t{font-size:12px;font-weight:300;margin-top:9px}
  /* mobile radial integration graph (brain center + logos in a ring) */
  .intg-radial{display:none;position:relative;width:100%;max-width:330px;aspect-ratio:1/1;margin:34px auto 10px}
  .intg-radial .lines{position:absolute;inset:0;width:100%;height:100%}
  .intg-radial .lines line{stroke-width:.4;stroke-dasharray:2 3;animation:flowC 3.2s linear infinite}
  .intg-radial .ilogo{position:absolute;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:14px;
    display:grid;place-items:center;background:linear-gradient(165deg,var(--panel),var(--bg-2));
    border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:2}
  .intg-radial .ilogo img{width:25px;height:25px}
  .intg-radial .intg-core{width:100px;height:100px;border-radius:26px}
  @media(max-width:640px){.intg{display:none}.intg-radial{display:block}}
  @media (prefers-reduced-motion:reduce){.intg-radial .lines line{animation:none}}

  /* ===== INTEGRATIONS: logos flowing along a curved path (fade in/out) ===== */
  #integrations{--fs:1}
  #integrations .wrap{padding-top:calc(20px*var(--fs))}
  .lflow{position:relative;display:block;width:calc(1040px*var(--fs));max-width:100%;height:calc(500px*var(--fs));margin:calc(-256px * var(--fs)) auto 0}
  .flow-stage{position:absolute;top:0;left:0;width:1040px;height:520px;transform:scale(var(--fs));transform-origin:top left;pointer-events:none}
  .flow-orbit{position:absolute;inset:0}
  .flow-guide{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
    -webkit-mask:linear-gradient(90deg,transparent 2%,#000 17%,#000 83%,transparent 98%);
    mask:linear-gradient(90deg,transparent 2%,#000 17%,#000 83%,transparent 98%)}
  .flow-guide path{fill:none;stroke:rgba(214,182,109,.34);stroke-width:1.2;stroke-dasharray:2 7;stroke-linecap:round}
  .flow-logo{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
    offset-path:path("M30,150 C250,590 790,590 1010,150");offset-anchor:50% 50%;offset-rotate:0deg;
    animation:flowOrbit 34s linear infinite;animation-delay:var(--d,0s);will-change:offset-distance,opacity}
  .flow-logo img{width:22px;height:22px;display:block}
  @keyframes flowOrbit{
    0%{offset-distance:0%;opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{offset-distance:100%;opacity:0}
  }
  @supports not (offset-path:path("M0,0 L1,1")){
    .flow-logo{animation:none;opacity:1;offset-path:none;will-change:auto}
    .flow-logo:nth-of-type(4){left:6%;top:31%}
    .flow-logo:nth-of-type(5){left:17%;top:62%}
    .flow-logo:nth-of-type(6){left:31%;top:78%}
    .flow-logo:nth-of-type(7){left:45%;top:84%}
    .flow-logo:nth-of-type(8){left:58%;top:83%}
    .flow-logo:nth-of-type(9){left:72%;top:75%}
    .flow-logo:nth-of-type(10){left:84%;top:58%}
    .flow-logo:nth-of-type(11){left:94%;top:31%}
    .flow-logo:nth-of-type(12){left:79%;top:43%}
    .flow-logo:nth-of-type(13){left:21%;top:43%}
  }
  .flow-center{position:absolute;top:27%;left:50%;transform:translate(-50%,-50%);width:500px;text-align:center;z-index:2}
  .flow-center .eyebrow{margin-bottom:14px}
  .flow-center .lede{margin:0 auto}
  .flow-strip{display:none}
  .flow-guide-m{display:none}
  .flow-core{display:block;position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);text-align:center;z-index:1;width:170px;pointer-events:none}
  /* premium sunrise beam + sun-ray burst behind the brain */
  .flow-core::before,.flow-core::after{content:"";position:absolute;left:50%;top:24px;border-radius:50%;pointer-events:none}
  .flow-core::before{width:380px;height:380px;transform:translate(-50%,-50%);
    background:repeating-conic-gradient(from 0deg,rgba(232,200,128,.12) 0deg .7deg,transparent .7deg 11deg);
    -webkit-mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.5) 16%,transparent 60%);
    mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.5) 16%,transparent 60%);
    animation:fcRays 90s linear infinite;z-index:0}
  .flow-core::after{width:240px;height:240px;transform:translate(-50%,-50%);
    background:
      radial-gradient(circle at 50% 50%,rgba(255,238,205,.095) 0%,rgba(255,205,130,.06) 18%,rgba(214,182,109,.028) 42%,transparent 70%),
      radial-gradient(circle at 50% 64%,rgba(255,176,92,.045) 0%,transparent 55%);
    filter:blur(2px);animation:fcBloom 6.5s ease-in-out infinite;z-index:0}
  @keyframes fcRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
  @keyframes fcBloom{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
  .flow-core .fc-ic{position:relative;z-index:2;font-size:46px;line-height:1;filter:drop-shadow(0 0 22px rgba(214,182,109,.5))}
  .flow-core .fc-t,.flow-core .fc-s{position:relative;z-index:2}
  .flow-core .fc-t{font-size:19px;font-weight:300;letter-spacing:.01em;margin-top:6px}
  .flow-core .fc-s{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  @media(max-width:1090px){#integrations{--fs:.9}}
  @media(max-width:1000px){#integrations{--fs:.8}}
  @media(max-width:900px){#integrations{--fs:.72}}
  @media(max-width:820px){#integrations{--fs:.64}}
  @media(max-width:740px){#integrations{--fs:.58}}
  /* mobile: same curved-flow style, sized for phones (text above, mini U below) */
  @media(max-width:680px){
    #integrations .wrap{padding-top:0}
    .lflow{position:static;width:100%;height:auto;margin-top:6px}
    .flow-stage{position:static;transform:none;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
    .flow-center{position:static;transform:none;top:auto;left:auto;width:100%;order:-1}
    #integrations .title{text-wrap:balance;max-width:360px;margin-left:auto;margin-right:auto}
    .flow-orbit{position:relative;display:block;width:330px;max-width:100%;height:150px;margin:8px auto 0;-webkit-mask:none;mask:none}
    .flow-guide{display:none}
    .flow-guide-m{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;
      -webkit-mask:linear-gradient(90deg,transparent 2%,#000 16%,#000 84%,transparent 98%);
      mask:linear-gradient(90deg,transparent 2%,#000 16%,#000 84%,transparent 98%)}
    .flow-guide-m path{fill:none;stroke:rgba(214,182,109,.34);stroke-width:1.1;stroke-dasharray:2 7;stroke-linecap:round}
    .flow-logo{offset-path:path("M8,46 C106,150 224,150 324,46");width:18px;height:18px}
    @supports not (offset-path:path("M0,0 L1,1")){
      .flow-logo:nth-of-type(4){left:2%;top:31%}
      .flow-logo:nth-of-type(5){left:12%;top:56%}
      .flow-logo:nth-of-type(6){left:23%;top:70%}
      .flow-logo:nth-of-type(7){left:36%;top:78%}
      .flow-logo:nth-of-type(8){left:49%;top:81%}
      .flow-logo:nth-of-type(9){left:62%;top:78%}
      .flow-logo:nth-of-type(10){left:75%;top:70%}
      .flow-logo:nth-of-type(11){left:88%;top:56%}
      .flow-logo:nth-of-type(12){left:98%;top:31%}
      .flow-logo:nth-of-type(13){left:50%;top:92%}
    }
    .flow-logo img{width:10px;height:10px}
    .flow-core{display:block;position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;z-index:1;width:120px}
    .flow-core::before{width:170px;height:170px;top:16px}
    .flow-core::after{width:110px;height:110px;top:16px}
    .flow-core .fc-ic{font-size:32px;line-height:1;filter:drop-shadow(0 0 16px rgba(214,182,109,.5))}
    .flow-core .fc-t{font-size:14px;font-weight:300;margin-top:3px}
    .flow-core .fc-s{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:1px}
  }
  /* Very small phones (<=352px): the mobile orbit path ends at x=324, which
     spills past a 320px viewport — pull the path in so dots stay inside. */
  @media(max-width:352px){
    .flow-orbit{width:300px}
    .flow-logo{offset-path:path("M8,44 C98,142 202,142 292,44")}
  }
  @media (prefers-reduced-motion:reduce){.flow-logo{animation-name:none;opacity:1}.flow-track{animation:none}.flow-core::before,.flow-core::after{animation:none}}

  /* ===== PER-SERVICE DEEP DIVE (how each agent works) ===== */
  .svcs{position:relative;margin-top:30px}
  .svc{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
  .svc-vis{order:2}
  .svc.rev .svc-txt{order:2}
  .svc.rev .svc-vis{order:1}
  /* DESKTOP: stacked sticky cards — each pins, the next rises over it */
  @media(min-width:821px){
    .svcs{padding-bottom:8vh}
    .svc{position:sticky;top:calc(110px + var(--i,0) * 14px);
      min-height:64vh;align-content:center;align-items:start;
      padding:42px 46px;border-radius:22px;border:1px solid var(--line);
      background:linear-gradient(165deg,#1d1812,#14110d);
      box-shadow:0 28px 66px rgba(0,0,0,.55);
      transform-origin:center top;will-change:transform,opacity}
  }
  /* MOBILE: simple stacked panels (no sticky) */
  @media(max-width:820px){
    .svc{grid-template-columns:1fr;gap:18px;padding:24px 20px;margin-bottom:18px;
      border-radius:18px;border:1px solid var(--line);
      background:linear-gradient(165deg,#1c1813,#15110d)}
    .svc-txt{order:1 !important}.svc-vis{order:2 !important}}
  /* big, highlighted, per-service PREMIUM icon badge — recognisable at a glance */
  .svc-badge{--accent:var(--gold);
    width:74px;height:74px;border-radius:21px;display:grid;place-items:center;font-size:37px;line-height:1;
    margin-bottom:18px;position:relative;
    background:
      radial-gradient(circle at 50% 26%, color-mix(in srgb,var(--accent) 32%,transparent), transparent 72%),
      linear-gradient(165deg,#241e17,#16120d);
    border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
    box-shadow:0 14px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12),
      0 0 28px color-mix(in srgb,var(--accent) 22%,transparent);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
  .svc-badge::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
  .svc.active .svc-badge{transform:translateY(-3px) scale(1.07);
    border-color:color-mix(in srgb,var(--accent) 85%,var(--line));
    box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16),
      0 0 46px color-mix(in srgb,var(--accent) 45%,transparent)}
  .svc-num{font-size:11.5px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;
    color:color-mix(in srgb,var(--accent,var(--gold)) 75%,var(--ink))}
  /* heading with a dot, pulled slightly onto the image's faded bottom, then flows into the text */
  .svc h3{position:relative;z-index:3;margin:-12px 0 12px;display:flex;align-items:center;gap:10px;
    font-size:clamp(20px,2.2vw,24px);font-weight:300;letter-spacing:-.01em;color:var(--ink)}
  .svc h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0;
    box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
  .svc .sd{font-size:14px;color:var(--muted);margin-bottom:14px;line-height:1.6}
  .svc .why{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--gold-2);
    background:rgba(214,182,109,.07);border:1px solid var(--line);border-radius:11px;padding:9px 13px;line-height:1.5}
  .svc .why b{color:var(--gold-2)}
  /* svc-vis is now a plain container; "HOW IT WORKS" sits ABOVE the steps card */
  .svc-vis{background:none;border:none;padding:0}
  .svc-vis .vh{font-size:13.5px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink);margin-bottom:18px;text-align:center}
  /* per-service image — bordered card whose bottom dissolves into the page */
  .svc-illu{width:100%;display:block;overflow:hidden;border-radius:20px;
    border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
    filter:drop-shadow(0 18px 32px rgba(0,0,0,.45));
    -webkit-mask:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 100%);
            mask:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 100%)}
  .svc-illu svg{display:block;width:100%;height:auto}
  .svc-hero{position:relative;margin-bottom:6px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .svc.active .svc-hero{transform:translateY(-3px)}
  .svc-illu .illu-dot{animation:illuDot 1.25s ease-in-out infinite}
  .svc-illu .illu-dot.d2{animation-delay:.18s}.svc-illu .illu-dot.d3{animation-delay:.36s}
  @keyframes illuDot{0%,100%{opacity:.3}50%{opacity:1}}
  .svc-illu .illu-float{animation:illuFloat 4.5s ease-in-out infinite}
  @keyframes illuFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @media(prefers-reduced-motion:reduce){.svc-illu .illu-dot,.svc-illu .illu-float{animation:none}}
  /* the steps card — bigger icons + text fill the space */
  .howflow{display:flex;flex-direction:column;gap:34px;max-width:none;margin:0;
    background:linear-gradient(165deg,var(--panel),var(--bg-2));border:1px solid var(--line);
    border-radius:18px;padding:34px 30px}
  .hstep{display:grid;grid-template-columns:60px 1fr;grid-template-areas:"ic sn" "ic t";
    column-gap:18px;row-gap:3px;align-items:center;text-align:left;position:relative}
  .hstep .ic{grid-area:ic;position:relative;z-index:1;width:60px;height:60px;border-radius:18px;
    display:grid;place-items:center;font-size:28px;align-self:center;
    background:linear-gradient(165deg,var(--bg-2),#1b1712);border:1px solid var(--line);
    box-shadow:0 5px 14px rgba(0,0,0,.45)}
  .hstep .sn{grid-area:sn;align-self:end;font-size:10.5px;font-weight:300;color:var(--gold);letter-spacing:.12em}
  .hstep .t{grid-area:t;align-self:start;font-size:16px;font-weight:300;color:var(--ink);line-height:1.3}
  /* connector line + arrowhead between steps */
  .hstep:not(:last-child) .ic::after{content:"";position:absolute;left:50%;top:64px;transform:translateX(-50%);
    width:2px;height:20px;background:rgba(214,182,109,.45)}
  .hstep:not(:last-child) .ic::before{content:"";position:absolute;left:50%;top:84px;transform:translateX(-50%);
    width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid rgba(214,182,109,.65)}

  /* ===== "HOW EACH AGENT WORKS" — scroll-activated, step-by-step animation ===== */
  /* left side: number + heading zoom up when the row is active */
  .svc-num,.svc h3{transform-origin:left center;
    transition:transform .55s cubic-bezier(.2,.7,.2,1),color .55s,text-shadow .55s}
  .svc.active .svc-num{transform:scale(1.18);text-shadow:0 0 12px rgba(214,182,109,.16)}
  .svc.active h3{transform:scale(1.09)}
  /* right card: BEAM + JUMP (pop) when the row becomes active */
  .howflow{transition:box-shadow .6s,border-color .6s}
  .svc.active .howflow{border-color:rgba(214,182,109,.45);
    box-shadow:0 20px 52px rgba(0,0,0,.48),0 0 0 1px rgba(214,182,109,.12),0 0 40px rgba(214,182,109,.14);
    animation:cardJump .72s cubic-bezier(.2,.85,.25,1) both}
  @keyframes cardJump{
    0%{transform:translateY(0) scale(1)}
    42%{transform:translateY(-8px) scale(1.045)}
    100%{transform:translateY(-2px) scale(1.012)}}
  .svc-vis .vh{transition:color .5s}
  /* steps calm until their turn; active one lifts, goes gold, text zooms */
  .hstep{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
  .svc.active .hstep:not(.step-on){opacity:.4}
  .hstep .ic{transition:transform .5s cubic-bezier(.34,1.3,.5,1),background .5s,border-color .5s,box-shadow .5s}
  .hstep .sn{transition:color .5s}
  .hstep .t{transition:color .5s,transform .5s cubic-bezier(.34,1.3,.5,1);transform-origin:left center}
  /* keep the icon's own look — just a soft beam glow + gentle zoom + gold border */
  .hstep.step-on .ic{transform:scale(1.08);border-color:rgba(214,182,109,.22);
    box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 20px rgba(214,182,109,.088)}
  .hstep.step-on .sn{color:#d0b476}
  .hstep.step-on .t{color:#d8c294;transform:scale(1.05)}
  /* after the icon, the arrow drifts softly & slowly DOWNWARD (one direction) */
  .hstep.step-on:not(:last-child) .ic::after{background:rgba(214,182,109,.40)}
  .hstep.step-on:not(:last-child) .ic::before{border-top-color:rgba(214,182,109,.40);
    animation:arrowDown 1.8s ease-in-out infinite}
  @keyframes arrowDown{
    0%{transform:translateX(-50%) translateY(-3px);opacity:0}
    25%{opacity:1}
    100%{transform:translateX(-50%) translateY(5px);opacity:0}}
  @media(prefers-reduced-motion:reduce){
    .svc.active .howflow,
    .hstep.step-on:not(:last-child) .ic::after,.hstep.step-on:not(:last-child) .ic::before{animation:none}}

  /* ===== ANIMATED BORDER BEAM — ultra-thin, faint, corner-to-corner (two opposite segments) ===== */
  @property --beam-a{syntax:"<angle>";inherits:false;initial-value:0deg}
  /* elements that can carry the beam (all cards / boxes / chips) */
  .eyebrow,.card,.btn,.chcard,.kpi,.box,.vsbox,.stat,.howflow,.cta-final,
  .node,.note,.step,.layer,.wfchip,.brainbox,.wfout,.dotnav .dlabel,.foot-social a{position:relative}
  .eyebrow::after,.card::after,.btn::after,.chcard::after,.kpi::after,.box::after,
  .vsbox::after,.stat::after,.howflow::after,.cta-final::after,
  .node::after,.note::after,.step::after,.layer::after,.wfchip::after,.brainbox::after,.wfout::after,
  .dotnav .dlabel::after,.foot-social a::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:6;opacity:0;
    transition:opacity .3s ease;
    /* two faint segments 180° apart → top-left & bottom-right glow together */
    background:conic-gradient(from var(--beam-a),
      transparent 0deg, rgba(231,200,126,.45) 7deg, transparent 15deg,
      transparent 180deg, rgba(231,200,126,.45) 187deg, transparent 195deg,
      transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:beamRot 5s linear infinite;animation-play-state:paused}
  @keyframes beamRot{to{--beam-a:360deg}}
  /* section subjects + active side-nav label glow by default */
  .eyebrow::after,.dotnav a.active .dlabel::after{opacity:1;animation-play-state:running}
  /* everything else glows only while hovered (and the animation only runs then) */
  .card:hover::after,.btn:hover::after,.chcard:hover::after,.kpi:hover::after,.box:hover::after,
  .vsbox:hover::after,.stat:hover::after,.howflow:hover::after,.cta-final:hover::after,
  .node:hover::after,.note:hover::after,.step:hover::after,.layer:hover::after,
  .wfchip:hover::after,.brainbox:hover::after,.wfout:hover::after,
  .foot-social a:hover::after{opacity:1;animation-play-state:running}
  /* social icon beam — long thin tapered lines */
  .foot-social a::after{padding:1px;
    background:conic-gradient(from var(--beam-a),
      transparent 0deg,
      rgba(231,200,126,.9) 5deg,
      rgba(231,200,126,.9) 38deg,
      transparent 44deg,
      transparent 180deg,
      rgba(231,200,126,.9) 185deg,
      rgba(231,200,126,.9) 218deg,
      transparent 224deg,
      transparent 360deg)}
  /* while hovering any card/box, turn the subject + side-nav beams OFF */
  body:has(.card:hover,.btn:hover,.chcard:hover,.kpi:hover,.box:hover,.vsbox:hover,.stat:hover,.howflow:hover,.cta-final:hover,.node:hover,.note:hover,.step:hover,.layer:hover,.wfchip:hover,.brainbox:hover,.wfout:hover) .eyebrow::after,
  body:has(.card:hover,.btn:hover,.chcard:hover,.kpi:hover,.box:hover,.vsbox:hover,.stat:hover,.howflow:hover,.cta-final:hover,.node:hover,.note:hover,.step:hover,.layer:hover,.wfchip:hover,.brainbox:hover,.wfout:hover) .dotnav a.active .dlabel::after{opacity:0}
  @media (prefers-reduced-motion:reduce){[class]::after{animation:none !important}}

  /* ===== FLOWING CONNECTOR LINES — shows how Lisra.Ai connects ===== */
  .intg .lines path{stroke-width:.9;stroke-dasharray:6 11;animation:flowI 3.6s linear infinite}
  .hnet .lines line{stroke-width:.28;stroke-dasharray:1.6 2;animation:flowN 3s linear infinite}
  .hub .lines line{stroke-width:.32;stroke-dasharray:2 3;animation:flowC 3.2s linear infinite}
  @keyframes flowI{to{stroke-dashoffset:-34}}
  @keyframes flowN{to{stroke-dashoffset:-7.2}}
  @keyframes flowC{to{stroke-dashoffset:-10}}
  .ilogo{overflow:hidden}
  @media (prefers-reduced-motion:reduce){
    .intg .lines path,.hnet .lines line,.hub .lines line{animation:none}}

  /* brain icon dead-centre in every hub core (+50% bigger); label pinned below it */
  .hnet-core>div,.hub-core>div,.intg-core>div{position:static;display:contents}
  .hub-core .hc-ic,.intg-core .hc-ic{font-size:52px;line-height:1}
  .hub-core .hc-t,.intg-core .hc-t{position:absolute;left:0;right:0;bottom:19px;margin:0}
  .hub-core .hc-s,.intg-core .hc-s{position:absolute;left:0;right:0;bottom:8px;margin:0}
  /* hero hub-core is smaller (90px): brain lifted up top, labels clearly below it */
  .hnet-core .hc-ic{font-size:46px;line-height:1;transform:none}
  .hnet-core .hc-t{position:absolute;left:0;right:0;bottom:15px;margin:0}
  .hnet-core .hc-s{position:absolute;left:0;right:0;bottom:5px;margin:0}
  /* mobile: shrink brain + lift it up so the "Lisra.Ai" label below never overlaps */
  @media(max-width:540px){
    .hub-core .hc-ic,.intg-core .hc-ic{font-size:40px;transform:translateY(-9px)}
    .hnet-core .hc-ic{font-size:42px;transform:none}
  }

  /* ===== FAQ (two-column: intro left · accordion right) ===== */
  .faq-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:52px;align-items:start;margin-top:8px}
  @media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:26px}}
  .faq-intro .lede{margin:14px 0 0}
  .faq-intro .faq-help{margin-top:16px;font-size:14px;color:var(--muted);line-height:1.7}
  .faq-intro .faq-help a{color:var(--gold);text-decoration:underline}
  .faqs{display:flex;flex-direction:column;gap:12px}
  .faq{border:1px solid var(--line);border-radius:14px;background:linear-gradient(165deg,var(--panel),var(--bg-2));overflow:hidden}
  .faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:300;font-size:15px;
    display:flex;align-items:center;justify-content:space-between;gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:400;line-height:1;transition:transform .25s}
  .faq[open] summary::after{transform:rotate(45deg)}
  .faq p{padding:0 18px 16px;font-size:14px;color:var(--muted);line-height:1.6;margin:0}

  /* ===== LEAD / CONTACT FORM ===== */
  .lead-form{max-width:560px;margin:28px auto 0;display:grid;gap:14px;text-align:left}
  .lead-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:520px){.lead-form .row2{grid-template-columns:1fr}}
  .lead-form label{font-size:12px;font-weight:300;color:var(--muted);margin-bottom:6px;display:block;letter-spacing:.02em}
  .lead-form input,.lead-form textarea{width:100%;background:rgba(0,0,0,.28);
    border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink);font-size:14px;
    font-family:inherit;transition:border-color .2s,box-shadow .2s}
  .lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(214,182,109,.12)}
  .lead-form textarea{min-height:96px;resize:vertical}
  .lead-form .btn.primary{justify-content:center;width:100%;border:none;margin-top:2px}
  .form-note{font-size:12px;color:var(--muted-2);text-align:center;margin-top:4px}
  .form-note.good{color:var(--green)}
  .form-note.bad{color:var(--red)}
  .hidden-field{display:none!important}

  /* ===== LISRA IN ACTION — auto-rotating showcase ===== */
  .lisra-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:34px}
  @media(max-width:820px){.lisra-head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:24px}}
  .lisra-head .rh-r{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
  .lisra-head .rh-r p{font-size:15px;color:var(--muted);max-width:420px;line-height:1.6}
  .lisra-title{max-width:560px}
  .lisra-cta{padding:12px 23px;font-size:14px}
  @media(max-width:720px){
    .lisra-head .rh-r{gap:14px}
    .lisra-head .rh-r p{max-width:none;line-height:1.62}
    .lisra-title{text-wrap:balance}
  }
  .lisra-stage{display:grid;grid-template-columns:1fr 60px;gap:22px;align-items:stretch}
  @media(max-width:820px){.lisra-stage{grid-template-columns:1fr;gap:16px}}
  .lisra-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
    border-radius:20px;overflow:hidden;background:linear-gradient(165deg,var(--panel),var(--bg-2));min-height:506px}
  @media(max-width:720px){.lisra-card{grid-template-columns:1fr;min-height:0;border-radius:18px;overflow:visible}}
  /* left image panel (slides crossfade) */
  .lisra-img{position:relative;min-height:506px;overflow:hidden}
  @media(max-width:720px){.lisra-img{min-height:360px;border-radius:18px 18px 0 0}}
  @media(max-width:480px){.lisra-img{min-height:320px}}
  .lisra-slide{position:absolute;inset:0;opacity:0;transform:translateX(22px) scale(1.03);transition:opacity .7s ease,transform .7s ease;
    background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
  .lisra-slide.on{opacity:1;transform:translateX(0) scale(1)}
  @media(max-width:720px){.lisra-slide,.lisra-slide.on{transform:none;border-radius:18px 18px 0 0}}
  .lisra-slide .tagtop{position:absolute;top:16px;left:16px;font-size:11px;font-weight:300;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);
    padding:5px 11px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .lisra-glass{background:rgba(20,17,13,.55);border:1px solid rgba(255,255,255,.14);border-radius:14px;
    padding:12px 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:80%;display:flex;flex-direction:column;gap:7px;font-size:11px;color:#f4ecdc}
  @media(max-width:720px){
    .lisra-slide{padding:16px}
    .lisra-slide .tagtop{top:14px;left:14px;font-size:10px;max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .lisra-glass{max-width:92%;font-size:10.5px}
  }
  @media(max-width:420px){.lisra-slide{padding:14px}.lisra-glass{max-width:100%}}
  .lisra-glass .gh{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:6px}
  /* right content (panels crossfade) */
  .lisra-body{position:relative}
  .lisra-panel{position:absolute;inset:0;padding:40px 42px;opacity:0;transform:translateY(12px);
    transition:opacity .5s ease,transform .5s ease;pointer-events:none;display:flex;flex-direction:column;justify-content:center}
  .lisra-panel.on{opacity:1;transform:none;pointer-events:auto}
  @media(max-width:720px){
    .lisra-body{position:relative;min-height:0;background:linear-gradient(180deg,rgba(20,17,13,.96),rgba(22,18,13,.98));border-top:1px solid var(--line-soft);border-radius:0 0 18px 18px}
    .lisra-panel{position:relative;inset:auto;display:none;min-height:0;padding:24px 22px 26px;opacity:1;transform:none;pointer-events:auto;justify-content:flex-start}
    .lisra-panel.on{display:flex}
  }
  @media(max-width:480px){.lisra-panel{padding:22px 18px 24px}}
  .lisra-panel .pn{font-size:11px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .lisra-panel h3{font-size:28px;line-height:1.18;font-weight:300;letter-spacing:-.01em;margin:8px 0 10px}
  .lisra-panel .pd{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:18px}
  @media(max-width:720px){
    .lisra-panel .pn{font-size:10px;letter-spacing:.12em}
    .lisra-panel h3{font-size:24px;line-height:1.22;margin:7px 0 9px;text-wrap:balance}
    .lisra-panel .pd{font-size:15px;line-height:1.62;margin-bottom:14px}
  }
  .lisra-sub{border-top:1px solid var(--line-soft);padding-top:13px;margin-top:5px}
  .lisra-sub .st{font-size:14.5px;font-weight:300;color:var(--ink)}
  .lisra-sub .sd{font-size:12.5px;color:var(--muted);margin-top:2px}
  @media(max-width:720px){
    .lisra-sub{padding-top:12px;margin-top:4px}
    .lisra-sub .st{font-size:14px}
    .lisra-sub .sd{font-size:12.5px;line-height:1.5}
  }
  .lisra-proof-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .lisra-proof-mini .rp{position:relative;overflow:hidden;border:1px solid var(--surface-border);border-radius:14px;padding:12px 13px;
    background:var(--surface-bg);box-shadow:var(--surface-shadow)}
  .lisra-proof-mini .rp:before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 12% 0%,rgba(214,182,109,.08),transparent 42%)}
  .lisra-proof-mini .rk{position:relative;font-size:11.5px;font-weight:300;color:#cdbb8e;letter-spacing:.02em}
  .lisra-proof-mini .rv{position:relative;font-size:12px;color:var(--muted);line-height:1.45;margin-top:4px}
  @media(max-width:520px){.lisra-proof-mini{grid-template-columns:1fr}}
  /* right rail 01-04 */
  .lisra-rail{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:6px 0}
  @media(max-width:820px){.lisra-rail{flex-direction:row;justify-content:center;gap:12px;padding:6px 0 0;order:-1}}
  /* static base line */
  .lisra-rail::before{content:"";position:absolute;top:16px;bottom:16px;left:50%;transform:translateX(-50%);width:1px;background:rgba(214,182,109,.15);z-index:0}
  @media(max-width:820px){.lisra-rail::before{display:none}}
  /* progress fill — travels from active circle down to next, triggers slide on arrival */
  .rail-progress{position:absolute;left:50%;transform:translateX(-50%);width:1px;height:0;top:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(214,182,109,.14) 0%,rgba(231,200,126,.37) 100%)}
  /* needle tip — sharp sui at the moving head (bottom) */
  .rail-progress.run::after{content:"";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
    width:1px;height:18px;
    background:linear-gradient(180deg,rgba(231,200,126,.35) 0%,rgba(231,200,126,.11) 55%,transparent 100%);
    box-shadow:0 0 3px rgba(231,200,126,.24),0 6px 10px rgba(231,200,126,.07)}
  .rail-progress.run{animation:railFill var(--rfill-dur,4.5s) linear forwards}
  .rail-progress.paused{animation-play-state:paused}
  @keyframes railFill{from{height:0}to{height:var(--rfill-h,0px)}}
  @media(max-width:820px){.rail-progress{display:none}}
  .lisra-rail button{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;cursor:pointer;
    border:1px solid rgba(214,182,109,.22);background:rgba(20,17,13,.75);color:rgba(246,239,225,.3);
    font-size:9px;font-weight:300;letter-spacing:.03em;transition:.28s;font-family:inherit}
  .lisra-rail button.on{background:linear-gradient(135deg,#d7bd78,#8b6628);color:#2a2018;border:none;
    box-shadow:0 0 0 4px rgba(214,182,109,.06),0 0 14px rgba(231,200,126,.17);transform:scale(1.14)}
  .lisra-rail button:hover{border-color:rgba(214,182,109,.55);color:var(--ink)}
  @media(max-width:820px){
    .lisra-rail button{width:34px;height:28px;border-radius:999px;background:rgba(20,17,13,.72);color:rgba(246,239,225,.55)}
    .lisra-rail button.on{transform:none}
  }
  @media(max-width:420px){.lisra-rail{gap:8px}.lisra-rail button{width:31px;height:27px}}

  /* ===== ABOUT (portrait left, text right) ===== */
  #about{overflow-x:clip}
  .about{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"img eye" "img txt";
    column-gap:50px;row-gap:0;align-items:stretch}
  .about-eyebrow{grid-area:eye;align-self:end;justify-self:start}
  .about-visual{grid-area:img}
  .about-text{grid-area:txt}
  .about-visual,.about-text{min-width:0}
  @media(max-width:860px){.about{grid-template-columns:1fr;grid-template-areas:"eye" "img" "txt";column-gap:0;row-gap:32px}
    .about-eyebrow{align-self:start;margin-bottom:26px}
    .about-img{flex:none;aspect-ratio:4/5.8;min-height:0;max-width:100%}}
  .about-text{max-width:600px}
  .about-title{max-width:600px;font-size:28px;line-height:1.16;letter-spacing:-.02em}
  .about-title .soft{display:block;color:var(--muted);font-weight:500}
  @media(min-width:861px){.about-title .soft{white-space:nowrap}}
  @media(max-width:520px){.about-title{font-size:26px;line-height:1.18}}
  .about-copy{max-width:540px;font-size:15px;line-height:1.72;color:var(--muted);margin-top:18px}
  .about-copy + .about-copy{margin-top:12px}
  .about-visual{position:relative;display:flex}
  .about-visual::before{content:"";position:absolute;inset:-12% -8%;border-radius:50%;z-index:0;
    background:radial-gradient(circle,rgba(214,182,109,.18),transparent 62%)}
  .about-img{position:relative;z-index:1;flex:1;width:100%;border-radius:24px;overflow:hidden;min-height:560px;
    transform:translateZ(0);
    background:linear-gradient(160deg,rgba(214,182,109,.78),rgba(214,182,109,.64));
    -webkit-mask:radial-gradient(circle 58px at 52px 28px,transparent 56px,#000 58px);
    mask:radial-gradient(circle 58px at 52px 28px,transparent 56px,#000 58px);
    box-shadow:0 30px 70px rgba(0,0,0,.5)}
  .about-img::before{content:"";position:absolute;inset:.5px;border-radius:23.5px;
    background-color:#241d2e;background-image:linear-gradient(to top,rgba(20,17,13,.4),rgba(20,17,13,0) 45%),url('images/lisra-portrait.jpg');
    background-size:cover;background-position:center top;
    -webkit-mask:radial-gradient(circle 59px at 51.5px 27.5px,transparent 56.8px,#000 58.2px);
    mask:radial-gradient(circle 59px at 51.5px 27.5px,transparent 56.8px,#000 58.2px)}
  .about-badge{position:absolute;z-index:2;background:rgba(20,17,13,.7);border:1px solid rgba(255,255,255,.14);
    border-radius:14px;padding:11px 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
  .about-badge .bn{font-size:20px;font-weight:300;background:var(--gold-grad);-webkit-background-clip:text;
    background-clip:text;color:transparent;letter-spacing:-.01em}
  .about-badge .bl{font-size:10.5px;color:var(--muted);margin-top:2px}
  .about-badge.b1{top:16px;left:-14px}
  .about-badge.b2{bottom:18px;right:-14px;display:flex;align-items:center;gap:9px}
  .about-badge.b2 .dot-live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
  @media(max-width:520px){.about-badge.b2{right:0}}

  /* ===== MEET LISRA — real running clock badge ===== */
  .about-badge.b1.clock-badge{top:-20px;left:4px;z-index:3;padding:0;border:none;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .rclock-wrap{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 36%,#2a2118,#15110b 72%);
    border:1px solid rgba(214,182,109,.34);
    box-shadow:0 16px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(214,182,109,.22),inset 0 0 26px rgba(0,0,0,.5)}
  .rclock-text{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;
    animation:rclockspin 22s linear infinite}
  .rclock-text text{font-size:8.2px;font-weight:300;letter-spacing:.14em;
    fill:rgba(214,182,109,.9);text-transform:uppercase}
  @keyframes rclockspin{to{transform:rotate(360deg)}}
  .rclock{position:relative;width:58px;height:58px;overflow:visible}
  .rc-face{fill:#17120b;stroke:rgba(214,182,109,.45);stroke-width:1.4}
  .rc-ticks line{stroke:rgba(214,182,109,.55);stroke-width:1.7;stroke-linecap:round}
  .rc-h{stroke:#f6efe1;stroke-width:3.2;stroke-linecap:round}
  .rc-m{stroke:#efe6d2;stroke-width:2.3;stroke-linecap:round}
  .rc-s{stroke:var(--gold);stroke-width:1.3;stroke-linecap:round}
  .rc-pin{fill:var(--gold);stroke:#17120b;stroke-width:.8}
  @media(prefers-reduced-motion:reduce){.rclock-text{animation:none}}
  @media(max-width:520px){.about-badge.b1.clock-badge{top:-18px;left:4px}
    .rclock-wrap{width:84px;height:84px}.rclock{width:50px;height:50px}
    .about-img{-webkit-mask:radial-gradient(circle 52px at 46px 24px,transparent 50px,#000 52px);
      mask:radial-gradient(circle 52px at 46px 24px,transparent 50px,#000 52px)}
    .about-img::before{-webkit-mask:radial-gradient(circle 53px at 45.5px 23.5px,transparent 50.8px,#000 52.2px);
      mask:radial-gradient(circle 53px at 45.5px 23.5px,transparent 50.8px,#000 52.2px)}}
  .about-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:13px;max-width:520px}
  .about-list li{position:relative;padding-left:28px;font-size:14.5px;color:var(--muted);line-height:1.58}
  .about-list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;
    background:var(--gold-grad);box-shadow:0 0 10px rgba(214,182,109,.4)}
  .about-list li::after{content:"✓";position:absolute;left:3px;top:5px;font-size:9px;font-weight:300;color:#2a2018}
  .about-list b{color:var(--ink);font-weight:300}
  .about-proof{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;margin-top:22px;max-width:540px}
  .about-proof-card{position:relative;overflow:hidden;border:1px solid rgba(214,182,109,.18);border-radius:16px;
    padding:14px 15px;background:linear-gradient(160deg,rgba(42,36,29,.72),rgba(20,17,13,.82));
    box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)}
  .about-proof-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 0%,rgba(214,182,109,.14),transparent 40%)}
  .about-proof-card .pt{position:relative;font-size:12px;font-weight:300;color:#cdbb8e;letter-spacing:.02em}
  .about-proof-card .pd{position:relative;font-size:12px;color:var(--muted);line-height:1.55;margin-top:5px}
  .about-proof-card.wide{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
  .about-proof-card .mark-mini{position:relative;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
    background:var(--gold-grad);color:#2a2018;font-weight:300;box-shadow:0 0 24px rgba(214,182,109,.24)}
  @media(max-width:520px){.about-img{aspect-ratio:4/5.35}.about-proof{grid-template-columns:1fr}.about-proof-card.wide{grid-template-columns:1fr}}

  /* ===== SHARED PREMIUM SURFACE LANGUAGE =====
     Keeps cards visually related across the page without changing special semantic panels. */
  .card,.chcard,.faq,.kpi,.note,.opp-stat,.step,.layer,.wfchip,.compact-example,
  .home-explain .mini-card,.platform-brief .brief-card,.why-card,.howflow,
  .about-proof-card,.lisra-proof-mini .rp,.node:not(.master),.box:not(.bad):not(.good),
  .vsbox:not(.agent):not(.plain){
    background:var(--surface-bg);
    border-color:var(--surface-border);
    box-shadow:var(--surface-shadow);
  }
  .card:hover,.chcard:hover,.faq:hover,.kpi:hover,.note:hover,.opp-stat:hover,
  .step:hover,.layer:hover,.wfchip:hover,.compact-example:hover,
  .home-explain .mini-card:hover,.platform-brief .brief-card:hover,.why-card:hover,
  .howflow:hover,.about-proof-card:hover,.lisra-proof-mini .rp:hover,.node:not(.master):hover,
  .box:not(.bad):not(.good):hover,.vsbox:not(.agent):not(.plain):hover{
    border-color:var(--surface-border-hover);
    box-shadow:var(--surface-shadow-hover);
  }
  .kc{text-transform:none !important;}