/* ═══════════════════════════════════════════
   EsnafX — Alımda Çarpan Etkisi
   Palet: logo cyan #16d3e8 · logo mavi #1a6cf5 · esnaf turuncusu #ff8a2b
   ═══════════════════════════════════════════ */

:root {
  --bg: #05070d;
  --bg-soft: #0a0e1a;
  --panel: rgba(255,255,255,.035);
  --line: rgba(255,255,255,.08);
  --text: #eef2f8;
  --muted: #8b93a7;
  --cyan: #16d3e8;
  --blue: #1a6cf5;
  --orange: #ff8a2b;
  --orange-soft: #ffb347;
  --grad-brand: linear-gradient(120deg, var(--cyan), var(--blue));
  --grad-warm: linear-gradient(120deg, var(--orange), var(--orange-soft));
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
em { font-style: normal; }

/* ── ortak: serif aksan + ikonlar ── */
.serif-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.t-cyan { color: var(--cyan); }
.t-orange { color: var(--orange); }
.icn { display: block; width: 100%; height: 100%; }

::selection { background: rgba(22,211,232,.35); }

/* ── grain ── */
.grain {
  position: fixed; inset: -25%;
  width: 150%; height: 150%;
  pointer-events: none; z-index: 9998;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) } 10% { transform: translate(-5%,-8%) }
  20% { transform: translate(-12%,3%) } 30% { transform: translate(6%,-10%) }
  40% { transform: translate(-4%,12%) } 50% { transform: translate(-10%,4%) }
  60% { transform: translate(12%,0) } 70% { transform: translate(0,10%) }
  80% { transform: translate(-12%,0) } 90% { transform: translate(8%,4%) }
}
/* Safari tam ekran yarı saydam katmanı her karede yeniden harmanlıyor → statik bırak */
.is-safari .grain { animation: none; }

/* ── cursor glow ── */
.cursor-glow {
  position: fixed; left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(22,211,232,.07), rgba(26,108,245,.04) 40%, transparent 65%);
  opacity: 0; transition: opacity .6s;
}
body.cursor-on .cursor-glow { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* ── scroll progress ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--grad-brand);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 10001;
}

/* ═══════════ PRELOADER ═══════════ */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transition: opacity .5s ease;
}
.preloader.is-hidden { opacity: 0; pointer-events: none; }
.preloader-mark { position: relative; width: 72px; height: 72px; }
.pl-diamond {
  position: absolute; width: 44px; height: 44px; top: 14px;
  animation: plPulse 1.1s var(--ease-out) infinite alternate;
}
.pl-d1 { left: 0; background: var(--cyan); transform: rotate(45deg); }
.pl-d2 { right: 0; background: var(--blue); transform: rotate(45deg); mix-blend-mode: screen; animation-delay: .18s; }
@keyframes plPulse { from { transform: rotate(45deg) scale(.82); } to { transform: rotate(45deg) scale(1.06); } }
.preloader-count {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--muted); letter-spacing: .18em;
}

