/* src/styles/app.css */
html[data-theme="dark"] body,
html:not([data-theme]) body {
  background: var(--bg, oklch(14% 0.005 260));
  color: var(--fg, oklch(87% 0.003 260));
}

html[data-spa-loading] body {
  opacity: 0.78;
  filter: blur(0.8px);
  transition: opacity 0.14s ease, filter 0.14s ease;
}

@media (prefers-reduced-motion: reduce) {
  html[data-spa-loading] body {
    opacity: 1;
    filter: none;
    transition: none;
  }
}


/* src/styles/home.css */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/Inter-Variable.ttf") format("truetype"); }
  @font-face { font-family:"IBM Plex Mono"; font-weight:400 450; font-style:normal; font-display:swap; src:url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
  @font-face { font-family:"IvyPresto"; font-weight:300; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Light.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Regular.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:italic; font-display:swap; src:url("/fonts/IvyPresto-Italic.otf") format("opentype"); }

  *, *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; }
  html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

  html[data-theme="dark"]{
    /* Slash DS V2 — dark (cool-neutral ladder + brushed silver) */
    --bg: oklch(14% 0.005 260);            /* neutral-000 · canvas (#0B0C0E) */
    --bg-2: oklch(20% 0.006 260);          /* neutral-200 · panels/cards (#1C1D22) */
    --fg: oklch(87% 0.003 260);            /* neutral-1100 (#D9D9D9) */
    --fg-strong: oklch(95% 0.002 260);     /* neutral-1200 (#E5E7EB) */
    --fg-muted: oklch(64% 0.006 260);      /* neutral-900 (#8D8D8D) */
    --fg-faint: oklch(50% 0.006 260);      /* neutral-800 (#5E616E) */
    --accent: oklch(86% 0.004 260);        /* silver-pure (the Twin metal) */
    --accent-deep: oklch(62% 0.008 260);   /* metal gradient dark stop (#9CA3AF) */
    --accent-bright: oklch(95% 0.002 260); /* metal gradient light stop (#E5E7EB) */
    --gold: oklch(74% 0.095 74);           /* muted Twin-logo gold accent */
    --gold-deep: oklch(56% 0.08 70);
    --gold-bright: oklch(82% 0.085 78);     /* gold button fill */
    --green: oklch(72% 0.14 150);
    --hairline: oklch(28% 0.006 260);      /* neutral-500 · cool hairline (#2E3038) */
    --glass-bg: oklch(20% 0.006 260 / 55%);
    --glass-border: oklch(100% 0 0 / 12%);
    --glass-hi: oklch(100% 0 0 / 14%);
    --glass-shadow: 0 8px 40px oklch(0% 0 0 / 0.55);
    --grain-opacity: 0.04;
    --grain-blend: overlay;
  }
  html[data-theme="light"]{
    --bg: oklch(92% 0.004 260);
    --bg-2: oklch(96% 0.003 260);
    --fg: oklch(26% 0.008 260);
    --fg-strong: oklch(18% 0.008 260);
    --fg-muted: oklch(46% 0.008 260);
    --fg-faint: oklch(64% 0.006 260);
    --accent: oklch(58% 0.012 260);
    --accent-deep: oklch(48% 0.012 260);
    --accent-bright: oklch(72% 0.008 260);
    --gold: oklch(60% 0.10 72);
    --gold-deep: oklch(48% 0.09 68);
    --gold-bright: oklch(74% 0.09 76);
    --green: oklch(55% 0.14 150);
    --hairline: oklch(0% 0 0 / 11%);
    --glass-bg: oklch(100% 0 0 / 55%);
    --glass-border: oklch(0% 0 0 / 8%);
    --glass-hi: oklch(100% 0 0 / 75%);
    --glass-shadow: 0 8px 32px oklch(40% 0.01 260 / 0.18);
    --grain-opacity: 0.035;
    --grain-blend: multiply;
  }

  body{ background:var(--bg); color:var(--fg); font-family:"Inter",system-ui,sans-serif; }

  :is(a, button, input, textarea, select, [data-navitem]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  html[data-theme="dark"] .ico-moon{ display:none; }
  html[data-theme="light"] .ico-sun{ display:none; }

  @keyframes navDrop { from { opacity:0; transform:translate(-50%, -16px); } to { opacity:1; transform:translate(-50%, 0); } }
  @keyframes paneArrowBob { 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(7px); opacity:1; } }
  @keyframes marioBounce {
    0%   { transform: translateY(-16px) scaleX(1) scaleY(1); animation-timing-function: cubic-bezier(.55,0,.9,.35); }
    40%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
    50%  { transform: translateY(0) scaleX(1.24) scaleY(0.78); }
    60%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: cubic-bezier(.12,.7,.4,1); }
    100% { transform: translateY(-16px) scaleX(1) scaleY(1); }
  }
  @keyframes dotWave { 0%,55%,100%{ transform:translateY(0); } 27%{ transform:translateY(-0.32em); } }
  @keyframes blink {
    0%,28%,38%,64%,74%,100% { transform:scaleY(1); }
    33%,69% { transform:scaleY(0.06); }
  }
  @keyframes eyeLook {
    0%,12%   { transform:translate(0,0); }
    20%,32%  { transform:translate(-3px,1px); }
    40%,50%  { transform:translate(0,-2px); }
    58%,70%  { transform:translate(3px,1px); }
    78%,88%  { transform:translate(0,0); }
    100%     { transform:translate(0,0); }
  }
  @keyframes twinHop {
    0%,72%,100% { transform:translateY(0) scaleX(1) scaleY(1); }
    80%  { transform:translateY(-13px) scaleX(0.97) scaleY(1.04); animation-timing-function:cubic-bezier(.3,.7,.5,1); }
    88%  { transform:translateY(0) scaleX(1.06) scaleY(0.9); }
    94%  { transform:translateY(0) scaleX(1) scaleY(1); }
  }
  @keyframes caretHit { 0%,38%,60%,100%{ transform:translateY(0); } 49%{ transform:translateY(4px); } }
  @keyframes heroCueDip { 0%{ transform:translateY(5px); } 12%{ transform:translateY(7px); } 46%{ transform:translateY(-4px); } 82%{ transform:translateY(7px); } 100%{ transform:translateY(5px); } }
  @keyframes pulseRing { 0%{ transform:scale(0.82); opacity:0.5; } 70%{ opacity:0; } 100%{ transform:scale(1.7); opacity:0; } }
  @keyframes peekRise { 0%,100%{ transform:translate(-50%, 0); } 50%{ transform:translate(-50%, -8px); } }

  @keyframes pulseGlow { 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent); } }
  @keyframes flowMove { 0%{ top:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:100%; opacity:0; } }
  @keyframes knobToggle { 0%,38%{ transform:translateX(0); } 50%,88%{ transform:translateX(15px); } 100%{ transform:translateX(0); } }
  @keyframes caretBlink { 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
  @keyframes heroBob { 0%,100%{ transform:translateY(0) scaleY(1); } 12%{ transform:translateY(0) scaleY(.92); } 46%{ transform:translateY(-15px) scaleY(1.03); } 82%{ transform:translateY(0) scaleY(.97); } }
  @media (max-width:860px){ [data-charts]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:700px){
    nav{ left:10px !important; right:10px !important; top:12px !important; transform:none !important; width:auto !important; max-width:calc(100vw - 20px) !important; padding:6px !important; gap:2px !important; overflow-x:auto !important; justify-content:flex-start !important; scrollbar-width:none; }
    nav::-webkit-scrollbar{ display:none; }
    nav > a:first-child{ margin-right:0 !important; gap:0 !important; flex:0 0 auto; }
    nav > a:first-child span:last-child{ display:none; }
    nav > div{ gap:0 !important; flex:0 0 auto; }
    nav a{ white-space:nowrap; }
    nav > div a{ padding:7px 6px !important; font-size:12px !important; }
    nav button{ width:30px !important; height:30px !important; flex:0 0 auto; }
    @media (max-width:360px){ nav{ padding:5px !important; gap:1px !important; } nav > div a{ padding:7px 3px !important; font-size:10.75px !important; } nav button{ width:27px !important; height:27px !important; } }
    [data-features]{ padding:96px 24px 96px !important; scroll-snap-align:none !important; }
    [data-features] > div{ display:block !important; width:100% !important; max-width:100% !important; }
    [data-fnav]{ position:relative !important; top:auto !important; padding:0 !important; margin-bottom:28px !important; opacity:1 !important; transform:none !important; }
    [data-fnav] > div:last-child{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
    [data-navitem]{ gap:8px !important; padding:10px !important; }
    [data-navtitle]{ font-size:12.5px !important; }
    [data-fsub]{ max-width:100% !important; min-height:0 !important; }
    [data-fstack]{ width:100% !important; padding:0 !important; gap:28px !important; }
    [data-fpanel]{ width:100% !important; scroll-margin-top:76px !important; }
    [data-card]{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important; }
    [data-card] *{ min-width:0 !important; box-sizing:border-box; }
    [data-card] [style*="display:inline-flex"]{ max-width:100% !important; }
    [data-card] [style*="white-space:nowrap"]{ white-space:normal !important; overflow-wrap:anywhere !important; }
    [data-comparison-charts]{ grid-template-columns:1fr !important; gap:24px !important; }
    [data-comparison-charts] [style*="grid-template-columns:104px"]{ grid-template-columns:82px minmax(0,1fr) 54px !important; gap:8px !important; }
    [data-card] [style*="grid-template-columns:1fr auto 1.25fr"],
    [data-card] [style*="grid-template-columns: 1fr auto 1.25fr"],
    [data-card] [style*="grid-template-columns:1fr 1fr"],
    [data-card] [style*="grid-template-columns: 1fr 1fr"],
    [data-card] [style*="grid-template-columns:1.2fr 1fr"],
    [data-card] [style*="grid-template-columns: 1.2fr 1fr"]{ grid-template-columns:1fr !important; }
    [data-card] [style*="align-items:stretch"]{ flex-wrap:wrap !important; }
    [data-card] [style*="align-items:stretch"] > div{ flex:1 1 132px !important; }
    #contact{ min-height:auto !important; padding:96px 24px 72px !important; scroll-snap-align:none !important; }
    #contact > div{ grid-template-columns:1fr !important; gap:40px !important; }
    [data-cta-fields] > div{ grid-template-columns:1fr !important; }
    footer > div{ grid-template-columns:1fr !important; }
  }
  @media (prefers-reduced-motion: reduce){ html{ scroll-snap-type:none; } [data-ellipsis] span{ animation:none !important; } [data-anim] *, [data-fcard] *{ animation:none !important; } }


/* src/styles/research.css */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/Inter-Variable.ttf") format("truetype"); }
  @font-face { font-family:"IBM Plex Mono"; font-weight:400 450; font-style:normal; font-display:swap; src:url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
  @font-face { font-family:"IvyPresto"; font-weight:300; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Light.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Regular.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:italic; font-display:swap; src:url("/fonts/IvyPresto-Italic.otf") format("opentype"); }

  *, *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; }
  html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }

  html[data-theme="dark"]{
    --bg: oklch(14% 0.005 260); --bg-2: oklch(20% 0.006 260);
    --fg: oklch(87% 0.003 260); --fg-strong: oklch(95% 0.002 260);
    --fg-muted: oklch(64% 0.006 260); --fg-faint: oklch(50% 0.006 260);
    --accent: oklch(86% 0.004 260); --accent-deep: oklch(62% 0.008 260); --accent-bright: oklch(95% 0.002 260); --gold: oklch(74% 0.095 74); --gold-deep: oklch(56% 0.08 70); --hairline: oklch(28% 0.006 260);
    --hairline-2: oklch(36% 0.007 260);
    --glass-bg: oklch(20% 0.006 260 / 52%); --glass-border: oklch(100% 0 0 / 12%);
    --glass-hi: oklch(100% 0 0 / 14%); --glass-shadow: 0 8px 40px oklch(0% 0 0 / 0.55);
    --grain-opacity: 0.04; --grain-blend: overlay;
  }
  html[data-theme="light"]{
    --bg: oklch(92% 0.004 260); --bg-2: oklch(96% 0.003 260);
    --fg: oklch(26% 0.008 260); --fg-strong: oklch(18% 0.008 260);
    --fg-muted: oklch(46% 0.008 260); --fg-faint: oklch(60% 0.006 260);
    --accent: oklch(58% 0.012 260); --accent-deep: oklch(48% 0.012 260); --accent-bright: oklch(72% 0.008 260); --gold: oklch(60% 0.10 72); --gold-deep: oklch(48% 0.09 68); --hairline: oklch(0% 0 0 / 11%);
    --hairline-2: oklch(0% 0 0 / 18%);
    --glass-bg: oklch(100% 0 0 / 55%); --glass-border: oklch(0% 0 0 / 8%);
    --glass-hi: oklch(100% 0 0 / 75%); --glass-shadow: 0 8px 32px oklch(40% 0.01 260 / 0.18);
    --grain-opacity: 0.03; --grain-blend: multiply;
  }

  body{ background:var(--bg); color:var(--fg); font-family:"Inter",system-ui,sans-serif; transition:background .5s ease, color .5s ease; }
  :is(a, button, input, textarea, select, [data-navitem]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  html[data-theme="dark"] .ico-moon{ display:none; }
  html[data-theme="light"] .ico-sun{ display:none; }
  @keyframes navDrop { from { opacity:0; transform:translate(-50%, -16px); } to { opacity:1; transform:translate(-50%, 0); } }

  @media (max-width:700px){
    nav{ left:10px !important; right:10px !important; top:12px !important; transform:none !important; width:auto !important; max-width:calc(100vw - 20px) !important; padding:6px !important; gap:2px !important; overflow-x:auto !important; justify-content:flex-start !important; scrollbar-width:none; }
    nav::-webkit-scrollbar{ display:none; }
    nav > a:first-child{ margin-right:0 !important; gap:0 !important; flex:0 0 auto; }
    nav > a:first-child span:last-child{ display:none; }
    nav > div{ gap:0 !important; flex:0 0 auto; }
    nav a{ white-space:nowrap; }
    nav > div a{ padding:7px 6px !important; font-size:12px !important; }
    nav button{ width:30px !important; height:30px !important; flex:0 0 auto; }
    @media (max-width:360px){ nav{ padding:5px !important; gap:1px !important; } nav > div a{ padding:7px 3px !important; font-size:10.75px !important; } nav button{ width:27px !important; height:27px !important; } }
  }

  @media (max-width: 720px){
    .blog-row { grid-template-columns:auto 1fr !important; row-gap:8px !important; column-gap:14px !important; }
    .blog-row [data-title] { grid-column:1 / -1; }
  }


/* src/styles/article.css */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/Inter-Variable.ttf") format("truetype"); }
  @font-face { font-family:"IBM Plex Mono"; font-weight:400 450; font-style:normal; font-display:swap; src:url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }

  *, *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; }
  html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }

  html[data-theme="dark"]{
    --bg: oklch(14% 0.005 260); --bg-2: oklch(20% 0.006 260);
    --fg: oklch(87% 0.003 260); --fg-strong: oklch(95% 0.002 260);
    --fg-muted: oklch(64% 0.006 260); --fg-faint: oklch(50% 0.006 260);
    --accent: oklch(86% 0.004 260); --accent-deep: oklch(62% 0.008 260); --accent-bright: oklch(95% 0.002 260); --gold: oklch(74% 0.095 74); --gold-deep: oklch(56% 0.08 70); --hairline: oklch(100% 0 0 / 9%);
    --hairline-2: oklch(100% 0 0 / 14%);
    --glass-bg: oklch(20% 0.006 260 / 52%); --glass-border: oklch(100% 0 0 / 12%);
    --glass-hi: oklch(100% 0 0 / 14%); --glass-shadow: 0 8px 40px oklch(0% 0 0 / 0.55);
    --card: oklch(20% 0.006 260 / 60%); --code-bg: oklch(11% 0.005 260);
    --grain-opacity: 0.04; --grain-blend: overlay;
  }
  html[data-theme="light"]{
    --bg: oklch(92% 0.004 260); --bg-2: oklch(96% 0.003 260);
    --fg: oklch(26% 0.008 260); --fg-strong: oklch(18% 0.008 260);
    --fg-muted: oklch(46% 0.008 260); --fg-faint: oklch(58% 0.006 260);
    --accent: oklch(58% 0.012 260); --accent-deep: oklch(48% 0.012 260); --accent-bright: oklch(72% 0.008 260); --gold: oklch(60% 0.10 72); --gold-deep: oklch(48% 0.09 68); --hairline: oklch(0% 0 0 / 10%);
    --hairline-2: oklch(0% 0 0 / 16%);
    --glass-bg: oklch(100% 0 0 / 55%); --glass-border: oklch(0% 0 0 / 8%);
    --glass-hi: oklch(100% 0 0 / 75%); --glass-shadow: 0 8px 32px oklch(40% 0.01 260 / 0.18);
    --card: oklch(96% 0.003 260 / 75%); --code-bg: oklch(94% 0.004 260);
    --grain-opacity: 0.03; --grain-blend: multiply;
  }

  body{ background:var(--bg); color:var(--fg); font-family:"Inter",system-ui,sans-serif; transition:background .5s ease, color .5s ease; }
  :is(a, button, input, textarea, select, [data-navitem]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  html[data-theme="dark"] .ico-moon{ display:none; }
  html[data-theme="light"] .ico-sun{ display:none; }
  @keyframes navDrop { from { opacity:0; transform:translate(-50%, -16px); } to { opacity:1; transform:translate(-50%, 0); } }

  /* article typography */
  .prose p { margin:0 0 22px; font-size:18px; line-height:1.72; color:var(--fg); }
  .prose h2 { margin:56px 0 18px; font-weight:540; font-size:28px; line-height:1.2; letter-spacing:-0.02em; color:var(--fg-strong); scroll-margin-top:120px; }
  .prose h3 { margin:36px 0 12px; font-weight:530; font-size:20px; line-height:1.3; letter-spacing:-0.015em; color:var(--fg-strong); }
  .prose strong { color:var(--fg-strong); font-weight:600; }
  .prose a { color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in oklch, var(--accent) 40%, transparent); }
  .prose ul { margin:0 0 22px; padding-left:22px; }
  .prose li { font-size:18px; line-height:1.7; color:var(--fg); margin-bottom:9px; }
  .prose code { font-family:"IBM Plex Mono",monospace; font-size:0.92em; background:var(--code-bg); border:1px solid var(--hairline); border-radius:5px; padding:1px 6px; color:var(--fg-strong); }

  @media (max-width: 940px){
    .layout { grid-template-columns: 1fr !important; }
    .toc { display:none !important; }
  }
  @media (max-width:700px){
    nav{ left:10px !important; right:10px !important; top:12px !important; transform:none !important; width:auto !important; max-width:calc(100vw - 20px) !important; padding:6px !important; gap:2px !important; overflow-x:auto !important; justify-content:flex-start !important; scrollbar-width:none; }
    nav::-webkit-scrollbar{ display:none; }
    nav > a:first-child{ margin-right:0 !important; gap:0 !important; flex:0 0 auto; }
    nav > a:first-child span:last-child{ display:none; }
    nav > div{ gap:0 !important; flex:0 0 auto; }
    nav a{ white-space:nowrap; }
    nav > div a{ padding:7px 6px !important; font-size:12px !important; }
    nav button{ width:30px !important; height:30px !important; flex:0 0 auto; }
    @media (max-width:360px){ nav{ padding:5px !important; gap:1px !important; } nav > div a{ padding:7px 3px !important; font-size:10.75px !important; } nav button{ width:27px !important; height:27px !important; } }
  }


