/* ============================================================
   Kavera — brand stylesheet
   Tokens follow the Kavera brand book v1.
   ============================================================ */
/* ------------------------------------------------------------------
   Palette v2 — every text colour measured against every surface it is
   actually used on. The old --sub (#64748B) scored 3.16–3.96 on these
   backgrounds, below the 4.5 minimum, which is why small captions like
   the labels under the industry cards were hard to read.

   Measured contrast of the values below (WCAG 2.1, small text needs 4.5):

              navy   surf  surf2
     fg      17.78  16.03  13.72
     mut      9.60   8.66   7.41
     sub      6.39   5.76   4.93
     blue     6.96   6.27   5.37
     teal    10.36   9.34   8.00
     green   10.03   9.04   7.74

   Two blues on purpose: --blue is bright enough to read as text on a dark
   surface, --blue-btn is deep enough that white sits on it at 5.17.
   White on the old button blue was 3.68 — it failed.
   ------------------------------------------------------------------ */
:root{
  /* Palette "Slate & Teal". Named tokens stay (--blue etc.) so nothing breaks;
     what changes is the value behind them. Swap these nine lines and the whole
     site, including the logo, follows — the mark uses currentColor now. */
  --navy:#0A1016; --surf:#121B23; --surf2:#1B2730;
  --bord:#2C3D49; --bord2:#3E5767;
  --fg:#EEF5F7; --mut:#A3B6C0; --sub:#89A0AC;
  --blue:#2DD4BF;           /* the accent: teal, used for text, icons, the mark */
  --blue-l:#5EEAD4; --blue-d:#0F766E; --blue-btn:#0D7E74;
  --teal:#2DD4BF;
  --green:#4ADE80; --amber:#FBBF24; --red:#FB7185; --violet:#A5B4FC;
  --ink:#06100E;            /* text that sits on a bright accent fill */
  --r-card:18px; --r-btn:12px;
  --ease:cubic-bezier(.16,1,.3,1); --dur:220ms;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--fg);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.f-inter{font-family:'Inter',system-ui,-apple-system,sans-serif}
body.f-vazir{font-family:'Vazirmatn',Tahoma,sans-serif}
svg{display:block}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue-l);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:92px 0;scroll-margin-top:78px}
h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:800;line-height:1.14;letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem);font-weight:800;line-height:1.22;letter-spacing:-.018em;text-align:center}
h3{font-size:1.05rem;font-weight:700;line-height:1.4}
.lede{color:var(--mut);font-size:clamp(1rem,1.5vw,1.12rem);max-width:60ch}
.sec-sub{color:var(--mut);text-align:center;margin:14px auto 52px;max-width:62ch;font-size:1rem}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.73rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);background:rgba(45,212,191,.1);
  border:1px solid rgba(45,212,191,.3);padding:7px 16px;border-radius:999px;margin-bottom:22px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;
  border-radius:var(--r-btn);border:1px solid transparent;font:inherit;font-size:.9375rem;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 140ms var(--ease)}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* Primary button uses the deep blue so white text clears AA on it. */