/* ═══════════ NAV ═══════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 56px;
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.navbar.is-scrolled {
  padding: 13px 56px;
  background: rgba(5,7,13,.92);
  border-bottom-color: var(--line);
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 700; letter-spacing: -.03em;
  display: inline-flex; align-items: center;
}
.brand-xx {
  font-weight: 700; margin-left: 1px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--muted);
  position: relative; display: inline-block; overflow: hidden; line-height: 1.4;
}
.nav-links a span { display: inline-block; transition: transform .45s var(--ease-out); }
.nav-links a::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%;
  color: var(--cyan); white-space: nowrap;
  transition: transform .45s var(--ease-out);
}
.nav-links a:hover span, .nav-links a:hover::after { transform: translateY(-100%); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  padding: 10px 22px; border-radius: 999px;
  background: var(--grad-brand); color: #fff;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,108,245,.4); }
.nav-cta-arrow { transition: transform .3s var(--ease-out); }
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }
.nav-burger { display: none; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(5,7,13,.96); backdrop-filter: blur(24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: 32px; font-weight: 600; }
.mobile-menu .mm-cta { color: var(--cyan); }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: 140px 56px 90px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.orb {
  position: absolute; border-radius: 50%;
  opacity: .8;
  will-change: transform;
}
.orb-cyan { width: 720px; height: 720px; top: -260px; left: 44%; background: radial-gradient(circle, rgba(22,211,232,.14) 0%, rgba(22,211,232,.05) 42%, transparent 68%); }
.orb-blue { width: 820px; height: 820px; top: 24%; right: -300px; background: radial-gradient(circle, rgba(26,108,245,.15) 0%, rgba(26,108,245,.05) 42%, transparent 68%); }
.orb-orange { width: 620px; height: 620px; bottom: -260px; left: -220px; background: radial-gradient(circle, rgba(255,138,43,.1) 0%, rgba(255,138,43,.03) 45%, transparent 68%); }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 75%);
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 70px;
}
.hero-left { max-width: 600px; flex: 1; }

.hero-badge{
  display:flex;
  align-items:center;
  gap:12px;
  height:24px;
  max-width:100%;
  margin:0 0 30px;
  font-family:var(--font-display),sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--muted);
}
.hb2-mark{
  flex:0 0 auto;
  width:16px;
  height:16px;
  display:block;
  overflow:visible;
}
.hb2-mark path{
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hb2-mark-a{stroke:var(--cyan);}
.hb2-mark-b{stroke:var(--blue);}
.hb2-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hb2-em{color:var(--text);}
.hb2-rule{
  flex:0 0 auto;
  width:56px;
  height:8px;
  display:block;
  margin-left:-1px;
}
.hb2-rule line{
  stroke:rgba(255,255,255,.18);
  stroke-width:1;
}
.hb2-rule path{
  fill:none;
  stroke:rgba(255,255,255,.35);
  stroke-width:1;
}
@media (max-width:600px){
  .hero-badge{gap:10px;font-size:11px;letter-spacing:.18em;}
  .hb2-rule{display:none;}
}
@keyframes blink { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,211,232,.5) } 50% { opacity: .4; box-shadow: 0 0 0 6px rgba(22,211,232,0) } }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 7.4vw, 108px);
  font-weight: 700; line-height: 1.02; letter-spacing: -.045em;
  margin-bottom: 30px;
}
.hero-title .serif-it { font-size: 1.04em; }
.grad-word {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ht-x {
  display: inline-block; color: var(--orange);
  margin-left: .06em;
  animation: xSpin 5s var(--ease-out) infinite;
}
@keyframes xSpin { 0%, 70% { transform: rotate(0) } 85% { transform: rotate(90deg) scale(1.15) } 100% { transform: rotate(90deg) } }

.hero-sub {
  font-size: 19px; line-height: 1.65; color: var(--muted);
  max-width: 480px; margin-bottom: 40px;
}
.hero-sub em { color: var(--orange); font-size: 1.12em; }

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 16px 32px; border-radius: 14px; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s;
  overflow: hidden; border: none;
}
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 4px 24px rgba(26,108,245,.35); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(26,108,245,.5); }
.btn-shine {
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s var(--ease-out) infinite;
}
@keyframes shine { 0%, 60% { left: -80% } 100% { left: 180% } }
.btn-ghost {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.07); }
.btn-down { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(4px) } }

.hero-proof { display: flex; align-items: center; gap: 26px; }
.proof-item { display: flex; flex-direction: column; gap: 3px; }
.proof-item strong { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.proof-item span { font-size: 12.5px; color: var(--muted); }
.proof-sep { width: 1px; height: 34px; background: var(--line); }

/* ── auction card ── */
.hero-right { position: relative; flex-shrink: 0; width: 420px; }
.auction-card{position:relative;width:420px;max-width:100%;padding:28px;border-radius:20px;background:#10151f;border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 70px -24px rgba(0,0,0,.65);color:var(--text);font-family:var(--font-body),ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;overflow:hidden}

.ac2-tick{position:absolute;font-family:var(--font-display),sans-serif;font-size:13px;font-weight:400;line-height:1;color:rgba(255,255,255,.26);pointer-events:none;user-select:none}
.ac2-tick--tl{top:9px;left:11px}
.ac2-tick--tr{top:9px;right:11px}
.ac2-tick--bl{bottom:9px;left:11px}
.ac2-tick--br{bottom:9px;right:11px}

.ac2-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.ac2-live{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.2em}
.ac2-live-sq{width:7px;height:7px;background:#ff5d5d;flex:0 0 auto;animation:ac2-blink 1.3s linear infinite}
.ac2-live-txt{color:var(--text)}
.ac2-ref{color:var(--muted);font-weight:500;letter-spacing:.12em}
.ac2-close{display:flex;align-items:baseline;gap:9px}
.ac2-close-label{font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--muted)}
.ac2-timer{font-family:var(--font-display),sans-serif;font-size:16px;font-weight:600;letter-spacing:.03em;color:var(--text)}
@keyframes ac2-blink{0%,54%{opacity:1}55%,100%{opacity:.15}}

.ac2-product{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.18)}
.ac2-product-icon{flex:0 0 42px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,138,43,.35);border-radius:12px;color:var(--orange);background:rgba(255,138,43,.06)}
.ac2-product-name{font-family:var(--font-display),sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.ac2-product-unit{color:var(--muted);font-weight:500;font-size:13.5px}
.ac2-product-meta{margin-top:4px;font-size:12px;color:var(--muted)}
.ac2-lot{margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.14em;color:rgba(139,147,167,.75)}

.ac2-microlabel{display:flex;align-items:baseline;gap:8px;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.ac2-idx{font-family:var(--font-display),sans-serif;font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--cyan)}
.ac2-idx--warm{color:var(--orange)}

.ac2-market{padding-top:20px}
.ac2-market-row{display:flex;align-items:flex-end;gap:20px;margin-top:14px}
.ac2-price-col{flex:0 0 auto}
.ac2-price{font-family:var(--font-display),sans-serif;font-size:46px;font-weight:600;line-height:1;letter-spacing:-.035em;color:var(--text)}
.ac2-price small{font-size:20px;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:1px}
.ac2-drop-row{display:flex;align-items:center;gap:6px;margin-top:11px;color:#34e39a}
.ac2-drop-row svg{width:13px;height:13px;flex:0 0 auto}
.ac2-drop{font-family:var(--font-display),sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em}
.ac2-drop-note{color:var(--muted);font-size:11.5px;margin-left:2px}

.ac2-spark-col{flex:1;min-width:0}
.ac2-spark{display:block;width:100%;height:auto}
.ac2-spark-line{stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ac2-spark-grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.ac2-spark-target{stroke:rgba(255,179,71,.55);stroke-width:1;stroke-dasharray:2 5;stroke-linecap:round}
.ac2-spark-tlabel{fill:var(--muted);font-family:var(--font-body),sans-serif;font-size:9px;letter-spacing:.08em}
.ac2-spark-dotc{fill:var(--cyan)}
.ac2-spark-pulse{fill:var(--cyan);transform-box:fill-box;transform-origin:center;animation:ac2-pulse 2.2s var(--ease-out) infinite}
@keyframes ac2-pulse{0%{transform:scale(.35);opacity:.45}70%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}

.ac2-goal{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.ac2-goal-head{display:flex;align-items:baseline;justify-content:space-between}
.ac2-goal-count{font-family:var(--font-display),sans-serif;font-size:13px;font-weight:500;color:var(--muted)}
.ac2-goal-count strong{font-size:15px;font-weight:600;color:var(--text)}
.ac2-goal-total{margin-left:1px}
.ac2-segbar{--ac2-seg:calc(100%/30);position:relative;height:10px;margin-top:13px;background:rgba(255,255,255,.08);-webkit-mask-image:repeating-linear-gradient(to right,#000 0,#000 calc(var(--ac2-seg) - 3px),transparent calc(var(--ac2-seg) - 3px),transparent var(--ac2-seg));mask-image:repeating-linear-gradient(to right,#000 0,#000 calc(var(--ac2-seg) - 3px),transparent calc(var(--ac2-seg) - 3px),transparent var(--ac2-seg))}
.ac2-segbar-fill{position:absolute;top:0;bottom:0;left:0;background:var(--grad-warm);transition:width .9s var(--ease-out)}
.ac2-goal-caption{margin-top:11px;font-size:12px;color:var(--muted)}
.ac2-goal-left{font-family:var(--font-display),sans-serif;font-weight:600;color:var(--orange-soft)}
.ac2-serif{font-family:var(--font-serif),serif;font-style:italic;font-size:1.2em;color:var(--orange-soft);letter-spacing:.01em}

.ac2-stats{display:flex;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.ac2-stat{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ac2-stat+.ac2-stat{border-left:1px solid rgba(255,255,255,.1);padding-left:16px}
.ac2-stat-label{font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.ac2-stat-val{font-family:var(--font-display),sans-serif;font-size:15px;font-weight:600;color:var(--text)}
.ac2-stat-val--strike{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,93,93,.55);text-decoration-thickness:1px}

.ac2-toast{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);min-height:17px;font-size:12.5px;color:var(--muted);opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.ac2-toast.show{opacity:1;transform:none}
.ac2-toast-plus{font-family:var(--font-display),sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--orange)}
.ac2-toast-icon{display:flex;color:var(--orange);flex:0 0 auto}
.ac2-toast-text{color:var(--text)}

@media (max-width:400px){.ac2-market-row{flex-direction:column;align-items:stretch}.ac2-spark-col{margin-top:14px}}
@media (prefers-reduced-motion:reduce){.ac2-live-sq,.ac2-spark-pulse{animation:none}.ac2-segbar-fill,.ac2-toast{transition:none}}
.ac2-drop { display: inline-block; transition: transform .2s var(--ease-out); }
.ac2-drop.tick { transform: scale(1.15); }

.auction-shadow {
  position: absolute; inset: 4% -14% -16% -14%; z-index: -1;
  background: radial-gradient(ellipse, rgba(26,108,245,.14) 0%, rgba(26,108,245,.05) 45%, transparent 70%);
}

.hero-scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.22); border-radius: 99px;
  z-index: 3;
}
.hero-scroll-hint span {
  position: absolute; top: 8px; left: 50%; margin-left: -2px;
  width: 4px; height: 8px; border-radius: 99px; background: var(--cyan);
  animation: scrollHint 1.8s var(--ease-out) infinite;
}
@keyframes scrollHint { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(14px); opacity: 0 } 100% { opacity: 0 } }

/* ═══════════ MARQUEE ═══════════ */
.marquee-wrap {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
  transform: rotate(-1.2deg) scale(1.02);
  margin: 10px 0 0;
}
.marquee { overflow: hidden; padding: 22px 0; }
.marquee-track {
  display: inline-flex; align-items: center; gap: 38px;
  padding-right: 38px;
  white-space: nowrap; will-change: transform;
}
.marquee-track span {
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: rgba(238,242,248,.8); letter-spacing: -.01em;
}
.marquee-track i {
  font-style: normal; font-size: 17px; font-weight: 700;
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ═══════════ STATEMENT ═══════════ */
.statement {
  padding: 190px 56px;
  display: flex; justify-content: center;
}
.statement-text {
  max-width: 1060px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.1vw, 58px);
  font-weight: 600; line-height: 1.28; letter-spacing: -.03em;
  text-align: center;
}
.statement-text .st-word { color: rgba(238,242,248,.13); transition: color .35s; }
.statement-text .st-word.lit { color: var(--text); }
.statement-text .st-key { font-family: var(--font-serif); font-style: italic; font-size: 1.06em; }
.statement-text .st-word.lit.st-key { color: var(--orange); }

/* ═══════════ SECTIONS COMMON ═══════════ */
.section-head { text-align: center; margin-bottom: 70px; padding: 0 24px; }
.section-head .section-tag { justify-content: center; }
.section-tag {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.section-tag i {
  font-style: normal; font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--orange);
}
.tag-rule { width: 34px; height: 1px; background: rgba(255,255,255,.18); }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.04em;
}
.section-title .serif-it { font-size: 1.05em; }

/* ═══════════ HOW (pinned) ═══════════ */
.how { position: relative; }
.how-pin {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 90px 56px;
}
.how-inner {
  width: 100%; max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 90px;
}
.how-left { flex: 1; max-width: 560px; }
.how-left .section-tag { margin-bottom: 16px; }
.how-left .section-title { margin-bottom: 48px; }
.how-steps { display: flex; flex-direction: column; gap: 8px; }
.how-step {
  position: relative;
  display: flex; gap: 22px;
  padding: 22px 26px 22px 22px;
  border-radius: 18px;
  border: 1px solid transparent;
  opacity: .38;
  transition: opacity .45s, background .45s, border-color .45s;
  overflow: hidden;
}
.how-step.is-active {
  opacity: 1;
  background: var(--panel);
  border-color: var(--line);
}
.hs-num {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--muted);
  padding-top: 4px;
  transition: color .4s;
}
.how-step.is-active .hs-num { color: var(--orange); }
.hs-body h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.hs-body p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 400px; }
.hs-progress {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgba(255,255,255,.06);
  opacity: 0; transition: opacity .3s;
}
.how-step.is-active .hs-progress { opacity: 1; }
.hs-progress i {
  display: block; width: 100%; height: 100%;
  background: var(--grad-warm);
  transform: scaleY(0); transform-origin: 50% 0;
  will-change: transform;
}

/* ── phone ── */
.how-right { position: relative; flex-shrink: 0; perspective: 1100px; }
.phone {
  position: relative;
  width: 330px; height: 668px;
  border-radius: 48px;
  background: #10141f;
  border: 1.5px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 7px #05070d,
    inset 0 0 0 8.5px rgba(255,255,255,.07),
    0 40px 90px rgba(0,0,0,.6);
  padding: 15px;
  will-change: transform;
  z-index: 2;
}
.phone-glow {
  position: absolute; inset: -4% -26% -12% -26%; z-index: 1;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(255,138,43,.09) 0%, rgba(255,138,43,.03) 40%, transparent 65%),
    radial-gradient(ellipse at 70% 30%, rgba(26,108,245,.14) 0%, rgba(26,108,245,.05) 40%, transparent 65%);
}
.phone-notch {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px;
  background: #05070d; border-radius: 0 0 18px 18px;
  z-index: 5;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 34px; overflow: hidden;
  background: linear-gradient(180deg, #0b101d, #080b14);
}
.pscreen {
  position: absolute; inset: 0;
  padding: 44px 18px 18px;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.pscreen.is-active { opacity: 1; transform: none; }

.ps-appbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ps-logo { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.ps-logo b { color: var(--cyan); }
.ps-bell { position: relative; width: 17px; height: 17px; color: rgba(238,242,248,.8); }
.ps-bell i { position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.ps-back { color: var(--muted); font-size: 17px; }
.ps-appbar-title { font-size: 14px; font-weight: 700; }
.ps-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 13px; }
.ps-title-sm { font-size: 17px; }
.ps-chiprow { display: flex; gap: 7px; margin-bottom: 15px; }
.ps-chip {
  font-size: 11px; font-weight: 600; color: var(--muted);
  padding: 6px 12px; border-radius: 99px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
.ps-chip.is-on { color: #05070d; background: var(--cyan); border-color: var(--cyan); }
.ps-card {
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  border-radius: 15px; padding: 13px 14px; margin-bottom: 9px;
}
.ps-card-dim { opacity: .55; }
.ps-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ps-emoji { width: 15px; height: 15px; color: var(--cyan); flex-shrink: 0; }
.ps-card:nth-child(even) .ps-emoji { color: var(--orange); }
.ps-card-name { font-size: 13.5px; font-weight: 700; flex: 1; }
.ps-live {
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: #ff5d5d;
  padding: 3px 7px; border-radius: 6px; background: rgba(255,93,93,.12);
}
.ps-live-soon { color: var(--cyan); background: rgba(22,211,232,.1); }
.ps-card-sub { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ps-minibar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.ps-minibar i { display: block; height: 100%; border-radius: 99px; background: var(--grad-brand); }

.ps-hero-emoji {
  width: 54px; height: 54px; margin: 6px auto 10px;
  padding: 13px; border-radius: 16px;
  background: rgba(255,138,43,.1); border: 1px solid rgba(255,138,43,.22);
  color: var(--orange);
}
.ps-detail-name { text-align: center; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.ps-ring-wrap { position: relative; width: 138px; margin: 0 auto 16px; }
.ps-ring { width: 138px; height: 138px; transform: rotate(-90deg); }
.ps-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.ps-ring-fill {
  fill: none; stroke: url(#psGrad); stroke: var(--orange);
  stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 65.3;
}
.ps-ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ps-ring-label b { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.ps-ring-label b small { font-size: 15px; color: var(--muted); }
.ps-ring-label span { font-size: 11px; color: var(--muted); }
.ps-tiers { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.ps-tier {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; padding: 9px 13px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--muted);
}
.ps-tier b { font-family: var(--font-display); }
.ps-tier.is-done { color: var(--text); }
.ps-tier.is-done b { color: #34e39a; }
.ps-tier.is-next { border-color: rgba(255,138,43,.4); color: var(--text); }
.ps-tier.is-next b { color: var(--orange); }
.ps-join-btn {
  text-align: center; font-size: 14px; font-weight: 700; color: #fff;
  padding: 13px; border-radius: 13px;
  background: var(--grad-warm);
  box-shadow: 0 6px 22px rgba(255,138,43,.3);
}

.ps-bid {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; border-radius: 14px; margin-bottom: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.ps-bid.is-best { border-color: rgba(52,227,154,.4); background: rgba(52,227,154,.06); }
.ps-bid-rank {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.08);
}
.ps-bid.is-best .ps-bid-rank { background: #34e39a; color: #05070d; }
.ps-bid-body { flex: 1; }
.ps-bid-body b { display: block; font-size: 13px; margin-bottom: 2px; }
.ps-bid-body span { font-size: 10.5px; color: #34e39a; }
.ps-bid-price { font-family: var(--font-display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-bid-price small { font-size: 11px; color: var(--muted); }
.ps-bid-note { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 12px; }

.pt2-map{position:relative;margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(155deg,rgba(26,108,245,.05),transparent 45%),var(--bg-soft)}
.pt2-map-svg{display:block;width:100%;height:auto}
.pt2-map-svg text{font-family:var(--font-body)}
.pt2-map::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at 32% 22%,transparent 62%,rgba(5,7,13,.4));pointer-events:none;z-index:1}
.pt2-pulse{transform-box:fill-box;transform-origin:center;animation:pt2-pulse 2.4s var(--ease-out) infinite}
@keyframes pt2-pulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.pt2-eta{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:1px;padding:6px 10px;background:#10151f;border:1px solid rgba(255,255,255,.18);border-radius:9px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.pt2-eta strong{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.pt2-eta span{font-size:9px;color:var(--muted);letter-spacing:.04em}
.pt2-meta{display:flex;margin-top:9px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.pt2-meta-cell{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;padding:7px 9px;min-width:0}
.pt2-meta-cell+.pt2-meta-cell{border-left:1px solid var(--line)}
.pt2-meta-k{font-size:8.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.pt2-meta-v{font-family:var(--font-display);font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt2-track{margin-top:12px}
.pt2-track-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.pt2-track-head span:first-child{font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.pt2-track-no{font-size:9.5px;color:var(--muted);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pt2-steps{position:relative;padding:5px 2px 0}
.pt2-steps::before{content:"";position:absolute;left:10.5px;top:20px;bottom:16px;width:1px;background:var(--line)}
.pt2-step{position:relative;display:flex;align-items:flex-start;gap:10px;padding:6.5px 0}
.pt2-node{position:relative;z-index:1;flex:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);border:1px solid var(--line);box-sizing:border-box}
.pt2-done .pt2-node{border-color:rgba(52,227,154,.38);background:linear-gradient(rgba(52,227,154,.13),rgba(52,227,154,.13)),var(--bg-soft)}
.pt2-done .pt2-node svg{width:9px;height:9px}
.pt2-now .pt2-node{border:1.5px solid var(--cyan)}
.pt2-now .pt2-node::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--cyan);animation:pt2-ring 2.2s var(--ease-out) infinite}
@keyframes pt2-ring{0%{transform:scale(.75);opacity:.85}100%{transform:scale(1.55);opacity:0}}
.pt2-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.pt2-labels{display:flex;flex-direction:column;min-width:0}
.pt2-label{font-family:var(--font-body);font-size:12.5px;color:var(--text);line-height:18px}
.pt2-now .pt2-label{font-weight:600}
.pt2-next .pt2-label{color:var(--muted)}
.pt2-sub{font-size:10px;color:var(--muted);margin-top:1px}
.pt2-time{margin-left:auto;flex:none;font-size:10px;color:var(--muted);line-height:18px;font-variant-numeric:tabular-nums}
.pt2-time-now{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--cyan)}
.pt2-gain{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid rgba(255,138,43,.32);border-radius:13px;background:linear-gradient(rgba(255,138,43,.05),rgba(255,138,43,.05)),var(--panel)}
.pt2-gain-k{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.pt2-gain-v{display:flex;align-items:center;gap:5px;margin-top:3px;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums}
.pt2-gain-v svg{width:12px;height:12px;flex:none}
.pt2-gain-side{flex:none;text-align:right;padding-left:12px;border-left:1px solid rgba(255,255,255,.14)}
.pt2-gain-side b{display:block;font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.pt2-gain-side span{font-size:9px;color:var(--muted);letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){.pt2-pulse,.pt2-now .pt2-node::after{animation:none}}

/* ═══════════ SIDES ═══════════ */
.sides { padding: 170px 56px 90px; max-width: 1280px; margin: 0 auto; }
.sides-title-duo { display: inline-block; margin-top: 6px; }
.t-orange { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.t-blue { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.t-x { color: var(--muted); font-weight: 500; padding: 0 8px; }
.sides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.side-card {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 44px 42px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), border-color .45s;
  will-change: transform;
}
.side-card:hover { transform: translateY(-6px); }
.side-orange:hover { border-color: rgba(255,138,43,.4); }
.side-blue:hover { border-color: rgba(26,108,245,.5); }
.side-glow {
  position: absolute; top: -40%; right: -25%;
  width: 380px; height: 380px; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  transition: opacity .5s;
}
.side-orange .side-glow { background: radial-gradient(circle, rgba(255,138,43,.22), transparent 70%); }
.side-blue .side-glow { background: radial-gradient(circle, rgba(26,108,245,.28), transparent 70%); }
.side-card:hover .side-glow { opacity: .85; }
.side-icon {
  width: 62px; height: 62px; border-radius: 17px;
  display: grid; place-items: center; padding: 16px;
  margin-bottom: 26px;
  position: relative;
}
.side-orange .side-icon { background: rgba(255,138,43,.13); border: 1px solid rgba(255,138,43,.25); color: var(--orange); }
.side-blue .side-icon { background: rgba(26,108,245,.15); border: 1px solid rgba(26,108,245,.3); color: var(--cyan); }
.side-card h3 { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; position: relative; }
.side-lead { font-size: 15px; color: var(--muted); margin-bottom: 28px; position: relative; }
.side-card ul { list-style: none; display: flex; flex-direction: column; gap: 15px; margin-bottom: 34px; position: relative; }
.side-card li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; }
.side-card li i {
  font-style: normal; font-weight: 800; font-size: 14px;
  padding-top: 1px;
}
.side-orange li i { color: var(--orange); }
.side-blue li i { color: var(--cyan); }
.side-cta { font-size: 15px; font-weight: 700; position: relative; transition: opacity .3s; }
.side-orange .side-cta { color: var(--orange); }
.side-blue .side-cta { color: var(--cyan); }
.side-cta:hover { opacity: .75; }

/* ═══════════ NUMBERS ═══════════ */
.numbers { padding: 90px 56px 170px; }
.numbers-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.num-item { padding: 44px 30px 10px; border-left: 1px solid var(--line); }
.num-item:first-child { border-left: none; }
.num-val {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 58px); font-weight: 700; letter-spacing: -.04em;
  line-height: 1; margin-bottom: 12px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.num-val em { font-size: 18px; letter-spacing: 0; margin-left: 4px; }
.num-item p { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ═══════════ FEATURES ═══════════ */
.features { padding: 0 56px 170px; max-width: 1280px; margin: 0 auto; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  position: relative;
  padding: 36px 32px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color .4s, background .4s;
  transform-style: preserve-3d;
  will-change: transform;
}
.feature-card::before, .feature-card::after {
  content: '+';
  position: absolute;
  font: 400 15px/1 var(--font-display);
  color: rgba(238,242,248,.16);
  transition: color .4s;
}
.feature-card::before { top: 12px; left: 15px; }
.feature-card::after { bottom: 12px; right: 15px; }
.feature-card:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); }
.feature-card:hover::before, .feature-card:hover::after { color: var(--orange); }
.fc-num {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
  color: rgba(139,147,167,.55);
}
.fc-icon {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; padding: 14px;
  margin-bottom: 22px;
}
.fc-cyan { background: rgba(22,211,232,.1); border: 1px solid rgba(22,211,232,.22); color: var(--cyan); }
.fc-orange { background: rgba(255,138,43,.1); border: 1px solid rgba(255,138,43,.22); color: var(--orange); }
.fc-blue { background: rgba(26,108,245,.12); border: 1px solid rgba(26,108,245,.28); color: #5b96ff; }
.feature-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; }
.feature-card p { font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* ═══════════ FINAL CTA ═══════════ */
.cta-final {
  position: relative; overflow: hidden;
  padding: 170px 56px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-bg .orb-cyan { top: auto; bottom: -260px; left: 12%; }
.cta-bg .orb-orange { bottom: auto; top: -220px; left: auto; right: 6%; }
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 86px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.045em;
  margin-bottom: 26px;
  position: relative;
}
.cta-title .serif-it { font-size: 1.05em; }
.cta-sub { font-size: 18px; color: var(--muted); max-width: 520px; margin: 0 auto 44px; line-height: 1.65; position: relative; }
.cta-form {
  display: flex; gap: 12px; justify-content: center;
  max-width: 520px; margin: 0 auto 44px;
  position: relative;
}
.cta-form input {
  flex: 1; min-width: 0;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body); font-size: 15px;
  outline: none;
  transition: border-color .3s, background .3s;
}
.cta-form input::placeholder { color: rgba(139,147,167,.7); }
.cta-form input:focus { border-color: var(--cyan); background: rgba(22,211,232,.05); }
.cta-stores { display: flex; gap: 14px; justify-content: center; position: relative; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 24px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  opacity: .75;
}
.store-badge svg { width: 22px; height: 22px; color: var(--text); flex-shrink: 0; }
.sb-text { text-align: left; font-size: 15px; font-weight: 700; line-height: 1.15; }
.sb-text small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .04em; }

/* ═══════════ FOOTER ═══════════ */
.footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 70px 56px 34px; }
.footer-inner {
  max-width: 1280px; margin: 0 auto 56px;
  display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap;
}
.footer-brand p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.footer-col { display: flex; flex-direction: column; gap: 13px; }
.footer-col h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.footer-col a { font-size: 14.5px; color: rgba(238,242,248,.75); transition: color .25s; }
.footer-col a:hover { color: var(--cyan); }
.footer-word {
  font-family: var(--font-display);
  font-size: clamp(96px, 17vw, 250px);
  font-weight: 700; letter-spacing: -.05em; line-height: .78;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238,242,248,.09);
  user-select: none; pointer-events: none;
  margin-top: 20px;
  will-change: transform;
}
.footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--muted);
}

/* ═══════════ REVEAL DEFAULTS ═══════════ */
[data-reveal] { opacity: 0; transform: translateY(34px); }
.no-js [data-reveal], .reveal-done[data-reveal] { opacity: 1; transform: none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1120px) {
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 70px; }
  .hero-right { width: 100%; max-width: 440px; }
  .how-pin { padding: 90px 22px 30px; align-items: flex-start; }
  .how-inner { flex-direction: column; gap: 30px; align-items: center; }
  .how-right { order: -1; }
  .how-left { max-width: 540px; text-align: center; }
  .how-left .section-title { font-size: 32px; margin-bottom: 22px; }
  .how-left .section-title br { display: none; }
  .phone { width: 250px; height: 506px; border-radius: 38px; }
  .phone-screen { border-radius: 26px; }
  .phone-notch { width: 88px; height: 20px; }
  .pscreen { padding: 34px 14px 14px; }
  /* pinliyken sadece aktif adım görünür */
  .how-steps { gap: 0; }
  .how-step { display: none; text-align: left; }
  .how-step.is-active { display: flex; animation: stepIn .5s var(--ease-out); }
  @keyframes stepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .num-item { border-left: none; border-top: 1px solid var(--line); }
  .numbers-grid { border-top: none; }
}
@media (max-width: 760px) {
  .navbar { padding: 16px 22px; }
  .navbar.is-scrolled { padding: 12px 22px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; gap: 6px;
    background: none; border: none; cursor: pointer; padding: 8px;
    z-index: 1001;
  }
  .nav-burger span { width: 26px; height: 2px; background: var(--text); transition: transform .35s var(--ease-out), opacity .3s; }
  .nav-burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-burger.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hero { padding: 120px 22px 70px; min-height: auto; }
  .hero-sub { font-size: 16.5px; }
  .hero-proof { gap: 18px; }
  .statement { padding: 120px 22px; }
  .how-pin { padding: 80px 16px 20px; }
  .how-left .section-title { font-size: 26px; }
  .hs-body p { font-size: 13.5px; }
  .phone { width: 225px; height: 456px; }
  /* küçük telefonda app ekranları kompakt */
  .pscreen { padding: 30px 12px 12px; }
  .ps-title { font-size: 17px; margin-bottom: 10px; }
  .ps-card { padding: 10px 11px; border-radius: 12px; }
  .ps-card-name { font-size: 12px; }
  .ps-card-sub { font-size: 10px; }
  .ps-hero-emoji { font-size: 28px; margin: 2px 0 5px; }
  .ps-detail-name { font-size: 12.5px; margin-bottom: 10px; }
  .ps-ring-wrap { width: 104px; margin-bottom: 11px; }
  .ps-ring { width: 104px; height: 104px; }
  .ps-ring-label b { font-size: 19px; }
  .ps-tiers { gap: 5px; margin-bottom: 11px; }
  .ps-tier { padding: 6px 10px; font-size: 10.5px; border-radius: 9px; }
  .ps-join-btn { padding: 10px; font-size: 12px; border-radius: 11px; }
  .ps-bid { padding: 9px 10px; margin-bottom: 6px; }
  .ps-bid-body b { font-size: 11.5px; }
  .ps-bid-price { font-size: 13.5px; }
  .pt2-label { font-size: 11px; }
  .pt2-meta-v { font-size: 10px; }
  .pt2-eta strong { font-size: 12px; }
  .pt2-gain-v { font-size: 15px; }
  .sides { padding: 110px 22px 60px; }
  .sides-grid { grid-template-columns: 1fr; }
  .side-card { padding: 34px 26px; }
  .numbers { padding: 60px 22px 110px; }
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .features { padding: 0 22px 110px; }
  .features-grid { grid-template-columns: 1fr; }
  .cta-final { padding: 110px 22px; }
  .cta-form { flex-direction: column; }
  .footer { padding: 56px 22px 28px; }
  .hero-scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}