/* ============================================================
   FlowRift — shared design system
   Brand DNA: near-black canvas, acid-green signal, Syne display.
   Elevated for multi-page agency architecture.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#08090A;--surface:#0F1012;--surface2:#161719;
  --border:#ffffff0f;--border2:#ffffff1a;
  --text:#F2F0EB;--muted:#6B6B72;--muted2:#9A9AA3;
  --accent:#D4FF47;--accent2:#B8E832;
  --accent-dim:#D4FF4715;--accent-border:#D4FF4730;--red:#FF4747;
  --maxw:1180px;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Instrument Sans',system-ui,sans-serif;font-weight:300;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#08090A}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem 2.5rem;border-bottom:1px solid var(--border);
  background:rgba(8,9,10,0.82);backdrop-filter:blur(20px);transition:padding .3s,box-shadow .3s}
nav.scrolled{padding:0.7rem 2.5rem;box-shadow:0 10px 40px rgba(0,0,0,0.45)}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-0.03em;display:flex;align-items:center;gap:0.5rem}
.logo span{color:var(--accent)}
.logo svg{width:24px;height:24px}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:0.86rem;font-weight:400;color:var(--muted2);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text)}
.nav-has-drop{position:relative}
.nav-drop{position:absolute;top:calc(100% + 1.2rem);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--surface2);border:1px solid var(--border2);border-radius:1rem;padding:0.8rem;
  min-width:300px;opacity:0;visibility:hidden;transition:all .25s;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.nav-has-drop:hover .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop a{display:block;padding:0.7rem 0.9rem;border-radius:0.6rem;color:var(--muted2);transition:background .2s,color .2s}
.nav-drop a:hover{background:var(--bg);color:var(--text)}
.nav-drop a strong{display:block;color:var(--text);font-family:'Syne',sans-serif;font-weight:700;font-size:0.9rem;margin-bottom:0.15rem}
.nav-drop a span{font-size:0.78rem;color:var(--muted)}
.nav-pill{background:var(--accent);color:#08090A;font-family:'Syne',sans-serif;font-size:0.78rem;
  font-weight:700;letter-spacing:0.04em;padding:0.6rem 1.3rem;border-radius:2rem;border:none;
  cursor:pointer;transition:transform .2s,background .2s;white-space:nowrap}
.nav-pill:hover{transform:scale(1.04);background:var(--accent2)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer}

/* ---------- SHARED PRIMITIVES ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 2.5rem}
.eyebrow{display:inline-flex;align-items:center;gap:0.6rem;background:var(--accent-dim);
  border:1px solid var(--accent-border);color:var(--accent);font-size:0.7rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;padding:0.42rem 1.05rem;border-radius:2rem}
.h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.6rem,6vw,5.5rem);
  line-height:0.97;letter-spacing:-0.045em}
.h2{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1.04;letter-spacing:-0.04em}
.h3{font-family:'Syne',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-0.02em}
.hl{color:var(--accent);font-style:italic}
.dim{color:var(--muted)}
.lead{font-size:1.08rem;font-weight:300;color:var(--muted2);line-height:1.75}
.section-label{font-size:0.7rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.3rem}
.btn{display:inline-flex;align-items:center;gap:0.5rem;font-family:'Syne',sans-serif;font-size:0.84rem;
  font-weight:700;letter-spacing:0.03em;padding:0.85rem 1.7rem;border-radius:2.5rem;cursor:pointer;
  transition:all .2s;border:1px solid transparent}
.btn-primary{background:var(--accent);color:#08090A}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
section{padding:7rem 0}
.center{text-align:center}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{padding:11rem 0 4rem;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .lead{max-width:620px;margin-top:1.6rem}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,black,transparent 100%);pointer-events:none}
.hero-glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:760px;height:520px;background:radial-gradient(ellipse,rgba(212,255,71,0.08),transparent 70%);pointer-events:none}

/* ---------- CARDS / GRIDS ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:1.2rem;padding:2rem;
  transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--border2);transform:translateY(-4px)}
.card .h3{margin-bottom:0.7rem}
.card p{font-size:0.9rem;color:var(--muted2);line-height:1.7}
.card-num{font-family:'Syne',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;color:var(--muted);margin-bottom:1.3rem}
.card-icon{font-size:1.7rem;margin-bottom:1rem;display:block}
.card-link{display:inline-flex;align-items:center;gap:0.4rem;margin-top:1.3rem;color:var(--accent);font-family:'Syne',sans-serif;font-weight:700;font-size:0.82rem;transition:gap .2s}
.card-link:hover{gap:0.7rem}

/* ---------- STAT STRIP ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:1.2rem;overflow:hidden}
.stat{background:var(--bg);padding:2rem 1.6rem;text-align:center}
.stat b{font-family:'Syne',sans-serif;font-size:2.4rem;font-weight:800;color:var(--accent);letter-spacing:-0.03em;display:block;line-height:1}
.stat span{font-size:0.78rem;color:var(--muted2);margin-top:0.5rem;display:block;letter-spacing:0.03em}

/* ---------- MARQUEE ---------- */
.marquee-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;padding:1rem 0;background:var(--surface)}
.marquee-track{display:flex;gap:3rem;animation:marquee 24s linear infinite;white-space:nowrap;width:max-content}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:0.8rem;font-family:'Syne',sans-serif;font-size:0.76rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.marquee-dot{color:var(--accent);font-size:0.5rem}

