:root{
  --bg:#0b0b12;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --surface: hsla(240,10%,16%,0.6);
  --ring:#8b5cf6;
  --radius:18px;
}

/* ====== Layout scaffold (sticky footer) ====== */
*{ box-sizing:border-box }
html, body { height:100% }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  /* Solid base — NO gradient here anymore */
  background: var(--bg);
  overflow-x:hidden;
}

/* Ensure content sits above the decorative layer */
.site-header, .shell, .site-footer { position:relative; z-index:1 }

/* ====== Top decorative layer (glow + grid) ======
   Confined to a fixed height so it can’t cut through content */
.bg-grid{
  position: fixed;
  left:0; right:0; top:0;
  height: 560px;                 /* <-- adjust if you want it taller/shorter */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;              /* hard cap the visual area */
}

/* Radial glow lives here now (NOT on body) */
.bg-grid::before{
  content:"";
  position:absolute;
  /* extra width so edges don’t appear on wide screens */
  left:-20vw; right:-20vw; top:-260px; bottom:-40px;
  background:
    radial-gradient(1100px 740px at 50% 0px,
      #1f2937 0 42%, transparent 75%);
}

/* Subtle grid overlay on the same capped layer */
.bg-grid::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  /* gentle fade at the bottom of the 560px layer so it blends out */
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

@media (max-height:780px){
  .bg-grid{ height: 460px }
}
@media (max-height:640px){
  .bg-grid{ height: 380px }
}

/* ====== Header + main container ====== */
.site-header{
  max-width:1200px; margin:24px auto 0; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px}
.brand .dot{width:10px; height:10px; border-radius:999px; background:#8b5cf6; box-shadow:0 0 16px #8b5cf6}
.brand-text{ color:#e5e7eb; text-decoration:none; font-weight:800; letter-spacing:.4px }

.nav a{ color:var(--muted); text-decoration:none; margin-left:20px; font-size:.95rem }
.nav a:hover{ color:var(--ink) }

.shell{
  flex:1 1 auto;
  max-width:1200px; margin:0 auto; padding:24px 20px 60px;
}

/* ====== Footer (single rule) ====== */
.site-footer{
  padding:16px 20px;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  color: var(--muted);
  text-align: center;
  font-size: .9rem;
}

/* ====== Hero ====== */
.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-top:30px; gap:40px;
}
@media (max-width:980px){
  .tech-specs-grid { grid-template-columns:1fr; gap:16px }
  .tech-specs-content { padding:20px }
  .cta-row { justify-content:center; gap:20px }
}

.hero-left{display:flex; align-items:center; justify-content:center; padding:10px; margin-bottom:20px}

.mouse-navigation{
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-arrow{
  background: none;
  border: none;
  color: rgba(255,255,255,0.15);
  font-size: 2rem;
  font-weight: 300;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow:hover{
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  transform: scale(1.1);
}
.mouse-frame{
  --accent: var(--ring);
  position:relative; width:min(520px, 92vw); aspect-ratio: 1 / 1.25;
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: 0 10px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  display:grid; place-items:center;
  transition: box-shadow .3s ease;
}
.mouse-frame:hover{ 
  box-shadow: 0 16px 70px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.06);
}
.mouse-frame img{
  max-width:88%; height:auto;
  /* base black shadow + colored glow (alpha animates from 0 to 1) */
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(var(--accent-rgb, 139, 92, 246), 0));
  transition: transform .25s ease, filter 1s ease;
}
.mouse-frame:hover img{
  transform: translateY(-2px);
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(var(--accent-rgb, 139, 92, 246), .95));
}

/* simulated RGB underglow */
.underglow{
  position:absolute; inset:auto 10% -26px 10%;
  height:40px; border-radius:999px;
  filter: blur(20px);
  background: radial-gradient(60% 100% at 50% 0%, var(--accent), transparent 70%);
  opacity:.9; transition: background .25s ease, opacity .25s ease;
}

.hero-right h1{
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 3rem);
  line-height:1.1; margin:6px 0 14px;
  text-align:center;
}
.lede{ color:var(--muted); margin:0 0 18px; max-width:52ch; margin-inline:auto }

