/* =========================================================
   آرایه — Arayeh Landing Page
   Self-contained, no external dependencies.
   Aesthetic: editorial-luxury, dark navy canvas, muted emerald,
   composition/ornament motif (hairlines + indices).
   ========================================================= */

/* ---------- Fonts (local, bundled) ---------- */
@font-face{
  font-family:"Vazirmatn";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Vazirmatn";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"Vazirmatn";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"Vazirmatn";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root{
  /* brand */
  --navy-900:#0A1422;
  --navy-800:#0E1A2B;
  --navy-700:#13243B;
  --navy-600:#1B3450;
  --navy-500:#274463;
  --emerald:#2E7D6B;
  --emerald-bright:#3FA08A;
  --emerald-soft:#5FBFA8;
  --amber:#E8B45A;

  /* neutrals */
  --paper:#F6F8FA;
  --paper-2:#EEF2F6;
  --ink:#0E1A2B;
  --muted:#5B6B7B;
  --muted-2:#8A99A8;
  --line:#E2E8EE;
  --line-dark:rgba(255,255,255,.10);

  /* surfaces */
  --bg:var(--paper);
  --card:#FFFFFF;

  /* type */
  --font:"Vazirmatn",system-ui,"Segoe UI",Tahoma,sans-serif;

  /* shape */
  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px;

  /* shadow */
  --sh-sm:0 2px 8px rgba(14,26,43,.06);
  --sh-md:0 12px 34px rgba(14,26,43,.10);
  --sh-lg:0 30px 70px rgba(10,20,34,.30);
  --sh-emerald:0 16px 40px rgba(46,125,107,.30);

  /* layout */
  --maxw:1120px;
  --gutter:clamp(18px,4vw,40px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  font-weight:400;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
/* the [hidden] attribute must win over author display rules (.chat-panel,
   .chat-input, .step2-variant, .form-success all set display) */
[hidden]{display:none !important}
:focus-visible{outline:2.5px solid var(--emerald-bright);outline-offset:3px;border-radius:6px}

/* ---------- Grain / atmosphere ---------- */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.skip-link{
  position:fixed;top:-60px;inset-inline-start:16px;z-index:200;
  background:var(--emerald);color:#fff;padding:10px 16px;border-radius:var(--r-sm);
  transition:top .2s;
}
.skip-link:focus{top:12px}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative;z-index:2}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:600;color:var(--emerald);
  letter-spacing:.02em;
}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 4px rgba(46,125,107,.18)}

.kicker{
  display:inline-block;font-size:.8rem;font-weight:700;color:var(--emerald);
  letter-spacing:.04em;margin-bottom:14px;
  padding-inline-start:0;
}
.kicker.light{color:var(--emerald-soft)}

.section-head{max-width:680px;margin-bottom:clamp(34px,5vw,56px)}
.section-title{
  font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:800;line-height:1.3;letter-spacing:-.01em;
}
.section-title em{font-style:normal;color:var(--emerald);position:relative}
.section-lead{margin-top:14px;color:var(--muted);font-size:clamp(1rem,1.6vw,1.12rem)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.98rem;
  padding:13px 22px;border-radius:var(--r-pill);
  transition:transform .18s ease,box-shadow .25s ease,background .2s,color .2s,border-color .2s;
  position:relative;white-space:nowrap;
}
.btn .ic{width:18px;height:18px}
.btn-primary{background:var(--emerald);color:#fff;box-shadow:var(--sh-emerald)}
.btn-primary:hover{background:var(--emerald-bright);transform:translateY(-2px);box-shadow:0 20px 46px rgba(46,125,107,.4)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--emerald);color:var(--emerald);transform:translateY(-2px)}
.btn-text{padding:10px 8px;color:var(--muted);font-weight:600}
.btn-text:hover{color:var(--emerald)}
.btn-lg{padding:16px 30px;font-size:1.05rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}

