/* ===================================================================
   PRO TREYDER — landing styles (theme-driven)
   Har bir sayt faqat quyidagi THEME blokidagi ranglar bilan farq qiladi.
=================================================================== */

:root{
  /* ---- neutrals ---- */
  --bg-2:      #101216;
  --panel:     #14171c;
  --panel-2:   #1a1e24;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --text:      #f4f5f7;
  --muted:     #9aa0ab;
  --muted-2:   #6d727c;
  --tg:        #229ed2;
  --up:        #2ec785;
  --down:      #ff5a5f;

  /* ===== THEME:start (per-site) — SITE 3: binafsha / pro ===== */
  --accent:      #a855f7;
  --accent-2:    #7c3aed;
  --accent-lo:   #e9d5ff;
  --accent-rgb:  168,85,247;
  --accent-ink-1:#9333ea;
  --accent-ink-2:#6b21a8;
  --cta:         #db2777;
  --cta-2:       #ec4899;
  --cta-rgb:     219,39,119;
  --cta-glow-rgb:236,72,153;
  --bg-r1:       #1b1030;
  --bg-r2:       #120a1e;
  --bg-base:     #0a0611;
  /* ===== THEME:end ===== */

  --radius:    18px;
  --radius-sm: 12px;
  --wrap:      1080px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(130% 90% at 50% -12%, var(--bg-r1) 0%, var(--bg-r2) 42%, var(--bg-base) 100%),
    var(--bg-base);
  background-attachment:fixed;
  color:var(--text);
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
b{ font-weight:800; color:var(--text); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* ---------- background atmosphere ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:-4; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),.045) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 5%, #000 15%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 5%, #000 15%, transparent 78%);
}
.bg-glow{
  position:fixed; z-index:-3; pointer-events:none; border-radius:50%;
  filter:blur(100px); opacity:.55;
}
.bg-glow--gold{ top:-180px; left:50%; width:680px; height:460px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(var(--accent-rgb),.30), transparent 70%);
  animation:drift-gold 16s ease-in-out infinite; }
.bg-glow--red{ top:36%; right:-200px; width:460px; height:460px;
  background:radial-gradient(circle, rgba(var(--cta-rgb),.20), transparent 70%);
  animation:drift-red 20s ease-in-out infinite; }
@keyframes drift-gold{ 50%{ transform:translateX(-50%) translateY(26px) scale(1.08); } }
@keyframes drift-red{ 50%{ transform:translate(-40px,40px) scale(1.1); } }

/* upward trend chart baked into the backdrop */
.bg-chart{
  position:fixed; left:0; right:0; bottom:0; z-index:-3; pointer-events:none;
  width:100%; height:min(46vh, 440px); opacity:.5;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bg-chart__stop-a{ stop-color:var(--accent); }
.bg-chart__stop-b{ stop-color:var(--accent); }
.bg-chart__line{ stroke:var(--accent); filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.5)); }

