/* sundorai.com look on every page: black stage, white type, Archivo caps headings, glass cards, chrome 3D
   renders and white pill buttons. Loaded after style.css; removing this file brings back the light design. */
:root, body[data-page="shopify"] {
  --paper: rgba(255, 255, 255, .06);
  --sand: rgba(255, 255, 255, .04);
  --sand-2: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --line-hover: rgba(255, 255, 255, .34);
  --ink: #FFFFFF;
  --ink-2: rgba(255, 255, 255, .74);
  --ink-3: rgba(255, 255, 255, .52);
  --night: rgba(255, 255, 255, .09);
  --night-2: rgba(255, 255, 255, .08);
  --night-line: rgba(255, 255, 255, .12);
  --warm: #111111;
  --warm-2: #0B0B0B;
  --on-night: #FFFFFF;
  --on-night-2: rgba(255, 255, 255, .6);

  --accent: #FFFFFF;
  --accent-ink: #FFFFFF;
  --accent-mark: rgba(255, 255, 255, .16);
  --accent-soft: rgba(255, 255, 255, .08);
  --accent-shadow: rgba(255, 255, 255, .18);
  --accent-night: #FFFFFF;
  --gold: #FFD700;

  --ok: #5EE38C;
  --ok-2: #4ADE80;
  --ok-soft: rgba(74, 222, 128, .12);
  --warn: #FBBF24;
  --warn-soft: rgba(251, 191, 36, .12);
  --bad: #F87171;
  --bad-soft: rgba(248, 113, 113, .12);

  --f-display: "Archivo", system-ui, -apple-system, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .4);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, .12);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .022));
  --glass-hi: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045));
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

