/**********************************
 * Homepage redesign (pages/index.php only). Tokens copied verbatim
 * from pages/css/custom.css so the marketing page is a visual sibling
 * of the actual app, not a separate palette. Page-scoped -- home.css
 * stays untouched since login.php/signup.php still depend on it.
 *********************************/
:root{
	--ink:#12203D; --ink-soft:#2A3C63;
	--accent:#FF6B4A; --accent-soft:#FFE4DB;
	--momentum:#2DD4BF; --momentum-soft:#D8F7F1;
	--bg:#F5F6FA; --surface:#FFFFFF; --line:#E7E9F0;
	--text:#1B2436; --muted:#707A94;
	--amber:#F5A524; --amber-soft:#FDF0D8;
	--purple:#6366F1; --purple-soft:#E7E7FE;
	--radius:16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:'Inter', sans-serif;
	font-size:1.05rem;
	line-height:1.6;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
section{ position:relative; }

h1,h2,h3{
	font-family:'Space Grotesk', sans-serif;
	letter-spacing:-0.01em;
	line-height:1.16;
	color:var(--ink);
	margin:0 0 0.5em;
	text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,4.6vw,3.6rem); font-weight:700; }
h2{ font-size:clamp(1.7rem,3vw,2.35rem); font-weight:700; }
h3{ font-size:1.15rem; font-weight:600; }
p{ margin:0 0 1em; color:var(--muted); }
.lede{ font-size:1.2rem; max-width:600px; color:var(--muted); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
	color:var(--accent);
	margin-bottom:14px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------- buttons ---------- */
.btn{
	display:inline-flex; align-items:center; gap:9px;
	font-family:'Space Grotesk', sans-serif;
	font-weight:600; font-size:1rem;
	padding:14px 26px;
	border-radius:12px;
	text-decoration:none;
	border:1.5px solid transparent;
	cursor:pointer;
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn-primary{
	background:var(--ink); color:#fff;
	box-shadow:0 14px 28px -14px rgba(18,32,61,0.55);
}
.btn-primary:hover{ background:#0C1830; transform:translateY(-2px); color:#fff; }
.btn-outline{
	background:transparent; color:var(--ink); border-color:var(--line);
}
.btn-outline:hover{ border-color:var(--ink); }
.btn-white{
	background:#fff; color:var(--ink);
}
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,0.35); }
.btn-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.fineprint{ font-size:0.92rem; color:var(--muted); }

/* ---------- shared surfaces ---------- */
.panel{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 20px 44px -30px rgba(18,32,61,0.35);
}
.pill{
	display:inline-flex; align-items:center; gap:5px;
	font-size:0.74rem; font-weight:700; letter-spacing:0.01em;
	padding:4px 11px; border-radius:999px;
}
.pill.momentum{ background:var(--momentum-soft); color:#0E7C6E; }
.pill.accent{ background:var(--accent-soft); color:#C7401F; }
.pill.amber{ background:var(--amber-soft); color:#946400; }

/* ---------- abstract background blobs (restrained) ---------- */
.blob-field{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; }

/* ==================================================================
   NAV
   ================================================================== */
.nav{
	position:sticky; top:0; z-index:40;
	background:rgba(245,246,250,0.9);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:32px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; font-size:0.96rem; font-weight:500; }
.nav-links a{ text-decoration:none; color:var(--muted); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* ==================================================================
   HERO
   ================================================================== */
.hero{ padding:84px 0 76px; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.badge-row{ display:flex; gap:10px; align-items:center; margin-top:28px; }
.stars{ display:flex; gap:2px; }
.stars svg{ width:15px; height:15px; }
.badge-text{ font-size:0.92rem; color:var(--muted); }

.mock-stage{ position:relative; height:460px; }
.mock-main{ position:absolute; top:14px; left:0; width:88%; padding:22px 22px 26px; }
.mock-titlebar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mock-titlebar .dots{ display:flex; gap:6px; }
.mock-titlebar .dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.mock-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border-radius:11px; background:var(--bg); margin-bottom:10px; }
.mock-row .who{ display:flex; align-items:center; gap:10px; }
.mock-avatar{ width:30px; height:30px; border-radius:50%; flex:none; }
.mock-meta{ font-size:0.8rem; color:var(--muted); }
.mock-name{ font-size:0.92rem; font-weight:600; color:var(--ink); }

.float-card{ position:absolute; padding:16px 18px; width:220px; }
.float-card.invoice{ top:24px; right:-6px; }
.float-card.calendar{ bottom:18px; left:22px; }
.float-label{ font-size:0.76rem; color:var(--muted); margin-bottom:6px; }
.float-amount{ font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; color:var(--ink); }
.cal-strip{ display:flex; gap:6px; margin-top:10px; }
.cal-day{ flex:1; text-align:center; border-radius:8px; padding:6px 0; background:var(--bg); font-size:0.72rem; color:var(--muted); }
.cal-day.active{ background:var(--ink); color:#fff; font-weight:700; }

/* ==================================================================
   PROBLEM
   ================================================================== */
.problem{ padding:70px 0; background:var(--surface); }
.problem .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.scatter{ position:relative; height:340px; }
.chip{
	position:absolute; display:flex; align-items:center; gap:8px;
	padding:10px 16px; border-radius:999px;
	background:var(--bg); border:1px solid var(--line);
	font-size:0.88rem; font-weight:600; color:var(--muted);
	box-shadow:0 10px 22px -16px rgba(18,32,61,0.4);
}
.chip svg{ width:15px; height:15px; opacity:0.6; }
.scatter svg.connector{ position:absolute; inset:0; width:100%; height:100%; }
.problem-list{ margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.problem-list li{ display:flex; gap:11px; align-items:flex-start; font-size:1.02rem; color:var(--muted); }
.problem-list svg{ flex:none; width:18px; height:18px; margin-top:3px; }

/* ==================================================================
   GUIDE
   ================================================================== */
.guide{ padding:76px 0; background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.guide .wrap{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:56px; align-items:center; position:relative; z-index:1; }
.guide .eyebrow{ color:var(--momentum); }
.guide .eyebrow::before{ background:var(--momentum); }
.guide h2{ color:#fff; }
.guide p{ color:rgba(255,255,255,0.72); }
.portraits{ display:flex; gap:16px; }
.portrait{
	flex:1; aspect-ratio:1/1.1; border-radius:16px;
	position:relative; overflow:hidden;
	box-shadow:0 20px 44px -24px rgba(0,0,0,0.6);
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait span{
	position:absolute; left:14px; bottom:14px;
	font-family:'Space Grotesk',sans-serif; font-size:0.8rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
	color:#fff; background:rgba(0,0,0,0.45); padding:6px 13px; border-radius:999px;
}
.guide-cred{ display:flex; gap:22px; margin-top:26px; flex-wrap:wrap; }
.cred{ display:flex; align-items:center; gap:9px; font-size:0.94rem; color:rgba(255,255,255,0.85); font-weight:500; }
.cred svg{ width:17px; height:17px; color:var(--momentum); }

/* ==================================================================
   PLAN
   ================================================================== */
.plan{ padding:78px 0; background:var(--bg); }
.plan-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.plan-step{ padding:26px 24px; position:relative; }
.plan-step .num{
	font-family:'Space Grotesk',sans-serif; font-size:0.82rem; font-weight:700;
	color:var(--ink); background:var(--bg); border:1px solid var(--line);
	width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
	margin-bottom:16px;
}
.plan-step h3{ margin-bottom:6px; }
.plan-step p{ font-size:0.98rem; margin:0; }

/* ==================================================================
   FEATURES
   ================================================================== */
.features{ padding:78px 0 66px; background:var(--surface); }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px; }
.feat-card{ padding:24px 22px; }
.feat-card .feat-visual{
	height:104px; border-radius:11px; background:var(--bg);
	display:flex; align-items:center; justify-content:center; margin-bottom:18px;
	position:relative; overflow:hidden;
}
.feat-card h3{ margin-bottom:6px; font-size:1.04rem; }
.feat-card p{ font-size:0.94rem; margin:0; }

.fv-invoice{ display:flex; flex-direction:column; gap:6px; width:78%; }
.fv-row{ display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); border-radius:7px; padding:6px 10px; }
.fv-row .amt{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.82rem; color:var(--ink); }
.fv-cal{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; width:74%; }
.fv-cal div{ background:#fff; border:1px solid var(--line); border-radius:6px; height:22px; }
.fv-cal div.hi{ background:var(--ink); }
.fv-doc{ width:60%; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px; }
.fv-doc .ln{ height:5px; border-radius:3px; background:var(--line); margin-bottom:6px; }
.fv-doc .ln:last-child{ width:60%; margin-bottom:0; }
.fv-track{ width:76%; }
.fv-track .bar{ height:8px; border-radius:4px; background:var(--line); overflow:hidden; margin-bottom:8px; }
.fv-track .bar i{ display:block; height:100%; background:var(--momentum); width:64%; }
.fv-people{ display:flex; }
.fv-people .av{ width:34px; height:34px; border-radius:50%; margin-left:-8px; border:2px solid #fff; }
.fv-people .av:first-child{ margin-left:0; }

/* ==================================================================
   MID CTA
   ================================================================== */
.midcta-wrap{ padding:0 28px 84px; background:var(--surface); }
.midcta{
	max-width:1180px; margin:0 auto;
	background:var(--ink);
	border-radius:20px;
	padding:44px 48px;
	display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	color:#fff;
	position:relative; overflow:hidden;
}
.midcta h3{ color:#fff; margin:0; font-size:1.5rem; }
.midcta p{ color:rgba(255,255,255,0.7); margin:6px 0 0; font-size:1rem; }

/* ==================================================================
   TESTIMONIALS
   ================================================================== */
.testimonials{ padding:80px 0 74px; background:var(--bg); }
.t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.t-card{ padding:26px 24px; }
.t-card svg.quote{ width:26px; height:20px; color:var(--line); margin-bottom:12px; }
.t-card p.body{ font-size:1rem; color:var(--text); }
.t-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.t-name{ font-family:'Space Grotesk',sans-serif; font-size:0.96rem; font-weight:700; color:var(--ink); }
.t-role{ font-size:0.86rem; color:var(--muted); }
.t-stars{ display:flex; gap:2px; }
.t-stars svg{ width:13px; height:13px; }

/* ==================================================================
   PRICING
   ================================================================== */
.pricing{ padding:78px 0; background:var(--surface); }
.p-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:740px; margin:46px auto 0; }
.p-card{ padding:32px 28px; text-align:left; }
.p-card.featured{ background:var(--ink); color:#fff; border-color:var(--ink); }
.p-card.featured p{ color:rgba(255,255,255,0.65); }
.p-tag{ font-size:0.86rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
.p-card.featured .p-tag{ color:rgba(255,255,255,0.65); }
.p-amount{ font-family:'Space Grotesk',sans-serif; font-size:2.4rem; font-weight:700; color:var(--ink); margin:6px 0 20px; }
.p-card.featured .p-amount{ color:#fff; }
.p-amount span{ font-size:0.95rem; font-weight:500; color:var(--muted); }
.p-card.featured .p-amount span{ color:rgba(255,255,255,0.6); }
.p-list{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:10px; }
.p-list li{ display:flex; gap:10px; align-items:center; font-size:0.98rem; }
.p-list svg{ width:16px; height:16px; flex:none; color:var(--momentum); }

/* ==================================================================
   FAQ
   ================================================================== */
.faq{ padding:76px 0; background:var(--bg); }
.faq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px; }
.faq-item{ padding:20px 22px; cursor:pointer; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:14px; font-family:'Space Grotesk',sans-serif; font-size:0.98rem; font-weight:600; color:var(--ink); }
.faq-q svg{ width:18px; height:18px; flex:none; transition:transform .2s ease; color:var(--muted); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ margin:14px 0 0; font-size:0.96rem; }

/* ==================================================================
   FINAL + FOOTER
   ================================================================== */
.final{ padding:92px 0 64px; background:var(--ink); color:#fff; text-align:center; position:relative; overflow:hidden; }
.final .eyebrow{ color:var(--momentum); justify-content:center; }
.final .eyebrow::before{ background:var(--momentum); }
.final h2{ color:#fff; max-width:640px; margin-left:auto; margin-right:auto; }
.final p.lede{ color:rgba(255,255,255,0.68); margin:0 auto 30px; }
.footer{ padding:26px 0 40px; background:var(--ink); color:rgba(255,255,255,0.5); text-align:center; font-size:0.9rem; }
.footer a{ color:rgba(255,255,255,0.75); text-decoration:none; margin:0 8px; }
.footer a:hover{ text-decoration:underline; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width:980px){
	.hero .wrap, .problem .wrap, .guide .wrap{ grid-template-columns:1fr; }
	.mock-stage{ height:380px; }
	.feat-grid{ grid-template-columns:repeat(2,1fr); }
	.t-grid{ grid-template-columns:1fr; }
	.p-grid{ grid-template-columns:1fr; }
	.faq-grid{ grid-template-columns:1fr; }
	.plan-steps{ grid-template-columns:1fr; }
	.nav-links{ display:none; }
}
@media (max-width:620px){
	.feat-grid{ grid-template-columns:1fr; }
	.midcta{ flex-direction:column; text-align:center; }
	.scatter, .converge{ height:260px; }
}