:root{
      --bg:#0b0e12;
      --bg-2:#0f1319;
      --glass:rgba(255,255,255,0.08);
      --glass-strong:rgba(255,255,255,0.14);
      --text:#e6e8eb;
      --muted:#b6bdc7;
      --accent:#9fd4ff;
      --accent-2:#b6a2ff;
      --success:#78ffd6;
      --shadow: 0 20px 40px rgba(0,0,0,0.35);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html,body{
      height:100%;
      background: radial-gradient(1200px 800px at 15% 10%, #11161e 0%, var(--bg) 35%, #090c10 100%) fixed;
      color:var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a{color:var(--accent);text-decoration:none}
    a:hover{color:#c7e6ff;text-decoration:underline}

    .noise{
      position:fixed; inset:0; pointer-events:none;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="1" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>');
      mix-blend-mode: overlay;
      opacity:0.25;
      animation: noiseFade 10s linear infinite alternate;
    }
    @keyframes noiseFade {to{opacity:0.1}}

    header{
      position:relative;
      overflow:hidden;
      padding: 100px 24px 90px;
    }

    header .container {
    position: relative;
    z-index: 2; /* текст выше */
    }

    .container{max-width:1120px;margin:0 auto}
    .hero{
      display:grid;grid-template-columns:1.1fr 0.9fr;gap:28px;align-items:center;
    }
    .badge{
      display:inline-flex;align-items:center;gap:8px;
      background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
      border:1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(20px) saturate(140%);
      border-radius:999px;padding:8px 14px;color:#eaf6ff;
      box-shadow: var(--shadow);
    }
    .badge-dot{
      width:8px;height:8px;border-radius:50%;
      background: radial-gradient(circle at 30% 30%, var(--accent) 0%, #6fbaf0 60%, #2c97df 100%);
      box-shadow:0 0 20px #ff5858;
    }
    h1{
      font-size: clamp(36px, 5vw, 58px);
      line-height:1.06;margin:18px 0 12px;font-weight:700;
      letter-spacing:-0.02em;
    }
    .subtitle{
      font-size: clamp(16px, 2.2vw, 20px); color: var(--muted);
      max-width: 640px;
    }

    /* Liquid blobs (gooey) */
    .blobs {
    position: absolute;
    inset: -150px -200px auto auto;
    width: 900px; height: 900px;
    transform: translate(8%, -8%);
    filter: url(#goo);
    pointer-events: none;
    z-index: 0; /* блобы ниже */
    }
    .blob{
      position:absolute;border-radius:50%;
      background: radial-gradient(120px 160px at 30% 30%, rgba(180,220,255,0.95), rgba(140,190,255,0.65) 45%, rgba(120,170,255,0.35) 70%, rgba(100,150,255,0.0) 100%);
      box-shadow: 0 60px 160px rgba(120,170,255,0.25), inset 0 1px 30px rgba(255,255,255,0.4);
      backdrop-filter: blur(6px);
      mix-blend-mode: screen;
      animation: float 16s ease-in-out infinite;
    }
    .blob.b1{width:320px;height:320px; top:160px; left:180px; animation-delay:0s}
    .blob.b2{width:220px;height:220px; top:360px; left:420px; animation-delay: -3s}
    .blob.b3{width:180px;height:180px; top:80px;  left:420px;  animation-delay: -7s}
    .blob.b4{width:280px;height:280px; top:420px; left:120px; animation-delay: -10s}
    @keyframes float {
      0%{transform: translate3d(0,0,0) scale(1)}
      50%{transform: translate3d(0,-20px,0) scale(1.06)}
      100%{transform: translate3d(0,0,0) scale(1)}
    }

    /* Glass cards */
    .grid{
      display:grid;grid-template-columns:repeat(12,1fr);gap:20px;
      padding:24px;
    }
    .card{
      grid-column: span 12;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)),
        radial-gradient(800px 360px at 10% 0%, rgba(160,190,255,0.14), rgba(255,255,255,0) 60%);
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(22px) saturate(150%);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      position:relative; overflow:hidden;
      transform: translate3d(0,14px,0);
      opacity:0;
      will-change: transform, opacity;
    }
    .card.reveal{
      transform: translate3d(0,0,0); opacity:1;
      transition: transform 900ms cubic-bezier(.2,.8,.2,1), opacity 900ms ease;
    }
    .card h3{margin:4px 0 12px;font-size:24px}
    .card .kicker{color:var(--muted);font-size:14px;margin-bottom:6px}
    .card .content{color:#e9edf3}
    .card .content p{margin:10px 0}
    .card::after{
      content:""; position:absolute; inset:-1px; border-radius:inherit;
      border: 1px solid rgba(255,255,255,0.06);
      pointer-events:none;
    }
    .card:hover{
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08)),
        radial-gradient(800px 360px at 10% 0%, rgba(180,210,255,0.18), rgba(255,255,255,0) 60%);
      transform: translate3d(0,-2px,0);
      transition: transform 260ms ease, background 260ms ease;
    }

    /* Columns for larger screens */
    @media (min-width: 900px){
      .card.sm-6{grid-column: span 6}
      .card.sm-4{grid-column: span 4}
      .card.sm-8{grid-column: span 8}
    }

    /* Skill chips */
    .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
    .chip{
      font-size:13px;color:#eaf6ff;padding:8px 12px;border-radius:999px;
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
      border:1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(16px);
    }

    /* Footer */
    footer{
      padding:36px 24px 80px; color:var(--muted);
    }
    .cta{
      display:flex;gap:12px;flex-wrap:wrap;margin-top:16px
    }
    .btn{
      padding:12px 18px;border-radius:12px;font-weight:600;
      border:1px solid rgba(255,255,255,0.18);
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
      color:#eaf6ff;
      backdrop-filter: blur(16px);
      transition: transform .2s ease, background .2s ease;
    }
    .btn:hover{transform: translateY(-2px)}
    .btn.primary{
      background:
        linear-gradient(180deg, rgba(160,210,255,0.24), rgba(140,190,255,0.10)),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      color:#ffffff; border-color: rgba(160,210,255,0.5);
      box-shadow: 0 12px 36px rgba(140,190,255,0.25);
    }

    /* Parallax hint */
    .parallax{
      transform: translate3d(0,0,0);
      will-change: transform;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .blob,.noise{animation:none}
      .card,.parallax{transition:none}
    }