:root{
  --indigo-deep:#241b4e;
  --indigo:#3d2e78;
  --violet:#6b52c9;
  --violet-soft:#a996e8;
  --sky:#8fd6ff;
  --ink:#1b1730;
  --muted:#655f7a;
  --line:#e4e0f2;
  --paper:#fbfaff;
  --paper-deep:#f3f1fb;
  --font-display:'Iowan Old Style','Georgia',serif;
  --font-body:-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'SF Mono','Menlo',monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  position:relative;
}

/* ---------- page-wide aurora / mesh-gradient background ---------- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 8%, rgba(143,214,255,0.30), transparent 70%),
    radial-gradient(34% 26% at 88% 6%, rgba(169,150,232,0.28), transparent 70%),
    radial-gradient(36% 32% at 78% 62%, rgba(107,82,201,0.16), transparent 70%),
    radial-gradient(30% 26% at 8% 70%, rgba(74,222,128,0.14), transparent 70%),
    radial-gradient(40% 34% at 50% 96%, rgba(143,214,255,0.18), transparent 70%),
    var(--paper);
  background-repeat:no-repeat;
  filter:blur(0px);
  animation:aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift{
  0%{background-position:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;}
  100%{background-position:3% 4%,-4% 3%,-3% -3%,4% -4%,-2% 2%;}
}
/* subtle grain for a premium, non-flat feel */
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none;}
}
@media (max-width:640px){
  body::before{filter:blur(2px);}
}
a{color:inherit;}