.btn-p{background:var(--blue-btn);color:#fff}   .btn-p:hover:not(:disabled){background:#0F766E}
.btn-g{background:transparent;color:var(--fg);border-color:var(--bord2)}
.btn-g:hover{background:var(--surf2);border-color:var(--blue)}
/* Bright green with dark text reads better than white on green (1.92) */
.btn-a{background:var(--green);color:var(--ink)} .btn-a:hover{background:#86EFAC}
.btn-s{min-height:40px;padding:0 18px;font-size:.875rem}
.btn-b{width:100%}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:60;background:rgba(11,17,32,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bord)}
.nav-in{display:flex;align-items:center;gap:18px;max-width:var(--maxw);margin:0 auto;padding:11px 24px}
/* "KAVER" + "A" is a Latin run; inside an RTL page the bidi algorithm reorders
   it to "A KAVER". direction:ltr isolates the wordmark without touching the
   row around it, so the logo still sits at the start of the bar in RTL. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-weight:800;
  font-size:1.08rem;letter-spacing:.04em;font-family:'Inter',sans-serif;direction:ltr}
.brand svg{width:30px;height:30px;flex-shrink:0}
.nav-links{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
.nav-links a{color:var(--mut);text-decoration:none;font-size:.88rem;font-weight:500;padding:9px 11px;
  border-radius:9px;transition:all var(--dur) var(--ease);white-space:nowrap}
.nav-links a:hover{color:var(--fg);background:var(--surf2)}
.nav-right{display:flex;gap:9px;align-items:center}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:10px;
  background:var(--surf2);border:1px solid var(--bord);color:var(--fg);font:inherit;font-size:.82rem;
  font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease)}
.lang-btn:hover{border-color:var(--blue);color:var(--blue)}
.lang-btn svg{width:15px;height:15px}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--surf);
  border:1px solid var(--bord);border-radius:12px;padding:6px;min-width:150px;display:none;
  box-shadow:0 18px 48px rgba(0,0,0,.5);z-index:70}
.lang-menu.open{display:block}
.lang-menu a{display:block;padding:10px 14px;border-radius:8px;text-decoration:none;color:var(--mut);font-size:.875rem}
.lang-menu a:hover,.lang-menu a.on{background:var(--surf2);color:var(--fg)}
.burger{display:none}

/* ============================================================
   HERO + MOTION GRAPHIC
   ============================================================ */
.hero{position:relative;padding:72px 0 86px;overflow:hidden;
  background:radial-gradient(1000px 440px at 50% -6%,rgba(45,212,191,.17),transparent 66%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue-l),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin-top:20px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* --- the motion scene --- */
.scene{position:relative;width:100%;aspect-ratio:1;max-width:400px;margin-inline:auto}
.scene svg{width:100%;height:100%;overflow:visible}

/* 1. enclosure segments draw themselves */
.seg{stroke:var(--blue);stroke-width:4.5;fill:none;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:draw 1s var(--ease) forwards, breathe 5s ease-in-out 4.6s infinite}
.seg:nth-of-type(1){animation-delay:.15s,4.6s}
.seg:nth-of-type(2){animation-delay:.3s,4.75s}
.seg:nth-of-type(3){animation-delay:.45s,4.9s}
.seg:nth-of-type(4){animation-delay:.6s,5.05s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.62}}

/* 2. core appears and pulses */
.core{transform-origin:center;transform-box:fill-box;opacity:0;
  animation:corein .8s var(--ease) 1.1s forwards, corepulse 3.6s ease-in-out 2s infinite}
@keyframes corein{from{opacity:0;transform:scale(.3) rotate(45deg)}to{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes corepulse{0%,100%{filter:drop-shadow(0 0 10px rgba(45,212,191,.55))}
  50%{filter:drop-shadow(0 0 26px rgba(45,212,191,.95))}}
.halo{transform-origin:center;transform-box:fill-box;opacity:0;
  animation:halo 3.6s ease-in-out 2.2s infinite}
@keyframes halo{0%{opacity:.28;transform:scale(.85)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0}}

/* 3. data packets fly in from outside and are contained */
.pkt{opacity:0;animation:fly 4.2s var(--ease) infinite}
@keyframes fly{
  0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.5)}
  12%{opacity:1}
  46%{opacity:1;transform:translate(0,0) scale(1)}
  54%{transform:translate(calc(var(--fx)*.12),calc(var(--fy)*.12)) scale(.9)}
  100%{opacity:.9;transform:translate(0,0) scale(.85)}}
/* 4. one packet tries to leave and is stopped at the fence */
.esc{opacity:0;animation:escape 4.2s var(--ease) infinite}
@keyframes escape{
  0%,55%{opacity:0;transform:translate(0,0) scale(.6)}
  60%{opacity:1;transform:translate(0,0) scale(1)}
  74%{opacity:1;transform:translate(0,-62px) scale(1)}
  80%{opacity:1;transform:translate(0,-56px) scale(1.25)}
  92%{opacity:0;transform:translate(0,-18px) scale(.7)}
  100%{opacity:0}}
.block{opacity:0;animation:blocked 4.2s linear infinite}
@keyframes blocked{0%,76%{opacity:0}79%{opacity:1}88%{opacity:0}100%{opacity:0}}
.scene-cap{text-align:center;color:var(--sub);font-size:.8rem;margin-top:16px}

/* trust row */
.trust{display:flex;gap:11px;flex-wrap:wrap;margin-top:38px}
.trust span{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--mut);
  background:var(--surf);border:1px solid var(--bord);border-radius:999px;padding:8px 15px}
.trust svg{width:15px;height:15px;color:var(--blue);flex-shrink:0}

/* ---- stats ---- */
.stats{border-block:1px solid var(--bord);background:var(--surf)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:32px 24px;
  max-width:var(--maxw);margin:0 auto;text-align:center}
