:root{
    --bg:#f8f9fc;
    --bg-alt:#eef1f7;
    --surface:#ffffff;
    --navy:#10131c;
    --navy-2:#1b2030;
    --navy-3:#232a3d;
    --line:rgba(16,19,28,.10);
    --line-strong:rgba(16,19,28,.18);
    --line-on-navy:rgba(255,255,255,.14);
    --text:#10131c;
    --text-dim:#5b6472;
    --text-faint:#8993a3;
    --text-on-navy:#eef1f7;
    --text-on-navy-dim:#9aa3b8;
    --blue:#2454e0;
    --cyan:#35d6f0;
    --grad:linear-gradient(120deg, var(--blue), var(--cyan));
    --ease:cubic-bezier(.16,.84,.24,1);
    --container:1240px;
    --shadow:0 24px 60px -32px rgba(16,19,28,.28);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Inter",-apple-system,sans-serif; font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  .disp{font-family:"Unbounded",sans-serif}
  .mono{font-family:"JetBrains Mono",monospace}
  h1,h2,h3{font-family:"Unbounded",sans-serif; font-weight:700; line-height:1.1; margin:0; letter-spacing:-.01em; color:var(--text)}
  a{color:inherit; text-decoration:none}
  ::selection{background:var(--cyan); color:#04151c}
  .wrap{max-width:var(--container); margin:0 auto; padding:0 32px}
  section{position:relative; z-index:1}
  section[id]{scroll-margin-top:92px}

  .grad-text{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ---------- nav ---------- */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:80;
    background:rgba(248,249,252,.82); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; height:78px}
  .brand{display:flex; align-items:center; gap:12px; font-family:"Unbounded"; font-weight:700; font-size:16px}
  .brand img{height:34px; width:auto; display:block}
  .brand .word b{color:var(--text); font-weight:700}
  .brand .word span{color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text; font-weight:700}
  nav.links{display:flex; align-items:center; gap:34px}
  nav.links a.navlink{font-size:14px; color:var(--text-dim); font-weight:500; transition:color .2s}
  nav.links a.navlink:hover{color:var(--text)}
  .btn{
    display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600;
    padding:12px 22px; border-radius:9px; border:1px solid var(--line-strong);
    transition:transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s;
    color:var(--text);
  }
  .btn.solid{background:var(--grad); border:none; color:#fff; box-shadow:0 14px 30px -14px rgba(36,84,224,.55)}
  .btn.solid:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(36,84,224,.6)}
  .btn.ghost:hover{border-color:var(--text-dim); background:rgba(16,19,28,.04)}
  .navmenu-btn{display:none}

  /* ---------- HERO ---------- */
  .hero{padding:150px 0 90px}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  .badge{
    display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
    border:1px solid var(--line-strong); font-size:12.5px; color:var(--text-dim); margin-bottom:26px;
    background:var(--surface); box-shadow:var(--shadow);
  }
  .badge i{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); display:inline-block; animation:blink 1.8s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
  .hero h1{font-size:clamp(34px,4.6vw,54px); max-width:14ch}
  .hero p.lede{color:var(--text-dim); font-size:18px; max-width:46ch; margin:24px 0 34px}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap}
  .hero-trust{display:flex; gap:30px; margin-top:44px; flex-wrap:wrap}
  .hero-trust div{font-size:13px; color:var(--text-faint)}
  .hero-trust strong{display:block; font-family:"Unbounded"; font-size:20px; color:var(--text); font-weight:700}

  /* monitor mockup */
  .monitor-wrap{position:relative}
  .monitor{
    position:relative; background:linear-gradient(155deg, var(--navy-3), var(--navy)); border-radius:18px;
    padding:16px; box-shadow:var(--shadow), 0 60px 90px -50px rgba(36,84,224,.35);
  }
  .monitor-inner{border-radius:9px; overflow:hidden; aspect-ratio:16/10.5; position:relative; background:linear-gradient(120deg, #121830, #1a3a8f, #0e2a6b, #1fb8d9, #121830); background-size:300% 300%; animation:monitorglow 10s ease-in-out infinite}
  @keyframes monitorglow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  #heroCanvas{width:100%; height:100%; display:block}
  .monitor-stand{width:64px; height:30px; margin:0 auto; background:linear-gradient(180deg, var(--navy-3), var(--navy)); border-radius:0 0 8px 8px}
  .monitor-base{width:140px; height:8px; margin:0 auto; background:var(--navy); border-radius:4px}
  .fly-squares{position:absolute; top:-10px; right:-46px; width:130px; height:130px; pointer-events:none}
  .fly-squares i{
    position:absolute; border-radius:5px; display:block; animation:flyfloat 5s ease-in-out infinite;
  }
  .fly-squares i:nth-child(1){width:22px; height:22px; top:0; right:70px; background:var(--cyan); animation-delay:0s}
  .fly-squares i:nth-child(2){width:26px; height:26px; top:22px; right:34px; background:var(--blue); animation-delay:.6s}
  .fly-squares i:nth-child(3){width:18px; height:18px; top:50px; right:0; background:var(--cyan); animation-delay:1.2s}
  .fly-squares i:nth-child(4){width:20px; height:20px; top:66px; right:46px; background:var(--blue); animation-delay:1.8s}
  .fly-squares i:nth-child(5){width:16px; height:16px; top:88px; right:14px; background:var(--cyan); opacity:.8; animation-delay:2.4s}
  @keyframes flyfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-8px)}}

  /* ---------- marquee ---------- */
  .marquee-wrap{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); overflow:hidden; padding:18px 0}
  .marquee{display:flex; gap:40px; width:max-content; animation:mq 32s linear infinite}
  .marquee span{font-family:"Unbounded"; font-size:13.5px; color:var(--text-faint); white-space:nowrap; display:flex; align-items:center; gap:40px; letter-spacing:.02em; font-weight:500}
  .marquee span::after{content:"◆"; font-size:7px; color:var(--cyan)}
  @keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}

  .band{padding:120px 0}
  .band.tight{padding:88px 0}
  .band.alt{background:var(--bg-alt)}
  .kicker{font-family:"JetBrains Mono"; font-size:12px; color:var(--blue); margin-bottom:16px; display:flex; align-items:center; gap:10px}
  .kicker::before{content:""; width:24px; height:1px; background:var(--blue)}
  h2.headline{font-size:clamp(27px,3.2vw,40px); max-width:17ch}
  .lede-2{color:var(--text-dim); font-size:17px; max-width:60ch; margin-top:18px}

  /* ---------- product / mock dashboard ---------- */
  .product-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center}
  .product-grid p{color:var(--text-dim); font-size:17px; max-width:46ch; margin-top:20px}

  .mockcard{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px;
    box-shadow:var(--shadow);
  }
  .mock-topbar{display:flex; align-items:center; gap:8px; margin-bottom:18px}
  .mock-topbar i{width:9px;height:9px;border-radius:50%; display:block}
  .mock-topbar i:nth-child(1){background:#ff5f57}
  .mock-topbar i:nth-child(2){background:#febc2e}
  .mock-topbar i:nth-child(3){background:#28c840}
  .mock-topbar span{margin-left:auto; font-family:"JetBrains Mono"; font-size:11px; color:var(--text-faint)}
  .mock-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  .mock-tile{
    aspect-ratio:4/3; border-radius:8px; background:var(--bg-alt); border:1px solid var(--line);
    position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:8px;
  }
  .mock-tile .st{font-family:"JetBrains Mono"; font-size:9.5px; color:var(--text-faint)}
  .mock-tile.on{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue), 0 0 18px -8px var(--blue)}
  .mock-tile.on .st{color:var(--blue); font-weight:600}
  .mock-tile .glow{position:absolute; inset:0; opacity:0; background:var(--grad); mix-blend-mode:multiply; transition:opacity .6s var(--ease)}
  .mock-tile.on .glow{opacity:.14}
  .mock-foot{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
  .mock-foot span{font-family:"JetBrains Mono"; font-size:11px; color:var(--text-faint)}
  .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan); display:inline-block; margin-right:6px; box-shadow:0 0 8px var(--cyan)}

  /* ---------- bento ---------- */
  .bento{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:220px; gap:16px; margin-top:56px}
  .bcard{
    grid-column:span 1; background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:26px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s var(--ease), box-shadow .25s;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .bcard:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow)}
  .bcard h3{font-size:17px; margin-bottom:8px}
  .bcard p{color:var(--text-dim); font-size:13.5px; margin:0; max-width:30ch}
  .bcard .tagno{position:absolute; top:22px; right:24px; font-family:"JetBrains Mono"; font-size:11px; color:var(--text-faint)}
  .bcard .ic{width:48px; height:48px; border-radius:12px; background:linear-gradient(150deg, rgba(36,84,224,.12), rgba(53,214,240,.12)); border:1px solid rgba(36,84,224,.16); display:flex; align-items:center; justify-content:center; margin-bottom:auto}

  /* ---------- full-service pillars ---------- */
  .fs-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:52px}
  .fs-item{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow)}
  .fs-item .ic{width:48px; height:48px; border-radius:12px; background:linear-gradient(150deg, rgba(36,84,224,.12), rgba(53,214,240,.12)); border:1px solid rgba(36,84,224,.16); display:flex; align-items:center; justify-content:center; margin-bottom:20px}
  .fs-item h3{font-size:17px; margin-bottom:8px}
  .fs-item p{color:var(--text-dim); font-size:13.5px; margin:0}

  .mini-chart{display:flex; align-items:flex-end; gap:5px; height:70px; margin-bottom:14px}
  .mini-chart i{flex:1; background:var(--grad); border-radius:3px 3px 0 0; animation:bar 3.4s ease-in-out infinite}
  @keyframes bar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

  /* ---------- stats band (dark) ---------- */
  .stats-band{background:linear-gradient(160deg, var(--navy-2), var(--navy)); padding:0}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-navy)}
  .stat-tile{background:var(--navy); padding:56px 30px; text-align:center}
  .stat-tile .num{font-family:"Unbounded"; font-size:clamp(30px,3.6vw,46px); font-weight:700}
  .stat-tile .lab{color:var(--text-on-navy-dim); font-size:13px; margin-top:10px}

  /* ---------- photo gallery ---------- */
  .photo-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:34px 24px; margin-top:56px}
  .pg-item{margin:0}
  .pg-frame{aspect-ratio:4/3; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); position:relative}
  .pg-frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease)}
  .pg-item:hover .pg-frame img{transform:scale(1.07)}
  .pg-caption{margin-top:14px}
  .pg-caption .k{display:block; font-family:"JetBrains Mono"; font-size:11px; color:var(--blue); margin-bottom:5px; letter-spacing:.03em; text-transform:uppercase}
  .pg-caption .t{font-size:14.5px; color:var(--text); font-weight:500; display:block}

  /* ---------- configurator ---------- */
  .configurator{display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; margin-top:56px; align-items:start}
  .config-panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow)}
  .cfg-group{margin-bottom:24px}
  .cfg-group:last-of-type{margin-bottom:20px}
  .cfg-label{display:block; font-size:12px; color:var(--text-dim); font-family:"JetBrains Mono"; margin-bottom:10px}
  .cfg-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
  .cfg-val{font-size:12px; color:var(--blue); font-weight:600}

  .seg{display:flex; border:1px solid var(--line-strong); border-radius:9px; padding:3px; gap:3px; background:var(--bg-alt)}
  .seg-btn{flex:1; background:transparent; border:none; color:var(--text-dim); font-size:12.5px; font-weight:500; padding:9px 6px; border-radius:6px; cursor:pointer; transition:background .2s, color .2s; font-family:"Inter"}
  .seg-btn.active{background:var(--grad); color:#fff; font-weight:600}

  .cfg-group input[type="text"]{width:100%; background:var(--bg-alt); border:1px solid var(--line-strong); border-radius:8px; color:var(--text); padding:11px 13px; font-family:"Inter"; font-size:14px}
  .cfg-group input[type="text"]:focus{outline:none; border-color:var(--blue)}

  .swatches{display:flex; gap:10px}
  .sw{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; background:rgb(var(--c)); box-shadow:0 0 0 1px var(--line-strong); transition:transform .18s var(--ease), box-shadow .18s}
  .sw.active{transform:scale(1.15); box-shadow:0 0 0 3px var(--surface), 0 0 0 5px rgb(var(--c))}

  input[type="range"]{-webkit-appearance:none; width:100%; height:4px; border-radius:4px; background:var(--line-strong); outline:none}
  input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(36,84,224,.18); cursor:pointer; margin-top:-1px}
  input[type="range"]::-moz-range-thumb{width:17px; height:17px; border-radius:50%; background:var(--blue); border:none; box-shadow:0 0 0 4px rgba(36,84,224,.18); cursor:pointer}

  .power-btn{width:100%; justify-content:center; margin-top:4px}
  .power-dot{width:8px; height:8px; border-radius:50%; background:#fff; display:inline-block}

  .config-screen{display:flex; flex-direction:column; align-items:center}
  .screen-rig{
    width:100%; background:linear-gradient(155deg, var(--navy-3), var(--navy)); border-radius:16px; padding:16px;
    border:1px solid var(--line-strong); position:relative; box-shadow:var(--shadow);
  }
  .rig-vent{position:absolute; top:8px; left:20px; width:60px; height:4px; border-radius:3px; background:rgba(255,255,255,.08)}
  .rig-inner{border-radius:7px; overflow:hidden; aspect-ratio:16/8; background:linear-gradient(120deg, #121830, #1a3a8f, #0e2a6b, #1fb8d9, #121830); background-size:300% 300%; animation:monitorglow 10s ease-in-out infinite; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  #ledOutput{width:100%; height:100%; display:block}
  .rig-led{position:absolute; bottom:10px; right:18px; width:7px; height:7px; border-radius:50%; background:#3ad67d; box-shadow:0 0 8px #3ad67d; transition:background .3s, box-shadow .3s}
  .rig-led.off{background:#7a3d43; box-shadow:0 0 6px rgba(255,90,100,.4)}
  .rig-stand{width:60px; height:26px; background:linear-gradient(180deg, var(--navy-3), var(--navy)); margin:0 auto; border-radius:0 0 6px 6px}
  .screen-meta{margin-top:16px; font-size:12px; color:var(--text-faint); text-align:center}
  .screen-meta span{color:var(--text-dim); font-weight:600}

  /* ---------- CTA band ---------- */
  .cta-band{
    background:radial-gradient(ellipse 90% 100% at 50% 0%, rgba(36,84,224,.08), transparent 60%), var(--bg-alt);
    border-top:1px solid var(--line); text-align:center; padding:150px 0; overflow:hidden; position:relative;
  }
  .cta-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
  .cta-veil{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(16,19,28,.72), rgba(16,19,28,.88)), linear-gradient(120deg, rgba(36,84,224,.35), rgba(53,214,240,.25))}
  .cta-band h2{font-size:clamp(30px,4vw,50px); max-width:16ch; margin:0 auto}
  .cta-band p{color:var(--text-dim); margin:20px auto 38px; max-width:44ch; font-size:17px}

  /* ---------- contact ---------- */
  .contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start}
  .contact-left p{color:var(--text-dim); font-size:16.5px; max-width:40ch; margin-top:18px}
  .contact-points{margin-top:32px; display:grid; gap:14px}
  .contact-points a.mail{color:var(--text); font-weight:600; font-size:16px; border-bottom:1px solid var(--line-strong)}
  .contact-points a.mail:hover{border-color:var(--blue); color:var(--blue)}
  .contact-points .sub{color:var(--text-faint); font-size:13px}

  form.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:36px; position:relative; overflow:hidden; box-shadow:var(--shadow)}
  form.card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad)}
  .field{margin-bottom:20px}
  .field label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:8px; font-family:"JetBrains Mono"}
  .field input, .field textarea{width:100%; background:var(--bg-alt); border:1px solid var(--line-strong); border-radius:8px; color:var(--text); padding:12px 14px; font-family:"Inter"; font-size:14.5px; transition:border-color .2s}
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--blue)}
  .field textarea{resize:vertical; min-height:100px}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  .hp{position:absolute; left:-9999px}
  .submit-row{display:flex; align-items:center; gap:16px; margin-top:6px}
  .form-note{font-size:12px; color:var(--text-faint)}

  footer{border-top:1px solid var(--line-on-navy); padding:46px 0; background:var(--navy); color:var(--text-on-navy-dim)}
  .foot-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
  .foot-brand{display:flex; align-items:center; gap:9px; font-family:"Unbounded"; font-weight:700; font-size:14px}
  .foot-brand b{color:#fff}
  .foot-brand span{color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text}
  .foot-links{display:flex; gap:24px; font-size:13px}
  .foot-links a:hover{color:#fff}

  .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.in{opacity:1; transform:translateY(0)}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

  @media (max-width:980px){
    .hero-grid, .product-grid, .contact-grid{grid-template-columns:1fr; gap:44px}
    .monitor-wrap{order:-1; max-width:460px; margin:0 auto}
    .bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:200px}
    .fs-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .configurator{grid-template-columns:1fr}
    .photo-grid{grid-template-columns:repeat(2,1fr); gap:28px 20px}
  }
  @media (max-width:760px){
    nav.links{position:fixed; inset:78px 0 0 0; background:var(--surface); flex-direction:column; align-items:flex-start; padding:30px; gap:22px; transform:translateX(100%); transition:transform .3s var(--ease); z-index:70}
    nav.links.open{transform:translateX(0)}
    .navmenu-btn{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:8px; background:transparent}
    .wrap{padding:0 20px}
    .bento{grid-template-columns:1fr}
    .bcard{grid-column:span 1 !important; grid-row:span 1 !important}
    .field-row{grid-template-columns:1fr}
    .mock-grid{grid-template-columns:repeat(2,1fr)}
    .fly-squares{display:none}
  }

/* Vision8 public website — supplied brand artwork, 18 October 2026. */
:root{color-scheme:dark;--bg:#020617;--bg-alt:#050b20;--surface:#0a1229;--navy:#020617;--navy-2:#07122a;--navy-3:#15203c;--line:rgba(169,192,255,.13);--line-strong:rgba(169,192,255,.27);--text:#f4f7ff;--text-dim:#b0bed8;--text-faint:#92a3c3;--text-on-navy:#f4f7ff;--text-on-navy-dim:#a6b7d2;--blue:#53bfff;--cyan:#17d8ff;--grad:linear-gradient(105deg,#17d8ff 0%,#6392ff 32%,#d968ff 61%,#ff78ac 80%,#ffd369 100%);--shadow:0 24px 70px -35px #000;--container:1280px}
body{background:var(--bg);font-family:Inter,Segoe UI,sans-serif}
h1,h2,h3{font-family:Inter,Segoe UI,sans-serif;letter-spacing:-.045em;line-height:1.12}
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;padding:12px 20px;background:white;color:#020617}
.skip-link:focus{top:12px}
header.site{background:rgba(2,6,23,.88);backdrop-filter:blur(20px);border-color:var(--line)}
.nav{height:86px}
.brand{display:inline-flex;flex-shrink:0}
.logo-window{position:relative;display:block;width:150px;height:58px;overflow:hidden;background:#020617}
.brand .logo-window img,.logo-window img{position:absolute;width:184px!important;height:138px!important;max-width:none!important;left:-17px;top:-29px;display:block;object-fit:contain}
nav.links{gap:28px}
nav.links a.navlink{font-size:13px;color:#b9c6df}
.btn{border-radius:7px;min-height:48px;padding:13px 22px;font-size:13px;letter-spacing:0}
.btn.solid{background:linear-gradient(115deg,#166bdb,#6e3cde 67%,#a12bc0);border:1px solid rgba(199,190,255,.3);box-shadow:0 8px 32px -10px #714eff88;color:white}
.btn.solid:hover{background:linear-gradient(115deg,#237cec,#804dea 67%,#b13acc);box-shadow:0 10px 35px -10px #8d6bff99}
.btn.ghost{background:rgba(18,29,54,.4);border-color:#314164}
.btn.ghost:hover{background:#14213c;border-color:#89a2d1}
.hero{padding:150px 0 0;position:relative;overflow:hidden;background:#020617}
.hero-halo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 25%,#0b277031,transparent 58%),radial-gradient(ellipse at 30% 60%,#4b0e8214,transparent 60%)}
.hero-grid{grid-template-columns:.95fr 1.15fr;gap:0;min-height:530px;position:relative}
.hero-copy{position:relative;z-index:2;padding:20px 0 50px}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 10px "JetBrains Mono",monospace;letter-spacing:.15em;color:#adbedf;margin-bottom:26px}
.eyebrow span{width:6px;height:6px;border-radius:50%;background:#17d8ff;box-shadow:0 0 14px #17d8ff}
.hero h1{font-size:clamp(48px,5vw,72px);font-weight:650;letter-spacing:-.065em;line-height:1.04;max-width:12ch;margin:0}
.hero-tagline{font-size:17px;color:#e1e9ff;letter-spacing:.025em;margin:27px 0 0}
.hero p.lede{font-size:15px;line-height:1.85;max-width:43ch;margin:18px 0 29px;color:#a5b6d5}
.hero-art{width:calc(100% + 95px);margin-left:-30px;pointer-events:none;position:relative}
.hero-art img{width:100%;height:auto;display:block;mask-image:radial-gradient(ellipse 64% 54% at 50% 50%,black 53%,transparent 98%)}
.hero-trust{gap:20px;margin-top:30px;align-items:center;color:#93a6c7;font-size:11px}
.hero-trust span{display:inline-flex;gap:7px;align-items:center}
.hero-trust span:before{content:'✓';color:#6bcee8}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;min-height:75px;border-top:1px solid var(--line);position:relative;font:10px "JetBrains Mono",monospace;letter-spacing:.12em;color:#9dacca}
.hero-bottom a{display:flex;gap:24px;align-items:center;letter-spacing:0}
.hero-bottom a span{color:var(--cyan);font-size:20px}
.marquee-wrap{background:#050b1c;padding:22px 0}
.marquee span{font-family:Inter,Segoe UI,sans-serif;font-size:12px;color:#91a3c3;letter-spacing:.07em;text-transform:uppercase}
.band{padding:110px 0}
.band.tight{padding:88px 0}
.band.alt{background:#050b1c}
.kicker{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#71d3ff}
.kicker:before{background:linear-gradient(90deg,#17d8ff,#d968ff);width:27px}
h2.headline{font-size:clamp(30px,3.4vw,46px);max-width:19ch;font-weight:600}
.product-grid p,.lede-2{font-size:15px;line-height:1.9}
.mockcard{padding:24px;background:linear-gradient(145deg,#0d1934,#080e20);border-radius:12px;box-shadow:0 25px 90px -40px #2441ca77;position:relative}
.mockcard:before{content:'';position:absolute;top:-1px;left:10%;width:80%;height:1px;background:var(--grad)}
.mock-tile{background:linear-gradient(130deg,#0e2b4b,#191245);aspect-ratio:1.3;border-color:#243756}
.mock-tile:nth-child(3n){background:linear-gradient(130deg,#281758,#382035)}
.mock-tile:nth-child(3n + 2){background:linear-gradient(130deg,#073d52,#10294e)}
.mock-tile.on{border-color:#5571b4;box-shadow:inset 0 0 25px #1356d522}
.mock-tile .glow{mix-blend-mode:screen}
.mock-tile.on .st{color:#d5e4ff}
.mock-foot{gap:12px;flex-wrap:wrap}
.mock-topbar span{font-size:10px}
.bento{grid-auto-rows:minmax(225px,auto);gap:16px;margin-top:42px}
.bcard{border-radius:9px;background:linear-gradient(145deg,#0c1630,#080e20);padding:25px}
.bcard h3,.fs-item h3{font-size:17px;letter-spacing:-.025em;line-height:1.3}
.bcard p,.fs-item p{font-size:13px;line-height:1.8}
.bcard .ic,.fs-item .ic{background:#122747;border-color:#244568;border-radius:9px;margin-bottom:25px;flex-shrink:0}
.ic svg [stroke]{stroke:#6ccfff}
.bcard:nth-child(3n + 2) .ic{background:#231a41;border-color:#46316e}
.bcard:nth-child(3n + 2) .ic svg [stroke]{stroke:#cf9aff}
.bcard:nth-child(3n) .ic{background:#30172f;border-color:#62315e}
.bcard:nth-child(3n) .ic svg [stroke]{stroke:#ff99c7}
.bcard:hover{border-color:#5b6199;box-shadow:0 10px 40px -22px #7762e866}
.fs-item{border-radius:9px;background:#0a1228;box-shadow:none}
.principles-band{border-block:1px solid var(--line);background:radial-gradient(ellipse at 50% 0,#15213d55,transparent 70%),#020617}
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.principles-grid>div{padding:45px 25px;border-right:1px solid var(--line)}
.principles-grid>div:first-child{padding-left:0}
.principles-grid>div:last-child{border-right:0}
.principles-grid span{display:block;font:9px "JetBrains Mono",monospace;letter-spacing:.12em;color:#91a6cc;margin-bottom:17px}
.principles-grid strong{font-size:24px;font-weight:500;letter-spacing:-.035em}
.principles-grid p{color:#99adcf;font-size:12px;margin-bottom:0}
.photo-grid{gap:30px 20px}
.pg-frame{border-radius:7px;aspect-ratio:1.15;background:#0d1934}
.pg-frame img{filter:saturate(.85)}
.pg-caption .k{font-size:9px;letter-spacing:.15em;color:#85bfff}
.pg-caption .t{font-size:13px}
.configurator{gap:45px;align-items:center}
.config-panel{border-radius:10px;background:#0b142a;padding:28px;box-shadow:none}
.seg-btn.active{background:#2357a5;color:#fff}
.seg-btn{min-height:44px}
.sw{width:32px;height:32px}
.swatches{gap:13px;flex-wrap:wrap;padding:5px}
.screen-rig{background:linear-gradient(145deg,#20304e,#090f23);border-radius:13px;box-shadow:0 35px 100px -40px #6c2fc388}
.screen-meta{font-size:10px}
.cta-band{padding:125px 0}
.cta-veil{background:linear-gradient(180deg,#020617b8,#020617f0),linear-gradient(110deg,#0035a077,#a1249655)}
.cta-band h2{font-size:clamp(38px,5.5vw,70px);font-weight:550;letter-spacing:-.055em}
.contact-left p{font-size:15px;line-height:1.9}
form.card{border-radius:10px;background:#0a1227;box-shadow:none}
form.card:before{height:2px}
.field input,.field textarea,.cfg-group input[type=text]{background:#050b1c;border-color:#2b3b5a;min-height:46px}
.field input:focus,.field textarea:focus{border-color:#79cfff;box-shadow:0 0 0 3px #3990ff20}
.field label{font:12px Inter,Segoe UI,sans-serif;color:#c4d0e7}
.submit-row{align-items:flex-start;flex-wrap:wrap}
.form-note{font-size:11px;max-width:29ch;line-height:1.7}
.navmenu-btn{color:white}
footer{padding:36px 0 26px}
.foot-grid{gap:20px 40px}
.foot-links{gap:22px;flex-wrap:wrap;align-items:center;font-size:12px}
.footer-baseline{width:100%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;font-size:10px;color:#94a7c9;gap:16px}
.reveal,.reveal.in{opacity:1;transform:none}
@media(min-width:1500px){.hero-grid{min-height:600px}.hero-art{width:calc(100% + 140px);margin-left:-20px}}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr 1fr;min-height:490px;gap:0}.hero h1{font-size:54px}.hero-art{width:calc(100% + 100px);margin-left:-40px}.hero-copy{padding:15px 0 45px}.hero p.lede{font-size:14px}.hero-actions{gap:10px}.hero-actions .btn{padding:12px 15px}.bento{grid-auto-rows:minmax(205px,auto)}.product-grid,.contact-grid{gap:45px}.fs-grid{grid-template-columns:repeat(3,1fr);gap:14px}.fs-item{padding:22px}}
@media(max-width:760px){.nav{height:74px}.logo-window{transform:scale(.88);transform-origin:left center;width:150px}.hero{padding-top:105px}.hero-grid{display:flex;flex-direction:column;gap:0;min-height:0}.hero-copy{padding:10px 0 0;width:100%}.hero h1{font-size:clamp(47px,9.4vw,66px);max-width:15ch}.eyebrow{font-size:9px;margin-bottom:22px}.hero-tagline{font-size:15px;margin-top:23px}.hero p.lede{font-size:14px;max-width:44ch}.hero-trust{margin-top:22px;font-size:10px;gap:16px}.hero-art{width:100%;max-width:600px;margin:-5px auto -24px}.hero-art img{mask-image:radial-gradient(ellipse 70% 52% at 50% 50%,black 57%,transparent 100%)}.hero-bottom{font-size:8px;min-height:64px;gap:14px}.hero-bottom a{gap:10px}.hero-bottom a span{font-size:16px}nav.links{inset:74px 0 auto 0;max-height:calc(100dvh - 74px);overflow-y:auto;background:#060c20;display:none;padding:26px;border-bottom:1px solid #273652;gap:23px;transform:none}nav.links.open{display:flex}.navmenu-btn{width:44px;height:44px}.hero-actions .btn{font-size:12px;padding:12px 15px}.band,.band.tight{padding:70px 0}.fs-grid{grid-template-columns:1fr;gap:15px}.fs-item{padding:25px}.principles-grid{grid-template-columns:1fr 1fr}.principles-grid>div{padding:28px 17px;border-bottom:1px solid var(--line)}.principles-grid>div:nth-child(2n){border-right:0}.principles-grid>div:first-child{padding-left:17px}.principles-grid>div:nth-child(n+3){border-bottom:0}.principles-grid strong{font-size:23px}.principles-grid span{font-size:8px}.principles-grid p{font-size:11px}.bento{margin-top:30px;grid-auto-rows:auto}.bcard{padding:24px}.bcard .ic{margin-bottom:22px}.bcard p{max-width:none}.mockcard{padding:17px}.mock-topbar span{font-size:9px}.mock-foot span{font-size:9px}.photo-grid{gap:26px 14px;margin-top:32px}.pg-caption .t{font-size:12px}.pg-caption .k{font-size:8px}.pg-frame{aspect-ratio:1}.configurator{gap:35px;margin-top:32px}.config-panel{padding:22px}.seg-btn{font-size:11px}.screen-meta{font-size:9px}.contact-grid{gap:35px}form.card{padding:25px}.cta-band{padding:90px 0}.foot-links{gap:15px;font-size:11px}.footer-baseline{font-size:9px;flex-wrap:wrap}.marquee span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}.badge i,.rig-inner{animation:none}*{scroll-behavior:auto!important}}