/* ============================================================
     ARACHNE SENTINEL — product landing
     Deliberately single-theme (dark void) — the product itself has no
     light mode; its whole identity is a night-shift SOC console. Every
     color is declared explicitly on :root, no media-query branching.
     ============================================================ */

  :root{
    --void:#0a0e16;       /* page ground — cool near-black */
    --depth:#121a2b;      /* panel surface, one ring inward */
    --depth-2:#182338;    /* nested panel / hover surface */
    --thread:#25324a;     /* hairline borders — "web thread" */
    --thread-soft:#1a2439;
    --ink:#eef1f7;        /* primary text */
    --dust:#8a96b0;       /* secondary text */
    --dust-dim:#5c6883;   /* tertiary / captions */
    --silk:#52ddc7;       /* primary accent — spider-silk teal */
    --silk-dim:#2f8a7d;
    --ember:#f0824a;      /* threat/attack accent, used sparingly */
    --ember-dim:#8a4a2c;
    --ok:#5fd98a;

    --font-display:'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --font-body:'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --measure: 40rem;
  }

  *{box-sizing:border-box;}
  html{background:var(--void);}
  body{
    margin:0; background:var(--void); color:var(--ink);
    font-family:var(--font-body); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--silk); color:var(--void);}
  a{color:var(--silk);}
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--silk); outline-offset:3px; border-radius:2px;
  }
  h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; color:var(--ink);}
  p{margin:0;}
  .measure{max-width:var(--measure);}
  .mono{font-family:var(--font-mono);}
  .eyebrow{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--silk); display:flex; align-items:center; gap:.55rem;
  }
  .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--silk);
    box-shadow:0 0 8px 1px var(--silk); flex-shrink:0;}

  /* signature notch — hand-rolled clip-path, used consistently as the one
     recurring structural motif instead of generic rounded-lg cards */
  .panel{
    background:var(--depth); border:1px solid var(--thread);
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    padding:1.7rem 1.9rem;
  }

  .wrap{max-width:74rem; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 3rem);}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }

  /* ---------------- thread spine ----------------
     a thin vertical line with ring-junction nodes running down the page,
     echoing the product's own concentric-defense architecture instead of
     a decorative gradient blob. */
  .spine{
    position:absolute; left:50%; top:0; bottom:0; width:1px;
    background:linear-gradient(var(--void), var(--thread) 6%, var(--thread) 94%, var(--void));
    z-index:0; pointer-events:none;
  }

  /* ---------------- atmosphere ----------------
     ambient glow + faint dot-grid behind the whole page, so the void reads
     as a lit console room rather than empty space. Fades out by the time
     the page reaches the footer, so the closing CTA stays calm. */
  .atmosphere{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(48rem 34rem at 88% 2%, rgba(82,221,199,.13), transparent 62%),
      radial-gradient(42rem 30rem at 4% 20%, rgba(240,130,74,.08), transparent 64%),
      radial-gradient(40rem 28rem at 55% 58%, rgba(82,221,199,.05), transparent 66%);
  }
  .atmosphere::after{
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(var(--thread-soft) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:.45;
    mask-image:linear-gradient(to bottom, black, black 55%, transparent 92%);
    -webkit-mask-image:linear-gradient(to bottom, black, black 55%, transparent 92%);
  }

  /* ---------------- nav ---------------- */
  header.nav{
    position:sticky; top:0; z-index:40;
    background:rgba(10,14,22,.86); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--thread-soft);
  }
  .nav-inner{
    max-width:74rem; margin:0 auto; padding:.9rem clamp(1.25rem,4vw,3rem);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .brandmark{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.01em;}
  .brandmark svg{width:22px;height:22px; flex-shrink:0;}
  .nav-cta{
    display:inline-block; text-decoration:none;
    font-family:var(--font-mono); font-size:.78rem; font-weight:600; color:var(--void);
    background:var(--silk); padding:.55rem 1.05rem; border:none; cursor:pointer;
    clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 100%);
    transition:filter .15s ease, transform .15s ease;
  }
  .nav-cta:hover{filter:brightness(1.12); transform:translateY(-1px);}

  /* ---------------- hero ---------------- */
  .hero{position:relative; padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,6vw,5rem);}
  .hero-grid{
    display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center;
    position:relative; z-index:1;
  }
  @media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} }
  h1.headline{
    font-size:clamp(2.4rem, 5.2vw, 4rem); font-weight:700; line-height:1.04; letter-spacing:-.015em;
    margin:1rem 0 1.25rem;
  }
  h1.headline em{
    font-style:normal; color:var(--silk);
  }
  .sub{color:var(--dust); font-size:1.14rem; line-height:1.65;}
  .hero-actions{display:flex; align-items:center; gap:1.2rem; margin-top:2rem; flex-wrap:wrap;}
  .btn-primary{
    display:inline-block; text-decoration:none; text-align:center;
    font-family:var(--font-mono); font-weight:600; font-size:.85rem;
    color:var(--void); background:var(--silk); padding:.85rem 1.5rem; border:none; cursor:pointer;
    clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 100%);
    transition:filter .15s ease, transform .15s ease;
  }
  .btn-primary:hover{filter:brightness(1.1); transform:translateY(-1px);}
  .btn-ghost{
    display:inline-block; text-decoration:none; text-align:center;
    font-family:var(--font-mono); font-weight:600; font-size:.85rem; color:var(--ink);
    background:transparent; border:1px solid var(--thread); padding:.82rem 1.4rem; cursor:pointer;
  }
  .btn-ghost:hover{border-color:var(--dust);}

  .hero-canvas-wrap{position:relative; aspect-ratio:1/1; max-width:420px; margin:0 auto;}
  .hero-canvas-wrap::before{
    content:""; position:absolute; inset:-28px; z-index:-1; border-radius:50%;
    background:radial-gradient(circle, rgba(82,221,199,.16), transparent 68%);
    filter:blur(2px);
  }
  canvas#dome{width:100%; height:100%; display:block;}
  .hero-canvas-cap{
    position:absolute; left:50%; bottom:-1.6rem; transform:translateX(-50%);
    font-family:var(--font-mono); font-size:.68rem; color:var(--dust-dim); letter-spacing:.06em;
    white-space:nowrap;
  }

  .proof-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    margin-top:clamp(3rem,6vw,4.5rem); background:var(--thread-soft);
    border:1px solid var(--thread-soft); position:relative; z-index:1;
    box-shadow:0 24px 48px -30px rgba(0,0,0,.6);
  }
  @media (max-width:760px){ .proof-row{grid-template-columns:1fr 1fr;} }
  .proof{
    display:flex; flex-direction:column; gap:.55rem; background:var(--depth);
    padding:1.5rem 1.4rem; transition:background .2s ease;
  }
  .proof:hover{background:var(--depth-2);}
  .proof-icon{width:19px; height:19px; color:var(--silk); flex-shrink:0;}
  .proof .num{font-family:var(--font-mono); font-size:clamp(1.4rem,2.4vw,1.75rem); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
  .proof .num span{color:var(--silk);}
  .proof .label{font-size:.8rem; color:var(--dust); line-height:1.45;}

  /* ---------------- section shell ---------------- */
  section{position:relative; padding:clamp(3.5rem,7vw,6rem) 0;}
  .section-head{max-width:38rem; margin-bottom:clamp(2.2rem,5vw,3.2rem); position:relative; z-index:1;}
  .section-head h2{font-size:clamp(1.7rem,3.4vw,2.35rem); margin-top:.7rem; letter-spacing:-.01em;}
  .section-head p{color:var(--dust); margin-top:.9rem; font-size:1.03rem;}

  .ring-junction{
    position:relative; z-index:1; width:11px; height:11px; border-radius:50%;
    background:var(--void); border:2px solid var(--silk); margin:0 auto 1.6rem;
    box-shadow:0 0 0 5px var(--void), 0 0 0 6px var(--thread);
  }

  /* ---------------- honesty band ---------------- */
  .honesty{
    background:var(--depth); border-top:1px solid var(--thread-soft); border-bottom:1px solid var(--thread-soft);
  }
  .honesty-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;}
  @media (max-width:820px){ .honesty-grid{grid-template-columns:1fr;} }
  .honesty blockquote{
    font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:500;
    line-height:1.35; margin:0; color:var(--ink); text-wrap:balance;
  }
  .honesty blockquote::before{content:"“"; color:var(--silk);}
  .honesty blockquote::after{content:"”"; color:var(--silk);}
  .honesty-list{display:flex; flex-direction:column; gap:1.1rem;}
  .honesty-item{display:flex; gap:.85rem; align-items:flex-start;}
  .honesty-item .mark{color:var(--ok); font-family:var(--font-mono); flex-shrink:0; margin-top:.15rem;}
  .honesty-item p{color:var(--dust); font-size:.96rem;}
  .honesty-item b{color:var(--ink); font-weight:600;}

  /* ---------------- defense depth ---------------- */
  .depth-rows{display:flex; flex-direction:column; gap:0; position:relative; z-index:1;}
  .depth-row{
    display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; padding:1.5rem 0;
    border-top:1px solid var(--thread-soft);
  }
  .depth-row:last-child{border-bottom:1px solid var(--thread-soft);}
  .depth-tier{font-family:var(--font-mono); font-size:.72rem; color:var(--dust-dim); padding-top:.2rem; letter-spacing:.05em;}
  .depth-tier b{display:block; font-size:1.15rem; color:var(--silk); font-family:var(--font-mono); margin-bottom:.15rem;}
  .tier-icon{width:26px; height:26px; color:var(--silk); display:block; margin-bottom:.7rem;}
  .depth-row:last-child .tier-icon{color:var(--ember);}
  .depth-row:last-child .depth-tier b{color:var(--ember);}
  .depth-body h3{font-size:1.12rem; font-weight:700; margin-bottom:.45rem;}
  .depth-body p{color:var(--dust); font-size:.95rem; max-width:34rem;}

  /* ---------------- integration steps ---------------- */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative; z-index:1;}
  @media (max-width:820px){ .steps{grid-template-columns:1fr;} }
  .step{display:flex; flex-direction:column; gap:.9rem;}
  .step .idx{font-family:var(--font-mono); font-size:.78rem; color:var(--dust-dim);}
  .step h3{font-size:1.08rem; font-weight:700;}
  .step p{color:var(--dust); font-size:.93rem;}
  .step code, .code-line{
    display:block; font-family:var(--font-mono); font-size:.78rem; color:var(--silk);
    background:var(--void); border:1px solid var(--thread); padding:.7rem .85rem;
    overflow-x:auto; white-space:pre;
  }

  /* ---------------- ethics strip ---------------- */
  .ethics{display:flex; flex-wrap:wrap; gap:1rem; position:relative; z-index:1;}
  .chip{
    font-family:var(--font-mono); font-size:.74rem; color:var(--dust);
    background:var(--depth); border:1px solid var(--thread); padding:.6rem .95rem .6rem .8rem;
    display:flex; align-items:center; gap:.55rem;
  }
  .chip-icon{width:15px; height:15px; color:var(--silk); flex-shrink:0;}

  /* ---------------- footer / cta ---------------- */
  footer{
    padding:clamp(3.5rem,7vw,5.5rem) 0 3rem; text-align:center; position:relative; z-index:1;
  }
  footer h2{font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:1.1rem;}
  footer .sub{margin:0 auto 2.2rem; max-width:32rem;}
  /* ---------------- pricing ---------------- */
  .pricing-note{
    font-family:var(--font-mono); font-size:.82rem; color:var(--dust-dim);
    text-align:center; margin:-1rem auto 2.6rem; max-width:34rem; line-height:1.7;
  }
  .pricing-note b{color:var(--dust);}
  .pricing-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative; z-index:1;
    align-items:stretch;
  }
  @media (max-width:920px){ .pricing-grid{grid-template-columns:1fr; max-width:26rem; margin:0 auto;} }
  .price-card{
    display:flex; flex-direction:column; gap:1.3rem;
  }
  .price-card.featured{
    border-color:var(--silk-dim); background:var(--depth-2);
    box-shadow:0 0 0 1px var(--silk-dim), 0 18px 40px -22px rgba(82,221,199,.35);
  }
  .price-tag{
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--silk); background:rgba(82,221,199,.1); border:1px solid var(--silk-dim);
    align-self:flex-start; padding:.28rem .6rem;
  }
  .price-card{position:relative; overflow:hidden;}
  .price-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--thread) 20%, var(--thread) 80%, transparent);
  }
  .price-card.featured::before{background:linear-gradient(90deg, transparent, var(--silk) 15%, var(--silk) 85%, transparent);}
  .price-icon-row{display:flex; align-items:center; gap:.6rem;}
  .price-icon{width:20px; height:20px; color:var(--silk); flex-shrink:0;}
  .price-card h3{font-size:1.15rem; font-weight:700;}
  .price-value{display:flex; align-items:baseline; gap:.4rem; font-family:var(--font-mono);}
  .price-value .amt{font-size:2.1rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
  .price-value .per{font-size:.82rem; color:var(--dust);}
  .price-annual{font-size:.78rem; color:var(--dust-dim); font-family:var(--font-mono); margin-top:-.7rem;}
  .price-desc{color:var(--dust); font-size:.92rem;}
  .price-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; flex:1;}
  .price-features li{
    display:flex; gap:.6rem; align-items:flex-start; font-size:.87rem; color:var(--dust);
  }
  .price-features li::before{content:"✓"; color:var(--silk); font-family:var(--font-mono); flex-shrink:0;}
  .price-card .btn-primary, .price-card .btn-ghost{width:100%; text-align:center;}

  .foot-meta{
    margin-top:4rem; padding-top:1.6rem; border-top:1px solid var(--thread-soft);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem;
    font-family:var(--font-mono); font-size:.72rem; color:var(--dust-dim);
  }

  /* ---------------- command-center preview (dashboard mockup) ----------------
     A stylized, clearly-labeled sample of the real live panel — not a claim
     of live data, an illustration of what the panel looks like once a
     deployment is generating real events. */
  #panel-preview{background:var(--depth); border-top:1px solid var(--thread-soft); border-bottom:1px solid var(--thread-soft);}
  .console{
    padding:0; overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  }
  .console-head{
    display:flex; align-items:center; gap:.9rem; padding:.85rem 1.2rem;
    border-bottom:1px solid var(--thread); background:var(--depth-2);
  }
  .console-dots{display:flex; gap:.4rem;}
  .console-dots span{width:8px; height:8px; border-radius:50%; background:var(--thread);}
  .console-dots span:nth-child(1){background:var(--ember-dim);}
  .console-dots span:nth-child(2){background:#d8b25a;}
  .console-dots span:nth-child(3){background:var(--silk-dim);}
  .console-title{font-size:.72rem; color:var(--dust-dim); letter-spacing:.03em;}
  .console-body{display:grid; grid-template-columns:1.5fr 1fr; gap:0;}
  @media (max-width:820px){ .console-body{grid-template-columns:1fr;} }

  .console-feed{padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.85rem;}
  .feed-line{
    display:grid; grid-template-columns:6.4rem 8.5rem 1fr; gap:.9rem; align-items:baseline;
    font-size:.83rem; padding:.4rem .55rem; border-radius:2px; transition:background .5s ease;
  }
  @media (max-width:560px){ .feed-line{grid-template-columns:1fr; gap:.25rem;} }
  .feed-line.active{background:rgba(82,221,199,.07);}
  .feed-tag{
    font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.06em;
    padding:.18rem .45rem; text-align:center; width:fit-content;
  }
  .feed-tag.ok{color:var(--silk); background:rgba(82,221,199,.1); border:1px solid var(--silk-dim);}
  .feed-tag.warn{color:#d8b25a; background:rgba(216,178,90,.1); border:1px solid #8a7038;}
  .feed-tag.crit{color:var(--ember); background:rgba(240,130,74,.12); border:1px solid var(--ember-dim);}
  .feed-ip{color:var(--dust); font-size:.78rem;}
  .feed-desc{color:var(--ink); font-size:.83rem;}

  .console-gauges{
    display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
    padding:1.5rem 1.4rem; background:var(--void); border-left:1px solid var(--thread);
  }
  @media (max-width:820px){ .console-gauges{flex-direction:row; flex-wrap:wrap; border-left:none; border-top:1px solid var(--thread);} }
  .gauge{display:flex; align-items:center; gap:1rem;}
  .gauge-ring{
    --pct:50; width:64px; height:64px; border-radius:50%; flex-shrink:0;
    background:
      radial-gradient(closest-side, var(--depth-2) 64%, transparent 65% 100%),
      conic-gradient(var(--silk) calc(var(--pct) * 1%), var(--thread) 0);
    display:flex; align-items:center; justify-content:center;
  }
  .gauge-ring span{font-family:var(--font-mono); font-size:.66rem; font-weight:700; color:var(--ink);}
  .gauge-label{font-size:.8rem; color:var(--dust);}
  .console-caption{
    font-family:var(--font-mono); font-size:.72rem; color:var(--dust-dim);
    text-align:center; margin-top:1.2rem;
  }