/* Shared chrome for every page on 7tabs.org: design tokens, nav, the
   sign-in modal, buttons, section headers, footer. Page-specific layout
   (hero, feature grid, FAQ accordion, etc.) lives in that page's own
   stylesheet — see home.css / help.css. */

/* Plus Jakarta Sans — the pairing flagged for "B2B SaaS, indigo,
   enterprise, finance" (ui-ux-pro-max typography data), matching this
   site's actual brand hue by name. A plain @import here (rather than
   per-page <link> tags) keeps the font a single-point-of-control
   alongside the color tokens it's chosen to match. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  --bg:#12132b;
  --bg-soft:#171833;
  --panel:#1e1f3f;
  --panel-border:#33345f;
  --ink:#f2f0fb;
  --ink-dim:#b8b0e0;
  --ink-faint:#7d74ad;
  --brand:#2e2a78;
  --accent:#6c63ff;
  --accent-2:#9c95ff;
  --accent-grad:linear-gradient(135deg,#9c95ff 0%,#6c63ff 45%,#2e2a78 100%);
  --radius:16px;
  --shadow:0 20px 50px -20px rgba(46,42,120,.55);
  --maxw:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(108,99,255,.28), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(156,149,255,.14), transparent 55%),
    var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:96px 0}
@media (max-width:720px){section{padding:64px 0}}

/* Nav */
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(11,6,32,.72);
  animation:headerIn .5s cubic-bezier(.2,.7,.3,1);
}
/* Same moving gradient line as the footer's top edge, mirrored here —
   one shared motion language instead of a flat static border. */
header::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(108,99,255,.75), rgba(156,149,255,.75), transparent);
  background-size:200% 100%;
  animation:footerGlow 7s linear infinite;
}
@keyframes headerIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
nav.wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:.2px;text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.nav-links{display:flex;align-items:center;gap:34px;font-size:15px;color:var(--ink-dim)}
.nav-links a{text-decoration:none;transition:color .15s;position:relative;padding-bottom:5px}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:var(--accent-grad);transition:right .28s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after, .nav-links a.active::after{right:0}
.nav-links a.active{color:var(--ink)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-grad);color:#fff;
  padding:10px 20px;border-radius:999px;font-weight:600;font-size:14.5px;
  box-shadow:0 8px 24px -8px rgba(108,99,255,.7);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;border:0;cursor:pointer;font-family:inherit;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(108,99,255,.85)}
@media (max-width:860px){
  .nav-links{display:none}
}
@media (prefers-reduced-motion: reduce){
  header{animation:none}
  header::after{animation:none}
}

/* Sign-in modal */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(5,2,18,.72);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--panel-border);
  border-radius:20px;padding:32px;position:relative;box-shadow:var(--shadow);
  /* The signup panel (business name/your name/email/phone/password) is
     taller than the plain sign-in form and can exceed viewport height
     on shorter windows — scroll inside the card instead of letting it
     get clipped by the fixed overlay. */
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.modal-close{
  position:absolute;top:16px;right:16px;background:none;border:0;color:var(--ink-faint);
  font-size:24px;line-height:1;cursor:pointer;padding:4px;
}
.modal-close:hover{color:var(--ink)}
.modal h3{margin:0 0 6px;font-size:20px}
.modal-sub{margin:0 0 20px;color:var(--ink-dim);font-size:14px}
.field-label{display:block;font-size:13px;font-weight:600;color:var(--ink-dim);margin:14px 0 6px}
.field-input{
  width:100%;background:var(--bg-soft);border:1px solid var(--panel-border);color:var(--ink);
  padding:12px 14px;border-radius:10px;font-size:15px;font-family:inherit;
}
.field-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.modal-error{
  display:none;background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);
  color:#ff9b9b;font-size:13.5px;padding:10px 12px;border-radius:8px;margin-top:14px;
}
.modal-error.show{display:block}
#signInSubmit[disabled]{opacity:.6;cursor:default}

