/* NewsletterPub AI — shared base for JV, FE and OTO pages */
:root {
  --ink: #050b1f;
  --navy: #071338;
  --navy-2: #0b1d52;
  --blue: #1e6bff;
  --blue-2: #3b8bff;
  --cyan: #3fd0ff;
  --gold: #ffd23f;
  --cta-1: #ffcf3a;
  --cta-2: #ff8a00;
  --green: #22c55e;
  --red: #ef4444;
  --paper: #f5f8ff;
  --line: #dbe5ff;
  --text: #1a2240;
  --muted: #5b6687;
  --radius: 18px;
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Caveat", cursive;
}

* { -webkit-font-smoothing: antialiased; }
/* Base body copy: 20px desktop, 18px mobile. All rem sizes scale from this. */
html { font-size: 20px; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (max-width: 767.98px) { html { font-size: 18px; } }
body { font-family: var(--body); color: var(--text); background: #fff; font-size: 1rem; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); }

h1, h2, h3, .display { font-family: var(--display); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.sec { padding: 96px 0; position: relative; }
.sec-sm { padding: 64px 0; }
.wrap { max-width: 1160px; }
.narrow { max-width: 860px; margin-inline: auto; }

/* ---------- bands ---------- */
.band-dark { background: var(--ink); color: #dfe7ff; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-navy { background: radial-gradient(1200px 600px at 50% 0%, #10307e 0%, var(--navy) 55%, var(--ink) 100%); color: #dfe7ff; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-img { background-size: cover; background-position: center; }
.band-light { background: var(--paper); }
.band-grid {
  background-color: #fbfcff;
  background-image: linear-gradient(#e9efff 1px, transparent 1px), linear-gradient(90deg, #e9efff 1px, transparent 1px);
  background-size: 34px 34px;
}
.band-dots::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(63, 208, 255, .45) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, #000 0, transparent 18%, transparent 82%, #000 100%);
}

/* ---------- text helpers ---------- */
.hl { color: var(--blue); }
.band-dark .hl, .band-navy .hl { color: #4fa8ff; }
.hl-box { background: var(--blue); color: #fff; padding: 0 .28em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.gold { color: var(--gold); }
.script { font-family: var(--script); font-weight: 700; font-size: 34px; color: var(--cyan); line-height: 1; }
.sec-title { font-size: clamp(30px, 3.4vw, 46px); margin: 0 0 .75rem; }
.sec-lead { font-size: 1.05rem; color: var(--muted); max-width: 820px; margin-inline: auto; }
.band-dark .sec-lead, .band-navy .sec-lead { color: #b9c6ee; }

/* ---------- buttons ---------- */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; text-decoration: none; border: 0;
  font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: #1a1300; letter-spacing: .01em;
  padding: 1.05rem 2.2rem; border-radius: 99px; background: linear-gradient(180deg, var(--cta-1), var(--cta-2));
  box-shadow: 0 10px 30px rgba(255, 138, 0, .35), inset 0 -3px 0 rgba(0, 0, 0, .12); transition: transform .15s, box-shadow .15s;
}
.btn-cta:hover { transform: translateY(-2px); color: #1a1300; box-shadow: 0 16px 38px rgba(255, 138, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn-cta .bi { font-size: 1.35em; }
.btn-cta.sm { font-size: 16px; padding: 10px 22px; }
.btn-cta.pulse { animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(255, 138, 0, .35), 0 0 0 0 rgba(255, 190, 40, .55); } 50% { box-shadow: 0 10px 30px rgba(255, 138, 0, .35), 0 0 0 14px rgba(255, 190, 40, 0); } }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; text-decoration: none; font-weight: 700;
  padding: .95rem 1.8rem; border-radius: 99px; border: 2px solid #c9d6f7; color: var(--text); background: #fff; transition: .15s;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.band-dark .btn-ghost, .band-navy .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.band-dark .btn-ghost:hover, .band-navy .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* video frame */
.video-frame {
  position: relative; max-width: 900px; margin: 2.4rem auto 0; border-radius: 22px; padding: 10px;
  background: linear-gradient(135deg, rgba(63, 208, 255, .7), rgba(30, 107, 255, .25) 40%, rgba(63, 208, 255, .6));
  box-shadow: 0 30px 80px rgba(30, 107, 255, .35);
}
.video-frame .inner { position: relative; border-radius: 14px; overflow: hidden; background: #071338; }
.video-cap { color: #9fb1e6; font-size: .9rem; margin-top: .9rem; }

/* ---------- cards ---------- */
.card-soft {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px; height: 100%;
  box-shadow: 0 8px 24px rgba(18, 40, 110, .06);
}
.ico {
  width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem;
  background: linear-gradient(135deg, #e6efff, #d3e3ff); color: var(--blue);
}
.band-dark .card-glass .ico, .band-navy .card-glass .ico { background: linear-gradient(135deg, var(--blue), #0b46c8); color: #fff; }
.card-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(120, 160, 255, .22);
  border-radius: var(--radius); padding: 24px; height: 100%;
}
.card-glass h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.card-glass p { color: #b9c6ee; margin: 0; }

.callout {
  border: 2px solid var(--blue); background: #eef4ff; border-radius: 14px; padding: 24px 30px;
  font-size: 1.05rem; font-weight: 600; text-align: center;
}
.band-dark .callout, .band-navy .callout { background: rgba(30, 107, 255, .1); color: #e7eeff; border-color: rgba(79, 168, 255, .7); }

/* reasons */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: .55rem 0 .55rem 2.2rem; border-bottom: 1px dashed var(--line); }
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .55rem; width: 1.55rem; height: 1.55rem;
  border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 1rem;
}

/* features: check rows, no boxed icon tiles */
.feat { display: flex; gap: 14px; height: 100%; padding: 18px 0; border-bottom: 1px solid rgba(120, 160, 255, .18); }
.feat h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.feat p { color: #b9c6ee; margin: 0; }
.feat-check { color: var(--green); font-size: 1.4rem; line-height: 1.2; flex: none; }
.much-more { font-family: var(--display); font-weight: 900; font-size: clamp(24px, 2.4vw, 32px); color: #fff; text-align: center; margin: 1.5rem 0 0; }

/* steps */
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px 24px 26px; height: 100%; box-shadow: 0 10px 30px rgba(18, 40, 110, .07); }
.step .n {
  position: absolute; top: -22px; left: 24px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, var(--blue-2), var(--blue));
  box-shadow: 0 10px 20px rgba(30, 107, 255, .35);
}
.step h3 { font-size: 1.15rem; margin: .6rem 0 .5rem; }
.step p { color: var(--muted); margin: 0; }
.step-tagline { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); color: var(--blue); }

footer { background: #030716; color: #7d8bb5; font-size: .88rem; padding: 34px 0; }
footer a { color: #a9b7e2; text-decoration: none; }
footer a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) { .btn-cta.pulse { animation: none; } html { scroll-behavior: auto; } }

@media (max-width: 767.98px) {
  .sec { padding: 68px 0; }
  .btn-cta { font-size: 1.05rem; padding: .95rem 1.2rem; width: 100%; }
  .btn-ghost { width: 100%; }
}
@media (min-width: 768px) { .btn-cta, .btn-ghost { white-space: nowrap; } }

/* shared blocks used by JV and FE */
.why-img { display: block; margin: 0 auto; max-height: 560px; width: auto; }
.arch { height: 100%; padding: 22px 22px 24px; border-radius: 16px; background: rgba(255, 255, 255, .04); border-top: 3px solid #4fa8ff; }
.arch-n { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; color: #4fa8ff; margin-bottom: .6rem; }
.arch h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.arch p { color: #b9c6ee; margin: 0; }
.tools-panel { max-width: 920px; margin: 2rem auto 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 34px; box-shadow: 0 14px 40px rgba(18, 40, 110, .08); }
.ps { background: rgba(255, 255, 255, .04); border: 1px solid rgba(120, 160, 255, .22); border-radius: 18px; padding: 22px 24px; }
.ps p { color: #c8d4ff; }
.ps strong { color: #fff; }
.final-line { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 40px); color: #fff; line-height: 1.2; }

/* browser-window frame for real app screenshots */
.browser { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #d6e0f5; box-shadow: 0 18px 44px rgba(10, 30, 90, .16); }
.browser .bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eef2f9; border-bottom: 1px solid #dde5f3; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; flex: none; }
.browser .bar i:nth-child(2) { background: #febc2e; }
.browser .bar i:nth-child(3) { background: #28c840; }
.browser .bar span { margin-left: 10px; flex: 1; max-width: 260px; background: #fff; border-radius: 6px; font-size: 11px; line-height: 18px; color: #6b7699; padding: 0 10px; font-family: var(--body); }
.browser img { display: block; width: 100%; height: auto; }
.step .browser { margin: 4px 0 18px; }
.issue-tall { max-height: 760px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.step .browser img { aspect-ratio: 1366 / 640; object-fit: cover; object-position: top center; }

/* section background images (dark: bg1/2/3/5/6/7/9, light: bg4/8), each veiled so text stays readable */
.bgi { background-size: cover; background-position: center; background-repeat: no-repeat; }
.bgi-1 { background-image: linear-gradient(180deg, rgba(5, 11, 31, 0.55), rgba(5, 11, 31, 0.78)), url("../images/bg1.webp"); }
.bgi-2 { background-image: linear-gradient(180deg, rgba(5, 11, 31, 0.2), rgba(5, 11, 31, 0.45)), url("../images/bg2.webp"); }
.bgi-3 { background-image: linear-gradient(180deg, rgba(5, 11, 31, 0.72), rgba(5, 11, 31, 0.86)), url("../images/bg3.webp"); }
.bgi-5 { background-image: linear-gradient(180deg, rgba(5, 11, 31, 0.55), rgba(5, 11, 31, 0.8)), url("../images/bg5.webp"); }
.bgi-6 { background-image: linear-gradient(180deg, rgba(5, 11, 31, 0.72), rgba(5, 11, 31, 0.86)), url("../images/bg6.webp"); }
.bgi-7 { background-image: linear-gradient(180deg, rgba(5, 11, 31, 0.25), rgba(5, 11, 31, 0.5)), url("../images/bg7.webp"); }
.bgi-9 { background-image: linear-gradient(180deg, rgba(5, 11, 31, 0.15), rgba(5, 11, 31, 0.4)), url("../images/bg9.webp"); }
.bgi-4 { background-image: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .88)), url("../images/bg4.webp"); }
.bgi-8 { background-image: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .84)), url("../images/bg8.webp"); }