:root{
    --bg:#0a0a0b;
    --bg-2:#0d0d0f;
    --surface:#141417;
    --surface-2:#1a1a1e;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.16);
    --text:#ecedf1;
    --muted:#9295a0;
    --faint:#62656f;
    --red:#ff2e43;
    --red-deep:#d6172a;
    --cyan:#ff2e43;
    --green:#5dff7b;
    --amber:#ffb340;
    --display:'Chakra Petch',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --body:'IBM Plex Sans',system-ui,sans-serif;
    --maxw:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    /* ambient glow + faint PCB grid baked into the page background (non-fixed):
       it scrolls with the content, so Firefox never recomposites a fixed layer
       on every scroll frame — the cause of the scroll jank. */
    background-color:var(--bg);
    background-image:
      radial-gradient(900px 520px at 80% -40px,rgba(255,46,67,.13),transparent 60%),
      radial-gradient(700px 420px at 8% 160px,rgba(255,46,67,.08),transparent 60%),
      linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:auto,auto,44px 44px,44px 44px;
    background-repeat:no-repeat,no-repeat,repeat,repeat;
    background-attachment:scroll;
    color:var(--text);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* ---------- typography helpers ---------- */
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:.6em}
  .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.01em}
  .mono{font-family:var(--mono)}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:100;
    background:var(--bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:700;font-size:1.32rem;letter-spacing:.02em;text-decoration:none;color:var(--text)}
  .logo-img{height:52px;width:auto;display:block}
  .logo .free{color:#fff}
  .logo .wili{color:var(--red)}
  .logo .two{font-family:var(--mono);font-weight:700;color:var(--bg);background:var(--green);border-radius:5px;padding:.05em .38em;font-size:.82rem;margin-left:.15rem;box-shadow:0 0 14px rgba(93,255,123,.5)}
  .bolt{width:18px;height:22px;filter:drop-shadow(0 0 6px rgba(255,46,67,.7))}
  nav.links{display:flex;align-items:center;gap:2rem}
  nav.links a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
  nav.links a:hover{color:var(--text)}
  .btn{font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
    text-decoration:none;display:inline-flex;align-items:center;gap:.6em;padding:.72rem 1.25rem;border-radius:8px;
    cursor:pointer;border:1px solid transparent;transition:transform .18s,box-shadow .25s,background .2s}
  .btn-primary{background:var(--red);color:#fff;box-shadow:0 0 0 1px rgba(255,46,67,.4),0 8px 30px -8px rgba(255,46,67,.65)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,46,67,.6),0 14px 40px -8px rgba(255,46,67,.9)}
  .btn-green{background:var(--green);color:var(--bg);box-shadow:0 0 0 1px rgba(93,255,123,.4),0 8px 30px -8px rgba(93,255,123,.65)}
  .btn-green:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(93,255,123,.6),0 14px 40px -8px rgba(93,255,123,.9)}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 24px -6px rgba(255,46,67,.5)}
  .btn-disabled{cursor:default;opacity:.75}
  .btn-disabled:hover{transform:none;box-shadow:0 0 0 1px rgba(255,46,67,.4),0 8px 30px -8px rgba(255,46,67,.65)}
  .nav .btn{padding:.55rem 1rem}
  @media(max-width:820px){nav.links a{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:88px 0 60px;text-align:center}
  .badge{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--text);border:1px solid var(--line-strong);border-radius:100px;padding:.45rem 1rem;background:rgba(255,255,255,.02);
    text-decoration:none;transition:border-color .2s,box-shadow .25s}
  a.badge:hover{border-color:var(--cyan);box-shadow:0 0 22px -6px rgba(255,46,67,.55)}
  .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite}
  .badge .cd{color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.12em}
  .badge .cd b{color:#fff;font-weight:700}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .hero h1{display:flex;align-items:center;justify-content:center;gap:.06em;margin:1.4rem 0 0}
  .hero .title-logo{width:min(620px,84vw);height:auto;display:block}
  .hero h1 .two{font-family:var(--display);font-weight:700;line-height:1;font-size:clamp(2.6rem,8vw,5.4rem);color:var(--red);text-shadow:0 0 40px rgba(255,46,67,.55)}
  .hero .tag{max-width:620px;margin:1.2rem auto 0;color:var(--muted);font-size:clamp(1.02rem,2.4vw,1.22rem)}
  .hero .tag b{color:var(--text);font-weight:600}
  .hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
  .cta-note{margin-top:.9rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .hero-device{position:relative;margin:46px auto 0;max-width:920px;animation:float 7s ease-in-out infinite;will-change:transform}
  .hero-device img{width:100%;height:auto;display:block;border-radius:18px}
  .hero-device::before{content:"";position:absolute;inset:-6% -4% 0;z-index:-1;
    background:radial-gradient(50% 50% at 50% 45%,rgba(255,46,67,.22),transparent 70%),radial-gradient(60% 50% at 50% 60%,rgba(255,46,67,.18),transparent 75%);
    filter:blur(20px)}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  /* reveal */
  .rise{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .rise.in{opacity:1;transform:none}
  .hero .rise{transition-delay:var(--d,0s)}

  /* ---------- spec strip ---------- */
  .strip{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
  .strip-in{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:0}
  .stat{padding:24px 18px;text-align:center;border-left:1px solid var(--line)}
  .stat:first-child{border-left:0}
  .stat .v{font-family:var(--display);font-weight:700;font-size:1.5rem;color:#fff}
  .stat .v em{font-style:normal;color:var(--cyan)}
  .stat .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:.3rem}
  @media(max-width:900px){.strip-in{grid-template-columns:repeat(3,1fr)}.stat:nth-child(3n+1){border-left:0}.stat:nth-child(n+4){border-top:1px solid var(--line)}}
  @media(max-width:520px){.strip-in{grid-template-columns:repeat(2,1fr)}.stat{border-left:1px solid var(--line)!important}.stat:nth-child(odd){border-left:0!important}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

  /* ---------- section scaffolding ---------- */
  section.block{padding:84px 0}
  .sec-head{max-width:720px;margin:0 auto 10px;text-align:center}
  .sec-head h2{font-size:clamp(2rem,5vw,3.1rem);margin-top:1rem}
  .sec-head p{color:var(--muted);margin-top:1rem;font-size:1.05rem}

  /* ---------- feature rows ---------- */
  .feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:54px 0;border-top:1px solid var(--line)}
  .feature.reverse .f-media{order:2}
  .f-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700}
  .feature h3{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:.7rem 0 1rem}
  .feature p{color:var(--muted);font-size:1.04rem}
  .feature p + p{margin-top:.9rem}
  .feature p a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(255,46,67,.35);transition:border-color .2s}
  .feature p a:hover{border-bottom-color:var(--cyan)}
  .f-list{list-style:none;margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.55rem}
  .f-list li{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--text);
    border:1px solid var(--line-strong);border-radius:6px;padding:.4rem .65rem;background:rgba(255,255,255,.02)}
  .f-list li b{color:var(--cyan);font-weight:700}
  /* media frame */
  .f-media{position:relative}
  .frame{position:relative;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;background:var(--surface);
    box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}
  .frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    box-shadow:inset 0 0 60px -20px rgba(0,0,0,.9);border-radius:14px}
  .frame img,.frame video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
  .frame.tall img{aspect-ratio:4/5}
  .frame.wide img{aspect-ratio:21/9}
  .frame.fit-contain img{object-fit:contain;background:#0c0c0e}
  .frame.glow{box-shadow:0 0 0 1px rgba(255,46,67,.25),0 24px 70px -20px rgba(255,46,67,.4)}
  .frame.glow-red{box-shadow:0 0 0 1px rgba(255,46,67,.3),0 24px 70px -20px rgba(255,46,67,.45)}
  @media(max-width:780px){
    .feature{grid-template-columns:1fr;gap:28px;padding:40px 0}
    .feature.reverse .f-media{order:0}
  }

  /* ---------- internals banner ---------- */
  .board-banner{margin:34px 0 4px}
  .board-banner .frame img{aspect-ratio:2803/1666;object-fit:contain;background:#0c0c0e;
    clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1) .1s}
  .board-banner.in .frame img{clip-path:inset(0 0 0 0)}
  .board-banner.in .frame.glow{animation:board-pulse 3.2s ease-in-out .9s infinite}
  @keyframes board-pulse{
    0%,100%{box-shadow:0 0 0 1px rgba(255,46,67,.25),0 24px 70px -20px rgba(255,46,67,.4)}
    50%{box-shadow:0 0 0 1px rgba(255,46,67,.5),0 24px 90px -16px rgba(255,46,67,.7)}
  }
  .board-cap span{opacity:0;transform:translateY(10px);
    transition:opacity .5s ease,transform .5s ease}
  .board-banner.in .board-cap span{opacity:1;transform:none}
  .board-banner.in .board-cap span:nth-child(1){transition-delay:1.2s}
  .board-banner.in .board-cap span:nth-child(2){transition-delay:1.3s}
  .board-banner.in .board-cap span:nth-child(3){transition-delay:1.4s}
  .board-banner.in .board-cap span:nth-child(4){transition-delay:1.5s}
  .board-banner.in .board-cap span:nth-child(5){transition-delay:1.6s}
  .board-banner.in .board-cap span:nth-child(6){transition-delay:1.7s}
  .board-banner.in .board-cap span:nth-child(7){transition-delay:1.8s}
  .board-banner.in .board-cap span:nth-child(8){transition-delay:1.9s}
  .board-cap{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:18px}
  .board-cap span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);
    border:1px solid var(--line);border-radius:6px;padding:.35rem .6rem;background:rgba(255,255,255,.02)}
  .board-cap span b{color:var(--green);font-weight:700}
  @media(prefers-reduced-motion:reduce){
    .board-banner .frame img{clip-path:none;transition:none}
    .board-banner.in .frame.glow{animation:none}
    .board-cap span{opacity:1;transform:none;transition:none}
  }

  /* ---------- accent / showcase rows ---------- */
  .showcase{background:linear-gradient(180deg,rgba(255,46,67,.05),transparent)}

  /* ---------- spec table ---------- */
  .specs{border-top:1px solid var(--line)}
  .spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:40px}
  .spec-card{background:var(--bg-2);padding:26px 26px}
  .spec-card h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;font-weight:700}
  .spec-card dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:.92rem}
  .spec-card dt{font-family:var(--mono);color:var(--faint);font-size:.8rem;white-space:nowrap}
  .spec-card dd{color:var(--text)}
  @media(max-width:720px){.spec-grid{grid-template-columns:1fr}}
  @media(max-width:520px){
    .spec-card{padding:22px 20px}
    .spec-card dl{grid-template-columns:1fr;gap:0}
    .spec-card dt{white-space:normal;margin-top:.7rem;letter-spacing:.04em}
    .spec-card dt:first-of-type{margin-top:0}
    .spec-card dd{margin-top:.15rem;font-size:.95rem}
  }

  /* ---------- final CTA ---------- */
  .final{position:relative;text-align:center;padding:110px 0;border-top:1px solid var(--line);overflow:hidden}
  .final::before{content:"";position:absolute;inset:0;z-index:-1;
    background:radial-gradient(50% 80% at 50% 0%,rgba(255,46,67,.18),transparent 70%),radial-gradient(60% 90% at 50% 100%,rgba(255,46,67,.12),transparent 70%)}
  .final h2{font-size:clamp(2.4rem,6vw,4.2rem)}
  .final h2 .n{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;
    margin-left:.06em;border:3px solid var(--red);border-radius:.14em;color:var(--red);
    text-shadow:0 0 40px rgba(255,46,67,.5);vertical-align:-0.1em}
  .final p{color:var(--muted);max-width:560px;margin:1.2rem auto 0;font-size:1.1rem}
  .final .hero-cta{margin-top:2.4rem}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:40px 0;color:var(--faint);font-size:.86rem}
  .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--cyan)}
  .foot-links{display:flex;gap:1.5rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}
  .foot-social{display:flex;gap:1.1rem;align-items:center}
  .foot-social a{color:var(--muted);display:inline-flex;transition:color .2s,transform .2s}
  .foot-social a:hover{color:var(--red);transform:translateY(-2px)}

  /* ---------- lightbox ---------- */
  .frame img,.hero-device img{cursor:zoom-in}
  .lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
    background:rgba(5,5,7,.93);padding:4vmin;cursor:zoom-out}
  .lightbox.open{display:flex}
  .lightbox img,.lightbox video{max-width:95vw;max-height:92vh;width:auto;height:auto;object-fit:contain;border-radius:10px;
    border:1px solid var(--line-strong);box-shadow:0 30px 90px -20px rgba(0,0,0,.9)}
  .lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;
    border:1px solid var(--line-strong);background:rgba(20,20,23,.8);color:#fff;font-size:1.3rem;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--mono);transition:border-color .2s,color .2s}
  .lb-close:hover{border-color:var(--red);color:var(--red)}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important}
    .rise{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
  }

