/* ============================================
   МЕГА САЙТ v3 — Dark Premium · SVG Geometry
   Syne + DM Sans · Strict · Orange
   ============================================ */

   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

   :root {
       --o400: #ff9a2e;
       --o500: #ff7a00;
       --o600: #e06200;
       --o700: #b84d00;
       --o-soft: rgba(255, 122, 0, 0.07);
       --o-glow: rgba(255, 122, 0, 0.2);
   
       --bg: #0c0a09;
       --bg2: #121110;
       --surface: #1a1816;
       --surface2: #222019;
       --border: rgba(255, 255, 255, 0.06);
       --border-h: rgba(255, 122, 0, 0.18);
       --text: #f5f3f0;
       --text2: #9a9590;
   
       --max-w: 1160px;
       --px: clamp(18px, 4vw, 40px);
       --section-py: clamp(72px, 10vw, 128px);
       --r: 14px;
       --r-sm: 8px;
       --ease: cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   html { scroll-behavior: smooth; }
   
   body {
       font-family: 'DM Sans', sans-serif;
       font-size: 15px; line-height: 1.7;
       color: var(--text); background: var(--bg);
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
   }
   
   img { max-width: 100%; height: auto; display: block; }
   a { color: inherit; text-decoration: none; }
   ul { list-style: none; }
   h1,h2,h3,h4 { font-family: 'Syne', sans-serif; font-weight: 700; line-height: 1.15; }
   
   .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
   
   /* ==================== SVG BACKGROUND ==================== */
   .bg-canvas {
       position: fixed; inset: 0; z-index: 0; pointer-events: none;
   }
   
   .bg-grid {
       position: absolute; inset: 0; opacity: 1;
   }
   
   .bg-shapes {
       position: absolute; inset: 0; width: 100%; height: 100%;
   }
   
   /* Shape animations — slow, subtle drift */
   .bg-shape--1 { animation: drift1 24s ease-in-out infinite; }
   .bg-shape--2 { animation: drift2 20s ease-in-out infinite; }
   .bg-shape--3 { animation: drift3 28s ease-in-out infinite; }
   .bg-shape--4 { animation: drift1 22s ease-in-out infinite reverse; }
   .bg-shape--5 { animation: drift2 18s ease-in-out infinite 3s; }
   .bg-shape--6 { animation: drift3 16s ease-in-out infinite 1s; }
   .bg-shape--7 { animation: drift1 26s ease-in-out infinite 5s; }
   .bg-shape--8 { animation: drift2 30s ease-in-out infinite 2s; }
   
   @keyframes drift1 {
       0%, 100% { transform: translate(0, 0) rotate(0deg); }
       25% { transform: translate(12px, -8px) rotate(3deg); }
       50% { transform: translate(-6px, 14px) rotate(-2deg); }
       75% { transform: translate(8px, 6px) rotate(1deg); }
   }
   @keyframes drift2 {
       0%, 100% { transform: translate(0, 0) rotate(0deg); }
       33% { transform: translate(-10px, 12px) rotate(-4deg); }
       66% { transform: translate(14px, -6px) rotate(3deg); }
   }
   @keyframes drift3 {
       0%, 100% { transform: translate(0, 0) scale(1); }
       50% { transform: translate(8px, -10px) scale(1.08); }
   }
   
   .bg-orb {
       position: absolute; border-radius: 50%;
       filter: blur(120px); opacity: 0.3;
   }
   .bg-orb--1 {
       width: 500px; height: 500px;
       background: radial-gradient(circle, var(--o700) 0%, transparent 70%);
       top: -160px; right: -80px;
       animation: orbFloat 20s ease-in-out infinite;
   }
   .bg-orb--2 {
       width: 350px; height: 350px;
       background: radial-gradient(circle, var(--o700) 0%, transparent 70%);
       bottom: 20%; left: -60px;
       animation: orbFloat 26s ease-in-out infinite reverse;
   }
   @keyframes orbFloat {
       0%, 100% { transform: translate(0, 0); }
       50% { transform: translate(30px, -20px); }
   }
   
   /* ==================== HEADER ==================== */
   .header {
       position: fixed; top: 0; left: 0; right: 0; z-index: 100;
       padding: 14px 0;
       transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
   }
   .header--scrolled {
       background: rgba(12, 10, 9, 0.82);
       backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
       box-shadow: 0 1px 0 var(--border);
   }
   
   .nav {
       max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px);
       display: flex; align-items: center; gap: 32px;
   }
   
   /* Logo */
   .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative; z-index: 2; }
   .logo__mark { width: 32px; height: 32px; }
   .logo__word {
       font-family: 'Syne', sans-serif; font-weight: 800;
       font-size: 15px; letter-spacing: 0.12em;
   }
   .logo__accent { color: var(--o400); }
   
   .nav__links { display: flex; gap: 26px; margin-left: auto; }
   .nav__links a {
       font-size: 13px; font-weight: 500; color: var(--text2);
       letter-spacing: 0.02em; transition: color 0.25s;
       position: relative;
   }
   .nav__links a::after {
       content: ''; position: absolute; bottom: -3px; left: 0;
       width: 0; height: 1.5px; background: var(--o500);
       transition: width 0.3s var(--ease);
   }
   .nav__links a:hover { color: var(--text); }
   .nav__links a:hover::after { width: 100%; }
   
   .nav__actions { display: flex; align-items: center; gap: 14px; }
   
   .link-btn {
       font-size: 13px; font-weight: 600; color: var(--text2);
       transition: color 0.25s;
   }
   .link-btn:hover { color: var(--text); }
   
   /* Buttons */
   .btn {
       display: inline-flex; align-items: center; justify-content: center;
       font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13.5px;
       padding: 11px 24px; border-radius: var(--r-sm);
       background: var(--o500); color: #fff; border: none; cursor: pointer;
       transition: all 0.3s var(--ease);
   }
   .btn:hover { background: var(--o400); transform: translateY(-1px); box-shadow: 0 8px 28px var(--o-glow); }
   .btn--sm { padding: 9px 18px; font-size: 12.5px; }
   .btn--lg { padding: 15px 36px; font-size: 15px; border-radius: var(--r); }
   .btn--full { width: 100%; }
   
   .btn--glass {
       background: rgba(255,255,255,0.04); color: var(--text);
       border: 1px solid var(--border);
   }
   .btn--glass:hover {
       background: var(--o-soft); border-color: var(--border-h);
       color: var(--o400); box-shadow: none;
   }
   
   /* Burger */
   .burger {
       display: none; flex-direction: column; gap: 5px;
       background: none; border: none; cursor: pointer; padding: 5px; margin-left: auto;
   }
   .burger span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 1px; transition: 0.3s; }
   
   /* ==================== HERO ==================== */
   .hero {
       padding: clamp(120px, 16vw, 190px) 0 clamp(48px, 8vw, 90px);
       position: relative; z-index: 1;
   }
   
   .hero__grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto auto;
       gap: 32px 48px;
   }
   
   .hero__content { grid-column: 1; grid-row: 1; }
   
   .hero__badge {
       display: inline-flex; align-items: center; gap: 8px;
       font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
       color: var(--o400);
       background: var(--o-soft); border: 1px solid rgba(255,122,0,0.15);
       padding: 6px 16px; border-radius: 100px;
       margin-bottom: 22px;
   }
   
   .pulse-dot {
       width: 7px; height: 7px; border-radius: 50%; background: var(--o500);
       animation: pulseDot 2.5s ease-in-out infinite;
   }
   @keyframes pulseDot {
       0%, 100% { box-shadow: 0 0 0 0 var(--o-glow); }
       50% { box-shadow: 0 0 0 6px rgba(255,122,0,0); }
   }
   
   .hero__content h1 {
       font-size: clamp(30px, 4.5vw, 50px);
       letter-spacing: -0.03em;
       margin-bottom: 18px;
   }
   
   .accent-text { color: var(--o400); }
   
   .hero__sub {
       font-size: clamp(14px, 1.5vw, 15.5px);
       color: var(--text2); line-height: 1.8;
       max-width: 500px; margin-bottom: 28px;
   }
   
   .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
   
   /* Code card */
   .hero__card {
       grid-column: 2; grid-row: 1;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--r);
       overflow: hidden;
       align-self: center;
       animation: cardIn 0.8s var(--ease) 0.2s both;
   }
   @keyframes cardIn {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   .card-header {
       display: flex; align-items: center; gap: 7px;
       padding: 12px 18px;
       background: rgba(0,0,0,0.25);
       border-bottom: 1px solid var(--border);
   }
   .card-dot { width: 10px; height: 10px; border-radius: 50%; }
   .card-dot--r { background: #ef4444; }
   .card-dot--y { background: #eab308; }
   .card-dot--g { background: #22c55e; }
   .card-title { margin-left: 8px; font-size: 11.5px; color: var(--text2); font-weight: 500; }
   
   .card-body { padding: 22px 22px 26px; }
   .card-code {
       font-family: 'DM Mono', 'SF Mono', 'Fira Code', monospace;
       font-size: 12.5px; line-height: 1.9; color: var(--text2);
       display: block;
   }
   .c-key { color: #c084fc; }
   .c-fn { color: var(--o400); }
   .c-str { color: #86efac; }
   .c-gray { color: rgba(255,255,255,0.2); }
   .c-out { color: var(--text); font-weight: 500; }
   
   .cursor-blink { animation: blink 1s step-end infinite; }
   @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
   
   /* Stats row */
   .hero__stats {
       grid-column: 1 / -1;
       display: flex; gap: 16px;
   }
   
   .stat-pill {
       flex: 1;
       display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
       background: var(--surface);
       border: 1px solid var(--border);
       border-left: 3px solid var(--o500);
       border-radius: var(--r-sm);
       padding: 18px 22px;
       transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
   }
   .stat-pill:hover { border-color: var(--border-h); transform: translateY(-2px); }
   
   .counter {
       font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800;
       color: var(--o400); letter-spacing: -0.03em;
   }
   .stat-u { font-size: 13px; font-weight: 700; color: var(--o400); }
   .stat-l {
       width: 100%; font-size: 11.5px; font-weight: 500;
       color: var(--text2); letter-spacing: 0.02em; margin-top: 1px;
   }
   
   /* ==================== SECTIONS ==================== */
   .section { padding: var(--section-py) 0; position: relative; z-index: 1; }
   .section--muted { background: var(--bg2); }
   
   .sec-head {
       text-align: center; max-width: 580px;
       margin: 0 auto 52px;
   }
   .sec-head h2 {
       font-size: clamp(24px, 3.5vw, 36px);
       letter-spacing: -0.02em; margin: 12px 0 10px;
   }
   .sec-head p { font-size: 14.5px; color: var(--text2); line-height: 1.75; }
   
   .tag {
       display: inline-block;
       font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
       color: var(--o400);
       background: var(--o-soft); border: 1px solid rgba(255,122,0,0.15);
       padding: 5px 14px; border-radius: 100px;
   }
   
   /* ==================== FEATURES ==================== */
   .feat-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
   }
   
   .feat-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--r);
       padding: 28px 24px;
       transition: all 0.4s var(--ease);
       position: relative; overflow: hidden;
   }
   .feat-card::after {
       content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
       background: linear-gradient(90deg, var(--o600), var(--o400));
       opacity: 0; transition: opacity 0.35s;
   }
   .feat-card:hover {
       border-color: var(--border-h);
       transform: translateY(-3px);
       box-shadow: 0 12px 40px rgba(0,0,0,0.25);
   }
   .feat-card:hover::after { opacity: 1; }
   
   .feat-card--lg {
       grid-column: span 2;
       display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;
   }
   
   .feat-icon {
       width: 40px; height: 40px;
       display: flex; align-items: center; justify-content: center;
       background: var(--o-soft); border-radius: var(--r-sm);
       color: var(--o400); margin-bottom: 16px;
   }
   .feat-icon svg { width: 20px; height: 20px; }
   
   .feat-card h3 { font-size: 16px; margin-bottom: 8px; letter-spacing: -0.01em; }
   .feat-card p { font-size: 13px; color: var(--text2); line-height: 1.7; }
   
   .feat-card__img {
       width: 100%; height: 200px; object-fit: cover;
       border-radius: var(--r-sm); border: 1px solid var(--border);
   }
   
   /* ==================== STEPS ==================== */
   .steps-track {
       display: flex; align-items: flex-start;
       gap: 0; margin-bottom: 32px;
   }
   
   .step-node {
       flex: 1;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--r);
       padding: 28px 24px;
       transition: all 0.35s var(--ease);
   }
   .step-node:hover { border-color: var(--border-h); transform: translateY(-2px); }
   
   .step-num {
       font-family: 'Syne', sans-serif;
       font-size: 38px; font-weight: 800;
       color: rgba(255,122,0,0.1);
       line-height: 1; margin-bottom: 14px;
       transition: color 0.35s;
   }
   .step-node:hover .step-num { color: rgba(255,122,0,0.2); }
   
   .step-node h3 { font-size: 17px; margin-bottom: 8px; }
   .step-node p { font-size: 13px; color: var(--text2); line-height: 1.7; }
   
   .step-line {
       width: 32px; min-width: 32px; height: 2px;
       background: linear-gradient(90deg, var(--border), var(--o500), var(--border));
       align-self: center; flex-shrink: 0;
       opacity: 0.4;
   }
   
   .steps-img {
       width: 100%; height: 320px; object-fit: cover;
       border-radius: var(--r); border: 1px solid var(--border);
   }
   
   /* ==================== PLANS ==================== */
   .plan-grid {
       display: grid; grid-template-columns: repeat(3, 1fr);
       gap: 16px; align-items: start;
   }
   
   .plan-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--r);
       padding: 32px 26px;
       position: relative;
       transition: all 0.35s var(--ease);
   }
   .plan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.2); }
   
   .plan-card--pop {
       border-color: var(--o500);
       box-shadow: 0 0 36px var(--o-glow);
   }
   
   .plan-badge {
       position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
       background: var(--o500); color: #fff;
       font-size: 10.5px; font-weight: 700;
       padding: 4px 16px; border-radius: 100px;
   }
   
   .plan-card h3 { font-size: 18px; margin-bottom: 12px; }
   .plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; }
   .plan-price em {
       font-family: 'Syne', sans-serif; font-style: normal;
       font-size: 32px; font-weight: 800; color: var(--o400);
       letter-spacing: -0.03em;
   }
   .plan-price small { font-size: 13px; color: var(--text2); }
   
   .plan-card ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
   .plan-card li {
       font-size: 13px; color: var(--text2);
       padding-left: 20px; position: relative;
   }
   .plan-card li::before {
       content: ''; position: absolute; left: 0; top: 5px;
       width: 10px; height: 10px; border-radius: 2px;
       background: var(--o-soft); border: 1.5px solid var(--o500);
   }
   
   /* ==================== FAQ ==================== */
   .faq-wrap {
       max-width: 700px; margin: 0 auto;
       display: flex; flex-direction: column; gap: 10px;
   }
   
   .faq {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--r-sm);
       transition: border-color 0.3s;
   }
   .faq[open] { border-color: var(--border-h); }
   
   .faq summary {
       padding: 18px 22px;
       font-weight: 600; font-size: 14px; cursor: pointer;
       display: flex; align-items: center; justify-content: space-between; gap: 12px;
       list-style: none; transition: color 0.25s;
   }
   .faq summary::-webkit-details-marker { display: none; }
   .faq summary::after {
       content: '+'; font-family: 'Syne', sans-serif;
       font-size: 20px; color: var(--o400); flex-shrink: 0;
       transition: transform 0.3s var(--ease);
   }
   .faq[open] summary::after { transform: rotate(45deg); }
   .faq summary:hover { color: var(--o400); }
   
   .faq p {
       padding: 0 22px 18px; font-size: 13px; color: var(--text2); line-height: 1.75;
       animation: fadeDn 0.25s var(--ease);
   }
   @keyframes fadeDn { from { opacity:0; transform: translateY(-5px); } to { opacity:1; transform: translateY(0); } }
   
   /* ==================== CTA ==================== */
   .cta-block { padding: var(--section-py) 0; position: relative; z-index: 1; }
   
   .cta-inner {
       text-align: center;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--r);
       padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
       position: relative; overflow: hidden;
   }
   .cta-inner::before {
       content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
       width: 600px; height: 600px;
       background: radial-gradient(circle, rgba(255,122,0,0.08) 0%, transparent 60%);
       pointer-events: none;
   }
   
   .cta-inner h2 { font-size: clamp(22px, 3vw, 32px); margin-bottom: 10px; position: relative; }
   .cta-inner p {
       font-size: 14px; color: var(--text2); line-height: 1.7;
       max-width: 460px; margin: 0 auto 26px; position: relative;
   }
   .cta-inner .btn { position: relative; }
   
   /* ==================== FOOTER ==================== */
   .footer { padding-top: 48px; border-top: 1px solid var(--border); position: relative; z-index: 1; }
   
   .ft-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding-bottom: 36px; }
   .ft-brand p { margin-top: 14px; font-size: 13px; color: var(--text2); line-height: 1.65; max-width: 270px; }
   .ft-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
   .ft-nav div { display: flex; flex-direction: column; gap: 8px; }
   .ft-nav h4 { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 6px; }
   .ft-nav a { font-size: 13px; color: var(--text2); transition: color 0.25s; }
   .ft-nav a:hover { color: var(--o400); }
   
   .ft-bottom { border-top: 1px solid var(--border); padding: 16px 0; }
   .ft-bottom-inner { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text2); }
   .ft-legal { display: flex; gap: 18px; }
   .ft-legal a { color: var(--text2); transition: color 0.25s; }
   .ft-legal a:hover { color: var(--o400); }
   
   /* ==================== REVEAL ==================== */
   .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
   .rv--on { opacity: 1; transform: translateY(0); }
   
   /* ==================== MOBILE NAV ==================== */
   .mob-nav {
       position: fixed; inset: 0; z-index: 200;
       background: rgba(12, 10, 9, 0.96); backdrop-filter: blur(24px);
       display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
       opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
   }
   .mob-nav--open { opacity: 1; pointer-events: all; }
   .mob-nav a { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; transition: color 0.25s; }
   .mob-nav a:hover { color: var(--o400); }
   .mob-nav__x { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 28px; color: var(--text); cursor: pointer; }
   
   /* ==================== RESPONSIVE ==================== */
   @media (max-width: 960px) {
       .hero__grid { grid-template-columns: 1fr; }
       .hero__content { text-align: center; }
       .hero__sub { margin-left: auto; margin-right: auto; }
       .hero__cta { justify-content: center; }
       .hero__card { max-width: 440px; margin: 0 auto; }
       .hero__stats { flex-wrap: wrap; }
   
       .feat-grid { grid-template-columns: 1fr 1fr; }
       .feat-card--lg { grid-column: span 2; }
   
       .steps-track { flex-direction: column; gap: 12px; }
       .step-line { width: 2px; height: 24px; min-width: auto; align-self: center; }
   
       .plan-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
       .ft-grid { grid-template-columns: 1fr; gap: 28px; }
   }
   
   @media (max-width: 640px) {
       .nav__links, .nav__actions { display: none; }
       .burger { display: flex; }
   
       .feat-grid { grid-template-columns: 1fr; }
       .feat-card--lg { grid-column: span 1; grid-template-columns: 1fr; }
       .feat-card__img { height: 180px; }
       .steps-img { height: 200px; }
   
       .hero__stats { flex-direction: column; }
       .stat-pill { width: 100%; }
   
       .ft-nav { grid-template-columns: 1fr 1fr; }
       .ft-bottom-inner { flex-direction: column; gap: 10px; text-align: center; }
   }