/* on dark surfaces */
.is-dark .btn-ghost,.hero .btn-ghost{border-color:rgba(255,255,255,.22);color:#fff}
.is-dark .btn-ghost:hover,.hero .btn-ghost:hover{border-color:var(--emerald-soft);color:var(--emerald-soft)}

.btn-pulse{
  position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(63,160,138,.55);animation:pulse 2.4s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,160,138,.5)}70%{box-shadow:0 0 0 16px rgba(63,160,138,0)}100%{box-shadow:0 0 0 0 rgba(63,160,138,0)}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(246,248,250,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s;
}
.site-header.scrolled{border-color:var(--line);box-shadow:var(--sh-sm)}
.header-inner{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.brand-mark{display:block;width:34px;height:34px;color:var(--emerald)}
.brand-name{font-weight:800;font-size:1.4rem;letter-spacing:-.01em}
.brand-tag{
  margin-inline-start:4px;font-size:.72rem;font-weight:700;color:var(--emerald);
  background:rgba(46,125,107,.1);padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;
}
body[class*="theme-"] .brand-tag{color:var(--th);background:color-mix(in srgb,var(--th) 11%,transparent)}
@media (max-width:520px){.brand-tag{display:none}}
.header-nav{display:flex;gap:26px;margin-inline-start:auto}
.header-nav a{color:var(--muted);font-weight:600;font-size:.95rem;position:relative;transition:color .2s}
.header-nav a::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:2px;background:var(--emerald);transform:scaleX(0);transform-origin:right;transition:transform .25s}
.header-nav a:hover{color:var(--ink)}
.header-nav a:hover::after{transform:scaleX(1)}
.header-cta{margin-inline-start:6px;padding:10px 18px;font-size:.92rem}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 120% at 85% -10%,var(--navy-600) 0%,var(--navy-800) 45%,var(--navy-900) 100%);
  color:#fff;
  padding-block:clamp(44px,5vw,80px) clamp(36px,4vw,64px);
}
.hero::before{ /* hairline composition rules */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:100% 34px;mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}
.hero-glow{
  position:absolute;inset-inline-end:-10%;top:-20%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(46,125,107,.34),transparent 62%);filter:blur(20px);pointer-events:none;
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:start;
}
.hero-copy{max-width:560px}
.hero .eyebrow{color:var(--emerald-soft)}
.hero .eyebrow-dot{background:var(--emerald-soft);box-shadow:0 0 0 4px rgba(95,191,168,.18)}
.hero-title{
  margin-top:14px;font-size:clamp(2.05rem,5.2vw,3.5rem);font-weight:800;line-height:1.28;letter-spacing:-.015em;
}
.hero-title .hl{
  color:var(--emerald-soft);position:relative;white-space:nowrap;
}
.hero-sub{margin-top:16px;font-size:clamp(1.02rem,1.8vw,1.2rem);color:rgba(255,255,255,.74);max-width:520px}
.hero-sub strong{color:#fff;font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-lead{margin-top:12px;max-width:460px}
.hero-lead-wrap{display:flex;flex-direction:column;gap:4px}
.hero-lead-row{display:flex;gap:8px}
.hero-lead input{
  flex:1;min-width:0;padding:12px 16px;border:1.5px solid rgba(255,255,255,.22);border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:#fff;font-size:.95rem;transition:border-color .2s,background .2s
}
.hero-lead input::placeholder{color:rgba(255,255,255,.55);font-size:.9rem}
.hero-lead input:focus{outline:none;border-color:var(--emerald-soft);background:rgba(255,255,255,.12)}
.hero-lead input.is-invalid{border-color:#e57373;background:rgba(229,115,115,.12)}
.hero-lead .btn{padding:12px 20px;border-radius:var(--r-pill);font-size:.95rem}
.hero-lead-err{display:block;min-height:18px;font-size:.78rem;font-weight:600;color:#e57373}
.hero-lead-success{display:flex;align-items:center;gap:12px;color:#fff;animation:stepIn .4s ease}
.hero-lead-success .success-ring{flex:none;width:42px;height:42px;margin:0}
.hero-lead-success .success-ring svg{width:22px;height:22px}
.hero-lead-success p{font-size:.95rem;font-weight:600;color:var(--emerald-soft);margin:0}
.hero-lead-success[hidden]{display:none}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.hero-meta li{display:flex;align-items:center;gap:8px;font-size:.86rem;color:rgba(255,255,255,.7)}
.hero-meta .ic{width:18px;height:18px;color:var(--emerald-soft);flex:none}

/* --- browser mockup --- */
.hero-visual{position:relative;margin-top:96px}
.composition-grid{
  position:absolute;inset:-22px -22px auto auto;width:120px;height:120px;z-index:0;opacity:.55;
  background-image:radial-gradient(rgba(95,191,168,.5) 1.3px,transparent 1.3px);
  background-size:16px 16px;
}
.browser{
  position:relative;z-index:2;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.5);
  transform:perspective(1400px) rotateY(3deg) rotateX(1.5deg);
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:perspective(1400px) rotateY(3deg) rotateX(1.5deg) translateY(0)}50%{transform:perspective(1400px) rotateY(3deg) rotateX(1.5deg) translateY(-10px)}}
.browser-bar{
  display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--paper-2);border-bottom:1px solid var(--line);
}
.browser-bar .dot{width:10px;height:10px;border-radius:50%;background:#cdd6df}
.browser-bar .dot:nth-child(1){background:#f0a0a0}
.browser-bar .dot:nth-child(2){background:#f0cf8c}
.browser-bar .dot:nth-child(3){background:#a7d6b6}
.browser-url{
  margin-inline-start:auto;margin-inline-end:auto;font-size:.72rem;color:var(--muted-2);
  background:#fff;padding:3px 16px;border-radius:var(--r-pill);border:1px solid var(--line);direction:ltr;
}
.browser-body{position:relative;height:300px;background:linear-gradient(180deg,#fff,#f7faf9)}

.mini-site{padding:18px 18px 0;filter:saturate(.95)}
.ms-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.ms-logo{width:40px;height:14px;border-radius:5px;background:var(--navy-700)}
.ms-links{width:120px;height:8px;border-radius:5px;background:var(--line)}
.ms-hero{display:flex;flex-direction:column;gap:12px;max-width:60%}
.ms-line{height:13px;border-radius:6px;background:linear-gradient(90deg,var(--navy-600),var(--navy-500))}
.ms-line.w70{width:80%}
.ms-line.w50{width:55%;background:var(--line)}
.ms-btn{width:120px;height:30px;border-radius:var(--r-pill);background:var(--emerald);margin-top:6px}
.ms-cards{display:flex;gap:10px;margin-top:26px}
.ms-cards span{flex:1;height:64px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}

/* chat overlay inside browser */
.demo-chat{
  position:absolute;inset-block-end:14px;inset-inline-start:14px;width:min(74%,260px);
  background:#fff;border-radius:16px;box-shadow:var(--sh-md);border:1px solid var(--line);overflow:hidden;
}
.demo-chat-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--navy-800);color:#fff}
.demo-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);font-weight:800;font-size:.8rem}
.demo-name{display:flex;flex-direction:column;font-size:.8rem;font-weight:700;line-height:1.3}
.demo-name small{font-weight:500;font-size:.62rem;color:var(--emerald-soft)}
.demo-thread{padding:12px;display:flex;flex-direction:column;gap:8px;min-height:108px}
.demo-msg{max-width:88%;padding:8px 11px;border-radius:13px;font-size:.78rem;line-height:1.6;opacity:0;transform:translateY(6px);animation:msgIn .35s forwards}
.demo-msg.bot{background:var(--paper-2);color:var(--ink);border-end-start-radius:4px;align-self:flex-start}
.demo-msg.user{background:var(--emerald);color:#fff;border-end-end-radius:4px;align-self:flex-end}
.demo-msg.typing{display:inline-flex;gap:4px;align-self:flex-start;background:var(--paper-2);padding:11px 13px}
.demo-msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted-2);animation:blink 1.2s infinite}
.demo-msg.typing span:nth-child(2){animation-delay:.2s}
.demo-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes msgIn{to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* floating chips */
.float-chip{
  position:absolute;z-index:3;background:#fff;color:var(--ink);font-size:.8rem;font-weight:700;
  padding:9px 14px;border-radius:var(--r-pill);box-shadow:var(--sh-md);border:1px solid var(--line);
  display:flex;align-items:center;gap:8px;animation:float 6s ease-in-out infinite;
}
.chip-lead{inset-block-start:8%;inset-inline-start:-4%;animation-delay:.6s}
.chip-rate{inset-block-end:6%;inset-inline-end:-5%;animation-delay:1.4s}
.chip-rate strong{color:var(--emerald)}
.chip-dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 4px rgba(46,125,107,.16)}

/* =========================================================
   TRUST BAR
   ========================================================= */
.trust{background:var(--navy-900);color:#fff;padding-block:24px 38px}
.trust-label{text-align:center;color:rgba(255,255,255,.5);font-size:.85rem;font-weight:600;margin-bottom:16px}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 38px;opacity:.85}
.logo-ph{
  font-weight:800;font-size:1.15rem;color:rgba(255,255,255,.62);letter-spacing:.01em;
  filter:grayscale(1);transition:color .25s,filter .25s;
}
.logo-ph:hover{color:#fff;filter:none}
.trust-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;
  border-top:1px solid var(--line-dark);padding-top:20px;
}
.stat{text-align:center}
.stat-num{display:block;font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;color:var(--emerald-soft);line-height:1.1}
.stat-lbl{display:block;margin-top:6px;color:rgba(255,255,255,.62);font-size:.86rem}

/* =========================================================
   VALUE PROP
   ========================================================= */
.value{padding-block:clamp(48px,6vw,84px)}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.value-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 22px;
  position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.value-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--emerald),var(--emerald-soft));transform:scaleX(0);transform-origin:right;transition:transform .3s}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:transparent}