/* fine film grain for depth */
.bg-noise{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.grad-gold{
  background:linear-gradient(180deg, var(--accent-lo) 0%, var(--accent) 42%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  font-size:12.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
.section__title{
  font-family:"Montserrat", sans-serif; font-weight:700;
  font-size:clamp(26px, 6vw, 40px); line-height:1.08; letter-spacing:-.01em;
  margin:0 0 28px;
}

/* ===================================================================
   HERO
=================================================================== */
.hero{ position:relative; padding:26px 0 40px; text-align:center; }

.hero__badges{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  max-width:440px; margin:6px auto 22px;
}
.badge{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:12px;
  padding:9px 6px; display:flex; flex-direction:column; gap:3px;
  backdrop-filter:blur(6px);
}
.badge__label{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.badge__value{ font-family:"Montserrat"; font-weight:700; font-size:15px; letter-spacing:.02em; }
.badge__value--gold{ color:var(--accent); }

/* brand pill (was the big PRO TREYDER title) */
.brand-chip{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Montserrat"; font-weight:800; font-size:22px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  padding:12px 34px; border-radius:999px; margin:6px 0 22px;
  border:1px solid rgba(var(--accent-rgb),.42);
  background:rgba(var(--accent-rgb),.10);
}

.hero__title{
  font-family:"Montserrat", sans-serif; font-weight:700;
  font-size:clamp(28px, 7.2vw, 50px); line-height:1.12; letter-spacing:-.01em;
  margin:2px auto 16px; max-width:660px; text-shadow:0 8px 40px rgba(0,0,0,.5);
}

.hero__sub{
  color:var(--muted); font-size:clamp(15px,4.2vw,19px); line-height:1.5;
  max-width:540px; margin:0 auto 26px;
}
.hero__sub b{ color:var(--text); }

.hero__cta{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:34px; }
.hero__seats{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.pulse{
  width:8px; height:8px; border-radius:50%; background:var(--cta-2);
  box-shadow:0 0 0 0 rgba(var(--cta-glow-rgb),.6); animation:pulse 1.8s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(var(--cta-glow-rgb),0);} 100%{box-shadow:0 0 0 0 rgba(var(--cta-glow-rgb),0);} }

.hero__photo{
  position:relative; margin:0 auto; max-width:520px;
  border-radius:24px; overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03);
  aspect-ratio:4/5;
}
.hero__photo-inner{
  position:absolute; inset:0;
  background-color:#1a1e24;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--accent-rgb),.16), transparent 55%),
    linear-gradient(180deg, #1c2128, #0d0f12);
}
.hero__photo-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero__photo-inner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(6,7,9,.85) 100%);
}
.hero__photo-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 20px; text-align:left;
  display:flex; flex-direction:column; gap:2px;
}
.hero__photo-cap .name{ font-family:"Montserrat"; font-weight:800; font-size:18px; }
.hero__photo-cap .role{ font-size:12.5px; color:var(--accent); }

/* ===================================================================
   BUTTONS
=================================================================== */
.btn{
  --pad-y:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Manrope"; font-weight:800; font-size:15px; letter-spacing:.04em;
  text-transform:uppercase; cursor:pointer; border:none;
  padding:var(--pad-y) 30px; border-radius:14px;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s;
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--lg{ --pad-y:17px; font-size:16px; padding-inline:38px; }
.btn--block{ width:100%; }

.btn--primary{
  color:#fff;
  background:linear-gradient(180deg, var(--cta-2), var(--cta));
  box-shadow:0 14px 30px -10px rgba(var(--cta-rgb),.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ box-shadow:0 18px 40px -10px rgba(var(--cta-rgb),.75); filter:brightness(1.05); transform:translateY(-2px); }

.btn--ghost{
  color:var(--text); background:transparent;
  border:1px solid var(--line-2);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

.btn--tg{
  color:#fff; background:linear-gradient(180deg,#33b0e6,var(--tg));
  box-shadow:0 12px 28px -10px rgba(34,158,210,.65);
}
.btn--tg:hover{ filter:brightness(1.06); transform:translateY(-2px); }

.btn__spin{
  width:18px; height:18px; border-radius:50%; display:none;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ pointer-events:none; opacity:.9; }
.btn.is-loading .btn__text{ opacity:.6; }
.btn.is-loading .btn__spin{ display:inline-block; }

/* ===================================================================
   STATS
=================================================================== */
.stats{ border-block:1px solid var(--line); background:rgba(255,255,255,.015); }
.stats__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px 0; padding-block:6px; }
.stat{ text-align:center; padding:20px 10px; position:relative; }
.stat__num{ display:block; font-family:"Montserrat"; font-weight:800;
  font-size:clamp(24px,7vw,34px); color:var(--accent); }
.stat__label{ font-size:12.5px; color:var(--muted); letter-spacing:.02em; }

/* ===================================================================
   SECTIONS / CARDS
=================================================================== */
.section{ padding:60px 0; }
.cards{ display:grid; grid-template-columns:1fr; gap:14px; }
.card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; transition:border-color .25s, transform .25s var(--ease);
}
.card:hover{ border-color:rgba(var(--accent-rgb),.35); transform:translateY(-3px); }
.card__ico{
  font-family:"Montserrat"; font-weight:900; font-size:16px;
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.25);
}
.card h3{ font-family:"Montserrat"; font-weight:800; font-size:19px; margin:0 0 8px; }
.card p{ color:var(--muted); font-size:14.5px; margin:0; }

/* ---------- WHY US ---------- */
.section--split{ background:
  radial-gradient(120% 60% at 100% 0%, rgba(var(--accent-rgb),.06), transparent 60%); }
.why{ display:grid; grid-template-columns:1fr; gap:30px; }
.checks{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:34px; color:var(--muted); font-size:15px; }
.checks li b{ color:var(--text); }
.checks li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  width:22px; height:22px; border-radius:7px; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  color:#0a0b0d; background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.why__panel{
  background:linear-gradient(180deg,var(--panel-2),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
}
.ticker{ display:grid; gap:2px; margin-bottom:18px; }
.ticker__row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.02);
  border:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.ticker__row span{ color:var(--muted); font-weight:600; font-size:14px; }
.ticker__row b{ font-family:"Montserrat"; font-weight:800; font-size:15px; }
.up{ color:var(--up); } .down{ color:var(--down); }
.why__quote{ color:var(--muted); font-size:15px; line-height:1.6; font-style:italic;
  border-left:3px solid var(--accent); padding-left:16px; }