/* Picker / chips */
.picker{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 10px; justify-content:center }
.chip{
  --chip-bg: rgba(255,255,255,.06);
  padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.08);
  background: var(--chip-bg); color:var(--ink); cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  font-weight:600;
}
.chip:hover{ transform: translateY(-1px); border-color:rgba(255,255,255,.16) }
.chip.is-active{
  box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 0 20px var(--ring);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
}

/* Specs list */
.specs{ list-style:none; padding:0; margin:16px 0 20px;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px }
.specs li{ background: var(--surface); border:1px solid rgba(255,255,255,.08);
  padding:12px 14px; border-radius:12px; color:var(--muted) }
.specs span{ color:var(--ink); font-weight:700 }

/* Buttons */
.cta-row{ display:flex; gap:12px; margin-top:8px; justify-content:center }
.btn-primary, .btn-ghost, .btn-mini{
  border-radius:12px; border:1px solid transparent; font-weight:700; cursor:pointer; text-decoration:none;
}
.btn-primary{ padding:12px 16px; background:var(--ring); color:black; box-shadow:0 10px 30px color-mix(in oklab, var(--ring) 40%, transparent); }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{
  padding: 12px 16px; color: var(--ink);
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; display:flex; align-items:center; gap:8px;
  transition: all 0.2s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2) }
.btn-ghost:focus{ outline:none; box-shadow:0 0 0 3px rgba(139,92,246,.4) }
.btn-icon{ transition: transform .3s ease; font-size:.8em }
.btn-ghost[aria-expanded="true"] .btn-icon{ transform: rotate(180deg) }

/* Tech Specs collapsible */
.tech-specs-collapsible{
  max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease, margin .3s ease;
  opacity:0; margin-top:0;
}
.tech-specs-collapsible.is-expanded{ max-height:800px; opacity:1; margin-top:24px }
.tech-specs-content{
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px; backdrop-filter: blur(10px);
}
.tech-specs-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:20px }
.tech-spec-item{
  display:flex; align-items:flex-start; gap:16px; padding:16px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; transition: all .2s ease;
}
.tech-spec-item:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); transform: translateY(-2px) }
.spec-icon{
  font-size:24px; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--ring), color-mix(in oklab, var(--ring) 70%, white));
  border-radius:12px; flex-shrink:0;
}
.spec-details h3{ margin:0 0 8px 0; font-size:1.1rem; font-weight:600; color:var(--ink) }
.spec-details p{ margin:0; color:var(--muted); line-height:1.5; font-size:.95rem }

.btn-mini{ padding:8px 10px; background:rgba(255,255,255,.08); color:var(--ink) }
.btn-mini:hover{ background:rgba(255,255,255,.12) }

/* Designs grid */
.grid{
  margin-top:60px;
  display:grid; grid-template-columns: repeat(12, 1fr); gap:16px;
}
.card{
  grid-column: span 3;
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow:0 16px 50px rgba(0,0,0,.45); border-color:rgba(255,255,255,.14) }
.card img{ width:100%; display:block; aspect-ratio:1/1; object-fit:cover }
.card-body{ padding:14px }
.card h3{ margin:0 0 6px }
.card p{ margin:0 0 12px; color:var(--muted) }
@media (max-width:1100px){ .card{ grid-column: span 6 } }
@media (max-width:640px){ .card{ grid-column: span 12 } }

/* Signup section (inline) */
.signup{ margin-top:80px; display:flex; align-items:center; justify-content:center }
.signup-inner{
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:20px;
  padding:40px 30px; text-align:center; max-width:640px; width:100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.signup-inner h2{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem); margin-bottom:8px }
