/* ============================================================
   Callward — marketing site
   Brand: teal #006B5B, mint accents, privacy-first.
   ============================================================ */

:root {
  --teal-900:#00382E; --teal-800:#00473B; --teal-700:#00584A;
  --teal-600:#006B5B; --teal-500:#0E8F79; --mint:#74F8DF; --mint-2:#54DBC0;

  --bg:#F7FAF8; --surface:#ffffff; --surface-2:#EEF4F1;
  --text:#122019; --muted:#4A635C; --border:#DEE8E3;
  --shadow: 0 1px 2px rgba(0,40,32,.04), 0 12px 30px -12px rgba(0,40,32,.18);
  --shadow-lg: 0 30px 70px -24px rgba(0,50,40,.35);
  --radius:18px; --radius-sm:12px; --radius-lg:28px;
  --maxw:1120px;
  --grad: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  --font: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0D1512; --surface:#131E1A; --surface-2:#17241F;
    --text:#E4E8E5; --muted:#9FB2AA; --border:#243b33;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -16px rgba(0,0,0,.6);
    --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.75);
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.narrow { max-width:760px; }

h1,h2,h3 { line-height:1.12; letter-spacing:-.02em; margin:0; font-weight:800; }
h1 { font-size:clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size:clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size:1.18rem; font-weight:700; letter-spacing:-.01em; }
p { margin:0; }

.grad {
  background:linear-gradient(120deg,var(--teal-500),var(--mint-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  font-weight:700; font-size:.95rem; padding:.72rem 1.15rem; border-radius:999px;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 8px 20px -8px rgba(0,107,91,.6); }
.btn-primary:hover { box-shadow:0 12px 26px -8px rgba(0,107,91,.7); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-lg { padding:.95rem 1.5rem; font-size:1.02rem; }
.ico-play { width:1.1em; height:1.1em; }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.site-header.scrolled { border-bottom-color:var(--border); }
.header-inner { display:flex; align-items:center; gap:1.2rem; height:66px; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:-.02em; }
.brand-name { font-size:1.18rem; }
.brand-mark {
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--grad); color:#fff; box-shadow:0 6px 14px -6px rgba(0,107,91,.7);
}
.brand-mark.big { width:64px; height:64px; border-radius:18px; }
.brand-mark .ico { width:64%; height:64%; }
.ico { width:100%; height:100%; }

.nav { display:flex; gap:1.4rem; margin-left:auto; }
.nav a { color:var(--muted); font-weight:600; font-size:.94rem; transition:color .15s; }
.nav a:hover { color:var(--text); }
.header-cta { display:flex; align-items:center; gap:.6rem; margin-left:1rem; }

.menu-toggle { display:none; width:42px; height:42px; border:1px solid var(--border); background:var(--surface); border-radius:12px; cursor:pointer; }
.menu-toggle span { display:block; width:18px; height:2px; background:var(--text); margin:3px auto; border-radius:2px; transition:.25s; }
.mobile-nav { display:none; flex-direction:column; gap:.2rem; padding:0 22px 16px; }
.mobile-nav a { padding:.7rem .2rem; color:var(--text); font-weight:600; border-bottom:1px solid var(--border); }
.mobile-nav .btn { margin-top:.6rem; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,5vw,4rem); }
.hero::before {
  content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:radial-gradient(60% 60% at 70% 20%, rgba(84,219,192,.20), transparent 70%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.eyebrow {
  display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--teal-600); background:color-mix(in srgb, var(--mint) 35%, transparent);
  padding:.35rem .7rem; border-radius:999px; margin-bottom:1.1rem;
}
@media (prefers-color-scheme: dark){ .eyebrow{ color:var(--mint); background:rgba(84,219,192,.12);} }
.lede { font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--muted); margin:1.1rem 0 1.6rem; max-width:38ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.trust { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; padding:0; margin:1.7rem 0 0; }
.trust li { position:relative; padding-left:1.35rem; color:var(--muted); font-weight:600; font-size:.9rem; }
.trust li::before { content:"✓"; position:absolute; left:0; color:var(--teal-500); font-weight:800; }

.hero-visual { position:relative; display:grid; place-items:center; }
.glow { position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(84,219,192,.35), transparent 62%); filter:blur(10px); }

/* ---------- Phone mockup ---------- */
.phone {
  position:relative; width:min(300px, 78vw); aspect-ratio:1220/2712;
  background:#0c0f0e; border-radius:38px; padding:9px;
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.06);
}
.phone::before { /* speaker */
  content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:34%; height:6px; background:#000; border-radius:6px; z-index:2; opacity:.7;
}
.phone img { width:100%; height:100%; object-fit:cover; border-radius:30px; }
.phone.sm { width:min(215px, 62vw); border-radius:30px; padding:7px; }
.phone.sm::before { width:32%; height:5px; top:12px; }
.phone.sm img { border-radius:24px; }

