:root {
      --bg:#080C14; --bg2:#0D1220; --bg3:#111827;
      --blue:#3B82F6; --blue2:#60A5FA; --cyan:#06B6D4;
      --green:#22C55E; --text:#F1F5F9; --muted:#94A3B8;
      --dim:#475569; --border:rgba(255,255,255,0.07);
      --glow:rgba(59,130,246,0.15);
    }
    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    body {
      background:var(--bg); color:var(--text);
      font-family:'DM Sans',sans-serif; font-size:16px;
      line-height:1.6; overflow-x:hidden;
    }
    body::before {
      content:''; position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events:none; z-index:0; opacity:0.4;
    }
    body::after {
      content:''; position:fixed; inset:0;
      background-image:linear-gradient(rgba(59,130,246,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,0.04) 1px,transparent 1px);
      background-size:48px 48px; pointer-events:none; z-index:0;
    }

    /* NAV */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:100;
      padding:0 5%; display:flex; align-items:center;
      justify-content:space-between; height:68px;
      background:rgba(8,12,20,0.85); backdrop-filter:blur(20px);
      border-bottom:1px solid var(--border);
      transition:all 0.3s;
    }
    nav.scrolled { background:rgba(8,12,20,0.97); box-shadow:0 4px 30px rgba(0,0,0,0.3); }
    .nav-logo {
      display:flex; align-items:center; gap:10px;
      font-family:'Syne',sans-serif; font-size:20px; font-weight:800;
      text-decoration:none; color:var(--text);
    }
    .nav-logo img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(96,165,250,0.5)); }
    .nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
    .nav-links a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; transition:color 0.2s; }
    .nav-links a:hover { color:var(--text); }
    .nav-cta { padding:8px 20px; background:var(--blue); color:white !important; border-radius:8px; font-weight:600 !important; transition:all 0.2s !important; }
    .nav-cta:hover { background:#2563EB !important; transform:translateY(-1px); box-shadow:0 4px 20px rgba(59,130,246,0.4); }
    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
    .hamburger span { width:24px; height:2px; background:var(--muted); border-radius:2px; transition:all 0.3s; }
    .mobile-menu {
      display:none; position:fixed; inset:0; top:68px;
      background:rgba(8,12,20,0.98); backdrop-filter:blur(20px);
      z-index:99; padding:40px 5%; flex-direction:column; gap:24px;
    }
    .mobile-menu.open { display:flex; }
    .mobile-menu a { color:var(--text); text-decoration:none; font-size:20px; font-weight:600; font-family:'Syne',sans-serif; padding:12px 0; border-bottom:1px solid var(--border); }
    .mobile-menu .mob-cta { background:var(--blue); color:white; border-radius:12px; padding:14px 24px; text-align:center; border:none; margin-top:8px; }

    /* HERO */
    .hero {
      position:relative; z-index:1; min-height:100vh;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      text-align:center; padding:120px 5% 80px;
    }
    .orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
    .orb-1 { width:600px; height:600px; background:radial-gradient(circle,rgba(59,130,246,0.12),transparent 70%); top:-100px; left:50%; transform:translateX(-50%); animation:pulse 6s ease-in-out infinite; }
    .orb-2 { width:400px; height:400px; background:radial-gradient(circle,rgba(6,182,212,0.08),transparent 70%); top:40%; right:5%; animation:pulse 8s ease-in-out infinite 2s; }
    .orb-3 { width:300px; height:300px; background:radial-gradient(circle,rgba(34,197,94,0.06),transparent 70%); bottom:10%; left:5%; animation:pulse 7s ease-in-out infinite 4s; }
    @keyframes pulse { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }

    .badge {
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 16px; background:rgba(59,130,246,0.1);
      border:1px solid rgba(59,130,246,0.25); border-radius:100px;
      font-size:13px; color:var(--blue2); margin-bottom:28px;
      animation:fadeUp 0.6s ease both;
    }
    .badge .dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:blink 2s ease infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

    h1 {
      font-family:'Syne',sans-serif;
      font-size:clamp(38px,6vw,80px); font-weight:800;
      line-height:1.05; letter-spacing:-0.03em; margin-bottom:24px;
      animation:fadeUp 0.6s ease 0.1s both;
    }
    h1 .gradient { background:linear-gradient(135deg,var(--blue2),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .hero-sub { font-size:clamp(15px,2vw,20px); color:var(--muted); max-width:560px; margin:0 auto 44px; font-weight:300; animation:fadeUp 0.6s ease 0.2s both; }
    .hero-actions { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; animation:fadeUp 0.6s ease 0.3s both; }

    .btn-primary {
      display:inline-flex; align-items:center; gap:10px;
      padding:14px 32px; background:var(--blue); color:white;
      text-decoration:none; border-radius:12px; font-size:16px; font-weight:600;
      transition:all 0.2s; box-shadow:0 0 40px rgba(59,130,246,0.3);
    }
    .btn-primary:hover { background:#2563EB; transform:translateY(-2px); box-shadow:0 8px 40px rgba(59,130,246,0.4); }
    .btn-primary .arrow { transition:transform 0.2s; }
    .btn-primary:hover .arrow { transform:translateX(4px); }
    .btn-secondary {
      display:inline-flex; align-items:center; gap:8px;
      padding:14px 28px; background:transparent; color:var(--muted);
      text-decoration:none; border:1px solid var(--border); border-radius:12px;
      font-size:15px; font-weight:500; transition:all 0.2s;
    }
    .btn-secondary:hover { background:rgba(255,255,255,0.04); color:var(--text); border-color:rgba(255,255,255,0.15); }
    .hero-note { margin-top:20px; font-size:13px; color:var(--dim); animation:fadeUp 0.6s ease 0.4s both; }

    /* LOGO ANIMATION HERO */
    .hero-logo-badge {
      display:flex; align-items:center; justify-content:center;
      margin-bottom:32px; animation:fadeUp 0.6s ease both;
    }
    .hero-logo-badge img {
      width:100px; height:72px; object-fit:contain;
      filter:drop-shadow(0 0 24px rgba(96,165,250,0.6));
      animation:float 4s ease-in-out infinite;
    }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

    /* APP PREVIEW */
    .app-preview { position:relative; z-index:1; margin-top:80px; animation:fadeUp 0.8s ease 0.5s both; }
    .preview-frame {
      background:var(--bg3); border:1px solid var(--border);
      border-radius:20px; padding:20px; max-width:860px; margin:0 auto;
      box-shadow:0 40px 100px rgba(0,0,0,0.5),0 0 0 1px var(--border);
    }
    .preview-bar { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
    .dot-r{width:12px;height:12px;background:#EF4444;border-radius:50%}
    .dot-y{width:12px;height:12px;background:#EAB308;border-radius:50%}
    .dot-g{width:12px;height:12px;background:#22C55E;border-radius:50%}
    .preview-content { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .preview-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:20px; }
    .preview-card-title { font-size:13px; font-weight:600; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:6px; }
    .preview-qr { width:120px; height:120px; background:#F8FAFC; border-radius:10px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:48px; }
    .preview-url { font-size:10px; color:var(--blue); font-family:monospace; text-align:center; }
    .preview-pin { display:flex; justify-content:center; gap:8px; margin-top:12px; }
    .pin-box { width:36px; height:42px; background:var(--bg3); border:2px solid var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--blue); }
    .preview-files { display:flex; flex-direction:column; gap:8px; }
    .preview-file { display:flex; align-items:center; gap:10px; background:var(--bg3); border-radius:8px; padding:8px 10px; }
    .file-emoji { font-size:18px; }
    .file-info { flex:1; }
    .file-name-preview { font-size:11px; font-weight:500; }
    .file-size-preview { font-size:10px; color:var(--dim); }
    .file-bar { height:3px; background:var(--bg); border-radius:2px; margin-top:4px; overflow:hidden; }
    .file-bar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
    .check { font-size:12px; }

    /* STATS */
    .stats-strip {
      position:relative; z-index:1; display:flex; justify-content:center;
      border-top:1px solid var(--border); border-bottom:1px solid var(--border);
      background:rgba(255,255,255,0.02); padding:40px 5%;
    }
    .stat { flex:1; text-align:center; padding:0 32px; border-right:1px solid var(--border); }
    .stat:last-child { border-right:none; }
    .stat-num { font-family:'Syne',sans-serif; font-size:40px; font-weight:800; background:linear-gradient(135deg,var(--blue2),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .stat-label { font-size:13px; color:var(--muted); margin-top:4px; }

    /* SECTIONS */
    .section { position:relative; z-index:1; padding:100px 5%; max-width:1100px; margin:0 auto; }
    .section-tag { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
    .section-title { font-family:'Syne',sans-serif; font-size:clamp(26px,3.5vw,44px); font-weight:800; line-height:1.1; letter-spacing:-0.02em; margin-bottom:16px; }
    .section-sub { font-size:17px; color:var(--muted); max-width:520px; font-weight:300; margin-bottom:64px; }

    /* FEATURES */
    .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .feature-card {
      background:var(--bg2); border:1px solid var(--border);
      border-radius:16px; padding:28px; transition:all 0.3s;
      position:relative; overflow:hidden;
    }
    .feature-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--glow),transparent); opacity:0; transition:opacity 0.3s; }
    .feature-card:hover { border-color:rgba(59,130,246,0.3); transform:translateY(-4px); }
    .feature-card:hover::before { opacity:1; }
    .feature-icon { width:48px; height:48px; background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; }
    .feature-title { 
        font-family:'Syne',sans-serif; 
        font-size:17px; 
        font-weight:700; 
        margin-bottom:8px;
     
    }

    .feature-desc { 
        font-size:14px; 
        color:var(--muted); 
        line-height:1.6; 
        font-weight:300; 
    }

    /* HOW IT WORKS */
    .steps { 
        display:grid; 
        grid-template-columns:repeat(4,1fr); 
        gap:0; 
        position:relative; 
    }

    .steps::before { 
        content:''; 
        position:absolute; 
        top:28px; 
        left:10%; 
        right:10%; 
        height:1px; 
        background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),transparent); 
    }

    .step { 
        text-align:center; 
        padding:0 16px; 
    }

    .step-num { 
        width:56px; 
        height:56px; 
        background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(6,182,212,0.1)); 
        border:1px solid rgba(59,130,246,0.3); 
        border-radius:50%; 
        display:flex; 
        align-items:center; 
        justify-content:center; 
        font-family:'Syne',sans-serif; 
        font-size:20px; 
        font-weight:800; 
        color:var(--blue); 
        margin:0 auto 20px; 
        position:relative; 
        z-index:1; 
    }

    .step-title { 
        font-family:'Syne',sans-serif; 
        font-size:15px; 
        font-weight:700; 
        margin-bottom:8px; 
    }

    .step-desc { 
        font-size:13px; 
        color:var(--muted); 
        font-weight:300; 
    }


    /* PLATFORMS */
    .platforms { 
        display:flex; 
        justify-content:center; 
        gap:16px; 
        flex-wrap:wrap; 
        margin-top:48px; 
    }

    .platform-pill { 
        display:flex; 
        align-items:center; 
        gap:10px; 
        padding:12px 24px; 
        background:var(--bg2); 
        border:1px solid var(--border); 
        border-radius:100px; 
        font-size:14px; 
        font-weight:500; 
        transition:all 0.2s; 
    }

    .platform-pill:hover { 
        border-color:rgba(59,130,246,0.4); 
        background:rgba(59,130,246,0.06); 
        transform:translateY(-2px); 
    }


    /* PRICING */
    .pricing-grid { 
        display:grid; 
        grid-template-columns:1fr 1fr 1fr; 
        gap:20px; 
        align-items:start; 
    }

    .plan { 
        background:var(--bg2); 
        border:1px solid var(--border); 
        border-radius:20px; 
        padding:32px; 
        position:relative; 
        transition:transform 0.3s; 
    }

    .plan:hover { 
        transform:translateY(-4px); 
    }

    .plan.featured { 
        border-color:var(--blue); 
        background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(6,182,212,0.04)); 
        box-shadow:0 0 60px rgba(59,130,246,0.1); 
    }

    .plan-badge { 
        position:absolute; 
        top:-12px; left:50%; 
        transform:translateX(-50%); 
        background:var(--blue); 
        color:white; 
        font-size:12px; 
        font-weight:700; 
        padding:4px 14px; 
        border-radius:100px; 
        white-space:nowrap;
     }

    .plan-name { 
        font-family:'Syne',sans-serif; 
        font-size:18px; 
        font-weight:700; 
        margin-bottom:8px; 
    }
    .plan-price { 
        font-family:'Syne',sans-serif; 
        font-size:40px; 
        font-weight:800; 
        line-height:1; 
        margin-bottom:4px; 
    }

    .plan-price .currency { 
        font-size:20px; 
        vertical-align:top; 
        margin-top:6px; 
        display:inline-block;
     }

    .plan-price .period { 
        font-size:14px; 
        color:var(--muted); 
        font-weight:400; 
    }

    .plan-desc { 
        font-size:13px; 
        color:var(--muted); 
        margin-bottom:28px; 
        font-weight:300; 
    }

    .plan-features { 
        list-style:none; 
        margin-bottom:28px; 
    }

    .plan-features li { 
        font-size:14px; 
        padding:8px 0; 
        border-bottom:1px solid var(--border); 
        display:flex; 
        align-items:center;
         gap:10px; 
         color:var(--muted);
         }

    .plan-features li:last-child { 
        border-bottom:none; 
    }

    .plan-features li .ok { 
        color:var(--green); 
    }

    .plan-features li .no { 
        color:var(--dim);
     }

    .plan-btn { 
        display:block; 
        width:100%; 
        padding:12px; 
        text-align:center; 
        border-radius:10px; 
        text-decoration:none; 
        font-weight:600; 
        font-size:15px; 
        transition:all 0.2s;
     }

    .plan-btn.primary { 
        background:var(--blue); 
        color:white; 
    }

    .plan-btn.primary:hover {
         background:#2563EB; 
        }

    .plan-btn.outline { 
        background:transparent; 
        color:var(--muted); 
        border:1px solid var(--border); 
    }

    .plan-btn.outline:hover { 
        background:rgba(255,255,255,0.04); 
        color:var(--text); 
    }

    /* CTA */
    .cta-banner { 
        position:relative; 
        z-index:1; 
        margin:0 5% 100px; 
        background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(6,182,212,0.06)); 
        border:1px solid rgba(59,130,246,0.2); 
        border-radius:24px; 
        padding:80px 5%; 
        text-align:center; 
        overflow:hidden;
     }

    .cta-banner::before {
         content:''; 
         position:absolute; 
         top:-50%; 
         left:50%; 
         transform:translateX(-50%); 
         width:500px; 
         height:500px; 
         background:radial-gradient(circle,rgba(59,130,246,0.1),transparent 70%); 
         pointer-events:none; 
        }

    .cta-banner h2 { 
        font-family:'Syne',sans-serif; 
        font-size:clamp(26px,3vw,42px); 
        font-weight:800; 
        letter-spacing:-0.02em; 
        margin-bottom:16px; 
    }

    .cta-banner p { 
        font-size:17px; 
        color:var(--muted); 
        margin-bottom:40px; 
        font-weight:300; 
    }

    /* FOOTER */
    footer { 
        position:relative; 
        z-index:1; 
        border-top:1px solid var(--border); 
        padding:48px 5%; 
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        flex-wrap:wrap; 
        gap:20px;
     }

    .footer-logo { 
        font-family:'Syne',sans-serif; 
        font-size:18px; 
        font-weight:800; 
        display:flex; 
        align-items:center; 
        gap:10px; 
    }

    .footer-logo img { 
        width:28px; 
        height:28px; 
        object-fit:contain; 
        filter:drop-shadow(0 0 6px rgba(96,165,250,0.4)); 
    }

    .footer-links { 
        display:flex; 
        gap:28px; 
        list-style:none; 
        flex-wrap:wrap; 
    }

    .footer-links a { 
        color:var(--dim);
         text-decoration:none;
          font-size:14px;
          transition:color 0.2s;
         }

    .footer-links a:hover { 
        color:var(--text); 
    }

    .footer-copy {
         font-size:13px;
        color:var(--dim); 
    }

    /* ANIMATIONS */
    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-left { opacity:0; transform:translateX(-30px); transition:opacity 0.7s ease,transform 0.7s ease; }
    .reveal-left.visible { opacity:1; transform:translateX(0); }
    .reveal-right { opacity:0; transform:translateX(30px); transition:opacity 0.7s ease,transform 0.7s ease; }
    .reveal-right.visible { opacity:1; transform:translateX(0); }

    /* Stagger children */
    .stagger > * { opacity:0; transform:translateY(20px); transition:opacity 0.5s ease,transform 0.5s ease; }
    .stagger.visible > *:nth-child(1){transition-delay:0s}
    .stagger.visible > *:nth-child(2){transition-delay:0.1s}
    .stagger.visible > *:nth-child(3){transition-delay:0.2s}
    .stagger.visible > *:nth-child(4){transition-delay:0.3s}
    .stagger.visible > *:nth-child(5){transition-delay:0.4s}
    .stagger.visible > *:nth-child(6){transition-delay:0.5s}
    .stagger.visible > * { opacity:1; transform:translateY(0); }

    /* RESPONSIVE */
    @media(max-width:1024px){
      .features-grid{grid-template-columns:repeat(2,1fr)}
      .pricing-grid{grid-template-columns:1fr}
    }
    @media(max-width:768px){
      .nav-links{display:none}
      .hamburger{display:flex}
      .features-grid{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr 1fr;gap:32px}
      .steps::before{display:none}
      .stats-strip{flex-direction:column}
      .stat{border-right:none;border-bottom:1px solid var(--border);padding:24px 0}
      .stat:last-child{border-bottom:none}
      .preview-content{grid-template-columns:1fr}
      .preview-qr{width:90px;height:90px;font-size:36px}
      h1{font-size:clamp(32px,8vw,52px)}
      .hero{padding:100px 5% 60px}
      .cta-banner{padding:60px 5%}
      .btn-primary,.btn-secondary{width:100%;justify-content:center}
      .hero-actions{flex-direction:column;width:100%;max-width:360px;margin:0 auto}
      footer{flex-direction:column;align-items:center;text-align:center}
      .footer-links{justify-content:center}
    }
    @media(max-width:480px){
      .steps{grid-template-columns:1fr}
      .platforms{gap:10px}
      .platform-pill{padding:10px 16px;font-size:13px}
      .section{padding:70px 5%}
    }

    /* SCROLL PROGRESS BAR */
    #progress-bar { 
        position:fixed; 
        top:0; 
        left:0; 
        height:2px; 
        background:linear-gradient(90deg,var(--blue),
        var(--cyan)); 
        z-index:200; 
        transition:width 0.1s; 
    }

    /* TYPING CURSOR */
    .cursor { 
        display:inline-block;
        width:3px; 
        height:0.85em; 
        background:var(--blue2); 
        margin-left:2px; 
        animation:cursor-blink 1s step-end infinite; 
        vertical-align:middle; 
    }
    @keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* PARTICLE CANVAS */
    #particles { 
        position:fixed; 
        inset:0; 
        z-index:0; 
        pointer-events:none; 
        opacity:0.4; 
    }