.link-btn{
  background:none;border:0;padding:0;font:inherit;color:var(--accent-2);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.link-btn:hover{color:var(--ink)}
.link-btn[disabled]{opacity:.5;cursor:default;text-decoration:none}

/* One-time code step — glassy soft-3D icon + digit boxes, entrance and
   feedback animation so this doesn't feel like a bare form dropped in. */
.otp-icon{
  width:56px;height:56px;margin:0 auto 18px;border-radius:16px;
  background:linear-gradient(160deg,rgba(108,99,255,.28),rgba(156,149,255,.14));
  border:1px solid rgba(108,99,255,.4);
  box-shadow:0 12px 30px -10px rgba(108,99,255,.55), inset 0 1px 0 rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  animation:otpIconIn .5s cubic-bezier(.2,.7,.3,1), otpIconFloat 3.6s ease-in-out .5s infinite;
}
.otp-icon svg{width:26px;height:26px;stroke:var(--accent-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes otpIconIn{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes otpIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.otp-icon.ok{
  background:linear-gradient(160deg,rgba(156,149,255,.32),rgba(156,149,255,.12));
  border-color:rgba(156,149,255,.55);animation:otpIconPop .5s cubic-bezier(.34,1.56,.64,1);
}
.otp-icon.ok svg{stroke:var(--accent-2)}
@keyframes otpIconPop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}

.otp-boxes{display:flex;gap:9px;justify-content:center;margin:0 0 4px}
.otp-box{
  width:44px;height:54px;text-align:center;font-size:22px;font-weight:700;
  background:var(--bg-soft);border:1px solid var(--panel-border);color:var(--ink);
  border-radius:11px;font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.otp-box:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.25);transform:translateY(-1px)}
.otp-box.filled{border-color:rgba(156,149,255,.55)}
.otp-boxes.shake{animation:otpShake .4s ease}
@keyframes otpShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}80%{transform:translateX(4px)}
}
@media (prefers-reduced-motion: reduce){
  .otp-icon, .otp-icon.ok{animation:none}
  .otp-boxes.shake{animation:none}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:12px;font-weight:700;font-size:16px;
  text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
}
.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 14px 34px -12px rgba(108,99,255,.8)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(108,99,255,.95)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}

/* Monthly/yearly billing-period toggle — shared here (not a page CSS
   file) since it's used on both pricing.html and checkout.html. Same
   pill-button language as .cat-nav/.related-chip elsewhere. */
.billing-toggle{
  display:flex;justify-content:center;gap:4px;margin:0 0 24px;
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:999px;padding:4px;width:fit-content;margin-left:auto;margin-right:auto;
}
.billing-toggle-opt{
  border:0;background:none;color:var(--ink-dim);font-size:14px;font-weight:600;
  padding:9px 20px;border-radius:999px;cursor:pointer;font-family:inherit;
  transition:background .18s ease,color .18s ease;
}
.billing-toggle-opt.active{background:var(--accent-grad);color:#fff}
.billing-toggle-save{font-size:11px;font-weight:700;margin-left:4px;color:var(--accent-2)}
.billing-toggle-opt.active .billing-toggle-save{color:rgba(255,255,255,.85)}

/* Section headers (shared layout, page CSS may still set --eyebrow color etc.) */
.section-head{text-align:center;max-width:640px;margin:0 auto 56px}
.eyebrow{color:var(--accent);font-weight:700;font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:12px}
h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 14px;letter-spacing:-.5px;font-weight:800}
.section-head p{color:var(--ink-dim);font-size:16.5px;margin:0}

/* Glassy soft-3D icon treatment — a translucent, faintly embossed panel
   with a glowing icon inside, instead of a flat filled square. */
.icon{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(160deg, rgba(108,99,255,.30), rgba(156,149,255,.08));
  border:1px solid rgba(108,99,255,.35);
  box-shadow:
    0 10px 26px -12px rgba(108,99,255,.6),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 18px -12px rgba(0,0,0,.4);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease;
}
.icon svg{
  width:22px;height:22px;stroke:var(--accent-2);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(156,149,255,.5));
}

