/* ============================================
   SUMART — Landing Page Styles
   assets/css/style-landing.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --dark-blue:      #181838;
  --vivid-blue:     #308df1;
  --azure:          #50cdf9;
  --blue:           #3c55f6;
  --green:          #73ea72;
  --yellow:         #fdec83;
  --pink:           #e54ed4;
  --lavender:       #a24ced;
  --light-azure:    #dcf4fc;
  --card-bg:        rgba(255,255,255,0.04);
  --card-border:    rgba(255,255,255,0.08);
  --text-muted:     rgba(255,255,255,0.42);
  --text-sub:       rgba(255,255,255,0.62);
  --radius:         18px;
  --brand-gradient: linear-gradient(135deg, #a24ced, #e54ed4, #308df1, #50cdf9);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--dark-blue);
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; }
a   { color:inherit; text-decoration:none; }
button { font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; border:none; }
img { display:block; max-width:100%; }

/* ══ BACKGROUND ORBS (fixed, behind everything) ══ */
.bg-orbs { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.orb {
  position:absolute; border-radius:50%;
  opacity:.12;
  /* filter:blur removed — GPU killer on old hardware. Using box-shadow instead */
}
.orb-1 { width:600px; height:600px; background:var(--blue);    top:-220px;    right:-160px; box-shadow:0 0 200px 100px var(--blue); }
.orb-2 { width:440px; height:440px; background:var(--pink);    bottom:-120px; left:-130px;  box-shadow:0 0 180px 90px var(--pink); }
.orb-3 { width:340px; height:340px; background:var(--azure);   top:48%;       left:36%;     box-shadow:0 0 150px 75px var(--azure); }
.orb-4 { width:260px; height:260px; background:var(--green);   bottom:28%;    right:8%;     box-shadow:0 0 130px 65px var(--green); }

/* ══ SECTION BACKGROUND WAVES ══ */
.section-wave { position:relative; z-index:1; }
.section-wave.dark {
  background: linear-gradient(180deg, #181838 0%, #1c1c44 100%);
}
.section-wave.light {
  background: linear-gradient(180deg, #1e1e50 0%, #f0f5ff 50%, #e8eeff 100%);
  color: #181838;
  --card-bg:     rgba(0,0,0,0.04);
  --card-border: rgba(0,0,0,0.08);
  --text-muted:  rgba(24,24,56,0.45);
  --text-sub:    rgba(24,24,56,0.65);
}
.section-wave.light .section-eyebrow { color:var(--vivid-blue); }
.section-wave.light .section-title   { color:#181838; }
.section-wave.light .section-desc    { color:rgba(24,24,56,.65); }
.section-wave.light .feature-card    { background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.07); }
.section-wave.light .feature-card-title  { color:#181838; }
.section-wave.light .feature-card-desc   { color:rgba(24,24,56,.65); }
.section-wave.light .feature-bullet      { color:rgba(24,24,56,.65); }
.section-wave.light .mini-dash,
.section-wave.light .mini-credit         { background:rgba(24,24,56,.06); border-color:rgba(0,0,0,.07); }
.section-wave.light .mini-stat           { background:rgba(0,0,0,.04); }
.section-wave.light .mini-stat-l,
.section-wave.light .mini-bar-label      { color:rgba(24,24,56,.45); }
.section-wave.light .mini-bar-track      { background:rgba(0,0,0,.08); }
.section-wave.light .mini-bar-val        { color:rgba(24,24,56,.7); }
.section-wave.light .pricing-card        { background:rgba(255,255,255,.75); border-color:rgba(0,0,0,.08); }
.section-wave.light .pricing-card.featured { background:linear-gradient(175deg,rgba(60,85,246,.12),rgba(162,76,237,.08)); }
.section-wave.light .plan-name,
.section-wave.light .feature-text strong { color:#181838; }
.section-wave.light .plan-desc,
.section-wave.light .feature-text,
.section-wave.light .feature-group-label { color:rgba(24,24,56,.55); }
.section-wave.light .pricing-feature.off { opacity:.25; }
.section-wave.light .calc-card           { background:rgba(255,255,255,.75); border-color:rgba(0,0,0,.08); }
.section-wave.light .calc-name           { color:#181838; }
.section-wave.light .calc-desc           { color:rgba(24,24,56,.55); }

.wave-top, .wave-bottom {
  position:absolute; left:0; right:0;
  height:120px; pointer-events:none; z-index:2;
}
.wave-top    { top:-1px; }
.wave-bottom { bottom:-1px; }

/* ══ SHARED ══ */
section { position:relative; z-index:1; }
.container { max-width:1280px; margin:0 auto; padding:0 40px; }

/* Eyebrow — reduced intensity, more refined */
.section-eyebrow {
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--vivid-blue); font-weight:600; margin-bottom:12px;
  opacity:.8;
}
/* Section title — plain weight, no gradient by default */
.section-title {
  font-size:42px; line-height:1.1; margin-bottom:14px;
  font-weight:800; color:#fff;
}
/* Section description — softer, not max opacity */
.section-desc { font-size:16px; color:var(--text-sub); line-height:1.7; max-width:560px; }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible  { opacity:1; transform:translateY(0); }

@keyframes fadeUp    { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
@keyframes floatY    { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes glowPulse { 0%,100%{opacity:.25;} 50%{opacity:.4;} }

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgb(18,18,45);
  
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header-inner {
  max-width:1280px; margin:0 auto; padding:0 40px;
  height:72px; display:flex; align-items:center; justify-content:space-between;
}
.logo-wrap { display:flex; align-items:center; }
.header-logo { height:48px; width:auto; object-fit:contain; }
.header-nav  { display:flex; align-items:center; gap:32px; }
.nav-link    { font-size:14px; font-weight:500; color:rgba(255,255,255,.6); transition:color .2s; }
.nav-link:hover { color:#fff; }
.header-actions { display:flex; align-items:center; gap:12px; }

.btn-ghost-sm {
  padding:9px 20px; border-radius:10px;
  background:transparent; border:1px solid rgba(80,205,249,.5);
  color:var(--azure); font-size:14px; font-weight:600; transition:all .2s;
}
.btn-ghost-sm:hover { background:rgba(80,205,249,.1); border-color:var(--azure); color:#fff; }

.btn-primary-sm {
  padding:9px 22px; border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--vivid-blue));
  color:#fff; font-size:14px; font-weight:600;
  box-shadow:0 4px 16px rgba(60,85,246,.35); transition:all .2s;
}
.btn-primary-sm:hover { opacity:.88; transform:translateY(-1px); }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero {
  min-height:auto; display:flex; align-items:center;
  padding:100px 0 40px;
  background:linear-gradient(180deg, #0f0f2e 0%, #181838 55%, #1a1a42 100%);
}
.hero-inner {
  max-width:1280px; margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.hero-title {
  font-size:68px; line-height:1.04; margin-bottom:14px;
  animation:fadeUp .7s ease .05s both;
}
/* Gradient on the accent span only — softer, two-tone */
.hero-title .grad {
  background:linear-gradient(90deg, var(--vivid-blue) 0%, var(--azure) 50%, var(--green) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc {
  font-size:18px; line-height:1.7; color:var(--text-sub);
  max-width:500px; margin-bottom:24px;
  animation:fadeUp .7s ease .15s both;
}
.hero-actions {
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  animation:fadeUp .7s ease .25s both;
}

.btn-hero-primary {
  padding:15px 34px; border-radius:14px;
  background:linear-gradient(135deg, #a24ced, #e54ed4, #308df1, #50cdf9);
  color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px;
  box-shadow:0 8px 28px rgba(162,76,237,.45);
  transition:opacity .2s, transform .2s, box-shadow .2s;
}
.btn-hero-primary:hover { opacity:.9; transform:translateY(-2px); box-shadow:0 12px 36px rgba(162,76,237,.6); }

.btn-hero-secondary {
  padding:15px 28px; border-radius:14px;
  background:transparent; border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7); font-size:16px; font-weight:500; transition:all .2s;
}
.btn-hero-secondary:hover { border-color:rgba(255,255,255,.4); color:#fff; }

.hero-visual {
  position:relative; animation:fadeUp .9s ease .2s both;
  display:flex; align-items:center; justify-content:center; max-width:580px;
}
.hero-img-wrap { position:relative; width:100%; }
.hero-img-wrap::before {
  content:'';
  position:absolute; inset:-60px;
  background:radial-gradient(ellipse at center,
    rgba(60,85,246,.25) 0%,
    rgba(80,205,249,.10) 40%,
    transparent 68%);
  border-radius:50%;
  z-index:0;
}
.hero-img-wrap img {
  position:relative; z-index:1;
  width:100%; max-width:580px; max-height:460px; object-fit:contain;
  transition:transform .4s ease;
}
.hero-img-wrap:hover img {
  transform:scale(1.02) translateY(-4px);
}

.float-badge, .float-badge-2 {
  position:absolute; background:rgba(18,18,45,.95); border-radius:14px; padding:12px 16px;
  box-shadow:0 16px 48px rgba(0,0,0,.45); z-index:3; 
}
.float-badge   { bottom:-12px; right:-10px; border:1px solid rgba(115,234,114,.35); }
.float-badge-2 { top:-12px;   left:-10px;  border:1px solid rgba(80,205,249,.35); }
.fb-icon  { font-size:18px; margin-bottom:3px; }
.fb-val   { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:800; }
.fb-label { font-size:9px; color:var(--text-muted); }

/* ══════════════════════════════════════════
   GIVEAWAY
══════════════════════════════════════════ */
.giveaway-section {
  padding:40px 0 60px;
  background:#1a1a42;
}
.giveaway-card {
  background:linear-gradient(135deg,rgba(229,78,212,.1),rgba(162,76,237,.1),rgba(60,85,246,.1));
  border:1px solid rgba(229,78,212,.22); border-radius:24px; padding:52px 60px;
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.giveaway-card::before {
  content:''; position:absolute; top:-50%; right:-10%;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(229,78,212,.12),transparent 70%); pointer-events:none;
}
.giveaway-eyebrow { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--pink); font-weight:600; margin-bottom:12px; }
.giveaway-title   { font-size:34px; margin-bottom:12px; color:#fff; }
.giveaway-desc    { font-size:15px; color:var(--text-sub); line-height:1.7; max-width:540px; }
.giveaway-desc strong { color:var(--yellow); }
.giveaway-right { display:flex; flex-direction:column; align-items:center; gap:20px; min-width:320px; }
.spots-badge {
  text-align:center; width:180px; height:180px; border-radius:50%; border:3px solid var(--azure);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(80,205,249,.07); box-shadow:0 0 50px rgba(80,205,249,.22);
}
.spots-num {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:58px; font-weight:800;
  background:linear-gradient(135deg,var(--azure),var(--green));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
.spots-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; margin-top:4px; }
.giveaway-form  { display:flex; gap:12px; width:100%; }
.giveaway-input {
  flex:1; padding:16px 22px; border-radius:14px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#fff; font-size:16px; outline:none; font-family:'Plus Jakarta Sans',sans-serif; transition:border-color .2s;
}
.giveaway-input::placeholder { color:var(--text-muted); }
.giveaway-input:focus { border-color:var(--azure); }
.giveaway-btn {
  padding:16px 28px; border-radius:14px;
  background:linear-gradient(135deg, #a24ced, #e54ed4, #308df1, #50cdf9);
  color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px;
  white-space:nowrap; box-shadow:0 6px 20px rgba(162,76,237,.4); transition:opacity .2s, transform .2s;
}
.giveaway-btn:hover { opacity:.88; transform:translateY(-1px); }
.giveaway-note { font-size:11px; color:var(--text-muted); text-align:center; }

/* ══════════════════════════════════════════
   FEATURES
══════════════════════════════════════════ */
.features-section {
  padding:96px 0 96px;
  background:#f4f7ff;
}

.features-header { margin-bottom:56px; }
.features-grid   { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }

.feature-card {
  background:rgba(255,255,255,.82); border:1px solid rgba(0,0,0,.07);
  border-radius:22px; overflow:hidden;
  transition:border-color .3s, transform .3s, box-shadow .3s;
  color:#181838;
  box-shadow:0 10px 32px rgba(24,24,56,.06);
}
.feature-card-disclaimer {
  margin-top: 12px;
  padding: 0 28px 8px;
  font-size: 10px;
  color: rgba(24,24,56,.4);
  line-height: 1.6;
  font-style: italic;
}
.feature-card:hover { border-color:rgba(48,141,241,.22); transform:translateY(-4px); box-shadow:0 18px 42px rgba(24,24,56,.10); }
.feature-card-top   { padding:36px 36px 24px; }
.feature-icon-wrap  { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:20px; }
.feature-card-title { font-size:22px; margin-bottom:10px; color:#181838; }
.feature-card-desc  { font-size:14px; color:rgba(24,24,56,.65); line-height:1.7; }
.feature-bullets    { padding:0 36px 28px; display:flex; flex-direction:column; gap:8px; }
.feature-bullet     { display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(24,24,56,.65); }
.feature-dot        { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

.mini-dash {
  margin:0 24px 24px; border-radius:14px;
  border:1px solid rgba(0,0,0,.07); background:rgba(24,24,56,.06); padding:16px;
}
.mini-stats  { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.mini-stat   { background:rgba(0,0,0,.04); border-radius:10px; padding:10px 12px; }
.mini-stat-l { font-size:9px; color:rgba(24,24,56,.45); text-transform:uppercase; letter-spacing:.6px; margin-bottom:3px; }
.mini-stat-v { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:800; }
.mini-bar-row   { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.mini-bar-label { font-size:9px; color:rgba(24,24,56,.45); width:65px; flex-shrink:0; }
.mini-bar-track { flex:1; height:4px; background:rgba(0,0,0,.08); border-radius:2px; overflow:hidden; }
.mini-bar-fill  { height:100%; border-radius:2px; }
.mini-bar-val   { font-size:9px; font-weight:600; width:32px; text-align:right; flex-shrink:0; }
.mini-credit {
  margin:0 24px 24px; border-radius:14px;
  border:1px solid rgba(0,0,0,.07); background:rgba(24,24,56,.06); padding:16px;
  display:flex; align-items:center; gap:16px;
}
.img-placeholder {
  margin:0 24px 24px; border-radius:14px;
  border:1px dashed rgba(0,0,0,.12); height:200px; background:rgba(0,0,0,.03);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.img-placeholder-note { font-size:11px; color:rgba(24,24,56,.45); text-align:center; line-height:1.5; }

/* ══════════════════════════════════════════
   PRICING — three cards
══════════════════════════════════════════ */
.pricing-section {
  padding:88px 0 92px;
  background:#f4f7ff;
  border-top:1px solid rgba(24,24,56,.06);
}
.pricing-header  { text-align:center; margin-bottom:52px; }
.pricing-header .section-title   { color:#181838; }
.pricing-header .section-desc    { color:rgba(24,24,56,.55); }
.pricing-header .section-eyebrow { color:var(--vivid-blue); }

.pricing-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
  align-items:start;
  margin-bottom:36px;
}

/* ── Individual card ── */
.plan-card {
  background:#fff;
  border:1px solid rgba(24,24,56,.08);
  border-radius:20px;
  overflow:hidden;
  position:relative;
}
.plan-card-featured {
  border-color:rgba(60,85,246,.25);
  box-shadow:0 8px 40px rgba(60,85,246,.12);
}

.plan-popular {
  background:var(--vivid-blue);
  color:#fff;
  text-align:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:6px 0;
}

.plan-top {
  padding:28px 28px 24px;
  border-bottom:1px solid rgba(24,24,56,.06);
}

.plan-label {
  font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:rgba(24,24,56,.45); margin-bottom:14px;
}
.plan-label-pro     { color:var(--vivid-blue); }
.plan-label-premium { color:var(--lavender); }

.plan-price-row {
  display:flex; align-items:baseline; gap:1px; margin-bottom:10px; line-height:1;
}
.plan-dollar { font-size:16px; font-weight:700; color:rgba(24,24,56,.4); margin-top:4px; }
.plan-num    { font-size:48px; font-weight:800; color:#181838; line-height:1; }
.plan-num-pro     { color:var(--vivid-blue); }
.plan-num-premium { color:var(--lavender); }
.plan-cents  { font-size:22px; font-weight:800; color:#181838; align-self:flex-start; margin-top:10px; }
.plan-cents-pro     { color:var(--vivid-blue); }
.plan-cents-premium { color:var(--lavender); }
.plan-per    { font-size:13px; color:rgba(24,24,56,.4); margin-left:4px; }

.plan-tagline {
  font-size:13px; color:rgba(24,24,56,.5); line-height:1.5; margin-bottom:20px;
}

.plan-btn {
  display:block; width:100%; padding:13px;
  border-radius:12px; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:14px; cursor:pointer; transition:all .2s; text-align:center;
}
.plan-btn-basic   { background:rgba(24,24,56,.07); border:1px solid rgba(24,24,56,.1); color:rgba(24,24,56,.65); }
.plan-btn-basic:hover { background:rgba(24,24,56,.12); color:#181838; }
.plan-btn-pro     { background:linear-gradient(135deg,var(--blue),var(--vivid-blue)); border:none; color:#fff; box-shadow:0 4px 18px rgba(60,85,246,.28); }
.plan-btn-pro:hover { opacity:.88; transform:translateY(-1px); }
.plan-btn-premium { background:linear-gradient(135deg,var(--lavender),var(--pink)); border:none; color:#fff; box-shadow:0 4px 18px rgba(162,76,237,.22); }
.plan-btn-premium:hover { opacity:.88; transform:translateY(-1px); }

/* ── Feature group labels inside cards ── */
.pf-group-label {
  padding:7px 28px 5px;
  font-size:9px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:rgba(24,24,56,.35);
  background:rgba(24,24,56,.03);
  border-top:1px solid rgba(24,24,56,.06);
  border-bottom:1px solid rgba(24,24,56,.04);
}
.plan-card-featured .pf-group-label {
  background:rgba(60,85,246,.04);
  border-top-color:rgba(60,85,246,.1);
  border-bottom-color:rgba(60,85,246,.06);
  color:rgba(60,85,246,.45);
}

.plan-features      { list-style:none; padding:10px 28px 4px; display:flex; flex-direction:column; gap:8px; }
.plan-features-last { padding-bottom:20px; }

.pf {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:rgba(24,24,56,.7); line-height:1.4;
}
.pf-no { color:rgba(24,24,56,.3); }

.pf-check {
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:rgba(115,234,114,.22); color:#1a7a19;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.pf-inherit { color:#181838; font-weight:700; padding-bottom:6px; border-bottom:1px solid rgba(24,24,56,.08); margin-bottom:2px; }
.pf-check-inherit { background:rgba(115,234,114,.22); color:#1a7a19; }
.plan-card-featured .pf-inherit { color:var(--vivid-blue); }
.plan-card-featured .pf-check-inherit { background:rgba(48,141,241,.15); color:var(--vivid-blue); }


  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:rgba(24,24,56,.06); color:rgba(24,24,56,.25);
  font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}

/* ══ PLAN BUTTONS (new pricing section) ══ */
.plan-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  border: none;
  margin-bottom: 4px;
}

.plan-btn-basic {
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(24,24,56,.7);
}
.plan-btn-basic:hover {
  background: rgba(0,0,0,.1);
  color: #181838;
}

.plan-btn-pro {
  background: linear-gradient(135deg, #3c55f6, #308df1);
  color: #fff;
  box-shadow: 0 6px 24px rgba(60,85,246,.35);
}
.plan-btn-pro:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.plan-btn-premium {
  background: linear-gradient(135deg, #e54ed4, #a24ced);
  color: #fff;
  box-shadow: 0 6px 24px rgba(229,78,212,.3);
}
.plan-btn-premium:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.plan-annual {
  font-size: 12px;
  color: rgba(24,24,56,0.5);
  margin: -8px 0 12px;
  text-align: center;
}
.plan-annual strong {
  color: rgba(24,24,56,0.75);
  font-weight: 600;
}

/* ── Starter+ add-on block ── */
.plan-addon-block {
  margin:10px 16px 20px;
  border-radius:14px;
  border:1.5px dashed rgba(48,141,241,.3);
  background:rgba(48,141,241,.04);
  padding:16px 18px 14px;
}
.plan-addon-header {
  display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;
}
.plan-addon-badge {
  font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  background:linear-gradient(135deg, var(--blue), var(--vivid-blue));
  color:#fff; padding:3px 10px; border-radius:20px;
}
.plan-addon-price {
  font-size:12px; font-weight:600; color:var(--vivid-blue);
}
.plan-addon-tagline {
  font-size:12px; color:rgba(24,24,56,.5); margin-bottom:10px; line-height:1.5;
}
.plan-features-addon { padding:0 0 10px; gap:7px; }
.pf-check-addon {
  background:rgba(48,141,241,.15); color:var(--vivid-blue);
}
.plan-btn-addon {
  display:block; width:100%; padding:10px;
  border-radius:10px; border:1.5px solid rgba(48,141,241,.4);
  background:transparent; color:var(--vivid-blue);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13px;
  cursor:pointer; transition:all .2s; text-align:center; margin-top:4px;
}
.plan-btn-addon:hover { background:rgba(48,141,241,.08); border-color:var(--vivid-blue); }


.founding-note {
  text-align:center; padding:22px; border-radius:14px;
  background:rgba(253,236,131,.15); border:1px solid rgba(200,170,0,.25); color:#181838;
  font-size:14px;
}


/* ══════════════════════════════════════════
   CALCULATORS
══════════════════════════════════════════ */
.calc-section {
  padding:108px 0 112px;
  background:#141430;
}

.calc-header { text-align:center; margin-bottom:52px; }
.calc-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.calc-card {
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:30px;
  transition:all .3s; position:relative; overflow:hidden; cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.calc-card:hover { border-color:rgba(80,205,249,.25); transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.24); }
.lock-badge {
  position:absolute; top:14px; right:14px; padding:3px 10px; border-radius:20px;
  font-size:10px; font-weight:700; background:rgba(253,236,131,.12); color:var(--yellow); border:1px solid rgba(253,236,131,.2);
}
.calc-icon { font-size:30px; margin-bottom:14px; }
.calc-name { font-size:18px; font-weight:800; margin-bottom:8px; }
.calc-desc { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:18px; }
.calc-tier { display:inline-block; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; }

/* ══════════════════════════════════════════
   WHY SUMART
══════════════════════════════════════════ */
.why-section {
  padding:80px 0 88px;
  background:#ffffff;
  border-top:1px solid rgba(24,24,56,.06);
}
.why-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.why-headline {
  font-size:38px; font-weight:800; color:#181838;
  line-height:1.1; margin-bottom:16px;
}
.why-body {
  font-size:16px; color:rgba(24,24,56,.62); line-height:1.75;
  margin-bottom:28px; max-width:480px;
}
.why-trust {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.why-trust-item {
  font-size:12px; font-weight:600; color:rgba(24,24,56,.45);
}
.why-trust-dot { color:rgba(24,24,56,.22); font-size:16px; line-height:1; }

.why-pillars {
  display:flex; flex-direction:column; gap:28px;
}
.why-pillar {
  display:flex; align-items:center; gap:16px;
}
.why-pillar-icon {
  flex-shrink:0; width:80px; height:80px;
  background:none; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.why-pillar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.why-pillar-title {
  font-size:15px; font-weight:700; color:#181838; margin-bottom:4px;
  min-width:140px;
}
.why-pillar-desc {
  font-size:13px; color:rgba(24,24,56,.55); line-height:1.6;
}

/* ══════════════════════════════════════════
   FINAL CTA
══════════════════════════════════════════ */
.final-cta-section {
  padding:96px 0;
  background:#181838;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.final-cta-inner {
  max-width:580px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.final-cta-headline {
  font-size:42px; font-weight:800; color:#fff; line-height:1.1;
}
.final-cta-sub {
  font-size:16px; color:rgba(255,255,255,.55); line-height:1.6;
}
.final-cta-trust {
  font-size:12px; color:rgba(255,255,255,.3);
  margin-top:4px;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  border-top:1px solid rgba(255,255,255,.06); padding:44px 0 34px;
  position:relative; z-index:1;
  background:
    radial-gradient(ellipse 420px 180px at 20% 0%, rgba(80,205,249,.05), transparent 60%),
    linear-gradient(180deg, #141430 0%, #101028 100%);
}
.footer-inner {
  max-width:1280px; margin:0 auto; padding:0 40px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.footer-logo  { display:flex; align-items:center; gap:10px; }
.footer-links { display:flex; gap:28px; }
.footer-link  { font-size:13px; color:var(--text-muted); transition:color .2s; }
.footer-link:hover { color:#fff; }

/* ══════════════════════════════════════════
   HAMBURGER + MOBILE DROPDOWN
══════════════════════════════════════════ */
.hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; padding:5px; background:none; border:none; cursor:pointer; flex-shrink:0;
}
.hamburger span {
  display:block; width:22px; height:2px; background:rgba(255,255,255,.8); border-radius:2px;
  transition:all .25s ease; transform-origin:center;
}
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; width:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-dropdown {
  display:none; flex-direction:column; gap:10px;
  max-height:0; overflow:hidden; background:rgba(14,14,40,.98);
  border-top:1px solid rgba(255,255,255,.07); transition:max-height .3s ease, padding .3s ease; padding:0 20px;
}
.mobile-dropdown.open { max-height:200px; padding:16px 20px 20px; }
.mobile-drop-btn {
  width:100%; padding:13px 20px; border-radius:12px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:15px;
  cursor:pointer; transition:all .2s; text-align:center;
}
.mobile-drop-btn.outline { background:transparent; border:1px solid rgba(80,205,249,.5); color:var(--azure); }
.mobile-drop-btn.outline:hover { background:rgba(80,205,249,.1); }
.mobile-drop-btn.solid { background:linear-gradient(135deg,var(--blue),var(--vivid-blue)); border:none; color:#fff; box-shadow:0 4px 16px rgba(60,85,246,.3); }
.mobile-drop-btn.solid:hover { opacity:.88; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-inner            { grid-template-columns:1fr; }
  .hero-visual           { max-width:520px; margin:0 auto; }
  .hero-title            { font-size:52px; }
  .features-grid         { grid-template-columns:1fr; }
  .calc-grid             { grid-template-columns:repeat(2,1fr); }
  .giveaway-card         { grid-template-columns:1fr; text-align:center; }
  .giveaway-right        { align-items:center; }
  .giveaway-desc         { margin:0 auto; }
  .header-nav            { display:none; }
  .why-inner             { grid-template-columns:1fr; gap:48px; }
  .why-headline          { font-size:32px; }
  .pricing-grid          { grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; }
}

@media (max-width:640px) {
  html, body         { overflow-x:hidden; max-width:100vw; }
  header             { overflow:visible; }
  .header-inner      { padding:0 16px; height:60px; }
  .header-logo       { height:34px; }
  .header-actions    { display:none; }
  .hamburger         { display:flex; }
  .mobile-dropdown   { display:flex; }
  .hero              { padding:80px 0 32px; }
  .hero-inner        { padding:0 20px; gap:32px; }
  .hero-title        { font-size:38px; }
  .hero-desc         { font-size:16px; }
  .container         { padding-left:20px; padding-right:20px; }
  .footer-inner      { padding-left:20px; padding-right:20px; }
  .section-title     { font-size:28px; }
  .giveaway-card     { padding:28px 20px; }
  .giveaway-form     { flex-direction:column; }
  .giveaway-title    { font-size:24px; }
  .float-badge       { bottom:-10px; right:0; }
  .float-badge-2     { top:-10px; left:0; }
  .why-headline      { font-size:28px; }
  .why-pillars       { gap:20px; }
  .why-pillar-icon   { width:64px; height:64px; }
  .final-cta-headline { font-size:30px; }
  .calc-grid         { grid-template-columns:1fr; }
  .plan-num          { font-size:40px; }
}