/* ===== 1. Design Tokens ===== */
:root {
  --warm-bg: #f7f4ee;
  --warm-card: #ffffff;
  --dark-bg: #0d0d1a;
  --dark-card: rgba(255,255,255,.04);
  --gold-start: #f6d365;
  --gold-end: #fda085;
  --accent-blue: #3b5bdb;
  --text-primary: #1a1630;
  --text-secondary: #6b6780;
  --text-muted: #9a96ae;
  --border-light: #eae6df;
  --border-dark: rgba(255,255,255,.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 3px rgba(26,22,48,.04), 0 4px 12px rgba(26,22,48,.06);
  --shadow-hover: 0 8px 28px rgba(26,22,48,.1);
  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
}

/* ===== 2. Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);color:var(--text-primary);background:var(--warm-bg);line-height:1.6;font-size:15px}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

/* ===== 3. Navigation ===== */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(247,244,238,.88);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--border-light)}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}
.nav-logo .pro-badge{font-size:9px;font-weight:700;color:#7a5a10;background:linear-gradient(135deg,var(--gold-start),var(--gold-end));padding:1px 6px 2px;border-radius:4px;line-height:16px;margin-left:1px;letter-spacing:.4px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:14px;color:var(--text-secondary);transition:color .2s;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;bottom:-1px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--gold-start),var(--gold-end));border-radius:1px;transition:width .25s}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--text-primary);font-weight:600}
.nav-links a.active::after{width:100%}
.mobile-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-secondary);padding:4px;line-height:1}

/* ===== 4. Hero ===== */
.hero{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 28px 80px;background:var(--warm-bg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-30%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(246,211,101,.12) 0%,transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-20%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(59,91,219,.06) 0%,transparent 70%);pointer-events:none}
.hero-content{max-width:660px;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(246,211,101,.15),rgba(253,160,133,.12));color:#7a5a10;font-size:11px;font-weight:600;padding:5px 14px;border-radius:20px;margin-bottom:24px;border:1px solid rgba(246,211,101,.25);letter-spacing:.3px}
.hero h1{font-size:52px;font-weight:800;color:var(--text-primary);margin-bottom:16px;line-height:1.15;letter-spacing:-1.5px}
.hero h1 span{background:linear-gradient(135deg,var(--accent-blue),#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:17px;color:var(--text-secondary);max-width:520px;margin:0 auto;line-height:1.7}

/* ===== 5. Section Shared ===== */
.section{padding:88px 28px;max-width:1120px;margin:0 auto}
.section-title{text-align:center;font-size:30px;font-weight:700;margin-bottom:10px;letter-spacing:-.5px}
.section-subtitle{text-align:center;color:var(--text-secondary);font-size:15px;margin-bottom:52px}
.section-divider{width:40px;height:3px;background:linear-gradient(90deg,var(--gold-start),var(--gold-end));border-radius:2px;margin:0 auto 52px}

/* ===== 6. Features ===== */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{background:var(--warm-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:32px 28px;transition:all .3s;position:relative;overflow:hidden}
.feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-start),var(--gold-end));opacity:0;transition:opacity .3s}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:transparent}
.feature-card:hover::before{opacity:1}
.feature-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px;transition:transform .3s}
.feature-card:hover .feature-icon{transform:scale(1.06)}
.feature-icon.tint-1{background:rgba(59,91,219,.1)}
.feature-icon.tint-2{background:rgba(246,211,101,.15)}
.feature-icon.tint-3{background:rgba(43,138,94,.1)}
.feature-icon.tint-4{background:rgba(124,58,237,.1)}
.feature-icon.tint-5{background:rgba(253,160,133,.12)}
.feature-icon.tint-6{background:rgba(59,91,219,.08)}
.feature-card h3{font-size:16px;margin-bottom:8px;font-weight:600}
.feature-card p{font-size:13px;color:var(--text-secondary);line-height:1.65}