.signup-inner p{ color:var(--muted); margin-bottom:24px; max-width:50ch; margin-inline:auto }
.signup-form{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.signup-form input[type=email]{
  padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color:var(--ink); flex:1 1 260px; font-size:1rem;
}
.signup-form input[type=email]:focus{ outline:none; border-color:var(--ring); box-shadow:0 0 0 2px rgba(139,92,246,.4) }
.signup-form button{
  padding:14px 20px; border-radius:12px; border:none;
  background:var(--ring); color:black; font-weight:700; font-size:1rem; cursor:pointer; box-shadow:0 10px 30px rgba(139,92,246,.4)
}
.signup-form button:hover{ filter:brightness(1.05) }
.form-note{ display:block; margin-top:12px; color:var(--muted); font-size:.85rem }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  z-index:1000; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.modal-backdrop.is-visible{ opacity:1; visibility:visible }
.modal{
  position:fixed; inset:0; z-index:1001; display:flex; align-items:center; justify-content:center;
  padding:16px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.modal.is-visible{ opacity:1; visibility:visible }
.modal-content{
  position:relative; width:100%; max-width:600px; max-height:calc(100vh - 32px); overflow-y:auto;
  transform: translateY(20px) scale(.95); transition: transform .3s;
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.2) transparent;
}
.modal-content::-webkit-scrollbar{ width:6px }
.modal-content::-webkit-scrollbar-track{ background:transparent }
.modal-content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px }
.modal-content::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.3) }
.modal.is-visible .modal-content{ transform:translateY(0) scale(1) }

.modal-close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  border:none; background:var(--ring); color:black; font-size:18px; font-weight:bold; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,.3); transition:.2s; z-index:10;
}
.modal-close:hover{ transform:scale(1.1); box-shadow:0 12px 40px rgba(0,0,0,.5) }
.modal-close:active{ transform:scale(.95) }

/* Fancy signup (inside modal) */
.signup{ margin-top:60px }
.signup-inner{
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  border:2px solid rgba(255,255,255,.2); border-radius:24px;
  padding:32px; display:grid; grid-template-columns:1.1fr 1fr; gap:32px;
  box-shadow:0 25px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
}
@media (max-width:980px){
  .signup-inner{ grid-template-columns:1fr; padding:24px; gap:24px }
  .modal-content{ max-width:95vw; margin:0 8px }
  .modal-close{ top:12px; right:12px; width:36px; height:36px; font-size:16px }
}
@media (max-width:640px){
  .modal{ padding:12px }
  .modal-content{ max-width:100%; margin:0 }
  .signup-inner{ padding:20px; gap:20px }
  .modal-close{ top:8px; right:8px; width:32px; height:32px; font-size:14px }
  .form-actions{ flex-direction:column; align-items:stretch; gap:12px }
  .btn-primary{ width:100% }
  .cta-row{ flex-direction:column; align-items:center; gap:16px }
  .cta-row .btn-primary, .cta-row .btn-ghost{ width:100%; max-width:280px; justify-content:center; text-align:center }
  .cta-row .btn-ghost .btn-icon{ margin-left:auto }
}