.stat b{display:block;font-size:1.75rem;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.stat span{font-size:.8rem;color:var(--mut)}

/* ---- generic cards ---- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);padding:28px;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{border-color:var(--bord2);transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(45,212,191,.12);color:var(--blue);margin-bottom:16px;transition:transform var(--dur) var(--ease)}
.card:hover .ico{transform:scale(1.07) rotate(-4deg)}
.ico svg{width:21px;height:21px}
.card p{color:var(--mut);font-size:.9rem;margin-top:9px}
.stepn{font-size:.72rem;font-weight:800;color:var(--sub);letter-spacing:.1em;margin-bottom:8px}

/* ---- products ---- */
.prods{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prod{background:var(--surf);border:1px solid var(--bord);border-radius:22px;padding:34px;position:relative;
  overflow:hidden;transition:transform .3s var(--ease)}
.prod:hover{transform:translateY(-4px)}
.prod.a{border-color:var(--green)} .prod.b{border-color:var(--blue)}
.prod .bar{height:5px;position:absolute;top:0;inset-inline:0}
.prod.a .bar{background:var(--green)} .prod.b .bar{background:var(--blue)}
/* Third attempt, and why:
   v1 was a 3rem numeral at 14% opacity — invisible, and on an RTL page it read
   as a rendering fault. v2 was a tiny pill — legible but trivial, and Persian
   digits were too small to parse. This is a proper badge: big enough to read at
   a glance, weighty enough to look deliberate. It no longer forces Inter either,
   which has no Persian or Arabic digits and was part of why v2 looked wrong. */
.prod .num{display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;height:52px;padding:0 14px;margin-bottom:18px;
  font-size:1.35rem;font-weight:800;line-height:1;letter-spacing:.02em;
  direction:ltr;border-radius:16px;border:1.5px solid}
@media(max-width:420px){
  .prod .num{min-width:44px;height:44px;font-size:1.15rem;margin-bottom:14px}
}
.prod.a .num{color:var(--green);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.prod.b .num{color:var(--blue);border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.1)}
.prod h3{font-size:1.3rem;margin-top:4px}
.prod p{color:var(--mut);font-size:.92rem;margin-top:12px}
.prod .ana{margin-top:18px;background:var(--surf2);border-inline-start:3px solid var(--bord2);
  border-radius:10px;padding:13px 16px;font-size:.87rem;color:var(--fg)}
.prod.a .ana{border-inline-start-color:var(--green)} .prod.b .ana{border-inline-start-color:var(--blue)}

/* ---- pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tier{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);padding:32px 28px;
  position:relative;transition:transform var(--dur) var(--ease)}
.tier:hover{transform:translateY(-3px)}
.tier.pop{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 18px 48px rgba(0,0,0,.5)}
.tier.pop::before{content:attr(data-badge);position:absolute;top:-11px;inset-inline-start:28px;
  background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;border-radius:8px;padding:4px 12px}
.tier .nm{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sub)}
.price{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.price b{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;font-family:'Inter',sans-serif}
.price small{color:var(--mut);font-size:.875rem}
.setup{color:var(--mut);font-size:.8125rem;padding-bottom:20px;border-bottom:1px solid var(--bord);margin-bottom:20px}
.feats{list-style:none;display:grid;gap:11px;font-size:.9rem;color:var(--mut);margin-bottom:24px}
.feats li{display:flex;gap:10px;align-items:flex-start}
.feats svg{width:17px;height:17px;color:var(--green);flex-shrink:0;margin-top:4px}
.anchor{background:linear-gradient(135deg,#16243d,var(--surf));border:1px solid var(--bord2);
  border-radius:var(--r-card);padding:32px;text-align:center;margin-top:24px}
.anchor b{font-size:1.15rem;color:var(--green)}
.anchor p{color:var(--mut);margin-top:9px;font-size:.92rem;max-width:58ch;margin-inline:auto}
.note{text-align:center;color:var(--sub);font-size:.8rem;margin-top:24px;max-width:70ch;margin-inline:auto;line-height:1.8}

/* ---- who ---- */
/* Six cards, so the column count has to divide into six — otherwise one is
   left alone on its own row. auto-fill fitted exactly five at this container
   width and orphaned the sixth. Fixed counts: 3+3, 2+2+2, or one per row.
   Bigger cards also give the longer Persian and Turkish labels room. */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* breakpoints match the ones the rest of this stylesheet already uses */
@media(max-width:880px){.who{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.who{grid-template-columns:1fr}}
/* .w is an <a> now — each card opens that profession's page */
.w{display:block;text-decoration:none;color:inherit;
  background:var(--surf2);border:1px solid var(--bord);border-radius:14px;padding:22px 18px;text-align:center;
  transition:all var(--dur) var(--ease)}
.w:hover{border-color:var(--blue);transform:translateY(-3px)}
.w svg{width:26px;height:26px;color:var(--blue);margin:0 auto 11px}
.w b{font-size:.92rem;display:block} .w span{font-size:.78rem;color:var(--sub)}

/* ---- faq ---- */
.faq{max-width:760px;margin:0 auto}
details{background:var(--surf);border:1px solid var(--bord);border-radius:14px;margin-bottom:10px}
details[open]{border-color:var(--bord2)}
summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:.95rem;list-style:none;
  display:flex;align-items:center;gap:14px;min-height:56px}
summary::-webkit-details-marker{display:none}
summary .chev{margin-inline-start:auto;color:var(--sub);transition:transform var(--dur) var(--ease);flex-shrink:0}
summary .chev svg{width:17px;height:17px}
details[open] summary .chev{transform:rotate(180deg)}
details p{padding:0 22px 20px;color:var(--mut);font-size:.9rem}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:7px;color:var(--mut)}
.field input,.field textarea{width:100%;background:var(--surf2);border:1px solid var(--bord);
  border-radius:var(--r-btn);color:var(--fg);padding:13px 16px;font:inherit;font-size:.9375rem;min-height:48px;
  transition:border-color var(--dur) var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--bord2)}
