:root{
    --navy:#0b418c;
    --ink:#161616;
    --ink-border:#2a2a2a;
    --paper:#ffffff;
    --paper-tint:#f5f6f8;
    --line:#e1e4ea;
    --text:#161616;
    --text-mute:#6e6e6e;
    --text-invert:#f5f5f7;
    --text-invert-mute:#9a9a9a;
    --warn:#b5261e;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);
    color:#fff;padding:12px 20px;font-size:15px;font-weight:600;}
  .skip-link:focus{left:16px;top:16px;}
  /* touch targets: 44px min on coarse pointers */
  @media (pointer:coarse){
    nav a,.link-row a,.footer-links a,.switch-link,.lang-switch button{
      min-height:44px;display:inline-flex;align-items:center;}
    /* Not inline-flex: a select and the burger have their own box models. */
    select{min-height:44px;}
    .hamburger{min-height:44px;min-width:44px;justify-content:center;}
  }
  /* current page indicator */
  nav a[aria-current="page"]{color:var(--navy);font-weight:600;}

  body{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--text);
    background:var(--paper);
    font-variant-numeric:tabular-nums;
    line-height:1.5;
    font-size:17px;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:none;padding:0 64px;}
  section{padding:96px 0;}
  h1,h2,h3{font-weight:600;letter-spacing:-0.01em;}
  .kicker{
    font-size:15px;font-weight:600;letter-spacing:.14em;
    color:var(--navy);text-transform:uppercase;margin-bottom:16px;
  }
  .kicker.invert{color:#6f9adb;}
  .section-head{max-width:640px;margin-bottom:48px;}
  .section-head h2{font-size:32px;margin-bottom:12px;}
  .section-head p{color:var(--text-mute);font-size:18px;}
  section.dark .section-head p{color:var(--text-invert-mute);}
  section.dark{background:var(--ink);color:var(--text-invert);}
  section.dark h2{color:var(--text-invert);}
  .link-row{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;}
/* The page names processes that are documented elsewhere; the chips carry the
   reader to the exact passage rather than to the top of the technology page.
   Beside the sentence, never inside it: i18n keys on whole text nodes. */
.sol-refs{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-top:22px;}
.sol-refs-label{font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--text-mute);opacity:.75;margin-right:2px;white-space:nowrap;}
.sol-refs a{font-size:14px;font-weight:500;color:var(--navy);text-decoration:none;
  padding:5px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease),
    box-shadow .25s var(--ease),transform .25s var(--ease);}
section.dark .sol-refs a{color:var(--text-invert);border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);}
section.dark .sol-refs-label{color:var(--text-invert-mute);}
@media (hover:hover) and (pointer:fine){
  .sol-refs a:hover{border-color:rgba(11,65,140,.28);
    background-image:linear-gradient(135deg,rgba(190,210,240,.42),rgba(255,255,255,.15) 60%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
      inset 0 -6px 10px -6px rgba(70,100,160,.25),0 6px 20px rgba(20,40,80,.16);
    transform:translateY(-1px);}
}
@media (max-width:640px){.sol-refs a{padding:5px 11px;}}

  /* The block's own call to action was the only navigational element left as
   plain text, which put it below the small further-reading chips sitting
   directly above it -- the secondary references outweighed the primary move.
   Same pill and same lens as every other button, one size up from the chips. */
.link-row a{display:inline-flex;align-items:center;font-size:15.5px;font-weight:600;
  color:var(--navy);padding:9px 18px;border-radius:999px;
  border:1px solid rgba(11,65,140,.26);background:var(--paper);
  /* the arrow lives inside the label, so the only lever on its gap is the space before it */
  word-spacing:2px;white-space:nowrap;}
  .link-row a:hover{border-color:rgba(11,65,140,.42);}
  section.dark .link-row a{color:var(--text-invert);
  border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.06);}