.value-card:hover::before{transform:scaleX(1)}
.value-idx{font-size:.8rem;font-weight:800;color:var(--emerald);opacity:.6}
.value-card h3{margin-top:14px;font-size:1.12rem;font-weight:700;line-height:1.5}
.value-card p{margin-top:10px;color:var(--muted);font-size:.92rem}

/* =========================================================
   SERVICES
   ========================================================= */
.services{padding-block:clamp(20px,3vw,40px) clamp(48px,6vw,84px)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;transition:transform .25s,box-shadow .25s;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.service-card--feature{
  background:linear-gradient(170deg,var(--navy-700),var(--navy-800));color:#fff;border-color:transparent;
  box-shadow:var(--sh-lg);
}
.service-ic{
  display:grid;place-items:center;width:54px;height:54px;border-radius:16px;margin-bottom:18px;
  background:rgba(46,125,107,.12);color:var(--emerald);
}
.service-ic svg{width:26px;height:26px}
.service-card--feature .service-ic{background:rgba(95,191,168,.18);color:var(--emerald-soft)}
.service-card h3{font-size:1.25rem;font-weight:800}
.service-card>p{margin-top:10px;color:var(--muted);font-size:.95rem}
.service-card--feature>p{color:rgba(255,255,255,.78)}
.service-list{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.service-list li{position:relative;padding-inline-start:24px;font-size:.9rem;color:var(--muted)}
.service-card--feature .service-list li{color:rgba(255,255,255,.82)}
.service-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;width:11px;height:6px;
  border-inline-start:2px solid var(--emerald);border-bottom:2px solid var(--emerald);transform:rotate(-45deg);
}
.service-card--feature .service-list li::before{border-color:var(--emerald-soft)}
.services .section-head{max-width:900px}
.badge-pop{
  position:absolute;inset-block-start:18px;inset-inline-start:18px;
  background:var(--amber);color:var(--navy-900);font-size:.72rem;font-weight:800;
  padding:4px 12px;border-radius:var(--r-pill);
}

/* =========================================================
   BENEFITS (feature -> result)
   ========================================================= */
.benefits{background:var(--navy-800);color:#fff;padding-block:clamp(48px,6vw,84px);overflow:hidden}
.benefits .section-title em{color:var(--emerald-soft)}
.benefits .section-lead{color:rgba(255,255,255,.66)}
.benefit-list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.benefit-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);align-items:center;gap:18px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--r-md);
  padding:18px 22px;transition:background .25s,border-color .25s,transform .25s;
}
.benefit-row:hover{background:rgba(255,255,255,.07);transform:translateX(-4px)}
.benefit-feature{font-weight:700;color:rgba(255,255,255,.86)}
.benefit-arrow{width:24px;height:24px;color:var(--emerald-soft);flex:none}
.benefit-result{color:var(--emerald-soft);font-weight:600}
.benefit-row--star{
  background:linear-gradient(100deg,rgba(46,125,107,.22),rgba(46,125,107,.06));
  border-color:rgba(95,191,168,.32);
}
.benefit-row--star .benefit-result{color:#fff}

/* =========================================================
   DEMO INVITE
   ========================================================= */
.demo-invite{padding-block:clamp(48px,6vw,84px)}
.demo-invite-inner{
  display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-900));border-radius:var(--r-xl);
  padding:clamp(32px,5vw,60px);color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-lg);
}
.demo-invite-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 20%,rgba(46,125,107,.35),transparent 55%)}
.demo-invite-copy{position:relative;z-index:2}
.demo-invite .section-lead{color:rgba(255,255,255,.74)}
.demo-invite .btn{margin-top:26px}
.demo-invite-art{position:relative;height:200px;display:grid;place-items:center}
.orbit{position:absolute;border:1.5px dashed rgba(95,191,168,.28);border-radius:50%}
.orbit.o1{width:150px;height:150px;animation:spin 16s linear infinite}
.orbit.o2{width:210px;height:210px;animation:spin 24s linear infinite reverse}
.orbit::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--emerald-soft);box-shadow:0 0 10px var(--emerald-soft)}
.orbit.o1::after{top:0;left:50%;transform:translate(-50%,-50%)}
.orbit.o2::after{bottom:0;left:50%;transform:translate(-50%,50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-core{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,var(--emerald-bright),var(--emerald));
  color:#fff;
  box-shadow:
    0 0 0 10px rgba(63,160,138,.12),
    0 0 48px rgba(63,160,138,.55),
    inset 0 -5px 12px rgba(0,0,0,.18);
  position:relative;z-index:2;
  animation:corePulse 3s ease-in-out infinite;
}
.orbit-core svg{width:32px;height:32px}
.orbit-core::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
  pointer-events:none;
}
@keyframes corePulse{
  0%,100%{box-shadow:0 0 0 10px rgba(63,160,138,.12),0 0 48px rgba(63,160,138,.55),inset 0 -5px 12px rgba(0,0,0,.18)}
  50%{box-shadow:0 0 0 16px rgba(63,160,138,.06),0 0 64px rgba(63,160,138,.78),inset 0 -5px 12px rgba(0,0,0,.18)}
}

/* =========================================================
   PROOF / testimonials (vertical, logo above)
   ========================================================= */
