/* ============================================================
   TransactAI — landing page (dark / luxury blue)
   Used by index.html only. The funnel pages (signup, login, billing,
   verify-email, reset-password) keep the light style.css theme.
   ============================================================ */

:root {
  --bg:        #05070e;
  --bg-2:      #0a0e1a;
  --text:      #eef2fb;
  --muted:     #97a0b8;
  --muted-2:   #5f6885;
  --blue:      #4f9cff;
  --blue-lt:   #9fd2ff;
  --blue-deep: #2f6fff;
  --cyan:      #5fe0ff;
  --navy:      #20375f;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --card:      rgba(255,255,255,0.025);
  --radius:    18px;
  --maxw:      1140px;
  --ease:      cubic-bezier(.16,.84,.34,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  font-weight:300; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------- ambient background ---------- */
.ambient { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient .glow { position:absolute; border-radius:50%; filter:blur(120px); opacity:.55; }
.glow.azure  { width:640px; height:640px; top:-200px; left:-120px;
  background:radial-gradient(circle, rgba(79,156,255,.55), transparent 70%); animation:drift 22s var(--ease) infinite alternate; }
.glow.deep   { width:700px; height:700px; top:28%; right:-220px;
  background:radial-gradient(circle, rgba(47,111,255,.42), transparent 70%); animation:drift2 27s var(--ease) infinite alternate; }
.glow.cyan   { width:540px; height:540px; bottom:-220px; left:26%;
  background:radial-gradient(circle, rgba(95,224,255,.26), transparent 70%); animation:drift 31s var(--ease) infinite alternate; }

@keyframes drift  { to { transform:translate(60px,40px) scale(1.12); } }
@keyframes drift2 { to { transform:translate(-50px,-30px) scale(1.08); } }

.ambient::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% -10%, transparent 40%, rgba(0,0,0,.6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1; }
section { position:relative; z-index:1; }

.eyebrow {
  font-size:11.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--blue-lt); font-weight:500; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before {
  content:""; width:6px; height:6px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 12px 2px rgba(79,156,255,.85);
}

.display { font-family:'Cormorant Garamond', serif; font-weight:300; line-height:1.04; letter-spacing:-.01em; }
.accent {
  background:linear-gradient(110deg, var(--blue-lt), var(--blue) 55%, var(--blue-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- logo mark ---------- */
.svg-defs { position:absolute; width:0; height:0; }
.mark { width:30px; height:30px; display:block; flex-shrink:0; filter:drop-shadow(0 4px 12px rgba(47,111,255,.4)); }
.mark-sm { width:26px; height:26px; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:500; letter-spacing:.02em;
  padding:15px 30px; border-radius:100px; cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  position:relative; white-space:nowrap;
}
.btn-primary {
  color:#05122b;
  background:linear-gradient(110deg, var(--blue-lt), var(--blue));
  box-shadow:0 0 0 1px rgba(159,210,255,.25), 0 14px 40px -14px rgba(79,156,255,.7);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 0 1px rgba(159,210,255,.45), 0 20px 52px -12px rgba(79,156,255,.9); }
.btn-ghost { color:var(--text); background:rgba(255,255,255,.03); border-color:var(--line-2); backdrop-filter:blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,.07); transform:translateY(-2px); }
.btn-lg { padding:17px 40px; font-size:15px; }
.btn .arrow { transition:transform .35s var(--ease); }
.btn:hover .arrow { transform:translateX(4px); }

/* ---------- nav ---------- */
header.nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s, border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
header.nav.scrolled { background:rgba(6,9,18,.74); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo { display:flex; align-items:center; gap:11px; font-size:18px; letter-spacing:.04em; font-weight:400; color:var(--text); text-decoration:none; }
.logo b { font-weight:500; }
.nav-right { display:flex; align-items:center; gap:22px; }
.nav-link { color:var(--muted); text-decoration:none; font-size:13.5px; letter-spacing:.02em; transition:color .3s; }
.nav-link:hover { color:var(--blue-lt); }
.nav .btn { padding:11px 22px; font-size:13px; }
@media(max-width:560px){ .nav .btn-text{ display:none; } .nav-link{ display:none; } }

/* ---------- hero ---------- */
.hero { min-height:100svh; display:flex; align-items:center; padding:120px 0 90px; }
.hero-grid { display:grid; gap:32px; max-width:920px; }
.hero h1 { font-size:clamp(44px, 7.6vw, 88px); }
.hero p.lead { font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:620px; font-weight:300; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note { font-size:13px; color:var(--muted-2); letter-spacing:.02em; }
.hero-note span { color:var(--blue-lt); }
.scroll-hint { margin-top:14px; display:flex; align-items:center; gap:12px; color:var(--muted-2); font-size:11px; letter-spacing:.28em; text-transform:uppercase; }
.scroll-hint .ln { width:46px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }

/* ---------- section header ---------- */
.sec-head { max-width:700px; margin-bottom:60px; }
.sec-head h2 { font-size:clamp(34px,5vw,58px); margin-top:20px; }
.sec-head p { color:var(--muted); margin-top:18px; font-size:17px; }

/* ---------- how it works ---------- */
.how  { padding:130px 0 110px; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(max-width:760px){ .cards{ grid-template-columns:1fr; } }
.card {
  position:relative; padding:36px 34px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--line); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s, background .5s;
}
.card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(79,156,255,.6), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .5s;
}
.card:hover { transform:translateY(-5px); background:rgba(255,255,255,.045); border-color:transparent; }
.card:hover::before { opacity:1; }
.card .ico {
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(140deg, rgba(79,156,255,.20), rgba(47,111,255,.10));
  border:1px solid var(--line-2); color:var(--blue-lt);
}
.card h3 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:27px; letter-spacing:.01em; margin-bottom:10px; }
.card p { color:var(--muted); font-size:15px; }
.card .num { position:absolute; top:30px; right:34px; font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--muted-2); letter-spacing:.1em; }

/* ---------- emotional band ---------- */
.band { padding:60px 0 40px; text-align:center; }
.band .quote { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(30px,5vw,54px); line-height:1.18; max-width:880px; margin:0 auto; }
.band .quote em { font-style:italic; }
.band .sig { margin-top:28px; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); }

/* ---------- pricing / signup ---------- */
.signup { padding:60px 0 140px; }
.panel {
  position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line-2);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(79,156,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  padding:74px 40px; text-align:center;
}
.panel .eyebrow { justify-content:center; }
.panel h2 { font-size:clamp(36px,5.5vw,62px); margin:22px auto 18px; max-width:15ch; }
.panel .sub { color:var(--muted); max-width:540px; margin:0 auto 14px; font-size:17px; }

.price { margin:34px 0 10px; display:flex; align-items:baseline; justify-content:center; gap:6px; }
.price .amt { font-family:'Cormorant Garamond',serif; font-size:64px; font-weight:400; line-height:1; }
.price .per { color:var(--muted); font-size:15px; }
.price .strike { color:var(--muted-2); text-decoration:line-through; font-size:20px; margin-right:6px; align-self:center; }
.price-note { color:var(--blue-lt); font-size:14px; letter-spacing:.06em; margin-bottom:30px; }

.perks { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:0 auto 40px; max-width:640px; }
.perk { display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); }
.perk svg { color:var(--blue); flex-shrink:0; }

.trust { margin-top:26px; font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center; }
.trust svg { color:var(--muted); }
.signin-note { margin-top:18px; font-size:13.5px; color:var(--muted); }
.signin-note a { color:var(--blue-lt); text-decoration:none; }
.signin-note a:hover { text-decoration:underline; }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--line); padding:46px 0; position:relative; z-index:1; }
.foot-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-inner .logo { font-size:16px; }
.foot-links { display:flex; gap:26px; flex-wrap:wrap; }
.foot-links a { color:var(--muted); text-decoration:none; font-size:13.5px; transition:color .3s; }
.foot-links a:hover { color:var(--blue-lt); }
.copy { color:var(--muted-2); font-size:12.5px; }
.foot-legal { width:100%; color:var(--muted-2); font-size:12px; margin-top:6px; }

/* ---------- reveal ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce) {
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}