:root{
      --bg:#0b0e1c;
      --bg-2:#0f1226;
      --primary:#6cf0ff;
      --secondary:#a78bfa;
      --accent:#ff7ad9;
      --text:#e7ebff;
      --muted:#9aa3b2;
      --glass:rgba(255,255,255,.06);
      --glass-strong:rgba(255,255,255,.12);
      --border:rgba(255,255,255,.14);
      --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2);
      --radius: 22px;
      --radius-sm: 16px;
      --grid-gap: clamp(16px,2vw,28px);
      --maxw: 1200px;
      --glow: drop-shadow(0 0 14px rgba(108,240,255,.35)) drop-shadow(0 0 28px rgba(167,139,250,.25));
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,"Noto Sans",sans-serif;
      background: radial-gradient(1200px 800px at 70% -10%, #1a1f45 0%, transparent 60%),
                  radial-gradient(900px 600px at -10% 30%, #1b1538 0%, transparent 60%),
                  linear-gradient(180deg, var(--bg), var(--bg-2));
      color:var(--text);
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* 3D Canvas фон */
    #bg3d{
      position:fixed; inset:0; z-index:-1; display:block;
      filter:saturate(1.1) brightness(1.05);
    }
    .gradient-overlay{
      position:fixed; inset:-10% -10% -10% -10%;
      background:
        radial-gradient(800px 800px at 15% 20%, rgba(167,139,250,.18), transparent 60%),
        radial-gradient(700px 700px at 85% 10%, rgba(108,240,255,.15), transparent 60%),
        radial-gradient(900px 900px at 80% 80%, rgba(255,122,217,.10), transparent 65%);
      pointer-events:none; z-index:0;
    }

    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter:saturate(140%) blur(10px);
      background:linear-gradient(180deg, rgba(10,12,24,.75), rgba(10,12,24,.35));
      border-bottom:1px solid var(--border);
    }
    .nav{
      max-width:var(--maxw); margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.3px;
      font-size:clamp(18px,2.2vw,22px);
      filter:var(--glow);
    }
    .brand-logo{
      width:34px; height:34px; border-radius:12px;
      background: conic-gradient(from 0deg, var(--primary), var(--secondary), var(--accent), var(--primary));
      box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.35);
    }
    .navspace{flex:1}
    .nav a.btn{
      text-decoration:none; color:#0e1229; font-weight:700; letter-spacing:.2px;
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      padding:10px 14px; border-radius:12px; box-shadow: var(--shadow); border:0;
    }

    .hero{
      max-width:var(--maxw);
      margin: 42px auto 0 auto;
      padding: clamp(20px, 4vw, 48px) 18px 10px;
      display:grid; grid-template-columns:1.05fr .95fr; gap:var(--grid-gap); align-items:center;
    }
    @media (max-width: 980px){
      .hero{grid-template-columns: 1fr; text-align:center}
    }
    .hero h1{
      margin:0 0 14px 0;
      font-size: clamp(28px, 6vw, 62px);
      line-height:1.02;
      background: linear-gradient(135deg, #e9efff 0%, #b9c2ff 35%, #b796ff 60%, #90f6ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color:transparent;
      filter:var(--glow);
    }
    .hero p.lead{
      margin:0 0 22px 0; color:var(--muted);
      font-size: clamp(14px, 1.6vw, 18px);
    }
    .pill{
      display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px;
      border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      color:#dfe6ff; font-weight:500; letter-spacing:.2px; margin-bottom:12px;
    }
    .hero-ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start}
    @media (max-width:980px){ .hero-ctas{justify-content:center} }
    .btn{
      cursor:pointer; border:0; padding:12px 16px; border-radius:14px; font-weight:700;
      letter-spacing:.2px; box-shadow:var(--shadow); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      color:#0a0e1c;
    }
    .btn-ghost{
      color:var(--text);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border:1px solid var(--border);
    }
    .btn:hover{ transform:translateY(-2px); filter:saturate(1.05) brightness(1.05)}
    .btn:active{ transform:translateY(0)}

    .cards{
      max-width:var(--maxw); margin: clamp(18px, 4vw, 36px) auto; padding: 0 18px;
      display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap);
    }
    .card{
      grid-column: span 6;
      background: linear-gradient(180deg, var(--glass-strong), var(--glass));
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(18px, 2.4vw, 28px);
      perspective: 1000px; transform-style: preserve-3d;
      transition: transform .36s cubic-bezier(.2,.65,.2,1), box-shadow .25s ease, filter .25s ease;
      position:relative; overflow:hidden;
    }
    .card:hover{ transform: translateY(-6px) rotateX(2deg) rotateY(0.8deg); filter: saturate(1.08)}
    .card::after{
      content:""; position:absolute; inset:-2px -2px auto auto; width:180px; height:180px; border-radius:50%;
      background: radial-gradient(closest-side, rgba(108,240,255,.35), transparent 65%);
      filter: blur(18px);
      transform: translateZ(-1px);
    }
    @media (max-width: 980px){ .card{grid-column: span 12} }

    .icon{
      width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:12px;
      background:linear-gradient(135deg, rgba(108,240,255,.25), rgba(167,139,250,.25));
      border:1px solid var(--border); box-shadow: var(--shadow); transform: translateZ(40px);
    }
    .icon svg{ width:28px; height:28px; filter:var(--glow) }
    h3{ margin:10px 0 8px 0; font-size: clamp(18px,2.2vw,26px); letter-spacing:.2px }
    p{ color:var(--muted); margin: 0 0 12px 0 }
    ul{ margin:0; padding-left:18px; color:#cdd6ff }
    li{ margin:6px 0 }

    .learn-more{
      display:inline-flex; align-items:center; gap:8px; margin-top:12px;
      color:#0e1229; font-weight:700; text-decoration:none; padding:10px 14px; border-radius:12px;
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      box-shadow: var(--shadow);
    }

    .section{
      max-width:var(--maxw); margin: clamp(24px, 6vw, 80px) auto; padding: 0 18px;
    }
    .section h2{
      font-size: clamp(22px, 4.5vw, 40px); margin:0 0 10px 0;
      background: linear-gradient(135deg, #e9efff 0%, #b9c2ff 35%, #b796ff 60%, #90f6ff 100%);
      -webkit-background-clip: text; background-clip: text; color:transparent; filter:var(--glow);
    }
    .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap) }
    @media(max-width:980px){ .grid-2{ grid-template-columns:1fr } }

    .cta{
      max-width:var(--maxw); margin: clamp(30px,6vw,90px) auto; padding: 0 18px;
    }
    .cta .inner{
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding: clamp(20px, 3vw, 36px);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
    }
    .cta h3{ margin:0; font-size: clamp(18px, 2.6vw, 28px)}
    .cta p{ margin:0; color:var(--muted) }

    footer{
      border-top:1px solid var(--border);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      padding: 22px 18px; text-align:center; color:#aeb8d9;
    }

    /* Намалени анимации при предпочитания */
    @media (prefers-reduced-motion: reduce){
      .card, .btn{ transition: none !important }
    }