/* ============================================================
   SekretnySMS.pl – style.css (clean single-file build v3)
   ============================================================ */

/* === RESET ================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ===== PURPLE PALETTE ===== */
  /* "Navy" slots → deep purple shades */
  --navy-900: #0d0520;   /* Darkest – hero bg, footer */
  --navy-800: #150a35;   /* Dark sections */
  --navy-700: #1e1040;   /* Slightly lighter dark */
  --navy-600: var(--navy-600);   /* Medium dark purple */
  --navy-500: #3b21a8;   /* Purple */
  --navy-400: #5b35d5;   /* Lighter purple */

  /* "Teal" slots → violet/purple accent */
  --teal-500: #7c3aed;   /* Primary purple – was teal */
  --teal-400: #8b5cf6;   /* Lighter purple */
  --teal-300: #a78bfa;   /* Lavender */
  --teal-muted: rgba(124,58,237,.10);

  /* CTA – keep orange (converts best against purple) */
  --orange-500: #ff6b35;
  --orange-400: #ff8c5a;
  --orange-glow: rgba(255,107,53,.30);

  /* Text */
  --text-primary:   #ede9fe;   /* Light lavender text on dark bg */
  --text-secondary: #c4b5fd;   /* Medium lavender */
  --text-muted:     #6d5fa6;   /* Muted purple */
  --text-dark:      #1e1b4b;   /* Near-black purple for light bg */

  /* Backgrounds */
  --white:    #ffffff;
  --bg-page:  #f8f7ff;   /* Barely-there lavender tint */
  --bg-card:  #ffffff;

  /* Borders */
  --border-dark:  rgba(255,255,255,.10);
  --border-light: rgba(109,40,217,.14);

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(79,28,180,.08);
  --shadow-md:   0 8px 30px rgba(79,28,180,.13);
  --shadow-lg:   0 20px 60px rgba(79,28,180,.18);
  --shadow-card: 0 4px 24px rgba(79,28,180,.10), 0 1px 4px rgba(79,28,180,.06);

  /* Typography */
  --font-display: 'Syne','Arial Black',sans-serif;
  --font-body:    'DM Sans','Arial',sans-serif;

  --section-py: clamp(60px,8vw,120px);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px;
  --ease: cubic-bezier(.4,0,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --tgbar-h: 40px; --navbar-h: 68px;
  --offset: calc(var(--tgbar-h) + var(--navbar-h));
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
  color: var(--text-dark); background: var(--bg-page);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-top: var(--offset);
}
img,svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* === SKIP NAV ============================================== */
.skip-nav {
  position: absolute; top: -100px; left: 16px; z-index: 9999;
  background: var(--orange-500); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; transition: top .2s;
}
.skip-nav:focus { top: 0; }

/* === CONTAINER ============================================= */
.container         { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px,4vw,48px); }
.container--narrow { max-width: 780px; }

/* === TG BAR ================================================ */
.tg-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--tgbar-h); background: linear-gradient(135deg,#1a73c8,#0d5ea3 50%,#2094e8);
  display: flex; align-items: center;
}
.tg-bar .container { width: 100%; }
.tg-bar__inner { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tg-bar__pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
  animation: tgPulse 2s infinite;
}
@keyframes tgPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
}
.tg-bar__text { color: rgba(255,255,255,.9); font-size: .8rem; }
.tg-bar__text strong { color: #fff; }
.tg-bar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.38);
  color: #fff; padding: 5px 14px; border-radius: 50px; font-size: .77rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0; transition: background .2s;
}
.tg-bar__btn:hover { background: rgba(255,255,255,.32); }

/* === NAVBAR ================================================ */
.navbar {
  position: fixed; top: var(--tgbar-h); left: 0; right: 0; z-index: 1000;
  height: var(--navbar-h);
  background: rgba(6,13,24,.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-dark);
  transition: background .3s, box-shadow .3s;
}
.navbar.scrolled { background: rgba(6,13,24,.97); box-shadow: 0 4px 28px rgba(0,0,0,.4); }
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--navbar-h); gap: 20px;
}
.navbar__logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.15rem; flex-shrink: 0;
}
.logo-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg,var(--teal-500),var(--teal-400));
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.logo-text { color: var(--white); }
.logo-text strong { color: var(--teal-400); }
.logo-text em { color: var(--text-secondary); font-style: normal; font-size: .82em; }

/* Desktop menu */
.navbar__menu { display: flex; align-items: center; }
.navbar__links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-link {
  color: var(--text-secondary); padding: 8px 13px; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 500; transition: color .2s, background .2s;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.nav-link:hover,.nav-link.active { color: var(--white); background: rgba(255,255,255,.08); }
.nav-link--tg { color: #5ab8ff !important; }
.nav-link--tg:hover { background: rgba(90,184,255,.1) !important; }

/* Burger – HIDDEN on desktop */
.navbar__burger { display: none; flex-direction: column; gap: 5px; padding: 6px; border-radius: 8px; flex-shrink: 0; }
.navbar__burger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all .3s; }
.navbar__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === BUTTONS =============================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  padding: 12px 24px; border-radius: var(--radius-md); border: 2px solid transparent;
  transition: all .25s var(--ease-spring); white-space: nowrap; cursor: pointer;
  text-decoration: none; position: relative; overflow: hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.1); opacity:0; transition:opacity .2s; }
.btn:hover::after { opacity: 1; }
.btn--primary {
  background: linear-gradient(135deg,var(--orange-500),var(--orange-400)); color: #fff;
  box-shadow: 0 4px 18px var(--orange-glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--orange-glow); }
.btn--teal {
  background: linear-gradient(135deg,var(--teal-500),var(--teal-400)); color: var(--navy-900);
  box-shadow: 0 4px 18px rgba(124,58,237,.3);
}
.btn--teal:hover { transform: translateY(-2px); }
.btn--tg {
  background: linear-gradient(135deg,#1a73c8,#2094e8); color: #fff;
  box-shadow: 0 4px 16px rgba(32,148,232,.35);
}
.btn--tg:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(32,148,232,.5); }
.btn--outline { border-color: var(--border-dark); color: var(--text-secondary); background: transparent; }
.btn--outline:hover { border-color: var(--teal-500); color: var(--teal-500); }
.btn--outline-light { border-color: rgba(255,255,255,.25); color: #fff; background: transparent; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--sm  { font-size: .8rem; padding: 7px 15px; border-radius: 10px; }
.btn--lg  { font-size: 1.02rem; padding: 15px 30px; }
.btn--xl  { font-size: 1.1rem; padding: 17px 36px; border-radius: var(--radius-lg); }
.btn--full { width: 100%; justify-content: center; }
.btn-arrow { transition: transform .2s var(--ease-spring); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-loading { color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content:''; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === BREADCRUMBS =========================================== */
.breadcrumbs { background: var(--navy-800); border-bottom: 1px solid var(--border-dark); padding: 11px 0; font-size: .8rem; }
.breadcrumbs__list { display: flex; align-items: center; gap: 4px; list-style: none; flex-wrap: wrap; }
.breadcrumbs__list li { display: flex; align-items: center; gap: 4px; }
.breadcrumbs__list a { color: var(--text-secondary); transition: color .2s; }
.breadcrumbs__list a:hover { color: var(--teal-400); }
.breadcrumbs__list .sep { color: var(--text-muted); }
.breadcrumbs__list li:last-child span,
.breadcrumbs__list li:last-child a { color: var(--teal-400); font-weight: 500; }

/* === HERO ================================================== */
.hero {
  background: var(--navy-900); position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 80px 0;
  min-height: calc(100vh - var(--offset));
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 60% at 65% 40%,rgba(124,58,237,.08) 0%,transparent 60%),
              radial-gradient(ellipse 50% 40% at 15% 80%,rgba(255,107,53,.07) 0%,transparent 50%);
}
.hero__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.hero__badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.25); color:var(--teal-400);
  padding:6px 14px; border-radius:50px; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:22px; animation:fadeInUp .6s both;
}
.hero__badge::before { content:'●'; font-size:.5rem; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
.hero__title {
  font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.8rem); font-weight:800; line-height:1.1;
  color:var(--white); margin-bottom:22px; animation:fadeInUp .7s .1s both;
}
.hero__title .highlight {
  background:linear-gradient(135deg,var(--teal-400),var(--teal-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero__title .highlight-orange {
  background:linear-gradient(135deg,var(--orange-500),var(--orange-400));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero__desc { font-size:1.08rem; color:var(--text-secondary); line-height:1.7; margin-bottom:32px; max-width:520px; animation:fadeInUp .7s .2s both; }
.hero__actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; animation:fadeInUp .7s .3s both; }
.hero__trust { display:flex; gap:20px; flex-wrap:wrap; animation:fadeInUp .7s .4s both; }
.trust-item { display:flex; align-items:center; gap:7px; color:var(--text-secondary); font-size:.83rem; font-weight:500; }
.trust-item .icon { color:var(--teal-500); }
.hero__card-wrapper { animation:fadeInRight .8s .2s both; }
.hero__card {
  background:rgba(255,255,255,.04); border:1px solid var(--border-dark);
  border-radius:var(--radius-xl); padding:32px; position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
}
.hero__card::before {
  content:''; position:absolute; top:0; left:30px; right:30px; height:1px;
  background:linear-gradient(90deg,transparent,var(--teal-500),transparent); opacity:.5;
}

/* === FORM CONTROLS ========================================= */
.form-label { display:block; font-size:.77rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:7px; }
.form-control {
  width:100%; padding:12px 15px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm); color:var(--white); font-family:var(--font-body); font-size:.93rem;
  transition:border-color .2s,background .2s,box-shadow .2s; margin-bottom:14px;
}
.form-control::placeholder { color:var(--text-muted); }
.form-control:focus { outline:none; border-color:var(--teal-500); background:rgba(124,58,237,.05); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.form-control--dark { background:#fff; color:var(--text-dark); border-color:#d0dae8; }
.form-control--dark::placeholder { color:#9bb3d4; }
.form-control--dark:focus { border-color:var(--teal-500); background:#fff; box-shadow:0 0 0 3px rgba(124,58,237,.15); color:var(--text-dark); }
select.form-control--dark { background:#fff; color:var(--text-dark); }
textarea.form-control { resize:vertical; min-height:100px; }
.form-group { margin-bottom:18px; }
.char-counter { text-align:right; font-size:.74rem; color:var(--text-muted); margin-top:-10px; margin-bottom:14px; }
.char-counter.warn { color:var(--orange-500); }
.char-counter.over { color:#ff4444; }
.field-error { font-size:.77rem; color:#dc3545; margin-top:4px; margin-bottom:10px; display:flex; align-items:center; gap:5px; }

/* Phone tags */
.phone-tag-wrap {
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm); padding:7px; display:flex; flex-wrap:wrap; gap:6px;
  align-items:center; min-height:48px; cursor:text; transition:border-color .2s,box-shadow .2s; margin-bottom:7px;
}
.phone-tag-wrap.focused { border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.phone-tag-wrap--light  { background:#fff; border-color:#d0dae8; }
.phone-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--teal-muted); border:1px solid rgba(124,58,237,.3); color:var(--teal-400);
  padding:3px 9px; border-radius:6px; font-size:.82rem; font-weight:600;
  animation:tagPop .2s var(--ease-spring);
}
.phone-tag--light { background:rgba(124,58,237,.08); color:#5b21b6; border-color:rgba(109,40,217,.3); }
.phone-tag__remove { background:none; border:none; color:inherit; opacity:.6; font-size:.9rem; line-height:1; cursor:pointer; padding:0 1px; transition:opacity .2s; }
.phone-tag__remove:hover { opacity:1; }
.phone-tag-input { flex:1; min-width:130px; background:none; border:none; color:var(--white); font-family:var(--font-body); font-size:.88rem; padding:4px 5px; }
.phone-tag-input--light { color:var(--text-dark); }
.phone-tag-input:focus { outline:none; }

/* Price summary (dark bg version) */
.price-summary {
  background:rgba(124,58,237,.06); border:1px solid rgba(124,58,237,.2);
  border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:18px;
  display:flex; justify-content:space-between; align-items:center;
}
.price-summary__label { color:var(--text-secondary); font-size:.87rem; }
.price-summary__value { font-family:var(--font-display); font-weight:700; color:var(--teal-400); font-size:1.1rem; }

/* Price rows (light bg version) */
.price-row { display:flex; justify-content:space-between; align-items:center; font-size:.87rem; padding:4px 0; }
.price-row .price-label { color:var(--text-muted); }
.price-row .price-value { font-weight:600; color:var(--navy-800); }
.price-row.savings .price-value { color:var(--teal-500); }
.price-row.total { padding-top:10px; margin-top:6px; border-top:2px solid var(--border-light); }
.price-row.total .price-label { font-weight:700; color:var(--navy-800); font-size:.93rem; }
.price-row.total .price-value { font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--navy-800); }
.price-row.total .price-value.is-free {
  background:linear-gradient(135deg,var(--teal-500),var(--teal-400));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:1.5rem;
}

/* === STATS BAR ============================================= */
.stats-bar { background:var(--navy-800); border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark); padding:28px 0; }
.stats-bar__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat-item__number {
  font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--teal-400),var(--teal-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-item__label { font-size:.78rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }

/* === HOW IT WORKS ========================================== */
.section-how { background:var(--navy-900); padding:var(--section-py) 0; }
.section-header { text-align:center; max-width:680px; margin:0 auto 60px; }
.section-tag {
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-400); margin-bottom:14px; padding:5px 12px;
  background:var(--teal-muted); border-radius:50px; border:1px solid rgba(124,58,237,.25);
}
.section-tag--light { background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.2); color:#5b21b6; }
.section-title { font-family:var(--font-display); font-size:clamp(1.9rem,4vw,3rem); font-weight:800; line-height:1.15; margin-bottom:16px; color:var(--white); }
.section-title .accent { color:var(--teal-400); }
.section-title--dark { color:var(--navy-800); }
.section-desc { color:var(--text-secondary); font-size:1rem; line-height:1.7; }
.section-desc--dark { color:var(--text-muted); }

.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.steps-grid::before {
  content:''; position:absolute; top:44px; left:80px; right:80px; height:2px;
  background:linear-gradient(90deg,var(--teal-500),var(--orange-500)); opacity:.25; z-index:0;
}
.step-card {
  background:rgba(255,255,255,.03); border:1px solid var(--border-dark);
  border-radius:var(--radius-lg); padding:28px 20px; text-align:center;
  position:relative; z-index:1; transition:transform .3s,border-color .3s,box-shadow .3s;
}
.step-card:hover { transform:translateY(-8px); border-color:rgba(124,58,237,.3); box-shadow:0 20px 40px rgba(0,0,0,.3); }
.step-number {
  width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--navy-600),var(--navy-500));
  border:2px solid var(--teal-500); color:var(--teal-400); font-family:var(--font-display); font-size:1.1rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 0 18px rgba(124,58,237,.2);
}
.step-icon { font-size:1.4rem; margin-bottom:8px; }
.step-title { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.step-desc { font-size:.85rem; color:var(--text-secondary); line-height:1.6; }

/* === FEATURES ============================================== */
.section-features { padding:var(--section-py) 0; background:var(--bg-page); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card {
  background:var(--white); border-radius:var(--radius-lg); padding:32px 26px;
  border:1px solid var(--border-light); box-shadow:var(--shadow-card);
  transition:transform .3s,box-shadow .3s; position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal-500),var(--teal-400)); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.feature-card:hover::before { transform:scaleX(1); }
.feature-icon {
  width:52px; height:52px; border-radius:var(--radius-md); margin-bottom:18px;
  background:linear-gradient(135deg,var(--teal-muted),rgba(124,58,237,.04));
  border:1px solid rgba(124,58,237,.2); display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.feature-title { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--navy-800); margin-bottom:8px; }
.feature-desc { font-size:.88rem; color:var(--text-muted); line-height:1.65; }

/* === PRICING =============================================== */
.section-pricing { padding:var(--section-py) 0; background:var(--navy-900); }
.pricing-card {
  max-width:520px; margin:0 auto; background:rgba(255,255,255,.04);
  border:1px solid var(--border-dark); border-radius:var(--radius-xl); padding:44px;
  text-align:center; position:relative; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.4);
}
.pricing-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--teal-500),var(--orange-500)); }
.pricing-badge {
  display:inline-block; background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.3); color:var(--teal-400);
  padding:6px 16px; border-radius:50px; font-size:.77rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:26px;
}
.pricing-amount { display:flex; align-items:flex-start; justify-content:center; gap:2px; margin-bottom:6px; }
.pricing-currency { font-size:1.4rem; font-weight:700; color:var(--text-secondary); margin-top:14px; }
.pricing-price { font-family:var(--font-display); font-size:5rem; font-weight:800; color:var(--white); line-height:1; }
.pricing-decimal { font-size:2rem; font-weight:700; color:var(--text-secondary); align-self:flex-end; margin-bottom:6px; }
.pricing-per { font-size:.88rem; color:var(--text-secondary); margin-bottom:28px; }
.pricing-features { text-align:left; margin-bottom:32px; }
.pricing-features li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-dark); color:var(--text-secondary); font-size:.88rem; }
.pricing-features li:last-child { border-bottom:none; }
.pricing-features .check { color:var(--teal-400); flex-shrink:0; }