/* ---------- header (solid, seamless continuation of the hero tone) ---------- */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 6vw;
  position:sticky;top:0;
  background:var(--indigo-deep);
  z-index:10;
}
.brand{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.06em;
  display:flex;align-items:center;gap:12px;
  text-decoration:none;
  color:#fff;
}
.brand-mark{
  height:34px;width:auto;display:block;
  filter:invert(1) drop-shadow(0 0 8px rgba(143,214,255,0.5));
}
nav{display:flex;gap:30px;}
nav a{
  position:relative;
  text-decoration:none;font-size:14px;color:rgba(255,255,255,0.62);
  padding-bottom:5px;
  transition:color 0.2s ease;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--sky);
  transition:width 0.25s ease;
}
nav a:hover{color:#fff;}
nav a:hover::after,nav a.active::after{width:100%;}
nav a.active{color:#fff;}

/* ---------- mobile nav toggle (hamburger) ---------- */
.nav-toggle{
  display:none;
  appearance:none;background:transparent;border:none;cursor:pointer;
  width:30px;height:22px;padding:0;position:relative;flex-shrink:0;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:#fff;
  transition:transform 0.25s ease,opacity 0.25s ease;
}
.nav-toggle span{top:10px;}
.nav-toggle span::before{top:-8px;}
.nav-toggle span::after{top:8px;}
header.nav-open .nav-toggle span{background:transparent;}
header.nav-open .nav-toggle span::before{transform:translateY(8px) rotate(45deg);background:#fff;}
header.nav-open .nav-toggle span::after{transform:translateY(-8px) rotate(-45deg);background:#fff;}

/* ---------- language switcher ---------- */
.lang-switch{
  position:relative;
  font-family:var(--font-mono);
  margin-left:34px;
  border-left:1px solid rgba(255,255,255,0.16);
  padding-left:22px;
}
.lang-toggle{
  display:none; /* тек телефонда көрінеді, төмендегі @media (max-width:640px) қара */
  appearance:none;cursor:pointer;
  width:38px;height:38px;border-radius:50%;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;
  transition:background 0.2s ease,border-color 0.2s ease;
}
.lang-toggle svg{width:18px;height:18px;}
.lang-toggle:hover{background:rgba(255,255,255,0.12);}
.lang-switch.lang-open .lang-toggle{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.28);}
.lang-dropdown{
  /* компьютерде: қалыпты, әрдайым көрінетін көлденең пилл қатары */
  position:static;
  display:flex;flex-direction:row;align-items:center;gap:2px;
  min-width:0;
  background:transparent;border:none;border-radius:0;padding:0;
  box-shadow:none;opacity:1;visibility:visible;transform:none;
}
.lang-dropdown button{
  appearance:none;border:none;background:transparent;cursor:pointer;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.06em;
  color:rgba(255,255,255,0.45);
  padding:6px 9px;border-radius:3px;text-align:left;
  transition:color 0.15s ease,background 0.15s ease;
}
.lang-dropdown button:hover{color:rgba(255,255,255,0.85);}
.lang-dropdown button.active{color:#fff;background:rgba(255,255,255,0.1);font-weight:600;}
.lang-toggle:focus-visible,.lang-dropdown button:focus-visible{outline:2px solid var(--sky);outline-offset:2px;}

.doc-translation-notice{
  display:none;
  border-left:3px solid var(--sky);background:var(--paper-deep);
  padding:14px 18px;margin:0 0 24px;font-size:13.5px;color:var(--muted);
  font-style:italic;
}

/* ---------- hero (dark navy, seamless continuation of header) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 42%, rgba(143,214,255,0.11), transparent 40%),
    radial-gradient(circle at 90% 58%, rgba(169,150,232,0.16), transparent 50%),
    radial-gradient(circle at 8% 92%, rgba(107,82,201,0.16), transparent 46%),
    linear-gradient(155deg,#1c1440 0%,var(--indigo-deep) 42%,var(--indigo) 100%);
  padding:96px 6vw 108px;
}
.hero-inner::before{
  content:"";
  position:absolute;left:-60px;top:-40px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(107,82,201,0.35),transparent 70%);
  filter:blur(30px);
  z-index:-1;
  animation:glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse{
  0%,100%{opacity:0.6;transform:scale(1);}
  50%{opacity:1;transform:scale(1.12);}
}
@media (prefers-reduced-motion:reduce){.hero-inner::before{animation:none;}}
.hero::before{
  content:"";
  position:absolute;top:-10%;right:-4%;
  width:min(640px,58%);height:140%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 640'%3E%3Cg fill='none' stroke='%23a996e8' stroke-width='1'%3E%3Cline x1='120' y1='90' x2='300' y2='180' opacity='0.35'/%3E%3Cline x1='300' y1='180' x2='260' y2='340' opacity='0.3'/%3E%3Cline x1='300' y1='180' x2='470' y2='140' opacity='0.3'/%3E%3Cline x1='260' y1='340' x2='420' y2='400' opacity='0.3'/%3E%3Cline x1='260' y1='340' x2='110' y2='420' opacity='0.25'/%3E%3Cline x1='420' y1='400' x2='470' y2='140' opacity='0.2'/%3E%3Cline x1='420' y1='400' x2='380' y2='560' opacity='0.25'/%3E%3Cline x1='110' y1='420' x2='150' y2='560' opacity='0.2'/%3E%3C/g%3E%3Cg fill='%238fd6ff'%3E%3Ccircle cx='120' cy='90' r='4' opacity='0.55'/%3E%3Ccircle cx='470' cy='140' r='3.5' opacity='0.4'/%3E%3Ccircle cx='150' cy='560' r='3' opacity='0.35'/%3E%3C/g%3E%3Cg fill='%23a996e8'%3E%3Ccircle cx='300' cy='180' r='5' opacity='0.6'/%3E%3Ccircle cx='260' cy='340' r='4.5' opacity='0.5'/%3E%3Ccircle cx='420' cy='400' r='4' opacity='0.45'/%3E%3Ccircle cx='110' cy='420' r='3.5' opacity='0.35'/%3E%3Ccircle cx='380' cy='560' r='3' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,0.3) 1px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.6px),
    linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.05) 50%,transparent 60%);
  background-size:150px 150px,88px 88px,100% 100%;
  background-position:0 0,42px 58px,0 0;
  opacity:0.09;
  pointer-events:none;
}
.hero--animated::before{content:none;}
.hero-graphic{
  position:absolute;top:-10%;right:-4%;
  width:min(640px,58%);height:112%;
  pointer-events:none;
  z-index:1;
}
@media (prefers-reduced-motion:no-preference){
  .hero-graphic .rl{
    stroke-dasharray:5 11;
    animation:relay-flow 3.6s linear infinite;
  }
  .hero-graphic .rl:nth-child(even){animation-duration:4.6s;animation-direction:reverse;}
  .hero-graphic .rl:nth-child(3n){animation-duration:5.2s;}
  @keyframes relay-flow{to{stroke-dashoffset:-160;}}
  .hero-graphic .rn{animation:relay-pulse 3s ease-in-out infinite;}
  .hero-graphic .rn2{animation-delay:.3s;}
  .hero-graphic .rn3{animation-delay:.6s;}
  .hero-graphic .rn4{animation-delay:.9s;}
  .hero-graphic .rn5{animation-delay:1.2s;}
  .hero-graphic .rn6{animation-delay:1.5s;}
  .hero-graphic .rn7{animation-delay:1.8s;}
  .hero-graphic .rn8{animation-delay:2.1s;}
  @keyframes relay-pulse{0%,100%{opacity:.35;}50%{opacity:.9;}}
}
@media (prefers-reduced-motion:reduce){
  .hero-graphic .rn{opacity:.5;}
}
.brain-canvas{width:100%;height:100%;display:block;opacity:0;animation:brain-fade-in 1.1s ease .1s forwards;}
@media (prefers-reduced-motion:reduce){.brain-canvas{animation:none;opacity:0.9;}}
@keyframes brain-fade-in{to{opacity:1;}}
.hero-inner{max-width:820px;position:relative;z-index:1;}
.eyebrow{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.16em;font-weight:600;
  text-transform:uppercase;color:var(--violet-soft);
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 12px;border-radius:20px;
  background:rgba(169,150,232,0.12);
  border:1px solid rgba(169,150,232,0.28);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--violet-soft));
  box-shadow:0 0 0 4px rgba(143,214,255,0.18);
  animation:eyebrow-blink 2.4s ease-in-out infinite;
}
@keyframes eyebrow-blink{0%,100%{opacity:1;}50%{opacity:0.4;}}
@media (prefers-reduced-motion:reduce){.eyebrow::before{animation:none;}}
h1{
  font-family:var(--font-display);
  font-size:clamp(38px,6vw,64px);
  margin:22px 0 22px;
  line-height:1.1;letter-spacing:-0.01em;
  text-shadow:0 6px 32px rgba(107,82,201,0.35);
  background:linear-gradient(100deg,#fff 30%,var(--sky) 50%,var(--violet-soft) 65%,#fff 85%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:h1-shimmer 7s ease-in-out infinite;
}
@keyframes h1-shimmer{
  0%,100%{background-position:0% 0%;}
  50%{background-position:100% 0%;}
}
@media (prefers-reduced-motion:reduce){h1{animation:none;-webkit-text-fill-color:#fff;}}
h1 .accent{
  background:linear-gradient(100deg,var(--sky),var(--violet-soft) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{
  color:rgba(255,255,255,0.78);font-size:18px;line-height:1.75;max-width:60ch;
  font-weight:400;
}

@media (prefers-reduced-motion:no-preference){
  @keyframes fade-up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  .hero-inner .eyebrow,.hero-inner h1,.hero-inner p{
    opacity:0;animation:fade-up 0.7s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .hero-inner .eyebrow{animation-delay:.02s;}
  .hero-inner h1{animation-delay:.09s;}
  .hero-inner p{animation-delay:.2s;}
  .grid .card{opacity:0;animation:fade-up 0.55s cubic-bezier(.2,.7,.3,1) forwards;}
  .grid .card:nth-child(1){animation-delay:.05s;}
  .grid .card:nth-child(2){animation-delay:.12s;}
  .grid .card:nth-child(3){animation-delay:.19s;}
  .grid .card:nth-child(4){animation-delay:.26s;}
  .grid .card:nth-child(5){animation-delay:.33s;}
  .trust-card{opacity:0;animation:fade-up 0.6s cubic-bezier(.2,.7,.3,1) 0.15s forwards;}
}

main{padding:0 6vw 80px;}

/* ---------- trust card: glass panel floating over the hero ---------- */
.trust-card{
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(36,27,78,0.55);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(24,18,56,0.28);
  padding:30px 34px;
  margin:-48px 0 40px;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:26px;
}
.trust-item .label{
  font-family:var(--font-mono);font-size:11px;color:var(--sky);
  letter-spacing:0.08em;text-transform:uppercase;
}
.trust-item .value{
  font-size:16px;margin-top:6px;color:#fff;font-weight:600;
}
.trust-item .value a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,0.4);}
.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:#fff;
}
.status-pill::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--sky);
}