.proof{padding-block:clamp(48px,6vw,84px)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proof-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;
  display:flex;flex-direction:column;gap:16px;transition:transform .25s,box-shadow .25s;
}
.proof-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.proof-logo{font-weight:800;font-size:1.2rem;color:var(--navy-700)}
/* case-study testimonials */
.proof-cases{display:flex;flex-direction:column;gap:clamp(36px,5vw,60px)}
.pf-label{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--navy-700);margin:0 0 18px;font-size:1.05rem}
.pf-dot{width:9px;height:9px;border-radius:50%;background:var(--emerald);flex:0 0 auto}
.casestudy-row{display:grid;grid-template-columns:1.12fr .88fr;gap:24px;align-items:center}
.casestudy-row--rev .cs-shot{order:2}
.cs-shot{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--sh-md);transition:transform .25s,box-shadow .25s}
.cs-shot:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.cs-shot img{display:block;width:100%;height:auto}
.cs-shot figcaption{padding:14px 18px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);background:var(--paper-2)}
.casestudy-quote{margin:0;background:var(--card);border:1px solid var(--line);border-right:3px solid var(--emerald);border-radius:var(--r-lg);padding:28px 30px;display:flex;flex-direction:column;gap:14px}
.casestudy-quote .proof-logo{font-size:1.05rem}
.casestudy-quote blockquote{margin:0;font-size:1.02rem;line-height:1.95;color:var(--ink);flex:1}
.casestudy-quote figcaption{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:14px}
.casestudy-quote figcaption strong{color:var(--navy-700);font-weight:700}
.casestudy-quote figcaption span{color:var(--muted);font-size:.88rem}
@media(max-width:768px){.casestudy-row{grid-template-columns:1fr}.casestudy-row--rev .cs-shot{order:0}}
.proof-card blockquote{font-size:1rem;line-height:1.9;color:var(--ink);position:relative;flex:1}
.proof-card blockquote::before{content:"”";font-size:2.4rem;color:var(--emerald);opacity:.35;line-height:0;position:relative;top:.4em}
.proof-card figcaption{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:14px}
.proof-card figcaption strong{font-weight:700}
.proof-card figcaption span{color:var(--muted);font-size:.86rem}

/* =========================================================
   PRICING
   ========================================================= */
.pricing{background:var(--paper-2);padding-block:clamp(48px,6vw,84px)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 28px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.price-card--pop{
  background:linear-gradient(175deg,var(--navy-700),var(--navy-900));color:#fff;border-color:transparent;
  box-shadow:var(--sh-lg);transform:scale(1.03);z-index:2;
}
.price-card--pop:hover{transform:scale(1.03) translateY(-6px)}
.price-flag{
  position:absolute;inset-block-start:-13px;inset-inline-start:50%;transform:translateX(50%);
  background:var(--amber);color:var(--navy-900);font-size:.74rem;font-weight:800;padding:5px 16px;border-radius:var(--r-pill);
}
.price-tier{font-size:1.4rem;font-weight:800}
.price-desc{margin-top:10px;color:var(--muted);font-size:.92rem;min-height:54px}
.price-card--pop .price-desc{color:rgba(255,255,255,.76)}
.price-feats{margin:20px 0 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.price-feats li{position:relative;padding-inline-start:26px;font-size:.92rem;color:var(--muted)}
.price-card--pop .price-feats li{color:rgba(255,255,255,.85)}
.price-feats li::before{
  content:"";position:absolute;inset-inline-start:0;top:.5em;width:16px;height:16px;border-radius:50%;
  background:rgba(46,125,107,.14);
}
.price-feats li::after{
  content:"";position:absolute;inset-inline-start:5px;top:.72em;width:7px;height:4px;
  border-inline-start:2px solid var(--emerald);border-bottom:2px solid var(--emerald);transform:rotate(-45deg);
}
.price-card--pop .price-feats li::before{background:rgba(95,191,168,.22)}
.price-card--pop .price-feats li::after{border-color:var(--emerald-soft)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding-block:clamp(48px,6vw,84px)}
.faq-inner{max-width:820px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.faq-item[open]{border-color:var(--emerald);box-shadow:var(--sh-sm)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;font-size:1.02rem;
  display:flex;align-items:center;gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:rgba(46,125,107,.1);color:var(--emerald);
  display:grid;place-items:center;font-weight:800;font-size:1.2rem;transition:transform .25s,background .25s;
}
.faq-item[open] summary::before{content:"–";background:var(--emerald);color:#fff}
.faq-body{padding:0 24px 22px 64px}
.faq-body p{color:var(--muted);font-size:.96rem}

/* =========================================================
   LEAD FORM
   ========================================================= */
.leadform{
  background:radial-gradient(120% 120% at 10% 0%,var(--navy-700),var(--navy-900));
  color:#fff;padding-block:clamp(48px,6vw,84px);overflow:hidden;
}
.leadform-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,60px);align-items:center}
.leadform-copy{max-width:460px}
.leadform .section-lead{color:rgba(255,255,255,.72)}
.leadform-assure{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.leadform-assure li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82)}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(95,191,168,.18);position:relative}
.tick::after{content:"";position:absolute;inset-inline-start:7px;top:6px;width:7px;height:4px;border-inline-start:2px solid var(--emerald-soft);border-bottom:2px solid var(--emerald-soft);transform:rotate(-45deg)}

.form-card{
  background:var(--card);color:var(--ink);border-radius:var(--r-xl);padding:clamp(26px,3.5vw,38px);
  box-shadow:var(--sh-lg);position:relative;
}
.form-progress{margin-bottom:26px}
.form-progress-bar{height:7px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden}
.form-progress-bar span{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--amber),var(--emerald-bright));transition:width .4s cubic-bezier(.4,0,.2,1)}
.form-progress-label{display:block;margin-top:10px;font-size:.82rem;color:var(--muted);font-weight:600}

.form-step{border:0;padding:0;display:none;animation:stepIn .35s ease}
.form-step.is-active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.step-q{font-size:1.2rem;font-weight:800;line-height:1.5;margin-bottom:18px;padding:0}

.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt-grid--col{grid-template-columns:1fr}
.opt{
  text-align:start;padding:16px 18px;border:1.5px solid var(--line);border-radius:var(--r-md);
  font-weight:600;font-size:.98rem;color:var(--ink);background:var(--card);
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;position:relative;
}
.opt:hover{border-color:var(--emerald);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.opt.is-selected{border-color:var(--emerald);background:rgba(46,125,107,.08);box-shadow:0 0 0 3px rgba(46,125,107,.12)}
.opt.is-selected::after{content:"✓";position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%);color:var(--emerald);font-weight:800}
.opt--soft{color:var(--muted);font-weight:500}