.field input:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(45,212,191,.18)}
.form-status{font-size:.875rem;margin-top:14px;min-height:22px}
.form-status.ok{color:var(--green)} .form-status.err{color:var(--red)}
.info-card{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);padding:28px}
.info-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--bord);align-items:flex-start}
.info-row:last-child{border-bottom:none}
.info-row svg{width:19px;height:19px;color:var(--blue);flex-shrink:0;margin-top:3px}
.info-row b{display:block;font-size:.76rem;color:var(--sub);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.info-row a,.info-row span{color:var(--fg);font-size:.93rem;text-decoration:none;word-break:break-word}
.info-row a:hover{color:var(--blue)}

/* ---- footer ---- */
footer{border-top:1px solid var(--bord);padding:38px 0;color:var(--sub);font-size:.82rem}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-legal b{display:block;color:var(--mut);font-size:.8rem;font-weight:600}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{text-decoration:none;color:inherit} .foot-links a:hover{color:var(--fg)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   CHATBOT
   ============================================================ */
.bot-fab{position:fixed;inset-inline-end:22px;bottom:22px;z-index:80;display:inline-flex;align-items:center;gap:10px;
  min-height:54px;padding:0 22px;border-radius:999px;border:none;cursor:pointer;
  background:var(--blue);color:#fff;font:inherit;font-size:.9rem;font-weight:600;
  box-shadow:0 12px 34px rgba(45,212,191,.42);transition:transform var(--dur) var(--ease),background var(--dur)}
.bot-fab:hover{background:var(--blue-l);transform:translateY(-2px)}
.bot-fab svg{width:20px;height:20px}
.bot-fab.hide{display:none}
.bot{position:fixed;inset-inline-end:22px;bottom:22px;z-index:81;width:min(390px,calc(100vw - 32px));
  height:min(580px,calc(100vh - 44px));background:var(--surf);border:1px solid var(--bord2);
  border-radius:20px;display:none;flex-direction:column;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.6)}
.bot.open{display:flex}
.bot-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--bord);
  background:linear-gradient(180deg,#16243d,var(--surf))}
.bot-head svg.mk{width:30px;height:30px;flex-shrink:0}
.bot-head b{font-size:.95rem;display:block}
.bot-head span{font-size:.75rem;color:var(--sub)}
.bot-x{margin-inline-start:auto;background:none;border:none;color:var(--mut);cursor:pointer;
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center}
.bot-x:hover{background:var(--surf2);color:var(--fg)}
.bot-x svg{width:17px;height:17px}
.bot-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:86%;padding:11px 15px;border-radius:15px;font-size:.89rem;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.msg.u{background:var(--blue);color:#fff;margin-inline-start:auto;border-end-end-radius:5px}
.msg.a{background:var(--surf2);border:1px solid var(--bord);border-end-start-radius:5px}
.msg.sys{align-self:center;background:none;color:var(--sub);font-size:.76rem;text-align:center;max-width:100%}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:dot 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.bot-lead{padding:0 18px 12px;display:none}
.bot-lead.show{display:block}
/* Declining has to be as easy as accepting, or the form is a trap */
.bot-lead-no{display:block;width:100%;margin-top:8px;background:none;border:0;
  color:var(--sub);font:inherit;font-size:.8rem;cursor:pointer;padding:6px;
  text-decoration:underline;text-underline-offset:3px}
.bot-lead-no:hover{color:var(--mut)}
.bot-lead input{width:100%;background:var(--surf2);border:1px solid var(--bord);border-radius:10px;
  color:var(--fg);padding:11px 14px;font:inherit;font-size:.86rem;margin-bottom:8px;min-height:44px}
.bot-form{display:flex;gap:9px;padding:14px 16px;border-top:1px solid var(--bord)}
.bot-form input{flex:1;background:var(--surf2);border:1px solid var(--bord);border-radius:11px;color:var(--fg);
  padding:12px 15px;font:inherit;font-size:.89rem;min-height:46px}
.bot-form input:focus{border-color:var(--blue);outline:none}
.bot-form button{min-width:46px;min-height:46px;border-radius:11px;border:none;background:var(--blue);
  color:#fff;cursor:pointer;display:grid;place-items:center}
.bot-form button:hover{background:var(--blue-l)}
.bot-form button:disabled{opacity:.4;cursor:not-allowed}
.bot-form button svg{width:18px;height:18px}
[dir="rtl"] .bot-form button svg{transform:scaleX(-1)}
.bot-note{padding:0 18px 12px;color:var(--sub);font-size:.7rem;text-align:center}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1020px){
  .nav-links{display:none}
  .burger{display:inline-grid;place-items:center;width:44px;height:40px;border-radius:10px;
    background:var(--surf2);border:1px solid var(--bord);color:var(--fg);cursor:pointer}
  .burger svg{width:19px;height:19px}
  nav.open .nav-links{display:flex;position:absolute;top:100%;inset-inline:0;background:var(--navy);
    border-bottom:1px solid var(--bord);flex-direction:column;align-items:stretch;padding:10px 16px 18px;gap:2px}
  nav.open .nav-links a{padding:13px 12px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .scene{max-width:320px;order:-1}
}
@media(max-width:880px){
  .g3,.prods,.tiers,.contact-grid{grid-template-columns:1fr}
  .stats-in{grid-template-columns:repeat(2,1fr)}
  section{padding:64px 0}
}
@media(max-width:420px){
  .wrap{padding:0 18px}
  .btn{width:100%} .hero-cta{flex-direction:column}
  .prod,.tier,.anchor,.info-card{padding:24px 20px}
  .bot{inset-inline:12px;bottom:12px;width:auto;height:calc(100vh - 24px)}
  .bot-fab{inset-inline-end:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .seg{stroke-dashoffset:0} .core{opacity:1} .pkt,.esc,.halo,.block{opacity:0}
}
@media print{
  body{background:#fff;color:#000}
  nav,.bot,.bot-fab,.hero-cta,.btn{display:none}
}

/* The mark is drawn with currentColor so one token recolours every logo.
   Its wrapper sets colour for the wordmark, so the svg gets its own. */
.brand svg{color:var(--blue)}
/* The wordmark is one flex item, not two. As "KAVER" + <span>A</span> the
   flex gap of the .brand container fell between the R and the A and the logo
   read "KAVER A". Same bug was in the PDF cover. */
.brand .wm{white-space:nowrap}
.brand .wm b{color:var(--blue);font-weight:inherit}

/* ==================================================================
   Product diagrams + section motion
   Every animation here explains something. Anything purely decorative
   was left out on purpose: on a page selling "we are not hiding
   anything", restless movement reads as noise.
   ================================================================== */
.dgm{width:100%;height:auto;margin:4px 0 18px;overflow:visible;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.d-wall{stroke:var(--bord2);stroke-width:2;fill:rgba(45,212,191,.04)}
.d-core{fill:var(--blue);opacity:.9}
.d-pulse{stroke:var(--blue);stroke-width:1.5;opacity:.25;fill:none}
.d-doc rect,.d-esc rect,.d-req rect{fill:var(--surf2);stroke:var(--blue);stroke-width:1.8}
.d-esc rect{stroke:var(--red)}
.d-block{stroke:var(--red);stroke-width:3;opacity:0}
.d-gate{stroke:var(--blue);stroke-width:2;fill:rgba(45,212,191,.07)}
.d-gate-slot{stroke:var(--blue);stroke-width:2;opacity:.55}
.d-cloud{stroke:var(--bord2);stroke-width:2;stroke-dasharray:5 5;fill:none}
.d-rail{stroke:var(--bord);stroke-width:2}
.d-bit,.d-strip circle{fill:var(--red)}
.d-strip{opacity:0}

/* --- diagram A: documents arrive and stay inside --- */
@keyframes dIn{
  0%{transform:translate(28px,70px);opacity:0}
  18%{opacity:1}
  55%{transform:translate(132px,70px);opacity:1}
  70%{transform:translate(132px,70px);opacity:0}
  100%{transform:translate(132px,70px);opacity:0}}
.d-doc{animation:dIn 4.6s var(--ease) infinite}
.d-doc1{animation-delay:0s} .d-doc2{animation-delay:1.5s} .d-doc3{animation-delay:3s}
@keyframes dEsc{
  0%,55%{transform:translate(190px,74px);opacity:0}
  62%{opacity:1}
  80%{transform:translate(221px,74px);opacity:1}
  88%{transform:translate(206px,74px);opacity:1}
  100%{transform:translate(206px,74px);opacity:0}}
.d-esc{animation:dEsc 4.6s var(--ease) infinite}
@keyframes dBlock{0%,76%{opacity:0}82%{opacity:1}100%{opacity:0}}
.d-block{animation:dBlock 4.6s linear infinite}
@keyframes dPulse{0%,100%{r:30;opacity:.22}50%{r:34;opacity:.06}}
.d-pulse{animation:dPulse 3.4s ease-in-out infinite}

/* --- diagram B: the gate strips the sensitive parts --- */
@keyframes dReq{
  0%{transform:translate(52px,70px);opacity:0}
  12%{opacity:1}
  40%{transform:translate(160px,70px)}
  60%{transform:translate(160px,70px)}
  92%{transform:translate(272px,70px);opacity:1}
  100%{transform:translate(272px,70px);opacity:0}}
.d-req{animation:dReq 4.4s var(--ease) infinite}
/* the red bits vanish exactly while the request sits in the gate */
@keyframes dBitOut{0%,45%{opacity:1}58%,100%{opacity:0}}
.d-bit{animation:dBitOut 4.4s linear infinite}
@keyframes dStrip{
  0%,46%{transform:translate(160px,70px);opacity:0}
  54%{opacity:1}
  74%{transform:translate(160px,122px);opacity:0}
  100%{opacity:0}}
.d-strip{animation:dStrip 4.4s var(--ease) infinite}

/* --- the connector between the three steps ---
   Scoped to .g3.flow. .g3 on its own is also the nine-card features grid, and
   a five-column rule applied to nine cards stacked them on top of each other. */
.g3-link{display:none}
@media(min-width:881px){
  .g3.flow{grid-template-columns:1fr 26px 1fr 26px 1fr}
  .g3-link{display:flex;align-items:center;justify-content:center}
  .g3-link span{display:block;width:100%;height:2px;background:var(--bord);position:relative;overflow:hidden}
  .g3-link span::after{content:"";position:absolute;inset:0;background:var(--blue);
    transform:scaleX(0);transform-origin:var(--o,left);transition:transform .7s .25s var(--ease)}
  [dir="rtl"] .g3-link span::after{--o:right}
  .g3-link.in span::after{transform:scaleX(1)}
}

/* --- icons draw themselves in when the card first appears ---
   Gated on html.kv-draw, which the script adds only once it has measured every
   path. Without that class the icons are simply drawn — so if the JS is blocked,
   slow or errors, the icons are still there. Hiding artwork in CSS and relying
   on JS to bring it back is how they disappeared entirely the first time. */
html.kv-draw .card .ico svg > *,
html.kv-draw .w svg > *{
  stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset .85s var(--ease)}
html.kv-draw .card.in .ico svg > *,
html.kv-draw .w.in svg > *{stroke-dashoffset:0}

/* --- stat numbers count up (JS sets --n, CSS only reveals) --- */
.stat b{display:inline-block}

@media (prefers-reduced-motion: reduce){
  .dgm *{animation:none !important}
  .d-doc1{transform:translate(132px,70px);opacity:1}
  .d-doc2,.d-doc3,.d-esc,.d-strip,.d-block{opacity:0}
  .d-req{transform:translate(160px,70px);opacity:1}
  .g3-link span::after{transform:scaleX(1);transition:none}
  .card .ico svg *,.w svg *{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}

/* ---- starter suggestions in the chat ---- */
.bot-chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 2px}
.bot-chip{background:var(--surf2);border:1px solid var(--bord);color:var(--mut);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:.8rem;line-height:1.4;
  cursor:pointer;text-align:start;transition:all var(--dur) var(--ease)}
.bot-chip:hover{border-color:var(--blue);color:var(--fg);background:rgba(45,212,191,.08)}
.bot-chip:active{transform:scale(.97)}

/* ==================================================================
   Evidence — the three artifacts a customer shows an auditor
   ================================================================== */
.ev{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);overflow:hidden}
.ev-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--bord);background:var(--navy)}
.ev-tab{background:transparent;border:1px solid transparent;border-radius:10px;
  color:var(--mut);font:inherit;font-size:.86rem;font-weight:600;
  padding:9px 15px;cursor:pointer;transition:all var(--dur) var(--ease)}
.ev-tab:hover{color:var(--fg);background:var(--surf2)}
.ev-tab.on{color:var(--blue);background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.35)}
.ev-badge{margin-inline-start:auto;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--amber);background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);
  border-radius:999px;padding:5px 12px}
