:root{
  --bg:#F6F2E9;
  --surface:#FFFFFF;
  --surface-2:#ECE7DA;
  --ink:#0C1F1A;
  --ink-soft:#43524D;
  --muted:#7C8A85;
  --line:rgba(12,31,26,.09);

  --primary:#0B6E5B;
  --primary-2:#12967D;
  --primary-soft:#E2F0EA;
  --accent:#0B8F6A;
  --accent-soft:#E4F8EE;
  --warn:#F59E0B;
  --flag:#EF4444;

  --dark:#0A1C17;
  --dark-2:#12302A;
  --dark-line:rgba(255,255,255,.10);

  --grad-1:linear-gradient(135deg,#0B6E5B 0%,#12967D 55%,#D4F53C 100%);
  --grad-2:linear-gradient(135deg,#0B8F6A 0%,#0B6E5B 100%);
  --grad-text:linear-gradient(135deg,#0B6E5B 0%,#D4F53C 100%);

  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:12px;
  --radius-sm:8px;
  --radius-lg:20px;
  --shadow-soft:0 2px 8px rgba(20,20,50,.06), 0 10px 30px rgba(20,20,50,.06);
  --shadow-lift:0 10px 20px rgba(20,20,50,.08), 0 30px 60px rgba(20,20,50,.12);
}

::-webkit-scrollbar {
  width: 10px;
  height:10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #6882a6; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0e806a; 
}

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

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink-soft);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3,h4,h5,.font-display{
  font-family:var(--font-display);
  letter-spacing:-0.02em;
  color:var(--ink);
  font-weight:600;
}

.font-mono{ font-family:var(--font-mono); letter-spacing:.02em; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--primary); color:#fff; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

.text-muted-c{ color:var(--muted) !important; }
.text-pass{ color:var(--accent) !important; }
.text-grad{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:var(--primary-soft);
  padding:.4rem .8rem;
  border-radius:100px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--primary); }

.section{ padding:7rem 0; background:var(--surface); position:relative; }
@media (max-width:767px){ .section{ padding:4rem 0; } }

.section-head{ max-width:640px; margin-bottom:3.5rem; }
.section-head h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); }
.section-head p{ color:var(--muted); font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body);
  font-weight:600;
  border-radius:100px;
  padding:.85rem 1.9rem;
  font-size:.95rem;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid transparent;
}
.btn:active{ transform:translateY(1px); }

.btn-pass{
  background:var(--grad-1);
  color:#fff;
  box-shadow:0 8px 20px rgba(11,110,91,.35);
}
.btn-pass:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 28px rgba(11,110,91,.42); }

.btn-ghost-light{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.18); color:#fff; }

.btn-outline-ink{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-outline-ink:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.btn-sm-pill{ padding:.55rem 1.3rem; font-size:.85rem; }

/* ---------- Navbar ---------- */
.qa-nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(250,250,249,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.qa-nav.is-scrolled{box-shadow:0 6px 24px rgba(20,20,50,.08);}
.default-logo{ height:34px; width:auto; }

.qa-nav-link{
  font-weight:600;
  font-size:.92rem;
  color:var(--ink-soft) !important;
  padding:.5rem 1rem !important;
  border-radius:100px;
  transition:all .2s ease;
}
.qa-nav-link:hover{ color:var(--primary) !important; background:var(--primary-soft); }

.burger .bars{ display:flex; flex-direction:column; gap:5px; width:22px; }
.burger .bars span{ height:2px; background:var(--ink); border-radius:2px; }
.burger{ background:none; border:none; padding:.4rem; }

.qa-offcanvas{ background:var(--dark); color:#fff; width:320px; }
.qa-offcanvas .nav-link{ color:rgba(255,255,255,.8); font-weight:600; padding:.75rem 0; font-size:1.05rem; }
.qa-offcanvas .btn-close{ filter:invert(1); }

/* ---------- HERO (split, gradient blob, floating console) ---------- */
.hero{
  position:relative;
  padding:6.5rem 0 5.5rem;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(18,150,125,.16), transparent 60%),
    radial-gradient(700px 400px at -10% 20%, rgba(11,110,91,.12), transparent 60%),
    var(--bg);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000 30%, transparent 75%);
  opacity:.6;
}
.hero .eyebrow{ position:relative; }
.hero h1{ font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.05; position:relative; }
.hero .lead{ font-size:1.1rem; color:var(--ink-soft); max-width:520px; position:relative; }

.hero-stats{ gap:2.2rem; position:relative; }
.hero-stats .num{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.05rem; }
.hero-stats .label{ font-size:.82rem; color:var(--muted); }

.term{
  background:var(--dark);
  border-radius:var(--radius-lg);
  border:1px solid var(--dark-line);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  transform:rotate(1.2deg);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:rotate(1.2deg) translateY(0);} 50%{ transform:rotate(1.2deg) translateY(-10px);} }

