/*
 * Voodootix landing-page additions.
 * Shared components for campaign landing pages.
 */

:root {
  --rt-red: #e7333f;
  --rt-red-dark: #c9222e;
  --rt-dark: #121722;
  --rt-muted: #657085;
  --rt-soft: #f6f7fb;
  --rt-border: rgba(18, 23, 34, 0.09);
  --rt-green: #18a875;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.lp-page {
  margin: 0;
  overflow-x: hidden;
  color: var(--rt-dark);
  background: #ffffff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.lp-page a { text-decoration: none; }
body.lp-page .btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.78rem 1.35rem;
}
body.lp-page .btn-primary {
  background: var(--rt-red);
  border-color: var(--rt-red);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(231, 51, 63, 0.24);
}
body.lp-page .btn-primary:hover,
body.lp-page .btn-primary:focus {
  background: var(--rt-red-dark);
  border-color: var(--rt-red-dark);
  color: #ffffff;
}
body.lp-page .btn-secondary {
  background: #ffffff;
  border-color: var(--rt-border);
  color: var(--rt-dark);
}
body.lp-page .btn-secondary:hover,
body.lp-page .btn-secondary:focus {
  background: #ffffff;
  border-color: rgba(231, 51, 63, 0.35);
  color: var(--rt-red);
  box-shadow: 0 12px 24px rgba(18, 23, 34, 0.08);
}
body.lp-page .navbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rt-border);
}
body.lp-page .brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
body.lp-page .nav-link {
  color: var(--rt-dark);
  font-weight: 600;
}
body.lp-page .nav-link:hover,
body.lp-page .nav-link:focus {
  color: var(--rt-red);
}
body.lp-page .btn-red {
  background: var(--rt-red);
  border: 0;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(231, 51, 63, 0.24);
}
body.lp-page .btn-red:hover,
body.lp-page .btn-red:focus {
  background: var(--rt-red-dark);
  color: #ffffff;
}
body.lp-page .dropdown-item {
  color: var(--rt-dark);
  font-weight: 600;
}
body.lp-page .dropdown-item:hover,
body.lp-page .dropdown-item:focus {
  background: rgba(231, 51, 63, 0.08);
  color: var(--rt-red);
}