/* ---------- PROCESS ---------- */
.process{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;counter-reset:step}
.pstep{position:relative}
.pstep .n{width:42px;height:42px;border-radius:0.7rem;background:var(--accent-dim);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;color:var(--accent);margin-bottom:1.1rem}
.pstep h4{font-family:'Syne',sans-serif;font-weight:700;font-size:0.95rem;margin-bottom:0.5rem}
.pstep p{font-size:0.8rem;color:var(--muted2);line-height:1.6}

/* ---------- PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;text-align:left}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:1.3rem;padding:2.4rem 2rem;position:relative;transition:border-color .3s,transform .3s}
.price-card:hover{border-color:var(--border2);transform:translateY(-4px)}
.price-card.featured{border-color:var(--accent-border);background:var(--surface2)}
.price-card.featured:hover{border-color:var(--accent)}
.featured-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--accent);color:#08090A;font-family:'Syne',sans-serif;font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:0.3rem 1rem;border-radius:0 0 0.7rem 0.7rem}
.price-tier{font-family:'Syne',sans-serif;font-size:0.74rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:1.1rem}
.price-num{font-family:'Syne',sans-serif;font-size:2.7rem;font-weight:800;letter-spacing:-0.04em;line-height:1}
.price-num small{font-size:1rem;color:var(--muted);font-weight:400}
.price-period{font-size:0.84rem;color:var(--muted);margin:0.3rem 0 1.4rem}
.price-feat{list-style:none;display:flex;flex-direction:column;gap:0.7rem;margin:1.4rem 0 1.8rem}
.price-feat li{display:flex;gap:0.6rem;font-size:0.85rem;color:var(--muted2);line-height:1.5}
.price-feat li::before{content:'✓';color:var(--accent);font-weight:700;flex-shrink:0}
.divider{border:none;border-top:1px solid var(--border);margin:1.4rem 0}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;background:none;border:none;color:var(--text);font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;text-align:left;padding:1.4rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-q::after{content:'+';color:var(--accent);font-size:1.4rem;flex-shrink:0;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted2);font-size:0.92rem;line-height:1.7}
.faq-item.open .faq-a{max-height:300px;padding-bottom:1.4rem}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;position:relative;overflow:hidden}
.cta-band .glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(212,255,71,0.07),transparent 70%);pointer-events:none}

/* ---------- FOOTER ---------- */
footer{background:var(--bg);border-top:1px solid var(--border);padding:4rem 2.5rem 2.5rem}
.footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--border)}
.footer-brand .logo{margin-bottom:1rem}
.footer-brand p{font-size:0.86rem;color:var(--muted2);line-height:1.7;max-width:280px}
.footer-col h5{font-family:'Syne',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.footer-col a{display:block;font-size:0.88rem;color:var(--muted2);padding:0.35rem 0;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{max-width:var(--maxw);margin:2rem auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8rem;color:var(--muted)}

/* ---------- REVEAL ANIM ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .grid-4,.stat-strip,.process{grid-template-columns:repeat(2,1fr)}
  .grid-3,.price-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  nav{padding:1rem 1.3rem}
  .wrap{padding:0 1.3rem}
  .nav-links{display:none;position:fixed;top:64px;left:0;right:0;background:var(--surface2);flex-direction:column;align-items:stretch;gap:0;padding:1rem;border-bottom:1px solid var(--border2)}
  .nav-links.show{display:flex}
  .nav-links a{padding:0.9rem 0.5rem;border-bottom:1px solid var(--border)}
  .nav-drop{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:none;border:none;min-width:0;padding:0.3rem 0 0.3rem 1rem}
  .nav-toggle{display:block}
  .grid-2,.grid-4,.stat-strip,.process{grid-template-columns:1fr}
  section{padding:4.5rem 0}
  .footer-grid{grid-template-columns:1fr}
}

/* setup fee line on pricing cards */
.price-setup{font-size:0.78rem;color:var(--accent);font-weight:500;margin-top:0.3rem;letter-spacing:0.01em;}

/* add-on automations grid */
.addon-grid{display:flex;flex-direction:column;gap:0.1rem;}
.addon{display:flex;justify-content:space-between;align-items:center;padding:0.8rem 0;border-bottom:1px solid var(--border);}
.addon:last-child{border-bottom:none}
.addon-name{font-size:0.9rem;color:var(--text);font-weight:400}
.addon-price{font-family:var(--font-display);font-size:0.9rem;font-weight:700;color:var(--accent)}

/* tasteful bundle announcement bar */
.promo-bar{position:fixed;top:0;left:0;right:0;z-index:101;min-height:40px;display:flex;align-items:center;justify-content:center;gap:0.8rem;background:rgba(15,16,18,0.92);border-bottom:1px solid var(--accent-border);backdrop-filter:blur(20px);font-size:0.82rem;padding:0.5rem 3rem;text-align:center;}
.promo-bar .promo-tag{font-family:var(--font-display);font-weight:700;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:#08090A;background:var(--accent);padding:0.22rem 0.6rem;border-radius:1rem;flex-shrink:0;}
.promo-bar .promo-text{color:var(--muted2);font-weight:300;}
.promo-bar .promo-text strong{color:var(--text);font-weight:600;}
.promo-bar .promo-close{position:absolute;right:1.3rem;background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:0.3rem;transition:color 0.2s;}
.promo-bar .promo-close:hover{color:var(--text)}
.promo-bar.hide{display:none}
.promo-bar ~ nav{top:40px}
.promo-bar.hide ~ nav{top:0}
@media(max-width:768px){
  .promo-bar{font-size:0.74rem;padding:0.5rem 2.6rem 0.5rem 1rem;min-height:0}
  .promo-bar ~ nav{top:54px}
  .promo-bar .promo-close{right:0.8rem}
}