section.dark .link-row a:hover{border-color:rgba(255,255,255,.42);}

  /* Enquiry hierarchy, step 1 of 2: `.link-row a` (0,2,0) outranks `.btn` (0,1,0),
     which silently flattened every primary button inside a link row into the same
     ghost pill as the secondary links. Restore the two ranks explicitly. */
  .link-row a.btn{background:var(--navy);color:#fff;border:1px solid transparent;
    padding:11px 22px;font-size:14px;}
  .link-row a.btn.btn-outline{background:transparent;color:var(--navy);
    border-color:rgba(11,65,140,.36);}
  section.dark .link-row a.btn{background:var(--navy);color:#fff;border-color:transparent;}
  section.dark .link-row a.btn.btn-outline{background:transparent;color:var(--text-invert);
    border-color:rgba(255,255,255,.32);}
  @media (hover:hover) and (pointer:fine){
    .link-row a.btn:hover{background:#12539f;border-color:transparent;}
    .link-row a.btn.btn-outline:hover{background:transparent;border-color:rgba(11,65,140,.6);}
    section.dark .link-row a.btn.btn-outline:hover{border-color:rgba(255,255,255,.6);}
  }

  /* ---- Language switch ---- */
  .lang-switch{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:600;
    letter-spacing:.04em;}
  .lang-switch button{background:none;border:none;cursor:pointer;font:inherit;
    color:var(--text-mute);padding:7px 11px;border-radius:999px;
    transition:color .2s var(--ease), background-color .2s var(--ease);}
  .lang-switch button[aria-pressed="true"]{color:var(--navy);background:rgba(11,65,140,.09);}
  .lang-switch .sep{color:#9aa1b0;}
  @media (hover:hover) and (pointer:fine){
    .lang-switch button:hover{color:var(--navy);}
  }
  .mobile-nav .lang-switch{padding:12px;border-top:1px solid var(--line);margin-top:4px;}
  html:is([lang="zh-Hant"],[lang="zh-Hans"]) body{font-family:"Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,
    "PingFang TC","Microsoft JhengHei",sans-serif;}
  html[lang="zh-Hans"] body{font-family:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,
    "PingFang SC","Microsoft YaHei",sans-serif;}
  html:is([lang="zh-Hant"],[lang="zh-Hans"]) .hero-block h1{letter-spacing:.01em;}
  /* Chinese has no spaces, so the browser may break between any two characters:
     記憶|體 split across lines and 台 left alone on the last one. Break only at
     spaces and punctuation, fall back to any character only when a phrase
     cannot fit, and keep the last line from being a single character. Table
     cells are left out: there "anywhere" squeezes columns until mSATA splits. */
  html:is([lang="zh-Hant"],[lang="zh-Hans"]) :is(h1,h2,h3,h4,p,li,dt,dd,figcaption,label,summary){
    word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty;}

  /* ---- Nav (floating frosted pill, à la nakesign.pages.dev) ---- */
  header{position:sticky;top:16px;z-index:20;}
  .navbar{position:relative;
    display:flex;align-items:center;justify-content:space-between;height:64px;
    background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    border:1px solid rgba(20,20,30,.06);border-radius:999px;overflow:hidden;
    box-shadow:0 8px 30px rgba(20,30,50,.08);
    padding:0 8px 0 28px;
  }
  .navbar .btn{margin-right:8px;}
  .logo{position:relative;z-index:1;font-weight:700;font-size:18px;letter-spacing:-.01em;display:inline-flex;
    align-items:center;transition:opacity .2s var(--ease);}
  .logo:hover{opacity:.72;}
  .logo:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:2px;}
  .logo img{height:26px;width:auto;display:block;}
  .footer-top .brand img,
  .footer-org .brand img{width:164px;max-width:100%;height:auto;display:block;
    opacity:.92;}
  nav{position:relative;z-index:1;}
  nav ul{display:flex;gap:2px;list-style:none;align-items:center;}
  nav a{font-size:15px;font-weight:500;color:var(--text);position:relative;z-index:1;
    padding:8px 16px;border-radius:999px;display:inline-block;
    transition:color .25s ease;}
  nav a:hover,nav a:focus-visible{color:var(--navy);}
  .nav-lens{position:absolute;top:0;left:0;height:0;width:0;
    border-radius:999px;pointer-events:none;z-index:0;opacity:0;
    background:linear-gradient(135deg,rgba(190,210,240,.4),rgba(255,255,255,.14) 60%);
    backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);
    border:1px solid rgba(255,255,255,.4);
    box-shadow:0 4px 18px rgba(20,40,80,.14), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -6px 10px -6px rgba(70,100,160,.25);
    transition:left .5s cubic-bezier(.22,1.4,.36,1), top .5s cubic-bezier(.22,1.4,.36,1),
      width .5s cubic-bezier(.22,1.4,.36,1), height .5s cubic-bezier(.22,1.4,.36,1),
      opacity .3s ease;}
  .nav-right{position:relative;z-index:1;display:flex;align-items:center;gap:20px;}
  .switch-link{font-size:14px;color:var(--text-mute);}
  /* Padding so the shared lens reads as a pill here too, not a sliver. */
  .nav-right .switch-link{padding:8px 13px;border-radius:999px;}
  .switch-link:hover{color:var(--navy);}
  .footer-bottom .switch-link{color:#6a6a6a;}
  .footer-bottom .switch-link:hover{color:#fff;}
  .mobile-nav .switch-link{
    display:block;padding:14px 12px;font-size:14px;font-weight:500;color:var(--text-mute);
    border-bottom:none;border-top:1px solid var(--line);margin-top:4px;
  }
  .btn{
    display:inline-block;background:var(--navy);color:#fff;
    padding:11px 22px;font-size:14px;font-weight:600;border:none;border-radius:999px;
    cursor:pointer;letter-spacing:.01em;
  }
  .btn-outline{background:transparent;border:1px solid var(--text-invert-mute);color:var(--text-invert);}

  /* ---- Hero ---- */
  .hero{padding:0;}
  .hero-block{background:var(--ink);margin-bottom:0;padding:160px 0 80px;
    position:relative;overflow:hidden;}
  .hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;
    pointer-events:none;}
  .hero-block .inner{max-width:none;padding:0 64px;position:relative;z-index:1;}
  .hero-block h1{font-size:68px;line-height:1.12;max-width:820px;color:#c7c9d1;font-weight:600;}
  .hero-sub{font-size:19px;color:var(--text-invert-mute);max-width:560px;margin-top:20px;}
  .hero-corner{position:absolute;width:28px;height:28px;border-color:#6f9adb;opacity:.45;z-index:1;pointer-events:none;}
  .hero-corner.tl{top:40px;left:40px;border-top:1px solid;border-left:1px solid;}
  .hero-corner.tr{top:40px;right:40px;border-top:1px solid;border-right:1px solid;}
  .hero-corner.bl{bottom:40px;left:40px;border-bottom:1px solid;border-left:1px solid;}
  .hero-corner.br{bottom:40px;right:40px;border-bottom:1px solid;border-right:1px solid;}
  @media (max-width:860px){.hero-corner{display:none;}}
  /* ---- Hero "Precision Lock": misaligned -> optical validation pass -> locked stillness ---- */
  .hero-main{display:flex;gap:64px;align-items:center;}
  .hero-text{flex:1;min-width:0;}
  .hero-qual{width:400px;flex-shrink:0;}
  .q-frame{position:relative;padding:26px;background:rgba(255,255,255,.03);
    border:1px solid var(--ink-border);overflow:hidden;}
  /* Initial: products sit at subtly different depths, not perfectly aligned */
  .q-tile{position:relative;background:var(--paper-tint);border:1px solid rgba(255,255,255,.08);padding:20px 24px;
    opacity:0;transform:translate(-4px,3px) rotate(-.3deg) scale(.995);
    transition:opacity .7s ease, transform 1.3s cubic-bezier(.22,1,.36,1), box-shadow 1.2s ease;}
  .q-tile + .q-tile{margin-top:14px;transform:translate(5px,8px) rotate(.35deg) scale(.99);}
  .q-tile img{width:100%;height:auto;display:block;}
  .hero-qual.run .q-tile{opacity:1;}
  /* Validation pass pulls each product into exact alignment as the glass crosses it */
  .hero-qual.validating .q-tile{transform:none;transition-delay:0s,.25s,0s;}
  .hero-qual.validating .q-tile + .q-tile{transition-delay:0s,.6s,0s;}
  /* Locked: shadows stabilize, lighting calms */
  .hero-qual.locked .q-tile{box-shadow:0 8px 22px rgba(0,0,0,.4);}
  /* Component-level responses while the glass passes: edge trace + IC-zone glow (::before), connector strip (::after) */
  .q-tile::before{content:'';position:absolute;inset:0;pointer-events:none;
    border:1px solid rgba(111,154,219,0);
    background:radial-gradient(ellipse 46% 34% at 50% 46%,rgba(160,195,245,0),transparent 70%);}
  .q-tile::after{content:'';position:absolute;left:10%;right:10%;bottom:8px;height:12px;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(160,195,245,0),transparent 72%);}
  .hero-qual.validating .q-tile:nth-child(1)::before{animation:q-edge .45s ease .5s;}
  .hero-qual.validating .q-tile:nth-child(1)::after{animation:q-conn .4s ease .8s;}
  .hero-qual.validating .q-tile:nth-child(2)::before{animation:q-edge .45s ease .9s;}
  .hero-qual.validating .q-tile:nth-child(2)::after{animation:q-conn .4s ease 1.15s;}
  @keyframes q-edge{
    35%{border-color:rgba(111,154,219,.55);
      background:radial-gradient(ellipse 46% 34% at 50% 46%,rgba(160,195,245,.22),transparent 70%);}
    100%{border-color:rgba(111,154,219,0);
      background:radial-gradient(ellipse 46% 34% at 50% 46%,rgba(160,195,245,0),transparent 70%);}}
  @keyframes q-conn{
    40%{background:radial-gradient(ellipse at center,rgba(160,195,245,.38),transparent 72%);}
    100%{background:radial-gradient(ellipse at center,rgba(160,195,245,0),transparent 72%);}}
  /* Optical validation glass: a translucent plate of material, not a UI card */
  .q-glass{position:absolute;top:-8%;bottom:-8%;left:14%;width:44%;pointer-events:none;
    transform:skewX(-7deg);opacity:0;
    background:linear-gradient(100deg,rgba(190,208,238,.14),rgba(255,255,255,.05) 45%,rgba(190,208,238,.10));
    backdrop-filter:blur(2.5px) saturate(130%);-webkit-backdrop-filter:blur(2.5px) saturate(130%);
    border-left:1px solid rgba(255,255,255,.32);border-right:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 34px rgba(140,175,230,.10);
    transition:opacity .6s ease;}
  .hero-qual.run .q-glass{opacity:1;}
  .hero-qual.validating .q-glass{animation:q-glasspass 1.6s cubic-bezier(.5,.05,.3,1) forwards;}
  @keyframes q-glasspass{
    0%{transform:skewX(-7deg) translateX(0);opacity:1;}
    80%{opacity:1;}
    100%{transform:skewX(-7deg) translateX(310px);opacity:0;}}
  .hero-qual.done .q-frame{animation:q-breathe 14s ease-in-out infinite;}
  @keyframes q-breathe{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
  .hero-block h1{transition:color 1.2s ease;}
  .hero-block.hero-settled h1{color:#e2e4ea;}
  @media (max-width:1100px){
    .hero-main{flex-direction:column;align-items:flex-start;gap:48px;}
    .hero-qual{width:100%;max-width:420px;}
  }
  @media (prefers-reduced-motion:reduce){
    .q-tile,.q-tile + .q-tile{opacity:1;transform:none;transition:none;}
    .hero-qual.validating .q-tile::before,.hero-qual.validating .q-tile::after{animation:none;}
    .hero-qual.validating .q-glass{animation:none;}
    .q-glass{opacity:0 !important;}
    .hero-qual.done .q-frame{animation:none;}
    .hero-block h1{transition:none;}
  }

  .hero-cta-row{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}
  .hero-cta-row .hero-btn{border-radius:999px;text-transform:uppercase;letter-spacing:.07em;
    font-size:16px;font-weight:600;padding:14px 28px;}
  .promise-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-border);margin-top:20px;}
  .promise-card{background:var(--ink);color:var(--text-invert);padding:28px;min-height:150px;
    display:flex;flex-direction:column;justify-content:flex-start;}
  .promise-card .icon{color:#6f9adb;margin-bottom:18px;}
  .promise-card .icon svg{display:block;width:26px;height:26px;}
  .promise-card .line{font-size:20px;font-weight:600;}
  .promise-card .sub{font-size:15px;color:var(--text-invert-mute);margin-top:8px;}
  @keyframes cue-bounce{0%,100%{transform:translateY(0);opacity:.6;}50%{transform:translateY(6px);opacity:1;}}

  /* ---- Solutions (entry-point self-identification, right after Hero) ---- */
  .solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
  .solution-card{background:#fff;padding:24px 20px;}
  .solution-card h3{font-size:16px;margin-bottom:12px;}

  /* ---- Product ---- */
  .filter-bar{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap;align-items:center;}
  .filter-bar select{
    border:1px solid var(--line);padding:9px 12px;font-size:14px;background:#fff;
    font-family:inherit;color:var(--text);
  }
  .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .product-card{border:1px solid var(--line);padding:24px;transition:opacity .2s;}

  .product-card .photo-ph{aspect-ratio:1/1;height:auto;margin-bottom:24px;}

  .photo-real{background:var(--paper-tint);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;padding:24px;}
  .photo-real img{height:22%;width:auto;max-width:100%;object-fit:contain;}
  .featured-product .photo-real img{height:30%;}

  .featured-product{display:grid;grid-template-columns:40% 1fr;gap:72px;align-items:center;
    margin:0 0 88px;}
  .featured-product .photo-ph{aspect-ratio:1/1;height:auto;width:100%;max-width:440px;margin:0 auto;}
  .featured-product .copy .kicker{margin-bottom:12px;}
  .featured-product h3{font-size:32px;margin-bottom:20px;}
  .featured-product ul{list-style:none;margin-bottom:28px;}
  .featured-product li{font-size:17px;padding:10px 0;border-top:1px solid var(--line);}
  .featured-product li:first-child{border-top:none;}
  .featured-product li b{color:var(--text-mute);font-weight:500;margin-right:8px;}
  @media (max-width:960px){.featured-product{grid-template-columns:1fr;}}
  .product-card h3{font-size:22px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline;}
  .spec-row{display:flex;justify-content:space-between;font-size:16px;padding:8px 0;border-top:1px solid var(--line);}
  .spec-row span:first-child{color:var(--text-mute);}
  .product-card.hidden{display:none;}

  /* ---- Applications ---- */
  .app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .app-card{background:#fff;border:1px solid var(--line);padding:24px;}
  .app-card .app-photo{aspect-ratio:4/3;height:auto;margin-bottom:20px;overflow:hidden;}
  .app-card .app-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .app-photo-soft{background:linear-gradient(135deg,#eef1f6,#dde3ec);
    display:flex;align-items:center;justify-content:center;}
  .app-photo-soft svg{width:36px;height:36px;color:#a9b4cc;}
  .app-card h3{font-size:18px;margin-bottom:8px;}
  .app-card p{font-size:16px;color:var(--text-mute);}

  .manufacturing-band{aspect-ratio:10/3;height:auto;margin-top:40px;overflow:hidden;}
  .manufacturing-band img{width:100%;height:100%;object-fit:cover;display:block;}

  /* ---- Capability ribbon (Applications → Testing bridge) ---- */
  .cap-ribbon-section{padding:64px 0;}
  .cap-ribbon{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-border);margin-top:20px;}
  .cap-item{background:var(--ink);padding:26px 20px;text-align:center;}
  .cap-label{font-size:17px;font-weight:600;color:var(--text-invert);letter-spacing:-.01em;}
  .cap-copy{text-align:center;color:var(--text-invert-mute);font-size:17px;max-width:620px;
    margin:28px auto 0;}
  @media (max-width:860px){.cap-ribbon{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.cap-ribbon{grid-template-columns:1fr;}}

  /* ---- Success stories ---- */
  .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .case-card{border:1px solid var(--line);padding:24px;}
  .case-card .case-photo{aspect-ratio:3/2;height:auto;margin-bottom:20px;overflow:hidden;}
  .case-card .case-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .case-card .tag{font-size:22px;font-weight:600;color:var(--navy);letter-spacing:-.01em;
    line-height:1.25;margin-bottom:16px;}
  .case-card dl{font-size:17px;}
  .case-card dt{color:var(--navy);margin-top:18px;font-size:17px;font-weight:700;
    letter-spacing:.01em;}
  .case-card dt:first-of-type{margin-top:0;}
  .case-card dd{margin-top:5px;font-size:17px;line-height:1.6;color:var(--text-mute);}

  /* ---- Testing ---- */
  .flow-progress{height:2px;background:var(--ink-border);margin-bottom:1px;overflow:hidden;}
  .flow-progress-bar{height:100%;width:0;background:#6f9adb;transition:width 1.3s cubic-bezier(.4,0,.2,1);}
  .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-border);margin-bottom:40px;}
  #qcFlow{grid-template-columns:repeat(5,1fr);}
  .flow .node{background:var(--ink);padding:26px 20px;min-height:170px;}
  #qcFlow .node{opacity:.35;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease;}
  #qcFlow .node.active{opacity:1;transform:translateY(0);}
  #qcFlow .node.pulse{animation:node-pulse .6s ease;}
  @keyframes node-pulse{0%{box-shadow:inset 0 0 0 0 rgba(111,154,219,.5);}100%{box-shadow:inset 0 0 0 2px rgba(111,154,219,0);}}
  .flow .node .n{font-size:15px;color:#6f9adb;font-weight:700;margin-bottom:10px;}
  .flow .node .t{font-size:19px;font-weight:600;margin-bottom:12px;}
  .flow .node .d{font-size:15px;color:var(--text-invert-mute);}
  @media (min-width:861px) and (max-width:1024px){.flow,#qcFlow{grid-template-columns:repeat(3,1fr);}}
  @media (prefers-reduced-motion:reduce){
    #qcFlow .node{opacity:1;transform:none;transition:none;}
    #qcFlow .node.pulse{animation:none;}
    .flow-progress-bar{transition:none;}
  }

  /* ---- Support ---- */
  .support-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .support-card{border:1px solid var(--line);padding:24px;text-align:left;display:block;
    position:relative;overflow:hidden;cursor:pointer;
    background:#fff;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
  .support-card::before{content:'';position:absolute;inset:0;background:var(--navy);
    transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0;}
  .support-card::after{content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);
    opacity:0;transition:opacity .3s ease;z-index:1;pointer-events:none;}
  .support-card .icon,.support-card h3,.support-card .soon{position:relative;z-index:2;}
  .support-card .icon{color:var(--navy);margin-bottom:16px;transition:color .25s ease;}
  .support-card .icon svg{display:block;width:24px;height:24px;}
  .support-card h3{font-size:17px;margin-bottom:8px;transition:color .25s ease;}
  .support-card .soon{font-size:14px;color:var(--text-mute);letter-spacing:.04em;text-transform:uppercase;
    transition:color .25s ease, transform .25s ease;}
  .support-card .soon::after{content:'→';display:inline-block;margin-left:4px;
    transition:transform .25s ease;}
  .support-card:hover{border-color:var(--navy);transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(11,65,140,.18);}
  .support-card:hover::before{transform:translateY(0);}
  .support-card:hover::after{opacity:1;}
  .support-card:hover .icon,.support-card:hover h3,.support-card:hover .soon{color:#fff;}
  .support-card:hover .soon::after{transform:translateX(4px);}
  .support-card:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(11,65,140,.35);}

  /* ---- About (asymmetric, wordmark reveal) ---- */
  .about-section{background:var(--paper-tint);}
  .about-grid{display:grid;grid-template-columns:42% 1fr;gap:64px;align-items:center;}
  .about-logo-panel{background:var(--ink);aspect-ratio:3/4;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;}
  .about-logo-panel .hero-corner{opacity:.35;}
  .about-copy h2{font-size:32px;margin-bottom:16px;}
  .about-lede{font-size:21px;font-weight:600;line-height:1.35;margin-bottom:20px;}
  .about-body{color:var(--text-mute);font-size:17px;max-width:520px;margin-bottom:0;}
  .about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 24px;margin-top:32px;
    padding-top:24px;border-top:1px solid var(--line);}
  .about-stat .num{font-size:26px;font-weight:700;color:var(--navy);}
  .about-stat .lbl{font-size:15px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
  @media (max-width:860px){
    .about-grid{grid-template-columns:1fr;}
    .about-logo-panel{aspect-ratio:16/9;}
  }
  @media (max-width:520px){.about-stats{grid-template-columns:repeat(2,1fr);}}

  /* ---- News ---- */
  .news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  .news-card{border:1px solid var(--ink-border);padding:28px;}
  .news-card .kicker{margin-bottom:14px;}
  .news-card h3{font-size:21px;color:#fff;margin-bottom:10px;font-weight:600;}
  .news-card p{color:var(--text-invert-mute);font-size:16px;}
  @media (max-width:860px){.news-grid{grid-template-columns:1fr;}}

  /* ---- Footer ---- */
  footer{background:var(--ink);color:var(--text-invert-mute);padding:64px 0 32px;font-size:15px;}
  .footer-cta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
    padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--ink-border);}
  .footer-cta-text{font-size:19px;font-weight:600;color:var(--text-invert);max-width:520px;}
  .footer-cta .btn{background:transparent;border:1px solid rgba(255,255,255,.28);
    color:var(--text-invert);padding:10px 20px;font-size:14px;
    transition:border-color .25s var(--ease),background-color .25s var(--ease);}
  @media (hover:hover) and (pointer:fine){
    .footer-cta .btn:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);}
  }
  @media (prefers-reduced-motion:reduce){.footer-cta .btn{transition:none;}}
  .footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:40px;}
  .footer-top .brand{font-size:16px;font-weight:700;color:#fff;margin-bottom:12px;}
  /* The map owns the full row now, so fix the track count: auto-fit would make
     sixteen tracks at this width and stretch five columns of short links across
     all of it. */
  .footer-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;
    max-width:1500px;}
  .footer-links h3{font-size:15px;font-weight:700;color:#6f9adb;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
  .footer-links a{display:block;margin-bottom:8px;color:var(--text-invert-mute);}
  .footer-links a:hover{color:#fff;}
  .footer-consumer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;
    background:rgba(255,255,255,.04);border:1px solid var(--ink-border);padding:14px 20px;margin-bottom:24px;}
  .footer-consumer a{color:#6f9adb;font-weight:600;}
  .footer-consumer a:hover{color:#fff;}
  .footer-bottom{border-top:1px solid var(--ink-border);padding-top:24px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;}
  .footer-bottom a{color:var(--text-invert-mute);}
  .legal-soon{color:#5c6270;cursor:default;}
  .footer-bottom a:hover{color:#fff;}
  @media (max-width:960px){.footer-links{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:600px){.footer-links{grid-template-columns:repeat(2,1fr);}
    .footer-cta{flex-direction:column;align-items:flex-start;}}

  .hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;
    flex-direction:column;gap:5px;}
  .hamburger span{display:block;width:20px;height:2px;background:var(--text);}
  .mobile-nav{display:none;}

  @media (min-width:861px) and (max-width:1024px){
    .product-grid,.case-grid,.support-grid,.app-grid{grid-template-columns:repeat(2,1fr);}
  }

  @media (max-width:860px){
    .promise-row,.product-grid,.case-grid,.support-grid,.app-grid,.featured-product,.flow,#qcFlow{grid-template-columns:1fr;}
    .solutions-grid{grid-template-columns:repeat(2,1fr);}
    .hero-block h1{font-size:38px;}
    nav{display:none;}
    .hamburger{display:flex;}
    .mobile-nav{
      display:none;position:fixed;top:88px;left:16px;right:16px;z-index:19;
      background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.12);
      padding:12px;
    }
    .mobile-nav.open{display:block;}
    .mobile-nav a{display:block;padding:14px 12px;font-size:16px;font-weight:500;
      border-bottom:1px solid var(--line);}
    .mobile-nav a:last-child{border-bottom:none;}
  }

  /* ================= MOTION & MICRO-INTERACTION SYSTEM ================= */
  :root{--ease:cubic-bezier(.2,.8,.2,1);}

  /* ---- Scroll entrance (uses `translate` so hover `transform` never conflicts) ---- */
  [data-reveal]{opacity:0;translate:0 10px;
    transition:opacity .6s var(--ease) var(--d,0s), translate .6s var(--ease) var(--d,0s);}
  [data-reveal].in{opacity:1;translate:none;
    transition:opacity .6s var(--ease) var(--d,0s), translate .6s var(--ease) var(--d,0s),
      transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease),
      border-color .25s var(--ease), color .2s var(--ease);}
  [data-reveal="clip"]{opacity:1;translate:none;clip-path:inset(0 100% 0 0);
    transition:clip-path .8s var(--ease) var(--d,0s);}
  [data-reveal="clip"].in{clip-path:inset(0 0 0 0);}
  [data-reveal="line"]{opacity:1;translate:none;}
  /* Photo cards: image masks up from the bottom, copy follows ~120ms later */
  .app-card[data-reveal],.case-card[data-reveal]{opacity:1;translate:none;}
  .app-card[data-reveal] .app-photo,.case-card[data-reveal] .case-photo{
    clip-path:inset(100% 0 0 0);transition:clip-path .65s var(--ease) var(--d,0s);}
  .app-card[data-reveal].in .app-photo,.case-card[data-reveal].in .case-photo{clip-path:inset(0 0 0 0);}
  .app-card[data-reveal] h3,.app-card[data-reveal] p,
  .case-card[data-reveal] .tag,.case-card[data-reveal] dl{
    opacity:0;translate:0 8px;
    transition:opacity .5s var(--ease) calc(var(--d,0s) + .12s), translate .5s var(--ease) calc(var(--d,0s) + .12s);}
  .app-card[data-reveal].in h3,.app-card[data-reveal].in p,
  .case-card[data-reveal].in .tag,.case-card[data-reveal].in dl{opacity:1;translate:none;}
  /* Trust numbers: vertical mask reveal + baseline draw, no count-up */
  .about-stat[data-reveal]{opacity:1;translate:none;overflow:hidden;position:relative;padding-bottom:6px;}
  .about-stat[data-reveal] .num{translate:0 115%;transition:translate .55s var(--ease) var(--d,0s);}
  .about-stat[data-reveal] .lbl{opacity:0;transition:opacity .45s ease calc(var(--d,0s) + .22s);}
  .about-stat[data-reveal]::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
    background:var(--line);transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--ease) calc(var(--d,0s) + .28s);}
  .about-stat[data-reveal].in .num{translate:none;}
  .about-stat[data-reveal].in .lbl{opacity:1;}
  .about-stat[data-reveal].in::after{transform:scaleX(1);}
  /* Capability ribbon: shared track line draws, items reveal along it */
  .cap-ribbon{position:relative;}
  .cap-ribbon::before{content:'';position:absolute;top:-7px;left:0;right:0;height:1px;background:#6f9adb;
    opacity:.5;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);z-index:1;}
  .cap-ribbon.in::before{transform:scaleX(1);}
  /* SSD grid: technical line draws across the top edge before cards appear */
  .ssd-grid{position:relative;}
  .ssd-grid::before{content:'';position:absolute;top:-10px;left:0;right:0;height:1px;background:var(--navy);
    opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);}
  .ssd-grid.in::before{transform:scaleX(1);}
  /* Featured product: one directional reflection passes once on entrance */
  .featured-product .photo-real{position:relative;overflow:hidden;}
  .featured-product .photo-real::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;
    transform:skewX(-18deg);opacity:0;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(190,208,238,.22),transparent);}
  .featured-product[data-reveal].in .photo-real::after{animation:rv-sweep 1s var(--ease) .35s both;}
  @keyframes rv-sweep{0%{left:-60%;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{left:130%;opacity:0;}}
  .photo-real img{transition:transform .45s var(--ease);}

  /* ---- Environmental drift (ribbon section only; near-imperceptible) ---- */
  .cap-ribbon-section{position:relative;overflow:hidden;}
  .cap-ribbon-section::after{content:'';position:absolute;top:-40%;left:-15%;width:45%;height:180%;
    pointer-events:none;background:radial-gradient(ellipse,rgba(111,154,219,.05),transparent 65%);
    animation:env-drift 24s ease-in-out infinite alternate;}
  @keyframes env-drift{to{transform:translateX(140%);}}

  /* ---- Inline link / arrow micro-interaction ---- */
  .arr{display:inline-block;transition:transform .2s var(--ease);}
  a:hover .arr{transform:translateX(4px);}
  a:hover .arr.ext{transform:translate(2px,-2px);}
    /* The sliding underline belonged to a text link. On a pill it only served
     to paint a gradient over the fill, leaving the button transparent. */

  /* ---- Hero CTA pair: primary strong, secondary quiet ---- */
  .btn.hero-btn{position:relative;overflow:hidden;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .2s ease;}
  .btn-outline.hero-btn{position:relative;transition:color .2s ease, border-color .2s ease;}
  .footer-links a{transition:color .2s var(--ease);}

  /* ---- Desktop pointer hovers ---- */
  @media (hover:hover) and (pointer:fine){

    /* Solutions: exploration entry points, full-surface response + one reflection pass */
    .solution-card{position:relative;overflow:hidden;
      transition:background-color .28s var(--ease), transform .28s var(--ease),
        box-shadow .28s var(--ease);}
    .solution-card::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;
      transform:skewX(-18deg);opacity:0;pointer-events:none;
      background:linear-gradient(90deg,transparent,rgba(170,195,235,.20),transparent);}
    .solution-card:hover{background:#f3f6fb;transform:translateY(-2px);
      box-shadow:0 10px 22px rgba(20,40,80,.08);}
    .solution-card:hover::after{opacity:1;left:130%;transition:left .6s var(--ease), opacity .15s ease;}
    .solution-card h3{transition:transform .2s var(--ease);}
    .solution-card:hover h3{transform:translateX(2px);}

    /* Featured product: restrained scale */
    .featured-product:hover .photo-real img{transform:scale(1.02);}

    /* DRAM cards: image lifts, title to brand blue; informational, no cursor change */
    .product-card{transition:background-color .25s var(--ease), border-color .25s var(--ease);}
    .product-card[data-gen]:hover{background:#fafcff;border-color:#c9d4e6;}
    .product-card[data-gen] .photo-real img{transition:transform .35s var(--ease);}
    .product-card[data-gen]:hover .photo-real img{transform:translateY(-3px) scale(1.02);}
    .product-card[data-gen] h3{transition:color .2s ease;}
    .product-card[data-gen]:hover h3{color:var(--navy);}
    .product-card[data-gen]:hover .spec-row span:first-child{color:var(--text);}
    .spec-row span:first-child{transition:color .2s ease;}

    /* SSD cards: engineering hover, thin top indicator line, precise not playful */
    .product-card:not([data-gen]){position:relative;}
    .product-card:not([data-gen])::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
      background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
    .product-card:not([data-gen]):hover::before{transform:scaleX(1);}
    .product-card:not([data-gen]):hover{background:#fafbfd;}
    .product-card:not([data-gen]) h3{transition:transform .2s var(--ease);}
    .product-card:not([data-gen]):hover h3{transform:translateX(2px);}
    .product-card:not([data-gen]):hover .spec-row span{color:var(--text);}

    /* Applications photo cards: strongest image interaction */
    .app-card{transition:box-shadow .3s var(--ease), transform .3s var(--ease);}
    .app-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,30,50,.10);}
    .app-photo{position:relative;}
    .app-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(160deg,rgba(120,155,215,.12),transparent 55%);
      opacity:0;transition:opacity .35s var(--ease);}
    .app-card:hover .app-photo::after{opacity:1;}
    .app-photo img{transition:transform .5s var(--ease);}
    .app-card:hover .app-photo img{transform:scale(1.03) translateY(-2px);}
    .app-card h3{transition:color .2s ease;}
    .app-card:hover h3{color:var(--navy);}
    .app-card p{transition:transform .25s var(--ease);}
    .app-card:hover p{transform:translateY(-2px);}

    /* Capability ribbon: one connected system, hovered item bright, siblings dim */
    .cap-item{transition:opacity .25s var(--ease), background-color .25s var(--ease);position:relative;}
    .cap-ribbon:hover .cap-item{opacity:.6;}
    .cap-ribbon .cap-item:hover{opacity:1;background:#1c1c1c;}
    .cap-item::before{content:'';position:absolute;top:-7px;left:0;right:0;height:1px;background:#6f9adb;
      transform:scaleX(0);transition:transform .3s var(--ease);}
    .cap-item:hover::before{transform:scaleX(1);}
    .cap-label{transition:transform .22s var(--ease);}
    .cap-item:hover .cap-label{transform:translateY(-1px);}

    /* Success stories: alive but honest (no fake links) */
    .case-card{transition:transform .28s var(--ease), box-shadow .28s var(--ease);}
    .case-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,30,50,.12);}
    .case-photo img{transition:transform .5s var(--ease);}
    .case-card:hover .case-photo img{transform:scale(1.03);}
    .case-card .tag{transition:transform .2s var(--ease);}
    .case-card:hover .tag{transform:translateX(2px);}
    .case-card dt{transition:color .2s ease;}
    .case-card:hover dt{color:var(--navy);}

    /* Testing nodes: informational hover, no pointer cursor, no sequence restart */
    #qcFlow:hover .node.active{opacity:.75;}
    #qcFlow .node.active:hover{opacity:1;}
    .flow .node{position:relative;transition:background-color .25s var(--ease), opacity .25s ease;}
    .flow .node:hover{background:#1b1b1b;}
    .flow .node::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#6f9adb;
      transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
    .flow .node:hover::after{transform:scaleX(1);}
    .flow .node .t{transition:transform .22s var(--ease);}
    .flow .node:hover .t{transform:translateY(-2px);}
    .flow .node .d{transition:color .22s ease;}
    .flow .node:hover .d{color:#c4c6cd;}

    /* News previews: editorial response, not fake buttons */
    .news-card{transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);}
    .news-card:hover{border-color:#3a4150;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3);}
    .news-card .kicker{transition:color .2s ease;}
    .news-card:hover .kicker{color:#8fb3e8;}
    .news-card h3{transition:transform .22s var(--ease);}
    .news-card:hover h3{transform:translateX(2px);}

    /* About trust numbers: informational */
    .about-stat .num{transition:transform .2s var(--ease), translate .55s var(--ease) var(--d,0s);}
    .about-stat:hover .num{transform:scale(1.02);transform-origin:left bottom;}
    .about-stat .lbl{transition:color .2s ease, opacity .45s ease calc(var(--d,0s) + .22s);}
    .about-stat:hover .lbl{color:var(--text);}
    .about-stat:hover::after{background:#9db9e6;}

    /* Footer links */
    .footer-links a:hover{color:#fff;}
  }

  /* ---- Keyboard focus ---- */
  a:focus-visible,button:focus-visible,select:focus-visible{
    outline:2px solid #6f9adb;outline-offset:2px;}

  /* ---- Reduced motion: final states immediately, no choreography ---- */
  @media (prefers-reduced-motion:reduce){
    [data-reveal],[data-reveal] *{transition:none !important;animation:none !important;}
    [data-reveal]{opacity:1 !important;translate:none !important;clip-path:none !important;}
    .app-card[data-reveal] .app-photo,.case-card[data-reveal] .case-photo{clip-path:none !important;}
    .app-card[data-reveal] h3,.app-card[data-reveal] p,
    .case-card[data-reveal] .tag,.case-card[data-reveal] dl{opacity:1 !important;translate:none !important;}
    .about-stat[data-reveal] .num{translate:none !important;}
    .about-stat[data-reveal] .lbl{opacity:1 !important;}
    .about-stat[data-reveal]::after{transform:scaleX(1) !important;}
    .cap-ribbon::before,.ssd-grid::before{transform:scaleX(1) !important;}
    .cap-ribbon-section::after{animation:none !important;}
    .featured-product[data-reveal].in .photo-real::after{animation:none !important;}
  }

  /* ---- Mobile nav: the pill is overflow:hidden, so anything that does not
     fit gets clipped rather than wrapped. Shed the secondary controls into
     the drawer and give the page real edge padding. ---- */
  @media (max-width:1100px){
    .wrap,.hero-block .inner{padding:0 40px;}
  }
  @media (max-width:860px){
    .wrap,.hero-block .inner{padding:0 20px;}
    .navbar{padding:0 6px 0 16px;}
    .nav-right{gap:10px;}
    .nav-right .switch-link,.nav-right .lang-switch{display:none;}
    .navbar .btn{margin-right:4px;padding:10px 16px;font-size:14px;white-space:nowrap;}
    .hamburger span{transition:transform .22s var(--ease),opacity .18s ease;}
    .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .mobile-nav{max-height:calc(100dvh - 110px);overflow-y:auto;}
    .mobile-nav .btn{display:block;margin:12px;padding:14px 18px;text-align:center;
      border-radius:999px;font-size:16px;border-bottom:none;}
  }
  @media (max-width:520px){
    .wrap,.hero-block .inner{padding:0 16px;}
    .navbar{padding:0 6px 0 14px;}
    .navbar .btn{display:none;}
    .mobile-nav{top:84px;left:12px;right:12px;}
  }
  @media (prefers-reduced-motion:reduce){
    .hamburger span{transition:none;}
  }
  /* ---- Desktop mega menu: same material, type and pill hover as the navbar,
     so the site has one navigation language rather than two. The bar itself is
     overflow:hidden, so this sits outside it inside the sticky header. ---- */
  .mega{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:19;
    opacity:0;translate:0 -6px;pointer-events:none;visibility:hidden;
    transition:opacity .18s var(--ease), translate .18s var(--ease), visibility 0s linear .18s;}
  /* visibility, not just opacity: otherwise the closed panel's links stay in
     the tab order and focus lands on things nobody can see. */
  .mega.open{opacity:1;translate:none;pointer-events:auto;visibility:visible;
    transition:opacity .18s var(--ease), translate .18s var(--ease), visibility 0s;}
  .mega-map{position:relative;background:rgba(255,255,255,.82);
    backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
    border:1px solid rgba(20,20,30,.06);border-radius:26px;
    box-shadow:0 12px 40px rgba(20,30,50,.10);padding:26px 22px;
    display:grid;grid-template-columns:repeat(5,1fr);gap:0 12px;}
  .mega-col{position:relative;z-index:1;opacity:.55;transition:opacity .2s var(--ease);}
  .mega-col.is-active{opacity:1;}
  .mega-title{font-size:15px;font-weight:600;color:var(--text-mute);
    padding:8px 16px;margin-bottom:6px;}
  .mega-col.is-active .mega-title{color:var(--navy);}
  .mega-col a{display:block;padding:8px 16px;border-radius:999px;
    font-size:15px;font-weight:500;color:var(--text);line-height:1.4;}
  .mega-col a:hover,.mega-col a:focus-visible{color:var(--navy);}
  /* Same liquid-glass lens the top-level bar uses: one shared shape that glides
     between links, rather than a flat tint per item. */
  .mega-lens{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;
    pointer-events:none;z-index:0;opacity:0;
    background:linear-gradient(135deg,rgba(190,210,240,.4),rgba(255,255,255,.14) 60%);
    backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);
    border:1px solid rgba(255,255,255,.4);
    box-shadow:0 4px 18px rgba(20,40,80,.14), inset 0 1px 0 rgba(255,255,255,.65),
      inset 0 -6px 10px -6px rgba(70,100,160,.25);
    transition:left .5s cubic-bezier(.22,1.4,.36,1), top .5s cubic-bezier(.22,1.4,.36,1),
      width .5s cubic-bezier(.22,1.4,.36,1), height .5s cubic-bezier(.22,1.4,.36,1),
      opacity .3s ease;}
  @media (max-width:1240px){
    .mega-map{grid-template-columns:repeat(3,1fr);gap:18px 12px;}
  }
  @media (max-width:860px){.mega{display:none;}}
  @media (prefers-reduced-motion:reduce){
    .mega,.mega-col,.mega-lens{transition:none;}
  }
  @media (max-width:860px){.mega{display:none;}}
  @media (prefers-reduced-motion:reduce){
    .mega,.mega-col{transition:none;}
  }
  /* ---- Floating enquiry button. Replaces the quote button that used to sit
     in the navbar{position:fixed;right:24px;bottom:24px;z-index:30;
    display:inline-flex;align-items:center;gap:10px;
    background:var(--navy);color:#fff;border-radius:999px;
    padding:14px 22px 14px 18px;font-size:16px;font-weight:600;letter-spacing:-.01em;
    box-shadow:0 14px 34px rgba(11,65,140,.34);min-height:52px;}
  
  
  
  /* The footer carries its own CTA{opacity:0;translate:0 12px;pointer-events:none;}

  /* ---- Detail pages: solution and product ---- */
  .dp-lede{font-size:19px;line-height:1.62;color:var(--text-mute);max-width:70ch;}
  .dp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;}
  .dp-two h3{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--text-mute);margin-bottom:14px;}
  .dp-list{list-style:none;}
  .dp-list li{font-size:17px;line-height:1.5;padding:11px 0;border-bottom:1px solid var(--line);}
  .dp-list li:last-child{border-bottom:none;}
  /* ---- These were tiles in a bordered grid, which on this site is what a button
     looks like, and no amount of recolouring changed that. They are a numbered
     sequence, so they take the shape the specification rows take: a rule above
     each entry, no box, nothing to press. ---- */
  .dp-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 56px;margin-top:26px;}
  /* the compressed flow runs four stages, so it needs its own desktop track count;
     the 860px rule below already collapses both variants to one column */
  .dp-flow-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;}
  @media (max-width:1100px){.dp-flow-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
  /* A white tile raised off the section ground reads as something to press.
     These are stages to read, so they take the ground itself and let the
     hairline grid do the dividing. */
  .dp-step{padding:16px 0 20px;border-top:1px solid var(--line);}
  /* navy is the colour of a link on this site, so a stage marker must not wear
     it. These are positions in a sequence, not things to click. */
  .dp-step .n{font-size:14px;font-weight:600;color:var(--text-mute);letter-spacing:.1em;
    margin-bottom:6px;font-variant-numeric:tabular-nums;}
  .dp-step h3{font-size:17px;font-weight:600;text-transform:none;letter-spacing:normal;
    color:var(--text);margin-bottom:6px;line-height:1.3;}
  .dp-step p{font-size:15px;line-height:1.55;color:var(--text-mute);}
  .dp-post{margin-top:26px;padding:20px 22px;border:1px solid var(--line);background:var(--paper-tint);}
  .dp-post h3{font-size:17px;letter-spacing:.01em;}
  .dp-post p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--text-mute);}
  .dp-note{margin-top:18px;font-size:15px;line-height:1.6;color:var(--text-mute);}
  .dp-case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;}
  .dp-case-photo{overflow:hidden;height:clamp(280px,28vw,400px);}
  .dp-case-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .dp-case dl{font-size:17px;}
  .dp-case dt{color:var(--navy);font-size:17px;font-weight:700;margin-top:18px;}
  .dp-case dt:first-of-type{margin-top:0;}
  .dp-case dd{margin-top:5px;font-size:17px;line-height:1.6;color:var(--text-mute);}
  .dp-spec{border-top:1px solid var(--line);}
  .dp-spec .row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px;
    padding:16px 0;border-bottom:1px solid var(--line);}
  .dp-spec .k{font-size:15px;font-weight:600;color:var(--text-mute);}
  .dp-spec .v{font-size:17px;}
  .dp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
  .dp-hero-photo{background:var(--paper-tint);display:flex;align-items:center;justify-content:center;
    height:clamp(280px,26vw,380px);overflow:hidden;}
  .dp-hero-photo img{width:auto;height:62%;max-width:92%;object-fit:contain;display:block;}
  @media (max-width:1100px){
    .dp-flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:860px){
    .dp-two,.dp-case,.dp-hero{grid-template-columns:1fr;gap:28px;}
    .dp-flow,.dp-flow-4{grid-template-columns:1fr;gap:0;}
    .dp-spec .row{grid-template-columns:1fr;gap:4px;}
  }
  /* ---- Related: every page offers three routes onward ---- */
  .related-section{border-top:1px solid var(--line);}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  a.related-card{display:block;border:1px solid var(--line);padding:26px 26px 22px;color:inherit;background:#fff;}
  a.related-card .rc-kicker{font-size:14px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--text-mute);margin-bottom:12px;}
  a.related-card h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;line-height:1.3;}
  a.related-card p{font-size:16px;line-height:1.55;color:var(--text-mute);margin-bottom:16px;}
  a.related-card .arr{font-size:15px;font-weight:600;color:var(--navy);}
  @media (hover:hover) and (pointer:fine){
    a.related-card{transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);}
    a.related-card:hover{transform:translateY(-2px);border-color:#b9c3d4;
      box-shadow:0 12px 28px rgba(20,30,50,.10);}
    a.related-card:hover .arr{transform:translateX(4px);}
  }
  @media (max-width:960px){.related-grid{grid-template-columns:1fr;}}
  /* ---- Page head with a photographic ground. The image comes in as a custom
     property so every detail page can reuse this without duplicating the CSS.
     The scrim is heaviest where the copy sits and lightens across. ---- */
  .page-head.has-bg{position:relative;overflow:hidden;background:#0d1420;}
  .page-head.has-bg::before{content:'';position:absolute;inset:0;
    background-image:var(--head-bg);background-size:cover;
    background-position:var(--head-pos,center 55%);
    /* Some sources put their subject on the same side as the copy, where the
       scrim is heaviest. --head-flip mirrors the ground so it lands in the light. */
    transform:scaleX(var(--head-flip,1));}
  .page-head.has-bg::after{content:'';position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(10,16,26,.94) 0%,rgba(10,16,26,.86) 34%,
      rgba(10,16,26,.60) 62%,rgba(10,16,26,.34) 100%);}
  .page-head.has-bg > .wrap{position:relative;z-index:1;}
  .page-head.has-bg .kicker{color:#8fb2e6;}
  .page-head.has-bg h1{color:var(--text-invert);}
  .page-head.has-bg p{color:#c8cdd6;}
  .page-head.has-bg .sol-jump a{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);
    color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  @media (hover:hover) and (pointer:fine){
    .page-head.has-bg .sol-jump a:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.44);}
  }
  @media (max-width:860px){
    .page-head.has-bg::after{background:linear-gradient(180deg,rgba(10,16,26,.92) 0%,rgba(10,16,26,.86) 60%,rgba(10,16,26,.72) 100%);}
  }
  /* ---- One button treatment. Every button is a pill, and every one lights with
     the same liquid-glass surface the navigation lens uses, applied in place
     rather than gliding. Replaces four different hover behaviours. ---- */
  .btn,.btn-outline,.btn-ghost,.sol-jump a,.link-row a,.sol-refs a,.ph-jump a,.chapter-nav a{border-radius:999px;}
  @media (hover:hover) and (pointer:fine){
    .btn,.btn-outline,.btn-ghost,.sol-jump a,.link-row a,.sol-refs a,.ph-jump a,.chapter-nav a{
      transition:background-image .28s var(--ease), box-shadow .28s var(--ease),
        border-color .28s var(--ease), transform .22s var(--ease), color .2s ease;}
    .btn:hover,.btn-outline:hover,.btn-ghost:hover,.sol-jump a:hover,.link-row a:hover,.sol-refs a:hover,.ph-jump a:hover,.chapter-nav a:hover{
      background-image:linear-gradient(135deg,rgba(190,210,240,.42),rgba(255,255,255,.15) 60%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -6px 10px -6px rgba(70,100,160,.25),
        0 6px 20px rgba(20,40,80,.16);
      transform:translateY(-1px);}
    .btn-outline:hover,.btn-ghost:hover{border-color:rgba(255,255,255,.55);color:#fff;}
    .hero-block .btn-outline:hover{border-color:var(--navy);color:var(--navy);}
    .sol-jump a:hover{border-color:rgba(255,255,255,.5);}
  }
  @media (prefers-reduced-motion:reduce){
    .btn,.btn-outline,.btn-ghost,.sol-jump a,.link-row a,.sol-refs a,.ph-jump a,.chapter-nav a{transition:none;}
    .btn:hover,.btn-outline:hover,.btn-ghost:hover,.sol-jump a:hover,.link-row a:hover,.sol-refs a:hover,.ph-jump a:hover,.chapter-nav a:hover{transform:none;}
  }
  /* ---- Footer takes the same shared lens as the bar and the mega menu, tuned
     for a dark ground: the glass reads as light on ink rather than on paper. ---- */
  .footer-links{position:relative;}
  .footer-lens{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;
    pointer-events:none;z-index:0;opacity:0;
    background:linear-gradient(135deg,rgba(150,180,230,.26),rgba(255,255,255,.07) 60%);
    backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -6px 10px -6px rgba(120,150,200,.20);
    transition:left .5s cubic-bezier(.22,1.4,.36,1), top .5s cubic-bezier(.22,1.4,.36,1),
      width .5s cubic-bezier(.22,1.4,.36,1), height .5s cubic-bezier(.22,1.4,.36,1),
      opacity .3s ease;}
  /* Must exclude the lens: .footer-links > div outranks .footer-lens, which
     turned the lens into a relatively positioned grid item locked to the first
     column, so it could not travel across the map. */
  .footer-links > div:not(.footer-lens){position:relative;z-index:1;}
  /* The slider is a target, not a highlight. Sized to each label it changed
     width on every move, which is the opposite of what a column of links
     wants: one steady bar the eye can aim at. Every entry takes the full
     column and the same line box, so only the position travels. */
  .footer-links a{padding:6px 12px;margin-left:-12px;border-radius:999px;
    width:calc(100% + 24px);line-height:1.5;}
  /* Column headings are links too, so they take the lens as well. Same padding
     as the entries below them, so the pill is the same shape throughout. */
  .footer-links h3{margin-bottom:8px;}
  .footer-links h3 a{display:block;width:calc(100% + 24px);padding:6px 12px;margin-left:-12px;
    border-radius:999px;line-height:1.5;}
  @media (prefers-reduced-motion:reduce){.footer-lens{transition:none;}}
  /* The site map gets the full width instead of sharing a row with the address,
     which had six columns squeezed against a block of contact text. Company
     details sit on their own line underneath. */
  .footer-top{display:block;margin-bottom:36px;}
  .footer-org{display:flex;align-items:flex-start;gap:48px;flex-wrap:wrap;
    padding-top:30px;border-top:1px solid var(--ink-border);margin-bottom:30px;}
  .footer-org .brand{flex:0 0 auto;padding-top:2px;}
  /* The two icons are one white artwork each; the resting grey is the same
     white held at the footer's muted opacity, so hover is a fade, not a swap. */
  .footer-social{display:flex;gap:4px;list-style:none;margin:14px 0 0 -10px;}
  .footer-social a{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;}
  .footer-social img{width:24px;height:24px;opacity:.77;
    transition:opacity .2s cubic-bezier(.16,1,.3,1);}
  .footer-social a:hover img,.footer-social a:focus-visible img{opacity:1;}
  /* Label above value rather than a label welded to the front of the string,
     so the three details read as a set of fields instead of one long line. */
  .footer-contact{display:grid;grid-template-columns:auto auto minmax(0,1fr);
    gap:18px 56px;font-style:normal;
    font-size:15px;line-height:1.6;color:var(--text-invert-mute);}
  .fc-item{display:flex;flex-direction:column;gap:3px;}
  .fc-label{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:#6f9adb;}
  .footer-contact a{color:var(--text-invert-mute);}
  .footer-contact a:hover{color:#fff;}
  @media (max-width:700px){
    .footer-org{gap:22px;}
    .footer-contact{grid-template-columns:1fr;gap:16px;}
    /* a phone number is there to be dialled, so give it a finger-sized target */
    .footer-contact a{display:inline-flex;align-items:center;min-height:44px;}
    .fc-item{gap:0;}
  }