/* ===== TAPCART DARK THEME TOKENS ===== */
:root {
  /* Ultra-dark background */
  --bg-main: #09090B; 
  --bg-card: #18181B;
  --bg-card-hover: #27272A;
  
  /* High contrast text */
  --text-main: #FFFFFF;
  --text-muted: #A1A1AA;
  --text-light: #71717A;
  
  /* Subtle borders for depth */
  --border-light: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(99, 102, 241, 0.5);
  
  /* Vibrant Neons (Tapcart Style) */
  --accent-purple: #7C3AED;
  --accent-blue: #4F46E5;
  --accent-pink: #EC4899;
  
  --gradient-neon: linear-gradient(135deg, #FF5B84 0%, #5A4AF4 100%);
  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
  
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 9999px;
  
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --content-max: 1200px;
}

/* ===== GLOBAL ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg-main); color:var(--text-main); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; }

.section { padding:140px 0; position:relative; z-index:2; }
.container { max-width:var(--content-max); margin:0 auto; padding:0 32px; }
.text-center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }

/* ===== AMBIENT GLOWS (BACKGROUND) ===== */
.ambient-glows { position:fixed; top:0; left:0; width:100%; height:100vh; overflow:hidden; z-index:0; pointer-events:none; }
.glow { position:absolute; border-radius:50%; filter:blur(120px); opacity:0.4; animation:float 15s ease-in-out infinite alternate; }
.glow-1 { width:600px; height:600px; background:rgba(124,58,237,0.3); top:-10%; left:-10%; }
.glow-2 { width:500px; height:500px; background:rgba(236,72,153,0.2); bottom:10%; right:-10%; animation-delay:-5s; }
.glow-3 { width:800px; height:800px; background:rgba(79,70,229,0.2); top:40%; left:30%; animation-delay:-10s; }
@keyframes float { 0% { transform:translate(0, 0) scale(1); } 100% { transform:translate(50px, 50px) scale(1.1); } }

/* ===== TYPOGRAPHY ===== */
.h-hero { font-size:clamp(48px, 8vw, 96px); font-weight:800; letter-spacing:-0.04em; line-height:1.1; color:var(--text-main); margin-bottom:24px; }
.h-section { font-size:clamp(36px, 6vw, 64px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; color:var(--text-main); margin-bottom:24px; }
.h-sub { font-size:clamp(20px, 3vw, 28px); font-weight:800; color:var(--text-main); letter-spacing:-0.02em; }
.body-large { font-size:clamp(16px, 2.5vw, 20px); line-height:1.5; font-weight:500; color:var(--text-muted); }
.body-text { font-size:16px; line-height:1.6; color:var(--text-muted); font-weight:500; }
.small-line { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-light); }

/* Badges */
.badge-gradient { display:inline-block; padding:8px 20px; background:rgba(255,255,255,0.05); border:1px solid var(--border-light); color:var(--text-main); font-size:14px; font-weight:700; border-radius:var(--radius-pill); margin-bottom:32px; box-shadow:0 0 20px rgba(124,58,237,0.2); }

/* ===== BUTTONS ===== */
.btn-group { display:flex; gap:16px; margin-top:48px; }
.btn-solid { display:inline-flex; align-items:center; justify-content:center; padding:18px 40px; border-radius:var(--radius-pill); background:#5438FF; color:white; text-decoration:none; font-weight:700; font-size:16px; transition:all 0.3s cubic-bezier(0.2,0,0,1); cursor:pointer; border:none; }
.btn-solid:hover { background:#6D54FF; transform:translateY(-2px); box-shadow:0 10px 30px rgba(84,56,255,0.4); }

.btn-gradient { display:inline-flex; align-items:center; justify-content:center; padding:18px 40px; border-radius:var(--radius-pill); background:var(--gradient-neon); color:white; text-decoration:none; font-weight:700; font-size:16px; transition:all 0.3s cubic-bezier(0.2,0,0,1); border:none; cursor:pointer; }
.btn-gradient:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(236,72,153,0.4); filter:brightness(1.1); }

.btn-outline { display:inline-flex; align-items:center; justify-content:center; padding:18px 40px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.05); color:var(--text-main); text-decoration:none; font-weight:700; font-size:16px; border:1px solid var(--border-light); transition:all 0.3s cubic-bezier(0.2,0,0,1); backdrop-filter:blur(10px); }
.btn-outline:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); transform:translateY(-2px); }