/* ---------- grid of cards (documents / sections) ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:24px;
}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr;}
}
.card{
  position:relative;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  padding:40px 30px 34px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 10px 30px -14px rgba(36,27,78,0.16), inset 0 1px 0 rgba(255,255,255,0.7);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
  overflow:hidden;
  transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--sky),var(--violet),var(--violet-soft));
  transform:scaleX(0);transform-origin:center;
  transition:transform 0.35s ease;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(107,82,201,0.12),transparent 65%);
  opacity:0;transition:opacity 0.3s ease;
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(169,150,232,0.5);
  box-shadow:0 22px 44px -18px rgba(36,27,78,0.26), inset 0 1px 0 rgba(255,255,255,0.7);
}
.card:hover::before{transform:scaleX(1);}
.card:hover::after{opacity:1;}
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;margin-bottom:2px;
  transition:transform 0.25s ease;
}
.card-icon svg{width:22px;height:22px;}
.card:hover .card-icon{transform:scale(1.08) rotate(-4deg);}
.card-icon[data-tone="sky"]{background:rgba(143,214,255,0.28);color:#0a7ea6;}
.card-icon[data-tone="violet"]{background:rgba(107,82,201,0.14);color:var(--violet);}
.card-icon[data-tone="rose"]{background:rgba(244,114,182,0.16);color:#be185d;}
.card-icon[data-tone="amber"]{background:rgba(251,191,36,0.2);color:#b45309;}
.card-icon[data-tone="green"]{background:rgba(74,222,128,0.18);color:#16a34a;}
.card .code{
  font-family:var(--font-mono);font-size:11px;color:var(--violet);
  letter-spacing:0.08em;font-weight:600;
  background:rgba(107,82,201,0.1);
  padding:4px 12px;border-radius:20px;
}
.card h2{font-family:var(--font-display);font-size:21px;margin:0;color:var(--indigo-deep);line-height:1.28;}
.card p{margin:0 0 6px;font-size:14px;color:var(--muted);flex-grow:1;line-height:1.6;}
.card .go{
  font-size:13.5px;font-weight:600;color:#fff;
  background:linear-gradient(120deg,var(--indigo-deep),var(--violet) 60%,var(--indigo-deep));
  background-size:220% 100%;background-position:0% 0%;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  padding:12px 28px;border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(36,27,78,0.35);
  transition:background-position 0.5s ease,transform 0.18s ease,box-shadow 0.18s ease;
}
.card .go::after{content:"→";transition:transform 0.18s ease;}
.card .go:hover{
  background-position:100% 0%;
  transform:translateY(-2px);
  box-shadow:0 12px 26px -8px rgba(107,82,201,0.42);
}
.card .go:hover::after{transform:translateX(3px);}
.card .go:active{transform:translateY(0);}

/* ---------- rights list ---------- */
.rights{
  margin-top:24px;padding-left:24px;position:relative;
}
.rights::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;
  background:linear-gradient(180deg,var(--sky),var(--violet-soft));
  border-radius:2px;
}
.rights h3{font-family:var(--font-display);font-size:19px;color:var(--indigo-deep);margin:0 0 6px;}
.rights ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px;}
.rights li{margin-bottom:6px;}

/* ---------- rights cards (clickable, richer) ---------- */
.rights-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:14px;margin-top:18px;
}
@media (max-width:1300px){
  .rights-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .rights-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .rights-grid{grid-template-columns:1fr;}
}
.right-card{
  position:relative;
  background:rgba(255,255,255,0.75);
  border:1px solid var(--line);border-radius:14px;
  padding:20px 18px 18px;cursor:pointer;text-align:left;
  transition:border-color 0.25s ease,box-shadow 0.25s ease,transform 0.25s ease;
  min-width:0;overflow:hidden;
  opacity:0;transform:translateY(16px);
}
.right-card.in-view{
  animation:right-card-in 0.55s cubic-bezier(.2,.7,.3,1) forwards;
}
.rights-grid .right-card:nth-child(1){animation-delay:0s;}
.rights-grid .right-card:nth-child(2){animation-delay:.08s;}
.rights-grid .right-card:nth-child(3){animation-delay:.16s;}
.rights-grid .right-card:nth-child(4){animation-delay:.24s;}
.rights-grid .right-card:nth-child(5){animation-delay:.32s;}
@keyframes right-card-in{to{opacity:1;transform:translateY(0);}}

.right-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--sky),var(--violet));
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.3s ease;
}
.right-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(107,82,201,0.14),transparent 65%);
  transition:opacity 0.25s ease;
}
.right-card:hover{
  border-color:var(--violet-soft);
  box-shadow:0 14px 32px -14px rgba(36,27,78,0.28);
  transform:translateY(-3px);
}
.right-card:hover::before{transform:scaleX(1);}
.right-card:hover::after{opacity:1;}

