/* ============================================================
   Zen AI Design System — zen.css
   Tokenized foundation for Zen AI's own marketing/secondary pages.
   Backward-compatible: every prior class name is preserved & upgraded.
   Brand tokens are the single source of truth — override --zn-* to retheme.
   ============================================================ */

:root{
  /* surfaces */
  --zn-bg:#070A12; --zn-surface:#0F1422; --zn-surface-2:#141B2B;
  --zn-line:#222A3D; --zn-line-2:#2E3850;
  /* text */
  --zn-ink:#EAF0FF; --zn-mute:#8B93A7; --zn-faint:#5C6478;
  /* accent + states */
  --zn-accent:#4F8CFF; --zn-accent-2:#22D3EE; --zn-accent-ink:#04111f;
  --zn-accent-soft:rgba(79,140,255,.12);
  --zn-success:#34D399; --zn-warn:#FBBF24; --zn-danger:#F87171;
  /* gradients */
  --zn-grad:linear-gradient(110deg,#4F8CFF,#22D3EE);
  --zn-grad-text:linear-gradient(110deg,#7DA8FF,#22D3EE);
  /* typography */
  --zn-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --zn-font-display:'Sora',var(--zn-font-body);
  --zn-fs-xs:12px; --zn-fs-sm:14px; --zn-fs-md:15px; --zn-fs-lg:18px;
  --zn-fs-h3:clamp(20px,2.2vw,24px);
  --zn-fs-h2:clamp(26px,3.4vw,36px);
  --zn-fs-h1:clamp(34px,5vw,56px);
  --zn-lh:1.6; --zn-lh-tight:1.14;
  /* spacing (4pt scale) */
  --zn-1:4px; --zn-2:8px; --zn-3:12px; --zn-4:16px; --zn-5:24px; --zn-6:32px; --zn-7:48px; --zn-8:64px;
  /* radius */
  --zn-r-sm:8px; --zn-r-md:10px; --zn-r-lg:16px; --zn-r-xl:20px; --zn-r-full:999px;
  /* elevation */
  --zn-sh-1:0 1px 2px rgba(0,0,0,.30);
  --zn-sh-2:0 6px 20px rgba(0,0,0,.35);
  --zn-sh-glow:0 0 0 1px rgba(79,140,255,.25),0 12px 40px rgba(79,140,255,.14);
  /* motion + layout */
  --zn-t-fast:.15s ease; --zn-t:.25s ease;
  --zn-container:1080px; --zn-focus:0 0 0 3px rgba(79,140,255,.45);
}

/* ---- Base ---- */
html{background:var(--zn-bg);scroll-behavior:smooth}
body{background:transparent;font-family:var(--zn-font-body);color:var(--zn-ink);margin:0;line-height:var(--zn-lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#mtx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
::selection{background:var(--zn-accent);color:var(--zn-accent-ink)}
:focus-visible{outline:none;box-shadow:var(--zn-focus);border-radius:var(--zn-r-sm)}

/* ---- Typography ---- */
.font-display{font-family:var(--zn-font-display);letter-spacing:-.01em;line-height:var(--zn-lh-tight)}
.h1{font-family:var(--zn-font-display);font-size:var(--zn-fs-h1);line-height:var(--zn-lh-tight);letter-spacing:-.02em;margin:0}
.h2{font-family:var(--zn-font-display);font-size:var(--zn-fs-h2);line-height:1.2;letter-spacing:-.01em;margin:0}
.h3{font-family:var(--zn-font-display);font-size:var(--zn-fs-h3);line-height:1.25;margin:0}
.eyebrow{font-size:var(--zn-fs-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--zn-accent);font-weight:600}
.lead{font-size:var(--zn-fs-lg);color:var(--zn-ink)}
.text-mute{color:var(--zn-mute)} .text-accent{color:var(--zn-accent)} .text-ink{color:var(--zn-ink)}
.grad{background:var(--zn-grad)}
.grad-text{background:var(--zn-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Layout ---- */
.zcontainer{max-width:var(--zn-container);margin:0 auto;padding:0 20px}
.zsection{padding:var(--zn-8) 0}

/* ---- Glow ---- */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;width:760px;height:760px;left:-15%;top:-45%;background:radial-gradient(circle,var(--zn-accent-soft),transparent 62%);pointer-events:none;z-index:0}

/* ---- Card ---- */
.card{background:linear-gradient(160deg,rgba(16,22,38,0),var(--zn-surface));border:1px solid var(--zn-line);border-radius:var(--zn-r-lg);box-shadow:var(--zn-sh-1);transition:border-color var(--zn-t),box-shadow var(--zn-t)}
.card:hover{border-color:var(--zn-line-2)}
.card-pad{padding:var(--zn-5)}

/* ---- Fields ---- */
.field{width:100%;background:var(--zn-bg);border:1px solid var(--zn-line);border-radius:var(--zn-r-md);padding:.7rem .9rem;color:var(--zn-ink);font-size:var(--zn-fs-md);font-family:inherit;transition:border-color var(--zn-t),box-shadow var(--zn-t)}
.field::placeholder{color:var(--zn-faint)}
.field:focus{outline:none;border-color:var(--zn-accent);box-shadow:var(--zn-focus)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-weight:600;font-size:var(--zn-fs-md);padding:.7rem 1.25rem;border-radius:var(--zn-r-full);cursor:pointer;border:1px solid transparent;transition:filter var(--zn-t),border-color var(--zn-t),background var(--zn-t)}
.btn-accent{background:var(--zn-grad);color:var(--zn-accent-ink);font-weight:700;border:none;cursor:pointer;border-radius:var(--zn-r-full)}
.btn-accent:hover{filter:brightness(1.08)} .btn-accent:disabled{opacity:.55;cursor:default;filter:none}
.btn-ghost{border:1px solid var(--zn-line);color:var(--zn-ink);background:transparent;border-radius:var(--zn-r-full)}
.btn-ghost:hover{border-color:var(--zn-accent)}
.btn-sm{padding:.45rem .9rem;font-size:var(--zn-fs-sm)} .btn-lg{padding:.9rem 1.6rem;font-size:var(--zn-fs-lg)}

/* ---- Chip / badge ---- */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--zn-line);border-radius:var(--zn-r-full);padding:5px 12px;font-size:var(--zn-fs-xs);color:var(--zn-mute)}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--zn-r-full);padding:3px 10px;font-size:var(--zn-fs-xs);font-weight:600}
.badge-accent{background:var(--zn-accent-soft);color:#9CC0FF}
.badge-success{background:rgba(52,211,153,.14);color:#6EE7B7}

/* ---- Feature tile ---- */
.feat{background:var(--zn-surface);border:1px solid var(--zn-line);border-radius:14px;padding:18px;transition:border-color var(--zn-t),transform var(--zn-t)}
.feat:hover{border-color:var(--zn-line-2);transform:translateY(-2px)}
.feat .ic{width:40px;height:40px;border-radius:var(--zn-r-md);display:flex;align-items:center;justify-content:center;background:var(--zn-accent-soft);color:#7DA8FF;margin-bottom:10px}

/* ---- Header ---- */
.zhead{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(7,10,18,.8);border-bottom:1px solid var(--zn-line)}
.zhead .in{max-width:var(--zn-container);margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.zbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--zn-ink)}
.zbrand .logo{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--zn-accent-ink)}
.znav{display:flex;align-items:center;gap:22px;font-size:var(--zn-fs-sm)}
.znav a{color:var(--zn-mute);text-decoration:none;transition:color var(--zn-t)} .znav a:hover,.znav a.on{color:var(--zn-ink)}
@media(max-width:720px){.znav{display:none}}
.zlang{display:flex;gap:6px;border:1px solid var(--zn-line);border-radius:var(--zn-r-full);padding:3px 6px;font-size:var(--zn-fs-xs);cursor:pointer}
.zlang span{padding:2px 6px;border-radius:var(--zn-r-full)}

/* ---- Footer ---- */
.zfoot{border-top:1px solid var(--zn-line);margin-top:var(--zn-7)}
.zfoot .in{max-width:var(--zn-container);margin:0 auto;padding:26px 20px;color:var(--zn-mute);font-size:13px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}

/* ---- Calendar (consultation) ---- */
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .cal-top button{padding:4px 10px;border:1px solid var(--zn-line);border-radius:var(--zn-r-sm);color:var(--zn-ink);background:transparent;cursor:pointer} .cal-top span{font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cal-dow{text-align:center;font-size:11px;color:var(--zn-mute);padding:4px 0}
.cal-day{padding:8px 0;border-radius:var(--zn-r-sm);border:1px solid var(--zn-line);background:var(--zn-bg);color:var(--zn-ink);font-size:13px;cursor:pointer} .cal-day:hover:not(.dis){border-color:var(--zn-accent)}
.cal-day.dis{opacity:.28;cursor:not-allowed} .cal-day.sel{background:var(--zn-grad);color:var(--zn-accent-ink);border-color:transparent;font-weight:700}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .slot{padding:8px 12px;border:1px solid var(--zn-line);border-radius:var(--zn-r-sm);background:var(--zn-bg);color:var(--zn-ink);font-size:13px;cursor:pointer} .slot:hover{border-color:var(--zn-accent)} .slot.sel{background:var(--zn-grad);color:var(--zn-accent-ink);border-color:transparent;font-weight:700}

/* ---- Page transitions ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtout .22s ease both} ::view-transition-new(root){animation:vtin .34s ease both}
@keyframes vtout{to{opacity:0;transform:translateY(-6px)}} @keyframes vtin{from{opacity:0;transform:translateY(10px)}}

/* ---- Reduced motion (a11y) ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}