/* ===================================================================
   LEAD FORM
=================================================================== */
.form-section{ padding:20px 0 80px; scroll-margin-top:14px; }
.lead-card{
  max-width:480px; margin-inline:auto;
  background:#fff; color:#0d0f12;
  border-radius:26px; padding:34px 26px 30px;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
}
.lead-card__title{
  font-family:"Montserrat"; font-weight:700; font-size:clamp(22px,5.6vw,27px);
  line-height:1.16; margin:0 0 12px; color:#111318; letter-spacing:-.01em;
}
.lead-card__title .grad-gold{
  background:linear-gradient(180deg,var(--accent-ink-1),var(--accent-ink-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead-card__sub{ color:#5c626c; font-size:14px; line-height:1.5; margin:0 0 22px; }

.field{ margin-bottom:16px; }
.field > label{ display:block; font-weight:700; font-size:13.5px; color:#2a2d33; margin-bottom:7px; }
.field input{
  width:100%; font-family:inherit; font-size:16px; color:#111318;
  padding:14px 15px; border-radius:12px;
  border:1.5px solid #e3e6ea; background:#f7f8fa;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder{ color:#9aa0aa; }
.field input:focus{
  outline:none; border-color:#111318; background:#fff;
  box-shadow:0 0 0 4px rgba(17,19,24,.06);
}
.field.is-invalid input{ border-color:var(--cta); background:#fff5f5; }
.field.is-invalid .phone{ border-color:var(--cta); background:#fff5f5; }
.field__err{ display:block; min-height:0; color:var(--cta); font-size:12.5px; font-weight:600;
  margin-top:6px; opacity:0; transform:translateY(-2px); transition:opacity .2s, transform .2s; }
.field.is-invalid .field__err{ opacity:1; transform:none; }

.phone{
  display:flex; align-items:stretch; gap:0; overflow:hidden;
  border:1.5px solid #e3e6ea; border-radius:12px; background:#f7f8fa;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.phone:focus-within{ border-color:#111318; background:#fff; box-shadow:0 0 0 4px rgba(17,19,24,.06); }
.phone__flag{
  display:flex; align-items:center; gap:6px; padding:0 12px;
  font-weight:700; font-size:15px; color:#111318; white-space:nowrap;
  border-right:1.5px solid #e3e6ea; background:#eef0f3;
}
.phone input{ border:none; background:transparent; box-shadow:none !important; border-radius:0; }
.phone input:focus{ box-shadow:none; }

.lead-card .btn--primary{ margin-top:8px; }
.lead-card__note{ text-align:center; color:#9aa0aa; font-size:12px; margin:14px 0 0; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ===================================================================
   SUCCESS MODAL
=================================================================== */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(6,7,9,.72); backdrop-filter:blur(6px);
}
.modal.is-open{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; } }
.modal__box{
  background:linear-gradient(180deg,var(--panel-2),var(--bg-2));
  border:1px solid var(--line-2); border-radius:24px;
  padding:34px 26px 26px; max-width:400px; width:100%; text-align:center;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.9);
  animation:pop .35s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.96); } }
.modal__check{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:32px; color:#0a0b0d;
  background:linear-gradient(180deg,var(--up),#1ea36a);
  box-shadow:0 12px 30px -8px rgba(46,199,133,.6);
}
.modal__box h3{ font-family:"Montserrat"; font-weight:800; font-size:22px; margin:0 0 10px; }
.modal__box p{ color:var(--muted); font-size:14.5px; margin:0 0 22px; }
.modal__close{
  margin-top:14px; background:none; border:none; color:var(--muted-2);
  font-family:inherit; font-size:13px; cursor:pointer; text-decoration:underline;
}

/* ===================================================================
   FOOTER + STICKY CTA
=================================================================== */
.footer{ border-top:1px solid var(--line); padding:40px 0 96px; }
.footer__inner{ text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.footer__brand{ font-family:"Montserrat"; font-weight:900; font-size:20px; letter-spacing:.04em; }
.footer__tg{ color:var(--accent); font-weight:700; font-size:14px; }
.footer__legal{ color:var(--muted-2); font-size:12px; margin:6px 0 0; }

.sticky-cta{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:16px; border-radius:14px; font-family:"Montserrat"; font-weight:800;
  letter-spacing:.04em; color:#fff;
  background:linear-gradient(180deg,var(--cta-2),var(--cta));
  box-shadow:0 16px 34px -10px rgba(var(--cta-rgb),.7), inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(150%); transition:transform .35s var(--ease);
}
.sticky-cta.is-visible{ transform:translateY(0); }

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (min-width:600px){
  .stats__grid{ grid-template-columns:repeat(4,1fr); }
  .stat + .stat::before{ content:""; position:absolute; left:0; top:22%; bottom:22%;
    width:1px; background:var(--line); }
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .hero{ padding-top:40px; }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .why{ grid-template-columns:1.1fr .9fr; align-items:center; }
  .sticky-cta{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* footer social links */
.footer__socials{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:6px 0 2px; }
.social{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  font-size:13.5px; font-weight:700; color:var(--text); border:1px solid var(--line-2);
  background:rgba(255,255,255,.02); transition:border-color .2s, color .2s, transform .2s, background .2s; }
.social svg{ width:18px; height:18px; flex:none; }
.social:hover{ border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb),.08); transform:translateY(-2px); }

/* hero social links (rasm ostida) */
.hero__socials{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:22px auto 0; }