.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:8px}
.field input{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-md);font-size:1rem;
  background:var(--paper);transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus{outline:none;border-color:var(--emerald);background:#fff;box-shadow:0 0 0 3px rgba(46,125,107,.14)}
.field.is-invalid input{border-color:#d9534f;background:#fdf3f3}
.field.is-valid input{border-color:var(--emerald)}
.field-err{display:block;min-height:18px;margin-top:6px;color:#d9534f;font-size:.82rem;font-weight:600}
.check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--muted);cursor:pointer}
.check input{margin-top:5px;accent-color:var(--emerald);width:16px;height:16px}

.form-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.form-nav #formNext{margin-inline-start:auto}

.form-success{text-align:center;padding:14px 0 6px;animation:stepIn .4s ease}
.success-ring{
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;margin:0 auto 18px;
  background:rgba(46,125,107,.12);color:var(--emerald);
}
.success-ring svg{width:36px;height:36px}
.form-success h3{font-size:1.4rem;font-weight:800}
.form-success p{margin:10px auto 22px;color:var(--muted);max-width:340px}

.step-hint{color:var(--muted);font-size:.9rem;margin:-6px 0 14px;line-height:1.6}

.recommendation{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);padding:18px;margin-bottom:18px}
.recommendation h3{font-size:1.15rem;font-weight:800;margin:10px 0 8px;color:var(--ink)}
.recommendation ul{list-style:disc;padding-inline-start:22px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.recommendation li,.recommendation p{color:var(--muted);font-size:.95rem;line-height:1.6}
.recommendation p{margin-bottom:8px}
.recommendation p strong{color:var(--ink);font-weight:700}

.form-disclaimer{text-align:center;font-size:.82rem;color:var(--muted);margin-top:14px}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--navy-900);color:#fff;padding-block:48px 24px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;padding-bottom:30px;border-bottom:1px solid var(--line-dark)}
.footer-brand .brand-name{font-size:1.5rem}
.footer-brand p{color:rgba(255,255,255,.6);margin-top:8px;font-size:.95rem}
.footer-label{display:block;color:rgba(255,255,255,.5);font-size:.82rem;margin-bottom:14px}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer-links a{padding:9px 18px;border:1px solid var(--line-dark);border-radius:var(--r-pill);font-size:.88rem;font-weight:600;transition:border-color .2s,background .2s}
.footer-links a:hover{border-color:var(--emerald-soft);background:rgba(46,125,107,.14)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:22px;color:rgba(255,255,255,.45);font-size:.82rem}
.footer-resil{display:flex;align-items:center;gap:8px}

/* (exit-intent modal removed by request) */
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

/* =========================================================
   CHAT WIDGET
   ========================================================= */
.chat-launcher{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:140;
  width:62px;height:62px;border-radius:50%;background:var(--emerald);color:#fff;
  display:grid;place-items:center;box-shadow:var(--sh-emerald);transition:transform .2s,background .2s;
}
.chat-launcher:hover{transform:scale(1.06);background:var(--emerald-bright)}
.chat-launcher svg{width:28px;height:28px;position:absolute;transition:opacity .2s,transform .3s}
.chat-launcher .ic-close{opacity:0;transform:rotate(-90deg) scale(.6)}
body.chat-open .chat-launcher .ic-chat{opacity:0;transform:rotate(90deg) scale(.6)}
body.chat-open .chat-launcher .ic-close{opacity:1;transform:none}
.launcher-ping{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(46,125,107,.5);animation:pulse 2.6s infinite}
body.chat-open .launcher-ping{display:none}
.chat-launcher-badge{
  position:absolute;inset-block-start:2px;inset-inline-end:2px;width:14px;height:14px;
  border-radius:50%;background:var(--amber);border:2px solid var(--emerald);
  z-index:2;animation:popIn .35s;
}
body.chat-open .chat-launcher-badge{display:none}
.chat-launcher-bubble{
  position:absolute;inset-block-end:50%;inset-inline-end:74px;transform:translateY(50%);
  background:#fff;color:var(--ink);font-size:.84rem;font-weight:600;padding:10px 14px;border-radius:14px;
  box-shadow:var(--sh-md);white-space:nowrap;border:1px solid var(--line);animation:popIn .35s;
}
.chat-launcher-bubble::after{content:"";position:absolute;inset-inline-end:-6px;top:50%;transform:translateY(-50%) rotate(45deg);width:12px;height:12px;background:#fff;border-inline-end:1px solid var(--line);border-block-start:1px solid var(--line)}

.chat-panel{
  position:fixed;inset-block-end:98px;inset-inline-end:24px;z-index:141;
  width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 130px));
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  transform-origin:bottom left;animation:chatIn .3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes chatIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,var(--navy-700),var(--navy-900));color:#fff}
.chat-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);font-weight:800;font-size:1.1rem;flex:none}
.chat-id{display:flex;flex-direction:column;line-height:1.4}
.chat-id strong{font-size:1rem}
.chat-id small{display:flex;align-items:center;gap:6px;font-size:.78rem;color:rgba(255,255,255,.7)}
.online-dot{width:8px;height:8px;border-radius:50%;background:#5FBFA8;box-shadow:0 0 0 3px rgba(95,191,168,.3)}
.chat-min{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);transition:background .2s}
.chat-min:hover{background:rgba(255,255,255,.22)}
.chat-min svg{width:20px;height:20px}

.chat-thread{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.chat-thread::-webkit-scrollbar{width:7px}
.chat-thread::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:.92rem;line-height:1.75;animation:msgIn .3s ease}
.msg.bot{background:var(--card);border:1px solid var(--line);border-end-start-radius:5px;align-self:flex-start;box-shadow:var(--sh-sm)}
.msg.user{background:var(--emerald);color:#fff;border-end-end-radius:5px;align-self:flex-end}
.msg.typing{display:inline-flex;gap:5px;align-self:flex-start;background:var(--card);border:1px solid var(--line);padding:14px 16px}
.msg.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:blink 1.2s infinite}
.msg.typing span:nth-child(2){animation-delay:.2s}
.msg.typing span:nth-child(3){animation-delay:.4s}