/* === TESTIMONIALS ========================================== */
.section-testimonials { padding:var(--section-py) 0; background:var(--bg-page); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonial-card {
  background:var(--white); border-radius:var(--radius-lg); padding:28px;
  border:1px solid var(--border-light); box-shadow:var(--shadow-card); position:relative;
}
.testimonial-card::before {
  content:'"'; font-family:Georgia,serif; font-size:5rem; color:var(--teal-400); opacity:.12;
  position:absolute; top:8px; left:20px; line-height:1;
}
.testimonial-text { color:var(--text-muted); font-size:.9rem; line-height:1.7; margin-bottom:18px; position:relative; }
.testimonial-author { display:flex; align-items:center; gap:11px; }
.testimonial-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal-500),var(--navy-500));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:.87rem;
}
.testimonial-name { font-weight:700; font-size:.88rem; color:var(--navy-800); }
.testimonial-meta { font-size:.77rem; color:var(--text-muted); }
.stars { color:#fbbf24; font-size:.88rem; margin-bottom:5px; }

/* === CTA =================================================== */
.section-cta { padding:var(--section-py) 0; background:linear-gradient(135deg,var(--navy-700),var(--navy-800)); position:relative; overflow:hidden; }
.section-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(124,58,237,.07),transparent); }
.cta-inner { position:relative; z-index:1; text-align:center; max-width:680px; margin:0 auto; }
.cta-title { font-family:var(--font-display); font-size:clamp(1.9rem,4vw,3rem); font-weight:800; color:#fff; margin-bottom:18px; line-height:1.2; }
.cta-desc { color:var(--text-secondary); font-size:1rem; margin-bottom:32px; line-height:1.7; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* === FAQ =================================================== */
.section-faq { padding:var(--section-py) 0; background:var(--bg-page); }
.faq-list { max-width:780px; margin:0 auto; }
.faq-item { background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s; }
.faq-item:hover { box-shadow:var(--shadow-md); }
.faq-question { width:100%; padding:20px 22px; text-align:left; font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--navy-800); display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; background:none; border:none; transition:color .2s; }
.faq-question:hover { color:var(--teal-500); }
.faq-chevron { flex-shrink:0; color:var(--text-muted); font-size:1rem; transition:transform .3s; }
.faq-item.open .faq-chevron { transform:rotate(180deg); color:var(--teal-500); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); padding:0 22px; }
.faq-answer p { padding-bottom:18px; color:var(--text-muted); font-size:.9rem; line-height:1.7; }
.faq-item.open .faq-answer { max-height:400px; }