.ev-panel{padding:26px}
.ev-panel h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.ev-p{color:var(--mut);font-size:.93rem;line-height:1.85;margin-bottom:18px;max-width:68ch}
.ev-code{background:var(--navy);border:1px solid var(--bord);border-radius:12px;
  padding:18px 20px;overflow-x:auto;margin-bottom:18px}
.ev-code code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;line-height:1.85;color:var(--mut);white-space:pre;display:block}
.ev-notes{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.ev-notes li{color:var(--mut);font-size:.88rem;line-height:1.75;
  padding-inline-start:18px;position:relative}
.ev-notes li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--blue)}
.ev-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-bottom:18px}
.ev-table th{text-align:start;padding:10px 12px;font-size:.78rem;font-weight:700;
  color:var(--sub);border-bottom:1px solid var(--bord2)}
.ev-table td{padding:11px 12px;border-bottom:1px solid var(--bord);color:var(--mut)}
.ev-table td.k{color:var(--fg);font-weight:600}
.ev-pill{display:inline-block;font-size:.76rem;font-weight:700;border-radius:7px;padding:3px 10px;white-space:nowrap}
.ev-pill.full{color:var(--green);background:rgba(74,222,128,.12)}
.ev-pill.part{color:var(--amber);background:rgba(251,191,36,.12)}
.ev-warn{color:var(--fg);font-size:.9rem;line-height:1.85;margin:0;
  background:rgba(251,191,36,.07);border-inline-start:3px solid var(--amber);
  border-radius:0 10px 10px 0;padding:14px 18px}