/* graphite rather than pure black, lit by faint brand-coloured glows (Shopify green, TikTok cyan, violet) */
:root { --bg: #121317; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); letter-spacing: .005em; font-feature-settings: "ss01", "cv01"; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 620px at 50% -12%, rgba(255, 255, 255, .08), transparent 62%),
              radial-gradient(820px 620px at 100% 16%, rgba(124, 108, 255, .09), transparent 60%),
              radial-gradient(780px 580px at 0% 58%, rgba(149, 191, 71, .07), transparent 60%),
              radial-gradient(900px 660px at 100% 100%, rgba(37, 244, 238, .06), transparent 60%),
              linear-gradient(180deg, #17181D 0%, #121317 45%, #0F1013 100%);
}
/* fine film grain over everything, so the large dark areas don't look flat */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: #FFFFFF; color: #000000; }
:focus-visible { outline-color: #FFFFFF; }

/* drifting coloured fog (the sundorai.com blobs, tinted) */
.fog { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fog i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; }
.fog i:nth-child(1) { width: 460px; height: 240px; top: 4%; left: -2%; background: rgba(124, 108, 255, .35); }
.fog i:nth-child(2) { width: 360px; height: 200px; top: 30%; right: 2%; background: rgba(37, 244, 238, .22); }
.fog i:nth-child(3) { width: 520px; height: 260px; top: 56%; left: 12%; background: rgba(149, 191, 71, .24); }
.fog i:nth-child(4) { width: 400px; height: 200px; top: 80%; right: 10%; background: rgba(255, 255, 255, .16); }
@media (prefers-reduced-motion: no-preference) {
  .fog i:nth-child(1) { animation: drift1 18s ease-in-out infinite; }
  .fog i:nth-child(2) { animation: drift2 22s ease-in-out infinite 2s; }
  .fog i:nth-child(3) { animation: drift1 25s ease-in-out infinite 4s; }
  .fog i:nth-child(4) { animation: drift2 19s ease-in-out infinite 1s; }
  @keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(60px, -40px) scale(1.12); } 50% { transform: translate(-30px, 50px) scale(.92); } 75% { transform: translate(40px, 30px) scale(1.06); } }
  @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-50px, 35px) scale(.94); } 50% { transform: translate(40px, -45px) scale(1.1); } 75% { transform: translate(-35px, -25px) scale(1); } }
}
@media (max-width: 700px) { .fog i:nth-child(n+3) { display: none; } .fog i { opacity: .24; } body::after { display: none; } }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); }
/* sizes and sentence case stay as in style.css; only the heavier Archivo weight comes from sundorai.com */
.display { font-weight: 800; letter-spacing: -0.025em; }
.h2, .sec-head .h2, .faq-side .h2, .final-cta .h2, .countdown .h2, .soc-card .h2 { font-weight: 800; letter-spacing: -0.03em; }
.h3, .card h3, .tt-card h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; }
.lead { color: var(--ink-2); }
.sec-head .lead { color: var(--ink-3); max-width: 46ch; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.55; }
mark.hl { color: transparent; background: linear-gradient(100deg, #FFFFFF 0%, #BDBDBD 38%, #FFFFFF 55%, #8E8E8E 100%); -webkit-background-clip: text; background-clip: text; }
mark.hl::after { background: rgba(255, 255, 255, .12); height: .12em; bottom: .02em; }
.word-u { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 50 1 100 4 T 198 3' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E"); }
.eyebrow, .eyebrow-line, .faq-side .eyebrow, .author-body .eyebrow, .soc-card .eyebrow, .lead-box .side .eyebrow, .menu-head .eyebrow {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--ink-3);
  border-radius: var(--pill); padding: 6px 13px; font: 700 10.5px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow-ok { background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .25); color: var(--ok-2); }
.band-dark .eyebrow { background: rgba(255, 255, 255, .05); }
.muted, .card-night .muted, .card-night p { color: var(--ink-2); }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; }
.btn::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s var(--ease); }
.btn:hover::before { left: 140%; }
.btn-accent { background: #FFFFFF; color: #000000; box-shadow: 0 10px 30px -12px rgba(255, 255, 255, .35); }
.btn-accent::before { background: linear-gradient(100deg, transparent, rgba(0, 0, 0, .12), transparent); }
.btn-accent:hover { filter: none; background: #EDEDED; box-shadow: 0 14px 34px -12px rgba(255, 255, 255, .45); }
.btn-arrow i { background: #000000; color: #FFFFFF; }
.btn-ink, .btn-ghost, .btn-outline-night, .more-btn {
  background: rgba(255, 255, 255, .08); color: #FFFFFF; border: 1px solid var(--line-2);
  box-shadow: var(--inset-top); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.btn-ink:hover, .btn-ghost:hover, .btn-outline-night:hover, .more-btn:hover { background: rgba(255, 255, 255, .16); border-color: var(--line-hover); }
.btn-ink.btn-arrow i, .more-btn i { background: #FFFFFF; color: #000000; }
.btn-text { color: #FFFFFF; }
.link { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .35); }
.link-under { text-decoration-color: rgba(255, 255, 255, .35); }
.stat-btn { background: #FFFFFF; color: #000000; }

/* ---------- top bar (SA logo), MENYU button, the TikTok page's in-page bar: layout as in style.css ---------- */
.menu-btn { background: #FFFFFF; background-image: none; color: #000000; box-shadow: 0 10px 28px -12px rgba(255, 255, 255, .4); }
.pillnav {
  /* darker than sundorai.com's .05 so the white links stay readable over light photos and screenshots */
  background: rgba(14, 14, 15, .62); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.pillnav-logo { color: #FFFFFF; transition: color .4s var(--ease); }
.pillnav-links a { color: #FFFFFF; transition: color .4s var(--ease), opacity .25s; }
.pillnav-links a:hover { color: #FFFFFF; opacity: .85; }
.pillnav-cta { background: #FFFFFF; color: #000000; transition: transform .3s var(--ease), background .4s var(--ease), color .4s var(--ease); }
/* while the white video stage is on screen the bar is light, like on sundorai.com */
.on-light .pillnav { background: rgba(255, 255, 255, .7); border-color: rgba(0, 0, 0, .1); box-shadow: 0 8px 32px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .3); }
.on-light .pillnav-logo, .on-light .pillnav-links a { color: #000000; }
.on-light .pillnav-cta { background: #000000; color: #FFFFFF; }

.menu-overlay { background: rgba(0, 0, 0, .6); }
.menu { background: #16171B; border-color: var(--line-2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), var(--inset-top); }
.menu-close { background: #FFFFFF; color: #000000; }
.menu-list a:hover, .menu-list a[aria-current="page"] { background: rgba(255, 255, 255, .06); }
.mi-text b { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.menu-foot { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.soc-wh, .soc-tt { background: #222224; }

/* ---------- surfaces ---------- */
.card, .card-white, .tt-card, .tt-stat, .review, .steps li, .faq-panel, .author, .lead-box, .footer-panel, .feat, .pick, .mod-btn, .dir-small, .tile, .social-card, .pc, .fact, .res-stats div, .proof, .ach li, .nf-links a, .included, .pay-chips span, .pay-notes > span, .term {
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-soft), var(--inset-top);
}
.card:hover, .tt-card:hover, .tile:hover, .social-card:hover, .dir-small:hover, .pick:hover {
  border-color: var(--line-hover); background: var(--glass-hi);
}
.card-night, .tt-card.card-night { background: var(--glass-hi); border: 1px solid var(--line-2); color: #FFFFFF; }
.sand-band, .band-sand, .hero-warm { background: transparent; }
.sand-band .card:not(.card-night), .band-sand .card:not(.card-night), .sand-band .steps li, .band-sand .pick, .sand-band .faq details { background: var(--glass); }
.band-dark { background: radial-gradient(70% 60% at 85% 100%, rgba(255, 255, 255, .05), transparent 70%), transparent; }
.hero-glow::before { background: radial-gradient(45% 60% at 50% 30%, rgba(255, 255, 255, .07), transparent 70%); }
.ico, .tile-top .ico, .feat .ico, .proof .ico, .card-night .ico {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid var(--line); color: #FFFFFF; box-shadow: var(--inset-top);
}
.proof .ico.dark { background: #FFFFFF; color: #000000; }
.emo, body[data-page="shopify"] .emo { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid var(--line); box-shadow: var(--inset-top); }
body[data-page="shopify"] .tt-card:hover .emo { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); }
body[data-page="shopify"] .tt-card { border-top: 1px solid var(--line); }
body[data-page="shopify"] .tt-card:hover { border-top-color: var(--line-hover); }
.tt-num { color: #FFFFFF; opacity: .07; font-weight: 900; }
.tt-card h3, .steps b, .tt-card .h3 { font-weight: 700; letter-spacing: -0.01em; }
.tt-tag, .tt-card:hover .tt-tag { background: rgba(255, 255, 255, .08); border-color: var(--line-2); color: var(--ink-2); }
.tt-tag::before { color: #FFFFFF; }
.check-list li::before { background: rgba(255, 255, 255, .1); color: #FFFFFF; border: 1px solid var(--line-2); }
.card-night .check-list li::before, .on-night .check-list li::before, .who-card .check-list li::before, .card-night.who-card .check-list li::before { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.who-card h3, .card-night.who-card h3 { color: #FFFFFF; font-weight: 700; letter-spacing: -0.02em; }
.x-list li::before { background: rgba(248, 113, 113, .12); color: var(--bad); }
.steps li::before, .sand-band .steps li::before, .band-sand .steps li::before, .step-n {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border: 1px solid var(--line-2); color: #FFFFFF; border-radius: 12px; font-family: var(--f-display); font-weight: 800;
}
.card-night .step-n, .band-dark .flow .card.is-on .step-n { background: #FFFFFF; color: #000000; }
.flow .card-night, .paths .card-night, .bento .tall { background: var(--glass-hi); }

/* ---------- hero (home) ---------- */
.badges { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.badge.on { background: #FFFFFF; color: #000000; }
.badge.on small { color: rgba(0, 0, 0, .6); }
.stats { border-color: var(--line); }
.stat b, .tt-stat b, .fact b, .res-stats b, .facts-strip b { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.03em; }
.tt-stat small { color: var(--ink-3); }
.avatars span { border-color: var(--bg); overflow: hidden; }
.avatars span img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-photo { box-shadow: 0 30px 70px rgba(0, 0, 0, .6); border: 1px solid var(--line); }
.portrait-photo img { filter: grayscale(.15) contrast(1.04); }
@media (prefers-reduced-motion: no-preference) { .portrait-photo { animation: photoFloat 6s ease-in-out infinite; } @keyframes photoFloat { 50% { transform: translateY(-14px); } } }
.float-card { background: rgba(14, 14, 15, .82); border: 1px solid var(--line-2); box-shadow: 0 20px 40px rgba(0, 0, 0, .55), var(--inset-top); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #FFFFFF; }
/* "500+ o'quvchi" sits low on the photo, clear of the face */
.float-rating { top: auto; bottom: 172px; right: auto; left: -30px; }
@media (max-width: 600px) { .float-rating { bottom: 150px; left: -6px; } }
.float-rating .stars, .rv-stars { color: var(--gold); }
.float-quote p { color: var(--ink-2); }
.mini-socials a, .mini-socials span, .round-soc { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: #FFFFFF; }
.ticker { border-color: var(--line); background: rgba(255, 255, 255, .025); }
.tick { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.tick em, .float-res b { color: var(--ok-2); }

/* TikTok page video stage: same rounded card as before, darkened at the foot for the white scroll hint */
.tt-stage { background: #EDEDED; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.tt-stage::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(5, 5, 5, .55) 100%); }
.tt-words span { font-weight: 900; color: #000000; }
.scroll-ind { color: rgba(255, 255, 255, .85); }
.scroll-ind i { background: linear-gradient(rgba(255, 255, 255, .9), transparent); }

/* ---------- 3D renders & marquees ---------- */
.float3d { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); opacity: .95; }
img.float3d[src*="star"], img.float3d[src*="chrome"] { mix-blend-mode: screen; opacity: .55; filter: brightness(1.6) drop-shadow(0 0 20px rgba(255, 255, 255, .25)); }
img.float3d[src*="3d-"] { opacity: .9; width: clamp(130px, 14vw, 210px); }
.bag-sticker { width: clamp(104px, 11vw, 150px); filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); right: -38px; top: -62px; }
@media (max-width: 860px) {
  .hero-visual:has(> .bag-sticker) { margin-top: 48px; }
  .bag-sticker { right: 10px; top: -38px; width: 60px; }
}
.marquee, .mq-green, .mq-light { background: rgba(255, 255, 255, .03); border-color: var(--line); }
.marquee-text, .mq-green .marquee-text, .mq-light .marquee-text { color: var(--ink-2); font-weight: 700; letter-spacing: 3px; }
.marquee-text img { width: 30px; height: 30px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }

/* ---------- mocks (dashboards, players, receipts) ---------- */
.mock, .dash, .lesson, .hm-player, .pay-list, .tx div, .order-toast, .receipt, .mini-products div, .chat span, .cbars, .brand-demo, .setup li, .mrow, .bals span, .store-item, .store-trust div, .store-banner, .kpi, .channels, .chart, .dash-kpis div {
  background: rgba(255, 255, 255, .045); border-color: var(--line);
}
.mock { background: #0D0D0E; border: 1px solid var(--line-2); box-shadow: 0 30px 70px rgba(0, 0, 0, .6), var(--inset-top); }
.mock-bar { border-color: var(--line); background: rgba(255, 255, 255, .03); }
.url { background: rgba(255, 255, 255, .07); color: var(--ink-2); }
.dots i { opacity: .9; }
.dash, .lesson, .hm-player, .pay-list { background: #0F0F10; border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.admin-side { border-color: var(--line); }
.admin-side span.on { background: rgba(255, 255, 255, .08); }
.admin-side .shop i { background: #95BF47; }
.ch i, .prog, .sp-bar, .cbars i { background: rgba(255, 255, 255, .08); }
.ch i::after { background: #FFFFFF; }
.prog i, .hm-player .prog i { background: #FFFFFF; }
.lesson-items div.on, .hm-player .lesson-items div.on { background: rgba(255, 255, 255, .08); }
.lesson-items div.done i, .hm-player .lesson-items div.done i { background: #FFFFFF; border-color: #FFFFFF; }
.lesson-items i { border-color: rgba(255, 255, 255, .3); }
.hp-video { background: radial-gradient(60% 120% at 85% 30%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(135deg, #18181A, #0C0C0D); border: 1px solid var(--line); }
.hp-video .hp-play { background: #FFFFFF; box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); }
.hp-video .hp-play::after { border-color: transparent transparent transparent #000000; }
.pay-card { background: linear-gradient(135deg, #2A2A2D, #121214); border: 1px solid var(--line-2); }
.dash-legend i { background: #FFFFFF; }
.dash-legend i.prev { background: rgba(255, 255, 255, .3); }
.chart svg path[stroke="#C9C5BC"] { stroke: rgba(255, 255, 255, .25); }
.chart .line-now, .chart svg path.line-now { stroke: #FFFFFF; }
.owner { background: rgba(74, 222, 128, .1); }
.studio-panel { background: #0B0B0C; border-left: 1px solid var(--line); }
.sp-bar { background: rgba(255, 255, 255, .1); }
.sp-steps li::before { border-color: rgba(255, 255, 255, .25); }
.sp-steps li.now { background: rgba(255, 255, 255, .08); }
.sp-steps li.done::before { color: #000000; }
.sp-tags span { background: rgba(255, 255, 255, .08); }
.sp-rev { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.store-banner .bn span { color: #000000; }
.phone-screen { background: linear-gradient(170deg, #2A2A2D 0%, #151517 55%, #0A0A0B 100%); }
.card-night .receipt { background: rgba(255, 255, 255, .06); }
.card-night .receipt .sum { border-color: rgba(255, 255, 255, .14); }
.lead-box .side { background: transparent; }
.tt-calc { background-image: radial-gradient(60% 120% at 90% 100%, rgba(255, 255, 255, .08), transparent 60%); }
.band-dark .pill-warn { background: rgba(251, 191, 36, .12); color: var(--warn); }
html.draft .ph { outline-color: rgba(251, 191, 36, .8); }
.order-toast { background: rgba(14, 14, 15, .9); border: 1px solid var(--line-2); box-shadow: 0 20px 40px rgba(0, 0, 0, .55); color: #FFFFFF; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.order-toast .shop-ic, .order-toast .flag { background: rgba(255, 255, 255, .1); }
.online-pill { background: rgba(74, 222, 128, .12); }
.ph-cart { background: rgba(20, 20, 22, .94); color: #FFFFFF; border: 1px solid var(--line-2); }
.ph-cart span { background: #FFFFFF; color: #000000; }
.pl-side { background: rgba(255, 255, 255, .03); border-right: 1px solid var(--line); }
.pl-course .logo-sq, .player .mod-btn .n { background: rgba(255, 255, 255, .08); }
.player .mod-btn:hover { background: rgba(255, 255, 255, .05); }
.player .mod-btn[aria-selected="true"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.player .mod-btn[aria-selected="true"] .n { background: #FFFFFF; color: #000000; }
.pl-stage span { background: #FFFFFF; color: #000000; }
.pl-video, body:not([data-page="shopify"]) .pl-video { background: radial-gradient(60% 120% at 70% 30%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(135deg, #18181A, #0B0B0C); border: 1px solid var(--line); }
.pl-video, body[data-page="shopify"] .pl-video { --pl-play: #FFFFFF; }
.pl-video::after { border-color: transparent transparent transparent #000000; }
.pl-lessons { border-color: var(--line); }
.pl-lessons-head { background: rgba(255, 255, 255, .04); }
.pl-chips span { background: rgba(255, 255, 255, .07); }
.pl-chips .free { background: rgba(74, 222, 128, .12); color: var(--ok-2); }
.pl-prev { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.pl-next { background: #FFFFFF; color: #000000; }
.player .mock-bar .hint { background: rgba(255, 255, 255, .08); color: var(--ink-2); }
.lessons, .lessons li { border-color: var(--line); }
.lessons li::before { color: var(--ink-3); }
.mod-btn[aria-selected="true"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.mod-btn:hover { border-color: var(--line-2); }

/* ---------- results, reviews ---------- */
.result.has-stat { border-color: var(--line-2); }
.money-card, .result .money-card.gold { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.result .money-card.gold small:first-child { color: var(--ink-2); }
.money-card .money { font: 900 30px/1.05 var(--f-display); letter-spacing: -0.03em; color: #FFFFFF; }
.result .days { background: rgba(74, 222, 128, .12); color: var(--ok-2); }
.result .who i.photo, .rv-av { background: #1A1A1C; border: 1px solid var(--line-2); }
.result .who i.shop-logo { background: rgba(149, 191, 71, .14); color: #95BF47; border: 1px solid rgba(149, 191, 71, .3); }
.result .who i.tt-logo { background: #FFFFFF; color: #000000; }
.result .tags span { background: rgba(255, 255, 255, .05); border-color: var(--line); }
.result .steps-line span { background: rgba(74, 222, 128, .1); color: var(--ok-2); }
.stat-thumb { background: #0F0F10; border-color: var(--line-2); }
.stat-thumb::after { background: rgba(0, 0, 0, .8); }
.stat-thumb .n-shots { background: #FFFFFF; color: #000000; }
.result-foot { border-color: var(--line); }
.res-tabs { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.res-tabs button[aria-pressed="true"] { background: #FFFFFF; color: #000000; }
.res-group-h { font-weight: 700; letter-spacing: -0.02em; }
.stat-modal { background: #0D0D0E; color: #FFFFFF; border: 1px solid var(--line-2); }
.stat-modal .lm-close { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.stat-modal img { background: #000000; border-color: var(--line); }
.stat-modal .sm-dots i.on { background: #FFFFFF; }
.rv-btn { background: rgba(255, 255, 255, .06); border-color: var(--line-2); color: #FFFFFF; }
.rv-btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--line-hover); }
.rv-dots button, .rv-dots button::after { background: rgba(255, 255, 255, .25); }
.rv-dots button[aria-current="true"], .rv-dots button[aria-current="true"]::after { background: #FFFFFF; }
.review q { color: var(--ink-2); font-style: italic; }
.rv-money { background: rgba(255, 255, 255, .06); }

/* ---------- pricing ---------- */
.plans .plan { background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-soft), var(--inset-top); }
.plans .plan:hover { border-color: var(--line-hover); box-shadow: var(--shadow), var(--inset-top); }
.plan-name h3 { color: var(--ink-2); }
.plan-name h3::before, .plans .plan.card-night .plan-name h3::before { background: #FFFFFF; box-shadow: none; }
.plan-name p { color: var(--ink-3); font-size: 14px; }
.price { background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; margin-inline: 0; padding: 4px 0 18px; }
.price b { font-weight: 900; font-size: clamp(40px, 3.6vw, 52px); }
.feats li { border-color: var(--line); }
.feats li span:first-child { color: var(--ink-2); }
.feats li.no span:first-child { color: rgba(255, 255, 255, .3); text-decoration: none; }
.yes { background: transparent; color: #FFFFFF; border: 0; font-size: 15px; }
.nope { background: transparent; color: rgba(255, 255, 255, .3); border: 0; font-size: 14px; }
.plans .plan.card-night { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045)); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 40px 80px rgba(0, 0, 0, .6), var(--inset-top); }
.plans .plan.card-night .plan-name h3, .plans .plan.card-night .plan-name p { color: #FFFFFF; }
.plans .plan.card-night .price { background: transparent; }
.plans .plan.card-night .yes { background: transparent; color: #FFFFFF; }
.plans .plan.card-night::after { background: conic-gradient(from var(--edge), transparent 0 55%, rgba(255, 255, 255, .8) 72%, transparent 88%); }
.ribbon, .pill-accent { background: #FFFFFF; color: #000000; box-shadow: 0 6px 18px rgba(255, 255, 255, .2); font: 800 10.5px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; }
.ribbon::before { color: #000000; }
.plan .btn { border-radius: 14px; }
.plans { position: relative; }
.plans::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -46px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 120, .55) 20%, rgba(255, 255, 255, .9) 50%, rgba(120, 170, 255, .55) 80%, transparent);
  filter: blur(.5px); box-shadow: 0 0 24px 4px rgba(255, 255, 255, .18); }
.plans-note, .disclaimer, .example-note { color: var(--ink-3); }
.plans.b-blue, .plans .plan.b-blue, .plans .plan.b-green, .plans .plan.b-gold { border-width: 1px; }
.plans .plan.b-blue { border-color: rgba(99, 91, 255, .55); }
.plans .plan.b-green { border-color: rgba(149, 191, 71, .55); }
.plans .plan.b-gold { border-color: rgba(255, 215, 0, .5); }
.plan-wide { background: var(--glass-hi); border: 1px solid var(--line-2); }

/* ---------- payments page: brand photos behind the Stripe / Shopify Payments cards ---------- */
.adv .t-blue { color: #8C86FF; }
.adv .t-green { color: #95BF47; }
.adv .t-gold { color: var(--gold); }
.adv .t-pink { color: #FF7DA8; }
.adv h3 { font-weight: 800; letter-spacing: -0.02em; }
.adv .lead-in { color: #FFFFFF; }
/* the photo fills the top of the card at its own proportions and fades into the card; the text starts under it */
.pay-bg { position: relative; isolation: isolate; overflow: hidden; }
.pay-bg::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; aspect-ratio: var(--pay-ar);
  background: center / cover no-repeat; transform-origin: 50% 30%; transition: transform 1.2s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.pay-bg:hover::before { transform: scale(1.04); }
.pay-bg-stripe { --pay-ar: 2 / 1; padding-top: calc(50% - 24px); border-color: rgba(99, 91, 255, .45); box-shadow: 0 30px 70px -24px rgba(99, 91, 255, .3), var(--inset-top); }
.pay-bg-stripe::before { background-image: url("media/pay-stripe.jpg"); }
.pay-bg-shopify { --pay-ar: 544 / 341; padding-top: calc(49% + 48px); border-color: rgba(149, 191, 71, .5); box-shadow: 0 30px 70px -24px rgba(149, 191, 71, .28), var(--inset-top); }
.pay-bg-shopify::before { background-image: url("media/shopify-visa-card.png"); background-size: contain; top: 24px; left: 11%; right: 11%; border-radius: 16px; -webkit-mask-image: none; mask-image: none; box-shadow: 0 22px 40px -16px rgba(149, 191, 71, .55), 0 10px 24px rgba(0, 0, 0, .5); }
.pay-bg-shopify:hover::before { transform: translateY(-3px); }
.pay-bg .pill-soft { background: rgba(255, 255, 255, .14); color: #FFFFFF; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.facts-mini .fact { background: rgba(255, 255, 255, .05); }
.tx-row { border-color: var(--line); }
.tx-row .st { background: rgba(74, 222, 128, .12); }
.term > b { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.pay-chips i { background: rgba(255, 255, 255, .1); }
.flag-chips span, .mini-link { background: rgba(255, 255, 255, .05); border-color: var(--line-2); }

/* ---------- misc blocks ---------- */
.vs { background: #0D0D0E; border-color: var(--line-2); color: var(--ink-2); }
.timeline li::before, .tl li::before { background: #0D0D0E; border-color: var(--line-2); color: #FFFFFF; }
.timeline li::after { border-left-color: rgba(255, 255, 255, .2); }
.card-night .timeline li::before { background: rgba(255, 255, 255, .06); border-color: var(--line-2); color: #FFFFFF; }
.card-night .timeline li:last-child::before { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.card-night .timeline li::after, .tl::before { border-left-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .3); }
.path-top .big, .card-night .path-top .big { color: #FFFFFF; font-weight: 900; }
.pick::after { background: transparent; border-color: var(--line-2); }
.pick[aria-pressed="true"] { border-color: rgba(255, 255, 255, .6); background: var(--glass-hi); }
.pick[aria-pressed="true"]::after { background: #FFFFFF; border-color: #FFFFFF; color: #000000; }
.pick-bar { border-color: var(--line-2); }
.pick-dots i.on { background: #FFFFFF; }
.brand-swatch { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.bx-brand { background: var(--glass-hi) !important; }
.chips span { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.chips span.on, .niche-chips span.on { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.niche-chips span { background: rgba(255, 255, 255, .06); }
.niche-chips span.on::before { color: #000000; }
.chat span { background: rgba(255, 255, 255, .08); }
.mini-phone { background: #0D0D0E; border-color: rgba(255, 255, 255, .5); }
.pc-vis { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.pc-dark .pc-vis { background: linear-gradient(150deg, #18181A, #0B0B0C); }
.pc > small { color: var(--ink-3); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.handover .key { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.cbars i::after { background: linear-gradient(90deg, rgba(255, 255, 255, .4), #FFFFFF); }
.band-dark .flow .card { background: var(--glass); border-color: var(--line); }
.band-dark .flow .card.is-on { border-color: rgba(255, 255, 255, .55); background: var(--glass-hi); box-shadow: 0 30px 60px -30px rgba(255, 255, 255, .25); }
.band-dark .flow .card.card-night { background: var(--glass-hi); }
.band-dark .receipt .sum span, .band-dark .receipt .sum b, .card-night .receipt .sum span, .card-night .receipt .sum b { color: #FFFFFF; }
@media (min-width: 1021px) { .flow .card:not(:last-child)::after { border-color: rgba(255, 255, 255, .5); } }
.tt-calc { background: var(--glass); border: 1px solid var(--line-2); box-shadow: var(--shadow), var(--inset-top); }
.tt-calc .ci.lg b, .tt-calc .ci.xl b { color: #FFFFFF; }
.tt-calc .ci b { font-weight: 900; }
.slide-lines span { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; }
.slide-lines span:last-child, body[data-page="shopify"] .slide-lines span:last-child, body[data-page="shopify"] .tt-say mark { color: rgba(255, 255, 255, .55); }
.tt-say { font-weight: 800; }
.role-pill { background: #FFFFFF; color: #000000; }
.ach li::before { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.author-photo .tag, .photo-ph .tag { background: rgba(10, 10, 10, .82); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.author-photo .tag b, .photo-ph .tag b { color: #FFFFFF; }
.author-quote { background: rgba(255, 255, 255, .05); border-left-color: #FFFFFF; }
.countdown { background: radial-gradient(60% 100% at 85% 70%, rgba(255, 255, 255, .08), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--line-2); }
.countdown .pill-ok { background: #FFFFFF; color: #000000; }
.cd-units b { font-family: var(--f-display); font-weight: 900; }
.final-cta { background: radial-gradient(70% 120% at 100% 0%, rgba(255, 255, 255, .1), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid var(--line-2); box-shadow: var(--shadow), var(--inset-top); }
.final-cta p { color: var(--ink-2); }
.pill-ok { background: rgba(74, 222, 128, .12); color: var(--ok-2); }
.pill-warn { background: rgba(251, 191, 36, .12); color: var(--warn); }
.pill-soft { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.pill-ink { background: #FFFFFF; color: #000000; }
.tile-top::after { border-color: var(--line-2); }
.tile-top em { color: var(--ink-2); }
.nf-code { color: #FFFFFF; font-weight: 900; }
.nf-links a:hover { background: var(--glass-hi); }

/* ---------- FAQ, forms, chat ---------- */
.faq-panel { padding: clamp(22px, 3vw, 36px); }
.faq details, .faq-panel .faq details { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); box-shadow: none; transition: border-color .3s, background-color .3s; }
.faq details[open] { background: rgba(255, 255, 255, .07); border-color: var(--line-2); }
.faq summary { font-weight: 600; }
.faq summary::after, .faq-panel .faq summary::after { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.ask-chip { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); box-shadow: none; }
.ask-ico, .ask-chip .ask-ico { background: rgba(255, 255, 255, .08); border-color: var(--line-2); color: #FFFFFF; }
.ask-ico::after { border-color: var(--bg); }
.lead-box { background: var(--glass); }
.lead-box .side { color: #FFFFFF; }
.lead-form, .lead-modal { background: #0D0D0E; border: 1px solid var(--line-2); }
.lead-modal::backdrop { background: rgba(0, 0, 0, .7); }
.lm-close { background: rgba(255, 255, 255, .1); }
.field input, .field select, .lead-form .field input, .lead-form .field select { background: rgba(255, 255, 255, .05); border-color: var(--line-2); color: #FFFFFF; }
.field select option, .lead-form .field select option { background: #141416; }
.field input:focus, .field select:focus, .lead-form .field input:focus, .lead-form .field select:focus { border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.form-msg.ok { background: rgba(74, 222, 128, .12); }
.form-msg.err { background: rgba(251, 191, 36, .12); }
.chat-fab { background: #FFFFFF; background-image: none; color: #000000; box-shadow: 0 18px 32px -14px rgba(255, 255, 255, .35); }
.tchat-panel { background: #0D0D0E; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); }
.tc-head { background: #161618; border-bottom: 1px solid var(--line); }
.tc-body, .tc-foot { background: #0D0D0E; }
.tc-msg { background: rgba(255, 255, 255, .07); box-shadow: none; }
.tc-quick a { background: rgba(255, 255, 255, .04); border-color: var(--line); }
.tc-quick a:hover { border-color: #FFFFFF; }
.tc-quick a::after { color: #FFFFFF; }
.m-cta, body .m-cta { background: rgba(18, 19, 23, .9); border-top-color: var(--line-2); box-shadow: 0 -10px 30px rgba(0, 0, 0, .6); }
.m-cta .m-chat { background: rgba(255, 255, 255, .08); border-color: var(--line-2); color: #FFFFFF; }
.m-cta .m-chat::after { border-color: #121317; }
.draft-bar { background: #FFFFFF; color: #000000; }

/* ---------- footer ---------- */
.footer-panel { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.soc-card { background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-soft), var(--inset-top); }
.soc-card .h2 u { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 50 1 100 4 T 198 3' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E"); }
.social-card { background: rgba(255, 255, 255, .04); }
.footer h4 { font: 800 11px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.footer-in ul a { color: var(--ink-2); }
.footer-in ul a:hover { color: #FFFFFF; }
.footer-bottom { border-color: var(--line); }
.to-top i { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.footer-lines i { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); }
.logo-mark, .logo-mark i { color: #FFFFFF; }
.logo-mark i { background: #FFFFFF; }
.logo-mark::after { background: linear-gradient(135deg, #95BF47, #25F4EE); box-shadow: 0 0 10px rgba(37, 244, 238, .55); }
.footer-about .logo-mark { font-family: var(--f-display); font-weight: 900; }

/* preloader */
.pl-active .preloader { background: var(--bg); }
.pl-word { font: 900 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: #FFFFFF; }
.pl-bar { background: rgba(255, 255, 255, .12); }

/* sticky stacking above the fog */
main, .footer { position: relative; z-index: 1; }

/* ---------- motion ---------- */
.scroll-prog { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.scroll-prog i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #95BF47, #25F4EE 55%, #FFFFFF); box-shadow: 0 0 12px rgba(37, 244, 238, .5); }

/* home page Payments tile: the Shopify Visa Business card, tilted, catching a light sweep */
.mcard .visa-card {
  position: relative; overflow: hidden; border-radius: 12px; transform: perspective(800px) rotateX(7deg) rotateY(-9deg) rotateZ(1deg);
  box-shadow: 0 22px 34px -16px rgba(149, 191, 71, .5), 0 10px 22px rgba(0, 0, 0, .45); transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.mcard .visa-card img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .mcard .visa-card { width: 82%; justify-self: center; margin-block: 6px 10px; } }
.mcard .visa-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); }
.dir-small:hover .visa-card { transform: perspective(800px) translateY(-4px); box-shadow: 0 28px 44px -16px rgba(149, 191, 71, .6), 0 12px 26px rgba(0, 0, 0, .5); }

/* cards: lift and a soft light that follows the mouse (classes and --mx/--my come from app.js) */
.spot { transition: translate .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, background-color .3s; }
.spot:hover, .reveal.visible > .spot:hover {
  translate: 0 -4px; transition-delay: 0s;
  background-image: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .085), transparent 45%), var(--glass-hi);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .75), var(--inset-top);
}

@media (prefers-reduced-motion: no-preference) {
  /* headline highlight: a slow silver shimmer */
  mark.hl { background-size: 220% 100%; animation: hlShine 7s ease-in-out infinite; }
  @keyframes hlShine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

  /* sections rise in and come into focus; grids bring their cards in one after another */
  .reveal { transform: translateY(36px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
  .reveal.visible { filter: none; }
  .reveal:is(.grid-2, .grid-3, .grid-4, .dirs, .dirs-small, .results, .plans, .steps, .picks, .paths, .flow, .feat-strip, .facts-strip) > * {
    opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease), translate .8s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  }
  .reveal.visible:is(.grid-2, .grid-3, .grid-4, .dirs, .dirs-small, .results, .plans, .steps, .picks, .paths, .flow, .feat-strip, .facts-strip) > * { opacity: 1; translate: 0 0; }
  .reveal.visible > :nth-child(2) { transition-delay: .09s; }
  .reveal.visible > :nth-child(3) { transition-delay: .18s; }
  .reveal.visible > :nth-child(4) { transition-delay: .27s; }
  .reveal.visible > :nth-child(5) { transition-delay: .36s; }
  .reveal.visible > :nth-child(6) { transition-delay: .45s; }
  .reveal.visible > :nth-child(n+7) { transition-delay: .54s; }
  .reveal.visible.settled > * { transition-delay: 0s; }

  /* the main hero button breathes */
  .hero .btn-accent { animation: breathe 3.2s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { box-shadow: 0 10px 30px -12px rgba(255, 255, 255, .35), 0 0 0 0 rgba(255, 255, 255, .22); }
    50% { box-shadow: 0 14px 36px -12px rgba(255, 255, 255, .45), 0 0 0 12px rgba(255, 255, 255, 0); }
  }

  .mcard .visa-card { animation: cardFloat 6s ease-in-out infinite; }
  .mcard .visa-card::after { animation: cardShine 5.5s ease-in-out infinite 1.2s; }
  .dir-small:hover .visa-card { animation-play-state: paused; }
  @keyframes cardFloat { 50% { translate: 0 -6px; } }
  @keyframes cardShine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
}

/* Telefonda ham "Menyu" yozuvi ko'rinadi (yuqorida, sahifa boshida) */
@media (max-width: 640px) {
  .menu-btn:not(.compact) { width: auto; padding: 0 18px 0 16px; }
  .menu-btn:not(.compact) .menu-label { display: inline; }
}

/* Bosh sahifa: bo'limlarga tez havolalar */
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.quick-links a { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; }
.quick-links a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }

/* Menyu tugmasi e'tiborni tortadi: yengil tepaga-pastga va nur halqasi */
@keyframes menu-nudge { 0%, 55%, 100% { transform: translateY(0); } 10% { transform: translateY(-5px); } 20% { transform: translateY(0); } 30% { transform: translateY(-3px); } 40% { transform: translateY(0); } }
@keyframes menu-ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55), 0 10px 28px -12px rgba(255,255,255,.4); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0), 0 10px 28px -12px rgba(255,255,255,.4); } }
.menu-btn { animation: menu-nudge 3.2s ease-in-out infinite, menu-ring 2.2s ease-out infinite; }
.menu-btn[aria-expanded="true"] { animation: none; }
@media (prefers-reduced-motion: reduce) { .menu-btn { animation: none; } }

/* Yangi logo (SA monogramma, shaffof fon) */
.logo-mark.logo-img { display: inline-flex; line-height: 0; }
.logo-mark.logo-img::after { display: none; }
.logo-mark.logo-img img { height: 46px; width: auto; display: block; }
.pl-logo .logo-mark.logo-img img { height: 84px; }
.footer-about .logo-mark.logo-img img { height: 52px; }

/* Yangi ikonkalar (egasi bergan rasmlar) */
.soc img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.soc-tg { background: transparent; }
.soc-ig { background: #FFFFFF; }
.soc-ig img { padding: 5px; box-sizing: border-box; }
.soc-wh { background: #FF4A12; }
.result .who i.shop-logo, .result .who i.tt-logo { padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); }
.result .who i.shop-logo { background: #FFFFFF; }
.result .who i.tt-logo { background: #000000; }
.result .who i.shop-logo img, .result .who i.tt-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }
.result .who i.shop-logo img { padding: 9px; box-sizing: border-box; object-fit: contain; }
.round-soc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
a.round-soc:has(img[src*="instagram"]) img { background: #FFFFFF; padding: 9px; box-sizing: border-box; }
a.round-soc:has(img) { padding: 0; overflow: hidden; }