/* ========= GiftFinder AI — Professional UI (Glass / Neon) ========= */

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
[hidden]{ display:none !important; }

/* ---------- Variables ---------- */
:root{
  --bg1:#0f0f0f;
  --bg2:#1a1a1a;
  --text:#f5f5f5;
  --muted:#bdbdbd;

  --glass: rgba(18,18,22,.62);
  --glass-strong: rgba(18,18,22,.88);
  --border: rgba(255,255,255,.14);

  --grad: linear-gradient(45deg,#ff3cac,#784ba0,#2b86c5);
  --grad2: linear-gradient(90deg,#ff7bd1,#7b7bff);
  --grad-success: linear-gradient(90deg,#00d18f,#36d1ff);

  --shadow: 0 22px 60px rgba(0,0,0,.6);
  --shadow-soft: 0 12px 30px rgba(0,0,0,.45);

  --r:22px;
  --r2:16px;
  --header-h:72px;

  --ease: cubic-bezier(.2,.9,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 360ms;
}

/* ---------- Base ---------- */
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  color:var(--text);
}

.container{
  width:min(1200px, 92%);
  margin:0 auto;
}

.w-100{ width:100%; }
.muted{ color: var(--muted); opacity:.9; }

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background: rgba(15,15,20,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.site-main{ padding-top: var(--header-h); }

.hdr-grid{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-mark{
  width:36px; height:36px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.brand-name{
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:.2px;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
}

/* Status area */
.header-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left: 6px;
}

/* PRO badge */
.pro-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  color:#001a14;
  background: var(--grad-success);
  border:0;
  box-shadow: 0 12px 28px rgba(54,209,255,.20);
  user-select:none;
  white-space:nowrap;
}
.pro-badge .dot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}

/* Save counter pill */
.save-counter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
  user-select:none;
  white-space:nowrap;
}
.save-counter.pro{
  background: var(--grad-success);
  border:0;
  color:#001a14;
}
.save-counter.free{ color:#fff; }

/* Desktop nav */
.main-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.main-nav a,
.main-nav button.nav-btn,
.main-nav button{
  font-size:.92rem;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.main-nav a:hover,
.main-nav button.nav-btn:hover,
.main-nav button:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,60,172,.55);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}

/* CTA in nav */
.pill-cta, .btn-mini{
  background: var(--grad2) !important;
  border:0 !important;
  font-weight:900;
  color:#fff;
  box-shadow: 0 10px 22px rgba(123,123,255,.16), 0 8px 18px rgba(255,123,209,.12);
  text-decoration:none;
}
.pill-cta:hover, .btn-mini:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 30px rgba(123,123,255,.22), 0 12px 26px rgba(255,123,209,.18);
}

/* Burger (desktop hidden) */
.menu-toggle{
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#fff;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.menu-toggle:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-1px);
}
.menu-toggle:active{ transform: scale(.96); }

/* ---------- Mobile menu overlay + drawer ---------- */
.menu-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  z-index:1100;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--t) var(--ease);
}
.menu-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.mobile-drawer{
  position:fixed;
  top:14%;
  left:50%;
  transform: translateX(-50%) translateY(8px) scale(.96);
  width:90%;
  max-width:380px;
  background: var(--glass-strong);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  padding:18px;
  z-index:1200;
  box-shadow: var(--shadow);

  opacity:0;
  display:none;
  transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease2);

  max-height: min(calc(100dvh - 120px), 560px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.open{
  display:block;
  opacity:1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.drawer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.drawer-close{
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
}
.drawer-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 6px 0 10px;
}

.drawer-nav a,
.drawer-nav button{
  display:block;
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  margin:6px 0;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  text-decoration:none;
  font-weight:900;
  color:#fff;
  cursor:pointer;
}
.drawer-nav a:hover,
.drawer-nav button:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,60,172,.55);
}
.drawer-cta{
  background: var(--grad);
  border:0 !important;
  text-align:center !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.35);
}

.no-scroll{ overflow:hidden !important; }

