/* VeloX — публичный сайт. Тёмное «жидкое стекло» + аврора, единый бренд с кокпитом ORACLE.
   Статика, самодостаточно. Шрифты — Google Fonts (публичный маркетинговый сайт). */

:root{
  color-scheme: dark;
  --bg:#060910; --bg-2:#080C15; --solid:#0D131E; --panel:#0A1019;
  --glass:rgba(146,164,196,.07); --glass-brd:rgba(180,200,230,.12); --glass-hi:rgba(255,255,255,.10);
  --ink:#EAEFF6; --ink-soft:#A7B5C7; --ink-dim:#6C7C90;
  --rule:rgba(180,200,230,.14); --rule-soft:rgba(180,200,230,.07);
  --gold:#E6BA6A; --gold-2:#F0CE8C; --gold-bg:rgba(230,186,106,.12);
  --blue:#77ABFF; --blue-bg:rgba(119,171,255,.12);
  --green:#54D6A6;
  --violet:#8E74FF;
  --orb-a:rgba(230,186,106,.16); --orb-b:rgba(70,120,255,.20); --orb-c:rgba(142,116,255,.20);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 48px -28px rgba(0,0,0,.85);
  --glow:0 0 40px -8px rgba(230,186,106,.25);
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important; transition-duration:.001ms !important} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}

/* аврора + зерно */
.aurora{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.aurora i{position:absolute; border-radius:50%; filter:blur(70px); will-change:transform}
.aurora .a{width:60vw;height:60vw;left:-10vw;top:-15vw;background:var(--orb-b);animation:d1 26s ease-in-out infinite alternate}
.aurora .b{width:55vw;height:55vw;right:-15vw;top:18vh;background:var(--orb-c);animation:d2 32s ease-in-out infinite alternate}
.aurora .c{width:48vw;height:48vw;left:22vw;bottom:-22vw;background:var(--orb-a);animation:d3 30s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate3d(12vw,10vh,0) scale(1.15)}}
@keyframes d2{to{transform:translate3d(-14vw,-8vh,0) scale(1.1)}}
@keyframes d3{to{transform:translate3d(10vw,-14vh,0) scale(1.2)}}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
section{padding:72px 0; position:relative}
@media (max-width:640px){ section{padding:48px 0} }
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,7.5vw,4.2rem); line-height:1.04; letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem); line-height:1.12}
h3{font-family:var(--sans); font-size:1.12rem; font-weight:600; line-height:1.3; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}
.lede{font-size:clamp(1.05rem,2.6vw,1.22rem); line-height:1.58; color:var(--ink-soft); max-width:62ch}
.body{color:var(--ink-soft); max-width:66ch}
.body strong,.lede strong{color:var(--ink); font-weight:600}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}
.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:14px; margin-bottom:20px}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.kicker{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim)}
.note{font-size:.82rem; color:var(--ink-dim); line-height:1.55}
.stack{display:flex; flex-direction:column; gap:24px}
.stack-s{display:flex; flex-direction:column; gap:13px}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ .g3{grid-template-columns:1fr} }
@media (max-width:640px){ .g2{grid-template-columns:1fr} }

.card{position:relative; background:var(--glass); border:1px solid var(--glass-brd); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-hi),transparent 40%);opacity:.6;mix-blend-mode:overlay}
.card h3{margin-bottom:8px}

.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.11em; text-transform:uppercase; padding:5px 11px; border-radius:999px; font-weight:500;
  border:1px solid transparent; color:var(--gold); background:var(--gold-bg); border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.chip.blue{color:var(--blue); background:var(--blue-bg); border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}

.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:13px 22px; border-radius:10px; cursor:pointer;
  border:1px solid var(--glass-brd); background:var(--glass); color:var(--ink); transition:.2s; text-decoration:none}
.btn:hover{border-color:var(--gold); transform:translateY(-1px); text-decoration:none}
.btn.primary{background:linear-gradient(120deg,var(--gold-2),var(--gold)); color:#1a1206; border:none; box-shadow:0 8px 24px -8px var(--gold)}
.btn.primary:hover{box-shadow:0 12px 30px -8px var(--gold)}

ul.clean{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
ul.clean li{padding-left:22px;position:relative;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
ul.clean li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--gold-2),var(--gold));box-shadow:0 0 10px -2px var(--gold)}
ul.clean li strong{color:var(--ink)}

/* хедер */
.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--rule)}
.top .row{max-width:1080px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:18px}
.logo{font-family:var(--mono); font-weight:700; letter-spacing:.16em; color:var(--ink); font-size:1rem; text-decoration:none}
.logo b{color:var(--gold)}
.top nav{margin-left:auto; display:flex; gap:8px; align-items:center}
.top nav a{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  padding:8px 12px; border-radius:999px; text-decoration:none; transition:.2s}
.top nav a:hover{color:var(--ink)}
.top nav a.cta{color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
@media (max-width:560px){ .top nav a.hide-sm{display:none} }

/* герой */
.hero{padding-top:60px; padding-bottom:40px}
.wordmark{font-family:var(--mono); font-size:clamp(2.6rem,10vw,4.6rem); line-height:.9; letter-spacing:.04em;
  text-transform:uppercase; font-weight:800;
  background:linear-gradient(120deg,var(--ink),var(--ink) 55%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.wordmark-sub{font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-top:8px}
.divider{height:1px; background:linear-gradient(90deg,transparent,var(--rule),transparent); margin:8px 0}

/* дисклеймер-полоса */
.disclaimer{border:1px solid color-mix(in srgb,var(--gold) 26%,transparent); background:var(--gold-bg);
  border-radius:14px; padding:18px 20px; display:flex; gap:14px; align-items:flex-start}
.disclaimer .ic{font-family:var(--mono); color:var(--gold); font-weight:700; flex:none}
.disclaimer .tx{font-size:.86rem; color:var(--ink-soft); line-height:1.55}
.disclaimer .tx b{color:var(--ink)}

.buys{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border-radius:16px; overflow:hidden;
  background:var(--rule-soft); border:1px solid var(--glass-brd)}
.buys > div{padding:20px; background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.buys .v{font-family:var(--mono); font-size:1.5rem; letter-spacing:-.03em; font-weight:600; display:block; margin-bottom:4px}
.buys .k{font-size:.85rem; color:var(--ink-dim); line-height:1.4}
@media (max-width:760px){ .buys{grid-template-columns:1fr} }

.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:0}
@media (max-width:820px){ .flow{grid-template-columns:1fr} .flow .arr{transform:rotate(90deg);height:28px} }
.arr{display:grid; place-items:center; color:var(--gold); font-family:var(--mono); padding:0 6px}

/* футер */
footer{border-top:1px solid var(--rule); padding:40px 0 64px; margin-top:20px}
footer .cols{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
footer .fine{font-size:.78rem; color:var(--ink-dim); line-height:1.6; max-width:70ch; margin-top:20px}
footer a{color:var(--ink-soft)}