/* ---------- Strip ---------- */
.strip { padding:clamp(1.6rem,3vw,2.4rem) 0; }
.strip-text {
  max-width:900px; margin-inline:auto; text-align:center; font-size:clamp(1.05rem,1.8vw,1.35rem);
  color:var(--muted); font-weight:500;
}
.strip-text strong { color:var(--text); font-weight:800; }
.strip-text em { font-style:italic; color:var(--text); }

/* ---------- Sections ---------- */
.section { padding:clamp(3.2rem,7vw,6rem) 0; }
.section-alt { background:var(--surface-2); }
.section-head { max-width:640px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.section-head p { color:var(--muted); font-size:1.08rem; margin-top:.7rem; }
.kicker { font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-600); }
@media (prefers-color-scheme: dark){ .kicker{ color:var(--mint-2);} }

/* ---------- Feature grid ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-ico {
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:1.5rem; background:color-mix(in srgb, var(--mint) 30%, var(--surface)); margin-bottom:1rem;
}
@media (prefers-color-scheme: dark){ .card-ico{ background:rgba(84,219,192,.12);} }
.card h3 { margin-bottom:.4rem; }
.card p { color:var(--muted); font-size:.96rem; }

/* ---------- Steps ---------- */
.steps { list-style:none; counter-reset:s; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.steps li { position:relative; padding-top:.5rem; }
.step-n {
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-weight:800;
  background:var(--grad); color:#fff; margin-bottom:1rem; box-shadow:0 8px 18px -8px rgba(0,107,91,.6);
}
.steps h3 { margin-bottom:.35rem; }
.steps p { color:var(--muted); }

/* ---------- Gallery ---------- */
.gallery { display:flex; gap:1.3rem; justify-content:center; flex-wrap:wrap; }
.gallery .phone.sm { width:min(238px, 66vw); }
/* clickable thumbnails */
.gallery button.phone { border:none; padding:7px; cursor:zoom-in; -webkit-appearance:none; appearance:none; }
.gallery .shot { transition:transform .22s ease, box-shadow .22s ease; }
.gallery .shot:hover, .gallery .shot:focus-visible {
  transform:translateY(-6px) scale(1.035); box-shadow:var(--shadow-lg); outline:none;
}
.gallery .shot:focus-visible { box-shadow:0 0 0 3px var(--mint-2), var(--shadow-lg); }
.gallery-hint { text-align:center; color:var(--muted); font-size:.9rem; margin-top:1.1rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:5vmin;
  background:rgba(6,12,10,.84); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lightbox.open { display:grid; animation:lb-fade .22s ease both; }
.lightbox img { max-width:min(440px, 92vw); max-height:92vh; width:auto; border-radius:30px; box-shadow:var(--shadow-lg); }
.lightbox.open img { animation:lb-pop .24s cubic-bezier(.2,.8,.2,1) both; }
.lightbox-close {
  position:absolute; top:16px; right:18px; width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer;
  transition:background .15s;
}
.lightbox-close:hover { background:rgba(255,255,255,.26); }
@keyframes lb-fade { from{opacity:0} to{opacity:1} }
@keyframes lb-pop { from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .lightbox.open, .lightbox.open img { animation:none; } }

/* ---------- Privacy ---------- */
.privacy { background:linear-gradient(160deg, var(--teal-700), var(--teal-900)); color:#eafff9; }
.privacy .kicker { color:var(--mint); }
.privacy-inner { max-width:780px; margin-inline:auto; text-align:center; }
.privacy-inner .brand-mark.big { margin:0 auto 1.3rem; background:rgba(255,255,255,.14); box-shadow:none; }
.privacy-inner .brand-mark.big .ico { color:#fff; }
.privacy h2 { color:#fff; }
.privacy-inner > p { color:#c7ece2; font-size:1.1rem; margin:1rem auto 1.6rem; }
.privacy-points { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.privacy-points li { background:rgba(255,255,255,.1); padding:.5rem 1rem; border-radius:999px; font-weight:600; font-size:.92rem; }
.privacy-points code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; }

/* ---------- Pricing ---------- */
.plans { display:grid; grid-template-columns:repeat(2, minmax(0,340px)); gap:1.2rem; justify-content:center; }
.plan {
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:2rem 1.8rem; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.plan.featured { border-color:var(--teal-500); box-shadow:var(--shadow-lg); }
.plan .tag {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-weight:700; font-size:.75rem; letter-spacing:.03em;
  padding:.3rem .8rem; border-radius:999px;
}
.price { display:flex; align-items:baseline; gap:.35rem; margin:.6rem 0; }
.amount { font-size:2.6rem; font-weight:800; letter-spacing:-.03em; }
.per { color:var(--muted); font-weight:600; }
.plan-note { color:var(--muted); font-size:.92rem; margin-bottom:1.1rem; }
.plan-list { list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.55rem; }
.plan-list li { position:relative; padding-left:1.5rem; font-size:.96rem; }
.plan-list li::before { content:"✓"; position:absolute; left:0; color:var(--teal-500); font-weight:800; }
.plan .btn { margin-top:auto; width:100%; }
.pricing-fine { text-align:center; color:var(--muted); font-size:.88rem; margin-top:1.4rem; }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:.7rem; }
.faq details {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 1.2rem;
  transition:border-color .2s;
}
.faq details[open] { border-color:var(--teal-500); }
.faq summary {
  list-style:none; cursor:pointer; font-weight:700; padding:1.05rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-weight:700; font-size:1.3rem; color:var(--teal-600); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); padding:0 0 1.1rem; margin:0; }

/* ---------- CTA ---------- */
.cta { padding:clamp(3.5rem,7vw,6rem) 0; }
.cta-inner {
  text-align:center; background:var(--grad); color:#fff; border-radius:var(--radius-lg);
  padding:clamp(2.5rem,5vw,4rem) 1.5rem; box-shadow:var(--shadow-lg);
}
.cta-inner h2 { color:#fff; }
.cta-inner p { color:#e6fff8; font-size:1.15rem; margin:.6rem 0 1.6rem; }
.cta-inner .btn-primary { background:#fff; color:var(--teal-700); }
.cta-inner .btn-primary:hover { background:#eafff9; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--border); padding:3rem 0 2rem; background:var(--surface); }
.footer-grid { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-tag { color:var(--muted); margin-top:.6rem; font-size:.95rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; }
.footer-links a { color:var(--muted); font-weight:600; font-size:.94rem; }
.footer-links a:hover { color:var(--text); }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--border); color:var(--muted); font-size:.85rem; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:1fr; gap:1.6rem; }
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-copy { order:1; }
  .hero-visual { order:2; }
  .lede, .trust { margin-inline:auto; justify-content:center; }
  .hero-actions { justify-content:center; }
}
@media (max-width: 720px){
  .nav, .header-cta .btn-primary { display:none; }
  .menu-toggle { display:block; }
  .header-inner { justify-content:space-between; }
  .site-header.open .mobile-nav { display:flex; }
  .site-header.open .menu-toggle span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
  .site-header.open .menu-toggle span:nth-child(2){ opacity:0; }
  .site-header.open .menu-toggle span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
}
@media (max-width: 560px){
  .feature-grid { grid-template-columns:1fr; }
  .plans { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}