/* Zen Web Platform — shared site styles. Import order: tokens.css first. */
@import url('./tokens.css');

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      background:var(--bg);color:var(--ink);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      line-height:1.6;-webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
    .eyebrow{color:var(--accent);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
    h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.01em;margin:12px 0 16px;font-weight:660}
    .lead{color:var(--muted);font-size:18px;max-width:66ch}

    /* Header */
    header{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
      background:rgba(11,15,20,.72);border-bottom:1px solid var(--line)}
    .bar{display:flex;align-items:center;justify-content:space-between;height:64px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.14em;font-size:14px}
    .glyph{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:inline-block;position:relative;
      background:conic-gradient(from 220deg,#17337a,#2b86ff 55%,#8ec2ff 80%,rgba(0,0,0,0) 92%);
      -webkit-mask:radial-gradient(circle 11px at 50% 50%,transparent 6.3px,#000 7.3px);
              mask:radial-gradient(circle 11px at 50% 50%,transparent 6.3px,#000 7.3px)}
    .glyph::after{content:none}
    nav a{color:var(--muted);font-size:14px;margin-left:26px;transition:color .2s}
    nav a:hover{color:var(--ink)}
    @media(max-width:720px){nav{display:none}}

    /* Hero */
    .hero{padding:118px 0 84px;border-bottom:1px solid var(--line);
      background:radial-gradient(1200px 420px at 72% -10%,rgba(43,134,255,.10),transparent)}
    .hero h1{font-size:clamp(34px,6vw,62px);line-height:1.07;letter-spacing:-.02em;font-weight:680;max-width:15ch}
    .hero p{color:var(--muted);font-size:clamp(17px,2.4vw,21px);margin-top:22px;max-width:56ch}
    .cta{display:inline-flex;gap:14px;margin-top:36px;flex-wrap:wrap}
    .btn{padding:12px 22px;border-radius:8px;font-size:15px;font-weight:600;border:1px solid var(--line);transition:.2s}
    .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
    .btn.primary:hover{filter:brightness(1.08)}
    .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

    /* Stat band */
    .stats{border-bottom:1px solid var(--line);background:var(--panel-2)}
    .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 24px}
    @media(max-width:720px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}
    .stat .n{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
    .stat .n small{color:var(--accent);font-weight:700}
    .stat .l{color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}

    /* Sections */
    section{padding:80px 0}
    .divide{border-top:1px solid var(--line)}

    /* Card grids */
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
    @media(max-width:860px){.grid{grid-template-columns:1fr}}
    .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;transition:.2s}
    .card:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
    .card .k{color:var(--accent);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
    .card h3{font-size:19px;margin:10px 0 8px;font-weight:640}
    .card p{color:var(--muted);font-size:15px}
    .card ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px}
    .card ul li{color:var(--muted);font-size:14px;padding-left:16px;position:relative}
    .card ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent-dim)}

    /* Pull quote */
    .quote{margin-top:40px;padding:28px 30px;border-left:3px solid var(--accent);
      background:var(--panel);border-radius:0 12px 12px 0}
    .quote p{font-size:clamp(18px,2.6vw,23px);font-weight:600;letter-spacing:-.01em;color:var(--ink);max-width:40ch}
    .quote span{display:block;color:var(--faint);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px}

    /* Portfolio layers */
    .layer{margin-top:28px}
    .layer h4{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:600}
    .chips{display:flex;flex-wrap:wrap;gap:10px}
    .chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;
      padding:8px 16px;font-size:14px;color:var(--ink);transition:.2s}
    .chip:hover{border-color:var(--accent-dim);color:var(--accent)}
    .note{color:var(--faint);font-size:13px;margin-top:22px;max-width:64ch}

    /* Contact */
    .contact{border-top:1px solid var(--line);background:var(--panel)}
    .contact .lead{margin-bottom:24px}
    .mail{font-size:clamp(20px,3vw,28px);font-weight:640;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px}
    .mail:hover{color:var(--accent)}

    footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:13px;
      display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

    /* Auth gate — gated private per-client sites (auth = demo-server login) */
    .gate{min-height:100vh;display:grid;place-items:center;
      background:radial-gradient(900px 380px at 50% -10%,rgba(43,134,255,.10),transparent)}
    .gate .box{background:var(--panel);border:1px solid var(--line);border-radius:16px;
      padding:40px;max-width:420px;width:calc(100% - 48px);text-align:center}
    .gate .glyph{margin:0 auto 18px}
    .gate h1{font-size:22px;font-weight:660;letter-spacing:-.01em}
    .gate p{color:var(--muted);font-size:15px;margin:10px 0 24px}
    .gate .btn{display:inline-block;width:100%}
    .gate .foot{color:var(--faint);font-size:12px;margin-top:18px}

    /* ============ Polish pass (MVP) ============ */

    /* Glyph renders as a proper ring everywhere (inline elements ignore w/h) */
    .glyph{display:inline-block}

    /* Sticky-header-aware anchor scrolling + honor reduced motion */
    html{scroll-padding-top:84px}
    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
    }

    /* Text selection + consistent accent focus rings */
    ::selection{background:rgba(43,134,255,.28);color:var(--ink)}
    :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
    a,button{-webkit-tap-highlight-color:transparent}

    /* Skip link (a11y) */
    .skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--accent);color:var(--accent-ink);
      padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px}
    .skip:focus{left:16px}

    /* Header/nav refinement — animated underline, active state */
    .brand{transition:opacity .2s}
    .brand:hover{opacity:.85}
    nav a{position:relative;padding:6px 0}
    nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
      background:var(--accent);transition:right .22s ease}
    nav a:hover::after,nav a:focus-visible::after,nav a[aria-current="true"]::after{right:0}
    nav a[aria-current="true"]{color:var(--ink)}

    /* Buttons — press feedback + primary glow */
    .btn{position:relative;will-change:transform}
    .btn:active{transform:translateY(1px)}
    .btn.primary{box-shadow:0 8px 24px -12px rgba(43,134,255,.6)}
    .btn.primary:hover{filter:brightness(1.08);box-shadow:0 10px 30px -10px rgba(43,134,255,.75)}

    /* Cards — softer lift with shadow + accent wash on hover */
    .card{position:relative;overflow:hidden}
    .card::before{content:"";position:absolute;inset:0;
      background:radial-gradient(420px 160px at 12% -20%,rgba(43,134,255,.10),transparent);
      opacity:0;transition:opacity .25s}
    .card:hover{box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
    .card:hover::before{opacity:1}
    .card>*{position:relative}

    /* Stat band — tabular figures + faint separators */
    .stat .n{font-variant-numeric:tabular-nums}
    @media(min-width:721px){
      .stats .wrap{position:relative}
      .stat+.stat{border-left:1px solid var(--line);padding-left:20px}
    }

    /* Chips — subtle lift */
    .chip{transition:.2s;cursor:default}
    .chip:hover{transform:translateY(-1px);border-color:var(--accent-dim);color:var(--accent)}

    /* Contact mail — animated underline grow */
    .mail{border-bottom-color:var(--accent-dim);transition:color .2s,border-color .2s}
    .mail:hover{border-bottom-color:var(--accent)}

    /* Reveal-on-scroll — SAFE by default: content is visible even if JS never runs.
       Only browsers that set html.js get the hidden→fade-in enhancement. */
    .reveal{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
    html.js .reveal{opacity:0;transform:translateY(14px)}
    html.js .reveal.in{opacity:1;transform:none}
    @media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}}

    /* ============ Hierarchy templates (group + leaf pages) ============ */

    /* Breadcrumbs */
    .crumbs{font-size:13px;color:var(--faint);letter-spacing:.04em;padding-top:26px}
    .crumbs a{color:var(--muted);transition:color .2s}
    .crumbs a:hover{color:var(--accent)}
    .crumbs .sep{margin:0 8px;opacity:.6}

    /* Page header (group/leaf hero, lighter than the umbrella hero) */
    .pagehead{padding:26px 0 46px;border-bottom:1px solid var(--line);
      background:radial-gradient(1000px 320px at 78% -20%,rgba(43,134,255,.08),transparent)}
    .pagehead h1{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.02em;font-weight:680;margin-top:14px}
    .pagehead .kicker{color:var(--accent);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
    .pagehead p{color:var(--muted);font-size:clamp(16px,2.2vw,19px);margin-top:16px;max-width:62ch}
    .pagehead .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
    .tag-pill{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;
      letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
    .tag-pill.live{color:var(--accent);border-color:var(--accent-dim)}

    /* Spec table (leaf detail) */
    .spec{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
    .spec th,.spec td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
    .spec th{color:var(--faint);font-weight:600;width:34%;letter-spacing:.03em}
    .spec td{color:var(--ink)}
    .spec tr:hover td,.spec tr:hover th{background:rgba(43,134,255,.04)}

    /* Gated CTA — public teaser that points to login-gated depth */
    .gated{margin-top:40px;border:1px solid var(--accent-dim);border-radius:14px;padding:26px 28px;
      background:linear-gradient(180deg,rgba(43,134,255,.06),transparent)}
    .gated .lock{color:var(--accent);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
    .gated h3{font-size:20px;margin:8px 0 8px;font-weight:640}
    .gated p{color:var(--muted);font-size:15px;max-width:60ch;margin-bottom:18px}

    /* Back link */
    .back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;
      margin-top:40px;transition:color .2s}
    .back:hover{color:var(--accent)}
    .back::before{content:"←";font-size:16px}

    /* NDA/confidential banner (gated leaf pages) */
    .conf{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:10px 14px;border-radius:10px;
      background:rgba(43,134,255,.08);border:1px solid var(--accent-dim);color:var(--muted);font-size:13px}
    .conf b{color:var(--accent);letter-spacing:.06em;text-transform:uppercase;font-size:12px}

    /* ============ Mega-menu nav (Products / Solutions / AI Tools / …) ============ */
    .mainnav{display:flex;align-items:center;gap:2px}
    .mainnav>.item{position:relative}
    .mainnav>.item>.top{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;
      padding:22px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .2s}
    .mainnav>.item>.top:hover,.mainnav>.item.open>.top{color:var(--ink)}
    .mainnav .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
      transform:rotate(45deg);margin-top:-3px;transition:transform .2s;opacity:.7}
    .mainnav>.item.open .caret{transform:rotate(-135deg);margin-top:2px}
    .mainnav .panel{position:absolute;top:100%;left:0;min-width:280px;background:var(--panel);
      border:1px solid var(--line);border-radius:14px;padding:14px;display:none;z-index:30;
      box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
    .mainnav .panel.wide{min-width:560px;display:none}
    .mainnav>.item.open>.panel{display:block}
    .mainnav .cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
    .mainnav .grp{padding:6px 8px}
    .mainnav .grp .h{color:var(--accent);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
    .mainnav .panel a{display:block;padding:8px 10px;border-radius:9px;color:var(--ink);font-size:14px;transition:.15s}
    .mainnav .panel a:hover{background:rgba(43,134,255,.08);color:var(--accent)}
    .mainnav .panel a .d{display:block;color:var(--faint);font-size:12px;margin-top:1px}
    .hamb{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);
      width:40px;height:38px;cursor:pointer;align-items:center;justify-content:center}
    .hamb span,.hamb span::before,.hamb span::after{content:"";display:block;width:18px;height:2px;background:currentColor;position:relative;transition:.2s}
    .hamb span::before{position:absolute;top:-6px}.hamb span::after{position:absolute;top:6px}

    /* Desktop hover/focus opens dropdowns */
    @media(min-width:821px){
      .mainnav>.item:hover>.panel,.mainnav>.item:focus-within>.panel{display:block}
      .mainnav>.item:hover>.top .caret,.mainnav>.item:focus-within>.top .caret{transform:rotate(-135deg);margin-top:2px}
    }
    /* Mobile: hamburger + accordion */
    @media(max-width:820px){
      .hamb{display:inline-flex}
      .mainnav{position:fixed;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;gap:0;
        background:var(--bg);border-bottom:1px solid var(--line);padding:6px 16px 18px;display:none;max-height:calc(100vh - 64px);overflow:auto}
      header.navopen .mainnav{display:flex}
      .mainnav>.item{width:100%;border-bottom:1px solid var(--line)}
      .mainnav>.item:last-child{border-bottom:0}
      .mainnav>.item>.top{width:100%;justify-content:space-between;padding:15px 4px;font-size:15px}
      .mainnav .panel,.mainnav .panel.wide{position:static;min-width:0;border:0;background:transparent;
        box-shadow:none;padding:0 0 8px 10px}
      .mainnav .cols{grid-template-columns:1fr;gap:0}
    }

    /* ============ Demos / media gallery + modal ============ */
    .media{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
    @media(max-width:860px){.media{grid-template-columns:1fr}}
    .mediacard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:.2s;text-align:left}
    .mediacard:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
    .mediacard .thumb{position:relative;aspect-ratio:16/9;background:
      radial-gradient(420px 200px at 70% -10%,rgba(43,134,255,.14),transparent),var(--panel-2);
      display:flex;align-items:center;justify-content:center}
    .mediacard .play{width:54px;height:54px;border-radius:50%;background:rgba(43,134,255,.14);
      border:1px solid var(--accent-dim);display:grid;place-items:center}
    .mediacard .play::after{content:"";margin-left:3px;border-style:solid;border-width:9px 0 9px 15px;
      border-color:transparent transparent transparent var(--accent)}
    .mediacard .soon{position:absolute;top:10px;left:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:2px 7px;background:rgba(11,15,20,.6)}
    .mediacard .body{padding:16px 18px}
    .mediacard h3{font-size:16px;font-weight:640;margin:0 0 4px}
    .mediacard p{color:var(--muted);font-size:13.5px}
    .modal{position:fixed;inset:0;z-index:60;background:rgba(5,8,11,.8);backdrop-filter:blur(4px);
      display:none;align-items:center;justify-content:center;padding:24px}
    .modal.open{display:flex}
    .modal .box{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:960px;width:100%;overflow:hidden}
    .modal .vwrap{aspect-ratio:16/9;background:#000;display:grid;place-items:center}
    .modal .vwrap video,.modal .vwrap iframe{width:100%;height:100%;border:0}
    .modal .vwrap .ph{color:var(--muted);font-size:14px;text-align:center;padding:24px}
    .modal .mhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-top:1px solid var(--line)}
    .modal .mhead h3{font-size:16px;font-weight:640}
    .modal .x{background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);width:34px;height:32px;cursor:pointer;font-size:16px}
    .modal .x:hover{border-color:var(--accent)}

    /* Case-study cards */
    .cs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
    @media(max-width:760px){.cs{grid-template-columns:1fr}}
    .cscard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;transition:.2s;display:block}
    a.cscard:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
    .cscard .k{color:var(--accent);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
    .cscard h3{font-size:19px;margin:8px 0 8px;font-weight:650}
    .cscard p{color:var(--muted);font-size:14.5px}
    .cscard .metrics{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
    .cscard .metrics div{min-width:80px}
    .cscard .metrics .n{font-size:22px;font-weight:700;color:var(--ink)}
    .cscard .metrics .l{color:var(--faint);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

    /* Linkable cards + chips */
    a.card{display:block;color:inherit}
    a.chip{cursor:pointer}
    a.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
    .card .more{color:var(--accent);font-size:13px;font-weight:600;margin-top:12px;display:inline-block}

    /* ============ Print = clean datasheet ============ */
    @media print{
      *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
      header,.hamb,.skip,.crumbs,.cta,.back,.modal,footer,.gated .btn,.more{display:none!important}
      body{background:#fff;color:#0b0f14}
      .wrap{max-width:100%}
      section{padding:14px 0}
      .pagehead{background:none;border:0;padding:0 0 10px}
      .pagehead .kicker,.eyebrow,.card .k,.spec th,.layer h4{color:#0a7d72}
      h1,h2,h3,.lead,.card p,.card h3,.spec td,p,li,.tag-pill{color:#0b0f14!important}
      .card,.quote,.gated{background:#f6f8f9;border:1px solid #d6dde2;box-shadow:none}
      .tag-pill{border-color:#bcc6cd}
      .spec th,.spec td{border-color:#d6dde2}
      a{color:#0b0f14;text-decoration:none}
      .pagehead::after{content:"zensemiconductor.com";display:block;color:#7a8791;font-size:11px;margin-top:8px;letter-spacing:.08em}
    }

    /* Page version stamp (set at deploy time) */
    .ver{flex-basis:100%;order:9;color:var(--faint);font-family:ui-monospace,Menlo,monospace;
      font-size:11px;letter-spacing:.04em;margin-top:6px}

    /* Footer ecosystem family links */
    .fam{flex-basis:100%;order:8;color:var(--faint);font-size:12.5px;margin-top:8px}
    .fam a{color:var(--muted);border-bottom:1px solid var(--accent-dim);transition:color .2s}
    .fam a:hover{color:var(--accent)}

    .legal{color:var(--faint);font-size:12.5px}
    .legal a{color:var(--muted)}
    .legal a:hover{color:var(--accent)}

    /* Hero two-column + chip visual */
    .herogrid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
    .herovis svg{width:100%;height:auto;max-width:480px;display:block;margin-left:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
    @media(max-width:860px){.herogrid{grid-template-columns:1fr;gap:28px}.herovis svg{margin:0 auto;max-width:420px}}

    /* Product block diagrams — reusable on-brand SVG figure */
    .diagramfig{margin:30px 0 6px}
    .diagramfig svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px;
      background:linear-gradient(180deg,rgba(43,134,255,.05),rgba(14,19,26,.6))}
    .diagramfig figcaption{color:var(--muted);font-size:13.5px;margin-top:12px;text-align:center}
    .dg-box{fill:rgba(43,134,255,.10);stroke:#2b86ff;stroke-width:1.3}
    .dg-box.alt{fill:rgba(142,194,255,.06);stroke:#3a5f8f}
    .dg-box.hot{fill:rgba(43,134,255,.22);stroke:#8ec2ff;stroke-width:1.5}
    .dg-t{fill:#eef2f6;font:600 13px system-ui,-apple-system,sans-serif;text-anchor:middle}
    .dg-s{fill:#9aa7b4;font:500 10.5px system-ui,-apple-system,sans-serif;text-anchor:middle}
    .dg-cap{fill:#808d9b;font:600 11px system-ui,-apple-system,sans-serif;text-anchor:middle;letter-spacing:.08em;text-transform:uppercase}
    .dg-line{stroke:#2b86ff;stroke-width:1.3;fill:none;opacity:.55}
    .dg-flow{stroke:#2b86ff;stroke-width:1.6;fill:none;opacity:.85}
    .dg-node{fill:#2b86ff}