/* =========================================================
   iЮрист.AI — landing (navy + gold premium legal)
   Editorial layouts · GSAP-ready · sharp corners · semantic
   ========================================================= */
:root{
  --navy:#0B162C; --navy-2:#101F3A; --navy-3:#16294A; --navy-line:rgba(255,255,255,.10);
  --gold:#C5A059; --gold-2:#D9BC85; --gold-soft:rgba(197,160,89,.12);
  --ink:#0B162C; --muted:#56607A; --muted-light:#9AA6BC;
  --line:#E4E8EF; --bg:#FFFFFF; --bg-soft:#F4F6FA; --green:#2FB863;
  --radius:4px; --radius-sm:3px; --radius-lg:6px;
  --shadow-card:0 1px 2px rgba(11,22,44,.04);
  --shadow-hover:0 16px 40px rgba(11,22,44,.13);
  --shadow-float:0 30px 70px rgba(0,0,0,.5);
  --serif:"PT Serif","Georgia","Times New Roman",serif;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.14; margin:0; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; position:relative; }
.accent{ color:var(--gold); }

/* pre-animation hide (only hero, cleared by JS/failsafe) */
.pre-anim [data-hero]{ opacity:0; }

/* heading block */
.head{ max-width:720px; margin:0 auto 58px; text-align:center; }
.head .eyebrow{ color:var(--gold); font-size:13px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; display:block; margin-bottom:14px; }
.head h2{ font-size:clamp(28px,3.1vw,40px); text-wrap:balance; }
.head p{ color:var(--muted); font-size:17px; margin-top:14px; }
.head--light h2{ color:#fff; } .head--light p{ color:var(--muted-light); }
.head--left{ text-align:left; margin-left:0; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px;
  border-radius:var(--radius); border:1px solid transparent; font-size:15.5px; font-weight:600; transition:.2s ease; white-space:nowrap; }
.btn-gold{ background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--navy); }
.btn-gold:hover{ filter:brightness(1.05); box-shadow:0 10px 22px rgba(197,160,89,.34); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.26); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-2); }
.btn-navy{ background:var(--navy); color:#fff; } .btn-navy:hover{ background:var(--navy-3); }
.btn-outline{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-block{ width:100%; } .btn-sm{ height:42px; padding:0 20px; font-size:14.5px; }

/* =============== HEADER =============== */
.header{ position:sticky; top:0; z-index:100; background:rgba(11,22,44,.94);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--navy-line); }
.header .wrap{ display:flex; align-items:center; gap:30px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-emblem{ width:38px; height:38px; flex:none; color:var(--gold); }
.brand-txt b{ display:block; color:#fff; font-family:var(--serif); font-size:19px; letter-spacing:.3px; line-height:1; }
.brand-txt span{ display:block; color:var(--muted-light); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; margin-top:4px; }
.nav{ display:flex; align-items:center; gap:28px; margin-left:8px; }
.nav a{ color:#D3DAE7; font-size:15px; position:relative; transition:.2s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--gold); transition:width .25s ease; }
.nav a:hover{ color:#fff; } .nav a:hover::after{ width:100%; }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.link-login{ color:#D3DAE7; font-size:15px; } .link-login:hover{ color:var(--gold-2); }
.burger{ display:none; margin-left:auto; background:none; border:0; color:#fff; padding:6px; }

/* =============== HERO =============== */
.hero{ position:relative; background:var(--navy); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-figure{ position:absolute; top:-8%; right:-4%; width:60%; height:118%; object-fit:cover; object-position:center right; will-change:transform; }
.hero-veil{ position:absolute; inset:0;
  background:linear-gradient(90deg, var(--navy) 0%, var(--navy) 24%, rgba(11,22,44,.86) 46%, rgba(11,22,44,.42) 72%, rgba(11,22,44,.70) 100%); }
.hero-glow{ position:absolute; z-index:0; width:520px; height:520px; right:6%; top:14%; border-radius:50%;
  background:radial-gradient(circle, rgba(197,160,89,.16), transparent 62%); pointer-events:none; filter:blur(6px); }
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center; min-height:620px; padding:70px 0 84px; }
.hero-content{ max-width:560px; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 16px;
  border:1px solid rgba(197,160,89,.42); background:var(--gold-soft); color:var(--gold-2);
  border-radius:999px; font-size:13.5px; font-weight:600; margin-bottom:24px; }
.hero h1{ color:#fff; font-size:clamp(34px,4.6vw,56px); line-height:1.07; text-wrap:balance; }
.hero-sub{ color:#C4CDDC; font-size:19px; margin:22px 0 34px; max-width:490px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; margin-top:46px; }
.hero-stat b{ display:block; color:#fff; font-family:var(--serif); font-size:28px; line-height:1; font-variant-numeric:tabular-nums; }
.hero-stat span{ color:var(--muted-light); font-size:13px; margin-top:6px; display:block; }

/* hero annotation (restored) */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* =============== BENEFITS — bento =============== */
.benefits{ background:var(--bg); }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(158px,auto); gap:16px; }
.tile{ border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--bg);
  box-shadow:var(--shadow-card); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; display:flex; flex-direction:column; }
.tile:hover{ transform:translateY(-4px); border-color:var(--gold-2); box-shadow:var(--shadow-hover); }
.tile-ico{ width:48px; height:48px; border-radius:var(--radius); display:grid; place-items:center; background:var(--gold-soft); color:var(--gold); margin-bottom:16px; }
.tile-ico svg{ width:24px; height:24px; }
.tile h3{ font-size:18px; margin-bottom:8px; }
.tile p{ color:var(--muted); font-size:14px; margin-top:auto; }
.tile-a{ grid-column:span 3; grid-row:span 2; } .tile-b{ grid-column:span 3; } .tile-c{ grid-column:span 3; }
.tile-d,.tile-e,.tile-f{ grid-column:span 2; }
/* feature tile (dark, illustration) */
.tile-feature{ background:linear-gradient(150deg,var(--navy),var(--navy-3)); border-color:rgba(197,160,89,.3); color:#fff; position:relative; overflow:hidden; }
.tile-feature h3{ color:#fff; font-size:24px; }
.tile-feature p{ color:var(--muted-light); font-size:15px; }
.tile-feature .tile-ico{ background:rgba(197,160,89,.16); }
.tile-feature .big{ font-family:var(--serif); font-size:56px; color:var(--gold-2); line-height:1; margin-bottom:6px; font-variant-numeric:tabular-nums; }
.tile-scales{ position:absolute; right:-30px; bottom:-30px; width:220px; height:220px; color:rgba(197,160,89,.12); pointer-events:none; }

/* =============== HOW — vertical timeline =============== */
.how{ background:var(--navy); }
.timeline{ position:relative; max-width:860px; margin:0 auto; }
.tl-line{ position:absolute; left:50%; top:6px; bottom:6px; width:2px; transform:translateX(-50%); background:rgba(197,160,89,.16); }
.tl-line-fill{ position:absolute; inset:0; background:linear-gradient(180deg,var(--gold-2),var(--gold)); transform-origin:top; }
.tl-step{ position:relative; display:grid; grid-template-columns:1fr 76px 1fr; align-items:center; margin-bottom:26px; }
.tl-step:last-child{ margin-bottom:0; }
.tl-card{ background:var(--navy-3); border:1px solid var(--navy-line); border-radius:var(--radius); padding:26px 28px; }
.tl-card h3{ color:#fff; font-size:20px; margin-bottom:10px; }
.tl-card p{ color:var(--muted-light); font-size:14.5px; }
.tl-node{ grid-column:2; justify-self:center; width:52px; height:52px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--navy); display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:22px; z-index:2; box-shadow:0 0 0 6px var(--navy); }
.tl-step:nth-child(odd) .tl-card{ grid-column:1; }
.tl-step:nth-child(even) .tl-card{ grid-column:3; }
.tl-ico{ color:var(--gold); margin-bottom:12px; }
.how-cta{ text-align:center; margin-top:56px; }
.how-cta .note{ color:var(--muted-light); font-size:14px; margin-top:16px; }

/* =============== REVIEWS — featured + stack =============== */
.reviews{ background:var(--bg-soft); }
.reviews-layout{ display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:stretch; }
.review{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.review-feature{ padding:40px; position:relative; }
.review-feature::before{ content:"\201C"; position:absolute; top:8px; left:26px; font-family:var(--serif); font-size:120px; line-height:1; color:rgba(197,160,89,.18); }
.review-feature .review-quote{ font-size:21px; line-height:1.55; }
.review-stack{ display:grid; grid-template-rows:1fr 1fr; gap:20px; }
.review-sm{ padding:26px; }
.review-stars{ color:var(--gold); font-size:15px; letter-spacing:1px; margin-bottom:14px; }
.review-quote{ color:#33405A; font-size:15px; font-style:italic; line-height:1.62; flex:1; position:relative; z-index:1; }
.review-author{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.review-ava{ width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold); display:grid; place-items:center; flex:none; }
.review-name{ font-weight:700; font-family:var(--serif); font-size:15px; }
.review-role{ color:var(--muted); font-size:13px; }
.reviews-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.rstat{ background:linear-gradient(135deg,var(--navy),var(--navy-3)); border:1px solid rgba(197,160,89,.24);
  border-radius:var(--radius); padding:26px; text-align:center; }
.rstat b{ display:block; color:#fff; font-family:var(--serif); font-size:34px; line-height:1; font-variant-numeric:tabular-nums; }
.rstat span{ color:var(--muted-light); font-size:14px; margin-top:8px; display:block; }
.rstat .stars{ color:var(--gold); display:block; margin-top:6px; letter-spacing:1px; }

/* =============== PRICING =============== */
.pricing{ background:var(--bg); }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px; display:flex; flex-direction:column; transition:.25s ease; }
.plan:hover{ border-color:var(--gold-2); box-shadow:var(--shadow-hover); }
.plan-popular{ border-color:var(--gold); box-shadow:0 22px 50px rgba(11,22,44,.16); transform:translateY(-10px); }
.plan-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--navy); font-size:12px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; padding:6px 16px; border-radius:999px; white-space:nowrap; }
.plan-name{ font-size:20px; }
.plan-price{ display:flex; align-items:baseline; gap:4px; margin:14px 0 6px; }
.plan-price b{ font-family:var(--serif); font-size:44px; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.plan-price span{ font-size:20px; color:var(--muted); }
.plan-desc{ color:var(--muted); font-size:14px; min-height:40px; }
.plan-features{ display:flex; flex-direction:column; gap:12px; margin:22px 0 26px; flex:1; }
.plan-features li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:#37435C; }
.plan-features svg{ color:var(--gold); flex:none; margin-top:2px; }
.plan-biz{ margin-top:22px; background:linear-gradient(135deg,var(--navy),var(--navy-3)); border:1px solid rgba(197,160,89,.26);
  border-radius:var(--radius); padding:26px 30px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.plan-biz h4{ color:#fff; font-size:20px; }
.plan-biz .biz-price{ font-family:var(--serif); color:var(--gold-2); font-size:30px; }
.plan-biz .biz-feats{ color:var(--muted-light); font-size:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.plan-biz .btn{ margin-left:auto; }

/* =============== FAQ =============== */
.faq{ background:var(--bg-soft); }
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq-item[open]{ border-color:var(--gold-2); }
.faq-item summary{ list-style:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex:none; color:var(--gold); transition:transform .25s ease; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-answer{ padding:0 24px 22px; color:var(--muted); font-size:15px; line-height:1.65; }
.faq-cta{ text-align:center; margin-top:44px; }
.faq-cta h3{ font-size:22px; margin-bottom:6px; } .faq-cta p{ color:var(--muted); margin-bottom:20px; }

/* =============== FINAL CTA =============== */
.final{ background:linear-gradient(135deg,var(--navy),#12233F); overflow:hidden; }
.final .wrap{ text-align:center; max-width:720px; position:relative; z-index:2; }
.final h2{ color:#fff; font-size:clamp(28px,3.4vw,42px); text-wrap:balance; }
.final p{ color:var(--muted-light); font-size:18px; margin:18px auto 32px; max-width:560px; }
.final-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.final-feats{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:30px; color:var(--muted-light); font-size:14px; }
.final-feats span{ display:inline-flex; align-items:center; gap:8px; } .final-feats svg{ color:var(--gold); }

/* =============== FOOTER =============== */
.footer{ background:#08111F; color:#8B97AB; padding:60px 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
.footer .brand-txt b{ font-size:18px; }
.footer-desc{ font-size:14px; margin-top:16px; max-width:280px; line-height:1.6; }
.footer-col h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:#8B97AB; font-size:14px; transition:.2s; } .footer-col a:hover{ color:var(--gold-2); }
.footer-req{ margin-top:16px; font-size:12.5px; color:#69748C; line-height:1.7; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding-top:24px; font-size:13px; color:#69748C; }
.footer-bottom .disc{ margin-top:8px; font-size:12.5px; max-width:760px; }

/* =============== CHAT DOCK =============== */
.dock{ position:fixed; right:24px; bottom:24px; z-index:160; }
.dock-pill{ display:inline-flex; align-items:center; gap:11px; height:56px; padding:0 22px 0 10px; border:0; border-radius:999px;
  background:var(--navy-3); color:#fff; box-shadow:0 0 0 1px rgba(197,160,89,.4), 0 16px 38px rgba(0,0,0,.4);
  opacity:0; transform:translateY(18px) scale(.96); pointer-events:none; transition:opacity .32s ease, transform .38s cubic-bezier(.22,.61,.36,1); cursor:pointer; }
.dock.show-pill .dock-pill{ opacity:1; transform:none; pointer-events:auto; }
.dock.panel-open .dock-pill{ opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; }
.dock-pill .dp-ava{ width:40px; height:40px; border-radius:50%; background:var(--gold-soft); color:var(--gold); display:grid; place-items:center; flex:none; }
.dock-pill b{ font-size:14.5px; font-weight:600; } .dock-pill i{ font-style:normal; font-size:12px; color:var(--green); display:flex; align-items:center; gap:5px; }
.dock-pill i::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.dock-panel{ position:absolute; right:0; bottom:0; width:min(400px,calc(100vw - 32px));
  opacity:0; transform:translateY(18px) scale(.98); pointer-events:none; transition:opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1); }
.dock.panel-open .dock-panel{ opacity:1; transform:none; pointer-events:auto; }
.dock-close{ position:absolute; top:12px; right:12px; width:30px; height:30px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04); color:#9AA6BC; display:grid; place-items:center; cursor:pointer; z-index:3; }
.dock-close:hover{ color:var(--gold); border-color:var(--gold); }

/* =============== MOBILE MENU + FAB =============== */
.mobile-menu{ position:fixed; inset:0; z-index:200; background:var(--navy); display:none; flex-direction:column; padding:22px; }
.mobile-menu.open{ display:flex; }
.mm-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu nav{ display:flex; flex-direction:column; margin-top:26px; }
.mobile-menu nav a{ color:#D3DAE7; font-size:18px; padding:16px 0; border-bottom:1px solid var(--navy-line); }
.mm-cta{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }

/* =============== RESPONSIVE =============== */
@media (max-width:1024px){
  .nav,.header-actions{ display:none; } .burger{ display:inline-flex; }
  .tile-a{ grid-column:span 6; grid-row:auto; } .tile-b,.tile-c{ grid-column:span 3; }
  .tile-d,.tile-e,.tile-f{ grid-column:span 2; }
}
@media (max-width:860px){
  .section{ padding:64px 0; }
  .header .wrap{ height:62px; gap:12px; } .brand-txt b{ font-size:17px; } .brand-emblem{ width:34px; height:34px; }
  .hero-figure{ width:100%; height:100%; top:0; right:0; object-position:center 20%; }
  .hero-veil{ background:linear-gradient(180deg, rgba(11,22,44,.68) 0%, rgba(11,22,44,.9) 58%, var(--navy) 100%); }
  .hero-grid{ grid-template-columns:1fr; gap:30px; min-height:auto; padding:40px 0 56px; }
  .hero-sub{ font-size:17px; } .hero-stats{ gap:24px; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile-a,.tile-b,.tile-c,.tile-d,.tile-e,.tile-f{ grid-column:span 1; grid-row:auto; }
  .timeline{ max-width:none; } .tl-line{ left:26px; }
  .tl-step{ grid-template-columns:52px 1fr; gap:16px; margin-bottom:20px; }
  .tl-node{ grid-column:1; } .tl-step .tl-card{ grid-column:2 !important; }
  .reviews-layout{ grid-template-columns:1fr; } .review-feature .review-quote{ font-size:18px; }
  .reviews-stats{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; } .plan-popular{ transform:none; }
  .plan-biz{ flex-direction:column; align-items:flex-start; } .plan-biz .btn{ margin-left:0; width:100%; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:26px; }
  .dock{ right:16px; bottom:16px; left:16px; } .dock-pill{ width:100%; justify-content:center; } .dock-panel{ width:100%; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:1fr; } .hero-stats{ flex-wrap:wrap; }
}
@media (max-width:420px){ .hero-actions{ flex-direction:column; } .hero-actions .btn{ width:100%; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto; } .pre-anim [data-hero]{ opacity:1; } }

/* =========================================================
   MODALS
   ========================================================= */
.modal-overlay{ position:fixed; inset:0; z-index:300; background:rgba(6,12,24,.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ width:100%; max-width:440px; background:var(--bg); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.5); max-height:calc(100vh - 40px); display:flex; flex-direction:column; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px;
  background:linear-gradient(180deg,var(--navy),var(--navy-3)); }
.modal-head h2{ color:#fff; font-size:21px; }
.modal-close{ width:34px; height:34px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); background:transparent;
  color:#9AA6BC; display:grid; place-items:center; transition:.2s; } .modal-close:hover{ color:var(--gold); border-color:var(--gold); }
.modal-body{ padding:26px 24px; overflow-y:auto; }
.modal-desc{ color:var(--muted); font-size:14.5px; text-align:center; margin-bottom:22px; }
.modal-ico{ width:64px; height:64px; margin:2px auto 16px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold); }
.modal-ico.ok{ background:rgba(47,184,99,.12); color:var(--green); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:#37435C; margin-bottom:7px; }
.field .opt{ color:var(--muted); font-weight:400; }
.field-input{ position:relative; }
.field-input svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
.field-input input{ width:100%; height:50px; padding:0 14px 0 42px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:15px; color:var(--ink); background:var(--bg); transition:.2s; }
.field-input input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,160,89,.14); }
.modal .btn{ width:100%; margin-top:4px; }
.modal-error{ display:flex; align-items:center; gap:8px; color:#D64545; font-size:13.5px; background:rgba(214,69,69,.08);
  border:1px solid rgba(214,69,69,.25); border-radius:var(--radius); padding:10px 12px; margin-bottom:14px; }
.modal-switch{ text-align:center; margin-top:18px; font-size:14px; color:var(--muted); }
.modal-switch button{ background:none; border:0; color:var(--gold); font-weight:600; font-size:14px; }
.modal-switch button:hover{ text-decoration:underline; }
.modal-terms{ font-size:12px; color:var(--muted); text-align:center; margin-top:14px; line-height:1.5; }
.modal-terms a{ color:var(--gold); } .modal-terms a:hover{ text-decoration:underline; }

/* quick-login card */
.quick-card{ display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:18px; background:var(--bg-soft); }
.quick-ava{ width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--gold); display:grid; place-items:center;
  font-family:var(--serif); font-size:20px; font-weight:700; flex:none; }
.quick-name{ font-weight:700; font-size:15px; } .quick-email{ color:var(--muted); font-size:13px; }

/* code inputs */
.code-inputs{ display:flex; gap:10px; justify-content:center; margin:6px 0 20px; }
.code-inputs input{ width:48px; height:58px; text-align:center; font-size:24px; font-weight:700; font-family:var(--serif);
  border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); background:var(--bg); transition:.2s; }
.code-inputs input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,160,89,.16); }
.code-resend{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:4px; }
.code-resend button{ background:none; border:0; color:var(--gold); font-weight:600; } .code-resend button:disabled{ color:var(--muted-light); }
.code-mail{ text-align:center; font-size:14px; color:var(--ink); font-weight:600; margin-bottom:20px; }

/* Alpine cloak */
[x-cloak]{ display:none !important; }

/* =========================================================
   RESPONSIVE — modals & chat
   ========================================================= */
@media (max-width:600px){
  .modal{ max-width:none; }
  .code-inputs input{ width:42px; height:52px; font-size:21px; }
}
@media (max-width:860px){
}
/* =========================================================
   CHAT COMPONENT  (.ijchat)
   One component, two placements: hero and the bottom-right dock.

   Layout contract — a fixed-height column of three parts:
     __head   fixed
     __body   the ONLY scrolling area  (flex:1 + min-height:0)
     __foot   fixed
   min-height:0 is what stops a flex child from growing with its
   content instead of scrolling it.
   ========================================================= */
.ijchat{
  --chat-h:472px;
  display:flex; flex-direction:column;
  height:var(--chat-h); width:100%;
  background:linear-gradient(165deg, rgba(26,43,71,.60), rgba(11,23,42,.76));
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(197,160,89,.32); border-radius:16px;
  box-shadow:0 28px 64px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden; position:relative;
}
.ijchat *{ min-width:0; }

/* ---------- head (fixed) ---------- */
.ijchat__head{ flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(8,17,32,.28); }
.ijchat__ava{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px;
  background:rgba(197,160,89,.14); color:var(--gold); border:1px solid rgba(197,160,89,.34); }
.ijchat__id{ display:flex; flex-direction:column; gap:4px; }
.ijchat__id b{ color:#fff; font-family:var(--serif); font-size:17px; font-weight:700; line-height:1; }
.ijchat__id i{ display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:12.5px; color:var(--green); line-height:1; }
.ijchat__id i::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(47,184,99,.18); }
.ijchat__close{ margin-left:auto; width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14); border-radius:8px; background:transparent; color:#9AA6BC; transition:.2s; }
.ijchat__close:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- state wrapper (Alpine x-if needs one root) ---------- */
.ijchat__state{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

/* ---------- body: the only scroll area ---------- */
.ijchat__body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:16px 18px; scrollbar-width:thin; scrollbar-color:rgba(197,160,89,.45) transparent; }
.ijchat__body::-webkit-scrollbar{ width:6px; }
.ijchat__body::-webkit-scrollbar-thumb{ background:rgba(197,160,89,.45); border-radius:3px; }
.ijchat__body::-webkit-scrollbar-track{ background:transparent; }

/* form state: intro + textarea filling the remaining space */
.ijchat__body--form{ display:flex; flex-direction:column; gap:12px; }
.ijchat__intro h3{ color:#fff; font-size:18px; margin-bottom:4px; }
.ijchat__intro p{ color:#94A1B8; font-size:13.5px; }
.ijchat__ta{ flex:1 1 auto; min-height:104px; width:100%; resize:none; overflow-y:auto;
  background:rgba(6,14,28,.55); color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:11px;
  padding:13px 14px; font-family:inherit; font-size:15px; line-height:1.5; transition:.2s; }
.ijchat__ta::placeholder{ color:#6E7C95; }
.ijchat__ta:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,160,89,.15); }
.ijchat__count{ flex:0 0 auto; text-align:right; font-size:11.5px; color:#63718B; font-variant-numeric:tabular-nums; }

/* ---------- messages ---------- */
.ijchat__msgs{ display:flex; flex-direction:column; gap:11px; }
.msg{ max-width:86%; padding:11px 14px; border-radius:13px; font-size:14.5px; line-height:1.55; }
.msg.user{ align-self:flex-end; background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:var(--navy); font-weight:500; border-bottom-right-radius:4px; }
.msg.assistant{ align-self:flex-start; background:rgba(7,16,31,.78); color:#D5DDEA;
  border:1px solid rgba(255,255,255,.08); border-bottom-left-radius:4px; }
.msg.blur{ filter:blur(5px); user-select:none; pointer-events:none; }
.msg-text{ display:block; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg-text strong{ font-weight:700; color:#fff; }
.msg.user .msg-text strong{ color:var(--navy); }
.msg-text em{ font-style:italic; }
.msg-redirect{ display:flex; width:100%; align-items:center; justify-content:center; gap:8px; margin-top:11px;
  height:40px; padding:0 15px; border:0; border-radius:10px; font-weight:600; font-size:14px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--navy); transition:.2s; }
.msg-redirect:hover{ filter:brightness(1.06); }

/* typing dots */
.typing{ display:inline-flex; gap:5px; align-items:center; }
.typing span{ width:7px; height:7px; border-radius:50%; background:var(--gold); opacity:.5; animation:typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2){ animation-delay:.18s; }
.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }

/* recent dialogs (signed-in) */
.ijchat__recent{ margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.08); }
.ijchat__recent h4{ color:#8B98AF; font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; margin-bottom:9px; }
.ijchat__recent button{ display:block; width:100%; text-align:left; margin-bottom:7px; padding:10px 12px;
  background:rgba(7,16,31,.55); border:1px solid rgba(255,255,255,.08); border-radius:9px;
  color:#BAC4D4; font-size:13px; line-height:1.35; transition:.2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ijchat__recent button:hover{ border-color:var(--gold); color:#fff; }

/* ---------- foot (fixed) ---------- */
.ijchat__foot{ flex:0 0 auto; padding:13px 18px 15px; border-top:1px solid rgba(255,255,255,.08); background:rgba(8,17,32,.32); }
.ijchat__foot .btn{ width:100%; height:50px; border-radius:11px; font-size:15.5px; }
.ijchat__note{ color:#7E8BA3; font-size:12px; text-align:center; margin-top:9px; }

/* composer */
.ijchat__composer{ display:flex; gap:9px; align-items:flex-end; }
.ijchat__composer textarea{ flex:1 1 auto; height:46px; max-height:96px; resize:none; overflow-y:auto;
  background:rgba(6,14,28,.6); color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:11px;
  padding:12px 14px; font-family:inherit; font-size:14.5px; line-height:1.45; transition:.2s; }
.ijchat__composer textarea::placeholder{ color:#6E7C95; }
.ijchat__composer textarea:focus{ outline:none; border-color:var(--gold); }
.ijchat__send{ flex:none; width:46px; height:46px; display:grid; place-items:center; border:0; border-radius:11px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--navy); transition:.2s; }
.ijchat__send:disabled{ opacity:.45; cursor:not-allowed; }
.ijchat__send:not(:disabled):hover{ filter:brightness(1.07); }

/* register gate — lives in the fixed foot so it never scrolls away */
.ijchat__gate{ display:flex; flex-direction:column; gap:10px; }
.ijchat__gate-head{ display:flex; gap:10px; align-items:flex-start; }
.ijchat__gate-head svg{ color:var(--gold); flex:none; margin-top:2px; }
.ijchat__gate-head h4{ color:#fff; font-family:var(--sans); font-size:14px; font-weight:700; margin-bottom:2px; }
.ijchat__gate-head p{ color:#94A1B8; font-size:12.5px; line-height:1.4; }
.ijchat__gate .btn{ height:44px; font-size:14.5px; }

/* ---------- placements ---------- */
.hero-card-col .ijchat{ --chat-h:472px; max-width:452px; }
.ijchat--dock{ --chat-h:min(520px, calc(100vh - 120px)); border-radius:14px; box-shadow:0 30px 70px rgba(0,0,0,.55); }

@media (max-width:1024px){ .hero-card-col .ijchat{ --chat-h:444px; } }
@media (max-width:860px){
  .hero-card-col .ijchat{ --chat-h:min(430px, calc(100vh - 250px)); max-width:none; }
  .ijchat__head{ padding:13px 15px; }
  .ijchat__body{ padding:14px 15px; }
  .ijchat__foot{ padding:12px 15px 14px; }
  .ijchat--dock{ --chat-h:min(470px, calc(100vh - 90px)); }
}

/* =========================================================
   AUTH CHIP · TOASTS
   ========================================================= */
.user-chip{ display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 6px; border:1px solid var(--navy-line); border-radius:999px; }
.user-ava{ width:32px; height:32px; border-radius:50%; background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--navy);
  display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:15px; flex:none; }
.user-meta{ display:flex; flex-direction:column; line-height:1.1; }
.user-meta b{ color:#fff; font-size:14px; font-family:var(--sans); font-weight:600; }
.user-meta i{ color:var(--gold-2); font-size:11.5px; font-style:normal; }

.toasts{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:400;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ pointer-events:auto; max-width:90vw; padding:13px 20px; border-radius:var(--radius); font-size:14.5px; font-weight:500; color:#fff;
  background:var(--navy-3); border:1px solid var(--navy-line); box-shadow:0 16px 40px rgba(0,0,0,.4);
  animation:toastIn .3s cubic-bezier(.22,.61,.36,1); }
.toast-warn{ background:#3a2f12; border-color:rgba(197,160,89,.5); color:var(--gold-2); }
.toast-error{ background:#3a1616; border-color:rgba(214,69,69,.5); color:#F0B3B3; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (max-width:860px){ .toasts{ bottom:88px; } }

/* =========================================================
   RESTORED / FIXED
   ========================================================= */
/* hero right column is the positioning context for the annotation */
.hero-card-col{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* brand logo from the admin panel — the source image is 256px, clamp it */
.brand-logo{ width:40px; height:40px; flex:none; object-fit:contain; border-radius:9px; }
.footer .brand-logo{ width:38px; height:38px; }
@media (max-width:860px){ .brand-logo{ width:34px; height:34px; } }


/* =========================================================
   SESSION LOADING (clicking a previous dialog is not instant)
   ========================================================= */
.ijchat__loading{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; height:100%; min-height:140px; color:#94A1B8; font-size:13.5px; }
.spinner{ width:30px; height:30px; border-radius:50%; border:2.5px solid rgba(197,160,89,.22);
  border-top-color:var(--gold); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.ijchat__recent button:disabled{ opacity:.55; cursor:progress; }
.ijchat__recent button.is-loading{ border-color:var(--gold); color:#fff; }

/* =========================================================
   MOBILE TAB BAR  (as in the reference mock)
   Главная · Услуги · ИИ-юрист (center) · Тарифы · Контакты
   ========================================================= */
.tabbar{ display:none; position:fixed; left:10px; right:10px; bottom:10px; z-index:150;
  background:rgba(11,22,44,.97); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.09); padding:0 10px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(5,1fr); align-items:end; }
.tabbar a, .tabbar button{ display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:0; padding:6px 2px; color:#8D9AB2; font-size:10.5px; line-height:1.2;
  text-align:center; transition:color .2s; }
.tabbar a:hover, .tabbar a:active{ color:var(--gold-2); }
.tabbar svg{ width:21px; height:21px; }
.tabbar .tab-main{ position:relative; color:var(--gold-2); font-weight:600; }
.tabbar .tab-main .tab-fab{ width:52px; height:52px; margin-top:-24px; border-radius:50%;
  display:grid; place-items:center; color:var(--navy);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 8px 22px rgba(197,160,89,.45), 0 0 0 5px var(--navy); }
.tabbar .tab-main .tab-fab svg{ width:26px; height:26px; }
.tabbar .tab-main .dot{ position:absolute; top:-18px; right:calc(50% - 26px); width:11px; height:11px;
  border-radius:50%; background:var(--green); border:2.5px solid var(--navy); }

@media (max-width:860px){
  .tabbar{ display:grid; border-radius:100px; }
  body{ padding-bottom:74px; }
  /* the floating pill is replaced by the tab bar on phones */
  .dock .dock-pill{ display:none; }
  .dock{ left:10px; right:10px; bottom:82px; }
  .toasts{ bottom:96px; }
}

/* annotation — exact placement */
.hero-annot{
  position:absolute;
  width:auto;
  max-width:300px;
  align-self:flex-end;
  margin:0 6px 10px auto;
  text-align:right;
  padding-right:8px;
  right:490px;
  top:0;
  color:var(--gold-2);
  font-family:var(--serif);
  font-style:italic;
  font-size:15.5px;
  line-height:1.35;
  pointer-events:none;
}
.hero-annot svg{ display:block; margin:2px 0 0 auto; color:var(--gold); overflow:visible; }

/* hero chat: no backdrop blur (the dock keeps its blur) */
.hero-card-col .ijchat{ backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); }

/* brand logo inside chat heads & tabbar */
.ijchat__logo{ width:26px; height:26px; object-fit:contain; border-radius:7px; }
.tabbar .tab-main .tab-fab .tab-logo{ width:30px; height:30px; object-fit:contain; }