[dir="rtl"] .ev-warn{border-radius:10px 0 0 10px}
@media(max-width:560px){
  .ev-panel{padding:18px 16px}
  .ev-code code{font-size:.72rem}
  .ev-badge{margin-inline-start:0;order:3}
}

/* ---- skip link (every page now has one) ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue-btn);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ---- nav: current page marker ---- */
.nav-links a.on{color:var(--blue);background:rgba(45,212,191,.12)}

/* ---- home-page pricing teaser ---- */
.teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.teaser-card{display:block;text-decoration:none;background:var(--surf);border:1px solid var(--bord);
  border-radius:16px;padding:24px 20px;text-align:center;transition:all var(--dur) var(--ease)}
.teaser-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.teaser-card.pop{border-color:var(--blue);background:rgba(45,212,191,.06)}
.teaser-card .nm{display:block;color:var(--mut);font-size:.84rem;font-weight:700;
  letter-spacing:.08em;margin-bottom:10px}
.teaser-card b{display:block;color:var(--fg);font-size:2rem;font-weight:800;letter-spacing:-.03em;direction:ltr}
.teaser-card small{display:block;color:var(--mut);font-size:.82rem;margin-top:2px}
.teaser-card .infra{display:block;color:var(--sub);font-size:.76rem;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--bord)}
.teaser-cta{background:var(--surf);border:1px solid var(--bord);border-radius:16px;padding:26px;text-align:center}
.teaser-cta p{color:var(--mut);font-size:1rem;line-height:1.8;margin-bottom:18px;max-width:62ch;
  margin-inline:auto}