/* === SEND PAGE ============================================= */
.page-hero { background:var(--navy-900); padding:80px 0 50px; border-bottom:1px solid var(--border-dark); }
.page-title { font-family:var(--font-display); font-size:clamp(1.7rem,4vw,2.5rem); font-weight:800; color:#fff; margin-bottom:12px; }
.page-desc { color:var(--text-secondary); font-size:1rem; max-width:600px; }
.send-layout { display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; padding:44px 0 80px; }
.send-form-card { background:var(--white); border-radius:var(--radius-xl); padding:36px; box-shadow:var(--shadow-lg); border:1px solid var(--border-light); }
.send-sidebar { display:flex; flex-direction:column; gap:18px; }
.sidebar-card { background:var(--white); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-card); border:1px solid var(--border-light); }
.sidebar-card__title { font-family:var(--font-display); font-weight:700; color:var(--navy-800); font-size:.92rem; margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.sidebar-info-list { display:flex; flex-direction:column; gap:10px; }
.sidebar-info-item { display:flex; gap:9px; font-size:.855rem; color:var(--text-muted); }
.sidebar-info-item .icon { color:var(--teal-500); flex-shrink:0; margin-top:1px; }

/* Discount */
.discount-box { background:var(--white); border:1.5px dashed var(--border-light); border-radius:var(--radius-md); padding:18px; margin-bottom:18px; transition:border-color .2s; }
.discount-box.active { border-color:var(--teal-500); border-style:solid; }
.discount-box.error  { border-color:#dc3545; border-style:solid; }
.discount-box__header { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.discount-box__tag { font-size:.71rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:var(--teal-muted); border:1px solid rgba(124,58,237,.3); color:var(--teal-500); padding:3px 9px; border-radius:50px; }
.discount-box__label { font-size:.81rem; font-weight:600; color:var(--text-muted); }
.discount-input-row { display:flex; gap:9px; }
.discount-input { flex:1; padding:10px 13px; font-family:var(--font-display); font-size:.88rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--bg-page); border:1.5px solid var(--border-light); border-radius:var(--radius-sm); color:var(--text-dark); transition:border-color .2s,box-shadow .2s; }
.discount-input:focus { outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.discount-input::placeholder { text-transform:uppercase; font-weight:500; color:var(--text-muted); }
.discount-status { margin-top:9px; padding:9px 13px; border-radius:var(--radius-sm); font-size:.83rem; display:none; align-items:center; gap:7px; }
.discount-status.success { display:flex; background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.25); color:#5b21b6; }
.discount-status.error   { display:flex; background:rgba(220,53,69,.08); border:1px solid rgba(220,53,69,.25); color:#dc3545; }
.stripe-badge { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--text-muted); }

/* === SUCCESS PAGE ========================================== */
.success-page { min-height:calc(100vh - var(--offset)); background:var(--navy-900); display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.success-card { background:rgba(255,255,255,.04); border:1px solid var(--border-dark); border-radius:var(--radius-xl); padding:52px 42px; text-align:center; max-width:560px; width:100%; box-shadow:0 40px 80px rgba(0,0,0,.4); }
.success-icon { width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg,var(--teal-500),var(--teal-400)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 24px; animation:successPop .5s var(--ease-spring); box-shadow:0 0 36px rgba(124,58,237,.4); }
.success-title { font-family:var(--font-display); font-size:1.9rem; font-weight:800; color:#fff; margin-bottom:14px; }
.success-desc { color:var(--text-secondary); font-size:.97rem; line-height:1.7; margin-bottom:30px; }

/* === TG STICKY ============================================= */
.tg-sticky { position:fixed; bottom:24px; right:20px; z-index:8000; background:linear-gradient(135deg,#1a6bc8,#2094e8); border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(32,148,232,.45); display:flex; align-items:center; gap:10px; padding:11px 13px 11px 15px; min-width:210px; max-width:270px; animation:slideInRight .4s .5s var(--ease-spring) both; transition:transform .2s; }
.tg-sticky:hover { transform:scale(1.03); }
.tg-sticky.hidden { display:none; }
.tg-sticky__link { display:flex; align-items:center; gap:11px; text-decoration:none; flex:1; }
.tg-sticky__icon { width:36px; height:36px; border-radius:9px; flex-shrink:0; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; }
.tg-sticky__title { display:block; color:#fff; font-weight:700; font-size:.83rem; }
.tg-sticky__sub   { display:block; color:rgba(255,255,255,.75); font-size:.73rem; }
.tg-sticky__close { background:rgba(255,255,255,.15); border:none; color:rgba(255,255,255,.8); width:22px; height:22px; border-radius:50%; font-size:.95rem; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.tg-sticky__close:hover { background:rgba(255,255,255,.3); color:#fff; }

/* === FOOTER ================================================ */
.footer { background:var(--navy-900); border-top:1px solid var(--border-dark); padding:64px 0 0; }
.footer__tg-cta { background:linear-gradient(135deg,rgba(26,115,200,.14),rgba(32,148,232,.07)); border:1px solid rgba(78,173,255,.22); border-radius:var(--radius-xl); padding:26px 32px; margin-bottom:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer__tg-left { display:flex; align-items:center; gap:18px; flex:1; min-width:200px; }
.tg-icon-big { width:50px; height:50px; flex-shrink:0; border-radius:13px; background:linear-gradient(135deg,#1a73c8,#2094e8); display:flex; align-items:center; justify-content:center; }
.footer__tg-title { font-family:var(--font-display); font-size:1rem; font-weight:700; color:#fff; margin-bottom:5px; }
.footer__tg-desc  { font-size:.83rem; color:var(--text-secondary); line-height:1.5; }
.footer__tg-desc strong { color:#4eadff; }
.footer__grid { display:grid; grid-template-columns:1fr 1fr auto; gap:44px; margin-bottom:52px; }
.footer__logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer__tagline { color:var(--text-secondary); font-size:.855rem; line-height:1.65; margin-bottom:18px; }
.footer__badges { display:flex; gap:9px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:50px; font-size:.74rem; font-weight:600; background:rgba(255,255,255,.06); border:1px solid var(--border-dark); color:var(--text-secondary); }
.footer__nav { display:flex; gap:44px; }
.footer__nav-title { font-family:var(--font-display); font-size:.77rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:14px; }
.footer__nav ul { display:flex; flex-direction:column; gap:9px; }
.footer__nav a { color:var(--text-muted); font-size:.855rem; transition:color .2s; }
.footer__nav a:hover { color:var(--teal-400); }
.footer__cta-box { text-align:center; padding:26px; background:rgba(124,58,237,.05); border:1px solid rgba(124,58,237,.14); border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; gap:10px; align-self:start; min-width:220px; }
.footer__cta-label { font-size:.83rem; color:var(--text-secondary); font-weight:500; }
.footer__cta-sub   { font-size:.73rem; color:var(--text-muted); }
.footer__bottom { border-top:1px solid var(--border-dark); padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.footer__copy       { font-size:.78rem; color:var(--text-muted); }
.footer__disclaimer { font-size:.74rem; color:var(--text-muted); max-width:480px; text-align:right; }

/* === COOKIE / TOAST ======================================== */
.cookie-bar { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); width:calc(100% - 40px); max-width:680px; background:var(--navy-700); border:1px solid var(--border-dark); border-radius:var(--radius-lg); padding:14px 22px; box-shadow:0 20px 60px rgba(0,0,0,.5); z-index:9000; backdrop-filter:blur(12px); }
.cookie-bar__inner { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cookie-bar p { color:var(--text-secondary); font-size:.83rem; flex:1; }
.cookie-bar a { color:var(--teal-400); text-decoration:underline; }
.cookie-bar__btns { display:flex; gap:9px; flex-shrink:0; }
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:9px; pointer-events:none; }
.toast { background:var(--navy-700); border:1px solid var(--border-dark); border-radius:var(--radius-md); padding:13px 18px; color:var(--text-primary); font-size:.86rem; box-shadow:0 8px 30px rgba(0,0,0,.4); max-width:320px; display:flex; align-items:center; gap:9px; animation:slideInRight .3s var(--ease-spring); pointer-events:all; }
.toast--success { border-left:3px solid var(--teal-500); }
.toast--error   { border-left:3px solid #ef4444; }
.toast--info    { border-left:3px solid var(--orange-500); }

/* === TG PROMO ============================================== */
.tg-promo-card { background:linear-gradient(135deg,rgba(26,115,200,.12),rgba(32,148,232,.06)); border:1px solid rgba(78,173,255,.22); border-radius:var(--radius-xl); padding:32px 36px; text-align:center; position:relative; overflow:hidden; }
.tg-promo-title { font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2.1rem); font-weight:800; color:#fff; margin-bottom:12px; }
.tg-promo-desc  { color:var(--text-secondary); font-size:.95rem; line-height:1.65; margin-bottom:24px; }
.tg-promo-codes { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.tg-promo-code-badge { background:rgba(255,255,255,.08); border:1.5px solid rgba(78,173,255,.28); color:#7ec8f7; padding:7px 16px; border-radius:50px; font-family:var(--font-display); font-weight:700; font-size:.86rem; letter-spacing:.07em; }
.tg-promo-code-badge.free { border-color:rgba(124,58,237,.38); color:var(--teal-400); }

/* === ANIMATIONS =========================================== */
@keyframes fadeInUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(28px)} to{opacity:1;transform:translateX(0)} }
@keyframes tagPop      { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes successPop  { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
.animate-on-scroll { opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }
.animate-delay-1{transition-delay:.1s} .animate-delay-2{transition-delay:.2s}
.animate-delay-3{transition-delay:.3s} .animate-delay-4{transition-delay:.4s}

/* === RESPONSIVE ============================================ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns:1fr; max-width:620px; margin:0 auto; }
  .hero__card-wrapper { display:none; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid::before { display:none; }
  .send-layout { grid-template-columns:1fr; }
  .send-sidebar { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  .stats-bar__grid { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__cta-box { grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center; }
}

@media (max-width: 768px) {
  /* Show burger, hide desktop menu */
  .navbar__burger { display:flex; }
  .navbar__menu {
    position:fixed; top:var(--offset); left:0; right:0; bottom:0;
    background:rgba(6,13,24,.97); backdrop-filter:blur(20px);
    flex-direction:column; align-items:center; justify-content:center; gap:8px;
    transform:translateX(100%); transition:transform .35s var(--ease);
    border-top:1px solid var(--border-dark);
  }
  .navbar__menu.open { transform:translateX(0); }
  .navbar__links { flex-direction:column; gap:6px; width:100%; padding:24px; }
  .navbar__links li { width:100%; }
  .navbar__links .nav-link { justify-content:center; padding:14px; font-size:1rem; }
  .navbar__links .btn { width:100%; justify-content:center; }

  .hero { padding:50px 0 60px; }
  .features-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; gap:28px; }
  .footer__nav { flex-direction:row; gap:28px; }
  .footer__tg-cta { flex-direction:column; align-items:flex-start; }
  .footer__bottom { flex-direction:column; text-align:center; }
  .footer__disclaimer { text-align:center; }
  .send-sidebar { grid-template-columns:1fr; }
  .tg-sticky { right:12px; bottom:16px; min-width:190px; }
}

@media (max-width: 540px) {
  :root { --tgbar-h: 60px; }
  .tg-bar { height:60px; }
  .tg-bar__inner { flex-direction:column; gap:5px; padding:5px 0; }
  .tg-bar__text  { font-size:.74rem; }
  .tg-bar__btn   { font-size:.71rem; padding:4px 11px; }
  .hero__actions { flex-direction:column; }
  .hero__actions .btn { width:100%; justify-content:center; }
  .steps-grid { grid-template-columns:1fr; }
  .stats-bar__grid { grid-template-columns:1fr 1fr; }
  .send-form-card { padding:22px; }
  .pricing-card { padding:28px 20px; }
  .success-card { padding:32px 20px; }
  .footer__nav { flex-direction:column; gap:24px; }
  .cta-actions { flex-direction:column; align-items:center; }
}

/* ============================================================
   SENDER PAGE – Phone Mockup + Clean Form (v3)
   ============================================================ */

/* === PAGE WRAPPER ========================================== */
.sender-page {
  background: var(--bg-page);
  padding: 48px 0 80px;
  min-height: calc(100vh - var(--offset));
}
.sender-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 52px;
  align-items: start;
}

/* === TELEGRAM PILL ========================================= */
.tg-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,rgba(26,115,200,.1),rgba(32,148,232,.06));
  border: 1px solid rgba(78,173,255,.25); color: #1a73c8;
  padding: 8px 16px; border-radius: 50px; font-size: .79rem; font-weight: 600;
  margin-bottom: 22px; transition: all .2s; white-space: nowrap; flex-wrap: wrap;
}
.tg-pill:hover { background: linear-gradient(135deg,rgba(26,115,200,.18),rgba(32,148,232,.1)); transform: translateY(-1px); }

/* === FORM HEADER =========================================== */
.sender-title {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,2.8rem); font-weight: 800; line-height: 1.15;
  color: var(--navy-800); margin-bottom: 10px;
}
.sender-subtitle { font-size: .9rem; color: var(--text-muted); margin-bottom: 36px; }

/* === FORM GROUPS =========================================== */
.sf-group { margin-bottom: 22px; }
.sf-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.sf-recipients-count {
  background: var(--teal-muted); color: var(--teal-500); border: 1px solid rgba(124,58,237,.25);
  padding: 2px 9px; border-radius: 50px; font-size: .72rem; font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.sf-hint { font-size: .78rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.sf-error {
  font-size: .8rem; color: #dc3545; margin-top: 6px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(220,53,69,.06); border: 1px solid rgba(220,53,69,.2);
  padding: 8px 12px; border-radius: 8px;
}

/* === SENDER DISPLAY FIELD ================================== */
.sf-display-field {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #d0dae8; border-radius: var(--radius-md);
  padding: 13px 16px; position: relative;
}
.sf-anon-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,var(--teal-500),var(--teal-400));
  flex-shrink: 0;
}
.sf-display-value { flex: 1; font-weight: 600; color: var(--text-dark); font-size: .95rem; }
.sf-lock-badge {
  font-size: .72rem; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2);
  color: var(--teal-500); padding: 3px 9px; border-radius: 50px; font-weight: 600;
}

/* === RECIPIENT ROWS ======================================== */
.sf-recipient-row {
  display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
}
.sf-phone-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #d0dae8; border-radius: var(--radius-md);
  padding: 11px 14px; transition: border-color .2s, box-shadow .2s;
}
.sf-phone-wrap:focus-within { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.sf-phone-wrap.valid   { border-color: #22c55e; }
.sf-phone-wrap.invalid { border-color: #ef4444; }
.sf-flag { font-size: 1.1rem; flex-shrink: 0; }
.sf-phone-inp {
  flex: 1; border: none; background: none; font-family: var(--font-body);
  font-size: .95rem; color: var(--text-dark); outline: none;
}
.sf-phone-inp::placeholder { color: #b0c4d8; }
.sf-vstatus { flex-shrink: 0; width: 20px; text-align: center; font-size: .9rem; }
.sf-vstatus.valid { color: #22c55e; }
.sf-vstatus.invalid { color: #ef4444; }
.sf-del-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  color: #ef4444; font-size: 1.1rem; display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all .2s;
}
.sf-del-btn:hover { background: rgba(239,68,68,.15); }

/* === ADD RECIPIENT BUTTON ================================== */
.sf-add-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 16px; border-radius: var(--radius-md);
  border: 1.5px dashed #c4d4e5; background: rgba(124,58,237,.03);
  color: var(--teal-500); font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: all .2s; justify-content: center; margin-top: 4px;
}
.sf-add-btn:hover { border-color: var(--teal-500); background: rgba(124,58,237,.07); }

/* === TEXTAREA ============================================== */
.sf-textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid #d0dae8;
  border-radius: var(--radius-md); background: #fff; font-family: var(--font-body);
  font-size: .95rem; color: var(--text-dark); resize: vertical; min-height: 110px;
  transition: border-color .2s, box-shadow .2s; line-height: 1.6;
}
.sf-textarea::placeholder { color: #b0c4d8; }
.sf-textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.sf-charcount { font-size: .78rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* === AI KREATOR ============================================ */
  display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
/* === DISCOUNT ============================================== */
.sf-discount-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px; background: rgba(124,58,237,.04);
  border: 1px dashed rgba(124,58,237,.3); border-radius: var(--radius-md);
  color: var(--text-muted); font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.sf-discount-toggle:hover { border-color: var(--teal-500); color: var(--teal-500); background: rgba(124,58,237,.08); }
.sf-discount-row { display: flex; gap: 9px; }
.sf-discount-input {
  flex: 1; padding: 11px 14px; font-family: var(--font-display); font-size: .9rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid #d0dae8; border-radius: var(--radius-md); background: #fff;
  color: var(--text-dark); transition: border-color .2s, box-shadow .2s;
}
.sf-discount-input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.sf-discount-input::placeholder { opacity: .5; }
.sf-apply-btn {
  padding: 11px 18px; background: linear-gradient(135deg,var(--teal-500),var(--teal-400));
  border: none; border-radius: var(--radius-md); color: var(--navy-900);
  font-family: var(--font-display); font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.sf-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.4); }
.sf-discount-status { margin-top: 8px; padding: 9px 13px; border-radius: 8px; font-size: .84rem; }
.sf-discount-status.ok  { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25); color: #5b21b6; }
.sf-discount-status.err { background: rgba(220,53,69,.08); border: 1px solid rgba(220,53,69,.25); color: #dc3545; }

/* === PRICE BOX ============================================= */
.sf-price-box {
  background: var(--bg-page); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 18px;
}
.sf-price-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .87rem; color: var(--text-muted); padding: 3px 0;
}
.sf-savings-row { color: var(--teal-500); }
.sf-price-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; color: var(--navy-800); font-size: .95rem;
  padding-top: 10px; margin-top: 8px; border-top: 1.5px solid var(--border-light);
}
.sf-price-total { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--navy-800); }
.sf-price-total.is-free {
  background: linear-gradient(135deg,var(--teal-500),var(--teal-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* === TERMS ================================================= */
.sf-terms-label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: .84rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px;
}
.sf-terms-label a { color: var(--teal-500); text-decoration: underline; }
.sf-checkbox { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; accent-color: var(--teal-500); }

/* === SUBMIT ================================================ */
.sf-submit {
  width: 100%; padding: 16px 24px; border-radius: var(--radius-md); border: none;
  background: linear-gradient(135deg,var(--orange-500),var(--orange-400)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 20px var(--orange-glow); transition: all .25s var(--ease-spring);
  position: relative; overflow: hidden; margin-bottom: 14px;
}
.sf-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--orange-glow); }
.sf-submit.loading { color: transparent; pointer-events: none; }
.sf-submit.loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
.sf-secure-note { text-align: center; font-size: .76rem; color: var(--text-muted); line-height: 1.6; }

/* === PHONE MOCKUP ========================================== */
.sender-preview-col { position: sticky; top: calc(var(--offset) + 24px); }
.phone-mockup-wrap  { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 20px; }

.phone-mockup {
  width: 280px; height: 560px; flex-shrink: 0;
  /* Jaśniejsza ramka telefonu — widoczna na ciemnym tle */
  background: #0d0520;
  border-radius: 44px;
  border: 9px solid #3730a3;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),   /* Outer highlight */
    0 0 0 2px rgba(0,0,0,.8),           /* Separation */
    0 50px 100px rgba(0,0,0,.7),        /* Deep shadow */
    0 0 60px rgba(124,58,237,.12),       /* Teal glow */
    inset 0 1px 0 rgba(255,255,255,.08);/* Top sheen */
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}

.phone-notch-area {
  display: flex; justify-content: center; padding-top: 10px; flex-shrink: 0;
}
.phone-notch {
  width: 96px; height: 26px; background: #0d0520;
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

.phone-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 18px 8px; flex-shrink: 0;
}

.phone-chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; flex-shrink: 0;
  background: rgba(124,58,237,.1);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.phone-avatar-wrap { position: relative; }
.phone-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal-500), #5b21b6);
  border: 2px solid rgba(124,58,237,.5);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: .9rem;
  box-shadow: 0 0 10px rgba(124,58,237,.3);
}
.phone-avatar-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ade80; border: 1.5px solid var(--navy-900);
}
.phone-contact-name { font-size: .78rem; font-weight: 700; color: #fff; }
.phone-contact-sub  { font-size: .6rem; color: rgba(255,255,255,.45); }

.phone-chat-area {
  flex: 1; padding: 14px 14px 10px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Jaśniejsze tło ekranu — widoczne na ciemnym tle hero */
  background: linear-gradient(180deg, #160b30 0%, #100722 100%);
}
.phone-bubble-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.phone-bubble {
  max-width: 84%;
  background: linear-gradient(135deg, #6d28d9, var(--teal-500)); /* Wyraźny gradient zamiast zmiennej */
  color: #002e26;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  font-size: .76rem; line-height: 1.55; word-break: break-word;
  box-shadow: 0 4px 16px rgba(124,58,237,.45), 0 1px 3px rgba(0,0,0,.3);
  transition: opacity .3s, font-style .2s;
}
.phone-time-label {
  text-align: right; font-size: .55rem; color: rgba(255,255,255,.4); margin-top: 4px;
}
.phone-delivery-status { text-align: right; margin-top: 3px; }

.phone-home-bar {
  height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(255,255,255,.02);
}
.phone-home-bar::after {
  content: ''; width: 100px; height: 4px;
  background: rgba(255,255,255,.3); border-radius: 2px;
}

.phone-preview-label {
  font-size: .8rem; color: var(--text-muted); font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}

/* === TRUST BOX V2 ========================================== */
.trust-box-v2 {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 14px;
}
.trust-box-v2__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid #f0f4f8;
}
.trust-box-v2__item:last-child { padding-bottom: 0; border-bottom: none; }
.trust-box-v2__icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.trust-box-v2__item div { display: flex; flex-direction: column; gap: 2px; }
.trust-box-v2__item strong { font-size: .88rem; color: var(--navy-800); font-weight: 700; }
.trust-box-v2__item span  { font-size: .78rem; color: var(--text-muted); }

/* === RESPONSIVE SENDER PAGE ================================ */
@media (max-width: 1100px) {
  .sender-layout { grid-template-columns: 1fr 360px; gap: 36px; }
  .phone-mockup  { width: 240px; height: 480px; }
}
@media (max-width: 900px) {
  .sender-layout { grid-template-columns: 1fr; }
  .sender-preview-col { position: static; display: flex; gap: 20px; align-items: flex-start; }
  .phone-mockup-wrap { margin-bottom: 0; flex: 0 0 auto; }
  .phone-mockup  { width: 200px; height: 400px; border-radius: 36px; border-width: 6px; }
  .trust-box-v2  { flex: 1; }
}
@media (max-width: 640px) {
  .sender-preview-col { flex-direction: column; align-items: center; }
  .phone-mockup  { width: 240px; height: 460px; }
  .trust-box-v2  { width: 100%; }
  .tg-pill { font-size: .74rem; }
  .sender-title  { font-size: clamp(1.7rem,5vw,2.2rem); }
}

/* ============================================================
   HERO NEW – phone mockup + mini form layout
   ============================================================ */
.hero--new { padding: 60px 0 70px; align-items: start; }
.hero-new__grid {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 60px; align-items: center;
}
.hero-new__left  { display: flex; flex-direction: column; }
.hero-new__right { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-phone-label { font-size: .8rem; color: rgba(255,255,255,.45); }
.hero-phone-mockup .phone-mockup { width: 260px; height: 510px; }

/* Quick form */
.hero-quick-form {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl); padding: 24px;
  backdrop-filter: blur(10px);
}
.hero-quick-form__inner { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.hqf-label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px; display: block; }
.hqf-group { display: flex; flex-direction: column; }
.hqf-textarea {
  padding: 11px 14px; border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md); background: rgba(255,255,255,.07);
  color: #fff; font-family: var(--font-body); font-size: .93rem; resize: none;
  transition: border-color .2s, box-shadow .2s; line-height: 1.55;
}
.hqf-textarea::placeholder { color: rgba(255,255,255,.3); }
.hqf-textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.hqf-phone-wrap {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--radius-md);
  background: rgba(255,255,255,.07); transition: border-color .2s, box-shadow .2s;
}
.hqf-phone-wrap:focus-within,
.hqf-phone-wrap.valid { border-color: #22c55e; }
.hqf-phone-inp { flex: 1; background: none; border: none; color: #fff; font-family: var(--font-body); font-size: .93rem; outline: none; }
.hqf-phone-inp::placeholder { color: rgba(255,255,255,.3); }
.hqf-vstatus { width: 18px; }
.hqf-price-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; color: rgba(255,255,255,.5);
}
.hqf-tg-link { color: #5ab8ff; font-weight: 600; text-decoration: none; }
.hqf-tg-link:hover { text-decoration: underline; }
.hqf-submit {
  display: block; text-align: center; padding: 14px 20px;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400));
  color: #fff; border-radius: var(--radius-md); font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; box-shadow: 0 4px 20px var(--orange-glow);
  transition: all .25s var(--ease-spring); text-decoration: none;
}
.hqf-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--orange-glow); }
.hqf-note { text-align: center; font-size: .73rem; color: rgba(255,255,255,.4); line-height: 1.6; }

/* Responsive new hero */
@media (max-width: 920px) {
  .hero-new__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-new__right { flex-direction: row; justify-content: center; }
  .hero-phone-mockup .phone-mockup { width: 220px; height: 430px; }
}
@media (max-width: 600px) {
  .hero-new__right { flex-direction: column; }
  .hero-phone-mockup .phone-mockup { width: 240px; height: 460px; }
}

/* ============================================================
   HOME HERO WITH FORM + TIER PRICING
   ============================================================ */
.home-hero {
  background: var(--navy-900); padding: 56px 0 68px;
  position: relative; overflow: clip;
}
.home-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 70% at 75% 50%, rgba(124,58,237,.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 85%, rgba(255,107,53,.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 0%,  rgba(30,58,110,.6) 0%, transparent 70%);
}
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  gap: 52px; align-items: center; position: relative; z-index: 1;
}
.home-hero__title {
  font-family: var(--font-display); font-size: clamp(2rem,4vw,3.2rem);
  font-weight: 800; line-height: 1.1; color: #fff; margin-bottom: 10px;
}
.home-hero__title-accent {
  background: linear-gradient(135deg,var(--orange-500),var(--orange-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.home-hero__sub { font-size: .88rem; color: rgba(255,255,255,.45); margin-bottom: 28px; }
.home-hero__phone-col {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  position: sticky; top: calc(var(--offset) + 16px); width: 380px;
}
.home-hero__phone-col .phone-mockup { width: 280px; height: 540px; flex-shrink: 0; }

/* Tier banner in form */
.tier-banner {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(124,58,237,.04); border: 1px solid rgba(124,58,237,.15);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 12px; overflow: hidden;
}
.tier-banner__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px; border-radius: 8px; transition: all .3s; flex-shrink: 0;
}
.tier-banner__item--base .tier-price { font-weight: 800; color: var(--navy-800); }
.tier-banner__item--active { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.3); }
.tier-pos   { font-size: .68rem; color: var(--text-muted); font-weight: 600; }
.tier-price { font-size: .85rem; font-weight: 700; color: var(--navy-800); font-family: var(--font-display); }
.tier-disc  { font-size: .68rem; font-weight: 700; color: var(--teal-500); background: rgba(124,58,237,.1); padding: 1px 5px; border-radius: 4px; }
.tier-disc--hot { color: #f97316; background: rgba(249,115,22,.1); }
.tier-sep   { color: rgba(0,0,0,.2); font-size: .7rem; flex-shrink: 0; }

/* Inline tier discount in price rows */
.sf-tier-disc-inline {
  font-size: .7rem; font-weight: 700; color: var(--teal-500);
  background: rgba(124,58,237,.1); padding: 1px 5px; border-radius: 4px; margin-left: 4px;
}

/* Tier label hint */
.tier-label-hint {
  font-size: .75rem; font-weight: 700; color: var(--teal-500);
  background: rgba(124,58,237,.1); padding: 3px 8px; border-radius: 50px;
  margin-left: 6px; letter-spacing: 0; text-transform: none;
}

/* Hero savings box */
.hero-savings-box {
  background: rgba(255,255,255,.05); border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg); padding: 18px; width: 250px;
}
.hero-savings-box__title { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 12px; }
.hero-savings-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: .78rem;
}
.hero-savings-row--hot .hero-savings-price { color: var(--teal-400); }
.hero-savings-pos   { color: rgba(255,255,255,.5); width: 36px; flex-shrink: 0; font-size: .72rem; }
.hero-savings-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.hero-savings-bar { height: 100%; background: linear-gradient(90deg,var(--teal-500),var(--teal-400)); border-radius: 3px; transition: width .6s var(--ease); }
.hero-savings-price { color: rgba(255,255,255,.8); font-weight: 700; width: 52px; text-align: right; flex-shrink: 0; font-size: .78rem; }
.hero-savings-disc  { font-size: .68rem; font-weight: 800; color: var(--teal-400); background: rgba(124,58,237,.12); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }

/* Tier table on landing */
.tier-table { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.tier-row {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border-dark);
  border-radius: var(--radius-md); padding: 14px 20px; transition: all .3s;
}
.tier-row--hot { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.2); }
.tier-row:hover { border-color: rgba(124,58,237,.3); transform: translateX(4px); }
.tier-row__pos   { width: 80px; flex-shrink: 0; font-weight: 700; color: var(--text-secondary); font-size: .9rem; }
.tier-row__bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.tier-row__bar { height: 100%; background: linear-gradient(90deg,var(--teal-500),var(--teal-400)); border-radius: 4px; }
.tier-row__price { width: 70px; text-align: right; flex-shrink: 0; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.05rem; }
.tier-row__label { width: 100px; flex-shrink: 0; text-align: right; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.tier-row__label--hot { color: var(--teal-400); }

/* ============================================================
   PREVIEW / PODGLAD PAGE
   ============================================================ */
.preview-page { background: var(--bg-page); padding: 0 0 80px; min-height: calc(100vh - var(--offset)); }
.preview-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; padding-top: 36px; }
.preview-left { display: flex; flex-direction: column; gap: 20px; }

/* Header */
.preview-header {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 20px 24px; box-shadow: var(--shadow-card);
  border-left: 4px solid #22c55e;
}
.preview-header__icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.preview-header__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--navy-800); margin-bottom: 4px; }
.preview-header__sub   { font-size: .85rem; color: var(--text-muted); }

/* Cards */
.preview-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-card);
}
.preview-card__title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--navy-800); margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-page);
}

