/* ==========================================
       1. CSS VARIABLES & RESET
    ========================================== */
    :root {
      --c-bg-0: #070514;
      --c-bg-1: #0d0b22;
      --c-bg-2: #13102b;
      --c-bg-card: #1b1737;
      --c-purple-deep: #4c1d95;
      --c-purple-mid: #6d28d9;
      --c-purple-light: #8b5cf6;
      --c-gold: #d97706;
      --c-gold-bright: #f59e0b;
      --c-gold-light: #fbbf24;
      --c-teal: #10b981;
      --c-teal-light: #34d399;
      --c-teal-dark: #065f46;
      --c-text-primary: #f5f3ff;
      --c-text-secondary: #c4b5fd;
      --c-text-muted: #6d5fa0;
      --c-border: rgba(139, 92, 246, 0.18);
      --c-border-gold: rgba(245, 158, 11, 0.3);
      --c-border-teal: rgba(16, 185, 129, 0.3);
      --glow-gold: 0 0 22px rgba(245,158,11,.45), 0 0 50px rgba(245,158,11,.15);
      --glow-teal: 0 0 22px rgba(16,185,129,.4), 0 0 50px rgba(16,185,129,.12);
      --glow-purple: 0 0 22px rgba(109,40,217,.45), 0 0 60px rgba(109,40,217,.18);
      --section-pad: clamp(64px, 9vw, 108px);
      --container-max: 1180px;
      --container-pad: clamp(16px, 4vw, 48px);
      --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
      --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
      --tr-f: 0.2s ease; --tr-m: 0.35s ease;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--c-bg-0);
      color: var(--c-text-primary);
      line-height: 1.6;
      overflow-x: hidden;
    }
    img { max-width:100%; display:block; }
    a { color:inherit; text-decoration:none; }
    ul { list-style:none; }
    button { font-family:var(--font); }
    .container {
      width:100%; max-width:var(--container-max);
      margin:0 auto; padding:0 var(--container-pad);
    }

    /* ==========================================
       2. UTILITY CLASSES
    ========================================== */
    .btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:12px 28px; border-radius:var(--r-md);
      font-weight:700; font-size:.92rem; cursor:pointer;
      border:none; transition:all var(--tr-m);
      letter-spacing:.025em; text-decoration:none; white-space:nowrap;
    }
    .btn-gold {
      background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold));
      color:#000; box-shadow: 0 4px 18px rgba(245,158,11,.32);
    }
    .btn-gold:hover { box-shadow:var(--glow-gold); transform:translateY(-2px); background:linear-gradient(135deg,#fde68a,var(--c-gold-bright)); }
    .btn-outline {
      background:transparent; border:1.5px solid rgba(139,92,246,.5); color:var(--c-text-primary);
    }
    .btn-outline:hover { border-color:var(--c-gold-bright); color:var(--c-gold-bright); box-shadow:var(--glow-gold); transform:translateY(-2px); }
    .btn-teal {
      background:linear-gradient(135deg, var(--c-teal), var(--c-teal-dark));
      color:#fff; box-shadow: 0 4px 18px rgba(16,185,129,.28);
    }
    .btn-teal:hover { box-shadow:var(--glow-teal); transform:translateY(-2px); }

    .section-tag {
      display:inline-block; font-size:.72rem; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-bright);
      background:rgba(245,158,11,.09); border:1px solid var(--c-border-gold);
      padding:5px 14px; border-radius:100px; margin-bottom:16px;
    }
    .section-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:900; line-height:1.15; margin-bottom:14px; }
    .section-subtitle { font-size:clamp(.88rem,2vw,1.02rem); color:var(--c-text-secondary); max-width:580px; line-height:1.75; }
    .section-header { margin-bottom:clamp(36px,5vw,60px); }
    .section-header.center { text-align:center; }
    .section-header.center .section-subtitle { margin:0 auto; }
    .grad-gold { background:linear-gradient(135deg,var(--c-gold-light),var(--c-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .grad-teal { background:linear-gradient(135deg,var(--c-teal-light),var(--c-teal)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .divider { width:56px; height:3px; background:linear-gradient(90deg,var(--c-gold-bright),var(--c-teal)); border-radius:100px; margin-bottom:20px; }
    .divider.center { margin:0 auto 20px; }

    /* ==========================================
       3. STAR CANVAS
    ========================================== */
    #star-canvas {
      position:fixed; top:0; left:0; width:100%; height:100%;
      pointer-events:none; z-index:0; opacity:.5;
    }

    /* ==========================================
       4. HEADER & NAVIGATION
    ========================================== */
    .site-header {
      position:fixed; top:0; left:0; right:0;
      z-index:1000; transition:all var(--tr-m);
    }
    .site-header.scrolled {
      background:rgba(7,5,20,.92);
      backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
      border-bottom:1px solid var(--c-border);
      box-shadow:0 4px 32px rgba(0,0,0,.45);
    }
    .nav-inner {
      display:flex; align-items:center; justify-content:space-between;
      gap:20px; padding:18px 0;
    }
    .nav-logo { display:flex; align-items:center; gap:11px; flex-shrink:0; }
    .nav-logo img { width:42px; height:42px; border-radius:var(--r-sm); border:1.5px solid var(--c-border-gold); }
    .nav-logo-text { font-size:1.15rem; font-weight:900; letter-spacing:-.02em; }
    .nav-logo-text .vip { color:var(--c-gold-bright); }
    .nav-links { display:flex; align-items:center; gap:4px; }
    .nav-links a {
      padding:8px 13px; border-radius:var(--r-sm); font-size:.88rem; font-weight:500;
      color:var(--c-text-secondary); transition:all var(--tr-f); position:relative;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:3px; left:13px; right:13px;
      height:2px; background:var(--c-gold-bright); border-radius:100px;
      transform:scaleX(0); transition:transform var(--tr-f);
    }
    .nav-links a:hover { color:var(--c-text-primary); }
    .nav-links a:hover::after { transform:scaleX(1); }
    .nav-hamburger {
      display:none; flex-direction:column; gap:5px; cursor:pointer;
      padding:8px; border-radius:var(--r-sm);
      background:var(--c-bg-2); border:1px solid var(--c-border);
      transition:all var(--tr-f);
    }
    .nav-hamburger:hover { border-color:var(--c-gold-bright); }
    .nav-hamburger span { display:block; width:22px; height:2px; background:var(--c-text-primary); border-radius:2px; transition:all var(--tr-m); }
    .nav-hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .nav-hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
    .nav-hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .nav-mobile {
      display:none; flex-direction:column; gap:4px;
      padding:12px 16px 20px; background:rgba(13,11,34,.98);
      border-top:1px solid var(--c-border); backdrop-filter:blur(24px);
    }
    .nav-mobile.open { display:flex; }
    .nav-mobile a {
      padding:12px 16px; border-radius:var(--r-sm); font-size:.93rem; font-weight:500;
      color:var(--c-text-secondary); transition:all var(--tr-f); border:1px solid transparent;
    }
    .nav-mobile a:hover { color:var(--c-gold-bright); background:rgba(245,158,11,.07); border-color:var(--c-border-gold); }
    .nav-mobile .btn { margin-top:8px; justify-content:center; }

    /* ==========================================
       5. HERO
    ========================================== */
    .hero {
      position:relative; min-height:100vh;
      display:flex; align-items:center; padding-top:82px; overflow:hidden;
    }
    .hero-bg {
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(109,40,217,.22) 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 85% 65%, rgba(16,185,129,.09) 0%, transparent 50%),
        radial-gradient(ellipse 55% 55% at 15% 85%, rgba(76,29,149,.18) 0%, transparent 50%),
        var(--c-bg-0);
    }
    .hero-grid {
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(139,92,246,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,92,246,.035) 1px, transparent 1px);
      background-size:50px 50px;
      mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
    }
    .orb {
      position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none;
    }
    .orb-1 { width:520px; height:520px; background:rgba(109,40,217,.13); top:-120px; left:-160px; }
    .orb-2 { width:360px; height:360px; background:rgba(16,185,129,.07); bottom:-60px; right:-110px; }
    .orb-3 { width:220px; height:220px; background:rgba(245,158,11,.05); top:42%; right:22%; }
    .hero-content { position:relative; z-index:2; max-width:740px; }
    .hero-eyebrow {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(245,158,11,.09); border:1px solid var(--c-border-gold);
      border-radius:100px; padding:7px 18px; font-size:.74rem; font-weight:700;
      letter-spacing:.12em; text-transform:uppercase; color:var(--c-gold-bright); margin-bottom:26px;
    }
    .hero-title {
      font-size:clamp(2.1rem,6.5vw,4.2rem); font-weight:900;
      line-height:1.08; letter-spacing:-.025em; margin-bottom:22px;
    }
    .hero-subtitle {
      font-size:clamp(.95rem,2.2vw,1.15rem); color:var(--c-text-secondary);
      max-width:560px; line-height:1.78; margin-bottom:38px;
    }
    .hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
    .hero-actions .btn { font-size:.98rem; padding:14px 32px; }
    .hero-stats {
      display:flex; flex-wrap:wrap; gap:28px;
      margin-top:52px; padding-top:36px; border-top:1px solid var(--c-border);
    }
    .stat-val { font-size:1.9rem; font-weight:900; color:var(--c-gold-bright); line-height:1; }
    .stat-lbl { font-size:.75rem; color:var(--c-text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.08em; }

    /* ==========================================
       6. COLLABORATIONS / GALLERY
    ========================================== */
    .collaborations {
      position:relative; z-index:1;
      padding:var(--section-pad) 0;
      background:linear-gradient(180deg, var(--c-bg-0), var(--c-bg-1));
    }
    .collab-grid {
      display:grid; grid-template-columns:repeat(auto-fill, minmax(272px,1fr)); gap:22px;
    }
    .cosplay-card {
      position:relative; border-radius:var(--r-lg); overflow:hidden;
      background:var(--c-bg-card); border:1px solid var(--c-border);
      transition:all var(--tr-m); cursor:pointer;
    }
    .cosplay-card:hover { transform:translateY(-7px); border-color:rgba(245,158,11,.4); box-shadow:var(--glow-gold); }
    .cosplay-card.teal:hover { border-color:rgba(16,185,129,.45); box-shadow:var(--glow-teal); }
    .card-img { position:relative; overflow:hidden; aspect-ratio:3/4; }
    .card-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--tr-m); }
    .cosplay-card:hover .card-img img { transform:scale(1.07); }
    .card-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 38%, rgba(7,5,20,.6) 68%, rgba(7,5,20,.96) 100%); }
    .card-badge {
      position:absolute; top:13px; right:13px;
      padding:5px 12px; border-radius:100px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; z-index:2;
    }
    .b-premium { background:linear-gradient(135deg,var(--c-gold-bright),var(--c-gold)); color:#000; }
    .b-soon { background:rgba(16,185,129,.9); color:#fff; border:1px solid var(--c-teal-light); }
    .b-free { background:rgba(139,92,246,.85); color:#fff; }
    .b-new { background:rgba(245,158,11,.12); color:var(--c-gold-bright); border:1px solid var(--c-border-gold); }
    .card-lock {
      position:absolute; inset:0; background:rgba(7,5,20,.6);
      display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity var(--tr-m); z-index:3;
    }
    .cosplay-card:hover .card-lock { opacity:1; }
    .lock-box {
      text-align:center; background:rgba(245,158,11,.1);
      border:1px solid var(--c-border-gold); border-radius:var(--r-md);
      padding:16px 24px; backdrop-filter:blur(10px);
    }
    .lock-box.teal-lock { border-color:var(--c-border-teal); background:rgba(16,185,129,.1); }
    .lock-ico { font-size:1.9rem; display:block; margin-bottom:7px; }
    .lock-txt { font-size:.78rem; font-weight:700; color:var(--c-gold-bright); letter-spacing:.04em; }
    .lock-box.teal-lock .lock-txt { color:var(--c-teal); }
    .card-body { padding:18px; }
    .card-name { font-size:1.05rem; font-weight:700; color:var(--c-text-primary); margin-bottom:5px; }
    .card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .card-spec { font-size:.76rem; color:var(--c-text-muted); }
    .card-stats { display:flex; gap:10px; }
    .card-stat { font-size:.73rem; color:var(--c-text-secondary); display:flex; align-items:center; gap:3px; }
    .card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:13px; border-top:1px solid var(--c-border); }
    .card-foot-txt { font-size:.78rem; color:var(--c-text-muted); }
    .card-arrow {
      width:32px; height:32px; border-radius:50%;
      background:rgba(245,158,11,.09); border:1px solid var(--c-border-gold);
      display:flex; align-items:center; justify-content:center;
      font-size:.88rem; transition:all var(--tr-f);
    }
    .cosplay-card:hover .card-arrow { background:var(--c-gold-bright); color:#000; box-shadow:var(--glow-gold); }
    .cosplay-card.teal:hover .card-arrow { background:var(--c-teal); border-color:var(--c-teal-light); box-shadow:var(--glow-teal); color:#fff; }

    /* ==========================================
       7. BENEFITS
    ========================================== */
    .benefits {
      position:relative; z-index:1;
      padding:var(--section-pad) 0;
      background:var(--c-bg-1); overflow:hidden;
    }
    .benefits::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 60% 40% at 50% 50%, rgba(109,40,217,.07) 0%, transparent 60%);
      pointer-events:none;
    }
    .benefits-grid {
      display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:22px;
    }
    .benefit-card {
      position:relative; overflow:hidden;
      background:var(--c-bg-card); border:1px solid var(--c-border);
      border-radius:var(--r-lg); padding:30px 26px;
      transition:all var(--tr-m);
    }
    .benefit-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg,var(--c-purple-mid),var(--c-gold-bright),var(--c-teal));
      opacity:0; transition:opacity var(--tr-m);
    }
    .benefit-card:hover::before { opacity:1; }
    .benefit-card:hover { transform:translateY(-5px); box-shadow:var(--glow-purple); border-color:rgba(139,92,246,.3); }
    .benefit-card.bc-gold:hover { box-shadow:var(--glow-gold); border-color:rgba(245,158,11,.38); }
    .benefit-card.bc-teal:hover { box-shadow:var(--glow-teal); border-color:rgba(16,185,129,.38); }
    .benefit-ico {
      width:54px; height:54px; border-radius:var(--r-md);
      display:flex; align-items:center; justify-content:center;
      font-size:1.55rem; margin-bottom:18px;
    }
    .ico-gold { background:rgba(245,158,11,.1); border:1px solid var(--c-border-gold); }
    .ico-teal { background:rgba(16,185,129,.1); border:1px solid var(--c-border-teal); }
    .ico-purple { background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.28); }
    .benefit-title { font-size:1.05rem; font-weight:700; margin-bottom:10px; }
    .benefit-desc { font-size:.85rem; color:var(--c-text-muted); line-height:1.68; }
    .benefit-pill {
      display:inline-block; margin-top:14px; font-size:.68rem; font-weight:700;
      text-transform:uppercase; letter-spacing:.1em; padding:3px 10px; border-radius:100px;
    }
    .pill-gold { background:rgba(245,158,11,.1); color:var(--c-gold-bright); border:1px solid var(--c-border-gold); }
    .pill-teal { background:rgba(16,185,129,.1); color:var(--c-teal); border:1px solid var(--c-border-teal); }
    .pill-purple { background:rgba(139,92,246,.1); color:var(--c-purple-light); border:1px solid rgba(139,92,246,.28); }

    /* Plans teaser */
    .plans-wrap { margin-top:68px; }
    .plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; max-width:860px; margin:0 auto; }
    .plan-card { border-radius:var(--r-lg); padding:34px 26px; text-align:center; position:relative; overflow:hidden; transition:all var(--tr-m); }
    .plan-card:hover { transform:translateY(-6px); }
    .plan-card.pc-free { background:var(--c-bg-card); border:1px solid var(--c-border); }
    .plan-card.pc-vip {
      background:linear-gradient(135deg,rgba(109,40,217,.14),rgba(7,5,20,.8));
      border:1px solid rgba(245,158,11,.42); box-shadow:var(--glow-gold);
    }
    .plan-card.pc-vip::before {
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      background:linear-gradient(90deg,var(--c-gold-bright),var(--c-teal),var(--c-gold-bright));
    }
    .plan-label {
      display:inline-block; padding:4px 14px; border-radius:100px;
      font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px;
    }
    .pl-free { background:rgba(139,92,246,.18); color:var(--c-purple-light); }
    .pl-vip { background:var(--c-gold-bright); color:#000; }
    .plan-price { font-size:2.3rem; font-weight:900; margin-bottom:4px; }
    .plan-price sub { font-size:.95rem; font-weight:400; color:var(--c-text-muted); }
    .plan-period { font-size:.8rem; color:var(--c-text-muted); margin-bottom:22px; }
    .plan-feats { display:flex; flex-direction:column; gap:9px; margin-bottom:26px; text-align:left; }
    .plan-feat { display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--c-text-secondary); }
    .chk { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0; }
    .chk-y { background:rgba(16,185,129,.2); color:var(--c-teal); }
    .chk-n { background:rgba(255,255,255,.05); color:var(--c-text-muted); opacity:.45; }

    /* ==========================================
       8. CONTACT
    ========================================== */
    .contact {
      position:relative; z-index:1;
      padding:var(--section-pad) 0;
      background:linear-gradient(180deg,var(--c-bg-2),var(--c-bg-0));
    }
    .contact-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:56px; align-items:start; }
    .contact-sticky { position:sticky; top:96px; }
    .contact-items { display:flex; flex-direction:column; gap:20px; margin-top:28px; }
    .c-item { display:flex; gap:13px; align-items:flex-start; }
    .c-item-ico {
      width:40px; height:40px; border-radius:var(--r-sm); flex-shrink:0;
      background:rgba(245,158,11,.09); border:1px solid var(--c-border-gold);
      display:flex; align-items:center; justify-content:center; font-size:1.05rem;
    }
    .c-item-txt strong { display:block; font-size:.83rem; font-weight:600; color:var(--c-text-primary); margin-bottom:2px; }
    .c-item-txt span { font-size:.8rem; color:var(--c-text-muted); }
    .form-card {
      background:var(--c-bg-card); border:1px solid var(--c-border);
      border-radius:var(--r-xl); padding:clamp(22px,4vw,38px);
    }
    .form-head-title { font-size:1.2rem; font-weight:700; margin-bottom:5px; }
    .form-head-sub { font-size:.83rem; color:var(--c-text-muted); margin-bottom:26px; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
    .form-lbl { font-size:.78rem; font-weight:600; color:var(--c-text-secondary); letter-spacing:.025em; }
    .form-ctrl {
      background:rgba(255,255,255,.04); border:1px solid var(--c-border);
      border-radius:var(--r-sm); padding:12px 15px; font-size:.88rem;
      color:var(--c-text-primary); font-family:var(--font);
      transition:all var(--tr-f); outline:none; width:100%;
    }
    .form-ctrl::placeholder { color:var(--c-text-muted); }
    .form-ctrl:focus { border-color:var(--c-purple-light); background:rgba(139,92,246,.05); box-shadow:0 0 0 3px rgba(139,92,246,.12); }
    .form-ctrl.is-err { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1); }
    .form-ctrl.is-ok { border-color:var(--c-teal); box-shadow:0 0 0 3px rgba(16,185,129,.1); }
    textarea.form-ctrl { resize:vertical; min-height:118px; }
    .form-err { font-size:.73rem; color:#ef4444; display:none; }
    .form-err.show { display:block; }
    .form-submit { width:100%; justify-content:center; padding:15px; font-size:.98rem; }
    .form-success {
      display:none; flex-direction:column; align-items:center;
      justify-content:center; text-align:center; padding:40px 24px; gap:14px;
    }
    .form-success.show { display:flex; }
    .success-ico {
      width:68px; height:68px; border-radius:50%; font-size:1.9rem;
      background:rgba(16,185,129,.14); border:2px solid var(--c-teal);
      display:flex; align-items:center; justify-content:center;
      box-shadow:var(--glow-teal);
    }

    /* ==========================================
       9. FOOTER
    ========================================== */
    .site-footer {
      background:var(--c-bg-0); border-top:1px solid var(--c-border);
      padding:58px 0 28px; position:relative; z-index:1;
    }
    .footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px; margin-bottom:44px; }
    .footer-desc { font-size:.83rem; color:var(--c-text-muted); line-height:1.7; margin-top:13px; max-width:270px; }
    .footer-socials { display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
    .social-link {
      display:flex; align-items:center; gap:6px; padding:7px 13px;
      border-radius:var(--r-sm); border:1px solid var(--c-border);
      font-size:.78rem; color:var(--c-text-secondary);
      transition:all var(--tr-f);
    }
    .social-link:hover { border-color:var(--c-gold-bright); color:var(--c-gold-bright); background:rgba(245,158,11,.06); }
    .footer-col-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--c-text-muted); margin-bottom:14px; }
    .footer-links { display:flex; flex-direction:column; gap:9px; }
    .footer-links a { font-size:.85rem; color:var(--c-text-secondary); transition:color var(--tr-f); }
    .footer-links a:hover { color:var(--c-gold-bright); }
    .footer-bottom {
      padding-top:24px; border-top:1px solid var(--c-border);
      display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    }
    .footer-copy { font-size:.76rem; color:var(--c-text-muted); }
    .footer-legal { display:flex; gap:18px; }
    .footer-legal a { font-size:.76rem; color:var(--c-text-muted); transition:color var(--tr-f); }
    .footer-legal a:hover { color:var(--c-text-secondary); }

    /* ==========================================
       10. SCROLL ANIMATIONS
    ========================================== */
    .fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
    .fade-up.visible { opacity:1; transform:translateY(0); }
    .fade-up:nth-child(2) { transition-delay:.1s; }
    .fade-up:nth-child(3) { transition-delay:.2s; }
    .fade-up:nth-child(4) { transition-delay:.3s; }
    .fade-up:nth-child(5) { transition-delay:.4s; }
    .fade-up:nth-child(6) { transition-delay:.5s; }

    /* ==========================================
       11. RESPONSIVE
    ========================================== */
    @media(max-width:900px) {
      .contact-grid { grid-template-columns:1fr; gap:32px; }
      .contact-sticky { position:static; }
      .footer-grid { grid-template-columns:1fr 1fr; }
      .footer-brand-col { grid-column:1/-1; }
    }
    @media(max-width:768px) {
      .nav-links, .nav-cta-desktop { display:none; }
      .nav-hamburger { display:flex; }
      .footer-grid { grid-template-columns:1fr; gap:28px; }
      .footer-brand-col { grid-column:auto; }
      .form-row { grid-template-columns:1fr; }
    }
    @media(max-width:500px) {
      .hero-stats { gap:20px; }
      .collab-grid { grid-template-columns:1fr; }
      .plans-grid { grid-template-columns:1fr; }
      .footer-bottom { flex-direction:column; align-items:flex-start; }
    }