.right-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;margin-bottom:12px;
  transition:transform 0.25s ease;
}
.right-icon svg{width:19px;height:19px;}
.right-card:hover .right-icon{transform:scale(1.08) rotate(-4deg);}
.right-icon[data-tone="sky"]{background:rgba(143,214,255,0.28);color:#0a7ea6;}
.right-icon[data-tone="violet"]{background:rgba(107,82,201,0.14);color:var(--violet);}
.right-icon[data-tone="rose"]{background:rgba(244,114,182,0.16);color:#be185d;}
.right-icon[data-tone="amber"]{background:rgba(251,191,36,0.2);color:#b45309;}
.right-icon[data-tone="green"]{background:rgba(74,222,128,0.18);color:#16a34a;}

.right-card h4{
  font-family:var(--font-display);color:var(--indigo-deep);font-size:15px;margin:0 0 8px;
  line-height:1.3;transition:transform 0.2s ease;
}
.right-card:hover h4{transform:translateX(2px);}
.right-card p{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.45;}
.right-card .condition{
  font-size:11.5px;color:var(--ink);background:var(--paper-deep);
  border-left:2px solid var(--violet);border-radius:0 6px 6px 0;
  padding:8px 9px;margin:0 0 10px;line-height:1.4;
}
.right-card .condition strong{color:var(--indigo-deep);}
.right-card .doc-link{
  font-size:12px;font-family:var(--font-mono);color:var(--violet);text-decoration:none;
  display:inline-flex;align-items:center;gap:3px;
  transition:gap 0.15s ease;
}
.right-card .doc-link:hover{gap:6px;text-decoration:underline;}
@media (prefers-reduced-motion:reduce){
  .right-card{opacity:1;transform:none;animation:none;}
  .right-card:hover{transform:none;}
}

/* ---------- document detail page: dark sidebar + glass content ---------- */
.doc-layout{
  display:grid;
  grid-template-columns:270px 1fr;
  min-height:calc(100vh - 140px);
}
.doc-sidebar{
  background:
    radial-gradient(circle at 15% 12%, rgba(107,82,201,0.35), transparent 55%),
    radial-gradient(circle at 90% 85%, rgba(143,214,255,0.14), transparent 50%),
    var(--indigo-deep);
  padding:36px 24px;
  position:sticky;top:0;align-self:start;
  max-height:100vh;overflow-y:auto;
}
.doc-sidebar .sidebar-title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--violet-soft);margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}
.doc-sidebar .sidebar-title::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--violet-soft));
}
.doc-sidebar .doc-nav-item{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:12px 14px;margin-bottom:5px;border-radius:9px;
  text-decoration:none;font-size:13.5px;color:rgba(255,255,255,0.6);
  border:1px solid transparent;
  transition:background 0.18s ease,color 0.18s ease,border-color 0.18s ease,transform 0.15s ease;
}
.doc-sidebar .doc-nav-item:hover{
  background:rgba(255,255,255,0.07);color:#fff;
  border-color:rgba(255,255,255,0.1);transform:translateX(2px);
}
.doc-sidebar .doc-nav-item.active{
  background:linear-gradient(120deg,var(--violet),var(--indigo) 130%);
  color:#fff;font-weight:600;
  box-shadow:0 6px 18px -6px rgba(107,82,201,0.6);
  border-color:rgba(255,255,255,0.14);
}
.doc-sidebar .doc-nav-item .doc-code{
  font-family:var(--font-mono);font-size:10.5px;opacity:0.75;white-space:nowrap;
}
.doc-content{padding:48px 5vw 84px 5vw;}
.doc-meta{
  position:relative;overflow:hidden;
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-radius:14px;
  padding:4px 26px;margin:22px 0 44px;font-size:13px;
  box-shadow:0 10px 26px -16px rgba(36,27,78,0.2);
}
.doc-meta::before{
  content:"";position:absolute;top:0;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,transparent,var(--sky),var(--violet),transparent);
}
.doc-meta div{padding:16px 20px 16px 0;margin-right:20px;border-right:1px solid var(--line);}
.doc-meta div:last-child{border-right:none;margin-right:0;}
.doc-meta div .label{font-family:var(--font-mono);color:var(--violet);font-size:10.5px;letter-spacing:0.07em;text-transform:uppercase;}
.doc-meta div .value{margin-top:5px;font-weight:700;font-size:16px;color:var(--indigo-deep);}
.doc-code-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:0.06em;color:var(--violet);
  background:rgba(107,82,201,0.1);
  border:1px solid rgba(107,82,201,0.22);
  border-radius:20px;
  padding:7px 16px;margin-bottom:16px;
}
.doc-code-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--violet));
}
.doc-body{max-width:880px;font-size:15.5px;color:var(--ink);}
.doc-lang-block{display:none;}
.doc-lang-block.active{display:block;}

/* ---------- "Осы беттегі бөлімдер" (on-this-page TOC) ---------- */
.doc-main-row{display:flex;gap:44px;align-items:flex-start;}
.doc-main-row .doc-body{flex:1;min-width:0;}
.doc-toc{
  width:230px;flex-shrink:0;position:sticky;top:24px;
  max-height:calc(100vh - 48px);overflow-y:auto;
  padding:18px 0 18px 20px;border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.5),transparent);
}
.doc-toc-title{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;
  font-size:11px;color:var(--violet);margin-bottom:14px;font-weight:600;
}
.doc-toc-list{display:block;}
.doc-toc-list a{
  display:block;padding:7px 10px 7px 13px;font-size:13px;line-height:1.4;
  color:var(--muted);text-decoration:none;border-left:2px solid transparent;
  border-radius:0 6px 6px 0;
  transition:color 0.18s ease,border-color 0.18s ease,background 0.18s ease,transform 0.15s ease;
}
.doc-toc-list a:hover{color:var(--indigo-deep);background:rgba(107,82,201,0.06);transform:translateX(2px);}
.doc-toc-list a.active{
  color:var(--indigo-deep);border-left-color:var(--violet);font-weight:600;
  background:rgba(107,82,201,0.08);
}
@media (max-width:1150px){
  .doc-toc{display:none;}
}
.doc-body .callout{
  position:relative;
  border-left:3px solid var(--violet);
  background:linear-gradient(100deg,rgba(107,82,201,0.07),rgba(143,214,255,0.05));
  border-radius:0 10px 10px 0;
  padding:16px 20px;margin:24px 0;font-size:14.5px;color:var(--ink);
}
.doc-body .callout strong{color:var(--indigo-deep);}
.doc-body h1{
  color:var(--indigo-deep);font-size:clamp(26px,3.6vw,36px);
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--indigo-deep);
  text-shadow:none;animation:none;
}
.doc-body h2{
  font-family:var(--font-display);color:var(--indigo-deep);font-size:22px;
  margin-top:42px;padding-top:6px;
  border-top:1px solid var(--line);
}
.doc-body h3{font-family:var(--font-display);color:var(--indigo-deep);font-size:18px;margin-top:30px;margin-bottom:6px;}
.doc-body h4{font-family:var(--font-body);color:var(--indigo-deep);font-size:15.5px;font-weight:700;margin-top:22px;margin-bottom:4px;}
.doc-body p{color:var(--muted);}
.doc-body ul,.doc-body ol{color:var(--muted);padding-left:20px;}
.doc-body li{margin-bottom:6px;}
.doc-body li p{margin:0;color:var(--muted);}
.doc-body strong{color:var(--ink);}
.doc-body table{
  border-collapse:collapse;width:100%;margin:20px 0;
  border-radius:10px;overflow:hidden;
  box-shadow:0 1px 0 var(--line);
}
.doc-body table td{
  border:1px solid var(--line);padding:10px 14px;font-size:14px;vertical-align:top;
}
.doc-body table tr:nth-child(even){background:rgba(107,82,201,0.04);}
.doc-body table td strong{color:var(--indigo-deep);}

