:root { --blue:#0874ff; --white:#f7f8fc; --muted:#d1d6e2; --line:rgba(151,171,202,.25); --navy:#001027; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { position:relative; margin:0; min-width:320px; overflow-x:hidden; color:var(--white); font-family:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; background:radial-gradient(circle at 50% 49%,rgba(0,66,168,.13),transparent 33%),linear-gradient(115deg,#001027 0%,#000a1b 52%,#001027 100%); }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { color:inherit; } a { color:inherit; text-decoration:none; }
.wrap { width:calc(100% - 66px); max-width:958px; margin-inline:auto; }
.site-header { height:132px; display:flex; align-items:flex-start; justify-content:space-between; padding-top:36px; }
.brand { display:inline-flex; align-items:center; gap:17px; transition:opacity .3s ease; }
.brand-mark { position:relative; width:58px; height:58px; display:grid; place-items:center; overflow:hidden; border:2px solid #f8f8f8; color:white; font-size:37px; line-height:1; }
.brand-mark span { z-index:1; transform:translateY(-5px); }
.brand-mark i { position:absolute; inset:auto 0 0; height:13px; background:linear-gradient(90deg,#0366ff 0 34%,#24afff 34% 68%,#86cdf3 68%); transition:height .35s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark i { height:18px; }
.brand-name { font-size:34px; font-weight:700; letter-spacing:-1.5px; } .brand-name span { color:#126dff; }
nav { display:flex; align-items:center; gap:24px; padding-top:6px; } nav a { font-size:16px; font-weight:700; }
nav a { position:relative; } nav a::after { content:""; position:absolute; right:0; bottom:-8px; left:0; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:right; transition:transform .3s ease; } nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.nav-rule { width:1px; height:29px; background:rgba(255,255,255,.13); }
.outline-button { --move-x:0px; --move-y:0px; width:127px; height:51px; border:1px solid var(--blue); border-radius:7px; background:rgba(0,70,180,.04); font-weight:700; font-size:16px; cursor:pointer; transform:translate(var(--move-x),var(--move-y)); transition:transform .25s ease,background .25s ease,box-shadow .25s ease; }
.outline-button:hover { background:rgba(0,104,255,.12); box-shadow:0 0 26px rgba(0,106,255,.14),inset 0 0 16px rgba(0,106,255,.08); }
.hero { padding-top:82px; text-align:center; }
.hero h1 { max-width:680px; margin:19px auto 0; font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif; font-size:142px; font-weight:600; line-height:.9; letter-spacing:-7px; }
.hero h1 span { display:inline-block; animation:headline-in 1.3s .18s both cubic-bezier(.16,1,.3,1); }
.hero h1 strong { display:block; color:#075ef3; font-weight:700; line-height:.94; background:linear-gradient(105deg,#0767ff 20%,#0087ff 48%,#0754e8 76%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:headline-in 1.4s .34s both cubic-bezier(.16,1,.3,1),blue-shift 12s 1.8s ease-in-out infinite; }
.accent-rule { display:block; width:71px; height:2px; margin:39px auto 33px; background:var(--blue); }
.tagline { max-width:680px; margin:0 auto; color:#d8dbe7; font-size:31px; font-weight:300; line-height:1.52; letter-spacing:.7px; text-wrap:balance; }
.features { max-width:735px; margin:59px auto 0; display:grid; grid-template-columns:repeat(4,1fr); }
.feature { position:relative; min-height:122px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; border-right:1px solid rgba(196,208,229,.28); border-radius:10px 0 0 10px; font-size:17px; transition:background .35s ease,color .35s ease,transform .35s cubic-bezier(.16,1,.3,1); }
.feature:last-child { border:0; } .feature svg { width:66px; height:72px; fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s cubic-bezier(.16,1,.3,1),filter .35s ease; } .feature span { padding-bottom:2px; transition:letter-spacing .35s ease; }
.feature:hover { z-index:1; color:white; background:linear-gradient(180deg,rgba(11,105,255,.08),rgba(11,105,255,0)); transform:translateY(-6px); }
.feature:hover svg { transform:scale(1.08) translateY(-2px); filter:drop-shadow(0 7px 12px rgba(0,105,255,.28)); }
.feature:hover>span { letter-spacing:.7px; }
.feature svg path,.feature svg rect,.feature svg circle,.factory path { stroke-dasharray:180; stroke-dashoffset:180; }
.feature.is-visible svg path,.feature.is-visible svg rect,.feature.is-visible svg circle { animation:draw-line 1.4s cubic-bezier(.65,0,.35,1) forwards; animation-delay:calc(var(--delay,0ms) + 180ms); }
.manufacturer.is-visible .factory path { animation:draw-line 1.65s .3s cubic-bezier(.65,0,.35,1) forwards; }
.notify-button { --move-x:0px; --move-y:0px; position:relative; isolation:isolate; overflow:hidden; width:299px; height:81px; margin-top:72px; display:inline-flex; justify-content:center; align-items:center; gap:22px; border:1px solid rgba(110,175,255,.26); border-radius:10px; background:linear-gradient(115deg,#096efc,#0056ed); box-shadow:0 18px 48px rgba(0,81,255,.19),inset 0 1px rgba(255,255,255,.18); font-size:25px; font-weight:700; cursor:pointer; transform:translate(var(--move-x),var(--move-y)); transition:transform .28s ease,filter .25s ease,box-shadow .3s ease; }
.notify-button:hover { filter:brightness(1.09); box-shadow:0 22px 58px rgba(0,91,255,.28),inset 0 1px rgba(255,255,255,.22); } .notify-button svg { position:relative; z-index:1; width:34px; fill:none; stroke:white; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s ease; } .notify-button>span:last-child { position:relative; z-index:1; }
.notify-button:hover svg { transform:translateY(-2px) rotate(-3deg); }
.button-sheen { position:absolute; z-index:0; top:-60%; left:-35%; width:28%; height:220%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent); transform:rotate(18deg); animation:button-sheen 8.5s 2.5s ease-in-out infinite; }
.manufacturer { --spot-x:50%; --spot-y:50%; position:relative; overflow:hidden; max-width:884px; min-height:258px; margin-top:63px; padding:48px 52px; display:grid; grid-template-columns:62% 38%; align-items:center; border:1px solid var(--line); border-radius:14px; background:radial-gradient(300px circle at var(--spot-x) var(--spot-y),rgba(18,111,255,.12),transparent 70%),rgba(4,25,57,.43); box-shadow:0 24px 70px rgba(0,0,0,.12); transition:border-color .35s ease,box-shadow .35s ease; }
.manufacturer:hover { border-color:rgba(54,129,243,.38); box-shadow:0 28px 80px rgba(0,20,60,.24); }
.manufacturer-main { display:flex; align-items:center; gap:36px; } .factory { width:91px; flex:0 0 91px; fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linejoin:round; }
.manufacturer h2 { margin:0 0 23px; font-size:27px; } .manufacturer-main p { margin:0 0 43px; color:var(--muted); font-size:18px; }
.manufacturer-main a { position:relative; display:inline-flex; align-items:center; color:var(--blue); font-size:18px; } .manufacturer-main a span { margin-left:13px; font-size:30px; vertical-align:-2px; transition:transform .3s ease; }
.manufacturer-main a::after { content:""; position:absolute; right:42px; bottom:-5px; left:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.manufacturer-main a:hover::after { transform:scaleX(1); } .manufacturer-main a:hover span { transform:translateX(7px); }
.manufacturer-benefits { min-height:155px; padding:6px 0 0 35px; border-left:1px solid var(--line); }
.manufacturer-benefits p { display:flex; gap:18px; margin:8px 0 22px; font-size:17px; line-height:1.75; }
.manufacturer-benefits span { width:23px; height:23px; margin-top:3px; display:grid; place-items:center; flex:0 0 23px; border:2px solid var(--blue); border-radius:50%; color:var(--blue); font-size:13px; }
.site-footer { height:148px; margin-top:59px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid var(--line); }
.footer-brand { gap:17px; } .footer-brand .brand-mark { width:51px; height:56px; font-size:34px; } .footer-brand .brand-name { font-size:30px; }
.site-footer>p { color:#c4c9d5; font-size:14px; } .socials { justify-self:end; display:flex; align-items:center; gap:37px; }
.socials a { width:28px; height:28px; display:grid; place-items:center; color:#f5f6f9; font-size:25px; font-weight:700; }
.socials a:first-child { color:var(--navy); background:#f5f6f9; border-radius:3px; font-size:20px; align-items:end; } .socials a:last-child { border-radius:50%; background:#f5f6f9; color:var(--navy); align-items:end; }
.socials svg { width:29px; fill:none; stroke:currentColor; stroke-width:2.5; }
dialog { width:min(530px,calc(100% - 32px)); padding:45px; overflow:hidden; border:1px solid rgba(36,121,255,.5); border-radius:14px; color:white; background:radial-gradient(circle at 85% 0,rgba(0,113,255,.18),transparent 36%),#061733; box-shadow:0 30px 100px rgba(0,0,0,.65); }
dialog[open] { animation:dialog-in .58s cubic-bezier(.16,1,.3,1); }
dialog::backdrop { background:rgba(0,7,20,.78); backdrop-filter:blur(5px); } .dialog-close { position:absolute; top:12px; right:17px; border:0; background:none; font-size:30px; cursor:pointer; }
dialog .eyebrow { font-size:12px; letter-spacing:5px; } dialog h2 { margin:13px 0 8px; font-size:38px; } dialog>p:not(.eyebrow) { color:var(--muted); }
dialog label { display:block; margin:25px 0 8px; font-size:13px; } .form-row { display:flex; } .form-row input { min-width:0; flex:1; padding:14px; border:1px solid #52657e; border-radius:6px 0 0 6px; color:white; background:#001027; outline:none; }
.form-row input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,111,255,.12); } .form-row button { min-width:119px; padding:0 18px; border:0; border-radius:0 6px 6px 0; background:#0058f4; cursor:pointer; transition:background .25s ease; } .form-row button:hover { background:#1175ff; } .form-row button:disabled { cursor:wait; opacity:.8; } .form-message { min-height:20px; margin-bottom:0; color:#65a9ff; }
.form-row button.is-loading span { display:none; } .form-row button.is-loading::after { content:""; display:inline-block; width:17px; height:17px; border:2px solid rgba(255,255,255,.4); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
.dialog-icon { float:right; width:46px; height:46px; margin:-10px 0 10px 20px; display:grid; place-items:center; border:1px solid rgba(49,135,255,.35); border-radius:50%; background:rgba(0,102,255,.08); }
.dialog-icon span { width:16px; height:11px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg) translate(-2px,-2px); }

.site-header,main,.site-footer { position:relative; z-index:1; }
.ambient-canvas { position:fixed; z-index:0; inset:0; pointer-events:none; }
.cursor-glow { position:fixed; z-index:0; top:-230px; left:-230px; width:460px; height:460px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(0,105,255,.105),rgba(0,105,255,.035) 38%,transparent 70%); will-change:transform; }
.page-grain { position:fixed; z-index:0; inset:0; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity 1.05s ease var(--delay,0ms),transform 1.05s cubic-bezier(.16,1,.3,1) var(--delay,0ms); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.feature.is-visible:hover { transform:translateY(-6px); }

:focus-visible { outline:2px solid #62a8ff; outline-offset:4px; }

@keyframes headline-in { from { opacity:0; transform:translateY(35px); filter:blur(7px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes blue-shift { 0%,100% { background-position:0 center; } 50% { background-position:100% center; } }
@keyframes button-sheen { 0%,70% { left:-35%; } 88%,100% { left:125%; } }
@keyframes dialog-in { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes draw-line { to { stroke-dashoffset:0; } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .ambient-canvas,.cursor-glow { display:none; }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 34px); } .site-header { height:104px; padding-top:24px; } .brand { gap:10px; } .brand-mark { width:43px; height:43px; font-size:27px; } .brand-mark i { height:9px; } .brand-name { font-size:23px; }
  nav a,.nav-rule { display:none; } .outline-button { width:100px; height:43px; font-size:13px; } .hero { padding-top:58px; }
  .hero h1 { margin-top:20px; font-size:clamp(62px,20vw,90px); letter-spacing:-4px; line-height:1.08; } .accent-rule { margin-block:34px 25px; } .tagline { max-width:350px; font-size:25px; line-height:1.5; }
  .features { grid-template-columns:repeat(2,1fr); gap:32px 0; margin-top:50px; } .feature:nth-child(2) { border:0; } .notify-button { margin-top:55px; }
  .manufacturer { grid-template-columns:1fr; padding:32px 24px; } .manufacturer-main { align-items:flex-start; gap:19px; } .factory { width:61px; flex-basis:61px; } .manufacturer h2 { font-size:22px; }
  .manufacturer-main p { line-height:1.5; margin-bottom:25px; } .manufacturer-benefits { margin-top:35px; padding:25px 0 0; border-top:1px solid var(--line); border-left:0; }
  .site-footer { height:auto; padding-block:38px; grid-template-columns:1fr auto; gap:30px; } .footer-brand .brand-name { font-size:23px; } .site-footer>p { grid-column:1/-1; grid-row:2; text-align:center; } .socials { gap:17px; }
}
@media (max-width:430px) {
  .site-header .brand-name,.footer-brand .brand-name { display:none; } .feature { font-size:14px; } .notify-button { width:100%; } .manufacturer-main { display:block; } .factory { margin-bottom:20px; }
  dialog { padding:38px 24px 28px; } .form-row { display:block; } .form-row input,.form-row button { width:100%; height:48px; border-radius:5px; } .form-row button { margin-top:10px; }
}