/* ===== 7. Pricing ===== */
.pricing{background:var(--dark-bg);padding:88px 28px 100px;position:relative;overflow:hidden}
.pricing::before{content:"";position:absolute;top:-40%;left:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(246,211,101,.04) 0%,transparent 60%);pointer-events:none}
.pricing::after{content:"";position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(59,91,219,.03) 0%,transparent 60%);pointer-events:none}
.pricing-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.pricing-title{text-align:center;font-size:30px;font-weight:700;color:#f0f0f5;margin-bottom:10px;letter-spacing:-.5px}
.pricing-subtitle{text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:52px}
.pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start}

.pricing-card{background:var(--dark-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-dark);border-radius:var(--radius-lg);padding:28px 18px;text-align:center;position:relative;transition:all .35s;display:flex;flex-direction:column}
.pricing-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.pricing-card.featured{background:linear-gradient(135deg,rgba(246,211,101,.07),rgba(253,160,133,.05));border-color:rgba(246,211,101,.2);box-shadow:0 0 30px rgba(246,211,101,.04)}
.pricing-card.featured:hover{border-color:rgba(246,211,101,.35)}
.pricing-card.lifetime{background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(59,91,219,.05));border-color:rgba(124,58,237,.2)}
.pricing-card.lifetime:hover{border-color:rgba(124,58,237,.35)}