/* ---------- "Basqa quzhattar" related documents links (bottom of doc page) ---------- */
.doc-related{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);}
.doc-related-title{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;
  font-size:11px;color:var(--violet);margin-bottom:14px;font-weight:600;
}
.doc-related-links{display:flex;flex-wrap:wrap;gap:10px;}
.doc-related-links a{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;font-size:13px;color:var(--ink);
  background:var(--paper-deep);border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;
  transition:border-color 0.18s ease,transform 0.15s ease,background 0.18s ease;
}
.doc-related-links a:hover{border-color:var(--violet);background:rgba(107,82,201,0.06);transform:translateY(-1px);}
.doc-related-links a .doc-code{font-family:var(--font-mono);font-size:10px;color:var(--violet);opacity:0.8;white-space:nowrap;}
@media (max-width:640px){
  .doc-related-links{flex-direction:column;}
  .doc-related-links a{width:100%;}
}
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;margin:0;}
  .doc-sidebar{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    gap:8px;padding:16px 5vw;
    position:static;max-height:none;
  }
  .doc-sidebar::-webkit-scrollbar{display:none;}
  .doc-sidebar{scrollbar-width:none;}
  .doc-sidebar .sidebar-title{display:none;}
  .doc-sidebar .doc-nav-item{
    flex:0 0 auto;scroll-snap-align:start;
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    white-space:nowrap;
    padding:9px 15px;margin-bottom:0;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
  }
  .doc-sidebar .doc-nav-item span:first-child{
    font-size:12.5px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .doc-sidebar .doc-nav-item .doc-code{font-size:9.5px;opacity:0.6;}
  .doc-sidebar .doc-nav-item:hover{transform:none;}
  .doc-sidebar .doc-nav-item.active{
    background:linear-gradient(120deg,var(--violet),var(--indigo) 130%);
    border-color:transparent;
  }
  .doc-content{padding:32px 6vw 60px;}
  .doc-meta{display:none;}
}

/* ---------- phone-only: readable document text, scrollable tables ---------- */
@media (max-width:640px){
  .doc-content{padding:26px 5.5vw 50px;overflow-x:hidden;}
  .doc-body{font-size:14.5px;}
  .doc-body h1{font-size:24px;}
  .doc-body h2{font-size:19px;}
  .doc-code-badge{font-size:10.5px;padding:6px 12px;}
  .doc-body table{
    display:block;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;border-radius:10px;
  }
  .doc-body table td{white-space:normal;min-width:140px;}
}

/* ---------- forms (glass redesign) ---------- */
.form-card{
  position:relative;
  border:1px solid rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  padding:34px 34px 30px;margin-top:28px;
  border-radius:18px;
  box-shadow:0 20px 50px -20px rgba(36,27,78,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow:hidden;
  isolation:isolate;
}
.form-card::before,.form-card::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(50px);
  opacity:0.55;animation:blob-drift 14s ease-in-out infinite alternate;
}
.form-card::before{
  width:260px;height:260px;background:radial-gradient(circle,var(--violet-soft),transparent 70%);
  top:-90px;right:-60px;
}
.form-card::after{
  width:220px;height:220px;background:radial-gradient(circle,var(--sky),transparent 70%);
  bottom:-80px;left:-50px;animation-delay:-7s;
}
@keyframes blob-drift{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(20px,16px) scale(1.12);}
}
.form-card h2{
  font-family:var(--font-display);color:var(--indigo-deep);font-size:22px;margin:0 0 4px;
  display:flex;align-items:center;gap:10px;
}
.form-card h2::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--violet));
  box-shadow:0 0 0 4px rgba(107,82,201,0.14);
}
.form-card label{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.07em;text-transform:uppercase;
  margin:18px 0 7px;color:var(--muted);
}
.form-card input,.form-card textarea,.form-card select{
  width:100%;padding:12px 14px;border:1px solid rgba(228,224,242,0.9);
  border-radius:10px;font-family:var(--font-body);font-size:14.5px;
  background:rgba(255,255,255,0.75);color:var(--ink);
  transition:border-color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease,background 0.18s ease;
}
.form-card input:hover,.form-card textarea:hover,.form-card select:hover{
  border-color:var(--violet-soft);
}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{
  outline:none;border-color:var(--violet);background:#fff;
  box-shadow:0 0 0 4px rgba(107,82,201,0.16),0 6px 16px -8px rgba(107,82,201,0.4);
  transform:translateY(-1px);
}
.form-card textarea{min-height:112px;resize:vertical;}

/* custom select arrow */
.form-card select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236b52c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:40px;cursor:pointer;
}

