.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.55s,transform 0.55s}
.reveal.visible{opacity:1;transform:none}

/* â”€â”€ HERO â”€â”€ */
.hero{padding:140px 40px 80px;text-align:center;background:var(--bg)}
.hero-inner{max-width:700px;margin:0 auto;display:block;padding-bottom:0}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--purple-light);border:1px solid rgba(91,75,213,0.2);color:var(--purple);padding:5px 14px;border-radius:100px;font-size:11.5px;font-weight:600;margin-bottom:20px}
.badge-dot{width:5px;height:5px;background:var(--purple);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero h1{font-size:clamp(40px,5vw,62px);font-weight:400;line-height:1.05;letter-spacing:-2.5px;color:var(--dark);margin-bottom:16px;font-family:'DM Serif Display',serif}
.hero h1 em{color:var(--purple);font-style:italic}
.hero-sub{font-size:15px;color:var(--gray);line-height:1.75;max-width:520px;margin:0 auto}

/* â”€â”€ PRICING CARDS â”€â”€ */
.price-sec{padding:0 40px 80px;background:var(--bg)}
.price-inner{max-width:var(--max);margin:0 auto}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:0;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.price-card{background:#fff;padding:28px 24px;display:flex;flex-direction:column;position:relative;border-right:1px solid var(--border)}
.price-card:last-child{border-right:none}
.price-card.hot{background:#111;border-right-color:rgba(255,255,255,0.08)}
.hot-badge{position:absolute;top:24px;right:20px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:0.5px;text-transform:uppercase}
.price-tier{font-size:13px;font-weight:500;color:var(--gray2);margin-bottom:14px}
.price-card.hot .price-tier{color:rgba(255,255,255,0.45)}
.price-val{font-size:52px;font-weight:400;color:var(--dark);line-height:1;letter-spacing:-2px;font-family:'DM Serif Display',serif;margin-bottom:2px}
.price-val sub{font-size:13px;font-weight:400;color:var(--gray2);letter-spacing:0;font-family:'Outfit',sans-serif;vertical-align:baseline}
.price-val-custom{font-size:42px;font-weight:400;color:var(--dark);line-height:1;letter-spacing:-2px;font-family:'DM Serif Display',serif;margin-bottom:2px}
.price-card.hot .price-val{color:#fff}
.price-card.hot .price-val sub{color:rgba(255,255,255,0.4)}
.price-note{font-size:13px;color:var(--gray);line-height:1.5;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.price-card.hot .price-note{color:rgba(255,255,255,0.45);border-bottom-color:rgba(255,255,255,0.1)}
.price-feats{list-style:none;flex:1;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.price-feats li{font-size:13px;color:var(--gray);display:flex;align-items:center;gap:9px}
.price-card.hot .price-feats li{color:rgba(255,255,255,0.7)}
.feat-check{width:15px;height:15px;border-radius:50%;background:rgba(91,75,213,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-check svg{width:9px;height:9px;stroke:var(--purple);fill:none;stroke-width:2.5}
.price-card.hot .feat-check{background:rgba(255,255,255,0.1)}
.price-card.hot .feat-check svg{stroke:var(--orange)}
.price-btn{border:1.5px solid var(--border);background:transparent;color:var(--dark);padding:12px;border-radius:10px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s;text-align:center;text-decoration:none;display:block}
.price-btn:hover{border-color:var(--dark);background:var(--dark);color:#fff}
.price-card.hot .price-btn{background:var(--orange);border-color:var(--orange);color:#fff}
.price-card.hot .price-btn:hover{background:var(--orange2);border-color:var(--orange2)}
.price-bulk{margin-top:16px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.price-bulk-text{font-size:13px;color:var(--gray)}
.price-bulk-text strong{color:var(--dark);font-weight:600}
.price-bulk-link{font-size:13px;font-weight:600;color:var(--purple);text-decoration:none;white-space:nowrap}
.price-bulk-link:hover{text-decoration:underline}

/* â”€â”€ TRUST STRIP â”€â”€ */
.trust-strip{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px 40px;margin-top:0}
.trust-strip-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray)}
.trust-icon{width:18px;height:18px;stroke:var(--purple);fill:none;stroke-width:1.8;flex-shrink:0}

/* â”€â”€ COMPARISON TABLE â”€â”€ */
.compare-sec{padding:80px 40px;background:var(--bg2)}
.compare-inner{max-width:960px;margin:0 auto}
.kicker{font-size:11px;font-weight:700;letter-spacing:2.5px;color:var(--purple);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kicker::before{content:'';width:7px;height:7px;background:var(--purple);border-radius:50%;flex-shrink:0}
.sec-h{font-size:clamp(30px,3.8vw,48px);font-weight:400;line-height:1.05;letter-spacing:-1.5px;color:var(--dark);font-family:'DM Serif Display',serif;margin-bottom:40px}
.sec-h em{color:var(--purple);font-style:italic}

/* â”€â”€ COMPARE TABLE MOBILE â”€â”€ */
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .compare-table-wrap{display:none}
  .compare-mobile{display:block}
  .compare-tabs{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px}
  .compare-tab{flex:1;padding:10px 4px;font-size:11px;font-weight:700;text-align:center;cursor:pointer;background:#fff;border:none;border-right:1px solid var(--border);color:var(--gray2);font-family:'Outfit',sans-serif;transition:all 0.2s}
  .compare-tab:last-child{border-right:none}
  .compare-tab.active{background:#111;color:#fff}
  .compare-plan-rows{display:none;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
  .compare-plan-rows.active{display:block}
  .compare-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px}
  .compare-row:last-child{border-bottom:none}
  .compare-row-label{color:var(--dark);font-weight:500}
  .compare-row-val{color:var(--gray);font-weight:600}
  .compare-row-val .check{color:var(--purple);font-size:15px}
  .compare-row-val .dash{color:var(--border)}
}
@media(min-width:641px){
  .compare-mobile{display:none}
  .compare-table-wrap{display:block}
}
.compare-table th{padding:16px 20px;font-size:11px;font-weight:700;color:var(--gray2);text-transform:uppercase;letter-spacing:1.5px;background:var(--bg);text-align:center;border-bottom:1px solid var(--border)}
.compare-table th:first-child{text-align:left}
.compare-table th.hot-col{background:#111;color:rgba(255,255,255,0.6)}
.compare-table td{padding:14px 20px;font-size:13.5px;color:var(--gray);border-bottom:1px solid var(--border);text-align:center}
.compare-table td:first-child{text-align:left;font-weight:500;color:var(--dark)}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tbody tr:hover td{background:var(--bg2)}
.check{color:var(--purple);font-size:15px;font-weight:700}
.dash{color:var(--border);font-size:16px}

/* â”€â”€ COMPLEXITY GUIDE â”€â”€ */
.complexity-sec{padding:80px 40px;background:var(--bg)}
.complexity-inner{max-width:var(--max);margin:0 auto}
.complexity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}

.complexity-card{border:1px solid var(--border);border-radius:20px;padding:32px;background:#fff;display:flex;flex-direction:column;gap:0;transition:box-shadow 0.2s}
.complexity-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.07)}
.complexity-card.featured{background:#111;border-color:#111}

.complexity-num{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--gray2);text-transform:uppercase;margin-bottom:16px}
.complexity-card.featured .complexity-num{color:rgba(255,255,255,0.35)}

.complexity-colors-badge{display:inline-flex;align-items:center;background:var(--purple-light);border:1px solid rgba(91,75,213,0.2);color:var(--purple);padding:4px 12px;border-radius:100px;font-size:12px;font-weight:600;margin-bottom:20px}
.complexity-card.featured .complexity-colors-badge{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.7)}

.complexity-title{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:8px;letter-spacing:-0.3px}
.complexity-card.featured .complexity-title{color:#fff}
.complexity-desc{font-size:13.5px;color:var(--gray);line-height:1.65;margin-bottom:20px}
.complexity-card.featured .complexity-desc{color:rgba(255,255,255,0.5)}

.complexity-list{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1}
.complexity-list li{font-size:13px;color:var(--gray);display:flex;align-items:center;gap:9px;line-height:1.4}
.complexity-card.featured .complexity-list li{color:rgba(255,255,255,0.65)}
.c-check{width:15px;height:15px;border-radius:50%;background:rgba(91,75,213,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-check svg{width:9px;height:9px;stroke:var(--purple);fill:none;stroke-width:2.5}
.complexity-card.featured .c-check{background:rgba(255,255,255,0.1)}

/* â”€â”€ FAQ â”€â”€ */
.faq-sec{padding:80px 40px;background:var(--bg2)}
.faq-inner{max-width:760px;margin:0 auto}
.faq-list{margin-top:44px;display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{width:100%;text-align:left;padding:20px 0;font-size:15px;font-weight:600;color:var(--dark);background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Outfit',sans-serif;transition:color 0.2s}
.faq-q:hover{color:var(--purple)}
.faq-icon{width:24px;height:24px;background:var(--bg2);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s;font-size:15px;color:var(--gray);line-height:1}
.faq-item.open .faq-icon{background:var(--purple);border-color:var(--purple);color:#fff;transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--gray);line-height:1.8;max-height:0;overflow:hidden;transition:max-height 0.35s cubic-bezier(.22,1,.36,1),padding 0.35s}
.faq-item.open .faq-a{max-height:300px;padding-bottom:20px}

/* â”€â”€ CTA / CONTACT SECTION â”€â”€ */
.cta-sec{background:#fff;padding:80px 40px}
.cta-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:flex-start}
.cta-left{display:flex;flex-direction:column;gap:24px;padding-top:10px}
.cta-kicker{font-size:11px;font-weight:700;letter-spacing:2.5px;color:var(--purple);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.cta-dot{width:7px;height:7px;background:var(--purple);border-radius:50%;flex-shrink:0}
.cta-h{font-size:clamp(28px,3.2vw,42px);font-weight:400;line-height:1.1;letter-spacing:-1.5px;color:#111;font-family:'DM Serif Display',serif}
.cta-h em{color:var(--purple);font-style:italic}
.cta-p{font-size:15px;color:#666;line-height:1.75;max-width:400px}
.cta-info{display:flex;flex-direction:column;gap:12px}
.cta-info-item{display:flex;align-items:center;gap:10px;font-size:14px;color:#666}
.cta-info-item svg{width:18px;height:18px;stroke:#111;fill:none;stroke-width:1.5;flex-shrink:0}
.cta-right{display:flex;justify-content:center}
.cta-form{display:flex;flex-direction:column;gap:16px;width:100%}
.form-title{font-size:20px;font-weight:700;color:#111}
.form-sub{font-size:13px;color:#999;margin-bottom:8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-input,.form-textarea{width:100%;padding:11px 14px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;font-family:'Outfit',sans-serif;color:#333;outline:none;transition:border-color 0.2s;background:#fff}
.form-input:focus,.form-textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(91,75,213,0.08)}
.form-textarea{resize:vertical;min-height:80px}
.file-drop{border:2px dashed var(--purple);border-radius:10px;padding:20px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all 0.2s;background:rgba(91,75,213,0.04)}
.file-drop:hover,.file-drop.drag-over{border-color:var(--purple);background:rgba(91,75,213,0.08)}
.file-icon{width:28px;height:28px;stroke:var(--purple);fill:none;stroke-width:1.8;flex-shrink:0}
.file-text{display:flex;flex-direction:column;gap:3px;flex:1}
.file-main{font-size:14px;font-weight:500;color:#111}
.file-browse{background:none;border:none;color:var(--purple);font-weight:600;cursor:pointer;padding:0;text-decoration:underline;font-family:'Outfit',sans-serif}
.file-sub{font-size:12px;color:#999}
.file-preview{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(91,75,213,0.06);border:1.5px solid rgba(91,75,213,0.18);border-radius:8px}
.file-preview svg{width:18px;height:18px;stroke:var(--purple);fill:none;stroke-width:1.5;flex-shrink:0}
.file-preview span{font-size:13px;color:#333;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-remove{background:none;border:none;color:var(--purple);font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.form-submit{background:var(--orange);color:#fff;border:none;padding:13px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Outfit',sans-serif;transition:background 0.2s;margin-top:8px}
.form-submit:hover{background:var(--orange2)}
.form-submit:disabled{opacity:0.6;cursor:not-allowed}
.form-status{font-size:13px;padding:10px 12px;border-radius:6px;text-align:center;display:none}
.form-status.success{display:block;background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.form-status.error{display:block;background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}

/* â”€â”€ ANIMATIONS â”€â”€ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-badge{animation:fadeUp 0.5s 0.1s both}
.hero h1{animation:fadeUp 0.5s 0.18s both}
.hero-sub{animation:fadeUp 0.5s 0.26s both}

/* â”€â”€ RESPONSIVE â”€â”€ */
@media(max-width:900px){
  .complexity-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hero{padding:100px 20px 60px}
  .price-sec{padding:0 20px 60px}
  .price-grid{grid-template-columns:1fr;border-radius:16px}
  .price-card{border-right:none;border-bottom:1px solid var(--border)}
  .price-card.hot{border-bottom-color:rgba(255,255,255,0.08)}
  .price-card:last-child{border-bottom:none}
  .trust-strip{padding:20px}
  .trust-strip-inner{gap:20px;justify-content:flex-start}
  .compare-sec,.complexity-sec,.faq-sec{padding:60px 20px}
  .compare-table th,.compare-table td{padding:10px 12px;font-size:12px}
  .complexity-grid{grid-template-columns:1fr}
  .cta-sec{padding:60px 20px}
  .cta-container{grid-template-columns:1fr;gap:40px}
  .form-row{grid-template-columns:1fr}
  .cta-h{font-size:32px}
  .cta-p{max-width:100%}
}
@media(max-width:480px){
  .price-bulk{flex-direction:column;align-items:flex-start;gap:8px}
  .cta-sec{padding:40px 16px}
}