.teaser-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:880px){.teaser{grid-template-columns:1fr}}

/* ---- pricing page: the infrastructure line under each tier ---- */
.tier .setup.infra{color:var(--blue);font-weight:600}

/* ---- contact page ---- */
.c-privacy{color:var(--sub);font-size:.82rem;line-height:1.7;margin-top:14px}
.c-privacy a{color:var(--blue)}

/* ==================================================================
   "Where your data goes" — the three-route comparison
   ================================================================== */
/* .routes, not .flow: .g3.flow already means the three-step row, and an
   unscoped .flow rule was giving that row a card background it should not have.
   Two different ideas had grabbed the same class name. */
.routes{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);
  padding:24px;overflow:hidden}
.fl-dgm{width:100%;height:auto;display:block;fill:none;stroke-linecap:round;
  stroke-linejoin:round;direction:ltr;overflow:visible}
.fl-bound{stroke:var(--bord2);stroke-width:2;stroke-dasharray:7 6}
.fl-bound-t{fill:var(--sub);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-anchor:middle;font-family:'Inter',sans-serif}
.fl-box{fill:var(--surf2);stroke:var(--bord);stroke-width:1.6}
.fl-core{stroke:var(--blue);stroke-width:2;fill:rgba(45,212,191,.1)}
.fl-dest{fill:none;stroke:var(--bord2);stroke-width:1.6;stroke-dasharray:6 5}
.fl-dest.fl-bad{stroke:var(--red)}
.fl-gate{fill:rgba(45,212,191,.12);stroke:var(--blue);stroke-width:2}
.fl-slot{stroke:var(--blue);stroke-width:2;opacity:.55}
.fl-rail{stroke:var(--bord);stroke-width:2}
.fl-dead{stroke:var(--bord);stroke-dasharray:4 5;opacity:.5}
.fl-x{fill:var(--red);font-size:22px;font-weight:800;text-anchor:middle;
  font-family:'Inter',sans-serif}