/* custom checkbox — glassy, animated */
.form-card input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:21px;height:21px;min-width:21px;border-radius:6px;
  border:1.6px solid var(--violet-soft);
  background:linear-gradient(160deg,rgba(255,255,255,0.9),rgba(255,255,255,0.5));
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.8),0 1px 2px rgba(36,27,78,0.06);
  display:inline-block;cursor:pointer;position:relative;top:2px;
  transition:background 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease,transform 0.12s ease;
}
.form-card input[type="checkbox"]:hover{border-color:var(--violet);}
.form-card input[type="checkbox"]:focus-visible{
  outline:none;box-shadow:0 0 0 4px rgba(107,82,201,0.18);
}
.form-card input[type="checkbox"]:checked{
  background:linear-gradient(150deg,var(--violet-soft) 0%,var(--violet) 45%,var(--indigo) 100%);
  border-color:var(--violet);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.5),0 4px 12px -3px rgba(107,82,201,0.55);
  animation:checkbox-pop 0.32s cubic-bezier(.34,1.56,.64,1);
}
.form-card input[type="checkbox"]:checked::before{
  content:"";position:absolute;inset:1px 1px 55% 1px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,0.55),transparent);
  pointer-events:none;
}
.form-card input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform-origin:bottom left;
  animation:checkmark-draw 0.22s ease 0.06s both;
}
.form-card input[type="checkbox"]:active{transform:scale(0.88);}
@keyframes checkbox-pop{
  0%{transform:scale(0.8);}
  55%{transform:scale(1.14);}
  100%{transform:scale(1);}
}
@keyframes checkmark-draw{
  from{opacity:0;transform:rotate(40deg) scaleY(0.3);}
  to{opacity:1;transform:rotate(40deg) scaleY(1);}
}
@media (prefers-reduced-motion:reduce){
  .form-card input[type="checkbox"]:checked{animation:none;}
  .form-card input[type="checkbox"]:checked::after{animation:none;opacity:1;transform:rotate(40deg);}
}

/* custom trilingual file field */
.file-input-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.file-field{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:2px;
}
.file-btn{
  appearance:none;border:none;cursor:pointer;
  padding:10px 18px;border-radius:9px;
  background:linear-gradient(135deg,var(--violet),var(--indigo));color:#fff;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:0.01em;
  box-shadow:0 6px 16px -6px rgba(107,82,201,0.5);
  transition:transform 0.15s ease,box-shadow 0.15s ease,opacity 0.15s ease;
}
.file-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(107,82,201,0.6);}
.file-btn:active{transform:translateY(0) scale(0.97);}
.file-name{
  font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;
}
.file-name.has-file{color:var(--indigo-deep);font-weight:600;}

.form-card button[type="submit"]{
  margin-top:26px;padding:13px 30px;border:none;border-radius:10px;
  background:linear-gradient(120deg,var(--indigo-deep),var(--violet) 60%,var(--indigo-deep));
  background-size:220% 100%;background-position:0% 0%;
  color:#fff;font-size:14.5px;font-weight:600;letter-spacing:0.01em;
  cursor:pointer;position:relative;
  transition:background-position 0.5s ease,transform 0.18s ease,box-shadow 0.18s ease;
  box-shadow:0 10px 24px -8px rgba(36,27,78,0.4);
}
.form-card button[type="submit"]::after{
  content:"→";margin-left:8px;display:inline-block;transition:transform 0.18s ease;
}
.form-card button[type="submit"]:hover{
  background-position:100% 0%;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(107,82,201,0.45);
}
.form-card button[type="submit"]:hover::after{transform:translateX(3px);}
.form-card button[type="submit"]:active{transform:translateY(0);}
.form-card button[type="submit"]:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none;}

.req-error{
  display:none;margin-top:14px;padding:11px 15px;font-size:13px;
  color:#b3261e;background:#fdecea;border-left:3px solid #b3261e;border-radius:6px;
}
.note{font-size:12.5px;color:var(--muted);margin-top:10px;}

/* ---------- topic-specific extra fields ---------- */
.topic-extra{
  display:none;margin-top:16px;padding:18px 20px 8px;
  background:rgba(255,255,255,0.55);border:1px solid var(--violet-soft);border-radius:12px;
  backdrop-filter:blur(6px);
  animation:extra-in 0.3s ease;
}
@keyframes extra-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.topic-extra.active{display:block;}
.topic-extra label{margin-top:0;}
.topic-extra .checkbox-label{
  display:flex;align-items:flex-start;gap:9px;font-family:var(--font-body);
  font-weight:400;font-size:13px;text-transform:none;letter-spacing:normal;
  color:var(--muted);margin:16px 0 10px;cursor:pointer;
}
.topic-extra .checkbox-label input{margin-top:1px;flex-shrink:0;}

@media (prefers-reduced-motion:reduce){
  .form-card::before,.form-card::after{animation:none;}
}

