:root {
    --ink: #fff;
    --paper: #191127;
    --acid: #883CF0;
    --coral: #7c3aed;
    --slate: #23133a;
    --mist: #d6d6d6;
    --scan: #8000ff;
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Mono', monospace;
    overflow-x: hidden;
    cursor: none;
  }

  /* CUSTOM CURSOR */
  .cursor {
    position: fixed; top:0; left:0; width:12px; height:12px;
    background: var(--acid); border-radius:50%;
    pointer-events:none; z-index:9999;
    transform: translate(-50%,-50%);
    transition: transform 0.1s, background 0.2s, width 0.2s, height 0.2s;
    mix-blend-mode: multiply;
  }
  .cursor.big { width:40px; height:40px; background: var(--acid); }

  /* NOISE OVERLAY */
  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.04'/%3E%3C/svg%3E");
    pointer-events:none; z-index:1000; opacity:0.4;
  }

  /* NAV */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:500;
    display:flex; align-items:center; justify-content:space-between;
    padding: 1.2rem 2.5rem;
    border-bottom: 1px solid #3a1c63;
    background: #180f26;
    backdrop-filter: blur(12px);
  }
  .nav-logo {
    font-family:'Bebas Neue', sans-serif;
    font-size:1.6rem; letter-spacing:0.08em;
    color: var(--ink);
  }
  .nav-logo span { color: var(--coral); }
  .nav-links { display:flex; gap:2rem; list-style:none; }
  .nav-links a {
    font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
    color: var(--ink); text-decoration:none;
    transition: color 0.2s;
  }
  .nav-links a:hover { color:var(--coral); }
  .nav-cta {
    background: var(--ink); color: var(--acid);
    padding:0.5rem 1.3rem; font-family:'DM Mono',monospace;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    border:none; cursor:none; transition:all 0.2s;
  }
  .nav-cta:hover { background:var(--coral); color:#fff; }

  /* ── HERO ── */
  #hero {
    min-height:100vh;
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding-top:80px;
    position:relative;
    overflow:hidden;
  }
  .hero-left {
    display:flex; flex-direction:column; justify-content:center;
    padding: 6rem 3rem 6rem 4rem;
    position:relative; z-index:2;
  }
  .hero-eyebrow {
    font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--coral); margin-bottom:1.5rem;
    display:flex; align-items:center; gap:0.7rem;
  }
  .hero-eyebrow::before {
    content:''; display:inline-block; width:2rem; height:1px;
    background:var(--coral);
  }
  h1 {
    font-family:'Bebas Neue',sans-serif;
    font-size: clamp(4rem, 7vw, 7.5rem);
    line-height:0.92; letter-spacing:0.02em;
    margin-bottom:2rem;
  }
  h1 em {
    font-family:'Instrument Serif',serif;
    font-style:italic; color:var(--coral);
  }
  .hero-sub {
    font-size:0.82rem; line-height:1.8; color:#a4a4a4;
    max-width:38ch; margin-bottom:2.5rem;
  }
  .hero-btns { display:flex; gap:1rem; align-items:center; }
  .btn-primary {
    background:var(--ink); color:var(--acid);
    padding:0.85rem 2rem; border:none; cursor:none;
    font-family:'DM Mono',monospace; font-size:0.78rem;
    letter-spacing:0.1em; text-transform:uppercase;
    transition: all 0.2s; position:relative; overflow:hidden;
  }
  .btn-primary::after {
    content:'→'; position:absolute; right:1rem; top:50%;
    transform:translateY(-50%) translateX(10px); opacity:0;
    transition: all 0.25s;
  }
  .btn-primary:hover { padding-right:2.8rem; }
  .btn-primary:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
  .btn-secondary {
    background:transparent; color:var(--ink);
    border:1px solid var(--ink); padding:0.85rem 2rem;
    cursor:none; font-family:'DM Mono',monospace; font-size:0.78rem;
    letter-spacing:0.1em; text-transform:uppercase;
    transition: all 0.2s;
  }
  .btn-secondary:hover { background:var(--ink); color:var(--paper); }

  .hero-right {
    display:flex; align-items:center; justify-content:center;
    padding:5rem 3rem;
    position:relative;
    background: var(--slate);
    overflow:hidden;
  }

  /* Animated QR */
  .qr-stage {
    position:relative; width:320px; height:320px;
  }
  .qr-grid {
    display:grid; grid-template-columns: repeat(11,1fr);
    gap:3px; width:100%; height:100%;
  }
  .qr-cell {
    border-radius:2px;
    animation: qrPulse 3s ease-in-out infinite;
    animation-delay: var(--d);
  }
  .qr-cell.on { background:var(--acid); }
  .qr-cell.off { background: rgba(255,255,255,0.06); }
  .qr-cell.corner { background: var(--scan); border-radius:3px; }
  @keyframes qrPulse {
    0%,100%{ opacity:1; }
    50%{ opacity:0.3; }
  }
  .scan-line {
    position:absolute; left:8px; right:8px; height:2px;
    background: linear-gradient(90deg, transparent, var(--scan), transparent);
    animation: scanAnim 2.4s linear infinite;
    box-shadow: 0 0 12px var(--scan), 0 0 24px var(--scan);
    top:0;
  }
  @keyframes scanAnim {
    0% { top:0; opacity:0; }
    5% { opacity:1; }
    95% { opacity:1; }
    100% { top:calc(100% - 2px); opacity:0; }
  }
  .qr-label {
    position:absolute; bottom:-2.5rem; left:50%; transform:translateX(-50%);
    font-size:0.65rem; letter-spacing:0.2em; color:rgba(255,255,255,0.35);
    text-transform:uppercase; white-space:nowrap;
  }
  .qr-ring {
    position:absolute; inset:-20px;
    border:1px solid rgba(0,229,255,0.15); border-radius:4px;
    animation: ringPulse 2s ease-in-out infinite;
  }
  .qr-ring2 {
    position:absolute; inset:-36px;
    border:1px solid rgba(0,229,255,0.07); border-radius:8px;
    animation: ringPulse 2s ease-in-out infinite 0.4s;
  }
  @keyframes ringPulse {
    0%,100%{ transform:scale(1); opacity:0.5; }
    50%{ transform:scale(1.03); opacity:1; }
  }

  /* floating stats */
  .stat-chip {
    position:absolute; background:var(--paper);
    padding:0.6rem 1rem; border-radius:2px;
    font-size:0.68rem; letter-spacing:0.08em;
    animation: floatChip 4s ease-in-out infinite;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  }
  .stat-chip strong { display:block; font-size:1.2rem; font-family:'Bebas Neue'; color:var(--coral); }
  .chip1 { top:10%; left:-60px; animation-delay:0s; }
  .chip2 { top:55%; right:-70px; animation-delay:1.5s; }
  .chip3 { bottom:8%; left:-50px; animation-delay:0.8s; }
  @keyframes floatChip {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-8px); }
  }

  /* TICKER */
  .ticker-bar {
    background: #1f1232; color:var(--acid);
    padding:0.7rem 0; overflow:hidden;
    border-top:1px solid #3a1c63;
  }
  .ticker-track {
    display:flex; gap:3rem;
    animation: ticker 20s linear infinite;
    white-space:nowrap;
  }
  .ticker-item {
    font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
    flex-shrink:0;
  }
  .ticker-dot { color:var(--coral); margin-right:3rem; }
  @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  /* ── FEATURES ── */
  #features {
    padding: 8rem 4rem;
    background: var(--paper);
  }
  .section-label {
    font-size:0.68rem; letter-spacing:0.25em; text-transform:uppercase;
    color:var(--coral); margin-bottom:1rem;
  }
  .section-title {
    font-family:'Bebas Neue',sans-serif;
    font-size: clamp(2.8rem,5vw,5rem);
    line-height:0.95; margin-bottom:4rem;
  }
  .section-title em { font-family:'Instrument Serif'; font-style:italic; }

  .features-grid {
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap:1px; background:#23133a;
    border:1px solid #3a1c63;
  }
  .feat-card {
    background:var(--paper); padding:2.5rem 2rem;
    transition: background 0.3s, color 0.3s;
    position:relative; overflow:hidden;
    cursor:none;
  }
  .feat-card::before {
    content:''; position:absolute; inset:0;
    background:#1f1232;
    transform:translateY(100%); transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
  }
  .feat-card:hover::before { transform:translateY(0); }
  .feat-card > * { position:relative; z-index:1; }
  .feat-card:hover .feat-icon, .feat-card:hover .feat-title,
  .feat-card:hover .feat-text { color:var(--acid); }
  .feat-icon {
    font-size:1.8rem; margin-bottom:1.2rem; display:block;
    transition: color 0.3s;
  }
  .feat-title {
    font-family:'Bebas Neue',sans-serif; font-size:1.4rem;
    letter-spacing:0.04em; margin-bottom:0.8rem;
    transition: color 0.3s;
  }
  .feat-text {
    font-size:0.75rem; line-height:1.8; color:#555;
    transition: color 0.3s;
  }
  .feat-card:hover .feat-text { color:rgba(246, 248, 242, 0.879); }

  /* ── HOW IT WORKS ── */
  #how {
    padding:8rem 4rem;
    background:#180f26;
    color:var(--fff);
    position:relative; overflow:hidden;
  }
  #how::before {
    content:''; position:absolute;
    top:-200px; right:-200px; width:600px; height:600px;
    background:radial-gradient(circle, rgba(123, 0, 255, 0.06) 0%, transparent 70%);
    pointer-events:none;
  }
  #how .section-title { color:var(--fff); }
  .steps {
    display:grid; grid-template-columns: repeat(4,1fr);
    gap:2px; margin-top:1rem;
  }
  .step {
    padding:2.5rem 1.8rem;
    border:1px solid #3a1c63;
    position:relative;
    transition:border-color 0.3s;
  }
  .step:hover { border-color:var(--acid); }
  .step-num {
    font-family:'Bebas Neue',sans-serif; font-size:4rem;
    color:rgba(255,255,255,0.07); line-height:1;
    position:absolute; top:1rem; right:1.5rem;
  }
  .step-icon { font-size:1.5rem; margin-bottom:1.2rem; }
  .step-title {
    font-family:'Bebas Neue',sans-serif; font-size:1.3rem;
    color:var(--acid); margin-bottom:0.8rem; letter-spacing:0.04em;
  }
  .step-text { font-size:0.75rem; line-height:1.8; color:rgba(255,255,255,0.5); }
  .step-connector {
    position:absolute; top:50%; right:-1px;
    width:2px; height:30%; background:var(--acid);
    opacity:0.2; transform:translateY(-50%);
  }
  .step:last-child .step-connector { display:none; }

  /* ── USE CASES TABS ── */
  #usecases {
    padding:8rem 4rem;
    background: #191127;
  }
  .tabs { display:flex; gap:0; margin-bottom:0; border-bottom:1px solid #3a1c63; }
  .tab-btn {
    padding:0.9rem 1.6rem; border:none; background:transparent;
    font-family:'DM Mono',monospace; font-size:0.72rem;
    letter-spacing:0.1em; text-transform:uppercase;
    cursor:none; color:#888; transition:all 0.2s;
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .tab-btn.active { color:var(--ink); border-bottom-color:var(--coral); }
  .tab-btn:hover:not(.active) { color:var(--ink); }
  .tab-panels { margin-top:0; }
  .tab-panel {
    display:none; padding:3rem 0;
    animation: fadeUp 0.35s ease forwards;
  }
  .tab-panel.active { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to { opacity:1; transform:translateY(0); }
  }
  .panel-content h3 {
    font-family:'Bebas Neue',sans-serif; font-size:2.6rem;
    line-height:1; margin-bottom:1.2rem; color:#fff;
  }
  .panel-content p {
    font-size:0.8rem; line-height:1.9; color:#555; margin-bottom:1.8rem;
  }
  .panel-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
  .tag {
    padding:0.35rem 0.85rem; background:var(--ink); color:var(--acid);
    font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase;
  }
  .panel-visual {
    height:280px; background:#1f1232;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .panel-visual-icon { font-size:5rem; opacity:0.15; }
  .panel-visual-text {
    position:absolute; bottom:1.5rem; left:1.5rem;
    color:var(--acid); font-size:0.65rem; letter-spacing:0.15em;
    text-transform:uppercase;
  }
  .panel-stat {
    position:absolute; top:1.5rem; right:1.5rem;
    background:var(--acid); color:var(--ink);
    padding:0.5rem 1rem;
    font-family:'Bebas Neue',sans-serif; font-size:1.8rem; line-height:1;
  }
  .panel-stat span { display:block; font-family:'DM Mono'; font-size:0.55rem; letter-spacing:0.1em; }

  /* ── STATS BAND ── */
  #stats {
    background:var(--coral); padding:4rem;
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:1px; background-color:var(--coral);
  }
  .stat-block {
    background:var(--coral); text-align:center;
    padding:2rem;
    border-right:1px solid #3a1c63;
    animation: countUp 2s ease forwards;
  }
  .stat-block:last-child { border-right:none; }
  .stat-num {
    font-family:'Bebas Neue',sans-serif; font-size:4rem;
    color:#fff; line-height:1; margin-bottom:0.4rem;
  }
  .stat-desc { font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.7); }

  /* ── PRICING ── */
  #pricing {
    padding:8rem 4rem;
    background:var(--paper);
  }
  .pricing-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1.5rem; margin-top:1rem;
  }
  .price-card {
    border:1px solid #3a1c63; padding:2.5rem 2rem;
    position:relative; transition:transform 0.3s, box-shadow 0.3s;
    cursor:none;
  }
  .price-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.1); }
  .price-card.featured {
    background:#2a1647; color:var(--ink);
    border-color:#3a1c63;
  }
  .price-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--coral); color:#fff;
    padding:0.25rem 1rem; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase;
  }
  .price-plan { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:#888; margin-bottom:1rem; }
  .price-card.featured .price-plan { color:rgba(255,255,255,0.5); }
  .price-amount {
    font-family:'Bebas Neue',sans-serif; font-size:3.5rem; line-height:1;
    margin-bottom:0.3rem;
  }
  .price-card.featured .price-amount { color:var(--acid); }
  .price-period { font-size:0.7rem; color:#888; margin-bottom:1.8rem; }
  .price-card.featured .price-period { color:rgba(255,255,255,0.4); }
  .price-features { list-style:none; margin-bottom:2rem; }
  .price-features li {
    font-size:0.75rem; line-height:1.6; padding:0.5rem 0;
    border-bottom:1px solid #3a1c63;
    display:flex; align-items:center; gap:0.6rem;
  }
  .price-card.featured .price-features li { border-bottom-color:#3a1c63; }
  .price-features li::before { content:'✓'; color:var(--coral); font-size:0.9rem; }
  .price-card.featured .price-features li::before { color:var(--acid); }
  .btn-plan {
    width:100%; padding:0.85rem; border:1px solid #3a1c63;
    background:transparent; color:var(--ink);
    font-family:'DM Mono',monospace; font-size:0.75rem;
    letter-spacing:0.1em; text-transform:uppercase;
    cursor:none; transition:all 0.2s;
  }
  .btn-plan:hover { background:var(--ink); color:var(--acid); }
  .price-card.featured .btn-plan { background:var(--acid); border-color:var(--acid); color:var(--ink); }
  .price-card.featured .btn-plan:hover { background:var(--coral); border-color:var(--coral); color:#fff; }

  /* ── FAQ ── */
  #faq {
    padding:8rem 4rem;
    background:#180f26; color:var(--ink);
  }
  #faq .section-title { color:var(--ink); }
  .faq-list { max-width:800px; }
  .faq-item {
    border-top:1px solid #3a1c63;
    overflow:hidden;
  }
  .faq-item:last-child { border-bottom:1px solid #3a1c63; }
  .faq-q {
    width:100%; text-align:left; background:none; border:none;
    color:var(--ink); padding:1.5rem 0;
    font-family:'DM Mono',monospace; font-size:0.85rem;
    letter-spacing:0.04em; cursor:none;
    display:flex; justify-content:space-between; align-items:center;
    transition:color 0.2s;
  }
  .faq-q:hover { color:var(--acid); }
  .faq-q.open { color:var(--acid); }
  .faq-arrow { transition:transform 0.3s; font-size:0.8rem; }
  .faq-q.open .faq-arrow { transform:rotate(45deg); }
  .faq-a {
    max-height:0; overflow:hidden;
    transition:max-height 0.4s ease, padding 0.3s;
    font-size:0.78rem; line-height:1.9; color:rgba(255,255,255,0.5);
  }
  .faq-a.open { max-height:200px; padding-bottom:1.5rem; }

  /* ── CTA FOOTER ── */
  #cta {
    padding:8rem 4rem;
    background:#3a1c6350;
    display:grid; grid-template-columns:1fr auto;
    align-items:center; gap:4rem;
  }
  #cta h2 {
    font-family:'Bebas Neue',sans-serif;
    font-size: clamp(3rem,6vw,6rem);
    line-height:0.92; color:var(--ink);
  }
  #cta h2 em { font-family:'Instrument Serif'; font-style:italic; color:var(--coral); }
  .cta-actions { display:flex; flex-direction:column; gap:1rem; align-items:flex-end; }
  .btn-dark-lg {
    background:var(--ink); color:var(--acid);
    padding:1.1rem 2.5rem; border:none; cursor:none;
    font-family:'DM Mono',monospace; font-size:0.85rem;
    letter-spacing:0.1em; text-transform:uppercase;
    white-space:nowrap; transition:all 0.2s;
  }
  .btn-dark-lg:hover { background:var(--coral); color:#fff; }
  .cta-note { font-size:0.68rem; color:rgba(255, 255, 255, 0.5); letter-spacing:0.1em; }

  footer {
    background:#180f26; color:#fff;
    padding:2rem 4rem; display:flex;
    justify-content:space-between; align-items:center;
    font-size:0.68rem; letter-spacing:0.1em;
  }
  footer a { color:rgba(255,255,255,0.3); text-decoration:none; }
  footer a:hover { color:var(--acid); }

  /* ── QR GENERATOR DEMO ── */
  #generator {
    padding:8rem 4rem;
    background: #180f26;;
    display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start;
  }
  .gen-title { font-family:'Bebas Neue',sans-serif; font-size:3rem; margin-bottom:0.5rem; }
  .gen-sub { font-size:0.78rem; color:#666; line-height:1.8; margin-bottom:2rem; }
  .gen-input-group { margin-bottom:1.5rem; }
  .gen-label { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:#888; margin-bottom:0.5rem; display:block; }
  .gen-input {
    width:100%; padding:0.9rem 1rem; border:1px solid #3a1c63;
    background:#fff; font-family:'DM Mono',monospace; font-size:0.8rem;
    outline:none; transition:border-color 0.2s;
  }
  .gen-input:focus { border-color:#3a1c63; }
  .gen-types { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
  .type-btn {
    padding:0.4rem 0.9rem; border:1px solid #3a1c63;
    background:transparent; font-family:'DM Mono',monospace;
    font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase;
    cursor:none; transition:all 0.2s; color:#fff;
  }
  .type-btn.active { background:var(--ink); color:var(--acid); border-color:#3a1c63; }
  .type-btn:hover:not(.active) { border-color:var(--ink); }
  .gen-btn {
    background:var(--coral); color:#fff; border:none;
    padding:0.9rem 2rem; width:100%;
    font-family:'DM Mono',monospace; font-size:0.8rem;
    letter-spacing:0.1em; text-transform:uppercase;
    cursor:none; transition:all 0.2s;
  }
  .gen-btn:hover { background:var(--ink); color:var(--acid); }
  .qr-preview {
    background:var(--ink); min-height:380px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:3rem; position:relative; overflow:hidden;
  }
  #qrOutput {
    width:200px; height:200px;
    display:grid; grid-template-columns:repeat(15,1fr);
    gap:2px; margin-bottom:1.5rem;
  }
  .qr-px { border-radius:1px; }
  .qr-px.on { background:var(--paper); }
  .qr-px.off { background:transparent; }
  .qr-preview-label {
    font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
    color:rgba(0, 0, 0, 0.3); text-align:center;
  }
  .qr-preview-url {
    color:var(--acid); font-size:0.7rem; margin-top:0.4rem;
    max-width:220px; text-align:center; word-break:break-all;
    opacity:0; transition:opacity 0.4s;
  }
  .qr-preview-url.show { opacity:1; }
  .qr-pulse-ring {
    position:absolute; inset:0;
    border:1px solid #3a1c63;
    animation:ringPulse 3s ease-in-out infinite;
  }

  /* RESPONSIVE */
  @media (max-width:900px) {
    #hero { grid-template-columns:1fr; }
    .hero-right { min-height:300px; }
    .features-grid { grid-template-columns:1fr 1fr; }
    .steps { grid-template-columns:1fr 1fr; }
    #stats { grid-template-columns:1fr 1fr; }
    .pricing-grid { grid-template-columns:1fr; }
    #cta { grid-template-columns:1fr; }
    .cta-actions { align-items:flex-start; }
    #generator { grid-template-columns:1fr; }
    .tab-panel.active { grid-template-columns:1fr; }
    nav { padding:1rem 1.5rem; }
    .nav-links { display:none; }
    #hero, #features, #how, #usecases, #pricing, #faq, #cta, #generator {
      padding-left:1.5rem; padding-right:1.5rem;
    }
  }