/* ============================================================
   us.xuss.us — qora fon + oq chekka
   Dizayn tokenlari bir joyda; hamma komponent shulardan foydalanadi.
   ============================================================ */
:root{
  /* sirt va siyoh */
  --bg:#040404;
  --surface:#0a0a0a;
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.64);
  --ink-3:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.34);
  --glow:rgba(255,255,255,.30);
  --ok:#3ddc84;

  /* shrift */
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* masofa */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-20:80px;

  --radius:10px;
  --container:1120px;
  --dur:200ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
body::before{ /* fon nafasi: nozik to'r + yumshoq nur */
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 78% 8%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px;
  mask-image:radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 85%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 85%);
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;margin:0}
a{color:inherit}
.mono{font-family:var(--font-mono);font-size:.92em;letter-spacing:.02em}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 44px;position:relative;z-index:10}

/* ---------- yonlarning oq chekkasi ---------- */
.rail{
  position:fixed;top:0;bottom:0;width:3px;z-index:85;
  background:#fff;opacity:.94;pointer-events:none;
  box-shadow:0 0 22px var(--glow);
}
.rail-l{left:0}
.rail-r{right:0}

/* ---------- o'rgimchakning ini (orqa fondagi to'r) ---------- */
.nest{
  position:fixed;top:0;right:14px;width:280px;height:280px;
  color:#fff;opacity:.16;z-index:1;pointer-events:none;
}
.nest-web{width:100%;height:100%;display:block}
.nest::after{ /* to'rning devorga tutashgan ipi */
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(rgba(255,255,255,.5),transparent);
  transform:translateX(-50%);
}

/* ---------- o'rgimchak + ip ---------- */
.thread{
  position:fixed;top:0;left:0;width:1px;height:0;z-index:69;
  background:linear-gradient(to bottom,rgba(255,255,255,.15),rgba(255,255,255,.8));
  pointer-events:none;will-change:height,transform;
}
.spider{
  position:fixed;top:0;left:0;width:66px;height:66px;z-index:70;
  pointer-events:none;will-change:transform;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.28));
}
.spider-svg{width:100%;height:100%;display:block;transform-origin:50% 50%}
.spider.hidden{opacity:0}
/* oyoqlar: son va boldir alohida chiziladi (spider.js tizza nuqtasini hisoblaydi) */
.leg{fill:none;stroke:#fff;stroke-linecap:round}
.leg.femur{stroke-width:3.6}
.leg.tibia{stroke-width:2.7}
/* tana: boshko'krak + qorin (yuqoridan ko'rinish) */
.spider .seg{fill:#070707;stroke:#fff;stroke-width:3.2}
.spider .eyes circle{fill:#fff}
.spider .palps{stroke-width:2.2}
.spider .spinnerets{fill:none;stroke:#fff;stroke-width:2}
.spider.walking .body{animation:sway .46s infinite ease-in-out}
@keyframes sway{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(1.8px)}
}

/* ---------- yuguruvchi yozuvlar (ticker) ---------- */
.ticker{
  position:relative;z-index:20;overflow:hidden;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
}
.ticker-track{
  display:flex;align-items:center;gap:26px;width:max-content;
  padding:10px 0;animation:marquee 42s linear infinite;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--ink-2);
  white-space:nowrap;
}
.ticker-track span{color:var(--ink);opacity:.82}
.ticker-track i{font-style:normal;opacity:.32}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- yuqori panel ---------- */
.top{
  position:sticky;top:0;z-index:30;
  background:rgba(4,4,4,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:var(--sp-8);height:64px}
.brand{
  font:700 18px var(--font-display);letter-spacing:.16em;text-decoration:none;
  margin-right:auto;
}
.brand-dot{color:var(--ink-3)}
.nav{display:flex;gap:var(--sp-6)}
.nav a{
  font-size:13.5px;color:var(--ink-2);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.nav a:hover{color:var(--ink)}
.live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
.live b{color:var(--ink);font-weight:500}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  animation:ping 2.2s infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}
  70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}
}

/* ---------- hero ---------- */
.hero{padding:var(--sp-20) 0 var(--sp-12)}
.eyebrow{
  display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-6);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--ink-3);
  text-transform:uppercase;
}
.eyebrow .rot{
  color:var(--ink);padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;
  min-width:112px;text-align:center;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.eyebrow .rot.swap{transform:translateY(-8px);opacity:0}
.hero h1{
  font-size:clamp(36px,6.4vw,74px);line-height:1.04;letter-spacing:-.03em;
  margin:0 0 var(--sp-6);max-width:20ch;
}
.outline{color:var(--ink)}
@supports ((-webkit-text-stroke:1px #fff)){
  .outline{color:transparent;-webkit-text-stroke:1.6px #fff}
}
.sub{
  color:var(--ink-2);font-size:16.5px;line-height:1.7;max-width:60ch;margin:0 0 var(--sp-8);
}
.sub b{color:var(--ink);font-weight:600}
.sub.small{font-size:15px;margin-bottom:var(--sp-6)}
.cta{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ---------- tugmalar ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;
  border-radius:var(--radius);border:1px solid #fff;background:#fff;color:#050505;
  font:600 14.5px var(--font-body);text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.18)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:#fff;box-shadow:0 10px 30px rgba(255,255,255,.10)}
.btn.big{height:58px;padding:0 24px;font-size:15px}
.btn.big .mono{letter-spacing:.02em}

/* ---------- texnologiyalar (chiplar) ---------- */
.stack{padding:var(--sp-12) 0}
.stack h2,.contact h2{font-size:clamp(22px,2.4vw,32px);margin-bottom:var(--sp-6)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--ink-2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.chip:hover{transform:translateY(-2px);border-color:var(--line-2);color:var(--ink)}

/* ---------- aloqa ---------- */
.contact{padding:0 0 var(--sp-20)}
.contact-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ---------- pastki qism ---------- */
.foot{border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.foot-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding:22px 44px;color:var(--ink-3);font-size:12.5px;font-family:var(--font-mono);
}
.foot-in b{color:var(--ink);font-weight:500}
.foot-in .sep{opacity:.4}
.foot-in a{margin-left:auto;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-in a+a{margin-left:var(--sp-4)}
.foot-in a:hover{color:var(--ink);border-color:#fff}

/* ---------- kirish animatsiyasi ---------- */
.rise{animation:rise .7s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- moslashuvchanlik ---------- */
@media (max-width:900px){
  .nest{width:200px;height:200px;opacity:.12}
}
@media (max-width:760px){
  .wrap{padding:0 26px}
  .rail{width:2px}
  .top-in{gap:var(--sp-4);height:58px}
  .nav{display:none}
  .hero{padding:56px 0 36px}
  .hero h1{max-width:none}
  .spider{width:54px;height:54px}
  .foot-in{padding:20px 26px}
  .foot-in a{margin-left:0}
}
@media (max-width:420px){
  .btn{height:48px;padding:0 16px;font-size:13.5px;width:100%;justify-content:center}
  .btn.big{height:56px}
}

/* ---------- harakatni kamaytirish ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ticker-track{transform:none}
}