/*
Theme Name: Chatterlytics
Theme URI: https://chatterlytics.ai
Author: Datalogic Solutions
Description: Custom landing-page theme for Chatterlytics. Every section (hero, demo player, chat, connectors, who, how it works, product tour, business knowledge, data sources, comparison, stats, security, stories, pricing, FAQ, CTA, footer) is editable via Appearance → Customize, and each section can be shown or hidden.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chatterlytics
Tags: one-column, custom-menu, custom-colors
*/

:root{
  /* ===== Chatterlytics.ai palette (measured from live site) ===== */
  --brand:#6965E1;        /* primary violet */
  --brand-2:#8B87F0; --brand-3:#7A63DB; --brand-deep:#4B47C9;
  --ink:#072032;          /* site heading navy */
  --body:#5C6972;         /* site body grey */
  --grad:linear-gradient(135deg,#7A63DB,#6965E1);
  --grad-soft:linear-gradient(135deg,#8B87F0,#6965E1);
  --bg:#FFFFFF; --soft:#F5F6FB; --soft-2:#EEEDFA;
  --line:#E8E7F5; --line-2:#D8D6F0;
  --green:#0E9F6E; --red:#E02454; --amber:#D97706;
  --shadow:0 14px 44px rgba(7,32,50,.10);
  --shadow-lg:0 28px 70px rgba(75,71,201,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--body);font-size:16px;line-height:1.65;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-.02em;line-height:1.12}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:92px 0;position:relative}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:999px;cursor:pointer;border:none;transition:.2s;font-family:'Inter',sans-serif}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(105,101,225,.35)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(105,101,225,.45)}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.sec-title{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.sec-sub{color:var(--body);max-width:640px;font-size:1.04rem}
.center{text-align:center}
.center .sec-sub{margin:0 auto}
.hl{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{display:inline-block;font-size:.72rem;font-weight:600;color:#5A5690;background:var(--soft-2);border:1px solid var(--line);padding:4px 12px;border-radius:999px;margin:3px 4px 0 0}
.mono{font-family:'JetBrains Mono',monospace}
.up{color:var(--green)}.down{color:var(--red)}

/* NAV */
nav.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);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:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink)}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.logo img.custom-logo{height:34px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:24px;font-size:.92rem;font-weight:500;color:var(--body);margin-left:36px;margin-right:auto}
.nav-links ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav-links a:hover{color:var(--brand)}
.nav-actions{display:flex;gap:10px}
/* centered-logo header layout */
.nav-inner.logo-center{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-inner.logo-center .nav-links{margin:0;justify-self:start}
.nav-inner.logo-center .nav-actions{justify-self:end}
@media(max-width:1020px){.nav-links{display:none}}
@media(max-width:640px){
  .nav-actions .btn{padding:9px 14px!important;font-size:.8rem}
  .logo{font-size:1.02rem;gap:7px}
}

/* HERO - violet gradient band like chatterlytics.ai */
.hero{padding:0;position:relative}
.hero-band{background:linear-gradient(140deg,#7A63DB 0%,#6965E1 55%,#5B57D6 100%);position:relative;overflow:hidden;text-align:center;padding:96px 24px 210px;clip-path:ellipse(140% 100% at 50% 0%)}
.hero-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 20% 10%,rgba(255,255,255,.14),transparent 60%),radial-gradient(600px 300px at 85% 25%,rgba(255,255,255,.1),transparent 55%)}
.pill-badge{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;font-size:.84rem;color:#EFEDFF;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 18px;margin-bottom:26px;background:rgba(255,255,255,.12);position:relative;max-width:94%}
.pill-badge b{color:#fff;font-weight:700}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.8rem);max-width:880px;margin:0 auto 20px;color:#fff;position:relative}
.hero p.lede{color:#E4E1FB;font-size:1.12rem;max-width:640px;margin:0 auto 34px;position:relative}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.btn-white{background:#fff;color:var(--brand);box-shadow:0 12px 30px rgba(7,32,50,.25)}
.btn-white:hover{transform:translateY(-2px)}
.btn-ghostw{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-ghostw:hover{background:rgba(255,255,255,.12)}
.hero-fine{font-size:.84rem;color:#DDDAF8;margin-top:24px;position:relative}
.hero-fine span{display:inline-block;margin:4px 10px;white-space:nowrap}

/* PIPELINE (floating card overlapping hero) */
.pipe-zone{margin-top:-150px;position:relative;z-index:5;padding-bottom:40px}
.pipe-zone.no-hero{margin-top:40px}
.ask-bar{max-width:720px;margin:0 auto 16px;display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 22px;align-items:center;box-shadow:var(--shadow-lg)}
.ask-bar:focus-within{box-shadow:0 28px 70px rgba(75,71,201,.22),0 0 0 4px rgba(105,101,225,.15)}
.ask-bar input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-size:1rem;font-family:'Inter',sans-serif}
.ask-bar input::placeholder{color:#A9A6CE}
.try-row{text-align:center;margin-bottom:26px}
.try-row .chip{cursor:pointer;transition:.15s;font-size:.78rem;padding:6px 14px;background:#fff;border-color:var(--line-2)}
.try-row .chip:hover{border-color:var(--brand);color:var(--brand)}
/* ===== light scripted demo player ===== */
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(14,159,110,0)}100%{box-shadow:0 0 0 0 rgba(14,159,110,0)}}
.demo-frame{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);text-align:left}
.demo-steps{display:flex;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;background:var(--soft)}
.dstep{position:relative;font-size:.84rem;font-weight:600;color:#5A5690;padding:8px 16px 10px;border-radius:999px;border:1.5px solid var(--line-2);cursor:pointer;overflow:hidden;background:#fff;font-family:'Inter',sans-serif;transition:.2s}
.dstep .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad)}
.dstep.active{color:var(--brand);border-color:var(--brand);box-shadow:0 6px 16px rgba(105,101,225,.18)}
.demo-ctrl{margin-left:auto;display:flex;gap:8px}
.ctrl-btn{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;color:#5A5690;cursor:pointer}
.ctrl-btn:hover{color:var(--brand);border-color:var(--brand)}
.demo-stage{position:relative;min-height:410px;background:radial-gradient(600px 200px at 50% 0%,rgba(105,101,225,.05),transparent)}
.scene{position:absolute;inset:0;padding:24px 28px 52px;opacity:0;visibility:hidden;transition:opacity .45s}
.scene.active{opacity:1;visibility:visible}
@media(max-width:700px){.demo-stage{min-height:540px}.scene{padding:14px 14px 48px}}
.rise{opacity:0;transform:translateY(14px);transition:.5s}
.scene.active .rise.in{opacity:1;transform:none}
.scene-cap{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.78rem;color:#8683AD;padding:8px 14px 12px;background:rgba(255,255,255,.92)}
.caret{display:inline-block;width:2px;height:16px;background:var(--ink);vertical-align:middle;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ask-mock{background:var(--soft);border:1px solid var(--line-2);border-radius:12px;padding:15px 18px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink);font-size:.95rem}
.bars i{transition:height .7s cubic-bezier(.2,.8,.3,1)}
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;max-width:540px;margin:0 auto;box-shadow:var(--shadow)}
.doc-line{height:8px;border-radius:5px;background:var(--soft-2);margin-bottom:8px;width:0;transition:width .5s}
.doc-chart{height:56px;border-radius:8px;border:1px solid rgba(105,101,225,.3);margin:10px 0;display:flex;align-items:flex-end;gap:5px;padding:7px;background:var(--soft)}
.doc-chart i{flex:1;background:var(--brand-2);border-radius:2px;height:0;transition:height .6s}

/* CHAT */
.chat-shell{max-width:760px;margin:44px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);text-align:left}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--soft)}
.chat-head .st{margin-left:auto;font-size:.72rem;color:var(--green);display:flex;align-items:center;gap:6px}
.chat-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.chat-body{padding:20px;min-height:260px;max-height:420px;overflow-y:auto}
.msg{margin-bottom:14px;display:flex}
.msg.user{justify-content:flex-end}
.msg .bubble{max-width:82%;font-size:.9rem;padding:11px 15px;border-radius:13px}
.msg.user .bubble{background:var(--grad);color:#fff;border-radius:13px 13px 4px 13px}
.msg.ai .bubble{background:var(--soft);border:1px solid var(--line);border-radius:13px 13px 13px 4px;color:var(--ink)}
.msg.ai .bubble h6{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin:10px 0 4px}
.msg.ai .bubble h6:first-child{margin-top:0}
.typing-ind span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#B9B6DE;margin-right:4px;animation:bounce 1.2s infinite}
.typing-ind span:nth-child(2){animation-delay:.15s}
.typing-ind span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:none}30%{transform:translateY(-6px)}}
.chat-sugs{padding:0 20px 18px;display:flex;flex-wrap:wrap;gap:8px}
.sug{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:#5A5690;background:#fff;border:1.5px solid var(--line-2);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.15s}
.sug:hover{border-color:var(--brand);color:var(--brand)}
.sug.used{opacity:.35;pointer-events:none}
.chat-input{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:var(--soft);align-items:center}
.chat-input .fake{flex:1;min-width:0;color:#A9A6CE;font-size:.9rem;padding:10px 14px;border:1.5px dashed var(--line-2);border-radius:999px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-input .btn{flex-shrink:0}

/* MARQUEE */
.marquee-zone{padding:40px 0 8px;text-align:center}
.marquee-zone p{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#8683AD;margin-bottom:22px}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scroll 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.src-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 20px;font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 4px 14px rgba(7,32,50,.05)}
.src-chip span{width:26px;height:26px;border-radius:7px;background:var(--soft-2);display:flex;align-items:center;justify-content:center;font-size:.85rem}

/* CARDS */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:880px){.cards-3{grid-template-columns:1fr}}
.n-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 28px;transition:.25s;text-align:left;box-shadow:0 6px 20px rgba(7,32,50,.05)}
.n-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(105,101,225,.4)}
.n-card .ic{width:48px;height:48px;border-radius:12px;background:var(--soft-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px}
.n-card h3{font-size:1.12rem;margin-bottom:9px}
.n-card p{font-size:.92rem}

/* STEPS */
.steps-vis{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;position:relative}
@media(max-width:880px){.steps-vis{grid-template-columns:1fr;gap:34px}}
.stepv{text-align:center;padding:0 22px;position:relative}
.stepv .orb{width:76px;height:76px;margin:0 auto 20px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#A5A1FF,#6965E1 60%,#4B47C9);display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 14px 34px rgba(105,101,225,.4);position:relative;z-index:1}
.stepv .orb img{width:38px;height:38px;object-fit:contain}
.stepv h3{font-size:1.15rem;margin-bottom:8px}
.stepv p{font-size:.92rem}
@media(min-width:881px){
  .stepv:not(:last-child)::after{content:"";position:absolute;top:38px;left:calc(50% + 52px);width:calc(100% - 104px);height:2px;background:linear-gradient(90deg,rgba(105,101,225,.45),rgba(105,101,225,.08))}
}

/* TOUR */
.tour-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 26px;justify-content:center}
.tab{padding:11px 22px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;font-size:.9rem;font-weight:600;color:#5A5690;cursor:pointer;transition:.18s;font-family:'Inter',sans-serif}
.tab.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(105,101,225,.4)}
.tour-panel{display:none;animation:fade .35s ease}
.tour-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.screen img.tour-shot{display:block;width:100%;height:auto}
.explain-grid{display:grid;grid-template-columns:1.35fr 1fr}
@media(max-width:760px){.explain-grid{grid-template-columns:1fr}}
.screen-body{display:grid;grid-template-columns:190px 1fr;min-height:380px}
@media(max-width:760px){.screen-body{grid-template-columns:1fr}.side{display:none}}
.side{background:#0E0C2B;color:#A5A2CC;padding:18px 0;font-size:.82rem;text-align:left}
.side .s-logo{color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;padding:0 18px 16px;font-size:.95rem}
.side a{display:flex;gap:9px;align-items:center;padding:9px 18px;border-left:3px solid transparent}
.side a.on{background:rgba(105,101,225,.3);border-left-color:#8B87F0;color:#fff}
.main-pane{padding:20px 22px;background:var(--soft);text-align:left}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
@media(max-width:700px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.kpi .lbl{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:#8683AD}
.kpi .val{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink);margin-top:2px}
.kpi .d{font-size:.7rem;font-weight:700}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.grid-2{grid-template-columns:1fr}}
.mini{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.mini h6{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:#8683AD;margin-bottom:9px;font-family:'Inter',sans-serif}
.qrow{font-size:.82rem;color:var(--ink);padding:7px 11px;border:1px solid var(--line);border-radius:8px;margin-bottom:7px;background:var(--soft)}
.drv{display:flex;justify-content:space-between;font-size:.83rem;color:var(--ink);padding:6px 2px;border-bottom:1px dashed var(--line)}
.drv:last-child{border-bottom:none}
.dk-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:11px}
.dk-card h5{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.dk-card p{font-size:.87rem;color:var(--ink)}
.bars{display:flex;align-items:flex-end;gap:7px;height:80px;margin-top:10px}
.bars i{flex:1;background:var(--grad-soft);border-radius:3px 3px 0 0}
.bars i.dip{background:linear-gradient(180deg,#F87199,#E02454)}
.u-bubble{background:var(--grad);color:#fff;font-size:.9rem;padding:10px 15px;border-radius:13px 13px 4px 13px;display:inline-block}
.explain-btn{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#fff;font-size:.78rem;font-weight:700;padding:7px 16px;border-radius:999px}
.rep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:24px}
@media(max-width:760px){.rep-grid{grid-template-columns:1fr 1fr}}
.rep{border:1px solid var(--line);border-radius:12px;padding:18px 16px;background:var(--soft);text-align:left;transition:.18s}
.rep:hover{border-color:var(--brand);transform:translateY(-3px);background:#fff;box-shadow:0 10px 24px rgba(105,101,225,.12)}
.rep .ri{font-size:1.4rem;margin-bottom:8px}
.rep h4{font-size:.96rem;margin-bottom:4px}
.rep p{font-size:.78rem}
.tour-cap{max-width:640px;margin:22px auto 0;font-size:.95rem;text-align:center;color:var(--body)}

/* KNOWLEDGE */
.bk{background:var(--soft)}
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:20px}
@media(max-width:880px){.bk-grid{grid-template-columns:1fr}}
.bk-copy{text-align:left}
.bk-copy .sec-sub{margin-bottom:22px}
.bk-list{list-style:none}
.bk-list li{padding:8px 0;display:flex;gap:11px;font-size:.95rem;color:var(--ink)}
.bk-list li::before{content:"✓";color:var(--green);font-weight:800}
.orbit{position:relative;width:min(420px,90vw);height:min(420px,90vw);margin:0 auto}
.orbit .ring{position:absolute;inset:0;border:1.5px dashed rgba(105,101,225,.35);border-radius:50%;animation:spin 40s linear infinite}
.orbit .ring.r2{inset:13%;animation-duration:30s;animation-direction:reverse}
.orbit .ring.r3{inset:27%;animation-duration:22s;border-color:rgba(105,101,225,.2)}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .core{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#A5A1FF,#6965E1 55%,#4B47C9);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;box-shadow:0 20px 60px rgba(105,101,225,.45);text-align:center;font-size:.95rem;line-height:1.25;padding:10px}
.sat{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-size:.78rem;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:var(--shadow);animation:float 5s ease-in-out infinite}
.sat b{color:var(--brand);font-family:'Space Grotesk',sans-serif}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* HEALTH */
.health-board{max-width:880px;margin:44px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);text-align:left}
.hb-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--soft)}
.hb-head b{font-family:'Space Grotesk',sans-serif;color:var(--ink)}
.hb-head span{font-size:.78rem;color:#8683AD}
.hb-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr .8fr;padding:13px 22px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink);align-items:center}
.hb-row:last-child{border-bottom:none}
.hb-row.head{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#8683AD;background:var(--soft)}
@media(max-width:700px){.hb-row{grid-template-columns:1.4fr 1fr .8fr}.hb-row .hide-m{display:none}}
.pulse{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--green)}
.pulse::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(14,159,110,.5);animation:pulse 2s infinite}
.ready{color:var(--brand);font-weight:700}

/* DIFF */
.diff-table{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.diff-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-bottom:1px solid var(--line)}
.diff-row:last-child{border-bottom:none}
.diff-row>div{padding:15px 22px;font-size:.9rem;text-align:left;color:var(--body)}
.diff-row.head>div{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;background:var(--soft);color:var(--ink)}
.diff-row .feat{font-weight:600;color:var(--ink)}
.yes{color:var(--green);font-weight:600}
.no{color:#A9A6CE}
.col-hi{background:var(--soft-2)}
@media(max-width:700px){.diff-row>div{padding:11px;font-size:.76rem}}

/* STATS */
.stats{background:linear-gradient(140deg,#7A63DB,#6965E1 60%,#5B57D6);padding:70px 0;overflow:hidden}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:820px){.stats-grid{grid-template-columns:1fr 1fr}}
.stat .num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);color:#fff}
.stat .num em{font-style:normal;color:#D4D2FF}
.stat .lbl{color:#E9E7FF;font-size:.92rem;margin-top:4px}

/* SECURITY */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:860px){.sec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sec-grid{grid-template-columns:1fr}}
.sec-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;text-align:left;transition:.2s;box-shadow:0 4px 14px rgba(7,32,50,.04)}
.sec-card:hover{border-color:rgba(105,101,225,.45);box-shadow:var(--shadow)}
.sec-card h3{font-size:.98rem;margin-bottom:6px}
.sec-card p{font-size:.85rem}
.sec-banner{margin-top:36px;text-align:center;background:var(--grad);border-radius:14px;padding:22px;font-size:1rem;color:#fff}
.sec-banner b{font-family:'Space Grotesk',sans-serif}

/* QUOTES */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:820px){.quote-grid{grid-template-columns:1fr}}
.quote{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;text-align:left;position:relative;box-shadow:0 6px 20px rgba(7,32,50,.05)}
.quote p{font-size:.96rem;color:var(--ink);margin:10px 0 18px}
.quote .who{display:flex;align-items:center;gap:12px;clear:both}
.quote .av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.quote .who b{color:var(--ink);font-size:.9rem;display:block}
.quote .who span{font-size:.78rem;color:#8683AD}
.quote .metric{float:right;text-align:right;margin:0 0 10px 18px;max-width:140px}
.quote .metric b{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;color:var(--brand);display:block}
.quote .metric span{font-size:.66rem;color:#8683AD;text-transform:uppercase;letter-spacing:.06em}

/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;align-items:stretch}
@media(max-width:880px){.price-grid{grid-template-columns:1fr}}
.price{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 30px;display:flex;flex-direction:column;position:relative;text-align:left;box-shadow:0 6px 20px rgba(7,32,50,.05);transition:.25s}
.price:hover{transform:translateY(-4px)}
.price.hi{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:var(--shadow-lg)}
.badge{position:absolute;top:-13px;left:30px;background:var(--grad);color:#fff;font-size:.68rem;font-weight:700;padding:5px 14px;border-radius:999px;letter-spacing:.05em}
.price h3{font-size:1.02rem}
.price .amount{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.1rem;color:var(--ink);margin:10px 0 0}
.price .per{font-size:.82rem;color:#8683AD;margin-bottom:20px}
.price ul{list-style:none;flex:1;margin-bottom:26px}
.price li{font-size:.88rem;color:var(--body);padding:6px 0;display:flex;gap:9px}
.price li::before{content:"✓";color:var(--green);font-weight:700}
.price .btn{width:100%}
.price-note{text-align:center;margin-top:26px;font-size:.85rem;color:#8683AD}

/* FAQ */
.faq{max-width:760px;margin:44px auto 0;text-align:left}
details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 4px 12px rgba(7,32,50,.04)}
details[open]{border-color:rgba(105,101,225,.5)}
summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--ink);font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brand);font-size:1.3rem;font-weight:400}
details[open] summary::after{content:"–"}
details .a{padding:0 22px 20px;font-size:.92rem;color:var(--body)}

/* CTA */
.cta-sect{background:var(--soft)}
.cta-box{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:46px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;box-shadow:var(--shadow-lg)}
@media(max-width:820px){.cta-box{grid-template-columns:1fr;padding:30px}}
.cta-box h2{font-size:1.6rem;margin-bottom:12px}
.cta-box p{font-size:.95rem;margin-bottom:16px}
.cta-points{list-style:none}
.cta-points li{font-size:.9rem;color:var(--ink);padding:5px 0;display:flex;gap:10px}
.cta-points li::before{content:"→";color:var(--brand);font-weight:700}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){form .row{grid-template-columns:1fr}}
input.f,select{width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:10px;font-size:.92rem;margin-bottom:12px;font-family:'Inter',sans-serif;background:var(--soft);color:var(--ink)}
input.f::placeholder{color:#A9A6CE}
input.f:focus,select:focus{outline:2px solid var(--brand);border-color:var(--brand);background:#fff}
.form-fine{font-size:.75rem;color:#8683AD;margin-top:8px;text-align:center}

/* FOOTER - dark navy like site */
footer.site-footer{background:#072032;padding:60px 0 30px;font-size:.9rem;color:#9DB0BF}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
footer.site-footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-family:'Inter',sans-serif}
footer.site-footer a{display:block;padding:4px 0;color:#9DB0BF}
footer.site-footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#7A8FA0}

/* Inner pages (blog / page fallback) */
.page-content{padding:60px 0}
.breadcrumbs{font-size:.85rem;color:#8683AD;margin-bottom:22px}
.breadcrumbs a{color:var(--brand)}
.breadcrumbs a:hover{text-decoration:underline}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-content h1{margin-bottom:20px}
.page-content p{margin-bottom:16px}