:root {
    --navy: #050C1A;
    --blue: #1A6EFB;
    --blue-light: #4D8FFD;
    --green: #00C896;
    --amber: #F5A623;
    --red: #FF4D6A;
    --white: #F0F6FF;
    --muted: #5A7499;
    --border: rgba(26,110,251,0.14);
    --card: rgba(255,255,255,0.03);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--navy);
    color:var(--white);
    font-family:'Sora',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:'';position:fixed;inset:0;
    background:
      radial-gradient(ellipse 80% 40% at 20% 10%,rgba(26,110,251,0.12) 0%,transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 80%,rgba(0,200,150,0.06) 0%,transparent 60%),
      radial-gradient(ellipse 40% 30% at 60% 30%,rgba(26,110,251,0.05) 0%,transparent 50%);
    pointer-events:none;z-index:0;
  }

  @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes blink{0%,100%{opacity:1}40%{opacity:0.15}}
  @keyframes glow{0%,100%{box-shadow:0 0 20px rgba(26,110,251,0.2)}50%{box-shadow:0 0 40px rgba(26,110,251,0.45)}}

  .a1{animation:fadeUp 0.6s ease both}
  .a2{animation:fadeUp 0.6s 0.12s ease both}
  .a3{animation:fadeUp 0.6s 0.22s ease both}

  .wrap{position:relative;z-index:1;max-width:500px;margin:0 auto;padding:0 16px 80px}

  /* ── HEADER ── */
  .header{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px 0 0}
  .logo-box{
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(135deg,#1A6EFB,#0A3FA8);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;box-shadow:0 4px 20px rgba(26,110,251,0.4);
    animation:float 3s ease infinite;
  }
  .brand-name{
    font-size:22px;font-weight:900;letter-spacing:-0.02em;
    background:linear-gradient(90deg,#4D8FFD,#fff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  }
  .brand-url{font-size:11px;font-weight:500;letter-spacing:0.1em;color:#3A5A7A;display:block;margin-top:-2px}

  /* ── HERO ── */
  .hero{text-align:center;padding:28px 0 20px}
  .live-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(26,110,251,0.1);border:1px solid rgba(26,110,251,0.22);
    border-radius:30px;padding:5px 14px;font-size:11px;font-weight:600;
    letter-spacing:0.1em;color:#4D8FFD;text-transform:uppercase;margin-bottom:16px;
  }
  .live-dot{width:6px;height:6px;border-radius:50%;background:#00C896;animation:blink 1.5s infinite}
  .hero h1{font-size:clamp(24px,7vw,32px);font-weight:900;line-height:1.18;letter-spacing:-0.03em;margin-bottom:12px}
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg,#1A6EFB 0%,#4D8FFD 50%,#00C896 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero p{font-size:14px;color:#5A7499;line-height:1.65;max-width:320px;margin:0 auto 20px}

  /* ── STEP LABEL ── */
  .step-label{
    font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
    color:#3A5A7A;margin-bottom:10px;
    display:flex;align-items:center;gap:8px;
  }
  .step-label::after{content:'';flex:1;height:1px;background:var(--border)}

  /* ── CLIENT GRID ── */
  .client-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px}
  .client-btn{
    background:var(--card);border:1px solid var(--border);
    border-radius:14px;padding:13px 12px;cursor:pointer;
    transition:all 0.22s cubic-bezier(0.34,1.56,0.64,1);
    display:flex;align-items:center;gap:10px;
    -webkit-tap-highlight-color:transparent;text-align:left;
  }
  .client-btn:active{transform:scale(0.97)}
  .c-icon{font-size:22px;flex-shrink:0}
  .c-name{font-size:13px;font-weight:600;color:var(--white);line-height:1.2}
  .c-sub{font-size:10px;color:var(--muted);margin-top:2px}
  .client-btn.active{
    background:linear-gradient(135deg,rgba(26,110,251,0.18),rgba(26,110,251,0.08));
    border-color:#1A6EFB;
    box-shadow:0 0 20px rgba(26,110,251,0.2);
    transform:translateY(-2px);
  }
  .client-btn.active .c-name{color:#4D8FFD}

  /* ── PROPOSAL ── */
  #proposal{display:none}
  #proposal.show{display:block;animation:fadeUp 0.45s ease both}

  /* ── PAIN CARD ── */
  .pain-card{
    background:linear-gradient(135deg,rgba(255,77,106,0.08),rgba(255,100,40,0.05));
    border:1px solid rgba(255,77,106,0.2);border-radius:14px;
    padding:14px 16px;margin-bottom:18px;
  }
  .pain-card .tag{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#FF4D6A;margin-bottom:6px}
  .pain-card p{font-size:13px;color:#FFAABB;line-height:1.6}

  /* ── SYSTEM CARD ── */
  .system-card{
    text-align:center;margin-bottom:18px;
    background:linear-gradient(135deg,rgba(26,110,251,0.08),rgba(0,200,150,0.05));
    border:1px solid rgba(26,110,251,0.15);border-radius:16px;padding:16px;
  }
  .system-card .tag{font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .system-card h2{font-size:16px;font-weight:800;letter-spacing:-0.01em;color:var(--white);line-height:1.3}

  /* ── URGENCY BAR ── */
  .urgency-bar{
    background:linear-gradient(90deg,rgba(245,166,35,0.12),rgba(245,166,35,0.05));
    border:1px solid rgba(245,166,35,0.25);border-radius:12px;
    padding:10px 14px;margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
  }
  .urgency-bar .u-icon{font-size:17px;flex-shrink:0;animation:pulse 2s infinite}
  .urgency-bar p{font-size:12px;color:#F5C842;font-weight:600;line-height:1.4}

  /* ── SECTION TABS ── */
  .sec-tabs{
    display:flex;gap:6px;margin-bottom:18px;
    overflow-x:auto;padding-bottom:2px;scrollbar-width:none;
  }
  .sec-tabs::-webkit-scrollbar{display:none}
  .sec-tab{
    flex-shrink:0;padding:8px 13px;border-radius:10px;
    border:1px solid var(--border);background:var(--card);
    color:var(--muted);font-family:'Sora',sans-serif;font-size:12px;font-weight:600;
    cursor:pointer;transition:all 0.18s ease;-webkit-tap-highlight-color:transparent;
  }
  .sec-tab.active{background:rgba(26,110,251,0.15);border-color:#1A6EFB;color:#4D8FFD}
  .sec-body{display:none}
  .sec-body.active{display:block;animation:fadeUp 0.3s ease both}

  /* ── PLAN SWITCHER ── */
  .plan-switcher{
    display:flex;gap:5px;margin-bottom:14px;
    background:rgba(255,255,255,0.03);border:1px solid var(--border);
    border-radius:14px;padding:5px;
  }
  .plan-tab{
    flex:1;padding:9px 4px;border-radius:10px;border:none;background:none;
    cursor:pointer;font-family:'Sora',sans-serif;font-size:12px;font-weight:600;
    color:var(--muted);transition:all 0.18s ease;-webkit-tap-highlight-color:transparent;
  }
  .plan-tab.active{background:linear-gradient(135deg,#1A6EFB,#0D4FC0);color:#fff;box-shadow:0 4px 14px rgba(26,110,251,0.35)}
  .tab-name{display:block}
  .tab-price{font-size:10px;font-weight:500;margin-top:1px;opacity:0.75}

  /* ── PLAN CARD ── */
  .plan-card{
    border-radius:20px;padding:20px 18px;margin-bottom:12px;
    border:1px solid var(--border);position:relative;overflow:hidden;
  }
  .plan-card.featured{
    background:linear-gradient(160deg,#071830,#091D3A,#071830);
    border-color:#1A6EFB;animation:glow 3s ease infinite;
  }
  .plan-card.featured::after{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,#1A6EFB,transparent);
  }
  .plan-card.plain{background:var(--card)}
  .rec-tag{
    position:absolute;top:14px;right:14px;
    background:linear-gradient(90deg,#1A6EFB,#4D8FFD);
    color:#fff;font-size:9px;font-weight:700;letter-spacing:0.1em;
    text-transform:uppercase;padding:4px 10px;border-radius:20px;
  }
  .plan-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px}
  .price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
  .price-big{font-size:32px;font-weight:900;letter-spacing:-0.04em;color:var(--white)}
  .plan-card.featured .price-big{color:#4D8FFD}
  .price-per{font-size:12px;color:var(--muted)}
  .setup-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
  .setup-old{font-size:12px;color:#2A4A6A;text-decoration:line-through}
  .setup-free{
    font-size:11px;font-weight:700;color:#00C896;
    background:rgba(0,200,150,0.1);border:1px solid rgba(0,200,150,0.2);
    border-radius:20px;padding:2px 9px;
  }
  .plan-divider{height:1px;background:var(--border);margin:0 0 12px}
  .feat-list{list-style:none}
  .feat-list li{
    display:flex;gap:8px;align-items:flex-start;
    font-size:12.5px;color:#8AAAC8;line-height:1.45;
    padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .feat-list li:last-child{border-bottom:none}
  .plan-card.featured .feat-list li{color:#B8D0E8}
  .feat-list li .ck{color:#1A6EFB;flex-shrink:0;margin-top:1px}
  .plan-card.featured .feat-list li .ck{color:#4D8FFD}
  .feat-list li.plus .ck{color:#00C896}

  /* ── META PRICING NOTE ── */
  .meta-note{
    background:rgba(255,255,255,0.02);border:1px solid var(--border);
    border-radius:14px;padding:14px 16px;margin-bottom:18px;
  }
  .meta-note .tag{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .meta-cell{border-radius:10px;padding:9px 11px;border-left:2px solid}
  .meta-cost{font-size:14px;font-weight:800;margin-bottom:2px;font-family:'JetBrains Mono',monospace}
  .meta-desc{font-size:10px;color:var(--muted);line-height:1.35}
  .meta-footer{font-size:11px;color:#2A3A4A;margin-top:10px;line-height:1.5}

  /* ── ROI ── */
  .roi-wrap{
    background:linear-gradient(135deg,rgba(0,200,150,0.07),rgba(0,200,150,0.03));
    border:1px solid rgba(0,200,150,0.18);border-radius:20px;
    padding:20px 18px;margin-bottom:18px;
  }
  .roi-wrap h3{font-size:14px;font-weight:800;color:#00C896;margin-bottom:14px}
  .roi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
  .roi-stat{
    background:rgba(0,0,0,0.2);border:1px solid rgba(0,200,150,0.1);
    border-radius:12px;padding:12px 10px;text-align:center;
  }
  .roi-val{font-size:20px;font-weight:900;letter-spacing:-0.03em;margin-bottom:3px}
  .roi-lbl{font-size:10px;color:var(--muted);line-height:1.3}
  .roi-note{
    background:rgba(0,200,150,0.08);border:1px solid rgba(0,200,150,0.18);
    border-radius:12px;padding:12px 14px;
  }
  .roi-note p{font-size:13px;color:#7FDEC9;line-height:1.65}
  .roi-note strong{color:#00C896}

  /* ── LOSS ITEMS ── */
  .loss-item{
    background:var(--card);border:1px solid var(--border);border-radius:12px;
    padding:12px 14px;margin-bottom:10px;
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  }
  .loss-text{font-size:13px;color:#C8D8EC;margin-bottom:3px}
  .loss-note{font-size:11px;color:var(--muted)}
  .loss-cost{font-size:13px;font-weight:700;color:#FF4D6A;white-space:nowrap;flex-shrink:0}

  /* ── PITCH ── */
  .pitch-block{border-radius:14px;padding:15px;margin-bottom:12px}
  .pitch-block.hi{
    background:linear-gradient(135deg,rgba(26,110,251,0.08),rgba(26,110,251,0.04));
    border:1px solid rgba(26,110,251,0.14);
  }
  .pitch-block.en{
    background:linear-gradient(135deg,rgba(139,92,246,0.08),rgba(139,92,246,0.03));
    border:1px solid rgba(139,92,246,0.14);
  }
  .pitch-lang{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px}
  .pitch-block.hi .pitch-lang{color:#4D8FFD}
  .pitch-block.en .pitch-lang{color:#A78BFA}
  .pitch-block blockquote{font-size:13.5px;line-height:1.7;color:#C8D8EC}
  .closing-block{
    background:linear-gradient(135deg,rgba(245,166,35,0.1),rgba(245,166,35,0.04));
    border:1px solid rgba(245,166,35,0.2);border-radius:14px;
    padding:16px;margin-bottom:18px;text-align:center;
  }
  .closing-block .tag{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#F5A623;margin-bottom:8px}
  .closing-block p{font-size:14px;color:#F5C842;font-weight:600;line-height:1.6;font-style:italic}

  /* ── OBJECTIONS ── */
  .obj-block{border-radius:14px;overflow:hidden;margin-bottom:10px}
  .obj-q{
    background:rgba(255,77,106,0.07);border:1px solid rgba(255,77,106,0.14);
    padding:12px 14px;display:flex;gap:8px;align-items:flex-start;
  }
  .obj-q p{font-size:13px;color:#FFAABB;font-weight:600}
  .obj-a{
    background:rgba(0,200,150,0.05);
    border:1px solid rgba(0,200,150,0.12);border-top:none;
    padding:12px 14px;display:flex;gap:8px;align-items:flex-start;
  }
  .obj-a p{font-size:13px;color:#7FDEC9;line-height:1.6}

  /* ── CTA FOOTER ── */
  .cta-block{
    background:linear-gradient(160deg,#071830,#091D3A);
    border:1px solid rgba(26,110,251,0.25);border-radius:24px;
    padding:26px 20px;text-align:center;margin-top:24px;
    animation:glow 3s ease infinite;
  }
  .cta-block .eyebrow{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#1A6EFB;margin-bottom:8px}
  .cta-block h2{font-size:20px;font-weight:900;letter-spacing:-0.02em;line-height:1.2;margin-bottom:8px}
  .cta-block .sub{font-size:12px;color:var(--muted);margin-bottom:20px;line-height:1.55}
  .cta-btn{
    display:block;width:100%;padding:14px;border-radius:13px;
    font-family:'Sora',sans-serif;font-size:14px;font-weight:700;
    cursor:pointer;border:none;margin-bottom:10px;
    transition:all 0.18s ease;text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .cta-btn:active{transform:scale(0.98)}
  .cta-btn.wa{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;box-shadow:0 6px 22px rgba(37,211,102,0.3)}
  .cta-btn.call{background:linear-gradient(135deg,#1A6EFB,#0D4FC0);color:#fff;box-shadow:0 6px 22px rgba(26,110,251,0.35)}
  .cta-btn.web{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:#8AAAC8}
  .foot-note{font-size:11px;color:#1E2E40;margin-top:14px;line-height:1.6}
  .foot-note a{color:#1A6EFB;text-decoration:none}

  /* ── REVEAL ── */
  .rv{opacity:0;transform:translateY(18px);transition:opacity 0.5s ease,transform 0.5s ease}
  .rv.in{opacity:1;transform:none}

/* ── DESKTOP & TABLET RESPONSIVENESS ── */
@media (min-width: 768px) {
  .wrap { max-width: 800px; padding: 0 40px 80px; }
  .hero p { max-width: 500px; font-size: 16px; }
  .client-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
  .roi-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
  .meta-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .loss-item { align-items: center; padding: 16px 20px; }
}

@media (min-width: 1024px) {
  .wrap { max-width: 1200px; padding: 0 50px 100px; }
  .header { padding-top: 40px; }
  .hero { padding: 60px 0 50px; }
  .hero h1 { font-size: 56px; line-height: 1.15; margin-bottom: 24px; }
  .hero p { max-width: 700px; font-size: 18px; line-height: 1.7; margin-bottom: 50px; }
  
  .client-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 50px; }
  .client-btn { padding: 22px 18px; border-radius: 18px; }
  .c-icon { font-size: 32px; }
  .c-name { font-size: 16px; margin-bottom: 4px; }
  .c-sub { font-size: 12px; }
  
  .sec-tabs { justify-content: center; gap: 16px; margin-bottom: 40px; }
  .sec-tab { padding: 14px 28px; font-size: 15px; border-radius: 12px; }
  
  /* Pricing Layout - Side by Side */
  .plan-switcher { display: none !important; }
  #sec-pricing.active { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; justify-content: space-between; }
  .plan-card { display: flex !important; flex-direction: column; flex: 1; margin-bottom: 0; min-width: 0; padding: 30px 24px; }
  .plan-card .price-big { font-size: 44px; }
  .plan-divider { margin: 20px 0; }
  .feat-list { flex-grow: 1; }
  .feat-list li { font-size: 14px; padding: 8px 0; }
  .meta-note { width: 100%; margin-top: 16px; padding: 24px; }
  
  /* Top Proposal Elements */
  .pain-card, .system-card, .urgency-bar { margin-bottom: 24px; padding: 20px 24px; }
  .pain-card p { font-size: 15px; }
  .system-card h2 { font-size: 20px; }
  .urgency-bar p { font-size: 14px; }
  
  /* ROI Grid */
  .roi-wrap { padding: 32px; margin-bottom: 24px; }
  .roi-wrap h3 { font-size: 18px; margin-bottom: 20px; }
  .roi-grid { gap: 20px; margin-bottom: 20px; }
  .roi-stat { padding: 20px 16px; }
  .roi-val { font-size: 28px; }
  .roi-lbl { font-size: 12px; }
  .roi-note p { font-size: 15px; }
  
  /* Loss Items */
  .loss-item { padding: 20px 24px; margin-bottom: 16px; }
  .loss-text { font-size: 15px; }
  .loss-note { font-size: 13px; }
  .loss-cost { font-size: 16px; }
  
  /* Pitch Layout */
  #sec-pitch.active { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  #sec-pitch .step-label { grid-column: 1 / -1; }
  #sec-pitch .closing-block { grid-column: 1 / -1; margin-bottom: 0; padding: 24px; }
  #sec-pitch .closing-block p { font-size: 16px; }
  .pitch-block { margin-bottom: 0; padding: 24px; }
  .pitch-block blockquote { font-size: 15px; }
  .closing-block p { font-size: 16px; }
  
  /* Multi-column Object Block on desktop */
  #objItems { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .obj-block { margin-bottom: 0; display: flex; flex-direction: column; }
  .obj-a { flex-grow: 1; }
  .obj-q p, .obj-a p { font-size: 14px; }
  
  .meta-grid { gap: 20px; }
  .meta-cell { padding: 18px; }
  .meta-cost { font-size: 20px; }
  .meta-desc { font-size: 12px; }
  
  .cta-block { padding: 60px 40px; margin-top: 50px; }
  .cta-block h2 { font-size: 38px; margin-bottom: 16px; }
  .cta-block .sub { font-size: 18px; margin-bottom: 36px; }
  .cta-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 300px; margin: 0 12px 16px; padding: 18px; font-size: 16px; }
}