.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px;background:var(--paper)}
.chat-quick:not(:empty){padding-block:6px 14px}
.quick-btn{
  border:1.5px solid var(--emerald);color:var(--emerald);background:var(--card);
  padding:9px 15px;border-radius:var(--r-pill);font-weight:600;font-size:.86rem;
  transition:background .2s,color .2s,transform .15s;animation:msgIn .3s;
}
.quick-btn:hover{background:var(--emerald);color:#fff;transform:translateY(-2px)}

.chat-input{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--line);background:var(--card)}
.chat-input input{flex:1;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:11px 16px;font-size:.92rem;background:var(--paper)}
.chat-input input:focus{outline:none;border-color:var(--emerald);background:#fff}
.chat-input button{flex:none;width:44px;height:44px;border-radius:50%;background:var(--emerald);color:#fff;display:grid;place-items:center;transition:background .2s,transform .15s}
.chat-input button:hover{background:var(--emerald-bright);transform:scale(1.05)}
.chat-input button svg{width:20px;height:20px}

/* =========================================================
   PER-VERTICAL ACCENT THEMES (campaign landing pages)
   Scoped to body.theme-* only — the base/index page is untouched.
   Primary CTAs stay emerald (brand through-line); only decorative
   accents shift per industry.
   ========================================================= */
body.theme-doctor{--th:#2E83A6;--th-soft:#6FB8D6}      /* medical azure  */
body.theme-clinic{--th:#B56E86;--th-soft:#D9A2B6}      /* refined rose   */
body.theme-restaurant{--th:#C2703D;--th-soft:#E3A368}  /* warm terracotta*/
body.theme-creative{--th:#7C5CC4;--th-soft:#B79BF2}    /* creative violet*/

body[class*="theme-"] .kicker,
body[class*="theme-"] .eyebrow{color:var(--th)}
body[class*="theme-"] .eyebrow-dot{background:var(--th);box-shadow:0 0 0 4px color-mix(in srgb,var(--th) 22%,transparent)}
body[class*="theme-"] .kicker.light{color:var(--th-soft)}
body[class*="theme-"] .section-title em{color:var(--th)}
body[class*="theme-"] .hero .eyebrow{color:var(--th-soft)}
body[class*="theme-"] .hero .eyebrow-dot{background:var(--th-soft)}
body[class*="theme-"] .hero-title .hl{color:var(--th-soft)}
body[class*="theme-"] .hero-glow{opacity:.36;background:radial-gradient(circle,var(--th),transparent 60%)}
body[class*="theme-"] .hero-meta .ic{color:var(--th-soft)}
body[class*="theme-"] .value-card::before{background:linear-gradient(90deg,var(--th),var(--th-soft))}
body[class*="theme-"] .value-idx{color:var(--th)}
body[class*="theme-"] .chip-dot{background:var(--th)}
body[class*="theme-"] .chip-rate strong{color:var(--th)}
body[class*="theme-"] .service-ic{color:var(--th);background:color-mix(in srgb,var(--th) 12%,transparent)}
body[class*="theme-"] .service-card--feature .service-ic{color:var(--th-soft);background:color-mix(in srgb,var(--th-soft) 18%,transparent)}
body[class*="theme-"] .service-list li::before{border-color:var(--th)}
body[class*="theme-"] .service-card--feature .service-list li::before{border-color:var(--th-soft)}
body[class*="theme-"] .turnkey-ic{color:var(--th);background:color-mix(in srgb,var(--th) 12%,transparent)}
body[class*="theme-"] .benefit-row--star{background:linear-gradient(100deg,color-mix(in srgb,var(--th) 22%,transparent),color-mix(in srgb,var(--th) 6%,transparent));border-color:color-mix(in srgb,var(--th-soft) 32%,transparent)}
body[class*="theme-"] .benefit-result{color:var(--th-soft)}
body[class*="theme-"] .benefit-arrow{color:var(--th-soft)}
body[class*="theme-"] .proof-card blockquote::before{color:var(--th)}
body[class*="theme-"] .price-flag{background:var(--th);color:#fff}
body[class*="theme-"] .faq-item[open]{border-color:var(--th)}
body[class*="theme-"] .faq-item summary::before{color:var(--th);background:color-mix(in srgb,var(--th) 10%,transparent)}
body[class*="theme-"] .faq-item[open] summary::before{background:var(--th);color:#fff}
body[class*="theme-"] .tick{background:color-mix(in srgb,var(--th-soft) 20%,transparent)}
body[class*="theme-"] .tick::after{border-color:var(--th-soft)}

/* =========================================================
   TURNKEY STRIP (all-in-one services: site + chatbot + domain
   + server + payment gateway + support) — used on campaign pages
   ========================================================= */
.turnkey{padding-block:clamp(56px,8vw,96px)}
.turnkey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.turnkey-card{
  display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px 20px;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.turnkey-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.turnkey-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(46,125,107,.12);color:var(--emerald)}
.turnkey-ic svg{width:24px;height:24px}
.turnkey-card h3{font-size:1.05rem;font-weight:700}
.turnkey-card p{margin-top:6px;color:var(--muted);font-size:.9rem;line-height:1.7}
.turnkey-note{
  margin-top:26px;text-align:center;font-weight:700;color:var(--ink);
  background:rgba(46,125,107,.08);border:1px dashed var(--line);border-radius:var(--r-pill);
  padding:14px 22px;
}
body[class*="theme-"] .turnkey-note{background:color-mix(in srgb,var(--th) 9%,transparent)}
@media (max-width:900px){.turnkey-grid{grid-template-columns:1fr}}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .value-grid{grid-template-columns:1fr 1fr}
  .hero-grid{gap:36px}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{order:2;max-width:520px;margin-inline:auto}
  .hero-copy{max-width:640px}
  .services-grid,.proof-grid,.pricing-grid{grid-template-columns:1fr}
  .price-card--pop{transform:none}
  .price-card--pop:hover{transform:translateY(-6px)}
  .price-flag{transform:translateX(50%)}
  .demo-invite-inner{grid-template-columns:1fr;text-align:center}
  .demo-invite-art{display:none}
  .benefits-inner .section-head{margin-inline:auto;text-align:center}
  .leadform-inner{grid-template-columns:1fr}
  .leadform-copy{max-width:none;text-align:center}
  .leadform-assure{display:inline-flex;text-align:start}
}
@media (max-width:720px){
  .header-nav{display:none}
  .header-cta{margin-inline-start:auto}
  .trust-stats{grid-template-columns:1fr;gap:24px}
  .benefit-row{grid-template-columns:1fr;text-align:center;gap:8px}
  .benefit-arrow{transform:rotate(-90deg);margin-inline:auto}
  .benefit-row:hover{transform:none}
  .opt-grid{grid-template-columns:1fr}
  .faq-body{padding-inline:24px}
  .chat-panel{inset-block-end:88px;inset-inline:8px auto;width:calc(100vw - 16px);height:min(70vh,520px)}
  .chat-launcher-bubble{display:none}
  .hero-lead-row{flex-direction:column}
  .hero-lead .btn{width:100%}
  .sticky-cta{display:flex}
}

/* =========================================================
   STICKY CTA BAR
   ========================================================= */
.sticky-cta{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:130;
  display:none;align-items:center;justify-content:center;gap:12px;
  padding:14px 18px;background:rgba(246,248,250,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(14,26,43,.10);
  transition:transform .3s ease;
}
.sticky-cta.is-hidden{transform:translateY(110%)}
.sticky-cta .btn{padding:13px 28px;font-size:1rem}
body.chat-open .sticky-cta{transform:translateY(110%)}
@media (max-width:420px){
  .browser-body{height:300px}
  .hero-cta .btn{width:100%}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .browser{animation:none;transform:none}
  .float-chip{animation:none}
}

/* =========================================================
   CASE STUDIES PAGE — /results
   ========================================================= */

/* ---------- Counter hero cards ---------- */
.counter-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  background:var(--navy-700);padding:18px;border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.08);
}
.counter-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);padding:20px;text-align:center;
  transition:transform .25s,background .25s;
}
.counter-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.counter-card:nth-child(3){grid-column:1 / -1}
.counter{
  display:block;font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;
  color:var(--emerald-soft);line-height:1.1;direction:ltr;
}
.counter-label{
  display:block;margin-top:8px;font-size:.84rem;color:rgba(255,255,255,.66);
}

/* ---------- Case client cards (trust) ---------- */
.case-client-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.case-client-card{
  background:var(--navy-800);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);padding:26px 22px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  transform-style:preserve-3d;
}
.case-client-card:hover{
  transform:translateY(-6px) perspective(600px) rotateX(var(--rotateX,0deg)) rotateY(var(--rotateY,0deg));
  box-shadow:var(--sh-lg);border-color:rgba(95,191,168,.25);
}
.case-client-logo{
  font-weight:800;font-size:1.2rem;color:var(--emerald-soft);
}
.case-client-stars{
  color:var(--amber);font-size:1.05rem;letter-spacing:2px;
}
.case-client-quote{
  color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.85;flex:1;
}
.case-client-quote::before{content:"”";font-size:1.8rem;color:var(--emerald-soft);opacity:.4;line-height:0}
.case-client-meta{
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.45);
  border-top:1px solid var(--line-dark);padding-top:12px;
}

/* ---------- Stories ---------- */
.case-stories{padding-block:clamp(48px,6vw,84px)}
.case-stories .section-head{max-width:760px}
.case-story{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);
  align-items:center;margin-top:clamp(44px,6vw,72px);
}
.case-story:nth-child(odd) .case-story-visual{order:2}
.case-story:nth-child(odd) .case-story-copy{order:1}
.case-story-visual .browser{transform:perspective(1400px) rotateY(-3deg) rotateX(1.5deg)}
.case-story-visual .browser:hover{transform:perspective(1400px) rotateY(-1deg) rotateX(1deg) translateY(-4px)}
.case-tag{
  display:inline-block;font-size:.78rem;font-weight:800;color:var(--emerald);
  background:rgba(46,125,107,.1);padding:5px 14px;border-radius:var(--r-pill);margin-bottom:14px;
}
.case-story-copy h3{
  font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:800;line-height:1.35;
}
.case-story-copy p{margin-top:14px;color:var(--muted);font-size:.98rem;line-height:1.85}
.case-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:24px;
}
.case-metric{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 12px;text-align:center;
}
.case-metric strong{display:block;font-size:1.4rem;font-weight:800;color:var(--emerald)}
.case-metric span{display:block;margin-top:4px;font-size:.76rem;color:var(--muted);font-weight:600}
.case-bars{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.case-bar-row{
  display:grid;grid-template-columns:110px 1fr;align-items:center;gap:14px;
}
.case-bar-row>span{font-size:.85rem;font-weight:700;color:var(--muted)}
.case-bar{
  height:10px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden;
}
.case-bar>span{
  display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--emerald),var(--emerald-soft));
  width:0;transition:width 1.2s cubic-bezier(.2,.7,.3,1);
}
.case-bar.is-in>span{width:var(--w,50%)}