/* SMS rows */
.preview-sms-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bg-page);
}
.preview-sms-row:last-of-type { border-bottom: none; }
.preview-sms-row__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.preview-sms-flag  { font-size: 1.1rem; flex-shrink: 0; }
.preview-sms-phone { font-weight: 700; color: var(--navy-800); font-size: .92rem; }
.preview-sms-label { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.preview-sms-row__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.preview-tier-badge {
  font-size: .7rem; font-weight: 800; background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.25); color: var(--teal-500);
  padding: 2px 7px; border-radius: 50px;
}
.preview-price-old { font-size: .78rem; color: var(--text-muted); text-decoration: line-through; }
.preview-price { font-family: var(--font-display); font-weight: 800; font-size: .98rem; color: var(--navy-800); }
.preview-savings-row .preview-price { color: var(--teal-500); }

.preview-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; margin-top: 4px; font-weight: 700; font-size: .95rem; color: var(--navy-800);
}
.preview-total-amount { font-family: var(--font-display); font-size: 1.15rem; }

/* Delivery options */
.delivery-option {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border-light);
  margin-bottom: 10px; transition: all .2s; cursor: default;
}
.delivery-option:last-child { margin-bottom: 0; }
.delivery-option--active { border-color: var(--teal-500); background: rgba(124,58,237,.03); }
.delivery-option--disabled { opacity: .55; cursor: not-allowed; }
.delivery-option__icon { font-size: 1.3rem; flex-shrink: 0; }
.delivery-option__body { flex: 1; }
.delivery-option__name { font-weight: 700; font-size: .9rem; color: var(--navy-800); display: flex; align-items: center; gap: 8px; }
.delivery-option__desc { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.delivery-option__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.delivery-option__price { font-weight: 700; color: var(--navy-800); font-size: .92rem; }
.soon-badge { font-size: .65rem; background: rgba(249,115,22,.1); color: #f97316; padding: 2px 7px; border-radius: 50px; font-weight: 700; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #ddd6fe; border-radius: 26px; transition: .3s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--teal-500); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Grand total */
.preview-grand-total {
  background: var(--bg-page); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 18px 22px;
}
.preview-grand-total__row {
  display: flex; justify-content: space-between; font-size: .88rem;
  color: var(--text-muted); padding: 3px 0; margin-bottom: 2px;
}
.preview-grand-total__final {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 1.05rem; color: var(--navy-800);
  padding-top: 12px; margin-top: 8px; border-top: 2px solid var(--border-light);
}
.preview-grand-final-val { font-family: var(--font-display); font-size: 1.4rem; }
.preview-grand-final-val.is-free {
  background: linear-gradient(135deg,var(--teal-500),var(--teal-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.free-label { color: var(--teal-500); font-family: var(--font-display); font-weight: 800; }

/* Payment */
.payment-methods { margin-bottom: 16px; }
.payment-method {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border-light);
  cursor: pointer; transition: all .2s;
}
.payment-method--active { border-color: var(--teal-500); background: rgba(124,58,237,.03); }
.payment-method__logo { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-page); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.payment-method__name { font-weight: 700; font-size: .9rem; color: var(--navy-800); }
.payment-method__sub  { font-size: .75rem; color: var(--text-muted); }

/* Pay buttons */
.pay-btn {
  width: 100%; padding: 15px 20px; border: none; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: all .25s var(--ease-spring); position: relative; overflow: hidden;
}
.pay-btn--stripe {
  background: linear-gradient(135deg,var(--orange-500),var(--orange-400)); color: #fff;
  box-shadow: 0 4px 20px var(--orange-glow);
}
.pay-btn--stripe:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--orange-glow); }
.pay-btn--free {
  background: linear-gradient(135deg,var(--teal-500),var(--teal-400)); color: var(--navy-900);
  box-shadow: 0 4px 20px rgba(124,58,237,.35);
}
.pay-btn--free:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,.45); }
.pay-btn.loading { color: transparent; pointer-events: none; }
.pay-btn.loading::after {
  content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
}