/* ---------- request confirmation panel ---------- */
.req-confirm{
  display:none;text-align:center;
  padding:44px 34px 36px;
  margin-top:10px;
  position:relative;
  border:1px solid rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-radius:18px;
  box-shadow:0 20px 50px -20px rgba(36,27,78,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow:hidden;
  isolation:isolate;
}
.req-confirm::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--sky),#4ade80,var(--violet-soft));
}
.req-confirm::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);
  width:280px;height:280px;opacity:0.4;
  background:radial-gradient(circle,#4ade80,transparent 70%);
  top:-100px;left:50%;transform:translateX(-50%);
}
.req-confirm.active{display:block;animation:confirm-rise 0.5s cubic-bezier(.2,.7,.3,1);}
@keyframes confirm-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.req-confirm .check{font-size:38px;line-height:1;margin-bottom:6px;}
.req-confirm h3{
  font-family:var(--font-display);color:var(--indigo-deep);font-size:22px;margin:2px 0 28px;
  letter-spacing:-0.01em;
}
.confirm-details{display:flex;flex-direction:column;gap:10px;}
.req-confirm .row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;text-align:left;font-size:13.5px;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(228,224,242,0.9);
  border-radius:12px;
  transition:background 0.15s ease,border-color 0.15s ease,transform 0.15s ease;
}
.req-confirm .row:hover{background:#fff;border-color:var(--violet-soft);transform:translateY(-1px);}
.req-confirm .row .k{
  color:var(--muted);font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.05em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.req-confirm .row .v{color:var(--indigo-deep);font-weight:700;text-align:right;font-size:14.5px;}
.req-confirm .topic-pill{
  display:inline-block;
  background:linear-gradient(100deg,var(--violet),#1668e3);
  color:#fff;
  padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;
  box-shadow:0 4px 14px rgba(22,104,227,0.28);
  letter-spacing:0.01em;
}
.req-confirm .sms-note{
  margin-top:22px;padding:14px 18px;
  background:rgba(255,255,255,0.6);
  border-left:3px solid var(--sky);
  border-radius:0 10px 10px 0;
  font-size:12.5px;color:var(--muted);
  text-align:left;line-height:1.55;
}
.req-confirm .new-request{
  margin-top:26px;
  background:linear-gradient(120deg,var(--indigo-deep),var(--violet) 60%,var(--indigo-deep));
  background-size:220% 100%;background-position:0% 0%;
  border:none;color:#fff;
  padding:13px 28px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(36,27,78,0.4);
  transition:background-position 0.5s ease,transform 0.18s ease,box-shadow 0.18s ease;
}
.req-confirm .new-request:hover{
  background-position:100% 0%;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(107,82,201,0.45);
}
.req-confirm .new-request:active{transform:translateY(0);}

/* ---------- confetti burst ---------- */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;}
.confetti span{
  position:absolute;top:78px;left:50%;
  width:7px;height:7px;border-radius:1px;
  opacity:0;
  animation:confetti-burst 1.1s cubic-bezier(.2,.7,.3,1) 0.35s forwards;
}
.confetti span:nth-child(1){background:var(--sky);--tx:-120px;--ty:-40px;--rot:140deg;animation-delay:.32s;}
.confetti span:nth-child(2){background:var(--violet-soft);--tx:-88px;--ty:-72px;--rot:-90deg;animation-delay:.36s;}
.confetti span:nth-child(3){background:#4ade80;--tx:-48px;--ty:-96px;--rot:60deg;animation-delay:.3s;}
.confetti span:nth-child(4){background:var(--violet);--tx:0px;--ty:-108px;--rot:200deg;animation-delay:.4s;}
.confetti span:nth-child(5){background:var(--sky);--tx:48px;--ty:-96px;--rot:-140deg;animation-delay:.34s;}
.confetti span:nth-child(6){background:#4ade80;--tx:88px;--ty:-72px;--rot:100deg;animation-delay:.38s;}
.confetti span:nth-child(7){background:var(--violet-soft);--tx:120px;--ty:-40px;--rot:-60deg;animation-delay:.3s;}
.confetti span:nth-child(8){background:var(--violet);--tx:-100px;--ty:-6px;--rot:80deg;animation-delay:.42s;}
.confetti span:nth-child(9){background:#4ade80;--tx:100px;--ty:-6px;--rot:-110deg;animation-delay:.44s;}
.confetti span:nth-child(10){background:var(--sky);--tx:-64px;--ty:-118px;--rot:30deg;animation-delay:.46s;}
.confetti span:nth-child(11){background:var(--violet);--tx:64px;--ty:-118px;--rot:-30deg;animation-delay:.33s;}
.confetti span:nth-child(12){background:var(--violet-soft);--tx:0px;--ty:-56px;--rot:160deg;animation-delay:.5s;}
@keyframes confetti-burst{
  0%{opacity:0;transform:translate(-50%,0) rotate(0deg) scale(0.5);}
  15%{opacity:1;}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),var(--ty)) rotate(var(--rot)) scale(1);}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none;}}

/* ---------- confirm detail rows: icon badges, stagger, copy button ---------- */
.confirm-details .row{opacity:0;transform:translateY(6px);animation:row-in 0.4s ease forwards;}
.confirm-details .row:nth-child(1){animation-delay:.55s;}
.confirm-details .row:nth-child(2){animation-delay:.63s;}
.confirm-details .row:nth-child(3){animation-delay:.71s;}
@keyframes row-in{to{opacity:1;transform:translateY(0);}}

.icon-badge{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.icon-badge--id{background:rgba(107,82,201,0.14);}
.icon-badge--id .row-icon{color:var(--violet);}
.icon-badge--topic{background:rgba(22,104,227,0.12);}
.icon-badge--topic .row-icon{color:#1668e3;}
.icon-badge--time{background:rgba(74,222,128,0.16);}
.icon-badge--time .row-icon{color:#16a34a;}
.row-icon{width:14px;height:14px;flex-shrink:0;}

.id-wrap{display:inline-flex;align-items:center;gap:8px;}
.copy-id-btn{
  appearance:none;border:1px solid var(--line);background:#fff;
  width:27px;height:27px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;padding:0;
  transition:border-color 0.15s ease,color 0.15s ease,background 0.15s ease,transform 0.1s ease;
}
.copy-id-btn svg{width:13px;height:13px;}
.copy-id-btn:hover{border-color:var(--violet);color:var(--violet);}
.copy-id-btn:active{transform:scale(0.9);}
.copy-id-btn.copied{border-color:#16a34a;color:#16a34a;background:#f0fdf4;}
@media (prefers-reduced-motion:reduce){
  .confirm-details .row{opacity:1;transform:none;animation:none;}
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);padding:26px 6vw;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--muted);
}
footer a{text-decoration:none;color:var(--muted);}
footer a:hover{color:var(--indigo-deep);}

@media (max-width:640px){
  header{padding:16px 5vw;flex-wrap:wrap;position:relative;justify-content:flex-start;}
  .nav-toggle{display:flex;order:2;margin-left:auto;}
  nav{
    order:5;
    flex-basis:100%;
    max-height:0;
    overflow:hidden;
    flex-direction:column;
    gap:0;
    transition:max-height 0.3s ease;
  }
  header.nav-open nav{max-height:320px;padding-top:6px;}
  nav a{padding:12px 2px;width:100%;}
  .lang-switch{order:3;margin-left:8px;border-left:none;padding-left:0;}
  .lang-toggle{display:flex;}
  .lang-dropdown{
    position:absolute;top:calc(100% + 10px);right:0;left:auto;
    flex-direction:column;gap:2px;
    min-width:126px;
    background:var(--indigo-deep);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:12px;padding:6px;
    box-shadow:0 16px 34px -12px rgba(15,10,40,0.55);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s ease;
    z-index:20;
  }
  .lang-switch.lang-open .lang-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .lang-dropdown button{
    color:rgba(255,255,255,0.65);
    padding:9px 12px;border-radius:8px;font-size:12px;
  }
  .lang-dropdown button:hover{background:rgba(255,255,255,0.08);color:#fff;}
  .lang-dropdown button.active{
    color:#fff;font-weight:600;
    background:linear-gradient(120deg,var(--violet),var(--indigo) 130%);
  }
  .hero::before,.hero::after{display:none;}
  .hero{padding:52px 6vw 60px;}
  .hero-inner::before{width:260px;height:260px;left:-40px;top:-20px;}
  footer{flex-direction:column;align-items:flex-start;gap:12px;padding:24px 6vw 30px;}
  footer span{width:100%;}
  footer span:last-child{display:flex;flex-wrap:wrap;gap:8px 4px;line-height:1.9;font-size:13px;}
}

/* ---------- mobile-only: hide the hero brain animation ----------
   The animation should only render on computer/laptop screens.
   On phones it's hidden entirely (desktop/tablet above 820px is untouched). */
@media (max-width:820px){
  .hero-graphic{display:none;}
}

/* ---------- comparison blocks & highlight banner (About page) ---------- */
.compare-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:20px;
}
.compare-col{background:var(--paper);padding:26px 26px;}
.compare-col.highlight{background:var(--paper-deep);}
.compare-col h3{font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;}
.compare-col.highlight h3{color:var(--violet);}
.compare-col .point{margin-bottom:16px;}
.compare-col .point .t{font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:3px;}
.compare-col .point .d{font-size:13.5px;color:var(--muted);}
.banner{
  background:var(--indigo-deep);color:#fff;padding:18px 26px;
  font-size:14.5px;font-weight:600;text-align:center;
}
.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:20px;}
.level-card{background:var(--paper);padding:24px 24px;}
.level-card .lv{font-family:var(--font-mono);font-size:11px;color:var(--violet);
  letter-spacing:0.06em;text-transform:uppercase;margin-bottom:8px;}
.level-card h4{font-family:var(--font-display);font-size:17px;color:var(--indigo-deep);margin:0 0 8px;}
.level-card p{font-size:13.5px;color:var(--muted);margin:0;}
.subnote{font-size:13px;color:var(--muted);margin-top:14px;font-style:italic;}

@media (max-width:640px){
  .compare-grid{grid-template-columns:1fr;}
}

/* ---------- custom scrollbars (page + doc sidebar/toc) ---------- */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--violet-soft) transparent;
}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--sky),var(--violet-soft));
  border-radius:20px;
  border:2px solid var(--paper);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--violet-soft),var(--violet));
  background-clip:padding-box;
}
.doc-sidebar,.doc-toc{
  scrollbar-width:thin;
  scrollbar-color:rgba(143,214,255,0.55) transparent;
}
.doc-sidebar::-webkit-scrollbar,.doc-toc::-webkit-scrollbar{width:7px;}
.doc-sidebar::-webkit-scrollbar-thumb{
  background:rgba(143,214,255,0.45);
  border:none;border-radius:20px;background-clip:padding-box;
}
.doc-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(143,214,255,0.7);}
.doc-toc::-webkit-scrollbar-thumb{
  background:rgba(107,82,201,0.35);
  border:none;border-radius:20px;background-clip:padding-box;
}
.doc-toc::-webkit-scrollbar-thumb:hover{background:rgba(107,82,201,0.55);}