/* Form bits */
.signup-copy h2{ margin:0 0 12px; font-size:clamp(1.4rem, 1rem + 1.2vw, 2rem); color:#1f2937 }
.signup-copy .muted{ color:#4b5563; line-height:1.6 }

.form-card{ display:grid; gap:16px; animation:fadeInUp .4s ease .1s both }
.form-row{ display:grid; gap:8px; animation:fadeInUp .4s ease .2s both }
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:translateY(0) }
}
.form-row.checkbox{ grid-template-columns:auto 1fr; align-items:flex-start; gap:12px; padding:8px 0 }
label{ font-weight:600; color:#1f2937 }
input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--ring); cursor:pointer }
input[type="text"], input[type="email"], select{
  padding:14px 16px; border-radius:12px; border:2px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.95); color:#1f2937; outline:none; font-size:16px; transition:all .2s ease
}
input::placeholder{ color:#6b7280 }
input:focus, select:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--ring) 20%, transparent);
  background:#fff;
}
.error{ color:#f87171; min-height:1em; margin:0 }
.form-actions{ display:flex; align-items:center; gap:16px; margin-top:8px }
.tiny{ font-size:.85rem; color:#6b7280 }
.form-success{
  margin-top:12px; background:rgba(34,197,94,.1); border:2px solid rgba(34,197,94,.3);
  color:#059669; padding:16px; border-radius:12px; text-align:center; font-weight:500
}
/* ===== POLISH PACK ===== */

/* 1) Glassy, sticky header with scroll shadow */
.site-header{
  position: sticky; top: 0;
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(11,11,18,.55), rgba(11,11,18,.25));
  border-bottom: 1px solid rgba(255,255,255,.05);
  z-index: 5;
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.is-scrolled .site-header{
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: linear-gradient(to bottom, rgba(11,11,18,.7), rgba(11,11,18,.3));
  border-color: rgba(255,255,255,.08);
}

/* 2) Hero mouse 3D tilt + softer ambient */
.mouse-frame{
  perspective: 800px;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}
.mouse-frame img{
  transform: translateZ(0px);
  will-change: transform;
}
.mouse-frame.tilt-on img{
  transition: transform .12s ease, filter 1s ease;
}

/* 3) Cards: gradient border + gentle lift */
.card{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.card::before{
  content:"";
  position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ring) 70%, white) 0%,
    transparent 30%, transparent 70%,
    color-mix(in oklab, var(--ring) 55%, black) 100%);
  opacity:.0; transition: opacity .25s ease;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px; border: 1px solid transparent; /* gradient border illusion */
}
.card:hover::before{ opacity:.55 }
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 55px rgba(0,0,0,.48);
  border-color: rgba(255,255,255,.15);
}

.card.is-selected{
  box-shadow: 0 18px 55px rgba(0,0,0,.48), 0 0 30px var(--ring);
  border-color: rgba(255,255,255,.15);
}
.card img{
  transition: transform .35s ease, filter .35s ease;
}
.card:hover img{
  transform: scale(1.03);
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.55));
}

/* 4) CTA buttons: micro-interaction & focus */
.btn-primary{
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:active{ transform: translateY(1px) }
.btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 35%, transparent);
}
.btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 35%, transparent);
}

/* 5) Footer top fade for classy separation */
.site-footer{
  position: relative;
}
.site-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:-18px; height:18px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35));
  pointer-events:none;
}

/* 6) Decorative layer subtle drift (kept inside the capped area) */
@keyframes layerDrift {
  0%   { transform: translateY(0px) }
  50%  { transform: translateY(8px) }
  100% { transform: translateY(0px) }
}
.bg-grid::before,
.bg-grid::after{
  animation: layerDrift 12s ease-in-out infinite;
}

/* 7) Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important }
}
/* ---- Page-to-page header polish ---- */
:root{ --header-h: 72px; }
html{ scroll-behavior: smooth; }

.site-header{
  position: sticky; top: 0; z-index: 5;
  height: var(--header-h);
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(11,11,18,.55), rgba(11,11,18,.25));
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.is-scrolled .site-header{
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: linear-gradient(to bottom, rgba(11,11,18,.7), rgba(11,11,18,.32));
  border-color: rgba(255,255,255,.09);
}

.brand{ display:flex; align-items:center; gap:.6rem; }
.brand .dot{ width:10px; height:10px; border-radius:999px; background:#8b5cf6; box-shadow:0 0 18px #8b5cf6 }
.brand-text{ color:#e5e7eb; text-decoration:none; font-weight:800; letter-spacing:.4px }

.nav{ display:flex; align-items:center; gap:18px; }
.nav a{
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
  padding: 10px 2px;
  transition: color .15s ease;
}
.nav a:hover{ color: var(--ink) }

/* active link underline uses static purple, works across pages */
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, #a78bfa, #8b5cf6);
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.nav a:hover::after{ transform: scaleX(1) }
.nav a.is-active{ color: var(--ink) }
.nav a.is-active::after{ transform: scaleX(1) }

/* keep footer looking premium & sticky behavior intact from your existing CSS */