/* ============ Vessa slim site ============ */
.brand-mark.v{background:linear-gradient(150deg,#5b52d6,#3a3aa8)}

/* ---- Vessa AI logo (animated wordmark) ---- */
.vessa-logo{
  --g1:#6a9cff; --g2:#3f7ae6; --logo-ink:#262833;
  display:inline-flex; align-items:baseline; line-height:1;
  font-family:'Manrope',system-ui,sans-serif; font-size:22px; user-select:none;
}
.vessa-logo .v{ display:inline-block; height:.792em; width:auto; margin-right:-.06em; }
.vessa-logo .word{ font-weight:800; letter-spacing:-.03em; }
.vessa-logo .word .essa{ color:var(--logo-ink); }
.vessa-logo .word .ai{
  margin-left:.16em; font-size:.8em; letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vessa-logo.on-dark .word .essa{ color:#F4F6FB; }
.vessa-logo .bar{ transform-box:fill-box; transform-origin:center; animation:vessaTalk 1.05s ease-in-out infinite; }
@keyframes vessaTalk{ 0%,100%{ transform:scaleY(.42); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .vessa-logo .bar{ animation:none; } }
.footer .vessa-logo{ font-size:25px; }

/* lang switch — hover dropdown, flags float with transparent background */
.lang-dd{position:relative; display:inline-flex}
.lang-cur, .lang-opt{display:inline-flex; align-items:center; gap:7px; border:0; background:none; cursor:pointer; padding:4px 6px; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--ink); transition:.15s}
.lang-caret{width:11px; height:11px; color:var(--ink-3); transition:transform .2s; margin-left:-1px}
.lang-flag{width:25px; height:auto; display:block; filter:drop-shadow(0 1px 2px rgba(20,27,41,.28)); transition:transform .15s}
.lang-pop{position:absolute; top:100%; left:0; padding-top:9px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity .18s, transform .18s, visibility .18s; z-index:60}
.lang-dd:hover .lang-pop, .lang-dd:focus-within .lang-pop{opacity:1; visibility:visible; transform:translateY(0)}
.lang-dd:hover .lang-caret{transform:rotate(180deg)}
.lang-opt{color:var(--ink-2)}
.lang-opt:hover{color:var(--ink)}
.lang-opt:hover .lang-flag{transform:scale(1.08)}
.lang-note{text-align:center; font-size:12.5px; color:var(--accent-700); background:var(--accent-soft); border-top:1px solid var(--accent-line); padding:7px 12px}

/* ===== Unified frosted-glass segmented toggle (all modules) ===== */
.seg, .ck-toggle, .rev-bar .seg{
  display:inline-flex; align-items:center; gap:4px; padding:5px;
  border-radius:100px;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 34px rgba(20,27,41,.12), inset 0 1px 0 rgba(255,255,255,.8);
  width:max-content; max-width:100%;
}
.seg .seg-btn, .ck-toggle .seg-btn{
  border:0; background:none; padding:11px 24px; border-radius:100px;
  font-size:14.5px; font-weight:600; color:var(--ink-3);
  cursor:pointer; transition:.22s cubic-bezier(.4,0,.2,1); gap:0;
}
.seg .seg-btn svg, .ck-toggle .seg-btn svg{ display:none; }
.seg .seg-btn.on, .ck-toggle .seg-btn.on{
  background:#fff; color:var(--ink); box-shadow:0 2px 9px rgba(20,27,41,.14);
}
.seg .seg-btn.on.safe, .ck-toggle .seg-btn.on.safe{ color:var(--accent-700); }
.seg .seg-btn.on.danger, .ck-toggle .seg-btn.on.danger{ color:var(--risk); }

/* hero */
.vhero{position:relative; padding-top:60px; padding-bottom:96px; overflow:hidden}
.vhero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.2}
.vhero-bg::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 420px at 6% 0%, color-mix(in srgb,#6a9cff 6%,transparent), transparent 55%)}
.vhero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:40px; align-items:center}
@media(max-width:1000px){ .vhero-grid{grid-template-columns:1fr; gap:36px} }

/* value blocks */
.vblock{padding:84px 0; border-top:1px solid var(--glass-line)}
.vblock.alt{background:rgba(255,255,255,.32)}
.vblock-head{max-width:64ch; margin-bottom:36px}
.vblock-head .h2{margin-top:16px}
.vblock-head .lede{margin-top:16px}
.vblock-extra{margin-top:26px}

/* ===== VsCompare ===== */
.vs-wrap{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line); border-radius:var(--radius-lg); box-shadow:var(--sh-2), var(--glass-inset); padding:22px; max-width:1000px}
.vs-input{display:flex; align-items:center; gap:13px; padding:14px 18px; border-radius:16px; background:rgba(255,255,255,.6); border:1px solid var(--glass-line); box-shadow:var(--sh-1)}
.vs-input-tag{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-700); background:var(--accent-soft); border:1px solid var(--accent-line); padding:5px 10px; border-radius:100px; flex-shrink:0}
.vs-input-main{flex:1; font-size:15px; color:var(--ink-2)} .vs-input-main b{color:var(--ink); font-weight:600}
.vs-replay{flex-shrink:0; width:34px;height:34px;border-radius:50%; border:1px solid var(--glass-line); background:#fff; color:var(--ink-3); font-size:15px; cursor:pointer; transition:.15s}
.vs-replay:hover{color:var(--accent-700); transform:rotate(-40deg)}
.vs-fork{display:flex; justify-content:center; gap:46%; height:22px; position:relative}
.vs-fork-l,.vs-fork-r{width:2px; background:var(--border-2); margin-top:0}
.vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:680px){ .vs-grid{grid-template-columns:1fr} }
.vs-lane{border-radius:18px; border:1px solid var(--glass-line); padding:16px; background:rgba(255,255,255,.45)}
.vs-lane.vessa{border-color:var(--accent-line); background:color-mix(in srgb,#5b52d6 5%, rgba(255,255,255,.6))}
.vs-lane-h{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:14px; color:var(--ink-2)}
.vs-lane.vessa .vs-lane-h{color:var(--accent-700)}
.vs-lane-dot{width:9px;height:9px;border-radius:50%; background:var(--ink-4)}
.vs-lane.vessa .vs-lane-dot{background:#5b52d6}
.vs-steps{display:flex; flex-direction:column; gap:8px}
.vs-step{display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.7); border:1px solid var(--glass-line); opacity:0; transform:translateY(8px); transition:opacity .45s, transform .45s}
.vs-step.on{opacity:1; transform:none}
.vs-step-n{width:20px;height:20px;border-radius:6px; flex-shrink:0; display:grid; place-items:center; font-size:11px; font-weight:700; font-family:var(--mono); background:var(--surface-3); color:var(--ink-3)}
.vs-lane.vessa .vs-step-n{background:var(--accent-soft); color:var(--accent-700)}
.vs-step-t{font-size:13.5px; font-weight:600; line-height:1.25}
.vs-step-s{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.vs-outcome{display:flex; align-items:center; gap:12px; margin-top:12px; padding:13px 15px; border-radius:13px; opacity:0; transform:translateY(8px); transition:.5s}
.vs-outcome.on{opacity:1; transform:none}
.vs-outcome.bad{background:var(--risk-soft); border:1px solid #f0d2cd}
.vs-outcome.good{background:var(--success-soft); border:1px solid var(--success-line)}
.vs-out-main{flex:1}
.vs-out-t{font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.vs-outcome.bad .vs-out-t{color:var(--risk)} .vs-outcome.good .vs-out-t{color:var(--success)}
.vs-out-s{font-size:12px; color:var(--ink-2); margin-top:2px}
.vs-out-metric{font-size:15px; font-weight:800; letter-spacing:-.02em; flex-shrink:0; font-variant-numeric:tabular-nums}
.vs-outcome.bad .vs-out-metric{color:var(--risk)} .vs-outcome.good .vs-out-metric{color:var(--success)}

/* CTA */
.vcta{position:relative; overflow:hidden; border-radius:26px; background:linear-gradient(155deg,#1b2547 0%, #2a2358 50%, #2c2150 100%); color:#fff}
.vcta-in{position:relative; z-index:1; padding:52px 48px; max-width:64ch}
.vcta::before{content:""; position:absolute; inset:0; opacity:.5; background:radial-gradient(620px 360px at 88% 0%, rgba(140,130,255,.22), transparent 60%)}
.vcta .eyebrow{color:#aeb8ff} .vcta .eyebrow::before{background:#aeb8ff}
.vcta h2{font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-.022em; margin-top:16px; line-height:1.08}
.vcta .psub{font-size:16.5px; line-height:1.55; color:rgba(255,255,255,.74); margin-top:16px}
.btn-light{background:#fff; color:#1b2547} .btn-light:hover{background:#eef0ff; transform:translateY(-1px)}
.btn-dline{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22)} .btn-dline:hover{background:rgba(255,255,255,.12)}
.vcta .honest{margin-top:22px}
.vcta .honest .chip{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.82)}
.vcta .honest .chip .dot{background:#9fb0ff}

/* ============ Footer (Anthropic-style, multi-column) ============ */
.footer{padding:72px 0 36px; border-top:1px solid var(--glass-line); margin-top:80px; background:rgba(255,255,255,.34)}
.footer .wrap{display:flex; flex-direction:column}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; align-items:start}
@media(max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:36px 30px} .foot-brand{grid-column:1 / -1} }
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr 1fr} }

.foot-brand{max-width:34ch}
.foot-brand .brand{display:inline-flex; align-items:center; gap:11px; margin-bottom:18px}
.foot-claim{font-size:14px; line-height:1.62; color:var(--ink-3); margin:0}

.foot-col{display:flex; flex-direction:column}
.foot-col h5{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4); margin:0 0 16px}
.foot-col a{display:block; width:max-content; max-width:100%; font-size:14px; line-height:1.5; color:var(--ink-2); padding:7px 0; text-decoration:none; transition:color .15s, transform .15s}
.foot-col a:hover{color:var(--accent-700); transform:translateX(2px)}

.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  margin-top:56px; padding-top:26px; border-top:1px solid var(--glass-line)}
.foot-bottom .c{font-size:12.5px; color:var(--ink-4); line-height:1.5}
.foot-honest{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-family:var(--mono); font-size:11.5px; color:var(--ink-4)}
.foot-honest span:nth-child(even){opacity:.45}

/* ===== Pilot request modal ===== */
.pilot-overlay{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,22,40,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:pilotFade .18s ease}
@keyframes pilotFade{from{opacity:0}to{opacity:1}}
.pilot-modal{position:relative; width:100%; max-width:430px; background:#fff; border:1px solid var(--glass-line);
  border-radius:20px; padding:34px 32px 26px; box-shadow:0 30px 80px -24px rgba(20,22,55,.45); animation:pilotPop .22s cubic-bezier(.2,.8,.25,1)}
@keyframes pilotPop{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:none}}
.pilot-x{position:absolute; top:14px; right:14px; width:32px; height:32px; border:0; border-radius:50%; cursor:pointer;
  background:var(--surface-3); color:var(--ink-3); font-size:20px; line-height:1; display:grid; place-items:center; transition:.15s}
.pilot-x:hover{background:#eceef4; color:var(--ink)}
.pilot-title{font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0}
.pilot-sub{font-size:14px; line-height:1.5; color:var(--ink-3); margin:8px 0 20px; text-wrap:pretty}
.pilot-field{display:block; margin-bottom:13px}
.pilot-field span{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.pilot-field input{width:100%; box-sizing:border-box; height:44px; padding:0 14px; font-size:15px; font-family:inherit; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--glass-line); border-radius:11px; transition:border-color .15s, box-shadow .15s}
.pilot-field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.pilot-submit{width:100%; height:46px; margin-top:6px; justify-content:center; font-size:15px}
.pilot-submit:disabled{opacity:.6; cursor:default}
.pilot-err{font-size:13px; color:#c0392b; margin:12px 0 0}
.pilot-err a{color:#c0392b; font-weight:600}
.pilot-note{display:flex; gap:7px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--ink-4); margin:16px 0 0}
.pilot-note .pilot-lock{flex-shrink:0; font-size:12px; line-height:1.5}
.pilot-note a{color:var(--accent-700); white-space:nowrap}
.pilot-done{text-align:center; padding:8px 0 4px}
.pilot-done .pilot-title, .pilot-done .pilot-sub{text-align:center}
.pilot-done-ic{width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-700); font-size:26px; font-weight:700}
.pilot-done .pilot-submit{max-width:160px; margin:20px auto 0}