.btn-sm { padding:12px 28px; font-size:14px; }

/* ===== HEADER ===== */
.header { position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; background:rgba(9,9,11,0.8); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--border-light); transition:padding 0.3s; }
.header-inner { display:flex; align-items:center; justify-content:space-between; max-width:var(--content-max); margin:0 auto; padding:0 32px; }
.header-logo { display:flex; align-items:center; text-decoration:none; }
.logo-img { height:36px; filter:invert(1); } /* Invert logo to white */
.header-nav { display:flex; gap:40px; }
.header-nav a { text-decoration:none; color:var(--text-muted); font-size:15px; font-weight:600; transition:color 0.2s; }
.header-nav a:hover { color:var(--text-main); }
.menu-toggle { display:none; background:none; border:none; flex-direction:column; gap:6px; padding:5px; cursor:pointer; }
.menu-toggle span { width:28px; height:3px; background:var(--text-main); border-radius:3px; transition:0.3s; }

/* ===== HERO ===== */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:100px; position:relative; }
.word-rotate { display:inline-grid; vertical-align:bottom; overflow:hidden; height:1.1em; line-height:1.1; margin-top:-0.05em; }
.word-rotate span { grid-area:1 / 1; opacity:0; transform:translateY(100%); transition:all .6s cubic-bezier(.25,1,.5,1); color:var(--accent-purple); text-shadow:0 0 40px rgba(124,58,237,0.4); }
.word-rotate span.wr-active { opacity:1; transform:translateY(0); }
.word-rotate span.wr-prev { opacity:0; transform:translateY(-100%); }

/* ===== NOVATRADE ABOUT SECTION ===== */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-content { padding-right:20px; }
.about-card { background:var(--bg-card); padding:48px; border-radius:var(--radius-lg); border:1px solid var(--border-light); box-shadow:0 20px 40px rgba(0,0,0,0.4); position:relative; overflow:hidden; }
.about-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient-purple); opacity:0.5; }
.check-list { list-style:none; padding:0; margin:0; }
.check-list li { position:relative; padding-left:40px; margin-bottom:20px; font-weight:600; color:var(--text-main); font-size:16px; }
.check-list li::before { content:'✓'; position:absolute; left:0; top:0; width:24px; height:24px; background:var(--text-main); color:var(--bg-main); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }

/* ===== BUILT FOR FULL JOURNEY ===== */
.journey-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; margin-top:80px; }
.journey-card { text-align:left; padding:48px 40px; border-radius:var(--radius-lg); background:var(--bg-card); border:1px solid var(--border-light); transition:0.4s cubic-bezier(0.2,0,0,1); }
.journey-card:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-8px); background:var(--bg-card-hover); }

/* ===== FEATURE BANNER (TAPCART STYLE) ===== */
.feature-banner { background:linear-gradient(90deg, #18181B 0%, #27272A 100%); border:1px solid var(--border-light); padding:24px 40px; border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:space-between; max-width:900px; margin:0 auto; box-shadow:0 20px 40px rgba(0,0,0,0.5); }
.banner-text { font-size:18px; font-weight:500; color:var(--text-main); flex:1; margin-left:16px; text-align:left; }
.banner-actions { display:flex; gap:12px; }

/* ===== SPLIT CARDS (FOR BRANDS / FOR SELLERS) ===== */
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.split-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:56px; min-height:500px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--border-light); transition:all 0.4s cubic-bezier(0.2,0,0,1); position:relative; overflow:hidden; text-align:left; }
.card-glow { position:absolute; top:-20%; right:-20%; width:300px; height:300px; background:radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%); filter:blur(40px); z-index:0; transition:0.4s; }
.split-card:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-8px); }
.split-card:hover .card-glow { transform:scale(1.2); opacity:1; }

