/* ==========================================================================
   BASE — reset, tipografika, umumiy util'lar (ikonka, glass, tugma, bo'lim)
   ========================================================================== */

/* ---------- Asos ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg0);
  color:var(--text);
  line-height:1.6;
  transition:background .35s ease,color .35s ease;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
::selection{background:rgba(124,92,255,.35)}

.container{max-width:1120px;margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}

/* Gradient matn urg'usi */
.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- Ikonka tizimi (inline SVG sprite, chiziqli uslub) ---------- */
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:inline-block}
.btn .icon{width:18px;height:18px}
/* Brend belgisi — gradient kvadratdagi "yuborish" ikonkasi */
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--grad);
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(124,92,255,.35);flex-shrink:0}
.logo-mark .icon{width:15px;height:15px;color:#fff;stroke-width:2.2}
.logo-mark.sm{width:23px;height:23px;border-radius:7px}
.logo-mark.sm .icon{width:12px;height:12px}

/* ---------- Aurora fon ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,var(--bg1) 0%,var(--bg0) 58%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(110px);opacity:var(--aurora-op);will-change:transform}
.aurora i:nth-child(1){width:560px;height:560px;left:-140px;top:-160px;
  background:radial-gradient(circle,#7c5cff 0%,transparent 65%);animation:drift1 34s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:520px;height:520px;right:-160px;top:60px;
  background:radial-gradient(circle,#c026d3 0%,transparent 65%);animation:drift2 42s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:600px;height:600px;left:32%;bottom:-280px;
  background:radial-gradient(circle,#2e6bff 0%,transparent 65%);animation:drift3 48s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(90px,70px) scale(1.12)}}
@keyframes drift2{to{transform:translate(-110px,90px) scale(1.08)}}
@keyframes drift3{to{transform:translate(70px,-90px) scale(1.15)}}

/* ---------- Tugmalar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  border-radius:14px;padding:13px 24px;font-size:.98rem;transition:transform .22s,box-shadow .22s,background .22s;
  position:relative;overflow:hidden;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 32px rgba(124,92,255,.38)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(192,38,211,.45)}
.btn-primary::after{ /* sheen — yaltirash effekti */
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after{left:130%}
.btn-ghost{background:var(--glass);border:1px solid var(--line);color:var(--text);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{transform:translateY(-2px);background:var(--highlight)}
.btn-sm{padding:9px 16px;font-size:.88rem;border-radius:12px}
.btn-lg{padding:16px 32px;font-size:1.08rem;border-radius:16px}

/* ---------- Shisha karta ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:22px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 var(--highlight),0 14px 44px rgba(0,0,0,.18);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
:root[data-theme="light"] .glass{box-shadow:inset 0 1px 0 var(--highlight),0 14px 40px rgba(60,40,120,.08)}
.glass.hoverable:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.35);
  box-shadow:inset 0 1px 0 var(--highlight),0 22px 56px rgba(124,92,255,.16)}

/* ---------- Bo'limlar ---------- */
section{padding:clamp(64px,9vw,110px) 0;position:relative}
.kicker{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:14px}
.sec-title{font-size:clamp(1.7rem,1.1rem + 2.6vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.18;margin-bottom:14px}
.sec-sub{color:var(--muted);font-size:1.05rem;max-width:620px}
.sec-head{max-width:760px;margin-bottom:clamp(34px,5vw,54px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .sec-sub{margin-inline:auto}

/* ---------- Skroll-reveal (JS yoqilganda) ---------- */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  html.js .reveal.in{opacity:1;transform:none}
}

/* ---------- Harakat kamaytirilgan rejim ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .bars b{transform:scaleY(1)}
  .toast{opacity:1;transform:none}
}