:root{
      --bg:#0A0A0B;
      --panel:#101014;
      --panel-2:#0f0f13;
      --text:#EAEAF0;
      --muted:#9A9AA3;
      --accent:#FF3CAC; 
      --accent-2:#784BA0; 
      --accent-3:#2B86C5; 
      --ring: rgba(255, 60, 172, .25);
      --radius: 20px;
      --shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset;
      --trans: 220ms cubic-bezier(.22,1,.36,1);
      --logo-url: url('https://cdn.discordapp.com/attachments/1405650092085477408/1408935767404843100/Zrzut_ekranu_2025-08-23_172657-removebg-preview.png?ex=68ab8d2f&is=68aa3baf&hm=80e9234abfcaeb8e9e12bd2a6eb4bfc21ba7ee8cc2067fa1debc92e29e7ef406&');
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; color:var(--text); background:var(--bg); overflow-x:hidden; }

    .bg-grid{ position:fixed; inset:0; z-index:-3; opacity:.5; background:
       linear-gradient(transparent 0, rgba(255,255,255,.02) 1px) 0 0/ 100% 40px,
       linear-gradient(90deg, transparent 0, rgba(255,255,255,.02) 1px) 0 0/ 40px 100%;
      mask: radial-gradient(1200px 1200px at 50% 20%, black 60%, transparent 75%), linear-gradient(black, black);
      animation: gridFloat 18s ease-in-out infinite alternate; }
    @keyframes gridFloat{from{transform:translateY(-2%)}to{transform:translateY(2%)} }
    .orb{ position:fixed; filter: blur(60px); z-index:-2; mix-blend-mode:screen; opacity:.8; }
    .orb.tl{ width:520px; height:520px; top:-120px; left:-120px; background: radial-gradient(closest-side, rgba(255,60,172,.65), transparent 70%); animation: orbMove 14s ease-in-out infinite;}
    .orb.br{ width:600px; height:600px; right:-160px; bottom:-160px; background: radial-gradient(closest-side, rgba(120,75,160,.55), transparent 70%); animation: orbMove 16s ease-in-out infinite reverse;}
    @keyframes orbMove{ 0%{transform:translate(0,0)} 50%{transform:translate(20px,-10px) scale(1.05)} 100%{transform:translate(-10px,10px)} }

    .spark{ position:fixed; width:2px; height:2px; background:#fff; opacity:.6; border-radius:2px; filter: drop-shadow(0 0 6px rgba(255,60,172,.8)); z-index:-1; animation: drift var(--d,12s) linear infinite; }
    @keyframes drift{ from{ transform:translate3d(var(--x,0), 110vh,0)} to{ transform:translate3d(calc(var(--x,0) + 10vw), -10vh,0)} }

    #root{min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto}
    header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(12px); background:linear-gradient(180deg, rgba(16,16,20,.75), rgba(16,16,20,.5)); border-bottom:1px solid rgba(255,255,255,.06)}
    .nav{ max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px}
    .brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px}
    .logo{ width:36px; height:36px; border-radius:10px; background-image: var(--logo-url); background-size: cover; background-position: center; box-shadow:0 0 30px rgba(255,60,172,.35); overflow:hidden }
    .brand b{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900}
    .nav .spacer{ flex:1 }
    .pill{ font-size:12px; color:var(--muted); background:rgba(255,255,255,.05); padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.06); display:inline-flex; align-items:center; gap:8px }
    .pill .diode{ width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #fff, var(--accent) 60%); box-shadow:0 0 10px rgba(255,60,172,.9), 0 0 24px rgba(255,60,172,.6); animation: diode 1.8s ease-in-out infinite }
    @keyframes diode{ 0%,100%{filter:saturate(160%)} 50%{ transform:scale(1.15); box-shadow:0 0 18px rgba(255,60,172,1), 0 0 40px rgba(255,60,172,.8)} }

    .btn{ position:relative; display:inline-flex; gap:10px; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; background:linear-gradient(180deg, rgba(255,60,172,.18), rgba(255,60,172,.12)); color:#fff; border:1px solid rgba(255,60,172,.35); box-shadow:0 6px 30px rgba(255,60,172,.25); cursor:pointer; text-decoration:none; transition: transform var(--trans), box-shadow var(--trans), background var(--trans); will-change:transform}
    .btn:hover{ transform: translateY(-2px) scale(1.01); box-shadow:0 10px 40px rgba(255,60,172,.35)}
    .btn:active{ transform: translateY(0)}
    .btn[data-ripple]{ overflow:hidden }

    .hero{ position:relative; max-width:1180px; margin:0 auto 20px; padding:92px 20px 40px; display:grid; grid-template-columns:1fr; gap:32px; align-items:center}
    .tag{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.03); color:var(--muted); font-size:13px; animation: floaty 6s ease-in-out infinite }
    @keyframes floaty{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-3px)} }
    .tag .dot{ width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #fff, var(--accent) 60%); box-shadow:0 0 12px rgba(255,60,172,.9); animation: diode 2.2s ease-in-out infinite }

    h1{ font-size: clamp(34px, 5vw, 64px); line-height:1.05; margin:14px 0 12px; letter-spacing:-.02em}
    .gradient-text{ background:linear-gradient(90deg, #fff, #fff 30%, var(--accent) 60%, var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; animation: shimmer 6s linear infinite }
    @keyframes shimmer{ 0%{filter:brightness(1)} 50%{filter:brightness(1.2)} 100%{filter:brightness(1)} }
    .sub{ color:#CFCFDA; font-size: clamp(14px, 2.4vw, 18px); line-height:1.6; max-width:62ch; opacity:.9; animation: fadeUp .9s ease both }
    @keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

    .heroCard{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); border-radius: 22px; padding:22px; overflow:hidden; box-shadow: var(--shadow); transform-style:preserve-3d; perspective:1000px; transition: transform 400ms ease}
    .heroCard:hover{ transform: translateY(-4px) }
    .heroCard .codebar{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: #0b0b10; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px; color:#DADAE4; font-size:12px; line-height:1.5; position:relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) }
    .codebar .caret{ display:inline-block; width:8px; background:var(--accent); height:1.1em; vertical-align:-2px; margin-left:2px; animation: blink 1.2s steps(1) infinite }
    @keyframes blink{ 50%{ opacity:0 } }
    .stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-top:16px; max-width: 1180px; justify-content: center; }

    .card, .tier, .heroCard .codebar{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius: 20px; padding:20px; transition: transform var(--trans), box-shadow var(--trans); box-shadow: var(--shadow); overflow:hidden; }
    .card::before, .tier::before, .heroCard .codebar::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: radial-gradient(200px 200px at var(--mx,50%) var(--my,50%), rgba(255,60,172,.8), rgba(255,60,172,0) 60%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.0; transition: opacity .25s ease; }
    .card:hover::before, .tier:hover::before, .heroCard .codebar:hover::before{ opacity:.8 }

    .grid{ max-width:1180px; margin:0 auto 20px; padding:0 20px; display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:18px; justify-content:center; }

    .marquee{ position:relative; max-width:1180px; margin:0 auto 20px; padding:0 20px; overflow:hidden; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.02);} 
    .marquee-track{ display:flex; gap:32px; padding:14px 0; will-change:transform; animation: marquee 28s linear infinite}
    .pill-badge{ padding:8px 14px; border-radius:999px; background:rgba(255,60,172,.08); border:1px solid rgba(255,60,172,.35); color:#FFD6EC; font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:8px }
    .pill-badge .diode{ width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #fff, var(--accent) 60%); box-shadow:0 0 8px rgba(255,60,172,.8); animation: diode 2s ease-in-out infinite }
    @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

    .pricing{ max-width:1180px; margin:0 auto 20px; padding:0 20px; display:grid; grid-template-columns: repeat(3, 1fr); gap:18px }
    .pricing-header { text-align: center; margin-bottom: 20px; }
    .tier{ padding:28px; border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
    .tier:hover{ transform: translateY(-8px); box-shadow: 0 20px 60px rgba(255,60,172,.18) }
    .tiertag{ display:inline-flex; gap:8px; align-items:center; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); padding:6px 10px; border-radius:999px; color:#DCDCF3; font-size:12px }
    .price{ font-size:36px; font-weight:800; margin:12px 0 8px; letter-spacing:.2px; background:linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip:text; color:transparent }
    .features{ list-style:none; margin:12px 0 18px; padding:0; display:grid; gap:8px }
    .features li{ display:flex; align-items:center; gap:10px; color:#cfcfde; font-size:14px }
    .features svg{ opacity:.9; transition: transform .25s ease }
    .features li:hover svg{ transform: translateX(2px) }
    .led{ width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at 40% 40%, #fff, var(--accent) 60%); box-shadow:0 0 14px rgba(255,60,172,.9); animation: diode 1.6s ease-in-out infinite }
    .cta{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; text-decoration:none; transition: transform .25s ease, background .25s ease }
    .cta:hover{ transform: translateY(-2px); background:rgba(255,255,255,.06) }

    footer{ border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
    .foot{ max-width:1180px; margin:0 auto; padding:24px 20px; display:flex; gap:16px; align-items:center; justify-content:space-between; color:var(--muted)}

    .overlay{ position:fixed; inset:0; z-index:60; display:none; }
    .overlay.active{ display:block; }
    .overlay .backdrop{ position:absolute; inset:0; background:rgba(10,10,12,.65); backdrop-filter: blur(10px) saturate(120%); animation: fadeIn .25s ease }
    @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
    .sheet{ position:absolute; inset:auto 0 0 0; margin:auto; max-width:980px; width:100%; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:24px 24px 0 0; box-shadow: 0 -20px 80px rgba(0,0,0,.5); transform: translateY(100%); animation: slideUp .35s cubic-bezier(.22,1,.36,1) forwards; }
    @keyframes slideUp{ to{ transform: translateY(0) } }
    .sheet header{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.06) }
    .sheet h3{ margin:0; font-size:20px }
    .close{ margin-left:auto; border:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer }
    .faq{ padding:18px; display:grid; gap:10px }
    .qa{ border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 14px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); overflow:hidden }
    .qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; }
    .qa summary::-webkit-details-marker{ display:none }
    .qa p{ color:#cfcfde; margin:8px 0 0; }

    .reveal{ opacity:0; transform: translateY(14px) scale(.98); transition: all 700ms cubic-bezier(.2,.8,.2,1)}
    .reveal.in-view{ opacity:1; transform: none }

    @media (max-width: 980px){
      .hero{ grid-template-columns: 1fr; padding-top: 64px }
      .grid{ grid-template-columns: 1fr; max-width: 500px; }
      .stats{ grid-template-columns: 1fr; max-width: 500px; }
      .pricing{ grid-template-columns: 1fr; max-width: 500px; }
      .sheet{ border-radius:18px 18px 0 0 }
    }
    @media (max-width: 600px){
      .grid{ grid-template-columns: 1fr; max-width: 100%; }
      .stats{ max-width: 100%; }
      .pricing{ max-width: 100%; }
    }