/* ═══════════════════════════════════════════════════════
   shared.css — Revfloow  (matches revfloow.com aesthetic)
   
   Palette:
     --ink:      #1A1A1A   near-black headings (like live site)
     --body:     #3D3D4E   dark grey body text
     --muted:    #6B6B7B   secondary text
     --dim:      #9999AA   placeholders / captions
     --accent:   #C76CE1   logo purple — THE single accent
     --accent2:  #6A30DA   deeper purple for gradients
     --coral:    #D8513B   warm coral accent strip
     --lilac:    #DCC7F2   light lilac (hero bg, borders)
     --blush:    #FBD5CC   warm blush (hero bg)
     --bg:       #FFFFFF   white
     --bg2:      #F8F5FF   almost white, whisper lilac
     --bg3:      #F2EAF8   light lilac tint
     --border:   #EAE0F4   soft lilac border
   ═══════════════════════════════════════════════════════ */

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

:root {
  --ink:      #1A1A1A;
  --body:     #3D3D4E;
  --muted:    #6B6B7B;
  --dim:      #9999AA;
  --accent:   #C76CE1;
  --vivid:    #C76CE1;   /* alias → --accent */
  --logo-pur: #C76CE1;   /* alias → --accent */
  --accent2:  #6A30DA;
  --coral:    #C0392B;
  --lilac:    #DCC7F2;
  --blush:    #FBD5CC;
  --navy:     #18082D;
  --deep-pur: #431F5F;
  --bg:       #FFFFFF;
  --bg2:      #F8F5FF;
  --bg3:      #F2EAF8;
  --bg4:      #EDE0F6;
  --border:   #EAE0F4;
  --border2:  #DCC7F2;
  --green:    #0D9E6E;
  --red:      #C0392B;
  --r:        12px;
  --rl:       20px;
  --fd:       'Sora', 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --fb:       'Plus Jakarta Sans', 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --t:        .2s ease;
  --glow:     0 0 48px -8px rgba(199,108,225,.30);
  --shadow:   0 8px 40px rgba(199,108,225,.12);
  
  /* Hero gradient — exactly like live site */
  --hero-bg: linear-gradient(145deg, #E8E0F8 0%, #F0D8F0 35%, #F8D8D0 70%, #FDE8E0 100%);
}

html { scroll-behavior: smooth }
body {
  background: var(--bg);
  color: #3D3D4E;
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
button { cursor: pointer; font-family: var(--fb) }

/* ─ Layout ─ */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px }

/* ─ Accent text — single purple, no gradient clip ─ */
.gt {
  color: #C76CE1;
  background: none;
  -webkit-text-fill-color: #C76CE1;
  background-clip: unset;
  -webkit-background-clip: unset;
}

/* ─ Label pill ─ */
.lbl {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  background: rgba(199,108,225,.08);
  border: 1px solid rgba(199,108,225,.22);
}

/* ─ Buttons ─ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--r);
  font-weight: 700;
  font-size: .9rem;
  border: none;
  transition: var(--t);
  cursor: pointer;
  font-family: var(--fb);
  white-space: nowrap;
  letter-spacing: .01em;
}
/* Primary — solid accent purple */
.btn-p {
  background: #C76CE1 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(199,108,225,.35);
}
.btn-p:hover { background: #B85DD0 !important; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(199,108,225,.4) }

/* Outline */
.btn-o {
  background: rgba(255,255,255,0.85);
  color: #1A1A1A;
  border: 1.5px solid #DCC7F2;
}
.btn-o:hover { background: #fff; border-color: #C76CE1; color: #1A1A1A; }

/* Outline dark — for use on gradient/hero backgrounds */
.btn-od {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 12px;
  font-weight: 700; font-size: .9rem;
  white-space: nowrap; letter-spacing: .01em;
  cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.25);
  color: #1A1A1A;
  border: 1.5px solid rgba(26,26,26,0.25);
  transition: .2s ease;
  backdrop-filter: blur(4px);
}
.btn-od:hover { background: rgba(255,255,255,0.7); }

/* White — for dark backgrounds */
.btn-w {
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-w:hover { background: rgba(255,255,255,.9); transform: translateY(-1px) }

.btn-sm { padding: 9px 20px; font-size: .82rem }

/* ─ Section header ─ */
.sh { text-align: center; max-width: 680px; margin: 0 auto 56px }
.sh .lbl { margin-bottom: 16px; display: inline-flex }
.sh h2 {
  font-family: var(--fd);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 16px;
  line-height: 1.08;
  color: var(--ink);
}
.sh p { color: var(--muted); font-size: 1.05rem; line-height: 1.75 }

/* ─ Coral accent bar ─ */
.coral-strip {
  display: inline-block;
  width: 32px;
  height: 4px;
  background: var(--coral);
  border-radius: 2px;
  margin-bottom: 14px;
}

/* ─ Navbar ─ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 68px;
  background: #ffffff !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #EAE0F4;
  box-shadow: 0 1px 16px rgba(199,108,225,.08);
}
.navbar .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: flex; align-items: center }
.logo img { height: 34px; width: auto }

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
}
.nav-links a:hover { color: var(--ink) }

.nav-drop { position: relative }
.drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(199,108,225,.14);
}
.nav-drop:hover .drop-menu { display: block }
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
}
.nav-cta { flex-shrink: 0 }
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-cta { flex-shrink: 0 }

.drop-menu a {
  display: block;
  padding: 10px 18px;
  font-size: .85rem;
  color: var(--muted);
  transition: var(--t);
}
.drop-menu a:hover { background: var(--bg2); color: var(--ink) }

.ham { display: none; background: none; border: none; color: var(--ink); padding: 4px }
.mob {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  z-index: 99;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
.mob.open { display: block }
.mob a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
  color: var(--muted);
}
.mob a:hover { color: var(--ink) }
main { padding-top: 68px }

/* ─ Footer ─ */
footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 32px;
  margin-top: 80px;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,199,242,.2), transparent 65%);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.footer-brand p {
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.75;
  max-width: 280px;
  margin-top: 14px;
}
footer h4 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--dim);
  margin-bottom: 16px;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px }