/* ===== PREP TAGS ===== */
.prep-services-grid { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:60px; }
.prep-tag { padding:16px 32px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.03); border:1px solid var(--border-light); font-weight:600; color:var(--text-muted); font-size:16px; transition:all 0.3s; cursor:default; }
.prep-tag:hover { background:var(--text-main); color:var(--bg-main); border-color:var(--text-main); transform:scale(1.05); }

/* ===== WE KNOW (4 CARDS) ===== */
.know-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:80px; }
.know-card { background:var(--bg-card); padding:48px; border-radius:var(--radius-lg); border:1px solid var(--border-light); transition:0.4s cubic-bezier(0.2,0,0,1); text-align:left; }
.know-card:hover { background:var(--bg-card-hover); border-color:rgba(255,255,255,0.2); transform:translateY(-4px); }

/* ===== HOW IT WORKS ===== */
.process-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:40px; text-align:left; margin-top:80px; }
.process-step { border-top:3px solid var(--border-light); padding-top:32px; transition:0.3s; }
.process-step:hover { border-color:var(--accent-purple); }
.step-num { font-size:48px; font-weight:900; color:var(--border-light); margin-bottom:24px; letter-spacing:-0.05em; transition:0.3s; }
.process-step:hover .step-num { color:var(--text-main); }

/* ===== GIANT MARQUEE ===== */
.marquee-giant { padding:140px 0; overflow:hidden; display:flex; align-items:center; }
.marquee-giant-track { display:flex; white-space:nowrap; animation:marquee-fast 20s linear infinite; }
.marquee-giant-track span { font-size:clamp(64px, 12vw, 160px); font-weight:900; padding:0 40px; letter-spacing:-0.03em; -webkit-text-stroke: 1px rgba(255,255,255,0.2); color:transparent; transition:all 0.3s; }
.marquee-giant-track span:hover { color:white; -webkit-text-stroke: 0px; text-shadow:0 0 60px rgba(255,255,255,0.4); }
@keyframes marquee-fast { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ===== CALCULATOR ===== */
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:80px; }
.calc-panel { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:56px; text-align:left; }
.calc-price-display { margin:24px 0 48px; display:flex; align-items:baseline; }
.calc-price-display .currency { font-size:28px; font-weight:800; color:var(--text-muted); }
.calc-price-display .amount { font-size:clamp(64px, 6vw, 96px); font-weight:900; letter-spacing:-0.05em; color:var(--text-main); margin:0 8px; line-height:1; }

.slider-container { margin-bottom:48px; }
.slider-labels { display:flex; justify-content:space-between; margin-bottom:16px; font-size:15px; font-weight:600; color:var(--text-muted); }
.range-slider { -webkit-appearance:none; width:100%; height:8px; border-radius:4px; background:rgba(255,255,255,0.1); outline:none; transition:0.2s; }
.range-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:32px; height:32px; border-radius:50%; background:var(--text-main); cursor:pointer; box-shadow:0 0 0 6px var(--bg-card), 0 0 0 8px rgba(255,255,255,0.1); transition:0.2s; }
.range-slider::-webkit-slider-thumb:hover { transform:scale(1.1); box-shadow:0 0 0 6px var(--bg-card), 0 0 0 8px var(--text-main); }
.slider-marks { display:flex; justify-content:space-between; margin-top:16px; font-size:13px; color:var(--text-light); font-weight:700; }

.calc-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding:32px; border:1px solid var(--border-light); border-radius:var(--radius-md); background:rgba(0,0,0,0.2); }
.stat-box { display:flex; flex-direction:column; gap:8px; }
.stat-label { font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-light); font-weight:800; }
.stat-value { font-size:20px; font-weight:800; color:var(--text-main); }

