/* SpeakUp — umumiy uslublar */
:root{
  --navy:#0f172a; --navy2:#1e293b; --ink:#0f172a; --muted:#475569; --soft:#64748b;
  --line:#e2e8f0; --bg:#ffffff; --bg2:#f8fafc;
  --or:#ea580c; --or-text:#c2410c; --or-soft:#fff7ed; --or-line:#fed7aa; --or-light:#fdba74;
  --sky:#0369a1; --green:#15803d;
  --r:24px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:76px}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--or-text)} a:hover{color:#9a3412}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--or-text);text-transform:uppercase}
h1,h2,h3{margin:0;letter-spacing:-.035em}
h2{font-size:clamp(32px,4.4vw,44px);line-height:1.08;font-weight:900}
.lead{font-size:18px;line-height:1.6;color:var(--muted);margin:0}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:800;font-size:17px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:focus-visible{outline:3px solid var(--or-light);outline-offset:3px}
.btn-or{background:var(--or);color:#fff}.btn-or:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(234,88,12,.35)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.25)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid #cbd5e1}.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:su-shine 3.2s ease-in-out infinite}
.card{border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card.hov:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,.10);border-color:var(--or-light)}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:900;letter-spacing:.12em;padding:6px 12px;border-radius:999px;color:#fff;background:var(--or)}
.pill.navy{background:var(--navy)}

/* NAV */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:900;font-size:20px;letter-spacing:-.02em}
.logo:hover{color:var(--ink)}
.logo i{width:36px;height:36px;border-radius:10px;background:var(--navy);display:inline-flex;align-items:center;justify-content:center}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:15px;font-weight:600}
.nav-links a{color:#334155;text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn-or,.nav-links a.btn-navy,.nav-links a.btn-or:hover,.nav-links a.btn-navy:hover{color:#fff}
.nav-links .btn{min-height:44px;padding:0 20px;font-size:15px}
@media (max-width:760px){.nav-links a:not(.btn){display:none}}

/* ANIMATSIYALAR */
@keyframes su-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes su-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(1deg)}}
@keyframes su-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes su-spin{to{transform:rotate(360deg)}}
@keyframes su-pulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.35);opacity:0}}
@keyframes su-wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes su-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes su-shine{0%{left:-60%}60%,100%{left:130%}}
@keyframes su-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes su-blink{0%,100%{opacity:1}50%{opacity:.25}}
.up{animation:su-up .9s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}
.float{animation:su-float 6s ease-in-out infinite}
.float2{animation:su-float2 4.5s ease-in-out infinite}
.float3{animation:su-float2 5.5s ease-in-out .8s infinite}
.spin{animation:su-spin 26s linear infinite}.spinr{animation:su-spin 38s linear infinite reverse}
.pulse{animation:su-pulse 2.2s ease-out infinite}
.blink{animation:su-blink 1.2s ease-in-out infinite}
.bar{display:inline-block;width:4px;border-radius:4px;background:var(--or);transform-origin:center;animation:su-wave 1s ease-in-out infinite}
.track{display:flex;width:max-content;animation:su-marquee 32s linear infinite}
.fill{transform-origin:left;animation:su-fill 1.4s cubic-bezier(.2,.8,.2,1) both}
.rev{opacity:1}
.js .rev{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rev{opacity:1;transform:none}
}