/* ---------- Buttons ---------- */
/* ✅ include .btn-secondary so all secondary CTAs look like buttons */
button, .btn, .btn-primary, .btn-secondary, .pill-cta, .btn-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:800;
  padding:12px 18px;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease),
    opacity var(--t) var(--ease),
    background var(--t) var(--ease),
    border-color var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* IMPORTANT: stop default link underline inside button-like anchors */
.btn, .btn-primary, .btn-secondary, .pill-cta, .btn-mini{
  text-decoration:none;
}

.btn, .btn-primary{
  background: var(--grad);
  color:#fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.btn:hover, .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.btn-secondary{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.btn-secondary:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(123,123,255,.45);
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
}

/* ✅ Make "Виж плановете" on hero look premium */
.hero-cta .btn-secondary{
  position: relative;
  overflow: hidden;
}
.hero-cta .btn-secondary::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: var(--grad2);
  opacity:.22;
  filter: blur(10px);
  z-index:0;
}
.hero-cta .btn-secondary > *{ position:relative; z-index:1; }

/* ---------- Hero ---------- */
.hero{
  padding: 6.8rem 0 2.8rem;
  text-align:center;
}

/* ✅ HERO title (mobile optimized: aims for 2 lines, not 3) */
.hero-title{
  margin:0 auto 12px;
  max-width: 22ch;
  font-size: clamp(2.05rem, 3vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: .2px;
  text-align:center;

  background: linear-gradient(90deg,#ff3cac,#2b86c5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.hero p{
  max-width: 820px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.65;
  text-align:center;
}

.hero-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero-footnote{
  margin:14px auto 0;
  max-width: 820px;
  opacity:.80;
  font-size:.98rem;
  line-height:1.55;
  text-align:center;
}

/* Trust pills */
.pricing-trust{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:800;
  font-size:.92rem;
  color:#fff;
}

/* ---------- Sections ---------- */
.form-section, .results, .how-it-works{
  padding: 1.6rem 0 2.2rem;
}

/* ---------- Form ---------- */
form{
  margin:0 auto;
  max-width: 980px;
  padding: 18px;
  background: rgba(18,18,22,.60);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}
.form-intro, .form-note{
  text-align:center;
  margin: 0 0 10px;
  opacity:.85;
  line-height:1.5;
}
.form-note{ margin-top:10px; opacity:.75; font-size:.95rem; }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

form input, form select, form textarea{
  width:100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  outline:none;
  transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
form input::placeholder, form textarea::placeholder{
  color: rgba(255,255,255,.55);
}
form input:hover, form select:hover, form textarea:hover{
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.20);
}
form input:focus, form select:focus, form textarea:focus{
  border-color: rgba(255,60,172,.55);
  box-shadow: 0 0 0 4px rgba(255,60,172,.14), 0 18px 55px rgba(0,0,0,.42);
  transform: translateY(-1px);
}

.form-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* ---------- Cards / Results ---------- */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card{
  background: rgba(25,25,28,.80);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow);
  border-color: rgba(255,60,172,.55);
}

.card-body{ padding: 18px; }
.card-body h3{
  margin:0 0 8px;
  font-size: 1.05rem;
}
.card-body p{
  margin:0;
  color: rgba(255,255,255,.78);
  font-size:.95rem;
  line-height: 1.55;
}

.card-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.btn-save{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  padding:11px 16px;
  border-radius:999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.btn-save:hover{
  transform: translateY(-1px);
  background: rgba(255,60,172,.18);
  border-color: rgba(255,60,172,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 6px rgba(255,60,172,.12);
}
.btn-save.saved,
.btn-save:disabled{
  background: var(--grad-success);
  border:0;
  color:#001a14;
  cursor: default;
  opacity:.95;
  transform:none;
}

.empty{
  padding: 14px 0;
  opacity: .78;
  text-align:center;
}

.save-counter-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin: 8px 0 14px;
}
.save-counter-upgrade{
  font-weight:900;
  text-decoration:none;
  opacity:.85;
}
.save-counter-upgrade:hover{ opacity:1; text-decoration:underline; }

.new-ideas-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:22px;
}

/* ---------- Pricing ---------- */
.pricing-hero{
  padding: 6.6rem 0 1.4rem;
  text-align:center;
}
.pricing-hero h1{
  margin: 0 0 10px;
  font-size: clamp(2.0rem, 3vw, 2.65rem);
  background: linear-gradient(90deg,#ff3cac,#2b86c5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pricing-hero .sub{
  margin: 0 auto;
  max-width: 760px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* ✅ pricing plans grid (desktop side-by-side, mobile stacked) */
.plans-section{ padding: 1.2rem 0 2.2rem; }

.plans-grid,
.pricing-grid,
.plans-grid.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Plan card */
.pricing-card,
.plan-card{
  position: relative;
  background: rgba(25,25,28,.80);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  min-width: 0;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pricing-card:hover,
.plan-card:hover{
  border-color: rgba(255,60,172,.55);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

/* Optional "popular/best" helpers */
.pricing-card-popular{ transform: translateY(-6px); border-color: rgba(255,60,172,.55); box-shadow: var(--shadow); }
.pricing-card-popular:hover{ transform: translateY(-8px); }
.pricing-card-best{ border-color: rgba(123,123,255,.38); }

.badge, .pricing-badge{
  position:absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.pricing-badge-best{ background: rgba(123,123,255,.16); border-color: rgba(123,123,255,.35); }

.old-price{
  text-decoration: line-through;
  opacity: .65;
  margin-right: 8px;
  font-weight: 900;
}

/* Make pricing CTA buttons stretch nicely */
.pricing-card .btn,
.pricing-card .btn-primary,
.pricing-card .btn-secondary,
.plan-card .btn,
.plan-card .btn-primary,
.plan-card .btn-secondary{
  width: 100%;
}

/* ---------- AUTH (Login/Register) ---------- */
.auth-wrap{
  min-height: calc(100vh - var(--header-h));
  padding: 6.6rem 0 3.0rem;
}
.auth-container{
  display:flex;
  justify-content:center;
}
.auth-card{
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,18,22,.62);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.auth-title{
  margin: 0 0 10px;
  font-size: 1.9rem;
  background: linear-gradient(90deg,#ff3cac,#2b86c5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.auth-sub{
  margin: 0 0 14px;
  color: rgba(255,255,255,.74);
  line-height: 1.6;
}
.auth-form{
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.auth-field{ margin: 12px 0; }
.auth-field label{
  display:block;
  margin: 0 0 8px;
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: .92rem;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 16px auto 12px;
  max-width: 560px;
  opacity: .7;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background: rgba(255,255,255,.12);
}
.auth-divider span{
  font-weight: 900;
  font-size: .9rem;
}
.auth-alt{
  margin: 10px auto 0;
  max-width: 560px;
  color: rgba(255,255,255,.72);
}
.auth-alt a{
  font-weight: 900;
  text-decoration:none;
  background: var(--grad2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.auth-alt a:hover{ text-decoration: underline; }

.auth-flashes{
  max-width: 560px;
  margin: 0 auto 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auth-flash{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
  font-weight: 800;
}
.auth-flash.error{ border-color: rgba(255,60,172,.45); background: rgba(255,60,172,.10); }
.auth-flash.success{ border-color: rgba(54,209,255,.35); background: rgba(54,209,255,.10); }

/* ---------- Footer + Powered by AI ---------- */
.site-footer{
  padding: 2.2rem 0;
  text-align:center;
  opacity:.78;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.ai-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
  color:#fff;
  background: linear-gradient(90deg,#ff3cac,#2b86c5);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity:.92;
  user-select:none;
}
.ai-badge:hover{ opacity:1; }

/* ---------- Toast ---------- */
#gfToast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2500;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(18,18,22,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  max-width: 340px;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
#gfToast.show{ opacity: 1; transform: translateY(0); }
#gfToast.success{ border-color: rgba(54,209,255,.35); }
#gfToast.error{ border-color: rgba(255,60,172,.45); }
#gfToast.info{ border-color: rgba(255,255,255,.18); }

/* ========================================================= */
/* 👁️ Password show / hide — FINAL (fix global button styles) */
/* ========================================================= */
.password-wrap{ position: relative; width: 100%; }
.password-wrap input{ width: 100%; padding-right: 56px !important; }
.password-wrap .toggle-password{
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;

  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 34px !important;
  height: 34px !important;

  cursor: pointer !important;
  font-weight: 900;
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgba(255,255,255,.92) !important;
  opacity: .78;
  user-select: none;
}
.password-wrap .toggle-password:hover{ opacity: 1; }
.password-wrap .toggle-password:active{ transform: translateY(-50%) scale(0.92) !important; }
.password-wrap .toggle-password[aria-pressed="true"]::after{
  content:"";
  position:absolute;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.85);
  transform: rotate(-35deg);
  border-radius: 999px;
}

/* ========================================================= */
/* ✅ AUTH GATE MODAL (Login/Register on first visit)          */
/* ========================================================= */
#authGateOverlay{
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(10px);
}

#authGateModal{
  position: fixed;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  z-index: 2700;

  width: min(560px, 92%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,18,22,.90);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 18px;

  animation: gfPop 220ms var(--ease2) both;
}

/* match your base.html classes */
#authGateModal .auth-gate-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  font-weight: 900;
  font-size: 1.08rem;
  line-height: 1.25;
}
#authGateModal .auth-gate-text{
  margin: 10px 0 0;
  opacity: .82;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.45;
}
#authGateModal .auth-gate-actions{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
#authGateModal .auth-gate-actions a.btn-primary,
#authGateModal .auth-gate-actions a.btn-secondary{
  min-width: 150px;
}

#authGateModal #authGateClose{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}

@keyframes gfPop{
  from{ opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); }
  to{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ========================================================= */
/* ✅ Upgrade modal base (FREE HOOK)                           */
/* The modal is injected inline by app.js                     */
/* ========================================================= */
#gfUpgradeOverlay{
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(10px);
}

/* (optional) make injected modal animation consistent */
#gfUpgradeModal{
  animation: gfPop 220ms var(--ease2) both;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* pricing stacked on mobile/tablet */
  .plans-grid,
  .pricing-grid,
  .plans-grid.pricing-grid{
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
  .pricing-card-popular{ transform:none; }
  .pricing-card-popular:hover{ transform:none; }
}

@media (max-width: 720px){
  .hero{ padding: 6.2rem 0 2.2rem; }

  /* tighter title -> reduces to 2 lines */
  .hero-title{
    max-width: 20ch;
    font-size: clamp(2.05rem, 9.2vw, 2.75rem);
    line-height: 1.10;
    letter-spacing: .15px;
  }

  .hero p{
    max-width: 560px;
    font-size: 1.05rem;
    line-height: 1.62;
  }

  .trust-pill{
    padding: 10px 14px;
    font-size: .95rem;
  }

  .form-grid{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: 1fr; }
  form{ padding: 14px; }

  #authGateModal{ top: 12%; }
}

/* Extra small phones */
@media (max-width: 380px){
  .hero-title{
    max-width: 19ch;
    font-size: clamp(1.92rem, 9.6vw, 2.45rem);
  }
}

/* HERO CTA underline fix */
.hero-cta a{
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.hero-cta .pill-cta,
.hero-cta .btn-secondary{
  line-height: 1;
  white-space: nowrap;
}

/* Make emoji NOT inherit transparent fill from gradient text */
.hero-emoji{
  display:inline-block;
  font-size: .92em;
  transform: translateY(1px);
  margin-left: .12em;

  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: rgba(255,255,255,.96) !important;

  filter: grayscale(1) brightness(1.10) contrast(1.06);
  opacity: .92;
  user-select: none;
}