footer ul a { color: var(--muted); font-size: .875rem; transition: var(--t) }
footer ul a:hover { color: var(--ink) }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom p { color: var(--dim); font-size: .78rem }

/* ─ Modal ─ */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(24,8,45,.5);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay.open { display: flex }
.modal {
  background: #fff;
  border: 1px solid var(--border2);
  border-radius: var(--rl);
  width: 100%;
  max-width: 520px;
  position: relative;
  box-shadow: 0 24px 80px rgba(199,108,225,.2);
  overflow: hidden;
}
.modal-head { padding: 28px 28px 0; background: linear-gradient(135deg, var(--bg2), #fff) }
.modal-x {
  position: absolute;
  top: 16px; right: 18px;
  background: none; border: none;
  color: var(--muted);
  font-size: 1.6rem; line-height: 1;
  transition: var(--t); cursor: pointer;
}
.modal-x:hover { color: var(--ink) }
.modal h2 { font-family: var(--fd); font-weight: 800; font-size: 1.3rem; margin-bottom: 6px; color: var(--ink) }
.modal-sub { color: var(--muted); font-size: .875rem }
.modal-tabs { display: flex; border-bottom: 1px solid var(--border); margin-top: 18px }
.mtab {
  flex: 1; padding: 12px;
  font-size: .85rem; font-weight: 600;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--t); margin-bottom: -1px;
}
.mtab.on { color: var(--accent); border-bottom-color: var(--accent) }
.modal-body { padding: 24px 28px 28px }
.fg { margin-bottom: 14px }
.fl { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink) }
.fi {
  width: 100%; padding: 11px 14px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  color: #3D3D4E;
  font-family: var(--fb);
  font-size: .875rem;
  transition: var(--t);
}
.fi:focus { outline: none; border-color: var(--accent) }
.fi::placeholder { color: var(--dim) }
.msg-ok {
  display: none; color: var(--green);
  font-size: .875rem; margin-top: 12px;
  padding: 12px 14px;
  background: rgba(13,158,110,.06);
  border: 1px solid rgba(13,158,110,.22);
  border-radius: var(--r);
}
.msg-err { display: none; color: var(--red); font-size: .875rem; margin-top: 8px }

/* ─ CTA banner ─ */
.cta-banner { padding: 80px 0 }
.cta-inner {
  border-radius: var(--rl);
  padding: 80px 48px;
  text-align: center;
  background: linear-gradient(145deg, #2D1060 0%, #431F5F 45%, #7B2DB0 100%);
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,199,242,.15), transparent 65%);
  pointer-events: none;
}
.cta-inner::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,213,204,.12), transparent 65%);
  pointer-events: none;
}
.cta-inner h2 {
  font-family: var(--fd);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 800;
  margin-bottom: 14px;
  position: relative;
  letter-spacing: -.025em;
  color: #fff;
}
.cta-inner p {
  color: rgba(255,255,255,.80);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 36px;
  position: relative;
  line-height: 1.75;
}
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative }

/* ─ Lang switcher ─ */
.lang-dropdown { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; }
.lang-btn {
  background: #fff;
  border: 1.5px solid #EAE0F4;
  border-radius: 8px;
  padding: 8px 10px 8px 13px;
  font-size: .82rem;
  font-weight: 600;
  color: #1A1A1A;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  line-height: 1;
}
.lang-btn .chevron {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6B6B7B;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.lang-btn.open .chevron { transform: rotate(180deg); }
.lang-btn:hover { border-color: #C76CE1; }

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1px solid #EAE0F4;
  border-radius: 12px;
  padding: 6px;
  min-width: 155px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  z-index: 9999;
}
.lang-menu.open { display: block; }

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

.lang-menu button {
  display: flex !important;
  width: 100%;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 9px 12px;
  font-size: .84rem;
  font-weight: 600;
  color: #6B6B7B;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: .15s ease;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  white-space: nowrap;
  line-height: 1;
}
.lang-menu button:hover { background: #F2EAF8; color: #1A1A1A; }
.lang-menu button.active { background: rgba(199,108,225,.10); color: #C76CE1; font-weight: 700; }

/* ─ Responsive ─ */
@media(max-width:900px){
  .nav-links, .nav-cta { display: none }
  .ham { display: block }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr }
}
@media(max-width:560px){
  .footer-grid { grid-template-columns: 1fr }
  .cta-inner { padding: 48px 24px }
}

/* ── Free Tools footer links ── */
footer ul a[href*="snapit"] {
  color: #C76CE1 !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
footer ul a[href*="snapit"]::before {
  content: "✦";
  font-size: .65rem;
  opacity: .7;
}
footer ul a[href*="snapit"]:hover {
  color: #B85DD0 !important;
}