/* ---------- spec strip links ---------- */
a.stat{text-decoration:none;color:inherit;display:block;transition:background .2s}
a.stat .v{transition:color .2s,text-shadow .2s}
a.stat:hover{background:rgba(255,46,67,.05)}
a.stat:hover .v{color:var(--cyan);text-shadow:0 0 18px rgba(255,46,67,.55)}
a.stat:hover .v em{color:#fff}

/* ---------- spec detail pages ---------- */
.spec-hero{padding:72px 0 36px;text-align:center;border-bottom:1px solid var(--line)}
.spec-hero h1{font-size:clamp(2rem,6vw,3.4rem);margin:.9rem 0 .4rem}
.spec-hero h1 .n{color:var(--red);text-shadow:0 0 30px rgba(255,46,67,.5)}
.spec-hero .big-stat{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,3vw,1.7rem);color:#fff}
.spec-hero .big-stat em{font-style:normal;color:var(--cyan)}
.spec-hero .sub{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.spec-body{padding:56px 0;max-width:820px;margin:0 auto}
.spec-body p{color:var(--muted);margin-bottom:1.2rem;font-size:1.04rem}
.spec-body p b,.spec-body p strong{color:var(--text)}
.spec-body .frame{margin:2rem 0;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;background:#0c0c0e}
.spec-body .frame img{width:100%;height:auto;display:block;cursor:zoom-in}
.spec-facts{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:26px;margin-top:2.2rem}
.spec-facts h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;font-weight:700}
.spec-facts dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:.92rem}
.spec-facts dt{font-family:var(--mono);color:var(--faint);font-size:.8rem;white-space:nowrap}
.spec-facts dd{color:var(--text)}
.spec-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--line);padding:28px 0;flex-wrap:wrap}

