/* ===== Palette: тёмный + золото ===== */
:root{
  --bg:#0b0f16; --layer1:#0f151f; --card:#101826;
  --text:#eaeaf0; --muted:#9aa2b3; --border:rgba(255,255,255,.08);
  --gold1:#d9c07a; --gold2:#b59034;
  --violet:#7c3aed; --cyan:#22d3ee;
  --shadow:0 12px 36px rgba(0,0,0,.45);
  --radius:16px; --radius-xl:22px;
  --header-h:66px; --container-w:1180px;
}
@media (max-width: 860px){ :root{ --header-h:60px; } }
@media (prefers-color-scheme:light){
  :root{ --bg:#f6f7fb; --layer1:#fff; --card:#fff; --text:#101216; --muted:#6c7380; --border:rgba(0,0,0,.08);
         --shadow:0 10px 24px rgba(0,0,0,.08); }
}

/* Глобально для hidden */
[hidden]{ display:none !important; }

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(217,192,122,.10), transparent),
    radial-gradient(900px 600px at 85% -20%, rgba(124,58,237,.12), transparent),
    var(--bg);
  line-height:1.55; text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;display:block}
a{color:color-mix(in oklab, var(--gold1) 85%, white);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid color-mix(in oklab,var(--gold1) 70%, white);outline-offset:2px}
.container{width:min(var(--container-w),92vw);margin:0 auto;padding:0 24px}
.page{padding-top:var(--header-h)}
[id]{scroll-margin-top:calc(var(--header-h) + 14px)}

/* ===== Header ===== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  backdrop-filter:blur(10px) saturate(1.1);
  background:color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s ease;
}
.navwrap{min-height:var(--header-h);display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:inherit;letter-spacing:.01em}
.logo{border-radius:12px;box-shadow:var(--shadow)}
.menu{display:flex;gap:18px;margin-left:auto}
.menu a{color:var(--muted);padding:10px 8px;border-radius:10px}
.menu a:hover{background:var(--layer1);color:var(--text)}
.hamb{display:none;background:none;border:0;cursor:pointer;margin-left:10px}
.hamb span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:2px}

/* Мобильное меню */
.mobile{ display:none; }
@media (max-width: 1000px){
  .menu{display:none}
  .hamb{display:block}
  .mobile{
    position:fixed; top:var(--header-h); left:0; right:0; z-index:90;
    background:color-mix(in oklab,var(--bg) 90%, black 10%);
    border-bottom:1px solid var(--border);
    padding:12px 24px 16px; gap:8px;
  }
  .mobile:not([hidden]){ display:grid; }
  .mobile a{padding:10px;border-radius:10px}
  .mobile a:hover{background:var(--layer1)}
  .mobile .mobile-btn{width:100%;justify-content:center}
}

/* ===== Buttons (shine + sweep) ===== */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  color:#101216;font-weight:900;padding:12px 16px;border-radius:12px;border:none;cursor:pointer;
  box-shadow:0 6px 24px rgba(181,144,52,.22); text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
  overflow:hidden; isolation:isolate;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn:active{transform:translateY(0)}
.btn::before{
  content:""; position:absolute; inset:0 100% 0 -50%;
  background:linear-gradient(75deg, transparent 40%, rgba(255,255,255,.35), transparent 60%);
  transform:skewX(-20deg);
  animation:shineSweep 2.8s linear infinite;
  pointer-events:none; mix-blend-mode:screen;
}
.btn.secondary{
  background:linear-gradient(135deg, color-mix(in oklab, var(--layer1) 95%, white), var(--layer1));
  color:var(--text); border:1px solid var(--border); box-shadow:none;
}
.btn-cta{filter:drop-shadow(0 0 14px rgba(217,192,122,.28))}
.btn-lg{padding:14px 20px;border-radius:14px}
.btn.full{width:100%}
@keyframes shineSweep{to{transform:skewX(-20deg) translateX(180%)}}

/* ===== Hero ===== */
.hero{position:relative;padding:clamp(44px,6vw,68px) 0 36px}
.hero-grid{display:grid;gap:28px;align-items:center;grid-template-columns:1.1fr 0.9fr}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }
.pill{
  display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border-radius:999px;
  border:1px solid var(--border); background:var(--layer1); box-shadow:var(--shadow);
  color:var(--muted); font-weight:800;
}
.hero h1{font-size:clamp(28px,4.2vw,56px);margin:14px 0 8px;letter-spacing:-0.02em;line-height:1.15}
.sub{color:var(--muted);font-size:clamp(16px,2.1vw,20px);margin:0 0 22px;max-width:62ch}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.badges{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0;list-style:none}
.badge{border:1px solid var(--border);background:var(--layer1);border-radius:999px;padding:6px 10px}

/* Визуал + параллакс */
.hero-visual{position:relative;display:grid;place-items:center;min-height:280px;transform-style:preserve-3d;will-change:transform}
.hero-visual .shapes{max-width:560px;width:100%;opacity:.9;filter:drop-shadow(0 30px 50px rgba(0,0,0,.36));transform:translateZ(20px)}
.hero-visual .glow{
  position:absolute; inset:auto 0 10% 0; margin:auto; width:min(520px,70%); height:60%;
  filter:blur(40px);
  background:conic-gradient(from 210deg, rgba(217,192,122,.22), rgba(124,58,237,.28), rgba(34,211,238,.22), transparent 60%);
  z-index:-1; border-radius:50%; animation:glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:.95}}