/* ---------- Process timeline ---------- */
.case-process{background:var(--navy-800);color:#fff;padding-block:clamp(48px,6vw,84px)}
.case-process .section-head{max-width:640px}
.case-process .section-title em{color:var(--emerald-soft)}
.timeline{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;gap:18px;margin-top:44px;
}
.timeline-step{text-align:center}
.timeline-ic{
  display:grid;place-items:center;width:62px;height:62px;border-radius:50%;margin:0 auto 14px;
  background:rgba(46,125,107,.18);color:var(--emerald-soft);
}
.timeline-ic svg{width:28px;height:28px}
.timeline-step h3{font-size:1.05rem;font-weight:800}
.timeline-step p{margin-top:8px;font-size:.88rem;color:rgba(255,255,255,.62);line-height:1.7}
.timeline-line{
  width:2px;height:40px;background:linear-gradient(to bottom,var(--emerald-soft),transparent);
  margin-top:31px;opacity:.5;
}

/* ---------- Impact calculator ---------- */
.impact{padding-block:clamp(48px,6vw,84px)}
.impact-inner{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,60px);
  align-items:center;background:var(--paper-2);border-radius:var(--r-xl);
  padding:clamp(32px,5vw,56px);
}
.impact-calc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;box-shadow:var(--sh-md);
}
.impact-calc label{font-weight:800;font-size:1.05rem;display:block;margin-bottom:14px}
.impact-range-wrap{
  display:flex;align-items:center;gap:16px;margin-bottom:24px;
}
.impact-range-wrap input[type=range]{flex:1;accent-color:var(--emerald)}
.impact-val{
  min-width:58px;text-align:center;font-weight:800;font-size:1.1rem;
  color:var(--emerald);background:var(--paper-2);padding:6px 12px;border-radius:var(--r-pill);
}
.impact-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.impact-box{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;
}
.impact-box--gain{background:var(--navy-700);border-color:transparent;color:#fff}
.impact-lbl{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.impact-box--gain .impact-lbl{color:rgba(255,255,255,.65)}
.impact-num{display:block;font-size:1.25rem;font-weight:800;color:var(--ink);margin-bottom:4px}
.impact-box--gain .impact-num{color:var(--emerald-soft)}
.impact-note{display:block;font-size:.78rem;color:var(--muted-2)}
.impact-box--gain .impact-note{color:rgba(255,255,255,.55)}

/* ---------- Responsive tweaks for case studies ---------- */
@media (max-width:900px){
  .counter-grid{grid-template-columns:1fr}
  .case-client-grid{grid-template-columns:1fr}
  .case-story{grid-template-columns:1fr}
  .case-story:nth-child(odd) .case-story-visual{order:1}
  .case-story:nth-child(odd) .case-story-copy{order:2}
  .case-story-visual .browser{transform:none}
  .case-metrics{grid-template-columns:1fr}
  .case-bar-row{grid-template-columns:90px 1fr}
  .timeline{grid-template-columns:1fr;gap:8px}
  .timeline-line{width:60%;height:2px;margin:0 auto}
  .impact-inner{grid-template-columns:1fr}
  .impact-row{grid-template-columns:1fr}
}
@media (max-width:420px){
  .counter-card{padding:16px 12px}
  .impact-calc{padding:20px 18px}
}

/* =========================================================
   SUPPORT PAGE
   ========================================================= */
.support-hero{
  background:radial-gradient(120% 120% at 85% -10%,var(--navy-600) 0%,var(--navy-800) 45%,var(--navy-900) 100%);
  color:#fff;padding-block:clamp(48px,6vw,84px) clamp(28px,4vw,52px);
  position:relative;overflow:hidden;
}
.support-hero .eyebrow{color:var(--emerald-soft)}
.support-hero .eyebrow-dot{background:var(--emerald-soft);box-shadow:0 0 0 4px rgba(95,191,168,.18)}
.support-title{margin-top:14px;font-size:clamp(1.7rem,4vw,2.7rem);font-weight:800;line-height:1.3;letter-spacing:-.01em}
.support-lead{margin-top:14px;color:rgba(255,255,255,.74);max-width:620px;font-size:clamp(1rem,1.6vw,1.12rem)}

.support-tabs{display:inline-flex;gap:6px;margin-top:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);padding:5px}
.support-tab{padding:10px 20px;border-radius:var(--r-pill);font-weight:700;font-size:.95rem;color:rgba(255,255,255,.7);transition:background .2s,color .2s}
.support-tab.is-active{background:var(--emerald);color:#fff;box-shadow:var(--sh-emerald)}
@media (max-width:520px){.support-tabs{display:flex;width:100%}.support-tab{flex:1;padding:10px 8px;font-size:.86rem}}

.support-body{padding-block:clamp(32px,5vw,56px)}
.support-panel{display:none}
.support-panel.is-active{display:block;animation:supFade .25s ease}
@keyframes supFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.support-card{
  max-width:680px;margin-inline:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,38px);box-shadow:var(--sh-md);
}
.support-card-title{font-size:1.4rem;font-weight:800}
.support-card-sub{margin-top:8px;color:var(--muted);font-size:.98rem}

.support-form{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.9rem;font-weight:700;color:var(--ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.support-form input,.support-form textarea,.support-form select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);color:var(--ink);font-size:.98rem;transition:border-color .2s,box-shadow .2s;
}
.support-form input:focus,.support-form textarea:focus,.support-form select:focus{
  outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(46,125,107,.15)
}
.support-form textarea{resize:vertical;min-height:120px;line-height:1.7}
.support-form input.is-invalid{border-color:#d9534f}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-err{color:#d9534f;font-size:.88rem;min-height:1.1em}

/* ----- project status result ----- */
.status-result{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}
.status-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.status-result-label{font-size:.78rem;font-weight:700;color:var(--muted-2)}
.status-result-title{font-size:1.25rem;font-weight:800;margin-top:2px}
.status-badge{
  flex-shrink:0;padding:6px 14px;border-radius:var(--r-pill);font-size:.82rem;font-weight:700;
  background:rgba(46,125,107,.12);color:var(--emerald);white-space:nowrap;
}
.status-badge.st-delivered{background:rgba(46,125,107,.16);color:var(--emerald)}
.status-badge.st-paused{background:rgba(232,180,90,.16);color:#a9791f}
.status-badge.st-review{background:rgba(63,160,138,.14);color:var(--emerald-bright)}
.status-badge.st-intake{background:rgba(91,107,123,.14);color:var(--muted)}

.status-progress{display:flex;align-items:center;gap:12px;margin-top:18px}
.status-progress-bar{flex:1;height:10px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden}
.status-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--emerald),var(--emerald-bright));border-radius:var(--r-pill);transition:width .5s ease}
.status-progress-num{font-weight:800;color:var(--emerald);font-size:.95rem;min-width:42px;text-align:left}