.term-bar{ display:flex; gap:7px; padding:.9rem 1.1rem; background:var(--dark-2); }
.term-bar span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.15); }
.term-bar span:nth-child(1){ background:#EF4444; }
.term-bar span:nth-child(2){ background:#F59E0B; }
.term-bar span:nth-child(3){ background:#0B8F6A; }

.term-body{ padding:1.3rem 1.4rem; }
.term-line{ display:flex; align-items:center; gap:.8rem; padding:.6rem 0; border-bottom:1px dashed var(--dark-line); font-family:var(--font-mono); font-size:.82rem; }
.term-line:last-of-type{ border-bottom:none; }
.term-line .id{ color:rgba(255,255,255,.4); min-width:58px; }
.term-line .name{ color:rgba(255,255,255,.85); flex:1; }
.status{ font-size:.68rem; font-weight:700; padding:.25rem .6rem; border-radius:100px; letter-spacing:.05em; }
.status.pass{ background:rgba(14,169,104,.18); color:#D4F53C; }
.status.run{ background:rgba(245,158,11,.18); color:#FBBF24; animation:pulse 1.4s ease-in-out infinite; }
.status.pending{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }

.term-summary{ display:flex; justify-content:space-between; padding-top:1rem; margin-top:.4rem; font-family:var(--font-mono); font-size:.72rem; color:rgba(255,255,255,.4); }
.blink-cursor{ display:inline-block; width:6px; height:11px; background:var(--accent); margin-left:4px; animation:blink 1s step-end infinite; vertical-align:middle; }
@keyframes blink{ 50%{opacity:0;} }

.status-pill{ font-size:.68rem; font-weight:700; padding:.3rem .7rem; border-radius:100px; background:rgba(14,169,104,.18); color:#D4F53C; }

/* ---------- Trust strip (marquee) ---------- */
.trust-strip{
  background:var(--dark);
  overflow:hidden;
  border-top:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line);
}
.trust-strip .marquee-track{
  display:flex; gap:4rem; white-space:nowrap;
  animation:marquee 22s linear infinite;
  width:max-content;
}
.trust-strip:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.brandname{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.18em;
  color:rgba(255,255,255,.45); font-weight:600; flex-shrink:0;
}

/* ---------- About: bento grid ---------- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:1rem; }
.bento .qa-card{ height:100%; }
.bento .b-wide{ grid-column:span 2; grid-row:span 2; }
.bento .b-tall{ grid-row:span 2; }
.bento .b-accent{
  background:var(--grad-1); color:#fff; border:none;
  display:flex; flex-direction:column; justify-content:center;
}
.bento .b-accent .fw-semibold, .bento .b-accent h6{ color:#fff; }
.bento .b-accent p{ color:rgba(255,255,255,.85) !important; }
@media (max-width:991px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .bento .b-wide{ grid-column:span 2; grid-row:span 1; }
}

.qa-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%;
}
.qa-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:transparent; }

.qa-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.qa-icon svg{ width:22px; height:22px; }

/* ---------- Services: alternating diagonal rows ---------- */
.svc-row{
  display:flex; align-items:center; gap:2.5rem;
  padding:2.4rem 0; border-bottom:1px solid var(--line);
}
.svc-row:last-child{ border-bottom:none; }
.svc-row:nth-child(even){ flex-direction:row-reverse; }
.svc-num {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: #00000036;
    -webkit-text-stroke: 1.5px var(--line);
    min-width: 110px;
}
.svc-row:hover .svc-num{ -webkit-text-stroke:1.5px var(--primary); color:transparent; }
.svc-content{ flex:1; }
.svc-tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.3rem .7rem; border-radius:100px;
  background:var(--accent-soft); color:var(--accent); margin-bottom:.6rem;
}

/* ---------- Insights (dark) ---------- */
.chart-wrap{ height:260px; position:relative; }
.progress-qa{ height:6px; border-radius:100px; overflow:hidden; }
.progress-qa .bar{ height:100%; background:var(--grad-2); border-radius:100px; }
.tc-tag{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.4rem; }

/* ---------- Pricing ---------- */
.price-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2.2rem 1.8rem;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.price-card.featured{
  background:var(--dark); border-color:var(--dark-line);
  color:#fff; transform:scale(1.04);
  box-shadow:var(--shadow-lift);
}
.price-card.featured h6, .price-card.featured .price-amount{ color:#fff; }
.price-card.featured .text-muted-c{ color:rgba(255,255,255,.55) !important; }
.price-card.featured:hover{ transform:scale(1.04) translateY(-6px); }
@media (max-width:991px){ .price-card.featured{ transform:none; } .price-card.featured:hover{ transform:translateY(-6px);} }

.price-amount{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--ink); }
.badge-pop{
  position:absolute; top:-13px; right:1.6rem;
  background:var(--grad-1); color:#fff; font-size:.68rem; font-weight:700;
  padding:.35rem .8rem; border-radius:100px; letter-spacing:.03em;
}
.plan-line{ font-size:.88rem; color:var(--ink-soft); padding:1rem 0; border-top:1px solid var(--line); margin-top:.5rem; }
.price-card.featured .plan-line{ border-color:var(--dark-line); }

/* ---------- Process: horizontal timeline ---------- */
.timeline-wrap{ position:relative; }
.timeline-line{
  position:absolute; top:26px; left:0; right:0; height:2px;
  background:var(--line); z-index:0;
}
.timeline-line .fill{ height:100%; width:100%; background:var(--grad-1); }
.tl-step{ position:relative; z-index:1; text-align:center; }
.tl-dot{
  width:52px; height:52px; border-radius:50%; background:var(--surface);
  border:2px solid var(--primary); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; margin:-21px auto 1.2rem;
  box-shadow:0 0 0 8px var(--bg);
}

/* ---------- Why: numbered rows ---------- */
.why-row{ padding:1.2rem 0; border-bottom:1px solid var(--line); }
.why-row:last-child{ border-bottom:none; }
.why-row .n{
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  color:var(--primary); min-width:44px;
}

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--grad-1);
  border-radius:var(--radius-lg);
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(500px 300px at 20% 0%, rgba(255,255,255,.25), transparent 60%);
}

/* ---------- FAQ ---------- */
.accordion-item{ background:transparent; border:none; border-bottom:1px solid var(--line); }
.accordion-button{
  background:transparent; font-family:var(--font-display); font-weight:600; color:var(--ink);
  padding:1.3rem 0; font-size:1.02rem; box-shadow:none !important;
}
.accordion-button:not(.collapsed){ color:var(--primary); background:transparent; }
.accordion-button::after{ filter:none; }
.accordion-body{ padding:0 0 1.5rem; color:var(--muted); }

/* ---------- Footer ---------- */
.qa-footer{ background:var(--dark); color:rgba(255,255,255,.55); }
.qa-footer h6{ color:#fff; }
.qa-footer a{ color:rgba(255,255,255,.55); transition:color .2s ease; }
.qa-footer a:hover{ color:var(--accent); }
.qa-logo img{ height:32px; }

/* ---------- misc ---------- */
.section-alt{ background:var(--surface-2); }

/* ======================================================================
   AUTH PAGES (login / checkout side-panel)
   ====================================================================== */
.auth-wrap{ min-height:100vh; }
.auth-brand{
  background:var(--dark);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:3rem;
}
.auth-brand::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse at 20% 10%, black, transparent 70%);
}
.auth-brand .eyebrow{ background:rgba(255,255,255,.1); color:#fff; }
.auth-form-side{ background:var(--bg); padding:2rem; }
.auth-card{ width:100%; max-width:400px; }

.form-control-qa{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:.75rem 1rem;
  font-size:.95rem;
  background:var(--surface);
  color:var(--ink);
  width:100%;
}
.form-control-qa::placeholder{ color:var(--muted); }
.form-control-qa:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
  background:var(--surface);
  color:var(--ink);
}
.input-icon-wrap{ position:relative; }
.input-icon-wrap svg{
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--muted); width:17px; height:17px; pointer-events:none;
}
.input-icon-wrap .form-control-qa{ padding-left:2.6rem; }
.pw-toggle {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--muted);
    padding: .3rem;
    line-height: 0;
}