.demo-video{max-width:720px;width:100%;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);margin:12px auto}
.scroll-down{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);text-decoration:none;color:var(--muted);font-size:22px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}

/* ===== Canvas, который «бежит за мышкой» ===== */
.hero .cursor-canvas{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  filter:blur(0.2px); /* лёгкая сглажка */
}
/* всё содержимое героя поверх канваса */
.hero > .container, .hero .scroll-down{ position:relative; z-index:1 }

/* ===== Sections & Cards ===== */
.section{padding:68px 0}
.section.alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02) 22%,transparent 100%)}
.section-title{font-size:clamp(22px,3vw,36px);margin:0 0 18px;letter-spacing:-0.01em}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.card::after{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, var(--gold1), var(--gold2), var(--violet), var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:gradShift 8s linear infinite;
  opacity:.08; pointer-events:none;
}
@keyframes gradShift{to{filter:hue-rotate(360deg)}}

.card.feature{grid-column:span 3;display:flex;gap:14px;align-items:flex-start;min-height:164px;transform-origin:center}
.card.feature .ico{font-size:22px}
.card.feature h3{margin:0 0 4px;font-size:18px}
.card.feature p{margin:0;opacity:.92}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 44px rgba(0,0,0,.5)}
@media (max-width: 1200px){ .card.feature{grid-column:span 6} }
@media (max-width: 720px){ .card.feature{grid-column:span 12} }

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left;vertical-align:top}
.table th{color:var(--muted);font-weight:800}
.list{margin:0;padding-left:18px}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;background:var(--layer1);border:1px solid var(--border);border-radius:8px;padding:2px 6px;font-size:90%}
.hint{font-size:14px;color:var(--muted)}
.mb8{margin-bottom:8px}

/* ===== Pricing ===== */
.pricing .price{grid-column:span 4;text-align:center;position:relative;overflow:hidden;transform-origin:center}
.pricing .price .label{font-weight:900;margin-bottom:6px}
.pricing .price .value{font-size:40px;font-weight:900;margin:6px 0 12px;letter-spacing:-0.02em}
.pricing .price .value span{font-size:16px;color:var(--muted);font-weight:700}
.pricing .price .ribbon{position:absolute;top:12px;right:-36px;transform:rotate(35deg);background:linear-gradient(135deg,var(--gold1),var(--gold2));color:#101216;padding:6px 42px;font-weight:900}
.pricing .price.popular{outline:2px solid color-mix(in oklab,var(--gold1) 65%, white);}
.pricing .price ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.pricing .price:hover{transform:translateY(-6px) scale(1.01)}
@media (max-width: 1100px){ .pricing .price{grid-column:span 6} }
@media (max-width: 720px){ .pricing .price{grid-column:span 12} }

/* ===== Secure flow (SVG) ===== */
.secure .secure-vis{padding:18px}
.net-svg{width:100%;height:auto}
.node-box{fill:var(--layer1);stroke:var(--border);stroke-width:1}
.node-cloud{fill:url(#glow);opacity:.2}
.node-title{fill:var(--text);font-weight:900;text-anchor:middle;font-size:14px}
.node-sub{fill:var(--muted);text-anchor:middle;font-size:12px}
.wire{fill:none;stroke:url(#glow);stroke-width:2.5;filter:drop-shadow(0 0 10px rgba(124,58,237,.25));stroke-dasharray:8 10;animation:lineFlow 2.8s linear infinite}
.wire-2{stroke:color-mix(in oklab, var(--cyan) 75%, white); animation-duration:3.4s}
@keyframes lineFlow{to{stroke-dashoffset:-180}}
.lock-body{fill:linear-gradient(135deg, var(--gold1), var(--gold2))}
.lock-arch{fill:none;stroke:url(#gold);stroke-width:2}
.lock{transform-origin:center; animation:lockPulse 2.4s ease-in-out infinite}
@keyframes lockPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ===== Video ===== */
.demo-card{text-align:center}
.demo-video{
  max-width:720px;
  width:100%;
  border-radius:16px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  margin:20px auto;
  display:block;
}

/* ===== CTA / Footer ===== */
.big-cta{text-align:center}
.cta-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.footer{padding:36px 0 56px;color:var(--muted);border-top:1px solid var(--border)}
.footwrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-links{display:flex;gap:12px;flex-wrap:wrap}

/* ===== Reveal ===== */
[data-anim]{opacity:0;transform:translateY(12px);transition:opacity .65s ease, transform .65s ease}
[data-anim].show{opacity:1;transform:none}
[data-anim="rise"]{transform:translateY(18px)}
[data-anim="float-in"]{opacity:0;transform:translateY(10px) scale(.985)}
[data-anim="float-in"].show{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim]{opacity:1;transform:none}
  .btn::before{animation:none}
}