.fl-t{fill:var(--fg);font-size:12.5px;font-weight:600;text-anchor:middle;
  font-family:'Inter',sans-serif}
.fl-pkt rect{fill:var(--surf2);stroke:var(--blue);stroke-width:1.8}
.fl-pkt .fl-bit{fill:var(--red);stroke:none}
.fl-strip circle{fill:var(--red);stroke:none}
.fl-strip{opacity:0}

/* route 1 — straight out, red all the way */
@keyframes flGo1{
  0%{transform:translate(190px,66px);opacity:0}
  12%{opacity:1}
  80%{transform:translate(452px,66px);opacity:1}
  100%{transform:translate(462px,66px);opacity:0}}
.fl-go1{animation:flGo1 5s var(--ease) infinite}
.fl-go1 rect{stroke:var(--red)}

/* route 2 — pauses at the gate, loses the red, continues */
@keyframes flGo2{
  0%{transform:translate(190px,176px);opacity:0}
  12%{opacity:1}
  34%{transform:translate(290px,176px)}
  52%{transform:translate(290px,176px)}
  86%{transform:translate(452px,176px);opacity:1}
  100%{transform:translate(462px,176px);opacity:0}}
.fl-go2{animation:flGo2 5s var(--ease) infinite}
@keyframes flBit2{0%,36%{opacity:1}50%,100%{opacity:0}}
.fl-bit2{animation:flBit2 5s linear infinite}
@keyframes flStrip2{
  0%,38%{transform:translate(290px,176px);opacity:0}
  46%{opacity:1}
  70%{transform:translate(290px,232px);opacity:0}
  100%{opacity:0}}
.fl-strip2{animation:flStrip2 5s var(--ease) infinite}

/* route 3 — in to the model and back; the boundary is never reached */
/* in to the model's edge and back out; it never reaches the boundary at 392 */
@keyframes flIn3{
  0%{transform:translate(184px,286px);opacity:0}
  12%{opacity:1}
  38%{transform:translate(198px,286px)}
  58%{transform:translate(198px,286px)}
  86%{transform:translate(184px,286px);opacity:1}
  100%{transform:translate(184px,286px);opacity:0}}
.fl-in3{animation:flIn3 5s var(--ease) infinite}

.fl-rows{display:grid;gap:12px;margin-top:22px}
.fl-row{display:flex;gap:16px;align-items:flex-start;background:var(--navy);
  border:1px solid var(--bord);border-radius:14px;padding:18px 20px}
.fl-row.bad{border-inline-start:3px solid var(--red)}
.fl-row.good{border-inline-start:3px solid var(--blue)}
.fl-row .n{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;
  place-items:center;font-size:.82rem;font-weight:800;direction:ltr}
.fl-row.bad .n{background:rgba(251,113,133,.15);color:var(--red)}
.fl-row.good .n{background:rgba(45,212,191,.15);color:var(--blue)}
.fl-row b{display:block;font-size:.98rem;margin-bottom:4px}
.fl-row p{margin:0;color:var(--mut);font-size:.9rem;line-height:1.8}
.fl-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;
  color:var(--sub);font-size:.8rem}
.fl-legend span{display:inline-flex;align-items:center;gap:7px}
.fl-legend i{width:9px;height:9px;border-radius:50%;display:block}
.fl-legend .bad i{background:var(--red)} .fl-legend .good i{background:var(--blue)}

@media(max-width:620px){
  .routes{padding:14px}
  .fl-t{font-size:15px} .fl-bound-t{font-size:12px}
  .fl-row{padding:15px 16px}
}
@media (prefers-reduced-motion: reduce){
  .fl-pkt,.fl-strip,.fl-bit{animation:none !important}
  .fl-go1{transform:translate(380px,66px);opacity:1}
  .fl-go2{transform:translate(430px,176px);opacity:1}
  .fl-go2 .fl-bit{opacity:0}
  .fl-in3{transform:translate(198px,286px);opacity:1}
  .fl-strip{opacity:0}
}