.pricing-popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold-start),var(--gold-end));color:#6a4d08;font-size:10px;font-weight:700;padding:4px 16px;border-radius:20px;letter-spacing:.3px;white-space:nowrap}
.pricing-limited{position:absolute;top:-11px;right:14px;background:#d63838;color:#fff;font-size:9px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.2px}

.plan-name{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.plan-name.free{color:#4a9e7a}
.plan-name.lifetime-name{background:linear-gradient(135deg,var(--gold-start),var(--gold-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.price-block{margin-bottom:18px;position:relative}
.price-original{font-size:13px;color:#d63838;text-decoration:line-through;opacity:.5;display:block;margin-bottom:3px}
.price-current{font-size:34px;font-weight:800;color:#f0f0f5;line-height:1.1;letter-spacing:-1px}
.price-current .currency{font-size:16px;font-weight:600;vertical-align:super;margin-right:1px}
.price-current .period{font-size:12px;font-weight:400;color:var(--text-muted);vertical-align:baseline;margin-left:2px}
.price-free{font-size:34px;font-weight:800;color:#4a9e7a;line-height:1.1;letter-spacing:-1px}

.savings-badge{display:inline-block;background:linear-gradient(135deg,rgba(246,211,101,.18),rgba(253,160,133,.14));color:#d4a84b;font-size:9px;font-weight:700;padding:2px 10px;border-radius:10px;margin-top:6px;letter-spacing:.2px}
.savings-badge.big{font-size:10px;padding:3px 12px}

.pricing-features{margin:22px 0;flex:1;text-align:left}
.pricing-features li{display:flex;align-items:center;gap:7px;font-size:12px;color:#b8b4cc;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li .icon{flex-shrink:0;width:16px;text-align:center;font-size:11px}
.pricing-features li .check{color:#4a9e7a}
.pricing-features li .cross{color:#d63838;opacity:.6}
.pricing-features li .muted{color:#6a6682}

.pricing-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:11px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all .25s;border:none;width:100%;text-decoration:none;letter-spacing:.2px}
.pricing-cta.free-cta{background:rgba(255,255,255,.06);color:var(--text-muted);border:1px solid rgba(255,255,255,.08)}
.pricing-cta.free-cta:hover{background:rgba(255,255,255,.1);color:#f0f0f5}
.pricing-cta.paid-cta{background:linear-gradient(135deg,var(--gold-start),var(--gold-end));color:#6a4d08}
.pricing-cta.paid-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(246,211,101,.2)}
.pricing-cta.lifetime-cta{background:linear-gradient(135deg,#7c3aed,var(--accent-blue));color:#f0f0f5}
.pricing-cta.lifetime-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.25)}
.pricing-cta.current-cta{background:rgba(74,158,122,.12);color:#4a9e7a;border:1px solid rgba(74,158,122,.2);cursor:default}

/* ===== 8. Steps ===== */
.steps-container{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.step-card{flex:1;min-width:200px;max-width:300px;text-align:center;padding:36px 24px 32px;background:var(--warm-card);border:1px solid var(--border-light);border-radius:var(--radius-md);position:relative;transition:all .3s}
.step-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.step-num{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent-blue),#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin:0 auto 18px}
.step-card h4{font-size:15px;font-weight:600;margin-bottom:6px}
.step-card p{font-size:13px;color:var(--text-secondary);line-height:1.65}

/* ===== 9. Page Header ===== */
.page-header{background:var(--warm-bg);padding:104px 28px 48px;text-align:center;border-bottom:1px solid var(--border-light)}
.page-header h1{font-size:34px;font-weight:700;margin-bottom:8px;letter-spacing:-.5px}
.page-header p{color:var(--text-secondary);font-size:15px}

/* ===== 10. Content ===== */
.content-section{max-width:760px;margin:0 auto;padding:52px 28px 80px}
.content-section h2{font-size:20px;font-weight:600;margin:36px 0 12px;color:var(--text-primary);letter-spacing:-.2px}
.content-section h3{font-size:15px;font-weight:600;margin:24px 0 8px;color:var(--text-primary)}
.content-section p{font-size:14px;color:var(--text-secondary);margin-bottom:12px;line-height:1.8}
.content-section ul{font-size:14px;color:var(--text-secondary);margin-bottom:12px;padding-left:20px}
.content-section ul li{list-style:disc;margin-bottom:5px;line-height:1.65}
.content-section a{color:var(--accent-blue);font-weight:500}

/* ===== 11. Contact Cards ===== */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.contact-card{background:var(--warm-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:28px 20px;text-align:center;transition:all .3s}
.contact-card:hover{border-color:transparent;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.contact-icon{font-size:30px;margin-bottom:14px;display:block}
.contact-card h4{font-size:14px;font-weight:600;margin-bottom:6px}
.contact-card p{font-size:13px;color:var(--text-secondary);line-height:1.5}
.contact-card a{color:var(--accent-blue);font-weight:500}

/* ===== 12. Feedback Form ===== */
.feedback-form{max-width:580px;margin:36px auto}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.form-group :is(input,textarea,select){width:100%;padding:10px 14px;border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:14px;transition:all .2s;font-family:inherit;background:var(--warm-card);color:var(--text-primary)}
.form-group :is(input,textarea,select):focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(59,91,219,.1)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group select{background:var(--warm-card);cursor:pointer}

/* ===== 13. Footer ===== */
.footer{background:var(--dark-bg);padding:48px 28px 28px;border-top:1px solid rgba(255,255,255,.04)}
.footer-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.footer-brand h3{color:#f0f0f5;font-size:15px;margin-bottom:8px}
.footer-brand p{font-size:13px;color:var(--text-muted);line-height:1.7;max-width:320px}
.footer-col h4{color:#f0f0f5;font-size:12px;margin-bottom:14px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}
.footer-col a{display:block;font-size:13px;color:var(--text-muted);margin-bottom:8px;transition:color .2s}
.footer-col a:hover{color:var(--gold-start)}
.footer-bottom{max-width:1120px;margin:28px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);text-align:center;font-size:12px;color:#5a5672}

/* ===== 14. Responsive ===== */
@media(max-width:900px){
  .pricing-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .pricing-card:last-child{grid-column:1/-1;max-width:360px;margin:0 auto}
  .footer-inner{grid-template-columns:1fr 1fr;gap:28px}
  .hero h1{font-size:40px}
}
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:64px;left:0;width:100%;background:rgba(247,244,238,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-light);padding:16px 28px;flex-direction:column;gap:16px}
  .nav-links.open{display:flex}
  .mobile-toggle{display:block}
  .features-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .pricing-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .pricing-card.featured{order:-1}
  .contact-grid{grid-template-columns:1fr;max-width:400px;margin:32px auto 0}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:32px}
  .hero p{font-size:15px}
  .section{padding:64px 20px}
  .steps-container{flex-direction:column;align-items:center}
  .step-card{max-width:320px;width:100%}
}
@media(max-width:640px){
  .pricing-card.featured{order:0}
  .price-current{font-size:28px}
}