.lp-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.lp-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; }
.lp-brand { display:inline-flex; align-items:center; color:inherit; }
.lp-brand-logo { display:block; width:auto; height:38px; }
.lp-language-switcher { margin-left:auto; }
.lp-language-switcher .btn { border-color:var(--rt-border); color:var(--rt-dark); background:#ffffff; box-shadow:none; }
.lp-language-switcher .btn:hover,
.lp-language-switcher .btn:focus { border-color:rgba(231, 51, 63, 0.35); color:var(--rt-red); }
.lp-nav-cta { white-space:nowrap; }
.lp-hero {
  position: relative;
  overflow: hidden;
  padding:132px 0 54px;
  background:
    radial-gradient(circle at 12% 18%, rgba(231, 51, 63, 0.16), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(31, 79, 255, 0.11), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
}
.lp-hero-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); align-items:center; gap:64px; }
.lp-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:999px; background:rgba(231, 51, 63, 0.08); color:var(--rt-red); border:1px solid rgba(231, 51, 63, 0.16); font-size:.9rem; font-weight:800; margin-bottom:18px; }
.lp-hero h1 { max-width:840px; margin:0 0 22px; font-size:4.7rem; line-height:.96; letter-spacing:0; font-weight:900; }
.lp-hero p { max-width:690px; color:var(--rt-muted); font-size:1.25rem; line-height:1.55; margin:0 0 28px; }
.lp-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px; }
.lp-proofline { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.lp-proofline span { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:999px; background:#ffffff; border:1px solid var(--rt-border); color:#3b4353; font-size:.9rem; font-weight:650; }
.lp-proofline span::before { content:'\F26A'; font-family:"bootstrap-icons"; color:var(--rt-green); font-weight:400; }
.lp-section { padding:76px 0; }
.lp-section-sm { padding:52px 0; }
.lp-section-head { max-width:760px; margin-bottom:36px; }
.lp-section-head h2 { margin:0 0 14px; font-size:3.05rem; line-height:1.02; letter-spacing:0; font-weight:900; }
.lp-section-head p { margin:0; color:var(--rt-muted); font-size:1.1rem; line-height:1.65; }
.lp-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.lp-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.lp-card { height:100%; border:1px solid var(--rt-border); border-radius:24px; padding:26px; background:#ffffff; box-shadow:0 16px 45px rgba(18,23,34,.05); }
.lp-card h3 { margin:10px 0 8px; font-size:1.25rem; letter-spacing:0; }
.lp-card p { margin:0; color:var(--rt-muted); line-height:1.6; }
.lp-card .lp-icon { color:var(--rt-red); font-size:1.5rem; }
.lp-pain { font-size:1.04rem; line-height:1.55; }
.lp-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:16px; }
.lp-step { position:relative; padding:28px; border-radius:24px; border:1px solid var(--rt-border); background:#ffffff; }
.lp-step strong { display:block; margin-bottom:8px; }
.lp-step p { color:var(--rt-muted); line-height:1.6; margin:0; }
.lp-step-number { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(231, 51, 63, 0.08); color:var(--rt-red); border:1px solid rgba(231, 51, 63, 0.16); margin-bottom:18px; font-weight:800; }
.lp-metric { color:var(--rt-red); font-size:3.65rem; font-weight:900; line-height:1; letter-spacing:0; margin:10px 0; }
.lp-visual { border:1px solid var(--rt-border); border-radius:28px; padding:28px; background:#ffffff; box-shadow:0 28px 80px rgba(18,23,34,.08); }
.lp-window-bar { display:flex; gap:7px; margin-bottom:22px; opacity:.45; }
.lp-window-bar i { width:9px; height:9px; border-radius:50%; border:1px solid currentColor; display:block; }
.lp-inventory { display:grid; gap:12px; }
.lp-inventory-row { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(120,120,140,.16); }
.lp-inventory-row:last-child { border-bottom:0; }
.lp-badge { display:inline-flex; width:max-content; align-items:center; border:1px solid rgba(231, 51, 63, 0.16); border-radius:999px; padding:5px 9px; background:rgba(231, 51, 63, 0.08); color:var(--rt-red); font-size:.74rem; font-weight:800; letter-spacing:0; text-transform:uppercase; }
.lp-quote { color:var(--rt-dark); font-size:2.2rem; line-height:1.18; letter-spacing:0; max-width:900px; font-weight:800; }
.lp-comparison { overflow:hidden; border:1px solid var(--rt-border); border-radius:24px; }
.lp-comparison-row { display:grid; grid-template-columns:1.2fr .9fr .9fr; }
.lp-comparison-row > div { padding:18px 22px; border-bottom:1px solid rgba(120,120,140,.14); }
.lp-comparison-row:last-child > div { border-bottom:0; }
.lp-comparison-row > div:not(:last-child) { border-right:1px solid rgba(120,120,140,.14); }
.lp-comparison-head { font-weight:800; }
.lp-channel-map { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:center; }
.lp-channel { border:1px solid var(--rt-border); border-radius:18px; padding:18px; background:#ffffff; text-align:center; font-weight:700; }
.lp-channel-core { grid-column:1 / -1; justify-self:center; min-width:220px; padding:22px 28px; border-radius:20px; border:2px solid var(--rt-red); color:var(--rt-red); background:#ffffff; text-align:center; font-weight:800; }
.lp-cta { border-radius:30px; padding:46px; text-align:center; background:linear-gradient(135deg, var(--rt-red), #ff6a3d); color:#ffffff; box-shadow:0 24px 70px rgba(231,51,63,.22); }
.lp-cta h2 { margin:0 auto 12px; max-width:760px; font-size:3.25rem; line-height:1; letter-spacing:0; font-weight:900; }
.lp-cta p { max-width:680px; margin:0 auto 26px; line-height:1.6; color:rgba(255,255,255,.84); }
.lp-cta .btn-primary { background:#121722; border-color:#121722; box-shadow:none; }
.lp-cta .btn-primary:hover { background:#000000; border-color:#000000; }
.lp-footer { padding:38px 0 50px; color:var(--rt-muted); font-size:.9rem; }
.lp-footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.lp-footer .lp-brand-logo { height:32px; }
.lp-note { font-size:.84rem; opacity:.62; }
.lp-calculator { display:grid; gap:15px; }
.lp-calculator label { font-weight:700; font-size:.9rem; }
.lp-calculator input { width:100%; padding:14px 15px; border-radius:12px; border:1px solid rgba(120,120,140,.28); font:inherit; background:transparent; color:inherit; }
.lp-calculator-results { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.lp-result { padding:18px; border:1px solid rgba(120,120,140,.2); border-radius:16px; }
.lp-result strong { display:block; font-size:1.45rem; margin-top:5px; }
.lp-mobile { width:min(280px,100%); margin:0 auto; border:2px solid currentColor; border-radius:34px; padding:14px; }
.lp-mobile-screen { border:1px solid rgba(120,120,140,.2); border-radius:23px; padding:18px; min-height:410px; }
.lp-mobile-item { padding:13px 0; border-bottom:1px solid rgba(120,120,140,.16); }
.lp-mobile-item:last-child { border-bottom:0; }
.lp-no-show { display:flex; align-items:end; gap:8px; height:160px; padding-top:12px; }
.lp-no-show span { flex:1; border:1px solid currentColor; border-radius:8px 8px 2px 2px; opacity:.32; }
.lp-no-show span:nth-child(1){height:92%}.lp-no-show span:nth-child(2){height:70%}.lp-no-show span:nth-child(3){height:42%}.lp-no-show span:nth-child(4){height:80%}.lp-no-show span:nth-child(5){height:50%}.lp-no-show span:nth-child(6){height:26%}

@media (max-width: 860px) {
  .lp-hero-grid,.lp-grid-3,.lp-grid-2,.lp-flow { grid-template-columns:1fr; }
  .lp-hero { padding-top:112px; }
  .lp-hero-grid { gap:36px; }
  .lp-hero h1 { font-size:3.15rem; }
  .lp-section-head h2 { font-size:2.35rem; }
  .lp-metric { font-size:2.85rem; }
  .lp-quote { font-size:1.65rem; }
  .lp-cta h2 { font-size:2.45rem; }
  .lp-comparison-row { grid-template-columns:1fr; }
  .lp-comparison-row > div { border-right:0!important; }
  .lp-comparison-row > div:not(:last-child) { border-bottom:1px solid rgba(120,120,140,.14); }
  .lp-channel-map { grid-template-columns:1fr; }
  .lp-channel-core { grid-column:auto; width:100%; }
  .lp-cta { padding:34px 22px; }
}

@media (max-width: 575px) {
  .lp-shell { width:min(100% - 28px, 1120px); }
  body.lp-page .brand-logo { height:32px; }
  .lp-nav { gap:14px; padding:16px 0; }
  .lp-brand-logo { height:32px; }
  .lp-language-switcher .btn { padding:.55rem .7rem; }
  .lp-hero h1 { font-size:2.55rem; }
  .lp-hero p { font-size:1.05rem; }
  .lp-actions { align-items:stretch; flex-direction:column; }
  .lp-actions .btn { width:100%; }
  .lp-section { padding:62px 0; }
  .lp-section-sm { padding:42px 0; }
  .lp-section-head h2 { font-size:2rem; }
  .lp-card,
  .lp-step,
  .lp-visual { padding:22px; }
  .lp-quote { font-size:1.45rem; }
  .lp-cta h2 { font-size:2rem; }
  .lp-footer-inner { align-items:flex-start; flex-direction:column; }
}