/* src/styles/security.css */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/Inter-Variable.ttf") format("truetype"); }
  @font-face { font-family:"IBM Plex Mono"; font-weight:400 450; font-style:normal; font-display:swap; src:url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
  @font-face { font-family:"IvyPresto"; font-weight:300; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Light.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Regular.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:italic; font-display:swap; src:url("/fonts/IvyPresto-Italic.otf") format("opentype"); }

  *, *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; }
  html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }

  html[data-theme="dark"]{
    --bg: oklch(14% 0.005 260);
    --bg-2: oklch(20% 0.006 260);
    --bg-3: oklch(25% 0.006 260);
    --fg: oklch(87% 0.003 260);
    --fg-strong: oklch(95% 0.002 260);
    --fg-muted: oklch(64% 0.006 260);
    --fg-faint: oklch(50% 0.006 260);
    --accent: oklch(86% 0.004 260);
    --accent-deep: oklch(62% 0.008 260);
    --accent-bright: oklch(95% 0.002 260);
    --gold: oklch(74% 0.095 74);
    --gold-deep: oklch(56% 0.08 70);
    --gold-bright: oklch(82% 0.085 78);
    --green: oklch(72% 0.14 150);
    --hairline: oklch(28% 0.006 260);
    --glass-bg: oklch(20% 0.006 260 / 55%);
    --glass-border: oklch(100% 0 0 / 12%);
    --glass-hi: oklch(100% 0 0 / 14%);
    --glass-shadow: 0 8px 40px oklch(0% 0 0 / 0.55);
    --grain-opacity: 0.04;
    --grain-blend: overlay;
  }
  html[data-theme="light"]{
    --bg: oklch(92% 0.004 260);
    --bg-2: oklch(96% 0.003 260);
    --bg-3: oklch(88% 0.004 260);
    --fg: oklch(26% 0.008 260);
    --fg-strong: oklch(18% 0.008 260);
    --fg-muted: oklch(46% 0.008 260);
    --fg-faint: oklch(64% 0.006 260);
    --accent: oklch(58% 0.012 260);
    --accent-deep: oklch(48% 0.012 260);
    --accent-bright: oklch(72% 0.008 260);
    --gold: oklch(60% 0.10 72);
    --gold-deep: oklch(48% 0.09 68);
    --gold-bright: oklch(74% 0.09 76);
    --green: oklch(55% 0.14 150);
    --hairline: oklch(0% 0 0 / 11%);
    --glass-bg: oklch(100% 0 0 / 55%);
    --glass-border: oklch(0% 0 0 / 8%);
    --glass-hi: oklch(100% 0 0 / 75%);
    --glass-shadow: 0 8px 32px oklch(40% 0.01 260 / 0.18);
    --grain-opacity: 0.035;
    --grain-blend: multiply;
  }

  body{ background:var(--bg); color:var(--fg); font-family:"Inter",system-ui,sans-serif; transition:background .5s ease, color .5s ease; }
  :is(a, button, input, textarea, select, [data-navitem]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  html[data-theme="dark"] .ico-moon{ display:none; }
  html[data-theme="light"] .ico-sun{ display:none; }

  @keyframes navDrop { from { opacity:0; transform:translate(-50%, -16px); } to { opacity:1; transform:translate(-50%, 0); } }
  @keyframes secReveal { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
  @keyframes gridPan { from { background-position:0 0; } to { background-position:44px 44px; } }
  @keyframes feedIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  @media (max-width:700px){
    nav{ left:10px !important; right:10px !important; top:12px !important; transform:none !important; width:auto !important; max-width:calc(100vw - 20px) !important; padding:6px !important; gap:2px !important; overflow-x:auto !important; justify-content:flex-start !important; scrollbar-width:none; }
    nav::-webkit-scrollbar{ display:none; }
    nav > a:first-child{ margin-right:0 !important; gap:0 !important; flex:0 0 auto; }
    nav > a:first-child span:last-child{ display:none; }
    nav > div{ gap:0 !important; flex:0 0 auto; }
    nav a{ white-space:nowrap; }
    nav > div a{ padding:7px 6px !important; font-size:12px !important; }
    nav button{ width:30px !important; height:30px !important; flex:0 0 auto; }
    @media (max-width:360px){ nav{ padding:5px !important; gap:1px !important; } nav > div a{ padding:7px 3px !important; font-size:10.75px !important; } nav button{ width:27px !important; height:27px !important; } }
    [data-screen-label="Enterprise security"] section{ padding-left:24px !important; padding-right:24px !important; }
    [data-screen-label="Enterprise security"] section#top{ grid-template-columns:1fr !important; padding-top:112px !important; gap:28px !important; }
    [data-screen-label="Enterprise security"] section#top > div{ max-width:100% !important; }
    [data-screen-label="Enterprise security"] section[style*="display:grid"], [data-screen-label="Enterprise security"] section[style*="display: grid"], [data-screen-label="Enterprise security"] section[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
    [data-screen-label="Enterprise security"] section > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
    [data-screen-label="Enterprise security"] section > div[style*="grid-template-columns"] > *{ border-right:none !important; }
    [data-screen-label="Enterprise security"] [style*="grid-template-columns:clamp(150px"]{ grid-template-columns:1fr !important; gap:10px !important; }
    [data-screen-label="Enterprise security"] [style*="justify-content:space-between"]{ align-items:flex-start !important; flex-wrap:wrap !important; }
    [data-screen-label="Enterprise security"] [style*="justify-content:space-between"] > span:first-child{ flex:1 1 150px !important; min-width:0 !important; }
    [data-screen-label="Enterprise security"] footer > div{ grid-template-columns:1fr !important; }
  }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }


/* src/styles/sales.css */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/Inter-Variable.ttf") format("truetype"); }
  @font-face { font-family:"IBM Plex Mono"; font-weight:400 450; font-style:normal; font-display:swap; src:url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
  @font-face { font-family:"IvyPresto"; font-weight:300; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Light.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/IvyPresto-Regular.otf") format("opentype"); }
  @font-face { font-family:"IvyPresto"; font-weight:400; font-style:italic; font-display:swap; src:url("/fonts/IvyPresto-Italic.otf") format("opentype"); }
  *, *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; }
  html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  html[data-theme="dark"]{
    --bg: oklch(14% 0.005 260); --bg-2: oklch(20% 0.006 260);
    --fg: oklch(87% 0.003 260); --fg-strong: oklch(95% 0.002 260);
    --fg-muted: oklch(64% 0.006 260); --fg-faint: oklch(50% 0.006 260);
    --accent: oklch(86% 0.004 260); --accent-deep: oklch(62% 0.008 260); --accent-bright: oklch(95% 0.002 260); --accent-solid: oklch(91% 0.004 260); --gold: oklch(74% 0.095 74); --gold-deep: oklch(56% 0.08 70); --gold-bright: oklch(82% 0.085 78);
    --hairline: oklch(28% 0.006 260);
    --glass-bg: oklch(20% 0.006 260 / 55%); --glass-border: oklch(100% 0 0 / 12%); --glass-hi: oklch(100% 0 0 / 14%);
    --grain-opacity: 0.04; --grain-blend: overlay;
  }
  html[data-theme="light"]{
    --bg: oklch(92% 0.004 260); --bg-2: oklch(96% 0.003 260);
    --fg: oklch(26% 0.008 260); --fg-strong: oklch(18% 0.008 260);
    --fg-muted: oklch(46% 0.008 260); --fg-faint: oklch(64% 0.006 260);
    --accent: oklch(58% 0.012 260); --accent-deep: oklch(48% 0.012 260); --accent-bright: oklch(72% 0.008 260); --accent-solid: oklch(72% 0.008 260); --gold: oklch(60% 0.10 72); --gold-deep: oklch(48% 0.09 68); --gold-bright: oklch(74% 0.09 76);
    --hairline: oklch(0% 0 0 / 11%);
    --glass-bg: oklch(100% 0 0 / 55%); --glass-border: oklch(0% 0 0 / 8%); --glass-hi: oklch(100% 0 0 / 75%);
    --grain-opacity: 0.03; --grain-blend: multiply;
  }
  body{ background:var(--bg); color:var(--fg); font-family:"Inter",system-ui,sans-serif; transition:background .4s ease, color .4s ease; }
  :is(a, button, input, textarea, select, [data-navitem]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  html[data-theme="dark"] .ico-moon{ display:none; }
  html[data-theme="light"] .ico-sun{ display:none; }
  input, textarea, select { font-family:inherit; }
  input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent) !important; }
  ::placeholder { color:var(--fg-faint); }
  @media (max-width:700px){
    nav{ left:10px !important; right:10px !important; top:12px !important; transform:none !important; width:auto !important; max-width:calc(100vw - 20px) !important; padding:6px !important; gap:2px !important; overflow-x:auto !important; justify-content:flex-start !important; scrollbar-width:none; }
    nav::-webkit-scrollbar{ display:none; }
    nav > a:first-child{ margin-right:0 !important; gap:0 !important; flex:0 0 auto; }
    nav > a:first-child span:last-child{ display:none; }
    nav > div{ gap:0 !important; flex:0 0 auto; }
    nav a{ white-space:nowrap; }
    nav > div a{ padding:7px 6px !important; font-size:12px !important; }
    nav button{ width:30px !important; height:30px !important; flex:0 0 auto; }
    @media (max-width:360px){ nav{ padding:5px !important; gap:1px !important; } nav > div a{ padding:7px 3px !important; font-size:10.75px !important; } nav button{ width:27px !important; height:27px !important; } }
    [data-screen-label="Contact sales"] section{ grid-template-columns:1fr !important; padding:112px 24px 72px !important; gap:28px !important; }
    [data-screen-label="Contact sales"] form{ width:100% !important; max-width:100% !important; }
    [data-screen-label="Contact sales"] [data-fields] > div{ grid-template-columns:1fr !important; }
  }