/* Telegram remind + back link */
.preview-tg-remind {
  display: flex; align-items: center; gap: 8px;
  background: rgba(26,115,200,.06); border: 1px solid rgba(78,173,255,.2);
  border-radius: var(--radius-md); padding: 12px 16px; font-size: .82rem; color: var(--text-muted);
}
.preview-back-link {
  display: inline-block; font-size: .85rem; color: var(--text-muted); text-decoration: none;
  transition: color .2s; padding: 4px 0;
}
.preview-back-link:hover { color: var(--teal-500); }

/* Right column: phone + recipients */
.preview-right { position: sticky; top: calc(var(--offset) + 20px); display: flex; flex-direction: column; gap: 18px; }
.preview-phone-wrap .phone-mockup { width: 260px; height: 500px; }
.preview-phone-wrap { display: flex; justify-content: center; }
.preview-recipients-box {
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-card);
}
.preview-recipients-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }
.preview-recipient-item { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--navy-800); font-weight: 600; padding: 5px 0; border-bottom: 1px solid var(--bg-page); }
.preview-recipient-item:last-child { border-bottom: none; }

/* Phone delivery status */
.phone-delivery-status { text-align: right; margin-top: 4px; }

/* Responsive */
@media (max-width: 1100px) {
  .home-hero__grid { grid-template-columns: 1fr 280px; gap: 36px; }
  .home-hero__phone-col .phone-mockup { width: 220px; height: 430px; }
  .hero-savings-box { width: 220px; }
  .preview-layout { grid-template-columns: 1fr 280px; gap: 24px; }
  .preview-phone-wrap .phone-mockup { width: 230px; height: 450px; }
}
@media (max-width: 900px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__phone-col { flex-direction: row; justify-content: center; position: static; flex-wrap: wrap; }
  .home-hero__phone-col .phone-mockup { width: 200px; height: 390px; }
  .hero-savings-box { width: 200px; }
  .preview-layout { grid-template-columns: 1fr; }
  .preview-right { position: static; flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .preview-phone-wrap { flex: 0 0 auto; }
  .preview-phone-wrap .phone-mockup { width: 200px; height: 390px; }
  .preview-recipients-box { flex: 1; min-width: 180px; }
}
@media (max-width: 640px) {
  .home-hero__phone-col { flex-direction: column; }
  .home-hero__phone-col .phone-mockup { width: 230px; height: 430px; }
  .hero-savings-box { width: 100%; max-width: 300px; }
  .preview-right { flex-direction: column; align-items: center; }
  .preview-phone-wrap .phone-mockup { width: 230px; height: 440px; }
  .tier-banner { overflow-x: auto; flex-wrap: nowrap; }
  .tier-row { padding: 12px 14px; }
  .tier-row__pos { width: 60px; font-size: .8rem; }
  .tier-row__label { width: 80px; font-size: .75rem; }
}

/* ============================================================
   HERO PHONE DEVICE + TIER BOX – standalone bulletproof v2
   ============================================================ */

/* Device wrapper with glow */
.hero-phone-device {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-phone-glow {
  position: absolute;
  width: 300px;
  height: 500px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(124,58,237,.25) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 50% 80%, rgba(124,58,237,.12) 0%, transparent 60%);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 0;
  animation: phoneGlow 4s ease-in-out infinite alternate;
}
@keyframes phoneGlow {
  from { opacity: .7; }
  to   { opacity: 1; }
}
.hero-phone-device .phone-mockup {
  position: relative;
  z-index: 1;
  width: 270px !important;
  height: 520px !important;
  flex-shrink: 0 !important;
}

/* Caption below phone */
.hero-phone-caption {
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  text-align: center;
  letter-spacing: .02em;
}

/* Tier pricing box */
.hero-tier-box {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  backdrop-filter: blur(8px);
}
.hero-tier-box__header {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero-tier-row:last-child { border-bottom: none; }
.hero-tier-row--hot .hero-tier-price { color: var(--teal-400); }

.hero-tier-num {
  width: 28px;
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
}
.hero-tier-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.hero-tier-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-400));
  border-radius: 3px;
  transition: width .6s var(--ease);
}
.hero-tier-price {
  width: 48px;
  text-align: right;
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  font-family: var(--font-display);
}
.hero-tier-badge {
  flex-shrink: 0;
  font-size: .65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 44px;
  text-align: center;
  background: rgba(124,58,237,.12);
  color: var(--teal-400);
  border: 1px solid rgba(124,58,237,.2);
}
.hero-tier-badge--base {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.35);
  border-color: rgba(255,255,255,.08);
}
.hero-tier-badge--fire {
  background: rgba(249,115,22,.12);
  color: #fb923c;
  border-color: rgba(249,115,22,.2);
}

/* ---- Responsive fixes for phone col ---- */
@media (max-width: 1100px) {
  .home-hero__grid { grid-template-columns: minmax(0,1fr) 270px; gap: 32px; }
  .home-hero__phone-col { width: 270px; }
  .hero-phone-device .phone-mockup { width: 230px !important; height: 450px !important; }
}
@media (max-width: 900px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__phone-col {
    width: 100%;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }
  .hero-phone-device .phone-mockup { width: 220px !important; height: 430px !important; }
  .hero-tier-box { max-width: 300px; flex: 0 0 300px; }
  .hero-phone-caption { width: 220px; }
}
@media (max-width: 560px) {
  .home-hero__phone-col { flex-direction: column; align-items: center; }
  .hero-phone-device .phone-mockup { width: 240px !important; height: 460px !important; }
  .hero-tier-box { max-width: 100%; flex: none; width: 100%; }
}

/* ============================================================
   HERO FORM COLUMN – white card on dark hero
   ============================================================ */
