:root{
  --ink:#101426; --muted:#6f7488; --line:#e7eaf5; --bg:#f7f8fc;
  --blue:#2563eb; --indigo:#4f46e5; --violet:#6a3be8; --pink:#ec008c;
  --grad:linear-gradient(90deg,#2643e6 0%,#8a2be2 55%,#ec008c 100%);
  --pad:clamp(12px,4vw,32px);
  --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
a{text-decoration:none;color:inherit}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}
.page{max-width:960px;margin:0 auto;padding:0 var(--pad);width:100%;flex:1}
/* ================= HEADER ================= */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(16,20,38,.06)}
.header-inner{max-width:960px;margin:0 auto;height:clamp(52px,10vw,96px);display:flex;align-items:center;gap:10px;padding:0 clamp(10px,2vw,14px) 0 var(--pad)}
.logo{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.logo > svg{width:clamp(22px,4vw,34px);height:auto;flex:none}
.logo-text{font-size:clamp(15px,2.6vw,22px);font-weight:800;letter-spacing:-.6px;white-space:nowrap;
 background-image:linear-gradient(115deg,#e8008f 0%,#8a2be2 90%);
 -webkit-background-clip:text;background-clip:text;color:transparent;transition:filter .2s}
.logo-text span{background-image:linear-gradient(115deg,#2563eb 0%,#00a3ff 90%);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.logo:hover .logo-text{filter:brightness(1.18)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;height:clamp(34px,4.5vw,40px);padding:0 clamp(9px,1.8vw,16px);font-size:clamp(11px,1.3vw,12.5px);font-weight:700;border:none;transition:.2s;white-space:nowrap}
.btn svg{flex:none}
.btn-ghost{background:#fff;border:1px solid #e3e6f3;color:#171b34}
.btn-ghost:hover{border-color:#c9cdea;background:#f6f7fd}
.btn-grad{background:linear-gradient(90deg,#8a2be2,#ec008c);color:#fff;box-shadow:0 6px 16px rgba(236,0,140,.25)}
.btn-grad:hover{filter:brightness(1.07)}
/* ================= TOS ================= */
.tos{padding-top:clamp(14px,3vw,24px);padding-bottom:clamp(20px,3vw,32px);padding-bottom:calc(clamp(20px,3vw,32px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.tos-crumb{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--muted);flex-wrap:wrap}
.tos-crumb a{color:#4f46e5;font-weight:700}
.tos-crumb svg{color:#9aa0b5;flex:none}
.tos-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.tos-head h1{font-size:clamp(18px,3.4vw,26px);font-weight:800;letter-spacing:-.4px;
 background:linear-gradient(115deg,#2643e6 0%,#8a2be2 50%,#ec008c 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.tos-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #eceef8;border-radius:999px;padding:5px 11px;font-size:10px;font-weight:800;color:#565b74}
.mchip svg{color:#6a3be8}
.tos-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.mini-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:10px;border:1px solid #e3e6f3;background:#fff;font-size:11.5px;font-weight:800;color:#171b34;transition:.15s}
.mini-btn:hover{border-color:#c9cdea;background:#f6f7fd}
/* layout */
.tos-layout{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:start}
.toc{position:sticky;top:calc(clamp(52px,10vw,96px) + 12px);background:#fff;border:1px solid #eceef8;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:2px}
.toc h3{font-size:10px;font-weight:800;color:#9aa0b5;text-transform:uppercase;letter-spacing:.5px;padding:6px 10px 8px}
.toc a{font-size:11.5px;font-weight:600;color:#565b74;padding:8px 10px;border-radius:8px;border-left:2px solid transparent;transition:.15s;display:flex;gap:8px;align-items:center}
.toc a .n{font:800 9px ui-monospace,Menlo,Consolas,monospace;color:#9aa0b5}
.toc a:hover{background:#f6f7fd;color:#171b34}
.toc a.on{color:#4f46e5;background:#eef0ff;border-left-color:#4f46e5}
.toc a.on .n{color:#4f46e5}
.tos-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.sec{background:#fff;border:1px solid #eceef8;border-radius:14px;padding:clamp(14px,2.6vw,20px);scroll-margin-top:calc(clamp(52px,10vw,96px) + 12px)}
.sec h2{font-size:clamp(13px,2vw,15px);font-weight:800;display:flex;align-items:center;gap:10px}
.sec h2 .no{flex:none;min-width:26px;height:26px;padding:0 7px;border-radius:8px;background:var(--grad);color:#fff;font:800 10px/26px 'Inter',sans-serif;text-align:center}
.sec p{font-size:12.5px;color:#565b74;line-height:1.7;margin-top:9px}
.sec p b{color:#171b34}
.sec p a{color:#4f46e5;font-weight:700}
.sec ul{margin-top:10px;list-style:none;display:flex;flex-direction:column;gap:8px}
.sec ul li{display:flex;gap:9px;font-size:12px;color:#565b74;font-weight:500;line-height:1.6}
.sec ul li svg{flex:none;margin-top:2px}
.li-ok svg{color:#16a34a}
.li-x svg{color:#e11d48}
.callout{margin-top:10px;background:#f6f4ff;border:1px dashed #c9b8f5;border-radius:10px;padding:12px;font-size:11.5px;color:#3c4258;font-weight:600;display:flex;gap:9px;line-height:1.6}
.callout svg{flex:none;margin-top:1px;color:#6a3be8}
/* alt cta */
.tos-cta{border:1px solid #eceef8;background:linear-gradient(135deg,#fff,#f6f4ff);border-radius:14px;padding:clamp(14px,2.6vw,20px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tos-cta .ai{width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.tos-cta .t{flex:1;min-width:200px}
.tos-cta b{font-size:13px;display:block}
.tos-cta span{font-size:11px;color:var(--muted);font-weight:600}
.tos-cta .acts{display:flex;gap:8px;flex-wrap:wrap}
/* ================= FOOTER ================= */
.footer{background:#fff;margin-top:auto;border-top:1px solid #edeff7}
.footer-inner{max-width:960px;margin:0 auto;padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer .copy{font-size:11px;color:#8a8fa8}
.footer-links{margin-left:auto;display:flex;gap:clamp(14px,2.8vw,26px);flex-wrap:wrap}
.footer-links a{font-size:11px;color:#565b74}
.footer-links a:hover{color:var(--indigo)}
.socials{display:flex;gap:18px;margin-left:6px}
.socials a{color:#171b34;display:inline-flex;transition:.15s;padding:4px}
.socials a:hover{color:var(--indigo)}
/* toast */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(120px);background:#171b34;color:#fff;font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:10px;opacity:0;transition:.3s;z-index:99;max-width:92vw;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* =============== KIRILIM NOKTALARI =============== */
@media (max-width:820px){
  .tos-layout{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:thin;align-items:center;padding:8px}
  .toc h3{display:none}
  .toc a{flex:none;border:1px solid #e3e6f3;border-radius:999px;padding:7px 12px;border-left:none}
  .toc a.on{border-color:transparent;background:linear-gradient(90deg,#2643e6,#8a2be2);color:#fff}
  .toc a.on .n{color:#fff}
}
@media (max-width:560px){
  .tos-acts{margin-left:0}
}
@media (max-width:420px){
  .header-right .btn{padding:0 10px}
  .header-right .btn-label{display:none}
  .tos-cta{flex-direction:column;align-items:flex-start}
  .tos-cta .acts{width:100%}
  .tos-cta .mini-btn{flex:1;justify-content:center}
}
@media (max-width:320px){
  .logo-text{font-size:15px}
}
@media (max-height:520px) and (orientation:landscape){
  .header-inner{height:52px}
  .tos{padding-top:10px}
}
@media (pointer:coarse){
  .mini-btn{height:42px}
  .toc a{padding:9px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (hover:none){
  .btn-grad:hover,.mini-btn:hover{filter:none;transform:none}
  .logo:hover .logo-text{filter:none}
}
@media print{
  .header,.footer,.toc,.tos-acts,.tos-cta,.toast{display:none!important}
  body{background:#fff}
  .sec{border:none;box-shadow:none;break-inside:avoid}
}