.calc-tiers-panel { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:56px; text-align:left; }
.tier-row { display:flex; align-items:center; padding:20px 0; border-bottom:1px solid var(--border-light); transition:0.3s; }
.tier-row:last-of-type { border-bottom:none; }
.tier-num { font-size:13px; font-weight:800; color:var(--text-light); width:48px; }
.tier-range { font-size:16px; font-weight:700; color:var(--text-main); flex:1; }
.tier-price { font-size:16px; font-weight:800; color:var(--text-muted); }
.tier-row.active { background:rgba(124,58,237,0.15); margin:0 -24px; padding:20px 24px; border-radius:var(--radius-md); border-bottom-color:transparent; }
.tier-row.active .tier-price { color:#A78BFA; }

/* ===== CONTACT FORM ===== */
.contact-form { max-width:800px; margin:60px auto 0; text-align:left; background:var(--bg-card); padding:56px; border-radius:var(--radius-lg); border:1px solid var(--border-light); box-shadow:0 20px 50px rgba(0,0,0,0.5); position:relative; overflow:hidden; }
.contact-form::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gradient-neon); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
.form-group { margin-bottom:24px; }
.form-group label { display:block; font-size:14px; font-weight:700; margin-bottom:12px; color:var(--text-muted); }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:20px; border-radius:var(--radius-sm); border:1px solid var(--border-light); background:rgba(255,255,255,0.03); font-family:inherit; font-size:16px; font-weight:500; color:var(--text-main); transition:all 0.3s; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--text-main); background:rgba(255,255,255,0.08); }

/* ===== FOOTER ===== */
.footer { background:var(--bg-main); border-top:1px solid var(--border-light); padding:100px 0 40px; position:relative; z-index:2; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:80px; margin-bottom:80px; }
.footer-col h4 { font-size:15px; font-weight:800; margin-bottom:32px; color:var(--text-main); }
.footer-col a { display:block; color:var(--text-muted); text-decoration:none; margin-bottom:16px; font-size:15px; font-weight:600; transition:0.2s; }
.footer-col a:hover { color:var(--text-main); transform:translateX(4px); }
.footer-bottom { border-top:1px solid var(--border-light); padding-top:40px; display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:600; color:var(--text-light); }
.footer-socials { display:flex; gap:32px; }
.footer-socials a { color:inherit; text-decoration:none; transition:0.2s; }
.footer-socials a:hover { color:var(--text-main); }

/* ===== REVEAL ANIMATIONS ===== */
.reveal { opacity:0; transform:translateY(30px); transition:all 0.8s cubic-bezier(0.2, 0, 0, 1); }
.reveal.active { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ===== MOBILE-FIRST RESPONSIVENESS ===== */
@media (max-width: 1024px) {
  .section { padding: 100px 0; }
  .feature-banner { flex-direction:column; gap:20px; text-align:center; padding:32px; border-radius:32px; }
  .banner-text { margin-left:0; text-align:center; }
  .calc-grid, .about-grid { grid-template-columns:1fr; gap:40px; }
}

@media (max-width: 768px) {
  .journey-grid, .split-grid, .know-grid, .form-row { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:1fr; gap:32px; }
  
  .header-nav, .header-right .btn-solid { display:none; }
  .menu-toggle { display:flex; }
  
  .h-hero { font-size:48px; }
  .calc-price-display .amount { font-size:64px; }
  .calc-stats { grid-template-columns:1fr; padding:24px; }
  
  /* Make cards edge-to-edge on small mobile for better layout */
  .container { padding:0 20px; }
  .split-card, .calc-panel, .calc-tiers-panel, .contact-form, .journey-card, .know-card, .about-card { padding:32px 24px; border-radius:24px; }
  
  .btn-solid, .btn-gradient, .btn-outline { width:100%; justify-content:center; }
  .footer-inner { grid-template-columns:1fr; gap:40px; }
  .footer-bottom { flex-direction:column; gap:24px; align-items:flex-start; }
}