.home-hero__form-col {
  /* Biała karta wyróżniająca formularz na ciemnym tle */
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.2);
}
/* Dostosuj kolory labeli i tekstów do białego tła karty */
.home-hero__form-col .sf-label {
  color: var(--text-muted);
}
.home-hero__form-col .home-hero__title,
.home-hero__form-col .home-hero__sub,
.home-hero__form-col .tg-pill {
  /* Resetuj kolory jeśli pill jest wewnątrz karty */
}
.home-hero__form-col .home-hero__title { color: var(--navy-800) !important; }
.home-hero__form-col .home-hero__title .home-hero__title-accent {
  background: linear-gradient(135deg,var(--orange-500),var(--orange-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.home-hero__form-col .home-hero__sub { color: var(--text-muted) !important; }
.home-hero__form-col .tg-pill { color: #1a73c8; }
.home-hero__form-col .sf-secure-note { color: var(--text-muted); }
.home-hero__form-col .sf-hint { color: var(--text-muted); }
.home-hero__form-col .sf-charcount { color: var(--text-muted); }

/* Tier banner na białym tle */
.home-hero__form-col .tier-banner {
  background: rgba(124,58,237,.06);
  border-color: rgba(124,58,237,.2);
}
.home-hero__form-col .tier-price { color: var(--navy-800); }
.home-hero__form-col .tier-sep   { color: rgba(0,0,0,.15); }

/* Price box na białym tle */
.home-hero__form-col .sf-price-box {
  background: var(--bg-page);
  border-color: var(--border-light);
}
.home-hero__form-col .sf-price-total-row { border-color: var(--border-light); }

/* Discount toggle na białym tle */
.home-hero__form-col .sf-discount-toggle {
  background: rgba(124,58,237,.04);
  border-color: rgba(124,58,237,.25);
  color: var(--text-muted);
}

/* AI label na białym tle */

/* Responsive card */
@media (max-width: 900px) {
  .home-hero__form-col {
    padding: 28px 22px;
    border-radius: var(--radius-lg);
  }
}
@media (max-width: 560px) {
  .home-hero__form-col { padding: 22px 16px; }
}

/* ============================================================
   FINAL RESPONSIVE OVERRIDES – hero phone (nadpisuje wcześniejsze)
   ============================================================ */
@media (min-width: 901px) {
  .home-hero__grid { grid-template-columns: minmax(0,1fr) 380px !important; }
  .home-hero__phone-col { width: 380px !important; position: sticky !important; top: calc(var(--offset) + 16px) !important; }
  .hero-phone-device .phone-mockup { width: 280px !important; height: 530px !important; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .home-hero__grid { grid-template-columns: minmax(0,1fr) 320px !important; }
  .home-hero__phone-col { width: 320px !important; }
  .hero-phone-device .phone-mockup { width: 250px !important; height: 480px !important; }
}
@media (max-width: 900px) {
  .home-hero__grid { grid-template-columns: 1fr !important; }
  .home-hero__phone-col {
    width: 100% !important; position: static !important;
    flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: flex-start !important;
  }
  .hero-phone-device .phone-mockup { width: 240px !important; height: 460px !important; }
  .hero-tier-box { max-width: 280px; flex: 0 0 280px; }
}
@media (max-width: 580px) {
  .home-hero__phone-col { flex-direction: column !important; align-items: center !important; }
  .hero-tier-box { max-width: 100%; flex: none; width: 100%; }
  .hero-phone-device .phone-mockup { width: 250px !important; height: 480px !important; }
}

/* ============================================================
   PURPLE THEME – Global overrides & refinements
   ============================================================ */

/* === BODY / PAGE =========================================== */
body { color: var(--text-dark); background: var(--bg-page); }

/* === NAVBAR ================================================ */
.navbar {
  background: rgba(13,5,32,.92);
  border-bottom-color: rgba(255,255,255,.08);
}
.navbar.scrolled { background: rgba(13,5,32,.98); }
.logo-icon { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.logo-text strong { color: #a78bfa; }
.logo-text em { color: rgba(196,181,253,.6); }
.nav-link { color: #c4b5fd; }
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(167,139,250,.12); }

/* === HERO DARK SECTIONS ==================================== */
.home-hero       { background: var(--navy-900); }
.section-how     { background: var(--navy-900); }
.section-pricing { background: var(--navy-900); }
.section-cta     { background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); }
.stats-bar       { background: var(--navy-800); border-color: rgba(255,255,255,.08); }
.footer          { background: var(--navy-900); }
.breadcrumbs     { background: var(--navy-800); border-color: rgba(255,255,255,.08); }
.preview-page    { background: var(--bg-page); }

/* Hero gradient overlay */
.home-hero::before {
  background:
    radial-gradient(ellipse 80% 70% at 75% 50%, rgba(124,58,237,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 85%, rgba(255,107,53,.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 0%,  rgba(55,20,140,.7) 0%, transparent 70%);
}
.section-cta::before {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(124,58,237,.10), transparent);
}

/* === BUTTONS =============================================== */
.btn--teal {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 18px rgba(124,58,237,.35);
}
.btn--teal:hover { box-shadow: 0 8px 28px rgba(124,58,237,.5); }
.btn--outline { border-color: rgba(167,139,250,.3); color: #a78bfa; }
.btn--outline:hover { border-color: #8b5cf6; color: #8b5cf6; }

/* === SECTION TAGS ========================================== */
.section-tag {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.25);
  color: #a78bfa;
}
.section-tag--light {
  background: rgba(124,58,237,.07);
  border-color: rgba(124,58,237,.18);
  color: #7c3aed;
}

/* === FEATURE CARDS (light bg) ============================= */
.feature-card::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.feature-icon {
  background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.04));
  border-color: rgba(124,58,237,.2);
}
.feature-title { color: var(--navy-800); }

/* === STEP CARDS (dark bg) ================================= */
.step-number {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-500));
  border-color: #7c3aed;
  color: #a78bfa;
  box-shadow: 0 0 18px rgba(124,58,237,.25);
}

/* === PRICING CARD ========================================= */
.pricing-card::before { background: linear-gradient(90deg, #7c3aed, var(--orange-500)); }
.pricing-badge {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.3);
  color: #a78bfa;
}
.pricing-features .check { color: #a78bfa; }

/* === FAQ ================================================== */
.faq-question:hover  { color: #7c3aed; }
.faq-item.open .faq-chevron { color: #7c3aed; }

/* === TESTIMONIALS ========================================= */
.testimonial-card::before { color: #8b5cf6; }
.testimonial-avatar { background: linear-gradient(135deg, #7c3aed, var(--navy-500)); }

/* === FORM CONTROLS ======================================== */
.sf-display-field { background: #fff; border-color: #e5deff; }
.sf-anon-dot      { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.sf-lock-badge    { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.2); color: #7c3aed; }
.sf-phone-wrap    { background: #fff; border-color: #e5deff; }
.sf-phone-wrap:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.sf-phone-wrap.valid        { border-color: #22c55e; }
.sf-textarea { background: #fff; border-color: #e5deff; color: var(--text-dark); }
.sf-textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.sf-add-btn {
  border-color: rgba(124,58,237,.3);
  background: rgba(124,58,237,.03);
  color: #7c3aed;
}
.sf-add-btn:hover { border-color: #7c3aed; background: rgba(124,58,237,.08); }
.sf-apply-btn { background: linear-gradient(135deg, #7c3aed, #8b5cf6); color: #fff; }
.sf-apply-btn:hover { box-shadow: 0 4px 14px rgba(124,58,237,.45); }
.sf-discount-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.sf-discount-status.ok { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.2); color: #5b21b6; }
.sf-discount-toggle {
  border-color: rgba(124,58,237,.25);
  background: rgba(124,58,237,.03);
  color: var(--text-muted);
}
.sf-discount-toggle:hover { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,.07); }

/* AI buttons */

/* Price rows */
.sf-price-total.is-free {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sf-savings-row { color: #7c3aed; }

/* Submit button */
/* CTA stays orange - best contrast with purple */

/* === PHONE MOCKUP PURPLE THEME ============================ */
.phone-mockup {
  background: var(--navy-900);
  border-color: #3730a3;
  box-shadow:
    0 0 0 1px rgba(167,139,250,.25),
    0 0 0 2px rgba(0,0,0,.8),
    0 50px 100px rgba(0,0,0,.65),
    0 0 70px rgba(124,58,237,.2),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.phone-notch { background: var(--navy-900); }
.phone-chat-header {
  background: rgba(124,58,237,.12);
  border-bottom-color: rgba(255,255,255,.07);
}
.phone-avatar {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-color: rgba(167,139,250,.5);
  box-shadow: 0 0 10px rgba(124,58,237,.4);
}
.phone-chat-area {
  background: linear-gradient(180deg, #130830 0%, #0d0520 100%);
}
.phone-bubble {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,.5), 0 1px 3px rgba(0,0,0,.3);
}
.phone-home-bar::after { background: rgba(167,139,250,.3); }

/* Hero phone glow */
.hero-phone-glow {
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(124,58,237,.3) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 50% 80%, rgba(124,58,237,.15) 0%, transparent 60%);
}
@keyframes phoneGlow {
  from { opacity: .6; }
  to   { opacity: 1;  }
}

/* === TIER ELEMENTS ======================================== */
.tier-disc      { color: #7c3aed; background: rgba(124,58,237,.1); }
.tier-disc--hot { color: #f97316; background: rgba(249,115,22,.1); }
.tier-banner__item--active {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.3);
}
.hero-tier-fill { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.hero-tier-badge { background: rgba(124,58,237,.1); color: #a78bfa; border-color: rgba(124,58,237,.2); }
.hero-tier-badge--fire { background: rgba(249,115,22,.1); color: #fb923c; border-color: rgba(249,115,22,.2); }
.tier-row__bar { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.tier-row--hot { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.2); }
.tier-row:hover { border-color: rgba(124,58,237,.35); }
.tier-row__label--hot { color: #a78bfa; }
.sf-tier-disc-inline { color: #7c3aed; background: rgba(124,58,237,.1); }

/* === PREVIEW / PODGLAD ==================================== */
.preview-header { border-left-color: #7c3aed; }
.preview-tier-badge { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.2); color: #7c3aed; }
.preview-price-old { color: var(--text-muted); }
.preview-savings-row .preview-price { color: #7c3aed; }
.toggle-switch input:checked + .toggle-slider { background: #7c3aed; }
.delivery-option--active { border-color: #7c3aed; background: rgba(124,58,237,.03); }
.pay-btn--free { background: linear-gradient(135deg, #7c3aed, #8b5cf6); color: #fff; box-shadow: 0 4px 20px rgba(124,58,237,.4); }
.pay-btn--free:hover { box-shadow: 0 8px 28px rgba(124,58,237,.55); }
.payment-method--active { border-color: #7c3aed; background: rgba(124,58,237,.03); }
.preview-grand-final-val.is-free {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* === SUCCESS PAGE ========================================= */
.success-page { background: var(--navy-900); }
.success-icon {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  box-shadow: 0 0 36px rgba(124,58,237,.5);
}

/* === FORM CARD ON DARK HERO =============================== */
.home-hero__form-col .tier-disc   { color: #7c3aed; background: rgba(124,58,237,.1); }
.home-hero__form-col .tier-price  { color: var(--navy-800); }
.home-hero__form-col .tier-banner { background: rgba(124,58,237,.05); border-color: rgba(124,58,237,.18); }

/* === FOOTER =============================================== */
.footer__tg-cta {
  background: linear-gradient(135deg, rgba(26,115,200,.14), rgba(32,148,232,.07));
  border-color: rgba(78,173,255,.22);
}
/* Footer nav links */
.footer__nav a:hover { color: #a78bfa; }

/* === COOKIE BAR / TOAST =================================== */
.cookie-bar { background: var(--navy-700); border-color: rgba(255,255,255,.08); }
.toast { background: var(--navy-700); border-color: rgba(255,255,255,.08); }
.toast--success { border-left-color: #7c3aed; }
.toast--info    { border-left-color: #a78bfa; }

/* === BREADCRUMBS ========================================== */
.breadcrumbs__list a:hover       { color: #a78bfa; }
.breadcrumbs__list li:last-child span,
.breadcrumbs__list li:last-child a { color: #a78bfa; }

/* === QUICK FORM (hero) ===================================== */
.hqf-textarea:focus    { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.hqf-phone-wrap.valid  { border-color: #22c55e; }
.hqf-phone-wrap:focus-within { border-color: #7c3aed; }

/* === TELEGRAM PROMO CARD ================================== */
.tg-promo-code-badge.free { border-color: rgba(124,58,237,.4); color: #a78bfa; }

/* ============================================================
   WHITE SITE OVERRIDE — eliminuje ciemne sekcje
   Navbar + Footer pozostają ciemne. Reszta = biała/jasna.
   ============================================================ */

/* === PAGE BG =============================================== */
body { background: #ffffff; color: #1e1b4b; }

/* === HOME HERO — jasny zamiast ciemnego =================== */
.home-hero {
  background: linear-gradient(145deg, #faf8ff 0%, #f3f0ff 50%, #ede9fe 100%) !important;
  overflow: clip;
}
.home-hero::before {
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(124,58,237,.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(255,107,53,.05) 0%, transparent 55%)
    !important;
}
.home-hero__title { color: #1e1b4b !important; }
.home-hero__sub   { color: #6d5fa6 !important; }

/* === STATS BAR — jasny fiolet ============================= */
.stats-bar {
  background: #f3f0ff !important;
  border-color: rgba(124,58,237,.12) !important;
}
.stat-item__number {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.stat-item__label { color: #6d5fa6 !important; }

/* === HOW IT WORKS — biały ================================= */
.section-how {
  background: #ffffff !important;
}
.section-how .section-title { color: #1e1b4b !important; }
.section-how .section-desc  { color: #4b5563 !important; }
.section-how .section-tag   { background: rgba(124,58,237,.08) !important; border-color: rgba(124,58,237,.2) !important; color: #7c3aed !important; }

.step-card {
  background: #ffffff !important;
  border: 2px solid rgba(124,58,237,.2) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.08) !important;
}
.step-card:hover {
  background: #faf8ff !important;
  border-color: rgba(124,58,237,.45) !important;
  box-shadow: 0 12px 32px rgba(124,58,237,.16) !important;
}
.step-title { color: #1e1b4b !important; font-size:1.05rem !important; }
.step-desc  { color: #4b5563 !important; font-size:.9rem !important; }
.step-icon  { font-size: 1.6rem !important; }
.step-number {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  border-color: #7c3aed !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(124,58,237,.3) !important;
}
.steps-grid::before { background: linear-gradient(90deg, #7c3aed, var(--orange-500)) !important; opacity: .3 !important; }

/* jak-to-dziala subpage – pillar step styles */
.pillar-jak .step-card { text-align: left !important; padding: 28px 24px !important; }
.pillar-jak .step-callout {
  background: #f3f0ff;
  border: 1px solid rgba(124,58,237,.2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: .85rem;
  color: #5b21b6;
  margin-top: 12px;
}

/* === FEATURES — bardzo jasny fiolet ======================= */
.section-features { background: #faf8ff !important; }

/* === PRICING — jasny ===================================== */
.section-pricing {
  background: #f3f0ff !important;
}
.section-pricing .section-title { color: #1e1b4b !important; }
.section-pricing .section-desc  { color: #6d5fa6 !important; }
.pricing-card {
  background: #ffffff !important;
  border-color: rgba(124,58,237,.2) !important;
  box-shadow: 0 8px 40px rgba(124,58,237,.15), 0 2px 8px rgba(124,58,237,.08) !important;
}
.pricing-price, .pricing-currency, .pricing-decimal { color: #1e1b4b !important; }
.pricing-per { color: #6d5fa6 !important; }
.pricing-features li { color: #6d5fa6 !important; border-color: rgba(124,58,237,.1) !important; }

/* === TIER TABLE — jasny =================================== */
.tier-table {}
.tier-row {
  background: #ffffff !important;
  border-color: rgba(124,58,237,.14) !important;
}
.tier-row--hot { background: #faf8ff !important; border-color: rgba(124,58,237,.25) !important; }
.tier-row:hover { border-color: rgba(124,58,237,.4) !important; transform: translateX(4px); }
.tier-row__pos   { color: #6d5fa6 !important; }
.tier-row__price { color: #1e1b4b !important; }
.tier-row__label { color: #9580c1 !important; }
.tier-row__label--hot { color: #7c3aed !important; }

/* === TESTIMONIALS — biały ================================= */
.section-testimonials { background: #ffffff !important; }
.section-testimonials .section-title { color: #1e1b4b !important; }

/* === CTA — jasny fiolet gradient zamiast ciemnego ========= */
.section-cta {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 50%, #ede9fe 100%) !important;
}
.section-cta::before { background: none !important; }
.cta-title { color: #1e1b4b !important; }
.cta-desc  { color: #5b21b6 !important; }
.btn--outline-light {
  border-color: rgba(124,58,237,.4) !important;
  color: #5b21b6 !important;
}
.btn--outline-light:hover {
  border-color: #7c3aed !important;
  background: rgba(124,58,237,.08) !important;
  color: #7c3aed !important;
}

/* === FAQ — bardzo jasny =================================== */
.section-faq { background: #faf8ff !important; }
.section-faq .section-title { color: #1e1b4b !important; }

/* === TELEGRAM PROMO — jasny błękit/fiolet ================= */
/* (sekcja na dark bg — zmieniamy na jasny) */
section[style*="navy-800"] ,
section[style*="background:var(--navy-800)"] {
  background: #f3f0ff !important;
}
.tg-promo-card {
  background: linear-gradient(135deg, rgba(26,115,200,.06), rgba(32,148,232,.03)) !important;
  border-color: rgba(26,115,200,.2) !important;
}
.tg-promo-title { color: #1e1b4b !important; }
.tg-promo-desc  { color: #4b5563 !important; }
.tg-promo-code-badge { color: #1a73c8 !important; border-color: rgba(26,115,200,.25) !important; background: rgba(26,115,200,.06) !important; }
.tg-promo-code-badge.free { color: #7c3aed !important; border-color: rgba(124,58,237,.3) !important; background: rgba(124,58,237,.06) !important; }

/* === BREADCRUMBS — jasny =================================== */
.breadcrumbs {
  background: #f3f0ff !important;
  border-color: rgba(124,58,237,.12) !important;
}
.breadcrumbs__list a { color: #6d5fa6 !important; }
.breadcrumbs__list a:hover { color: #7c3aed !important; }
.breadcrumbs__list li:last-child span { color: #7c3aed !important; }

/* === PAGE HERO (subpages) — jasny ========================= */
.page-hero {
  background: linear-gradient(145deg, #faf8ff, #f3f0ff) !important;
  border-color: rgba(124,58,237,.12) !important;
}
.page-title { color: #1e1b4b !important; }
.page-desc  { color: #6d5fa6 !important; }
.hero__badge {
  background: rgba(124,58,237,.08) !important;
  border-color: rgba(124,58,237,.25) !important;
  color: #7c3aed !important;
}

/* === SENDER PAGE bg ======================================= */
.sender-page { background: #ffffff !important; }

/* === SUCCESS PAGE — jasny ================================= */
.success-page { background: linear-gradient(145deg, #faf8ff, #f3f0ff) !important; }
.success-card {
  background: #ffffff !important;
  border-color: rgba(124,58,237,.2) !important;
  box-shadow: 0 8px 40px rgba(124,58,237,.12) !important;
}
.success-title { color: #1e1b4b !important; }
.success-desc  { color: #6d5fa6 !important; }

/* === FORM CARD ON HERO — adjusted ========================= */
.home-hero__form-col {
  background: #ffffff !important;
  border: 1px solid rgba(124,58,237,.15) !important;
  box-shadow: 0 8px 40px rgba(124,58,237,.12), 0 2px 8px rgba(124,58,237,.08) !important;
}
.home-hero__form-col .home-hero__title { color: #1e1b4b !important; }
.home-hero__form-col .home-hero__sub   { color: #6d5fa6 !important; }

/* === HERO TIER BOX — jasny ================================ */
.hero-tier-box {
  background: #ffffff !important;
  border-color: rgba(124,58,237,.15) !important;
}
.hero-tier-box__header { color: #6d5fa6 !important; }
.hero-tier-num   { color: #9580c1 !important; }
.hero-tier-price { color: #1e1b4b !important; }
.hero-tier-track { background: #ede9fe !important; }

/* === HERO PHONE GLOW — dostosowany do jasłego tła ========== */
.hero-phone-glow {
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(124,58,237,.15) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 50% 80%, rgba(124,58,237,.08) 0%, transparent 60%)
  !important;
}

/* === PHONE MOCKUP na jasnym tle =========================== */
.phone-mockup {
  box-shadow:
    0 0 0 1px rgba(124,58,237,.35),
    0 0 0 2px rgba(124,58,237,.1),
    0 30px 70px rgba(124,58,237,.2),
    0 0 60px rgba(124,58,237,.12),
    inset 0 1px 0 rgba(255,255,255,.1)
  !important;
}

/* === FAQ — jasne tło kart ================================= */
.faq-item { background: #ffffff !important; border-color: rgba(124,58,237,.12) !important; }
.faq-question { color: #1e1b4b !important; }
.faq-answer p { color: #4b5563 !important; }

/* === FOOTER — pozostaje ciemny (jedyna ciemna sekcja) ====== */
/* Footer zostawiamy ciemny fiolet - OK */

/* === COOKIE BAR — jasny ================================== */
.cookie-bar { background: #ffffff !important; border-color: rgba(124,58,237,.2) !important; box-shadow: 0 8px 32px rgba(124,58,237,.15) !important; }
.cookie-bar p { color: #4b5563 !important; }

/* === TOAST — jasny ======================================= */
.toast { background: #ffffff !important; border-color: rgba(124,58,237,.2) !important; color: #1e1b4b !important; box-shadow: 0 4px 20px rgba(124,58,237,.15) !important; }

/* === PODGLAD PAGE — jasny ================================ */
.preview-card { background: #ffffff !important; border-color: rgba(124,58,237,.12) !important; }
.preview-card__title { color: #1e1b4b !important; border-color: #f3f0ff !important; }
.preview-sms-phone  { color: #1e1b4b !important; }
.preview-sms-label  { color: #6d5fa6 !important; }
.preview-price      { color: #1e1b4b !important; }
.preview-header     { background: #ffffff !important; }
.preview-header__title { color: #1e1b4b !important; }
.preview-header__sub   { color: #6d5fa6 !important; }
.preview-grand-total   { background: #faf8ff !important; border-color: rgba(124,58,237,.12) !important; }
.preview-grand-total__row   { color: #6d5fa6 !important; }
.preview-grand-total__final { color: #1e1b4b !important; }
.preview-tg-remind { background: rgba(26,115,200,.04) !important; border-color: rgba(26,115,200,.15) !important; color: #4b5563 !important; }
.preview-back-link { color: #6d5fa6 !important; }
.preview-back-link:hover { color: #7c3aed !important; }
.preview-recipients-box { background: #ffffff !important; border-color: rgba(124,58,237,.12) !important; }
.preview-recipients-title { color: #9580c1 !important; }
.preview-recipient-item { color: #1e1b4b !important; border-color: #f3f0ff !important; }
.delivery-option { border-color: rgba(124,58,237,.14) !important; }
.delivery-option__name { color: #1e1b4b !important; }
.delivery-option__desc { color: #6d5fa6 !important; }
.delivery-option__price { color: #1e1b4b !important; }
.payment-method { border-color: rgba(124,58,237,.15) !important; }
.payment-method__name { color: #1e1b4b !important; }
.payment-method__sub  { color: #6d5fa6 !important; }

/* === INLINE SECTIONS WITH DARK BG IN PHP ================== */
/* Sekcje z inline style="background:var(--navy-*)" */
section[style*="background:var(--navy"],
div[style*="background:var(--navy"],
section[style*="background: var(--navy"] {
  background: #f3f0ff !important;
}
section[style*="background:var(--navy"] .section-title,
section[style*="background: var(--navy"] .section-title { color: #1e1b4b !important; }
section[style*="background:var(--navy"] .section-desc,
section[style*="background: var(--navy"] .section-desc  { color: #6d5fa6 !important; }

/* Sekcja tier table */
section[style*="background:var(--navy-900);padding:var(--section-py)"] { background: #faf8ff !important; }

/* ============================================================
   TRACKING PAGE – sledz.php
   ============================================================ */

.track-page {
  background: #ffffff;
  padding: 48px 0 80px;
  min-height: calc(100vh - var(--offset));
}

/* Header */
.track-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}
.track-header__icon  { font-size: 3rem; margin-bottom: 14px; }
.track-header__title {
  font-family: var(--font-display); font-size: clamp(2rem,4vw,2.8rem);
  font-weight: 800; color: #1e1b4b; margin-bottom: 10px;
}
.track-header__sub { font-size: 1rem; color: #6d5fa6; margin-bottom: 24px; }

/* Free badge */
.track-free-badge {
  display: inline-flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, #f3f0ff, #ede9fe);
  border: 2px solid rgba(124,58,237,.25); border-radius: var(--radius-xl);
  padding: 16px 28px; margin: 0 auto;
}
.track-free-badge__label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #6d5fa6; margin-bottom: 6px;
}
.track-free-badge__prices {
  display: flex; align-items: center; gap: 12px;
}
.track-price-old {
  font-size: 1.1rem; font-weight: 700; color: #9580c1;
  text-decoration: line-through; text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
}
.track-price-free {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.track-free-badge__right {
  display: flex; align-items: center; gap: 10px;
  padding-left: 20px; border-left: 1.5px solid rgba(124,58,237,.2);
}
.track-free-badge__gift { font-size: 1.8rem; }
.track-free-badge__desc { font-size: .82rem; color: #5b21b6; font-weight: 600; line-height: 1.4; }

/* Search card */
.track-search-card {
  background: #ffffff; border: 1px solid rgba(124,58,237,.15);
  border-radius: var(--radius-xl); padding: 32px 36px;
  box-shadow: 0 4px 24px rgba(124,58,237,.1); margin-bottom: 28px;
  max-width: 680px; margin-left: auto; margin-right: auto;
}
.track-search-label {
  display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #6d5fa6; margin-bottom: 10px;
}
.track-search-row {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px;
}
.track-input-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: #faf8ff; border: 1.5px solid rgba(124,58,237,.2);
  border-radius: var(--radius-md); padding: 13px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.track-input-wrap:focus-within {
  border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.track-input-icon { font-size: 1rem; flex-shrink: 0; }
.track-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: #1e1b4b; letter-spacing: .05em;
}
.track-input::placeholder { color: #c4aff0; font-weight: 400; letter-spacing: 0; }
.track-search-btn {
  padding: 13px 24px; background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  border: none; border-radius: var(--radius-md); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(124,58,237,.35);
  transition: all .2s var(--ease-spring);
}
.track-search-btn:hover {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.45);
}
.track-search-hint { font-size: .8rem; color: #9580c1; line-height: 1.5; }
.track-search-hint code { background: #f3f0ff; padding: 2px 6px; border-radius: 4px; font-size: .85em; color: #7c3aed; }

/* Result cards */
.track-result-card {
  background: #ffffff; border-radius: var(--radius-xl); padding: 36px;
  box-shadow: 0 4px 24px rgba(124,58,237,.1); margin-bottom: 28px;
  max-width: 680px; margin-left: auto; margin-right: auto;
  border: 1px solid rgba(124,58,237,.12);
}
.track-result-card--error  { border-color: rgba(239,68,68,.2); background: #fff5f5; }
.track-result-card--found  { border-color: rgba(124,58,237,.2); }
.track-result-card--pending{ border-color: rgba(249,115,22,.2); background: #fffbf0; }
.track-result-icon  { font-size: 2.5rem; text-align: center; margin-bottom: 16px; }
.track-result-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #1e1b4b; margin-bottom: 10px; text-align: center; }
.track-result-desc  { color: #6d5fa6; font-size: .95rem; line-height: 1.65; text-align: center; }

/* Summary grid */
.track-summary {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  background: #f8f7ff; border-radius: var(--radius-md); padding: 18px; margin-bottom: 24px;
}
.track-summary__item { display: flex; flex-direction: column; gap: 4px; }
.track-summary__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9580c1; font-weight: 700; }
.track-summary__value { font-size: .92rem; font-weight: 700; color: #1e1b4b; }
.track-summary__value code { background: #ede9fe; padding: 2px 6px; border-radius: 4px; font-size: .9em; color: #7c3aed; }

/* Phone list */
.track-phones-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #1e1b4b;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #f3f0ff;
}
.track-phones-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.track-phone-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: var(--radius-md);
  border: 1.5px solid rgba(124,58,237,.12); background: #faf8ff;
}
.track-phone-row--track-status--delivered { background: #f0fdf4; border-color: rgba(34,197,94,.25); }
.track-phone-row--track-status--sent      { background: #faf8ff; border-color: rgba(124,58,237,.2); }
.track-phone-row--track-status--failed    { background: #fff5f5; border-color: rgba(239,68,68,.2); }
.track-phone-row__left  { display: flex; align-items: center; gap: 12px; }
.track-phone-flag       { font-size: 1.2rem; }
.track-phone-number     { font-weight: 700; color: #1e1b4b; font-size: .95rem; }
.track-phone-label      { font-size: .72rem; color: #9580c1; margin-top: 2px; }
.track-phone-row__right { display: flex; align-items: center; gap: 8px; }
.track-phone-status {
  font-size: .85rem; font-weight: 700; color: #5b21b6;
  background: rgba(124,58,237,.08); padding: 4px 12px; border-radius: 50px;
}
.track-status--delivered .track-phone-status { color: #16a34a; background: rgba(34,197,94,.1); }
.track-status--failed    .track-phone-status { color: #dc2626; background: rgba(239,68,68,.1); }
.track-delivered-check { font-size: .85rem; color: #16a34a; font-weight: 800; }

/* Message preview */
.track-message-preview {
  background: #f3f0ff; border-radius: var(--radius-md); padding: 16px 18px;
  margin-bottom: 20px; text-align: center;
}
.track-message-preview__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9580c1; font-weight: 700; margin-bottom: 8px; }
.track-message-preview__text  { font-size: 1.05rem; font-weight: 700; color: #7c3aed; letter-spacing: .1em; margin-bottom: 6px; }
.track-message-preview__note  { font-size: .75rem; color: #9580c1; }

/* Refresh note */
.track-refresh-note {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: #9580c1; padding: 10px 0;
  border-top: 1px solid #f3f0ff;
}

/* Info grid */
.track-info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 680px; margin: 0 auto;
}
.track-info-card {
  background: #ffffff; border: 1px solid rgba(124,58,237,.12);
  border-radius: var(--radius-lg); padding: 24px 20px; text-align: center;
  box-shadow: 0 2px 12px rgba(124,58,237,.07);
}
.track-info-card__icon  { font-size: 1.8rem; margin-bottom: 10px; }
.track-info-card__title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: #1e1b4b; margin-bottom: 6px; }
.track-info-card__desc  { font-size: .82rem; color: #6d5fa6; line-height: 1.55; }

/* Responsive */
@media (max-width: 640px) {
  .track-free-badge { flex-direction: column; gap: 14px; text-align: center; }
  .track-free-badge__right { border-left: none; border-top: 1.5px solid rgba(124,58,237,.2); padding-left: 0; padding-top: 14px; }
  .track-search-card { padding: 22px 18px; }
  .track-search-row  { flex-direction: column; }
  .track-search-btn  { width: 100%; }
  .track-summary { grid-template-columns: 1fr 1fr; }
  .track-info-grid { grid-template-columns: 1fr; }
  .track-result-card { padding: 24px 18px; }
}

/* ============================================================
   PILLAR / BLOG / PROGRAMMATIC / RAPORT — CSS
   ============================================================ */

/* === PILLAR PAGE =========================================== */
.pillar-page { background:#fff; }
.pillar-hero {
  background: linear-gradient(145deg, #faf8ff, #f3f0ff);
  padding: 60px 0 48px; border-bottom: 1px solid rgba(124,58,237,.1);
}
.pillar-hero__inner { max-width: 820px; }
.pillar-meta { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
.pillar-category { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#7c3aed; background:rgba(124,58,237,.08); padding:4px 12px; border-radius:50px; border:1px solid rgba(124,58,237,.2); }
.pillar-reading, .pillar-updated { font-size:.78rem; color:#9580c1; }
.pillar-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.15; color:#1e1b4b; margin-bottom:16px; }
.pillar-title-accent { color:#7c3aed; }
.pillar-lead { font-size:1.08rem; color:#4b5563; line-height:1.75; margin-bottom:28px; max-width:720px; }
.pillar-cta-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.pillar-price-note { font-size:.85rem; color:#6d5fa6; }
.pillar-toc { background:#fff; border:1px solid rgba(124,58,237,.15); border-radius:var(--radius-lg); padding:20px 24px; display:inline-block; max-width:480px; }
.pillar-toc__title { font-weight:700; color:#1e1b4b; margin-bottom:10px; font-size:.9rem; }
.pillar-toc__list { padding-left:18px; }
.pillar-toc__list li { margin-bottom:5px; }
.pillar-toc__list a { color:#7c3aed; font-size:.88rem; text-decoration:none; }
.pillar-toc__list a:hover { text-decoration:underline; }

.pillar-content { padding: 52px 0 80px; }
.pillar-content section { margin-bottom:52px; }
.pillar-content h2 { font-family:var(--font-display); font-size:1.65rem; font-weight:800; color:#1e1b4b; margin-bottom:14px; padding-top:8px; border-top:2px solid #f3f0ff; }
.pillar-content h3 { font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:#1e1b4b; margin:20px 0 10px; }
.pillar-content p  { color:#374151; line-height:1.8; margin-bottom:14px; }
.pillar-content a  { color:#7c3aed; text-decoration:underline; }

.pillar-callout { display:flex; gap:14px; padding:16px 20px; border-radius:var(--radius-md); margin:20px 0; }
.pillar-callout__icon { font-size:1.3rem; flex-shrink:0; margin-top:2px; }
.pillar-callout--info   { background:#f0f9ff; border:1px solid #bae6fd; color:#0c4a6e; }
.pillar-callout--success{ background:#f0fdf4; border:1px solid #bbf7d0; color:#14532d; }
.pillar-callout--purple { background:#f3f0ff; border:1px solid rgba(124,58,237,.25); color:#1e1b4b; }
.pillar-callout a { color:#7c3aed; }

.pillar-list { padding-left:22px; margin-bottom:16px; }
.pillar-list li { color:#374151; line-height:1.75; margin-bottom:6px; }
.pillar-list--numbered { list-style:decimal; }

.pillar-comparison-table table,
.raport-compare-table table { width:100%; border-collapse:collapse; margin:16px 0; }
.pillar-comparison-table th,
.raport-compare-table th { background:#f3f0ff; color:#1e1b4b; padding:10px 14px; text-align:left; font-size:.85rem; font-weight:700; border:1px solid rgba(124,58,237,.15); }
.pillar-comparison-table td,
.raport-compare-table td { padding:9px 14px; font-size:.85rem; color:#374151; border:1px solid rgba(124,58,237,.1); }
.pillar-comparison-table tr:nth-child(even) td,
.raport-compare-table tr:nth-child(even) td { background:#faf8ff; }
.raport-table-highlight td { background:#f3f0ff !important; font-weight:600; }

.pillar-method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:16px 0; }
.pillar-method { background:#fff; border:1.5px solid rgba(124,58,237,.15); border-radius:var(--radius-md); padding:20px; position:relative; }
.pillar-method--best { border-color:#7c3aed; background:#faf8ff; }
.pillar-method__badge { position:absolute; top:-12px; left:16px; background:#7c3aed; color:#fff; font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:50px; }
.pillar-method h3 { font-size:.95rem; font-weight:700; color:#1e1b4b; margin-bottom:10px; }
.pillar-method ul { list-style:none; padding:0; }
.pillar-method li { font-size:.82rem; color:#374151; padding:3px 0; }

.pillar-use-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:16px 0; }
.pillar-use-card { background:#faf8ff; border:1px solid rgba(124,58,237,.12); border-radius:var(--radius-md); padding:18px 14px; text-align:center; }
.pillar-use-card__icon  { font-size:1.6rem; margin-bottom:8px; display:block; }
.pillar-use-card__title { font-size:.88rem; font-weight:700; color:#1e1b4b; margin-bottom:5px; }
.pillar-use-card__desc  { font-size:.78rem; color:#6d5fa6; line-height:1.5; }

.pillar-price-table { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.pillar-price-row { display:flex; align-items:center; gap:16px; padding:12px 18px; background:#fff; border:1px solid rgba(124,58,237,.12); border-radius:var(--radius-md); }
.pillar-price-row--hot { background:#faf8ff; border-color:rgba(124,58,237,.25); }
.pillar-price-pos  { width:100px; flex-shrink:0; font-weight:600; color:#374151; font-size:.9rem; }
.pillar-price-val  { font-family:var(--font-display); font-weight:800; color:#1e1b4b; font-size:1.05rem; }
.pillar-price-disc { margin-left:auto; font-size:.78rem; font-weight:800; color:#7c3aed; background:rgba(124,58,237,.1); padding:3px 10px; border-radius:50px; }
.pillar-price-base { margin-left:auto; font-size:.75rem; color:#9580c1; }

.pillar-steps { list-style:none; padding:0; display:flex; flex-direction:column; gap:20px; }
.pillar-steps li { display:flex; gap:16px; align-items:flex-start; }
.pillar-step-num { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#7c3aed,#8b5cf6); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.pillar-steps h3 { font-size:.97rem; font-weight:700; color:#1e1b4b; margin-bottom:4px; }
.pillar-steps p  { font-size:.87rem; color:#6d5fa6; margin:0; }

.pillar-cta-box { background:linear-gradient(135deg,#f3f0ff,#ede9fe); border:2px solid rgba(124,58,237,.25); border-radius:var(--radius-xl); padding:36px; text-align:center; margin:36px 0; }
.pillar-cta-box h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:800; color:#1e1b4b; margin-bottom:8px; }
.pillar-cta-box p  { color:#6d5fa6; margin-bottom:20px; }

.pillar-related { background:#faf8ff; border:1px solid rgba(124,58,237,.12); border-radius:var(--radius-lg); padding:24px; margin-top:40px; }
.pillar-related__title { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:#1e1b4b; margin-bottom:14px; }
.pillar-related__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.pillar-related__link { display:block; color:#7c3aed; font-size:.87rem; font-weight:600; text-decoration:none; padding:8px 14px; background:#fff; border:1px solid rgba(124,58,237,.15); border-radius:var(--radius-sm); transition:all .2s; }
.pillar-related__link:hover { border-color:#7c3aed; background:#f3f0ff; }

/* === BLOG ================================================== */
.blog-page { background:#fff; padding:48px 0 80px; }
.blog-header { text-align:center; max-width:640px; margin:0 auto 48px; }
.blog-header__title { font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:#1e1b4b; margin-bottom:10px; }
.blog-header__sub { color:#6d5fa6; font-size:1rem; }
.blog-layout { display:grid; grid-template-columns:1fr 280px; gap:36px; align-items:start; }
.blog-main { display:flex; flex-direction:column; gap:24px; }
.blog-card { display:flex; gap:18px; background:#fff; border:1px solid rgba(124,58,237,.12); border-radius:var(--radius-lg); padding:24px; box-shadow:0 2px 12px rgba(124,58,237,.06); transition:all .2s; }
.blog-card:hover { border-color:rgba(124,58,237,.3); transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,.12); }
.blog-card__emoji { font-size:2.2rem; flex-shrink:0; }
.blog-card__meta { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.blog-card__cat  { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#7c3aed; background:rgba(124,58,237,.08); padding:3px 9px; border-radius:50px; }
.blog-card__sep  { color:#d1d5db; }
.blog-card__date, .blog-card__read { font-size:.75rem; color:#9580c1; }
.blog-card__title a { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:#1e1b4b; text-decoration:none; line-height:1.3; }
.blog-card__title a:hover { color:#7c3aed; }
.blog-card__desc { font-size:.87rem; color:#6d5fa6; line-height:1.6; margin:8px 0; }
.blog-card__link { font-size:.85rem; font-weight:600; color:#7c3aed; text-decoration:none; }
.blog-card__link:hover { text-decoration:underline; }
.blog-sidebar { position:sticky; top:calc(var(--offset)+16px); display:flex; flex-direction:column; gap:18px; }
.blog-sidebar__card { background:#fff; border:1px solid rgba(124,58,237,.12); border-radius:var(--radius-lg); padding:20px; }
.blog-sidebar__card h3 { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:#1e1b4b; margin-bottom:12px; }
.blog-sidebar__card ul { list-style:none; }
.blog-sidebar__card li { margin-bottom:8px; }
.blog-sidebar__card a { color:#7c3aed; font-size:.87rem; text-decoration:none; }
.blog-sidebar__card a:hover { text-decoration:underline; }
.blog-sidebar__cta { background:linear-gradient(135deg,#f3f0ff,#ede9fe); border-color:rgba(124,58,237,.2); text-align:center; }
.blog-sidebar__cta-emoji { font-size:2rem; margin-bottom:8px; }
.blog-sidebar__cta h3 { margin-bottom:4px; }
.blog-sidebar__cta p { font-size:.82rem; color:#6d5fa6; margin-bottom:12px; }

/* === PROGRAMMATIC PAGE ===================================== */
.programmatic-page { background:#fff; padding:48px 0 80px; }
.prog-hero { text-align:center; max-width:720px; margin:0 auto 52px; }
.prog-hero__emoji { font-size:3rem; margin-bottom:14px; }
.prog-hero__title { font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:#1e1b4b; margin-bottom:14px; line-height:1.15; }
.prog-highlight { color:#7c3aed; }
.prog-hero__lead { font-size:1.02rem; color:#4b5563; line-height:1.75; margin-bottom:24px; }
.prog-hero__cta { display:flex; align-items:center; gap:20px; justify-content:center; flex-wrap:wrap; }
.prog-price-note { font-size:.84rem; color:#6d5fa6; }
.prog-content { max-width:820px; margin:0 auto 40px; }
.prog-content h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:#1e1b4b; margin-bottom:14px; }
.prog-content p { color:#374151; line-height:1.75; margin-bottom:14px; }
.prog-features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:20px 0; }
.prog-feature { display:flex; gap:12px; background:#faf8ff; border:1px solid rgba(124,58,237,.12); border-radius:var(--radius-md); padding:16px; }
.prog-feature > span { font-size:1.4rem; flex-shrink:0; }
.prog-feature strong { display:block; font-size:.9rem; font-weight:700; color:#1e1b4b; margin-bottom:4px; }
.prog-feature p { font-size:.82rem; color:#6d5fa6; margin:0; line-height:1.5; }
.prog-steps { padding-left:20px; }
.prog-steps li { color:#374151; margin-bottom:8px; line-height:1.65; font-size:.93rem; }
.prog-examples { display:flex; flex-direction:column; gap:14px; margin:16px 0; }
.prog-example { background:#faf8ff; border:1px solid rgba(124,58,237,.15); border-radius:var(--radius-md); padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.prog-example__text { font-size:.9rem; color:#374151; line-height:1.55; flex:1; }
.prog-example__btn  { font-size:.8rem; font-weight:700; color:#7c3aed; background:#fff; border:1px solid rgba(124,58,237,.25); padding:7px 14px; border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap; flex-shrink:0; transition:all .2s; }
.prog-example__btn:hover { background:#f3f0ff; border-color:#7c3aed; }
.prog-bottom-cta { text-align:center; background:linear-gradient(135deg,#f3f0ff,#ede9fe); border:2px solid rgba(124,58,237,.2); border-radius:var(--radius-xl); padding:36px; margin-bottom:36px; }
.prog-bottom-cta h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:#1e1b4b; margin-bottom:8px; }
.prog-bottom-cta p  { color:#6d5fa6; margin-bottom:20px; }

/* === RAPORT ================================================ */
.raport-badge { display:inline-block; background:#f0fdf4; border:1px solid #bbf7d0; color:#14532d; padding:6px 14px; border-radius:50px; font-size:.78rem; font-weight:600; margin-bottom:16px; }
.raport-contact-press { font-size:.83rem; color:#6d5fa6; margin-top:20px; }
.raport-contact-press a { color:#7c3aed; }
.raport-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0 8px; }
.raport-stat { text-align:center; background:#faf8ff; border:1px solid rgba(124,58,237,.15); border-radius:var(--radius-lg); padding:22px 16px; }
.raport-stat__num { font-family:var(--font-display); font-size:2.4rem; font-weight:800; background:linear-gradient(135deg,#7c3aed,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:8px; }
.raport-stat__label { font-size:.78rem; color:#6d5fa6; line-height:1.4; }
.raport-chart { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.raport-chart__row { display:flex; align-items:center; gap:14px; }
.raport-chart__label { width:200px; flex-shrink:0; font-size:.85rem; color:#374151; }
.raport-chart__bar-wrap { flex:1; height:10px; background:#f3f0ff; border-radius:5px; overflow:hidden; }
.raport-chart__bar { height:100%; background:linear-gradient(90deg,#7c3aed,#8b5cf6); border-radius:5px; }
.raport-chart__val { width:36px; flex-shrink:0; font-size:.82rem; font-weight:700; color:#7c3aed; text-align:right; }

/* === RESPONSIVE ============================================ */
@media (max-width:900px) {
  .pillar-method-grid { grid-template-columns:1fr; }
  .pillar-use-grid    { grid-template-columns:repeat(2,1fr); }
  .blog-layout        { grid-template-columns:1fr; }
  .blog-sidebar       { position:static; }
  .raport-stats-grid  { grid-template-columns:repeat(2,1fr); }
  .pillar-related__grid { grid-template-columns:1fr; }
  .prog-features-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .pillar-use-grid    { grid-template-columns:1fr 1fr; }
  .pillar-price-pos   { width:70px; }
  .prog-example       { flex-direction:column; align-items:flex-start; }
  .raport-chart__label{ width:120px; }
  .raport-stats-grid  { grid-template-columns:1fr 1fr; }
}


/* === PAY TERMS NOTE ======================================= */
.pay-terms-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: .72rem;
  color: var(--text-muted, #9ca3af);
  line-height: 1.5;
}
.pay-terms-note a {
  color: var(--text-muted, #9ca3af);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pay-terms-note a:hover {
  color: var(--primary, #7c3aed);
}
/* === SENDER ID PICKER ====================================== */
.sf-sender-trigger {
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, box-shadow .2s;
}
.sf-sender-trigger:hover,
.sf-sender-trigger:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
  outline: none;
}
.sf-sender-trigger.is-open {
  border-color: var(--teal-500);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.sf-sender-chevron {
  font-size: .7rem;
  color: var(--teal-500);
  transition: transform .22s;
  margin-left: 2px;
  flex-shrink: 0;
}
.sf-sender-trigger.is-open .sf-sender-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.sf-sender-dropdown {
  display: none;
  position: relative;
  background: #fff;
  border: 1.5px solid var(--teal-500);
  border-top: none;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(124,58,237,.15);
  padding: 12px 14px 14px;
  z-index: 50;
  animation: senderDropIn .18s ease;
}
.sf-sender-dropdown.is-open { display: block; }

@keyframes senderDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Category label */
.sf-sender-category { margin-bottom: 12px; }
.sf-sender-category:last-child { margin-bottom: 0; }
.sf-sender-cat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

/* Chips row */
.sf-sender-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sf-sender-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1.5px solid #e2d9f3;
  background: #f8f5ff;
  color: var(--text-dark);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}
.sf-sender-chip:hover {
  border-color: var(--teal-400);
  background: rgba(124,58,237,.08);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124,58,237,.15);
}
.sf-sender-chip.is-active {
  border-color: var(--teal-500);
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(139,92,246,.08));
  color: var(--teal-500);
  box-shadow: 0 2px 8px rgba(124,58,237,.2);
}
.sf-chip-emoji { font-size: .95rem; line-height: 1; }

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .sf-sender-dropdown { background: #1a103a; border-color: var(--teal-500); }
  .sf-sender-chip { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.25); color: #e2d9f3; }
  .sf-sender-chip:hover { background: rgba(124,58,237,.22); }
  .sf-sender-chip.is-active { background: rgba(124,58,237,.3); color: #c4b5fd; }
  .sf-sender-cat-label { color: #8b7ec8; }
}