/* ---------- legal / privacy policy page ---------- */
.legal-body{max-width:760px}
.legal-body h2{font-family:var(--display);font-size:clamp(1.4rem,3vw,1.8rem);margin:2.6rem 0 1rem;color:#fff}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-family:var(--display);font-size:1.15rem;margin:2rem 0 .8rem;color:var(--text)}
.legal-body h4{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:1.6rem 0 .6rem;color:var(--red)}
.legal-body address{font-style:normal;color:var(--muted);border-left:2px solid var(--line-strong);padding:.2rem 0 .2rem 1rem;margin:1rem 0 2rem;line-height:1.8}
.legal-body address a{color:var(--red)}
.spec-nav a{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.spec-nav a:hover{color:var(--cyan)}
.spec-nav .home{color:var(--text)}

/* ---------- Responsiveness Tweaks ---------- */

/* Global scale corrections */
@media (max-width: 480px) {
  .wrap {
    padding: 0 16px;
  }
}

/* Header & Mobile Navigation Drawer */
.nav-right-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}

.burger span {
  width: 100%;
  height: 2px;
  background-color: var(--text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Enable Burger Menu starting at 820px down because desktop links are hidden from 820px and below! */
@media (max-width: 820px) {
  .burger {
    display: flex;
  }
  
  /* Mobile navigation drawer - takes full screen matching dark cyberpunk aesthetics */
  nav.links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 11, 0.98);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
  }
  
  nav.links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  
  nav.links a {
    display: flex !important; /* Force override display:none from desktop links query */
    font-size: 1.5rem;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  }
  
  nav.links a:hover {
    color: var(--cyan);
    text-shadow: 0 0 15px var(--cyan);
  }

  /* Hamburger transform animation to 'X' */
  .burger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .burger.open span:nth-child(2) {
    opacity: 0;
  }
  .burger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  /* Responsive Navigation Bar Sizing */
  .logo-img {
    height: 38px;
  }
  header.nav {
    height: auto;
  }
  .nav-in {
    height: 56px;
  }
  .nav .btn {
    padding: .45rem .8rem;
    font-size: .72rem;
    letter-spacing: .04em;
  }
}

/* Sizing corrections for very small screens */
@media (max-width: 360px) {
  .logo-img {
    height: 32px;
  }
  .nav .btn {
    padding: .4rem .6rem;
    font-size: .68rem;
  }
  .nav-right-wrap {
    gap: 0.5rem;
  }
}

/* Hero Title Scaling */
@media (max-width: 768px) {
  .hero .title-logo {
    width: min(450px, 80vw);
  }
}

@media (max-width: 480px) {
  .hero .title-logo {
    width: min(290px, 85vw);
  }
}

/* Feature Row Content Scaling */
@media (max-width: 480px) {
  .feature p {
    font-size: 0.96rem;
  }
  .feature h3 {
    font-size: 1.5rem;
  }
}

/* 
  =========================================
  Perfect, Fluid Spec Strip Overrides
  =========================================
  This guarantees there is NO horizontal overflow on any size viewport (landscape, portrait, small mobile).
*/
@media (max-width: 1024px) {
  .strip-in {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .stat {
    border-left: 1px solid var(--line) !important;
    border-top: 1px solid var(--line) !important;
  }
  /* Remove top border for first row */
  .stat:nth-child(-n+4) {
    border-top: 0 !important;
  }
  /* Remove left border for items starting each row (4-column grid: 1, 5, 9, 13, 17, 21, 25) */
  .stat:nth-child(4n+1) {
    border-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .strip-in {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Remove top border for first row (2 columns) */
  .stat:nth-child(n+1) {
    border-top: 1px solid var(--line) !important;
    border-left: 1px solid var(--line) !important;
  }
  .stat:nth-child(-n+2) {
    border-top: 0 !important;
  }
  /* Remove left border for odd items (1, 3, 5, 7, 9, etc) */
  .stat:nth-child(odd) {
    border-left: 0 !important;
  }
}

@media (max-width: 480px) {
  .strip-in {
    grid-template-columns: 1fr !important;
  }
  .stat {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding: 16px 12px;
  }
  .stat:first-child {
    border-top: 0 !important;
  }
  
  .stat .v {
    font-size: 1.3rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* Ensure long tech phrases inside .stat wrap and adjust dynamically */
.stat .v {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Spec Detail Pages layout list cascading */
@media (max-width: 520px) {
  .spec-facts {
    padding: 22px 20px;
  }
  .spec-facts dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .spec-facts dt {
    white-space: normal;
    margin-top: 0.7rem;
    letter-spacing: 0.04em;
  }
  .spec-facts dt:first-of-type {
    margin-top: 0;
  }
  .spec-facts dd {
    margin-top: 0.15rem;
    font-size: 0.95rem;
  }
}

/* Footer layout cascading for mobile viewports */
@media (max-width: 520px) {
  .foot-in {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 20px;
  }
  .foot-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* ---------- Mobile spacing scale ----------
   Scales down only the oversized vertical rhythm on small screens so sections
   don't show huge empty gaps on phones. Desktop layout, theme and text are
   left completely untouched (these rules only apply below the breakpoints). */
@media (max-width: 640px) {
  .hero        { padding: 56px 0 40px; }
  .hero-device { margin-top: 30px; }
  section.block{ padding: 52px 0; }
  .final       { padding: 66px 0; }
  .sec-head h2 { margin-top: .6rem; }
  footer       { padding: 32px 0; }

  /* spec detail pages */
  .spec-hero   { padding: 48px 0 28px; }
  .spec-body   { padding: 38px 0; }
  .spec-nav    { padding: 22px 0; }
}

@media (max-width: 420px) {
  .hero        { padding: 44px 0 32px; }
  section.block{ padding: 44px 0; }
  .final       { padding: 56px 0; }
}