/* ---------- request submit loader: big logo with circulating energy ---------- */
.submit-loader{
  position:fixed;inset:0;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:radial-gradient(circle at 50% 42%,#241b4e 0%,#1c1440 55%,#140f30 100%);
  z-index:500;
  opacity:0;
  transition:opacity 0.25s ease;
}
.submit-loader.active{display:flex;opacity:1;}
.submit-loader-logo{
  width:180px;height:180px;
  position:relative;
  -webkit-mask-image:url('logo.png');mask-image:url('logo.png');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:linear-gradient(
    100deg,
    var(--indigo-deep) 0%,
    var(--indigo-deep) 32%,
    var(--violet) 42%,
    #fff 50%,
    var(--sky) 58%,
    var(--indigo-deep) 68%,
    var(--indigo-deep) 100%
  );
  background-size:320% 320%;
  background-position:135% 50%;
  overflow:hidden;
  filter:drop-shadow(0 0 30px rgba(143,214,255,0.35));
  animation:submit-logo-sweep 2.6s ease-in-out infinite;
}
@keyframes submit-logo-sweep{
  0%{background-position:135% 50%;}
  85%{background-position:-35% 50%;}
  100%{background-position:-35% 50%;}
}
.submit-loader-wordmark{
  font-family:var(--font-body);
  font-weight:800;
  font-size:32px;
  letter-spacing:-0.01em;
  color:#fff;
  text-shadow:0 0 22px rgba(143,214,255,0.45),0 2px 0 rgba(15,10,40,0.4);
  animation:submit-word-pulse 1.8s ease-in-out infinite;
}
@keyframes submit-word-pulse{0%,100%{opacity:0.88;}50%{opacity:1;}}
.submit-loader-text{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-top:-14px;
}
@media (max-width:640px){
  .submit-loader-logo{width:120px;height:120px;}
  .submit-loader-wordmark{font-size:24px;}
}