.status-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:22px}
@media (max-width:520px){.status-meta{grid-template-columns:1fr}}
.status-meta dt{font-size:.78rem;color:var(--muted-2);font-weight:600}
.status-meta dd{font-size:.98rem;font-weight:700;color:var(--ink);margin-top:2px}

.status-note{margin-top:20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.status-note-label{font-size:.78rem;font-weight:700;color:var(--muted-2)}
.status-note p{margin-top:6px;color:var(--ink);line-height:1.7}

.status-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}

/* ----- ticket success ----- */
.ticket-success{margin-top:8px;text-align:center;padding:14px 6px}
.ticket-success .success-ring{
  display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;
  background:rgba(46,125,107,.12);color:var(--emerald);margin-bottom:14px;
}
.ticket-success .success-ring svg{width:30px;height:30px}
.ticket-success h3{font-size:1.25rem;font-weight:800}
.ticket-success p{color:var(--muted);margin-top:8px}
.ticket-code{
  display:inline-block;margin-top:12px;font-weight:800;font-size:1.3rem;letter-spacing:.05em;color:var(--emerald);
  background:var(--paper);border:1.5px dashed var(--emerald);border-radius:var(--r-md);padding:10px 22px;
}
.ticket-success-note{font-size:.9rem;margin-top:16px}
.ticket-success .btn{margin-top:20px}