footer{position:relative;overflow:hidden;padding:48px 0 36px}
/* Thin animated gradient line standing in for the border-top this used
   to have — a moving light instead of a static rule, echoing the same
   accent/teal pair used everywhere else in the motion system. */
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(108,99,255,.85), rgba(156,149,255,.85), transparent);
  background-size:200% 100%;
  animation:footerGlow 7s linear infinite;
}
@keyframes footerGlow{
  0%{background-position:0% 0}
  100%{background-position:-200% 0}
}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot-links{display:flex;gap:24px;font-size:14px;color:var(--ink-dim);flex-wrap:wrap;align-items:center}
.foot-links a, .foot-links button{text-decoration:none;transition:color .15s ease, transform .15s ease;display:inline-block}
.foot-links a:hover, .foot-links button:hover{color:var(--ink);transform:translateY(-2px)}
.foot-copy{color:var(--ink-faint);font-size:13px;margin-top:24px}
@media (prefers-reduced-motion: reduce){footer::before{animation:none}}

/* ---- Promo popup: appears on load/refresh, pushing the free trial ---- */
.promo-popup-overlay{
  display:none;position:fixed;inset:0;z-index:110;
  background:rgba(5,2,18,.72);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.promo-popup-overlay.open{display:flex}
.promo-popup{
  width:100%;max-width:440px;position:relative;text-align:center;
  background:linear-gradient(165deg,#22234a,#15162e);
  border:1px solid transparent;
  background-clip:padding-box, border-box;
  background-origin:padding-box, border-box;
  background-image:
    linear-gradient(165deg,#22234a,#15162e),
    linear-gradient(135deg, rgba(108,99,255,.9), rgba(156,149,255,.5) 45%, rgba(108,99,255,.9));
  border-radius:24px;
  padding:44px 36px 34px;box-shadow:0 34px 80px -20px rgba(46,42,120,.8), 0 0 0 1px rgba(108,99,255,.08);
  animation:promoPopIn .5s cubic-bezier(.2,.9,.3,1.2);
  overflow:hidden;
}
.promo-popup::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 25% 10%, rgba(108,99,255,.4), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(156,149,255,.28), transparent 55%);
  animation:ctaAura 9s ease-in-out infinite alternate;
}
.promo-popup > *{position:relative;z-index:1}
@keyframes promoPopIn{
  0%{opacity:0;transform:scale(.86) translateY(18px)}
  60%{opacity:1}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.promo-popup-icon{
  width:56px;height:56px;margin:0 auto 18px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-grad);box-shadow:0 14px 30px -10px rgba(108,99,255,.75);
  animation:otpIconFloat 3.2s ease-in-out infinite;
}
.promo-popup-icon svg{width:26px;height:26px;fill:#fff;stroke:#fff}
.promo-popup-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(156,149,255,.14);border:1px solid rgba(156,149,255,.4);color:var(--accent-2);
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.promo-popup h2{margin:0 0 12px;font-size:25px;line-height:1.25}
.promo-popup h2 .grad{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.promo-popup p{color:var(--ink-dim);font-size:14.5px;margin:0 0 20px}
.promo-popup-checks{
  display:flex;flex-direction:column;gap:9px;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--panel-border);border-radius:14px;
  padding:14px 16px;margin:0 0 24px;
}
.promo-popup-checks span{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-dim)}
.promo-popup-checks svg{flex:none;width:16px;height:16px;stroke:var(--accent-2);fill:none;stroke-width:2.6}
.promo-popup-fine{font-size:13px;margin:14px 0 0 !important}
.promo-popup-fine a{color:var(--accent-2)}
@media (prefers-reduced-motion: reduce){
  .promo-popup{animation:none}
  .promo-popup::before{animation:none}
  .promo-popup-icon{animation:none}
}

/* ---- Customer-care widget: floating button + slide-up panel, on every
   page (injected by site.js so it's never duplicated per-file) ---- */
.care-btn{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 32px -10px rgba(108,99,255,.75);
  animation:carePulse 3.4s ease-in-out infinite;
  transition:transform .18s ease;
}
.care-btn:hover{transform:translateY(-3px) scale(1.05)}
.care-btn svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes carePulse{
  0%,100%{box-shadow:0 14px 32px -10px rgba(108,99,255,.75)}
  50%{box-shadow:0 14px 38px -6px rgba(108,99,255,.95)}
}
.care-panel{
  position:fixed;right:24px;bottom:92px;z-index:91;
  width:340px;max-width:calc(100vw - 40px);max-height:min(560px, calc(100vh - 130px));
  overflow-y:auto;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;
  box-shadow:0 24px 60px -18px rgba(20,10,60,.8);
  padding:22px;
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1.05);
}
.care-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.care-panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px}
.care-panel-head strong{display:block;font-size:16px}
.care-panel-head p{margin:4px 0 0;color:var(--ink-dim);font-size:12.5px}
.care-field-label-row{display:flex;justify-content:space-between;align-items:baseline}
.care-counter{font-size:11px;color:var(--ink-faint);font-weight:600}
.care-counter.warn{color:#ffb84d}
textarea.field-input{resize:vertical;min-height:100px;font-family:inherit}
.hp-field{position:absolute;left:-9999px;top:-9999px}
.contact-status{
  display:none;border-radius:10px;padding:12px 14px;font-size:13.5px;margin-top:14px;
}
.contact-status.show{display:block}
.contact-status.ok{background:rgba(156,149,255,.12);border:1px solid rgba(156,149,255,.35);color:#7be9d8}
.contact-status.err{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);color:#ff9b9b}
#contactSubmit[disabled]{opacity:.6;cursor:default}
@media (max-width:480px){
  .care-btn{right:16px;bottom:16px}
  .care-panel{right:16px;bottom:84px}
}
@media (prefers-reduced-motion: reduce){.care-btn{animation:none}}

/* ---- Reserved ad slot (Google AdSense-ready, inert until configured) --- */
.ad-slot{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.ad-slot-label{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);
}
.ad-slot-placeholder{
  width:100%;max-width:728px;min-height:90px;border-radius:14px;
  border:1px dashed var(--panel-border);background:rgba(255,255,255,.02);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ink-faint);font-size:13px;padding:16px;
}

/* ---- Motion: drifting background + scroll-reveal + hero entrance ---- */

/* A second, slowly-drifting gradient layer behind the static one in
   body's own background — kept as a fixed pseudo-element so it never
   affects layout/scroll performance. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 640px 420px at 80% 15%, rgba(108,99,255,.16), transparent 60%),
    radial-gradient(ellipse 520px 420px at 10% 85%, rgba(156,149,255,.10), transparent 60%);
  animation:driftBg 22s ease-in-out infinite alternate;
}
@keyframes driftBg{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3%,2%) scale(1.06)}
}

.nav-cta{animation:ctaPulse 3.2s ease-in-out infinite}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 8px 24px -8px rgba(108,99,255,.7)}
  50%{box-shadow:0 8px 30px -6px rgba(108,99,255,.95)}
}

/* Scroll-reveal: assets/site.js adds .in-view via IntersectionObserver
   when an element with [data-animate] enters the viewport. */
[data-animate]{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
[data-animate].in-view{opacity:1;transform:translateY(0)}

/* Hero entrance — plays on load, no JS needed. */
.hero-in{opacity:0;animation:heroIn .7s cubic-bezier(.2,.7,.3,1) forwards}
.hero-in.d1{animation-delay:.05s}
.hero-in.d2{animation-delay:.16s}
.hero-in.d3{animation-delay:.27s}
.hero-in.d4{animation-delay:.38s}
.hero-in.d5{animation-delay:.49s}
.hero-in.d6{animation-delay:.6s}
@keyframes heroIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* Ambient particle field — a restrained nod to the dark starfield/
   cursor-glow reference sites shared for this project. Drawn on a fixed
   full-viewport canvas by assets/site.js; sits behind body::before's
   gradient in paint order (canvas is body's first real child, after the
   generated ::before) so it never competes with page content for
   attention. Disabled entirely under reduced motion (site.js also skips
   starting it in that case — this is the layout-side half). */
#fx{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Kinetic headline — each word is revealed from a clipped mask with a
   slight blur, staggered by --i. Used on both pages' primary h1 so the
   effect reads as one system rather than a one-off on the homepage. */
.kw-mask{display:inline-block;overflow:hidden;vertical-align:top}
.kw{
  display:inline-block;transform:translateY(115%);opacity:0;filter:blur(6px);
  animation:kineticIn .8s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay:calc(var(--i) * 70ms + .1s);
}
@keyframes kineticIn{to{transform:translateY(0);opacity:1;filter:blur(0)}}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  .nav-cta{animation:none}
  [data-animate]{opacity:1;transform:none;transition:none}
  .hero-in{opacity:1;animation:none}
  #fx{display:none}
  .kw{opacity:1;transform:none;filter:none;animation:none}
}