/* =========================================================
   Dashboard
   ========================================================= */
.dash-body{ background:var(--surface-2); }
.dash-sidebar{
  width:260px;
  background:var(--dark);
  color:rgba(255,255,255,.75);
  min-height:100vh;
  position:fixed; top:0; left:0; bottom:0;
  z-index:1040;
  transition:transform .28s ease;
  display:flex; flex-direction:column;
  border-right:1px solid var(--dark-line);
  padding:1.4rem 1rem;
}
.dash-sidebar .qa-logo{ color:#fff; }
.dash-nav-link{
  display:flex; align-items:center; gap:.8rem;
  padding:.7rem .95rem;
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,.65);
  font-weight:500; font-size:.92rem;
  margin-bottom:.15rem;
}
.dash-nav-link svg{ width:18px; height:18px; flex-shrink:0; }
.dash-nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.dash-nav-link.active{ background:var(--grad-1); color:#fff; }
.dash-nav-link .badge-mini{
  margin-left:auto; background:rgba(255,255,255,.12); font-family:var(--font-mono);
  font-size:.68rem; padding:.15rem .4rem; border-radius:4px;
}

.dash-main{ margin-left:260px; min-height:100vh; }
.dash-topbar{
  position:sticky; top:0; z-index:1020;
  background:rgba(250,250,249,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:.85rem 1.5rem;
}
.dash-content{ padding:1.75rem; }

.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
}
.stat-card .label{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-card .value{ font-family:var(--font-display); font-size:1.9rem; color:var(--ink); font-weight:700; }
.stat-card .delta{ font-family:var(--font-mono); font-size:.78rem; }
.stat-card .delta.up{ color:var(--accent); }
.stat-card .delta.down{ color:var(--flag); }

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.panel-head{
  padding:1.15rem 1.4rem; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}

.chart-wrap{ position:relative; height:260px; width:100%; overflow:hidden; }
.chart-wrap canvas{ width:100% !important; height:100% !important; max-width:100%; }

.table-qa{ margin-bottom:0; color:var(--ink-soft); width:100%; }
.table-qa thead th{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); border-bottom:1px solid var(--line); font-weight:600; padding:.9rem 1.4rem;
}
.table-qa tbody td{ padding:.9rem 1.4rem; vertical-align:middle; border-bottom:1px solid var(--line); font-size:.9rem; }
.table-qa tbody tr:last-child td{ border-bottom:none; }
.table-qa .tid{ font-family:var(--font-mono); color:var(--muted); font-size:.82rem; }

.status-pill.passed{ background:var(--accent-soft); color:var(--accent); }
.status-pill.failed{ background:rgba(239,68,68,.12); color:var(--flag); }
.status-pill.running{ background:rgba(245,158,11,.14); color:#B45309; }
.status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; margin-right:.35rem; }

.suite-item{
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 1.4rem; border-bottom:1px solid var(--line);
}
.suite-item:last-child{ border-bottom:none; }
.suite-dot{ width:9px;height:9px;border-radius:50%; flex-shrink:0; }
.suite-dot.pass{ background:var(--accent); }
.suite-dot.fail{ background:var(--flag); }
.suite-dot.run{ background:#F59E0B; }

@media (max-width:991.98px){
  .dash-sidebar{ transform:translateX(-100%); }
  .dash-sidebar.open{ transform:translateX(0); }
  .dash-main{ margin-left:0; }
}
.sidebar-overlay{
  position:fixed; inset:0; background:rgba(10,10,20,.55); z-index:1035;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.sidebar-overlay.show{ opacity:1; visibility:visible; }

/* ---------- Chat widget ---------- */
.chat-fab{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:1050;
  width:58px; height:58px; border-radius:50%;
  background:var(--grad-1); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lift); border:none;
  transition:transform .18s ease;
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.03); }
.chat-fab svg{ width:24px; height:24px; }

.chat-panel{
  position:fixed; right:1.5rem; bottom:5.5rem; z-index:1050;
  width:340px; max-width:88vw; height:440px; max-height:70vh;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateY(12px) scale(.97);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:all .2s ease;
}
.chat-panel.open{ transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto; }
.chat-head{
  background:var(--dark); color:#fff;
  padding:1rem 1.2rem; display:flex; align-items:center; gap:.7rem;
  border-bottom:1px solid var(--dark-line);
}
.chat-head .dot-live{ width:8px;height:8px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(14,169,104,.3); }
.chat-body{ flex:1; overflow-y:auto; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.7rem; background:var(--surface-2); }
.msg{ max-width:80%; padding:.6rem .85rem; border-radius:12px; font-size:.87rem; line-height:1.4; }
.msg.bot{ background:var(--surface); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:3px; color:var(--ink-soft); }
.msg.me{ background:var(--grad-1); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.chat-foot{ padding:.7rem; border-top:1px solid var(--line); display:flex; gap:.5rem; background:var(--surface); }
.chat-foot input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; font-size:.87rem;
  background:var(--surface); color:var(--ink);
}
.chat-foot input:focus{ outline:none; border-color:var(--primary); }
.chat-foot button{
  width:36px; height:36px; border-radius:50%; background:var(--grad-1); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-foot button svg{ width:16px; height:16px; }

/* ---------- Misc shared ---------- */
a.navbar-brand img{ width:auto; height:50px; }
a.qa-logo img{ width:auto; height:50px; }

ul.plan-feats{ font-size:14px; color:var(--ink-soft); list-style:none; padding-left:0; }
ul.plan-feats li {
    margin: 10px 0;
    padding-left: 1.4rem;
    color: #838383;
    position: relative;
}
ul.plan-feats li::before{
  content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700;
}
.plan-feat{ padding:.35rem 0; font-size:.94rem; display:flex; gap:.6rem; align-items:flex-start; }
.plan-feat svg{ flex-shrink:0; margin-top:.2rem; color:var(--accent); }

#cookiePopup{ background:var(--dark) !important; border-top:1px solid var(--dark-line); color:rgba(255,255,255,.75); }
#cookiePopup h4{ font-size:22px; color:#fff; margin-bottom:12px; }
#cookiePopup p{ font-size:14px; color:rgba(255,255,255,.7); margin-bottom:15px; line-height:1.5; max-width:850px; }

/* Anchor offset so sticky nav doesn't cover section titles */
section[id]{ scroll-margin-top:90px; }

/* Always-visible entrance motion (no opacity hiding — avoids invisible-text issues) */
@keyframes riseIn{ from{ transform:translateY(16px); } to{ transform:translateY(0); } }
.hero h1, .hero .lead{ animation:riseIn .6s ease both; }

/* QA redesign: forest / cream / lime. Each home section has its own layout language. */
:root{--lime:#D4F53C;--forest:#0C2A24;--cream:#F6F2E9;--coral:#FF6B3D}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--font-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.sec{padding:clamp(56px,9vw,110px) 0}
.kicker{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);font-weight:600}
.btn-lime{background:var(--lime);color:#0C1F1A;border:2px solid #0C1F1A;font-weight:700;border-radius:999px;padding:.8rem 1.6rem;box-shadow:4px 4px 0 #0C1F1A;transition:.15s}
.btn-lime:hover {
    transform: translate(2px,2px);
    box-shadow: 2px 2px 0 #a7df4b;
    color: #d4f53c;
}
.btn-line{border:2px solid currentColor;border-radius:999px;padding:.8rem 1.6rem;font-weight:600;color:inherit}
.btn-line:hover{background:rgba(255,255,255,.12);color:inherit}

/* header / footer */
.qa-nav{background:var(--cream)!important;/* border-bottom:2px solid #0C1F1A; */}
.qa-nav-link{font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}
.qa-offcanvas{background:var(--forest)!important;color:#fff}
.qa-offcanvas .nav-link{color:#fff;font-family:var(--font-display);font-size:1.6rem;padding:.4rem 0}
.qa-footer{background:var(--forest)!important;color:rgba(255,255,255,.7);border-top:8px solid var(--lime)}
.qa-footer a{color:rgba(255,255,255,.75)}
.qa-footer a:hover{color:var(--lime)}
.qa-footer h6{color:var(--lime);font-family:var(--font-mono);letter-spacing:.12em}

/* 1 HERO: forest, oversized type, floating bug card */
.h-hero{background:var(--forest);color:#fff;position:relative;overflow:hidden;padding:clamp(60px,9vw,120px) 0 clamp(80px,11vw,140px)}
.h-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(212,245,60,.28),transparent 70%)}
.h-hero h1{font-size:clamp(2.6rem,7.5vw,5.8rem);line-height:.98;font-weight:800; color: var(--bg);}
.h-hero h1 em{font-style:normal;background:var(--lime);color:#0C1F1A;padding:0 .18em;border-radius:.12em;display:inline-block;transform:rotate(-2deg)}
.h-hero p{color:rgba(255,255,255,.75);max-width:520px;font-size:1.1rem}
.bug{background:#fff;color:var(--ink);border-radius:16px;padding:22px;box-shadow:10px 10px 0 var(--lime);position:relative;transform:rotate(2deg)}
.bug .row-i{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.bug .row-i:last-child{border:0}
.chip{font-family:var(--font-mono);font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:99px}
.chip.ok{background:#D9F5E7;color:#0B6E4B}.chip.run{background:#FFF0C2;color:#8A5A00}.chip.q{background:#E8ECEA;color:#55645F}
.float-tag{position:absolute;left:-18px;bottom:-22px;background:var(--coral);color:#fff;font-weight:700;padding:10px 16px;border-radius:12px;transform:rotate(-5deg);font-size:.85rem}

/* 2 MARQUEE: lime tilted band */
.band{background:var(--lime);border-block:2px solid #0C1F1A;transform:rotate(-1.2deg);margin:-26px -20px 0;position:relative;z-index:3;overflow:hidden;padding:14px 0}
.band .mq{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:mq 28s linear infinite;font-family:var(--font-mono);font-weight:600;font-size:.95rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* 3 ABOUT: editorial statement + hard-bordered 2x2 */
.about-big{font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.15;font-weight:600}
.about-big mark{background:linear-gradient(transparent 60%,var(--lime) 60%);color:inherit;padding:0}
.grid22{display:grid;grid-template-columns:repeat(2,1fr);border:2px solid #0C1F1A;background:#fff}
.grid22>div{padding:26px;border:1px solid #0C1F1A}
.grid22 h6{font-size:1.15rem;margin:.6rem 0 .3rem}
.grid22 .ic{width:44px;height:44px;border-radius:50%;background:var(--forest);color:var(--lime);display:grid;place-items:center}
.grid22 svg{width:22px;height:22px}

/* 4 SERVICES: colourful stacked tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{border-radius:22px;padding:26px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;border:2px solid #0C1F1A;transition:.2s}
.tile:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 12px 0 #0C1F1A}
.tile .no{font-family:var(--font-display);font-size:3.4rem;font-weight:800;line-height:1;opacity:.9}
.tile span.t{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;border:1.5px solid currentColor;border-radius:99px;padding:2px 10px;align-self:flex-start}
.t1{background:#FFD9C7}.t2{background:#D8ECFF}.t3{background:var(--lime)}.t4{background:#E9DCFF}.t5{background:#FFF0B8}.t6{background:#CFF3E3}

/* 5 INSIGHTS: dark split with KPI meters (chart drawn by main.js) */
.ins{background:#0A1C17;color:#fff;border-radius:36px;margin:0 12px;padding:clamp(28px,5vw,64px)}
.kpi{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px}
.kpi small{font-family:var(--font-mono);color:rgba(255,255,255,.5);font-size:.7rem;text-transform:uppercase}
.kpi b{display:block;font-family:var(--font-display);font-size:1.4rem;margin:2px 0 10px}
.kpi i{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.1)}
.kpi i::after{content:"";display:block;height:100%;width:var(--w);background:var(--lime);border-radius:9px}
.chartbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:20px}
.chartbox .chart-wrap{height:300px}

/* 6 PRICING: forest section, chunky offset cards */
.price-sec{background:var(--forest);color:#fff}
.price-sec .price-card{background:#fff;color:var(--ink);border:2px solid #0C1F1A;border-radius:20px;box-shadow:8px 8px 0 var(--lime);height:100%}
.price-sec .price-card.featured{background:var(--lime);box-shadow:8px 8px 0 #fff;transform:translateY(-12px)}
.price-sec .price-card.featured .text-muted-c,.price-sec .price-card.featured h6{color:#2a3a1a!important}
.price-sec .price-card .price-amount{font-size:3rem;font-family:var(--font-display);font-weight:800}
.price-sec h2{color:#fff}

/* 7 COMPAT: floating pill cloud */
.cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:860px;margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;background:#fff;border:2px solid #0C1F1A;font-weight:600;transition:.2s}
.pill:nth-child(odd){transform:rotate(-2deg)}.pill:nth-child(even){transform:rotate(1.5deg);background:var(--lime)}
.pill:hover{transform:scale(1.07) rotate(0)}
.pill svg{width:20px;height:20px}

/* 8 PROCESS: sticky title left, vertical steps right */
.steps{position:relative;padding-left:12px}
.steps::before{content:"";position:absolute;left:38px;top:10px;bottom:10px;border-left:3px dashed #0C1F1A}
.step{display:flex;gap:26px;padding:0 0 38px;position:relative}
.step .b{flex:0 0 54px;height:54px;border-radius:50%;background:var(--lime);border:2px solid #0C1F1A;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;z-index:1}
.step h5{font-size:1.5rem;margin-bottom:4px}
.sticky-l{position:sticky;top:110px}

/* 9 CTA: giant split lime block */
.cta-big{background:var(--lime);border:2px solid #0C1F1A;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr}
.cta-big .l{padding:clamp(28px,5vw,70px)}
.cta-big .l h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;line-height:1.02}
.cta-big .r{background:var(--forest);color:var(--lime);display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(5rem,14vw,10rem);font-weight:800}

/* 10 WHY: numbered checklist cards on white */
.why{background:#fff;}
.wcard{display:flex;gap:16px;padding:22px;border-radius:16px;background:var(--cream);height:100%}
.wcard .n{font-family:var(--font-display);font-size:2.4rem;font-weight:800;color:var(--primary);line-height:1}

/* 11 FAQ: centered narrow, plus/minus */
#faq .accordion-item{border:0;border-bottom:2px solid #0C1F1A;background:transparent;border-radius:0}
#faq .accordion-button{background:transparent;box-shadow:none;font-family:var(--font-display);font-size:1.15rem;font-weight:600;padding:22px 0}
#faq .accordion-button:not(.collapsed){color:var(--primary)}
#faq .accordion-body{padding:0 0 22px;color:var(--ink-soft)}

@media(max-width:991px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cta-big{grid-template-columns:1fr}.cta-big .r{padding:10px 0}
  .sticky-l{position:static}
  .price-sec .price-card.featured{transform:none}
}
@media(max-width:575px){
  .tiles,.grid22{grid-template-columns:1fr}
  .bug{transform:none}.float-tag{left:8px}
  .ins{margin:0;border-radius:24px}
  .band{margin-inline:-30px}
  .step{gap:16px}.steps::before{left:32px}
}

/* ---- section-specific identities (each home section looks different) ---- */
.serif{font-family:'Fraunces',serif!important;font-weight:800;letter-spacing:-.03em}
#about{background:#fff;}
#about .about-big{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.8rem,4vw,3.2rem)}
#services{background:#DCEBFF;padding-top:clamp(56px,9vw,110px)!important;}
.tiles{display:flex!important;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 26px}
.tile{flex:0 0 min(300px,82vw);min-height:340px;scroll-snap-align:start}
#insights{padding-top:clamp(40px,7vw,80px)!important;background:#F6F2E9}
#pricing{color:#fff;}
#pricing .kicker {
    color: var(--lime)!important;
}
#pricing .price-card{box-shadow:8px 8px 0 #0C1F1A!important}
#pricing .price-card.featured{background:#0C2A24!important;color:#fff;box-shadow:8px 8px 0 #fff!important}
#pricing .price-card.featured .text-muted-c,#pricing .price-card.featured h6{color:rgba(255,255,255,.7)!important}
#integrations{background:#fff;background-image:radial-gradient(#0C1F1A22 1.5px,transparent 1.5px);background-size:22px 22px;}
#process{background:#EAF5C8;padding-top:clamp(56px,9vw,110px)!important;}
#why{background:var(--primary)!important;color:#fff}
#why .kicker{color:var(--lime)}
#why .wcard{background:#fff;color:var(--ink);border:2px solid #0C1F1A;box-shadow:6px 6px 0 var(--lime)}
#faq{background:#FFF0B8;}
#faq .faq-side{position:sticky;top:110px}
#faq .faq-side h2{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1}
#faq .q-mark{font-family:'Fraunces',serif;font-size:9rem;line-height:.8;color:#0C1F1A;font-weight:800}
@media(max-width:991px){#faq .faq-side{position:static}#faq .q-mark{font-size:5rem}}