:root{
  --bg:#02050a;
  --bg-soft:#050b13;
  --bg2:#07111d;
  --panel:#09121d;
  --panel-2:#0d1724;
  --text:#f4f8ff;
  --muted:#8fa3b8;
  --line:rgba(79,184,255,.18);
  --line-strong:rgba(79,184,255,.34);
  --electric:#16c7ff;
  --blue:#008cff;
  --blue-deep:#004dff;
  --silver:#c8d3df;
  --steel:#708092;
  --shadow:0 22px 80px rgba(0,0,0,.46);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 78% 8%,rgba(0,112,255,.20),transparent 22%),
    radial-gradient(circle at 18% 24%,rgba(0,168,255,.08),transparent 25%),
    linear-gradient(180deg,#02050a 0%,#050a12 42%,#02050a 100%);
}
body:before{
  content:"";
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(26,156,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,156,255,.032) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 88%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 88%);
}
body:after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.24;
  background:
    radial-gradient(circle at 50% 0,rgba(0,174,255,.28),transparent 32%),
    repeating-radial-gradient(circle at 70% 12%,rgba(39,143,255,.10) 0 1px,transparent 1px 19px);
}
a{color:inherit;text-decoration:none}
button,select{font:inherit}
::selection{background:rgba(0,166,255,.28);color:#fff}
.container{width:min(1180px,calc(100% - 40px));margin:auto}

header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px) saturate(150%);
  background:linear-gradient(180deg,rgba(2,5,10,.90),rgba(4,9,15,.72));
  border-bottom:1px solid rgba(79,184,255,.15);
  box-shadow:0 12px 40px rgba(0,0,0,.20);
}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em}
.brand-mark{
  width:42px;height:42px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  border:1px solid rgba(79,184,255,.30);
  background:#020812;
  box-shadow:0 0 28px rgba(0,145,255,.20),inset 0 0 22px rgba(0,145,255,.08);
}
.brand-mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.brand-name{
  font-size:15px;
  background:linear-gradient(180deg,#f4f8ff 0%,#9eacbc 52%,#eef6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 20px rgba(74,181,255,.12);
}
.navlinks{display:flex;gap:30px;font-size:13px;color:#bdc7d3}
.navlinks a{position:relative;padding:9px 0;transition:.2s ease}
.navlinks a:after{
  content:"";position:absolute;left:0;right:100%;bottom:1px;height:1px;
  background:linear-gradient(90deg,var(--electric),transparent);transition:.2s ease
}
.navlinks a:hover{color:#fff}
.navlinks a:hover:after{right:0}
.nav-actions{display:flex;align-items:center;gap:10px}
.talk,.lang-select{
  min-height:40px;border:1px solid rgba(79,184,255,.22);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  color:#e8f3ff;
}
.talk{
  display:inline-flex;align-items:center;padding:0 15px;font-size:13px;font-weight:800;
  box-shadow:inset 0 0 18px rgba(0,145,255,.035);transition:.2s ease
}
.talk:hover{border-color:rgba(22,199,255,.58);box-shadow:0 0 26px rgba(0,139,255,.13)}
.lang-wrap{position:relative}
.lang-select{
  appearance:none;-webkit-appearance:none;min-width:136px;padding:0 35px 0 13px;
  font-size:12px;font-weight:800;cursor:pointer;outline:none
}
.lang-wrap:after{content:"⌄";position:absolute;right:13px;top:50%;transform:translateY(-56%);color:#75cfff;pointer-events:none}
.lang-select:focus{border-color:rgba(22,199,255,.60);box-shadow:0 0 0 3px rgba(0,151,255,.10)}
.lang-select option{background:#07111d;color:#eef7ff}

.hero{
  position:relative;min-height:760px;display:grid;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 74% 47%,rgba(0,145,255,.19),transparent 25%),
    radial-gradient(circle at 78% 48%,transparent 0 31%,rgba(0,145,255,.13) 31.2% 31.5%,transparent 31.7% 38%,rgba(0,145,255,.08) 38.2% 38.5%,transparent 38.7%);
}
.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  align-items:center;gap:46px;padding:92px 0 76px
}
.brand-signal{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  color:#84dfff;font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase
}
.brand-signal:before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--electric),transparent)}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.19em;color:#c5d3e0;margin-bottom:24px}
.eyebrow .star{color:var(--electric);font-size:16px;margin-right:10px;text-shadow:0 0 18px rgba(22,199,255,.8)}
h1{
  font-size:clamp(54px,7.2vw,98px);line-height:.92;letter-spacing:-.055em;margin:0 0 28px;font-weight:650;
  background:linear-gradient(180deg,#ffffff 3%,#d6e0e9 42%,#8e9dad 73%,#eaf6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.30));
}
.lead{font-size:18px;line-height:1.67;color:var(--muted);max-width:640px}
.actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:10px;
  font-weight:850;font-size:13px;letter-spacing:.02em;transition:.22s ease;
}
.btn.primary{
  color:#f8fbff;border:1px solid rgba(67,190,255,.48);
  background:linear-gradient(135deg,#0048d9 0%,#007dff 42%,#11c6ff 100%);
  box-shadow:0 14px 34px rgba(0,108,255,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,126,255,.32)}
.btn.secondary{
  color:#e9f4ff;border:1px solid rgba(177,204,228,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018))
}
.btn.secondary:hover{border-color:rgba(22,199,255,.42);background:rgba(0,131,255,.08)}

.art{position:relative;min-height:560px;display:grid;place-items:center;isolation:isolate}
.art:before,.art:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.art:before{
  width:min(520px,88vw);aspect-ratio:1;border:1px solid rgba(65,169,255,.22);
  box-shadow:0 0 0 34px rgba(50,153,255,.035),0 0 0 70px rgba(50,153,255,.022),0 0 90px rgba(0,126,255,.16);
  animation:orbitPulse 4.6s ease-in-out infinite;
}
.art:after{
  width:92%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(62,186,255,.45),transparent);
  box-shadow:0 -120px 0 rgba(0,116,255,.08),0 120px 0 rgba(0,116,255,.08)
}
.hud-rings{
  position:absolute;width:min(500px,84vw);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(57,167,255,.28);
  animation:spin 30s linear infinite;
}
.hud-rings:before,.hud-rings:after{
  content:"";position:absolute;border-radius:50%;inset:8%;
  border:1px dotted rgba(76,183,255,.23)
}
.hud-rings:after{inset:19%;border-style:solid;border-color:rgba(0,127,255,.18);animation:spinReverse 18s linear infinite}
.mark-shell{
  position:relative;z-index:2;width:min(420px,74vw);aspect-ratio:1;border-radius:28px;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(0,105,255,.14),rgba(1,4,9,.72) 68%);
  border:1px solid rgba(94,190,255,.18);
  box-shadow:var(--shadow),0 0 70px rgba(0,113,255,.15),inset 0 0 50px rgba(0,120,255,.05);
}
.mark-shell:before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 43%,rgba(255,255,255,.08) 48%,transparent 52% 100%);
  transform:translateX(-130%);animation:sweep 6s ease-in-out infinite 1s
}
.mark-shell img{width:100%;height:100%;object-fit:cover;display:block}
.art-status{
  position:absolute;z-index:4;bottom:26px;display:flex;align-items:center;gap:10px;
  padding:9px 12px;border:1px solid rgba(89,190,255,.24);border-radius:999px;
  background:rgba(2,7,13,.80);backdrop-filter:blur(12px);color:#8fddff;
  font-size:10px;font-weight:900;letter-spacing:.18em
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#17d7ff;box-shadow:0 0 14px #17d7ff;animation:pulse 1.8s ease-in-out infinite}

.ticker{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(9,17,29,.78),rgba(4,8,14,.92));
}
.ticker div{
  padding:20px 18px;font-size:11px;font-weight:900;letter-spacing:.13em;color:#9eafbf;
  border-right:1px solid var(--line);position:relative
}
.ticker div:before{content:"";position:absolute;left:18px;bottom:-1px;width:38px;height:1px;background:var(--electric);box-shadow:0 0 12px var(--electric)}
section{position:relative;padding:96px 0;border-bottom:1px solid var(--line)}
section:before{
  content:"";position:absolute;top:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,199,255,.10),transparent);pointer-events:none
}
.section-kicker{font-size:11px;letter-spacing:.20em;color:#78cfff;font-weight:900;margin-bottom:13px}
.section-title{
  font-size:clamp(40px,5vw,70px);line-height:1.02;letter-spacing:-.045em;margin:0 0 42px;font-weight:620;
  background:linear-gradient(180deg,#f7fbff,#9aa8b7 74%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(13,25,39,.92),rgba(4,10,17,.92));
  border:1px solid rgba(83,179,246,.19);border-radius:22px;padding:24px;min-height:450px;
  display:flex;flex-direction:column;box-shadow:0 22px 56px rgba(0,0,0,.20);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease
}
.card:before{
  content:"";position:absolute;inset:-1px;pointer-events:none;opacity:.6;
  background:linear-gradient(135deg,rgba(22,199,255,.12),transparent 24%,transparent 72%,rgba(0,90,255,.09));
}
.card:after{
  content:"";position:absolute;top:0;left:24px;width:78px;height:2px;
  background:linear-gradient(90deg,var(--electric),transparent);box-shadow:0 0 16px rgba(22,199,255,.7)
}
.card:hover{transform:translateY(-5px);border-color:rgba(22,199,255,.42);box-shadow:0 28px 72px rgba(0,88,180,.13)}
.card .num{position:relative;z-index:2;color:#7fcfff;font-size:11px;font-weight:850;letter-spacing:.11em}
.card h3{position:relative;z-index:2;font-size:28px;margin:18px 0 10px}
.card p{position:relative;z-index:2;color:var(--muted);line-height:1.58}.card .spacer{flex:1}
.visual{
  position:relative;z-index:2;height:165px;border-radius:16px;margin:18px 0;overflow:hidden;
  border:1px solid rgba(92,188,255,.17);
  background:
    linear-gradient(rgba(0,137,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,137,255,.06) 1px,transparent 1px),
    radial-gradient(circle at 72% 28%,rgba(0,183,255,.23),transparent 30%),
    linear-gradient(135deg,#0b1522,#04080e 72%);
  background-size:22px 22px,22px 22px,auto,auto;
}
.visual:before,.visual:after{content:"";position:absolute;border:1px solid rgba(32,182,255,.44)}
.visual:before{width:88px;height:88px;border-radius:50%;right:18px;top:20px;box-shadow:0 0 0 16px rgba(0,134,255,.025)}
.visual:after{width:30px;height:30px;left:17px;bottom:16px;border-right:0;border-top:0}
.visual-code{
  position:absolute;left:20px;top:22px;font-size:44px;font-weight:900;letter-spacing:-.06em;
  background:linear-gradient(180deg,#f0f7ff,#7e8d9d);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(0,165,255,.25))
}
.visual-name{
  position:absolute;left:20px;bottom:18px;font-size:10px;font-weight:900;letter-spacing:.17em;color:#7bd5ff;text-transform:uppercase
}
.more{position:relative;z-index:2;font-weight:850;font-size:13px;color:#e6f5ff}
.more:hover{color:#66d7ff}
.two{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:start}
.values{display:grid;gap:8px}
.value{
  position:relative;padding:21px 0 21px 17px;border-top:1px solid var(--line);
  background:linear-gradient(90deg,rgba(0,125,255,.045),transparent 50%)
}
.value:before{content:"";position:absolute;left:0;top:21px;width:4px;height:4px;border-radius:50%;background:var(--electric);box-shadow:0 0 10px var(--electric)}
.value b{display:block;margin-bottom:7px}.value span{color:var(--muted)}
.footer{
  position:relative;padding:54px 0 42px;
  background:linear-gradient(180deg,rgba(5,11,19,.84),rgba(1,3,7,.98));
}
.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.35}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.footer small,.footer a{color:#8295a8}.footer a:hover{color:#7bdcff}
.footer .brand{margin-bottom:16px}
.page-hero{
  padding:118px 0 82px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 24%,rgba(0,128,255,.15),transparent 26%),
    linear-gradient(180deg,rgba(5,13,23,.62),rgba(2,5,10,.2));
}
.page-hero h1{font-size:clamp(48px,7vw,86px)}
.list{display:grid;gap:14px;padding-left:20px}.list li{color:var(--muted);line-height:1.65}
.faq{display:grid;gap:8px}
.faq details{
  border:1px solid rgba(83,179,246,.13);border-radius:14px;padding:18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01))
}
.faq details[open]{border-color:rgba(22,199,255,.28)}
.faq summary{cursor:pointer;font-weight:800}.faq p{color:var(--muted);line-height:1.6}
.notice{
  padding:16px 18px;border:1px solid rgba(83,179,246,.20);
  background:linear-gradient(90deg,rgba(0,119,255,.08),rgba(255,255,255,.015));
  border-radius:12px;color:#9fb3c5
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes pulse{50%{opacity:.35;transform:scale(.72)}}
@keyframes orbitPulse{50%{box-shadow:0 0 0 44px rgba(50,153,255,.03),0 0 0 84px rgba(50,153,255,.015),0 0 105px rgba(0,126,255,.20)}}
@keyframes sweep{0%,20%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}
@media(max-width:920px){
  .navlinks{display:none}
  .hero-grid,.two{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-grid{padding-top:72px}
  .art{min-height:470px;margin-top:10px}
  .products{grid-template-columns:1fr}
  .ticker{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,1180px)}
  .nav{height:70px;gap:8px}
  .brand-name{display:none}
  .brand-mark{width:38px;height:38px}
  .nav-actions{gap:7px}
  .lang-select{min-width:124px;padding-left:11px;font-size:11px}
  .talk{display:none}
  .hero-grid{padding:62px 0 54px}
  h1{font-size:clamp(48px,15vw,68px)}
  .lead{font-size:16px}
  .art{min-height:390px}
  .mark-shell{width:min(330px,86vw);border-radius:22px}
  .hud-rings{width:min(360px,92vw)}
  .art-status{bottom:8px}
  .ticker{grid-template-columns:1fr}
  .ticker div{border-right:0;border-bottom:1px solid var(--line)}
  section{padding:74px 0}
  .card{min-height:420px}
  .page-hero{padding:90px 0 64px}
}