@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dancing-script-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/urbanist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/urbanist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --frame: #1c1240;
  --ink: #1b1446;
  --ink-2: #4b4672;
  --muted: #57536f;
  --muted-accent: #a09cba;
  --bg: #f6f6fa;
  --surface: #ffffff;
  --line: #ebeaf2;
  --violet: #6d28f5;
  --violet-2: #8b5cf6;
  --violet-soft: #ede6ff;
  --lav-1: #efe9ff;
  --lav-2: #b9a2f7;
  --orange: #f26a2e;
  --green: #22c55e;
  --radius-xl: 36px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow: 0 1px 2px rgba(27, 20, 70, .04), 0 12px 32px -12px rgba(27, 20, 70, .12);
  --shadow-lg: 0 30px 60px -20px rgba(27, 20, 70, .25);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pad: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface);
  color: var(--ink);
  font-family: "Urbanist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; }

.frame {
  background: var(--surface);
  overflow: clip;
  position: relative;
}

.muted { color: var(--muted-accent); }
.center { text-align: center; margin-inline: auto; }

.sl { position: relative; display: inline-block; white-space: nowrap; }
.sl-t {
  display: inline-block;
  clip-path: inset(-10% 100% -20% 0);
  transition: clip-path 1.1s var(--ease-out) var(--d, 0s);
}
.sl-l {
  position: absolute;
  left: 0; top: 58%;
  width: 1.4em; height: .28em;
  transform: translateX(-100%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M2 8 C10 2 16 11 24 6 S38 2 44 7 54 9 58 4' fill='none' stroke='%236d28f5' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
}
.sl.in .sl-t { clip-path: inset(-10% -2% -20% 0); }
.sl.in .sl-l { animation: scribble 1.1s var(--ease-out) var(--d, 0s) forwards; }
@keyframes scribble {
  0%   { left: 0; opacity: 1; transform: translateX(-60%) scaleX(.6); }
  70%  { opacity: 1; }
  100% { left: 100%; opacity: 0; transform: translateX(-40%) scaleX(1.2); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out) var(--d, 0s), transform .9s var(--ease-out) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

.pop {
  opacity: 0;
  transform: scale(.4) rotate(-8deg);
  transition: opacity .5s ease var(--d, 0s), transform .9s var(--ease-spring) var(--d, 0s);
}
.pop.in { opacity: 1; transform: none; }

.float { animation: bob 5s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--pad);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled { box-shadow: 0 1px 0 var(--line); padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.logo svg { width: 18px; height: 18px; transition: transform .6s var(--ease-spring); }
.logo:hover svg { transform: rotate(90deg); }
.nav-links { display: flex; gap: 6px; }
.nav-links a {
  font-size: 16px; padding: 10px 18px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow);
  transition: background .25s ease, color .25s ease, transform .25s var(--ease-out);
}
.nav-links a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn-outline {
  font-size: 15px; padding: 11px 22px; border-radius: 999px;
  border: 1.5px solid var(--ink-2); transition: background .25s, color .25s;
}
.btn-outline:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.burger { display: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform .35s var(--ease-out); }
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 22px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.hero {
  position: relative;
  background: var(--bg);

  height: calc(100svh - var(--nav-h, 76px));
  min-height: 540px;
  overflow: hidden;
}
.hero-viewport { position: absolute; inset: 0; z-index: 2; overflow: hidden; touch-action: pan-y; cursor: grab; }
.hero-viewport.dragging { cursor: grabbing; }
.hero-track { display: flex; height: 100%; transition: transform 1s var(--ease-out); will-change: transform; }
.hero-track.dragging { transition: none; }
.slide {
  flex: 0 0 100%; height: 100%; position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr;
  padding: 28px var(--pad) 108px;
  user-select: none; -webkit-user-select: none;
  opacity: .35; transition: opacity .9s ease;
}
.slide.is-active { opacity: 1; }
.slide svg { -webkit-user-drag: none; }
.rings {
  position: absolute; left: 50%; top: 62%;
  width: 1500px; height: 1500px; translate: -50% -50%;
  fill: none; stroke: #e4e3ee; stroke-width: 1.2;
  animation: rings-breathe 9s ease-in-out infinite;
}
@keyframes rings-breathe { 50% { scale: 1.04; } }
.hero-title {
  grid-column: 1 / -1;
  position: relative; z-index: 3;
  font-weight: 400;
  font-size: clamp(44px, min(7.4vw, 11.5svh), 108px);
  line-height: .98;
  letter-spacing: -.035em;
  justify-self: center;
  display: flex; flex-direction: column;
  margin-left: -10%;
}
.hero-title .indent { margin-left: 1.7em; }

.phone-wrap {
  grid-column: 2; grid-row: 2;
  position: relative; z-index: 2;
  margin-top: 10px;
  transform: rotate(-6deg);
  animation: phone-rise 1.4s var(--ease-out) .2s both;
}
@keyframes phone-rise {
  from { opacity: 0; translate: 0 120px; rotate: 8deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

.phone {
  width: 250px; aspect-ratio: 9 / 19;
  border-radius: 40px;
  background: #111; padding: 9px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px #333;
  position: relative;
}
.phone .notch { position: absolute; top: 16px; left: 50%; translate: -50% 0; width: 70px; height: 20px; background: #111; border-radius: 20px; z-index: 2; }
.screen {
  height: 100%; border-radius: 32px; background: #fff;
  padding: 44px 14px 14px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; font-size: 10px;
}
.ph-head { display: flex; align-items: center; gap: 8px; }
.ph-head b { font-size: 11px; display: block; }
.ph-head small, .ph-row small { color: var(--muted); font-size: 9px; display: block; }
.coin { margin-left: auto; background: #fde68a; padding: 3px 8px; border-radius: 99px; font-weight: 600; font-size: 9px; }
.ph-tag { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.ph-tag i { font-style: normal; background: var(--violet); color: #fff; border-radius: 99px; padding: 0 5px; font-size: 8px; }
.ph-sub { font-weight: 600; margin-top: 4px; }
.ph-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ph-row b { font-size: 10px; font-weight: 600; }
.ph-row em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 9px; }
.dot { width: 18px; height: 18px; border-radius: 6px; flex: none; }
.d-blk { background: #111; } .d-grn { background: var(--green); } .d-red { background: #ef4444; }
.d-org { background: var(--orange); } .d-pur { background: var(--violet); } .d-blu { background: #3b82f6; }
.ph-btn { margin-top: auto; text-align: center; border: 1px solid var(--line); border-radius: 99px; padding: 7px; font-weight: 600; }

.av { display: block; width: 100%; height: 100%; border-radius: inherit; position: relative; overflow: hidden; }
.av::before { content: ""; position: absolute; left: 50%; top: 22%; width: 42%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--skin, #c58b62); }
.av::after { content: ""; position: absolute; left: 50%; bottom: -34%; width: 74%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--shirt, #f97316); }
.av-sm { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.a1 { background: #e9e5ff; --skin: #d7a27c; --shirt: #3b3b5c; }
.a2 { background: #fff2e6; --skin: #7a4a2e; --shirt: #f97316; }
.a3 { background: #fde68a; --skin: #f0c4a2; --shirt: #ef4444; }
.a4 { background: #fbcfd6; --skin: #f3cdb4; --shirt: #f6a5b5; }

.tile {
  position: absolute; z-index: 4;
  background: var(--surface); border-radius: 18px;
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
  display: grid; place-items: center;
}
.tile-pair { left: 29%; top: 46%; width: 92px; height: 92px; display: flex; gap: 4px; justify-content: center; }
.mini-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 15px; box-shadow: var(--shadow); }
.tile-avatar { right: 28%; top: 54%; width: 72px; height: 72px; padding: 6px; }
.tile-avatar .av { border-radius: 14px; }

.hero-left {
  grid-column: 1; grid-row: 2; align-self: end;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.25; letter-spacing: -.01em;
  position: relative; z-index: 3;
}
.hero-right { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; max-width: 400px; position: relative; z-index: 3; }
.hero-right p { font-size: 19px; line-height: 1.5; color: var(--muted); margin-bottom: 18px; }
.stores { display: flex; gap: 8px; flex-wrap: wrap; }
.stores.center { justify-content: center; }
.store {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; padding: 15px 26px; border-radius: 999px;
  font-size: 16px; font-weight: 500;
  transition: transform .35s var(--ease-spring), background .25s ease;
}
.store svg { width: 18px; height: 18px; }
.store:hover { background: var(--violet); transform: translateY(-3px) scale(1.03); }

.how { padding: clamp(80px, 12vw, 180px) var(--pad); display: grid; place-items: center; }
.how-inner { position: relative; }
.how-title {
  font-weight: 400; font-size: clamp(48px, 7vw, 100px); letter-spacing: -.035em;
  display: flex; align-items: center; gap: .25em; flex-wrap: wrap; justify-content: center;
}
.bolt-tile { position: absolute; left: -1em; top: 52%; width: 74px; height: 74px; color: var(--orange); rotate: -10deg; font-size: clamp(48px, 7vw, 100px); }
.bolt-tile svg { width: 34px; height: 34px; }
.bolt-tile.sm { width: 56px; height: 56px; font-size: inherit; }
.bolt-tile.sm svg { width: 26px; }

.pill-wrap { position: relative; display: inline-grid; place-items: center; }
.pill {
  position: relative; z-index: 2;
  display: inline-block;
  background: linear-gradient(135deg, var(--violet-2), var(--violet));
  color: #fff;
  padding: .02em .38em .1em;
  border-radius: .32em;
  rotate: -9deg;
  box-shadow: 0 18px 40px -12px rgba(109, 40, 245, .6), inset 0 -4px 0 rgba(0,0,0,.12);
  transition: rotate .6s var(--ease-spring);
}
.pill-wrap:hover .pill { rotate: 0deg; }
.pill-flat { rotate: 0deg; }
.pill-flat:hover { rotate: -4deg; }
.ripple {
  position: absolute; z-index: 1;
  width: 1.9em; aspect-ratio: 1; border-radius: 50%;
  border: .14em solid rgba(139, 92, 246, .22);
  box-shadow: 0 0 0 .18em rgba(139, 92, 246, .08), inset 0 0 0 .18em rgba(139, 92, 246, .08);
  animation: ripple 3.2s ease-out infinite;
}
.ripple.r2 { animation-delay: 1.6s; }
@keyframes ripple {
  0% { scale: .5; opacity: 0; }
  20% { opacity: 1; }
  100% { scale: 1.5; opacity: 0; }
}

.hack { background: var(--bg); padding: clamp(64px, 9vw, 120px) var(--pad); }
.sec-title { font-weight: 400; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.03em; display: flex; flex-direction: column; }
.sec-title.center { align-items: center; }
.lead { max-width: 800px; font-size: 21px; color: var(--muted); line-height: 1.6; margin-top: 20px; }

.bento {
  margin-top: 56px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, 1fr);
}
.card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity .9s var(--ease-out) var(--d, 0s);
}
.card.in:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card h3 { font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.card .body { font-size: 18px; color: var(--muted); line-height: 1.6; margin-top: 16px; max-width: 480px; }
.c-count { grid-column: span 3; text-align: center; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; }
.card-k { font-size: 24px; }
.big-num { font-size: clamp(64px, 6vw, 92px); font-weight: 400; letter-spacing: -.05em; color: var(--violet); line-height: 1; }
.big-num sup { font-size: .45em; vertical-align: top; position: relative; top: -.1em; }
.c-count small { color: var(--muted); font-size: 17px; }
.c-shop { grid-column: span 9; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.c-rewards { grid-column: span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.c-mail { grid-column: span 5; text-align: center; display: flex; flex-direction: column; align-items: center; }
.c-donut { grid-column: span 5; text-align: center; display: flex; flex-direction: column; align-items: center; }
.c-tabs { grid-column: span 7; display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; }
.c-mail .body, .c-donut .body { margin-inline: auto; }

.shop-visual { position: relative; min-height: 260px; }
.phone-sm { width: 170px; position: absolute; right: 18%; top: 0; }
.phone-sm .screen { padding-top: 36px; gap: 6px; }
.otp {
  position: absolute; right: 0; top: 70px;
  background: var(--violet); color: #fff; border-radius: 14px; padding: 10px 12px; z-index: 3;
  box-shadow: 0 14px 30px -10px rgba(109, 40, 245, .6);
}
.otp small { font-size: 9px; opacity: .85; }
.otp-digits { display: flex; gap: 4px; margin-top: 6px; }
.otp-digits i { font-style: normal; background: #fff; color: var(--ink); border-radius: 6px; width: 22px; height: 28px; display: grid; place-items: center; font-weight: 700; }
.sneaker {
  position: absolute; left: 4%; bottom: 10px; width: 160px;
  background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow-lg); z-index: 3;
}

.brands { display: flex; gap: 8px; margin-top: 22px; }
.b { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px; }
.b-a { background: #111; } .b-k { background: var(--orange); } .b-ad { background: #111; font-size: 11px; } .b-f { background: #38bdf8; }
.reward-visual { position: relative; min-height: 230px; }
.unlock {
  position: absolute; right: 0; top: 0; z-index: 3;
  background: var(--violet); color: #fff; border-radius: 12px; padding: 8px 12px;
  display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center;
}
.unlock small { grid-column: 1 / -1; font-size: 9px; opacity: .8; }
.unlock b { font-size: 18px; }
.reward-card {
  position: absolute; left: 10%; right: 10%; top: 26px;
  background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--shadow), 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.reward-card small { align-self: flex-start; font-weight: 600; font-size: 10px; }
.bar-line { width: 100%; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar-line i { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.6s var(--ease-out) .4s; }
.in .bar-line i { width: 62%; }
.headphones { font-size: 64px; filter: grayscale(1) contrast(1.1); }
.claim { border: 1px solid var(--line); border-radius: 99px; padding: 4px 24px; font-size: 10px; }
.reward-visual .av-sm { position: absolute; left: 0; top: 44%; width: 38px; height: 38px; border-radius: 10px; z-index: 3; box-shadow: var(--shadow); }

.at-tile { position: relative; width: 64px; height: 64px; font-size: 32px; font-weight: 700; color: var(--green); margin-bottom: 22px; }

.chart { position: relative; min-height: 250px; }
.bars { position: absolute; inset: 40px 0 0 6%; display: flex; align-items: flex-end; gap: 4px; }
.bars span {
  flex: 1; height: var(--h); background: var(--c);
  border-radius: 6px 6px 0 0; position: relative;
  transform-origin: bottom; transform: scaleY(0);
  transition: transform 1.2s var(--ease-spring) calc(.3s + var(--i) * .09s);
}
.bars em {
  position: absolute; top: 8px; left: 50%; translate: -50% 0;
  font-style: normal; font-size: 8px; font-weight: 700;
  background: rgba(255,255,255,.6); padding: 2px 4px; border-radius: 4px;
}
.in .bars span { transform: scaleY(1); }
.orders-card {
  position: absolute; right: 0; top: 0; z-index: 3; width: 130px;
  background: #fff; border-radius: 12px; padding: 10px; box-shadow: var(--shadow), 0 0 0 1px var(--line); font-size: 9px;
}
.orders-card small { color: var(--muted); }
.orders-card b { display: block; font-size: 16px; margin: 2px 0 6px; }
.orders-card ul { list-style: none; display: grid; gap: 4px; }
.orders-card li { display: flex; align-items: center; gap: 5px; }
.orders-card li i { width: 6px; height: 6px; border-radius: 50%; }
.orders-pill {
  position: absolute; left: 0; bottom: 30px; z-index: 3;
  display: flex; gap: 6px; align-items: center;
  background: #fff; border-radius: 12px; padding: 6px 10px; box-shadow: var(--shadow-lg); font-size: 10px;
}
.orders-pill > span { background: #fde68a; border-radius: 6px; padding: 3px; font-size: 10px; }
.orders-pill small { display: block; color: var(--muted); font-size: 8px; }

.guide { padding: clamp(80px, 11vw, 160px) var(--pad); }
.guide-title {
  position: relative;
  max-width: 820px; margin: 0 auto;
  font-size: clamp(46px, 7vw, 100px); letter-spacing: -.035em; line-height: 1.02;
  display: grid; grid-template-columns: repeat(10, 1fr);
}
.guide-title .g1 { grid-column: 5 / -1; }
.guide-title .g2 { grid-column: 1 / -1; justify-self: start; margin-left: .2em; }
.guide-title .g3 { grid-column: 4 / -1; }
.guide-title .g4 { grid-column: 2 / -1; }
.guide-title .ripple { width: 2.4em; }
.girl-tile { left: -.6em; top: 1.15em; width: 1.15em; height: 1.15em; padding: 0; overflow: hidden; border-radius: .22em; }
.girl-tile .av { border-radius: 0; }
.brand-tile { right: 0; top: .2em; width: 1.4em; height: .9em; display: flex; gap: .1em; justify-content: center; border-radius: .25em; }
.brand-tile .b { width: .45em; height: .45em; font-size: .22em; border-radius: .15em; color: #111; background: #fff; }
.guide-title .bolt-tile.sm { left: auto; right: 12%; top: auto; bottom: .2em; rotate: 0deg; }
.guide .lead { margin-top: 64px; font-size: 21px; }
.rule { border: 0; height: 1px; background: var(--line); max-width: 820px; margin: 40px auto; }
.tagline { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.35; margin-bottom: 28px; }

.benefits { padding: clamp(60px, 8vw, 120px) var(--pad); }
.panels {
  margin: 48px auto 0; max-width: 1100px;
  display: flex; gap: 14px; height: clamp(300px, 34vw, 440px);
}
.panel {
  flex: 1; min-width: 0;
  border-radius: 28px; background: var(--lav-1);
  position: relative; overflow: hidden;
  transition: flex 1s var(--ease-out), background .8s ease;
}
.panel:nth-child(2) { background: #cbb8fb; }
.panel.active { flex: 6; background: linear-gradient(135deg, #7c3aed, var(--violet)); }
.panel-body {
  position: absolute; inset: 0; padding: 7%;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; transform: translateY(20px) scale(.96);
  transition: opacity .4s ease, transform .4s ease;
}
.panel.active .panel-body { opacity: 1; transform: none; transition: opacity .7s ease .45s, transform .9s var(--ease-out) .45s; }
.dash-card {
  background: #fff; border-radius: 16px; padding: 18px; text-align: left; min-width: 220px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.35);
}
.dash-card small { color: var(--muted); font-size: 14px; }
.dash-card > b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.03em; margin: 6px 0 12px; }
.dash-card > b small { font-size: 10px; }
.dc-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.dc-top small { color: var(--ink); font-weight: 600; }
.dc-activity { align-self: flex-start; }
.dc-progress { align-self: flex-end; translate: 0 -10%; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.mini-bars i { flex: 1; height: var(--h); background: var(--lav-1); border-radius: 4px; transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease-spring); }
.mini-bars i.on { background: var(--violet); }
.panel.active .mini-bars i { transform: scaleY(1); }
.panel.active .mini-bars i { transition-delay: .55s; }
.prog { display: flex; gap: 3px; height: 5px; margin-bottom: 14px; }
.prog i { width: var(--w); border-radius: 3px; }
.rings3 { display: flex; gap: 18px; font-weight: 600; font-size: 13px; }
.rings3 span { display: grid; justify-items: center; gap: 4px; }
.rings3 i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--c); }
.rings3 small { font-size: 8px; font-weight: 400; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips span { background: var(--violet-soft); color: var(--violet); padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.spark-line svg { width: 100%; height: 60px; }
.spark-line path { stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1.6s var(--ease-out) .5s; }
.panel.active .spark-line path { stroke-dashoffset: 0; }

.panel-labels { max-width: 1100px; margin: 18px auto 0; display: flex; gap: 14px; }
.pl { flex: 1; display: flex; gap: 10px; align-items: flex-start; transition: flex 1s var(--ease-out); cursor: pointer; }
.pl > div { opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s ease; white-space: nowrap; }
.pl.active { flex: 6; }
.pl.active > div { opacity: 1; transform: none; transition-delay: .4s; }
.pl b { font-weight: 500; font-size: 24px; display: block; }
.pl small { color: var(--muted); font-size: 17px; }
.num { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; flex: none; position: relative; overflow: hidden; }
.pl.active .num { border-color: var(--violet); color: var(--violet); }
.pl.active .num::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: var(--violet); animation: fill var(--cycle, 5s) linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

.testi { padding: clamp(40px, 6vw, 80px) var(--pad); }
.testi-box { background: var(--bg); border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 48px); }
.testi-head { display: flex; justify-content: space-between; align-items: center; }
.sec-title.left { align-items: flex-start; }
.testi .sec-title { font-weight: 600; }
.arrows { display: flex; gap: 8px; }
.arr { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); font-size: 22px; line-height: 1; transition: background .25s, color .25s, transform .35s var(--ease-spring); }
.arr:hover { background: var(--ink); color: #fff; transform: scale(1.08); }
.t-viewport { overflow: hidden; margin-top: 40px; padding: 10px 0 40px; cursor: grab; }
.t-viewport:active { cursor: grabbing; }
.t-track { display: flex; gap: 18px; align-items: flex-start; transition: transform .9s var(--ease-out); will-change: transform; }
.t-card {
  flex: 0 0 calc((100% - 36px) / 3);
  background: #fff; border-radius: 20px; padding: 26px;
  box-shadow: var(--shadow);
  transition: transform .9s var(--ease-out), box-shadow .4s;
  user-select: none;
}
.t-card:nth-child(3n+2) { transform: translateY(36px); }
.t-card:nth-child(3n) { transform: translateY(18px); }
.t-card:hover { box-shadow: var(--shadow-lg); }
.t-q { font-size: 44px; line-height: .6; color: #e3e1ef; font-weight: 700; height: 22px; }
.t-card p { font-size: 18px; color: var(--muted); line-height: 1.65; margin: 18px 0 32px; }
.t-who { display: flex; gap: 10px; align-items: center; }
.t-who .av { width: 42px; height: 42px; border-radius: 50%; }
.t-who b { font-size: 17px; font-weight: 600; display: block; }
.t-who small { font-size: 15px; color: var(--muted); }
.t-foot { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.t-prog { width: 200px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.t-prog i { display: block; height: 100%; background: var(--ink); width: 11%; transition: width .9s var(--ease-out); }

.contact { background: var(--bg); padding: clamp(48px, 6vw, 88px) var(--pad) 28px; margin-top: 40px; }
.contact-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact .sec-title { font-size: clamp(28px, 3vw, 40px); font-weight: 600; }
.mail-link { font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -.02em; background: linear-gradient(var(--violet), var(--violet)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease-out), color .3s; }
.mail-link:hover { background-size: 100% 2px; color: var(--violet); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1.8fr; gap: 28px; margin-top: 56px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 8px; }
.col h4 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.col h4:not(:first-child) { margin-top: 14px; }
.col a { font-size: 17px; color: var(--muted); transition: color .2s, translate .3s var(--ease-out); }
.col a.lg { font-size: 21px; }
.col a:hover { color: var(--violet); translate: 4px 0; }
.socials { display: flex; gap: 8px; }
.socials a { width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); transition: transform .4s var(--ease-spring), background .2s, color .2s; }
.socials a:hover { background: var(--violet); color: #fff; translate: 0; transform: translateY(-4px) rotate(-6deg); }
.socials svg { width: 16px; height: 16px; }
.download { background: #fff; border-radius: 20px; padding: 22px; box-shadow: var(--shadow); display: flex; justify-content: space-between; gap: 16px; overflow: hidden; height: 200px; }
.dl-title { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.dl-btns { display: flex; gap: 10px; margin-top: 28px; }
.dl-btns a { display: grid; justify-items: center; gap: 6px; }
.dl-btns svg { width: 50px; height: 50px; padding: 14px; border-radius: 14px; background: var(--ink); color: #fff; transition: background .25s, transform .35s var(--ease-spring); }
.dl-btns a:hover svg { background: var(--violet); transform: translateY(-3px); }
.dl-btns small { font-size: 13px; color: var(--muted); }
.phone-xs { width: 120px; flex: none; border-radius: 26px; padding: 6px; translate: 0 6px; }
.phone-xs .notch { width: 40px; height: 12px; top: 11px; }
.phone-xs .screen { border-radius: 21px; padding: 28px 8px 8px; font-size: 8px; gap: 4px; }
.phone-xs .ph-row { padding: 4px 2px; }
.phone-xs .ph-row b { font-size: 8px; }
.phone-xs .dot { width: 12px; height: 12px; border-radius: 4px; }
.contact-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 48px; flex-wrap: wrap; }
.mega { font-size: clamp(64px, 13vw, 200px); letter-spacing: -.05em; line-height: 1.05; }
.mega .sl-t { padding-bottom: .12em; }
.legal { display: flex; gap: 22px; font-size: 15px; color: var(--muted); padding-bottom: 12px; }
.legal a:hover { color: var(--ink); }

@media (max-width: 1080px) {
  .c-count { grid-column: span 4; }
  .c-shop { grid-column: span 8; }
  .c-rewards, .c-tabs { grid-column: span 12; }
  .c-mail, .c-donut { grid-column: span 6; }
  .contact-grid { grid-template-columns: 1fr 1fr 1fr; }
  .download { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav-links, .nav .btn-outline { display: none; }
  .burger { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 16px; right: 16px;
    background: #fff; padding: 12px; border-radius: 20px; box-shadow: var(--shadow-lg);
    animation: drop .45s var(--ease-out);
  }
  .nav.open .nav-links a { box-shadow: none; font-size: 16px; }
  @keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }

  .hero { min-height: 520px; }
  .slide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 18px 20px 92px; text-align: left; }
  .hero-title { margin-left: 0; justify-self: start; font-size: clamp(40px, min(12vw, 7svh), 60px); }
  .phone-wrap { grid-column: 1; grid-row: 2; justify-self: center; align-self: center; margin-top: 8px; }
  .hero-left { grid-column: 1; grid-row: 3; margin-top: 10px; font-size: 21px; }
  .hero-right { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 12px; }
  .hero-right p { display: none; }
  .slide .tile { zoom: .78; }
  .slide .tile[data-depth="-22"] { left: 4%; right: auto; top: 36%; }
  .slide .tile[data-depth="28"] { right: 4%; left: auto; top: 50%; }
  .bolt-tile { left: -.2em; top: -1.2em; width: 58px; height: 58px; }

  .bento { grid-template-columns: 1fr; }
  .bento > .card { grid-column: auto; }
  .c-shop, .c-rewards, .c-tabs { grid-template-columns: 1fr; }
  .c-count { min-height: 220px; }

  .panels { flex-direction: column; height: auto; }
  .panel { min-height: 56px; transition: min-height 1s var(--ease-out), background .8s; }
  .panel.active { min-height: 340px; }
  .panel-body { flex-direction: column; padding: 20px; }
  .dc-activity, .dc-progress { align-self: center; translate: 0; }
  .dc-progress { display: none; }
  .panel-labels { flex-direction: column; gap: 10px; }
  .pl > div { white-space: normal; opacity: 1; transform: none; }

  .t-card { flex-basis: 85%; }
  .t-card:nth-child(n) { transform: none; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .guide-title .girl-tile { top: 1.05em; }
}
@media (max-width: 480px) {
  .contact-grid { grid-template-columns: 1fr; }
  .download { height: auto; }
  .phone-xs { display: none; }
  .t-prog { width: 120px; }
  .guide-title { font-size: 40px; }
}

.bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .c-shop, .c-rewards, .c-tabs { grid-template-columns: minmax(0, 1fr); }
  .sec-title .sl, .contact .sl { white-space: normal; }
  .mail-link { font-size: 22px; }
}
@media (max-width: 480px) {
  .guide-title .g1 { grid-column: 4 / -1; }
  .guide-title .g2 { margin-left: .9em; }
  .guide-title .g3 { grid-column: 2 / -1; }
  .guide-title .g4 { grid-column: 1 / -1; }
  .guide-title .girl-tile { left: -.2em; top: 1.1em; width: .95em; height: .95em; }
}

@media (max-width: 480px) {
  .lead, .guide .lead { font-size: 18px; }
  .card h3 { font-size: 24px; }
  .hero-right p { font-size: 17px; }
}

@media (max-width: 860px) {
  .nav { justify-content: flex-start; gap: 14px; }
  .burger { order: -1; z-index: 120; }
  .nav-links, .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 0; left: 0; right: auto; bottom: auto;
    width: min(82vw, 360px); height: 100vh; height: 100dvh;
    padding: 96px 28px 32px;
    background: var(--surface); border-radius: 0 28px 28px 0;
    box-shadow: 0 0 0 100vmax rgba(28, 18, 64, 0);
    transform: translateX(-102%);
    transition: transform .6s var(--ease-out), box-shadow .5s ease;
    z-index: 110; animation: none;
  }
  .nav.open .nav-links {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax rgba(28, 18, 64, .45), 30px 0 60px -20px rgba(28, 18, 64, .35);
  }
  .intro .nav-links a, .nav-links a {
    animation: none;
    background: none; box-shadow: none;
    font-size: 28px; font-weight: 500; letter-spacing: -.02em;
    padding: 12px 6px; border-radius: 0;
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateX(-30px);
    transition: opacity .4s ease, transform .5s var(--ease-out), color .2s;
  }
  .nav-links a:hover { background: none; color: var(--violet); transform: translateX(6px); }
  .nav.open .nav-links a { opacity: 1; transform: none; font-size: 28px; }
  .nav.open .nav-links a:nth-child(1) { transition-delay: .18s; }
  .nav.open .nav-links a:nth-child(2) { transition-delay: .24s; }
  .nav.open .nav-links a:nth-child(3) { transition-delay: .30s; }
  .nav.open .nav-links a:nth-child(4) { transition-delay: .36s; }
  .nav.open .nav-links a:nth-child(5) { transition-delay: .42s; }
  .nav.open .nav-links a:hover { transition-delay: 0s; }
  .nav.open .burger { background: var(--bg); box-shadow: none; }
  body.menu-open { overflow: hidden; }
}

.hero .phone { width: auto; height: clamp(300px, calc(100svh - var(--nav-h, 76px) - 330px), 528px); }
@media (max-width: 860px) {
  .hero .phone { height: clamp(220px, calc(100svh - var(--nav-h, 70px) - 390px), 440px); padding: 7px; border-radius: 32px; }
  .hero .phone .screen { border-radius: 26px; }
}

.tile-sneaker { left: 26%; top: 50%; width: 150px; padding: 12px 14px; }
.tile-otp { right: 26%; top: 42%; display: block; padding: 12px 14px; background: var(--violet); color: #fff; box-shadow: 0 18px 40px -14px rgba(109, 40, 245, .6); }
.tile-otp small { font-size: 12px; opacity: .85; }
.tile-head { left: 29%; top: 47%; width: 100px; height: 100px; font-size: 52px; }
.tile-head span { filter: grayscale(1) contrast(1.1); }
.tile-gift { right: 27%; top: 55%; display: block; padding: 12px 18px; }
.tile-gift small { display: block; font-size: 12px; color: var(--muted); }
.tile-gift b { font-size: 24px; color: var(--violet); font-weight: 600; }

.track-map {
  position: relative; height: 34%; flex: none; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, #e9e5ff 0 18%, transparent 19%),
    radial-gradient(circle at 75% 70%, #e2f7ea 0 22%, transparent 23%),
    repeating-linear-gradient(0deg, #f3f2f8 0 14px, #ebeaf3 14px 15px);
}
.track-map::before {
  content: ""; position: absolute; left: 14%; top: 22%; right: 16%; bottom: 20%;
  border: 2.5px dashed var(--violet); border-left: 0; border-bottom: 0; border-radius: 0 40px 0 0;
}
.track-map i {
  position: absolute; left: 14%; top: 22%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 0 5px rgba(109, 40, 245, .2);
  animation: route 4s ease-in-out infinite alternate;
}
.track-map b { position: absolute; right: 12%; bottom: 14%; width: 14px; height: 14px; border-radius: 4px; background: var(--green); }
@keyframes route {
  0%   { left: 14%; top: 22%; }
  60%  { left: 76%; top: 22%; }
  100% { left: 84%; top: 78%; }
}
.steps { list-style: none; display: grid; gap: 7px; padding: 4px 2px; font-size: 10px; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--green); border-color: var(--green); }
.steps li.now { color: var(--violet); font-weight: 600; }
.steps li.now::before { border-color: var(--violet); animation: step-pulse 1.4s ease-in-out infinite; }
@keyframes step-pulse { 50% { box-shadow: 0 0 0 5px rgba(109, 40, 245, .2); } }
.rw-big { background: linear-gradient(135deg, var(--violet-2), var(--violet)); color: #fff; border-radius: 16px; padding: 12px 14px; }
.rw-big small { font-size: 10px; opacity: .85; }
.rw-big b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -.03em; margin: 2px 0 8px; }
.rw-big .bar-line { background: rgba(255, 255, 255, .25); }
.rw-big .bar-line i { background: #fff; }
.slide.live .rw-big .bar-line i { width: 68%; }

.hero-ctrl { position: absolute; right: var(--pad); bottom: 30px; z-index: 6; display: flex; align-items: center; gap: 14px; }
.hc-count { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 58px; }
.hc-count b { color: var(--ink); font-weight: 600; }
.hc-bar { width: 110px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.hc-bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.hc-bar i.run { animation: tfill var(--hdur, 7s) linear forwards; }
.hc-bar.paused i { animation-play-state: paused; }
.hc-btn {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
  display: grid; place-items: center;
  transition: background .25s, color .25s, transform .45s var(--ease-spring);
}
.hc-btn svg { width: 20px; height: 20px; transition: transform .45s var(--ease-spring); }
.hc-btn:hover { background: var(--ink); color: #fff; transform: scale(1.08); }
.hc-prev:hover svg { transform: translateX(-3px); }
.hc-next:hover svg { transform: translateX(3px); }
.hc-btn:active { transform: scale(.92); }
.hc-next { background: var(--ink); color: #fff; }
.hc-next:hover { background: var(--violet); }
@media (max-width: 860px) {
  .hero-ctrl { right: 20px; bottom: 22px; gap: 10px; }
  .hc-bar { width: 56px; }
  .hc-btn { width: 48px; height: 48px; }
}

.store { position: relative; isolation: isolate; transition: transform .35s var(--ease-spring), color .45s ease .1s; }
.store-fill { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; }
.store-fill i {
  position: absolute; left: -10%; right: -10%; top: 0; height: 130%;
  background: #b9a2f7;
  transform: translateY(100%);
  transition: transform .7s var(--ease-out);
}
.store-fill i::before {
  content: ""; position: absolute; left: 0; top: -9px; width: 200%; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 V5 Q10 0 20 5 T40 5 T60 5 T80 5 V10z' fill='%23b9a2f7'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
  animation: wave 1.2s linear infinite;
}
@keyframes wave { to { transform: translateX(-50%); } }
.store:hover { background: var(--ink); color: var(--ink); transform: translateY(-2px); }
.store:hover .store-fill i { transform: translateY(-12%); }
.store::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 2px solid rgba(139, 92, 246, .7); opacity: 0; pointer-events: none;
}
.store:hover::after { animation: ring-out 1s var(--ease-out) forwards; }
@keyframes ring-out {
  0% { inset: -2px; opacity: 1; }
  100% { inset: -12px; opacity: 0; border-width: 1px; }
}
.particle {
  position: fixed; z-index: 60; pointer-events: none;
  width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%;
  background: #9d7cf5;
  animation: burst .9s var(--ease-out) forwards;
}
@keyframes burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; }
}

.pill-wrap.pop { opacity: 1; transform: none; }
.pill-wrap::before {
  content: ""; position: absolute; z-index: 0;
  width: 2.3em; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 28%, rgba(139,92,246,.28) 34%, transparent 41%, rgba(139,92,246,.2) 48%, transparent 56%, rgba(139,92,246,.12) 62%, transparent 70%);
  filter: blur(3px);
  opacity: 0; transform: scale(.4);
  transition: opacity .8s ease var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s);
}
.pill-wrap.in::before { opacity: 1; transform: scale(1); }
.pill-wrap .pill {
  opacity: 0; transform: scale(.82) rotate(-12deg); filter: saturate(.3) brightness(1.4);
  transition: opacity .9s ease calc(var(--d, 0s) + .45s),
              transform 1s var(--ease-spring) calc(var(--d, 0s) + .45s),
              filter 1s ease calc(var(--d, 0s) + .6s),
              rotate .6s var(--ease-spring);
}
.pill-wrap.in .pill { opacity: 1; transform: none; filter: none; }
.pill-wrap .ripple { opacity: 0; transition: opacity .6s ease var(--d, 0s); }
.pill-wrap.in .ripple { opacity: 1; }

.guide-title .g2 .pill { transform: scale(.4) translate(-30%, 60%); transform-origin: left center; }
.guide-title .g2.in .pill { transform: none; }
.guide-title .girl-tile.pop { transform: scale(.9); filter: blur(6px) saturate(.2); transition: opacity 1s ease var(--d), transform 1s var(--ease-out) var(--d), filter 1s ease var(--d); }
.guide-title .girl-tile.pop.in { filter: none; transform: none; }

.bolt-tile.pop { transform: perspective(400px) rotateY(200deg) scale(.5); transition: opacity .4s ease var(--d), transform 1.2s var(--ease-out) var(--d); }
.bolt-tile.pop.in { transform: none; }

.brand-tile { width: 1.5em; height: .95em; overflow: hidden; display: block; padding: 0; }
.logo-track {
  position: absolute; top: 50%; left: .45em; translate: 0 -50%;
  display: flex; gap: .1em;
  animation: logos 8s var(--ease-out) infinite;
}
.logo-track i {
  flex: none; width: .6em; height: .6em; border-radius: 50%;
  background: var(--bg); display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: .26em; color: var(--ink);
  width: 2.3em; height: 2.3em; line-height: 1; letter-spacing: 0;
}
@keyframes logos {
  0%, 18%   { transform: translateX(0); }
  25%, 43%  { transform: translateX(-.7em); }
  50%, 68%  { transform: translateX(-1.4em); }
  75%, 93%  { transform: translateX(-2.1em); }
  100%      { transform: translateX(-2.8em); }
}

.ink .w { opacity: .14; transition: opacity .7s ease calc(var(--d, 0s) + var(--wi) * 18ms); }
.ink.in .w { opacity: 1; }

.card.reveal { filter: blur(10px); transform: translateY(40px) scale(.97); }
.card.reveal.in { filter: blur(0); transform: none; }
.card { transition: transform .9s var(--ease-out) var(--d, 0s), box-shadow .5s var(--ease-out), opacity .9s var(--ease-out) var(--d, 0s), filter .9s var(--ease-out) var(--d, 0s); }
.card.reveal.in:hover { transform: translateY(-6px); transition-delay: 0s; }
.card .phone-sm, .card .sneaker, .card .otp, .card .reward-card, .card .unlock {
  opacity: 0; translate: 0 30px; transition: opacity .8s ease, translate 1s var(--ease-out);
}
.card.in .phone-sm, .card.in .reward-card { opacity: 1; translate: 0; transition-delay: .3s; }
.card.in .sneaker, .card.in .unlock { opacity: 1; translate: 0; transition-delay: .55s; }
.card.in .otp { opacity: 1; translate: 0; transition-delay: .7s; }

.t-prog i { width: 0; transition: none; }
.t-prog i.run { animation: tfill var(--tdur, 4.5s) linear forwards; }
@keyframes tfill { from { width: 0; } to { width: 100%; } }
.t-card { opacity: 0; translate: 0 50px; transition: transform .9s var(--ease-out), box-shadow .4s, opacity .8s ease, translate 1s var(--ease-out); }
.testi-box.in .t-card { opacity: 1; translate: 0; }
.testi-box.in .t-card:nth-child(2) { transition-delay: 0s, 0s, .12s, .12s; }
.testi-box.in .t-card:nth-child(3) { transition-delay: 0s, 0s, .24s, .24s; }

.intro .logo, .intro .nav-links a, .intro .btn-outline { animation: drop-in .9s var(--ease-out) both; }
.intro .nav-links a:nth-child(1) { animation-delay: .1s; }
.intro .nav-links a:nth-child(2) { animation-delay: .16s; }
.intro .nav-links a:nth-child(3) { animation-delay: .22s; }
.intro .nav-links a:nth-child(4) { animation-delay: .28s; }
.intro .nav-links a:nth-child(5) { animation-delay: .34s; }
.intro .btn-outline { animation-delay: .4s; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } }

.slide .tile { opacity: 0; scale: .7; transition: opacity .8s ease, scale 1s var(--ease-spring); }
.slide.live .tile[data-depth="-22"] { opacity: 1; scale: 1; transition-delay: .9s; }
.slide.live .tile[data-depth="28"] { opacity: 1; scale: 1; transition-delay: 1.2s; }
.slide .phone-wrap { animation: none; opacity: 0; translate: 0 140px; rotate: 10deg; transition: opacity .8s ease .3s, translate 1.4s var(--ease-out) .3s, rotate 1.4s var(--ease-out) .3s; }
.slide.live .phone-wrap { opacity: 1; translate: 0 0; rotate: 0deg; }

.curtain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--frame);
  transform: translateY(100%);
}
.curtain.run { animation: curtain 1.3s var(--ease-out) forwards; }
@keyframes curtain {
  0%   { transform: translateY(100%); }
  45%, 55% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
.to-top { color: var(--ink); font-weight: 600; }

.waves { position: absolute; left: 50%; top: 62%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.waves span {
  position: absolute; left: 0; top: 0;
  width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  border-radius: 50%;
  border: 1.5px solid #d9d6ea;
  opacity: 0; transform: scale(.08);
  animation: wave-out 10s linear infinite;
}
.waves span:nth-child(2) { animation-delay: -2s; }
.waves span:nth-child(3) { animation-delay: -4s; }
.waves span:nth-child(4) { animation-delay: -6s; }
.waves span:nth-child(5) { animation-delay: -8s; }
@keyframes wave-out {
  0%   { transform: scale(.08); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: .6; }
  100% { transform: scale(1); opacity: 0; }
}

.rings { animation: rings-spin 60s linear infinite; }
@keyframes rings-spin { to { rotate: 360deg; } }
.rings circle { transform-box: fill-box; transform-origin: center; animation: ring-drift 6s ease-in-out infinite; }
.rings circle:nth-child(2) { animation-delay: -1.2s; }
.rings circle:nth-child(3) { animation-delay: -2.4s; }
.rings circle:nth-child(4) { animation-delay: -3.6s; }
.rings circle:nth-child(5) { animation-delay: -4.8s; }
@keyframes ring-drift { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.hero::before {
  content: ""; position: absolute; left: 50%; top: 58%; z-index: 0;
  width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .16), transparent 65%);
  animation: glow-drift 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(90px, -40px) scale(1.15); }
  66%      { transform: translate(-80px, 30px) scale(.92); }
}

.hero .phone { animation: phone-idle 6s ease-in-out infinite; }
@keyframes phone-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

.mini-ico b { display: block; font-size: 15px; line-height: 1; animation: spin 4s linear infinite; }
.mini-ico + .mini-ico b { animation-direction: reverse; animation-duration: 5s; }
@keyframes spin { to { transform: rotate(360deg); } }

.tile-avatar .av { animation: tilt 5s ease-in-out infinite; }
@keyframes tilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.pill-wrap.in .pill { animation: wobble 5s ease-in-out 1.6s infinite; }
@keyframes wobble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.at-tile.in { animation: at-bounce 3.2s ease-in-out 1s infinite; }
@keyframes at-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.bolt-tile.in svg { animation: nod 2.6s ease-in-out 1.2s infinite; }
@keyframes nod { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-12deg) scale(1.08); } }

.panel.active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.download .phone-xs { animation: phone-idle 5s ease-in-out infinite; }

.nav { top: env(safe-area-inset-top, 0px); }
.logo .muted { color: var(--muted-accent); font-weight: 500; margin-left: -4px; }

.phone-wrap { position: relative; }
.fly {
  position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px;
  background: var(--surface); border-radius: 16px; font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  opacity: 0; transform: translate(-50%, -50%);
  animation: flyin 9s cubic-bezier(.55, 0, .25, 1) infinite;
  animation-delay: var(--fdl, 0s);
}
.fly b { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 12px; flex: none; }
.fly small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }
.fly .f1 { background: var(--green); } .fly .f2 { background: var(--orange); } .fly .f3 { background: var(--violet); }
.fly .f4 { background: #3b82f6; } .fly .f5 { background: #ef4444; } .fly .f6 { background: #25d366; }
@keyframes flyin {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.85) rotate(var(--fr)); }
  8%   { opacity: 1; }
  34%  { opacity: 1; transform: translate(calc(-50% + var(--fx) * .62), calc(-50% + var(--fy) * .62)) scale(1) rotate(0deg); }
  46%  { opacity: 1; transform: translate(calc(-50% + var(--fx) * .62), calc(-50% + var(--fy) * .62)) scale(1) rotate(0deg); }
  60%  { opacity: .9; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
  66%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
}
.slide:first-child .phone { animation: phone-idle 6s ease-in-out infinite, phone-pulse 9s ease-in-out infinite; }
@keyframes phone-pulse {
  0%, 56%, 100% { box-shadow: var(--shadow-lg), inset 0 0 0 2px #333, 0 0 0 0 rgba(109, 40, 245, 0); }
  62%  { box-shadow: var(--shadow-lg), inset 0 0 0 2px #333, 0 0 0 26px rgba(109, 40, 245, .22); }
  78%  { box-shadow: var(--shadow-lg), inset 0 0 0 2px #333, 0 0 0 60px rgba(109, 40, 245, 0); }
}
.hero-left b { color: var(--violet); font-weight: 600; }

.scroll-cue {
  position: absolute; left: var(--pad); bottom: 34px; z-index: 6;
  display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted);
}
.scroll-cue i { width: 26px; height: 42px; border-radius: 14px; border: 2px solid var(--ink-2); position: relative; flex: none; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--violet); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 16px; } }
.scroll-cue:hover { color: var(--violet); }
@media (max-width: 860px) { .scroll-cue { display: none; } .fly { zoom: .8; } }

.site-prev { position: relative; height: 34%; flex: none; border-radius: 14px; background: #f3f2f8; padding: 9px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.site-prev i { display: block; height: 10px; border-radius: 4px; background: var(--violet); transform-origin: left; animation: sp-a 5s var(--ease-out) infinite; }
.site-prev b { display: block; flex: 1; border-radius: 8px; background: linear-gradient(135deg, #ede6ff, #cdbcff); transform-origin: top; animation: sp-b 5s var(--ease-out) infinite; }
.site-prev u { display: block; height: 6px; border-radius: 3px; background: #dcdbe8; width: 80%; transform-origin: left; animation: sp-c 5s var(--ease-out) infinite; }
.site-prev u + u { width: 56%; animation-delay: .15s; }
@keyframes sp-a { 0% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } }
@keyframes sp-b { 0%, 10% { transform: scaleY(0); } 34%, 100% { transform: scaleY(1); } }
@keyframes sp-c { 0%, 30% { transform: scaleX(0); } 52%, 100% { transform: scaleX(1); } }
.ok-b { color: var(--green); font-size: 22px; font-weight: 600; }
.coin-big { font-size: 54px; font-weight: 600; color: var(--violet); line-height: 1; }

.panels { max-width: 1180px; }
.panel { background: #2a1f5c; }
.panel:nth-child(2) { background: #2a1f5c; }
.panel.active { flex: 7; background: #2a1f5c; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease-out), filter .8s; filter: saturate(.8) brightness(.75); }
.panel.active img { transform: scale(1); filter: none; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28, 18, 64, 0) 40%, rgba(28, 18, 64, .55)); pointer-events: none; }
.panel:not(.active)::before { background: linear-gradient(135deg, rgba(109, 40, 245, .5), rgba(28, 18, 64, .55)); }
.panel-body { z-index: 2; justify-content: flex-start; align-items: flex-end; }
.panel .dash-card { min-width: 230px; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .5); }
.panel.active::after { z-index: 3; }
.panels { height: clamp(320px, 38vw, 500px); }
.slots { display: grid; gap: 6px; }
.slots span { border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.slots .s1 { background: #e6f7ee; color: #17803f; } .slots .s2 { background: #ede6ff; color: var(--violet); } .slots .s3 { background: #fff1e6; color: #c2531a; }
.rings3 { flex-wrap: wrap; }
@media (max-width: 860px) {
  .panel { min-height: 64px; }
  .panel.active { min-height: 380px; }
  .panel-body { align-items: flex-end; justify-content: flex-start; }
}

.asst-grid { max-width: 1100px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ai-card { background: var(--bg); border-radius: 24px; padding: 24px; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity .9s var(--ease-out) var(--d, 0s); }
.ai-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ai-card b { display: block; font-weight: 600; font-size: 21px; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 8px; }
.ai-card span { font-size: 17px; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) { .asst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .asst-grid { grid-template-columns: minmax(0, 1fr); } }

.t-card.mod .mi { width: 84px; height: 64px; margin-bottom: 16px; }
.t-card.mod h3 { font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
.t-card.mod p { margin: 10px 0 0; font-size: 17px; }
.gauge { stroke-dasharray: 100; animation: gauge 5s ease-in-out infinite; }
@keyframes gauge { 0% { stroke-dashoffset: 100; } 45%, 85% { stroke-dashoffset: 22; } 100% { stroke-dashoffset: 100; } }
.gb { transform-box: fill-box; transform-origin: bottom; animation: gbar 3.4s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes gbar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.spin { transform-origin: 42px 32px; animation: spin 8s linear infinite; }
.cur { animation: cur 3.6s ease-in-out infinite; }
@keyframes cur { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-18px, -14px); } 70% { transform: translate(-8px, 6px); } }
.bell { transform-box: fill-box; transform-origin: 50% 8%; animation: ringb 2.6s ease-in-out infinite; }
@keyframes ringb { 0%, 60%, 100% { rotate: 0deg; } 10% { rotate: 14deg; } 20% { rotate: -12deg; } 30% { rotate: 8deg; } 40% { rotate: -6deg; } }

.faq-sec { padding: clamp(40px, 6vw, 90px) var(--pad); }
.faq { max-width: 860px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--bg); border-radius: 22px; padding: 0 26px; transition: box-shadow .4s; }
.faq details[open] { box-shadow: var(--shadow); background: #fff; }
.faq summary { list-style: none; cursor: pointer; font-weight: 500; font-size: 21px; letter-spacing: -.01em; padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 30px; line-height: 1; color: var(--violet); transition: rotate .4s var(--ease-spring); flex: none; }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { padding: 0 0 24px; color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 720px; }

.sign-mini { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; background: #fff; border-radius: 99px; padding: 9px 16px 9px 12px; box-shadow: var(--shadow), 0 0 0 1px var(--line); font-weight: 600; font-size: 15px; }
.sign-mini svg { width: 16px; height: 16px; color: var(--violet); }
.sign-mini em { font-style: normal; color: var(--muted-accent); font-weight: 500; }
.sign-note { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 6px; }
.download.demo-form { flex-direction: column; justify-content: flex-start; gap: 12px; height: auto; }
.df-row { display: flex; gap: 8px; }
.df-row input, .df-row select { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.df-row input:focus, .df-row select:focus { outline: none; border-color: var(--violet); }
.df-row .store { padding: 12px 24px; flex: none; }
.df-ok { display: none; color: var(--violet); font-weight: 600; font-size: 14px; }
.demo-form.sent .df-ok { display: block; }
@media (max-width: 480px) { .df-row { flex-direction: column; } }

.contact-bottom .legal { flex-wrap: wrap; }
.hero-title .sl { white-space: normal; }

.chaos { padding: clamp(72px, 10vw, 150px) var(--pad) clamp(40px, 6vw, 80px); background: var(--surface); }
.how-line { display: flex; align-items: center; justify-content: center; gap: .3em; flex-wrap: wrap; }
.chaos .sec-title { font-size: clamp(38px, 5.6vw, 84px); }
.chaos .lead { margin-top: 28px; }
.chaos-stage { position: relative; max-width: 1040px; height: clamp(360px, 46vw, 520px); margin: 48px auto 0; border-radius: 40px; background: var(--bg); overflow: hidden; }
.counter { position: absolute; left: 50%; top: 18px; translate: -50% 0; z-index: 6; display: flex; align-items: baseline; gap: 12px; background: #fff; border-radius: 99px; padding: 8px 26px 8px 22px; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.counter b { font-size: clamp(34px, 4vw, 52px); font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1; min-width: .6em; text-align: center; transition: color .4s; }
.counter span { font-size: 16px; color: var(--muted); }
.chaos-stage.on .counter b { color: var(--green); }
.hub { position: absolute; left: 50%; top: 53%; width: 76%; height: 70%; translate: -50% -50%; border-radius: 34px; background: linear-gradient(135deg, var(--violet-2), var(--violet)); box-shadow: 0 40px 80px -30px rgba(109, 40, 245, .6); opacity: 0; scale: .7; transition: opacity .7s ease, scale 1s var(--ease-spring); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; z-index: 1; }
.hub span { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.hub em { font-style: normal; opacity: .7; font-weight: 500; }
.chaos-stage.on .hub { opacity: 1; scale: 1; }
.chips-field { position: absolute; inset: 0; z-index: 3; }
.ch { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 10px 16px; font-weight: 600; font-size: clamp(13px, 1.4vw, 16px); white-space: nowrap; box-shadow: var(--shadow), 0 0 0 1px var(--line); rotate: var(--r); translate: 0 0; transition: left .9s var(--ease-out) var(--d), top .9s var(--ease-out) var(--d), rotate .9s var(--ease-out) var(--d), box-shadow .5s; animation: jit 2.4s ease-in-out infinite; animation-delay: var(--d); }
.ch i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
@keyframes jit { 0%, 100% { translate: 0 0; } 25% { translate: 3px -4px; } 50% { translate: -3px 2px; } 75% { translate: 2px 3px; } }
.chaos-stage.on .ch { left: var(--tx); top: var(--ty); rotate: 0deg; animation: none; translate: -50% -50%; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35); }
.chaos-stage:not(.on) .ch { transform: translate(0, 0); }
.chaos-ctrl { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 700px) {
  .ch { padding: 8px 11px; font-size: 12px; gap: 6px; }
  .hub { width: 94%; }
  .chaos-stage { border-radius: 28px; }
}

@keyframes zw0{0%,10.0%{opacity:0;transform:translateY(16px) scale(.92)}12.6%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(152px,69px) scale(.15)}100%{opacity:0}}
@keyframes zw1{0%,14.5%{opacity:0;transform:translateY(16px) scale(.92)}17.1%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(4px,53px) scale(.15)}100%{opacity:0}}
@keyframes zw2{0%,19.0%{opacity:0;transform:translateY(16px) scale(.92)}21.6%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(-146px,73px) scale(.15)}100%{opacity:0}}
@keyframes zw3{0%,23.5%{opacity:0;transform:translateY(16px) scale(.92)}26.1%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(126px,-7px) scale(.15)}100%{opacity:0}}
@keyframes zw4{0%,28.0%{opacity:0;transform:translateY(16px) scale(.92)}30.6%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(-34px,-25px) scale(.15)}100%{opacity:0}}
@keyframes zw5{0%,32.5%{opacity:0;transform:translateY(16px) scale(.92)}35.1%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(-164px,-7px) scale(.15)}100%{opacity:0}}
@keyframes zw6{0%,37.0%{opacity:0;transform:translateY(16px) scale(.92)}39.6%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(84px,-69px) scale(.15)}100%{opacity:0}}
@keyframes zw7{0%,41.5%{opacity:0;transform:translateY(16px) scale(.92)}44.1%{opacity:1;transform:none}62%{opacity:1;transform:none}68%{opacity:0;transform:translate(-76px,-71px) scale(.15)}100%{opacity:0}}
@keyframes tm0{0%,16.39%{opacity:1}16.40%,100%{opacity:0}}
@keyframes tm1{0%,16.39%{opacity:0}16.40%,26.79%{opacity:1}26.80%,100%{opacity:0}}
@keyframes tm2{0%,26.79%{opacity:0}26.80%,37.19%{opacity:1}37.20%,100%{opacity:0}}
@keyframes tm3{0%,37.19%{opacity:0}37.20%,47.59%{opacity:1}47.60%,100%{opacity:0}}
@keyframes tm4{0%,47.59%{opacity:0}47.60%,57.99%{opacity:1}58.00%,100%{opacity:0}}
@keyframes tm5{0%,57.99%{opacity:0}58.00%,95.99%{opacity:1}96.00%,100%{opacity:0}}

:root { --violet2: #8b5cf6; --soft: #a09cba; --font: "Urbanist", system-ui, sans-serif; }

.chaos { padding: clamp(40px, 6vw, 84px) var(--pad) clamp(14px, 2.5vw, 28px); }
.chaos .lead { margin-top: 20px; }
.chaos-stage { margin-top: 32px; }
.chaos-ctrl { margin-top: 20px; }
.hack { padding: clamp(36px, 5vw, 72px) var(--pad); }
.bento { margin-top: 32px; }
.benefits { padding: clamp(32px, 5vw, 64px) var(--pad); }
.panels { margin-top: 30px; }
.guide { padding: clamp(44px, 6vw, 84px) var(--pad); }
.guide .lead { margin-top: 32px; }
.asst-grid { margin-top: 32px; }
.rule { margin: 26px auto; }
.testi { padding: clamp(16px, 3vw, 36px) var(--pad); }
.faq-sec { padding: clamp(24px, 4vw, 52px) var(--pad); }
.faq { margin-top: 28px; }
.contact { margin-top: 12px; padding-top: clamp(36px, 5vw, 64px); }
.contact-grid { margin-top: 36px; }
.contact-bottom { margin-top: 24px; }
.lead { margin-top: 16px; }

.dark-box { margin: clamp(12px, 2.2vw, 26px) var(--pad); border-radius: 44px; background: var(--frame); color: #fff; padding: clamp(36px, 5.5vw, 76px) clamp(16px, 4vw, 60px); position: relative; overflow: hidden; }
.dark-box::before { content: ""; position: absolute; left: 50%; top: -30%; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .3), transparent 65%); pointer-events: none; }
.dark-box > * { position: relative; }
.dark-box .sec-title { color: #fff; }
.dark-box .muted { color: #a79bd6; }
.dark-box .lead { color: #cbc5ee; }
.dark-box .sl-l { filter: brightness(1.9) saturate(1.3); }
.dark-box .store, .dark-box .store:hover { background: #fff; color: #1b1446; }
.dark-box .pill-wrap::before { opacity: .9; }
.eyebrow { text-align: center; width: 100%; color: #a79bd6; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; margin-bottom: 12px; }

.zwrap { max-width: 1000px; margin: 28px auto 24px; }
.zscene { width: 100%; height: auto; animation: zfade 14s linear infinite; overflow: visible; }
@keyframes zfade { 0% { opacity: 0; } 3%, 94% { opacity: 1; } 100% { opacity: 0; } }
.zscene text { font-family: var(--font); }
.zmh { transform-box: view-box; transform-origin: 170px 190px; animation: zmh 14s ease-in-out infinite; }
@keyframes zmh { 0%, 6% { rotate: 0deg; } 58%, 100% { rotate: 300deg; } }
.zhh { transform-box: view-box; transform-origin: 170px 190px; animation: zhh 14s ease-in-out infinite; }
@keyframes zhh { 0%, 6% { rotate: 270deg; } 58%, 100% { rotate: 295deg; } }
.ztm { fill: #fff; opacity: 0; animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: steps(1, end); }
.ztm.zlate { fill: #ff8a5c; }
.zw { opacity: 0; animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: ease-out; transform-box: fill-box; transform-origin: center; }
.zpanel { opacity: 0; animation: zpanel 14s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes zpanel { 0%, 66% { opacity: 0; transform: scale(.8); } 74%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.zperson { animation: zperson 14s ease-out infinite; }
@keyframes zperson { 0% { transform: translateX(-90px); opacity: 0; } 6%, 100% { transform: none; opacity: 1; } }

.who { margin: clamp(12px, 2.2vw, 26px) var(--pad); border-radius: 44px; background: #e6eaff; padding: clamp(26px, 4vw, 60px); display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; position: relative; overflow: hidden; }
.who-title { font-weight: 500; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.035em; display: flex; flex-direction: column; }
.who-title .sl { white-space: normal; }
.who-btns { display: flex; gap: 22px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.who-btn { background: #0b0b12; color: #fff; border-radius: 99px; padding: 18px 34px; font-weight: 600; font-size: 17px; transition: transform .35s var(--ease-spring), background .25s; }
.who-btn:hover { background: var(--violet); transform: translateY(-3px); }
.who-link { font-weight: 600; font-size: 17px; border-bottom: 2px solid currentColor; padding-bottom: 4px; transition: color .2s; }
.who-link:hover { color: var(--violet); }
.who-stats { position: relative; margin-top: 56px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); align-items: end; max-width: 640px; }
.ws-blue { background: #9fc0e8; border-radius: 28px; padding: 24px; position: relative; min-height: 236px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; z-index: 2; }
.ws-arrow { position: absolute; right: -10px; top: -46px; width: 58px; height: 58px; border-radius: 18px; background: #9fc0e8; display: grid; place-items: center; font-size: 26px; }
.ws-av { display: flex; margin-bottom: 14px; }
.ws-av .av { width: 44px; height: 44px; border: 3px solid #fff; margin-right: -10px; flex: none; }
.ws-more { width: 44px; height: 44px; border-radius: 50%; background: #1b1446; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; border: 3px solid #fff; }
.ws-blue small { font-size: 16px; }
.ws-blue b { font-size: clamp(34px, 3.4vw, 46px); font-weight: 600; letter-spacing: -.02em; }
.ws-black { background: #0b0b12; color: #fff; border-radius: 0 28px 28px 28px; padding: 26px 24px 26px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; min-height: 196px; margin-left: -28px; }
.ws-black b { display: block; font-size: clamp(34px, 3.6vw, 50px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.ws-black small { display: block; font-size: 14px; opacity: .85; margin-top: 6px; line-height: 1.35; }
.ws-wide { grid-column: 1 / -1; }
.ws-badge { position: absolute; left: 33%; bottom: -26px; width: 112px; height: 112px; z-index: 3; filter: drop-shadow(0 12px 24px rgba(27, 20, 70, .25)); }
.ws-badge text { font-family: var(--font); }
.ws-rot { transform-origin: 60px 60px; animation: spin 16s linear infinite; }
.who-photos { position: relative; min-height: clamp(380px, 42vw, 560px); }
.wp { position: absolute; object-fit: cover; border-radius: 18px; border: 6px solid #fff; box-shadow: 0 24px 50px -24px rgba(27, 20, 70, .45); animation: wbob 7s ease-in-out infinite; max-width: none; }
.p1 { left: 20%; top: 0; width: 56%; aspect-ratio: 4/3; rotate: -2deg; z-index: 2; }
.p2 { right: 0; top: 14%; width: 40%; aspect-ratio: 1/1; rotate: 3deg; animation-delay: -2s; z-index: 3; }
.p3 { left: 0; top: 36%; width: 46%; aspect-ratio: 4/3; rotate: -3deg; animation-delay: -4s; z-index: 4; }
.p4 { left: 46%; top: 54%; width: 28%; aspect-ratio: 1/1; rotate: 2deg; animation-delay: -1s; z-index: 5; }
.p5 { left: 24%; bottom: 0; width: 32%; aspect-ratio: 4/3; rotate: -1deg; animation-delay: -3s; z-index: 6; }
@keyframes wbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.who-blob { position: absolute; right: 0; bottom: 0; width: 132px; height: 132px; border-radius: 50%; background: #0b0b12; color: #fff; display: grid; place-content: center; text-align: center; font-size: 15px; line-height: 1.2; z-index: 7; transition: transform .5s var(--ease-spring), background .25s; }
.who-blob i { font-style: normal; font-size: 22px; margin-top: 6px; }
.who-blob:hover { transform: scale(1.08) rotate(-6deg); background: var(--violet); }
@media (max-width: 900px) {
  .who { grid-template-columns: 1fr; }
  .who-stats { max-width: none; }
  .who-photos { min-height: 440px; }
}
@media (max-width: 520px) {
  .ws-black { padding-left: 44px; gap: 16px 10px; }
  .ws-badge { width: 92px; height: 92px; left: 30%; }
}

.panels { max-width: 1180px; height: clamp(340px, 40vw, 520px); }
.panel.active { flex: 6; }
.pt { position: absolute; left: calc(50% - .55em); top: 22px; z-index: 3; color: #fff; font-weight: 600; font-size: 15px; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; transition: opacity .4s; }
.panel.active .pt { opacity: 0; }
.panel-body { z-index: 3; }
.panel img { filter: saturate(.85) brightness(.8); }
@media (max-width: 860px) {
  .panels { height: auto; }
  .pt { writing-mode: horizontal-tb; rotate: 0deg; left: 20px; top: 20px; font-size: 16px; }
  .panel { min-height: 62px; }
  .panel.active { min-height: 400px; }
}

.gwrap { max-width: 1000px; margin: 28px auto 8px; }
.gscene { width: 100%; height: auto; animation: gfade 18s linear infinite; overflow: visible; }
@keyframes gfade { 0% { opacity: 0; } 3%, 95% { opacity: 1; } 100% { opacity: 0; } }
.gscene text { font-family: var(--font); }
.gtypeo { transform-box: fill-box; transform-origin: 0 50%; animation: gtypeo 18s ease-out infinite; }
@keyframes gtypeo { 0%, 4% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } }
.glink { opacity: 0; animation: glink 18s ease-out infinite; }
@keyframes glink { 0%, 14% { opacity: 0; } 20%, 56% { opacity: 1; } 64%, 100% { opacity: .22; } }
.gque { opacity: 0; animation: gque 18s ease-out infinite; }
@keyframes gque { 0%, 58% { opacity: 0; } 66%, 100% { opacity: 1; } }
.gkid { animation: gkid 18s ease-out infinite; }
@keyframes gkid { 0%, 24% { transform: translateX(300px); opacity: 0; } 32%, 100% { transform: none; opacity: 1; } }
.gscr { opacity: 0; animation: gscr 18s ease-out infinite; }
@keyframes gscr { 0%, 28% { opacity: 0; } 34%, 100% { opacity: 1; } }
.gpanel { animation: gpanel 18s linear infinite; }
@keyframes gpanel { 0%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
.gai { opacity: 0; animation: gai 18s linear infinite; }
@keyframes gai { 0%, 56% { opacity: 0; } 62%, 100% { opacity: 1; } }
.gbar { transform-box: fill-box; transform-origin: left; animation: gbar2 18s ease-out infinite; }
@keyframes gbar2 { 0%, 34% { transform: scaleX(.05); } 52%, 100% { transform: scaleX(.88); } }
.gck { opacity: 0; animation: gck 18s ease-out infinite; }
@keyframes gck { 0%, 38% { opacity: 0; } 42%, 100% { opacity: 1; } }
.gans { opacity: 0; animation: gans 18s ease-out infinite; transform-box: fill-box; }
@keyframes gans { 0%, 70% { opacity: 0; transform: translateY(8px); } 76%, 100% { opacity: 1; transform: none; } }
.ghl { animation: ghl 18s ease-in-out infinite; }
@keyframes ghl { 0%, 80% { opacity: 1; } 84% { opacity: .55; } 88%, 100% { opacity: 1; } }
.gresults { animation: gres 18s linear infinite; }
@keyframes gres { 0%, 56% { opacity: 1; } 64%, 100% { opacity: .35; } }
.gslogan { font-size: clamp(28px, 4vw, 56px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin-top: 22px; color: #fff; }
.gslogan s { opacity: .55; text-decoration-thickness: 3px; text-decoration-color: #ff8a5c; }
.gslogan span { color: #c9b8ff; }

.aisec { padding: clamp(36px, 5vw, 72px) var(--pad); }
.aimar { overflow: hidden; margin-top: 30px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding-block: 10px; }
.aitrack { display: flex; width: max-content; animation: aimar 30s linear infinite; }
@keyframes aimar { to { transform: translateX(-50%); } }
.aic { display: inline-flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 99px; padding: 10px 22px 10px 10px; font-weight: 600; font-size: 18px; white-space: nowrap; box-shadow: var(--shadow); margin-right: 14px; }
.aic i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 15px; }
.aigrid { max-width: 1040px; margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aibox { background: var(--bg); border-radius: 28px; padding: 26px; }
.aih { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; }
.aih b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.aih small { color: var(--muted); font-size: 13px; }
.rkwrap { display: flex; gap: 12px; }
.rknums { display: flex; flex-direction: column; gap: 6px; width: 24px; }
.rknums span { height: 58px; display: grid; place-items: center; color: var(--soft); font-weight: 700; }
.rkrows { position: relative; flex: 1; height: 322px; }
.rk { position: absolute; left: 0; right: 0; top: 0; height: 58px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-weight: 600; translate: 0 calc(var(--a) * 64px); animation: rk 9s var(--ease-out) infinite; }
@keyframes rk { 0%, 14% { translate: 0 calc(var(--a) * 64px); } 38%, 86% { translate: 0 calc(var(--b) * 64px); } 100% { translate: 0 calc(var(--a) * 64px); } }
.rk.you { background: linear-gradient(135deg, var(--violet2), var(--violet)); color: #fff; z-index: 2; box-shadow: 0 16px 34px -12px rgba(109, 40, 245, .6); }
.rk.you em { font-style: normal; font-size: 12px; background: rgba(255, 255, 255, .22); padding: 4px 10px; border-radius: 99px; }
.vbars { display: flex; flex-direction: column; gap: 16px; }
.vb { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; font-weight: 600; font-size: 15px; }
.vb i { display: block; height: 12px; border-radius: 99px; background: var(--c); width: var(--w); transform-origin: left; animation: vbg 4.5s ease-in-out infinite; animation-delay: var(--bd); }
@keyframes vbg { 0% { transform: scaleX(.2); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(.2); } }
@media (max-width: 800px) { .aigrid { grid-template-columns: 1fr; } .vb { grid-template-columns: 112px 1fr; } }

.signature { --sg: 64px; position: relative; display: inline-block; font-family: "Dancing Script", "Segoe Script", cursive; font-weight: 700; font-size: var(--sg); line-height: 1.15; padding: .04em .12em .3em; white-space: nowrap; }
.signature.big { --sg: clamp(72px, 14vw, 200px); }
.sg-text { display: inline-block; clip-path: inset(-30% 100% -40% 0); color: transparent; background: linear-gradient(105deg, #5b21e6 0 40%, #ffffff 50%, #5b21e6 60% 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 14px rgba(109, 40, 245, .4)); }
.sg-text small { font-size: .62em; font-weight: 700; }
.signature.in .sg-text { animation: sgwrite var(--wd, 2.8s) cubic-bezier(.5, .1, .3, 1) forwards, sgsheen 4.6s ease-in-out 3.4s infinite; }
@keyframes sgwrite { to { clip-path: inset(-30% -6% -40% 0); } }
@keyframes sgsheen { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.sg-line { position: absolute; left: 4%; bottom: .02em; width: 92%; height: .3em; overflow: visible; }
.sg-line path { stroke: #8b5cf6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.signature.in .sg-line path { animation: sgline .9s ease-out var(--wl, 2.6s) forwards, sgglow 4.6s ease-in-out 3.6s infinite; }
@keyframes sgline { to { stroke-dashoffset: 0; } }
@keyframes sgglow { 0%, 60% { stroke: #8b5cf6; filter: none; } 80% { stroke: #fff; filter: drop-shadow(0 0 6px #fff); } 100% { stroke: #8b5cf6; filter: none; } }
.sg-pen { position: absolute; left: 0; top: 50%; width: .14em; height: .14em; min-width: 8px; min-height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .05em #8b5cf6, 0 0 14px 4px rgba(139, 92, 246, .8); opacity: 0; pointer-events: none; }
.signature.in .sg-pen { animation: sgpen var(--wd, 2.8s) cubic-bezier(.5, .1, .3, 1) forwards; }
@keyframes sgpen { 0% { left: 0; top: 40%; opacity: 1; } 15% { top: 72%; } 30% { top: 36%; } 45% { top: 70%; } 60% { top: 40%; } 75% { top: 68%; } 96% { opacity: 1; } 100% { left: 96%; top: 60%; opacity: 0; } }
.mega-sign { text-align: center; margin: clamp(20px, 3vw, 40px) 0 0; line-height: 1; }
.sign-mini { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sign-mini .signature { --sg: 36px; }
.sm-t { color: var(--muted); font-weight: 600; font-size: 15px; }
.signsec { margin: 0 var(--pad); padding: clamp(24px, 4vw, 52px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.site-card { background: #fff; border-radius: 26px; box-shadow: var(--shadow-lg); padding: 16px 16px 0; overflow: hidden; rotate: 1.5deg; max-width: 520px; justify-self: center; width: 100%; }
.sc-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.sc-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e1e0ea; }
.sc-hero { height: 120px; border-radius: 16px; background: linear-gradient(135deg, #ede6ff, #cdbcff); margin-bottom: 14px; }
.sc-ln { height: 10px; border-radius: 6px; background: #ebeaf2; margin-bottom: 10px; }
.sc-ln.m { width: 82%; } .sc-ln.s { width: 58%; }
.sc-foot { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 10px -16px 0; padding: 14px; background: #f6f6fa; color: var(--muted); font-weight: 600; font-size: 14px; }
.sc-foot .signature { --sg: 46px; }
@media (max-width: 900px) { .signsec { grid-template-columns: 1fr; } }

.t-who small { font-size: 14px; }

#pre { position: fixed; inset: 0; z-index: 999; background: #fff; display: grid; place-items: center; transition: transform .85s var(--ease-out); will-change: transform; }
#pre.out { transform: translateY(-100%); }
#pre.out::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; background: var(--violet); }
.pre-in { display: grid; gap: 14px; justify-items: center; }
#pre .signature { --sg: clamp(64px, 13vw, 130px); --wd: 1s; --wl: .85s; }
.pre-bar { width: min(240px, 60vw); height: 3px; border-radius: 3px; background: #ebeaf2; overflow: hidden; }
.pre-bar i { display: block; height: 100%; width: 0; background: var(--violet); animation: prebar 1s var(--ease-out) forwards; }
@keyframes prebar { to { width: 92%; } }
#pre.out .pre-bar i { width: 100%; transition: width .2s; }
body.loading { overflow: hidden; }
.paused, .paused *, .paused::before, .paused::after, .paused *::before, .paused *::after { animation-play-state: paused !important; }
.guide, .faq-sec, .signsec, .aisec { content-visibility: auto; contain-intrinsic-size: auto 760px; }
@media (prefers-reduced-motion: reduce) { #pre { transition: none; } }

.logo .signature { --sg: 40px; padding: .02em .1em .3em; line-height: 1; }
.logo { gap: 0; }
.t-track.dragging { transition: none; }
.t-viewport { touch-action: pan-y; cursor: grab; }
.t-viewport:active { cursor: grabbing; }

.rings, .rings circle { animation: none !important; }
.waves span:nth-child(n+3) { display: none; }
.waves span { width: 1100px !important; height: 1100px !important; margin: -550px 0 0 -550px !important; animation-duration: 12s !important; }
.waves span { will-change: transform, opacity; }
.hero::before { will-change: transform; }
.slide:first-child .phone { animation: phone-idle 6s ease-in-out infinite; }
.slide:first-child .phone::after { content: ""; position: absolute; inset: -4px; border-radius: 44px; border: 3px solid rgba(109, 40, 245, .55); opacity: 0; pointer-events: none; animation: phring 9s ease-out infinite; will-change: transform, opacity; }
@keyframes phring { 0%, 56% { opacity: 0; transform: scale(1); } 62% { opacity: .85; } 82%, 100% { opacity: 0; transform: scale(1.38); } }
.logo .signature .sg-text { filter: none; }
.tile, .fly, .phone-wrap { will-change: transform; }

.hclock { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 99px; padding: 8px 20px 8px 8px; box-shadow: var(--shadow), 0 0 0 1px var(--line); position: relative; z-index: 3; margin-top: 6px; max-width: 420px; }
.hclock b { background: var(--ink); color: #fff; border-radius: 99px; padding: 8px 16px; font-size: 22px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hclock b i { font-style: normal; animation: blinkc 1s steps(1) infinite; }
@keyframes blinkc { 50% { opacity: .25; } }
.hclock span { font-size: 15px; color: var(--ink-2); line-height: 1.3; font-weight: 500; }
@media (max-width: 860px) { .hclock { display: none; } }

.sg-text { padding: .2em .5em .5em .35em; margin: -.2em -.5em -.5em -.35em; }
.signature { overflow: visible; }
.logo { overflow: visible; }
.store .lbl { position: relative; z-index: 1; white-space: nowrap; }
.ws-badge { left: auto; right: 5%; bottom: -30px; }
.panel-labels { max-width: 1180px; }
.pl { min-width: 0; }
.pl > div { min-width: 0; white-space: normal; }
.pl:not(.active) > div { display: none; }
.pl.active > div { opacity: 1; transform: none; }
@media (max-width: 860px) { .pl:not(.active) > div { display: block; } }
.contact-top { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact-bottom { margin-top: 18px; }

.ai-card .ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); margin-bottom: 16px; }
.ai-card .ic { width: 46px; height: 46px; overflow: visible; }
.lid { transform-box: fill-box; transform-origin: left bottom; animation: lid 3s ease-in-out infinite; }
@keyframes lid { 0%, 100% { transform: rotate(0); } 40%, 62% { transform: rotate(-26deg) translateY(-2px); } }
.spk { animation: spk 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes spk { 0%, 30% { opacity: 0; transform: scale(.4); } 45%, 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.hrt { transform-box: fill-box; transform-origin: center; animation: hrt 1.6s ease-in-out infinite; }
@keyframes hrt { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(1); } }
.pen2 { animation: pen2 3.2s ease-in-out infinite; }
@keyframes pen2 { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-14px, -22px); } 65% { transform: translate(-4px, -10px); } }
.br { transform-box: fill-box; transform-origin: bottom; animation: br 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes br { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.bell2 { transform-box: fill-box; transform-origin: 50% 5%; animation: bell2 2.6s ease-in-out infinite; }
@keyframes bell2 { 0%, 55%, 100% { rotate: 0deg; } 8% { rotate: 14deg; } 16% { rotate: -12deg; } 24% { rotate: 8deg; } 32% { rotate: -5deg; } }
.dot2 { animation: dot2 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dot2 { 50% { transform: scale(1.3); } }
.mag { animation: mag 3.4s ease-in-out infinite; }
@keyframes mag { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-16px, 16px); } 70% { transform: translate(-4px, 6px); } }
.rot { transform-box: fill-box; transform-origin: center; animation: spin 4s linear infinite; }
.rp { transform-box: fill-box; transform-origin: center; animation: rp 1.8s ease-out infinite; }
@keyframes rp { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.cur2 { animation: cur3 1.8s ease-in-out infinite; }
@keyframes cur3 { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-6px, -4px); } 50% { transform: translate(-6px, -4px) scale(.92); } }
.tdot { animation: tdot 1.2s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes tdot { 0%, 100% { transform: translateY(0); opacity: .6; } 40% { transform: translateY(-5px); opacity: 1; } }

.astro-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px, 3vw, 40px); max-width: 1000px; margin: 34px auto 4px; min-height: 340px; padding-inline: var(--pad); }
.astro-wrap { position: relative; width: clamp(220px, 28vw, 340px); aspect-ratio: 1; display: grid; place-items: center; }
.astro-float { width: 100%; height: 100%; position: relative; z-index: 2; animation: afloat 4.6s ease-in-out infinite; }
@keyframes afloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
.astro-halo { position: absolute; inset: 6%; border-radius: 50%; border: 2px solid rgba(139, 92, 246, .35); animation: halo 3.6s ease-out infinite; z-index: 1; }
.astro-halo.h2 { animation-delay: 1.8s; }
@keyframes halo { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.astro-shadow { position: absolute; left: 22%; right: 22%; bottom: 2%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(27, 20, 70, .28), transparent); animation: ashadow 4.6s ease-in-out infinite; z-index: 0; }
@keyframes ashadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.78); opacity: .55; } }
.astro { filter: drop-shadow(0 18px 28px rgba(79, 70, 229, .35)); }
.astro-bub { background: #fff; border-radius: 22px; padding: 14px 18px; font-size: 17px; line-height: 1.4; box-shadow: var(--shadow), 0 0 0 1px var(--line); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s ease, transform .6s var(--ease-spring); min-height: 52px; max-width: 300px; }
.astro-bub.show { opacity: 1; transform: none; }
.astro-bub.b-me { justify-self: end; background: var(--violet); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 16px 34px -14px rgba(109, 40, 245, .6); }
.astro-bub.b-as { justify-self: start; border-bottom-left-radius: 6px; }
@media (max-width: 760px) {
  .astro-stage { grid-template-columns: 1fr; justify-items: center; min-height: 0; }
  .astro-wrap { order: 1; } .astro-bub.b-me { order: 2; justify-self: center; } .astro-bub.b-as { order: 3; justify-self: center; }
  .astro-bub { min-height: 0; }
}

.faq details { position: relative; transition: background .4s, box-shadow .5s var(--ease-out), transform .5s var(--ease-spring); overflow: hidden; }
.faq details::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--violet-2), var(--violet)); transform: scaleY(0); transition: transform .5s var(--ease-spring); }
.faq details.is-open::before { transform: scaleY(1); }
.faq details:hover { transform: translateX(4px); }
.faq details.is-open { transform: none; background: #fff; box-shadow: var(--shadow-lg); }
.faq summary { transition: color .3s; }
.faq details.is-open summary { color: var(--violet); }
.faq summary::after { transition: rotate .5s var(--ease-spring), background .3s, color .3s; width: 36px; height: 36px; border-radius: 50%; background: var(--tint, #ede6ff); display: grid; place-items: center; font-size: 24px; flex: none; }
.faq details.is-open summary::after { rotate: 135deg; background: var(--violet); color: #fff; }
.fa { overflow: hidden; }
.faq details.is-open .fa p { animation: faIn .7s var(--ease-out) .12s both; }
@keyframes faIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

@keyframes asf-hue { 0%, 72%, 100% { filter: hue-rotate(0deg); } 82% { filter: hue-rotate(40deg); } 91% { filter: hue-rotate(-35deg); } }
@keyframes asf-ant { 50% { opacity: .55; } }
@keyframes asf-talk { 0% { transform: scaleY(.9) scaleX(.75); } 35% { transform: scaleY(2) scaleX(.95); } 65% { transform: scaleY(1.2) scaleX(.85); } 100% { transform: scaleY(2.2) scaleX(.8); } }
.asf-svg { width: 100%; height: 100%; display: block; overflow: visible; animation: asf-hue 8s ease-in-out infinite; }
.asf-svg .asf-eyes { transition: transform .22s ease-out; }
.asf-svg .asf-eye { transform-box: fill-box; transform-origin: center; transition: transform .08s; }
.asf-svg.blink .asf-eye { transform: scaleY(.12); }
.asf-svg .asf-mouth { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .15s; }
.asf-svg.talk .asf-mouth { opacity: 1; animation: asf-talk .32s ease-in-out infinite alternate; }
.asf-svg.talk .asf-eyes { translate: 0 -1px; }
.asf-svg .asf-ant { animation: asf-ant 2.2s ease-in-out infinite; }

.astro-fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: 78px; height: 78px; z-index: 90; transition: opacity .4s ease, transform .5s var(--ease-spring); }
.astro-fab.hide { opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; }
.af-btn { position: relative; width: 100%; height: 100%; border: 0; border-radius: 50%; background: #fff; padding: 8px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 16px 36px -10px rgba(79, 70, 229, .5), 0 0 0 1px var(--line); animation: afb 4.4s ease-in-out infinite; transition: transform .3s var(--ease-spring); }
.af-btn:hover { transform: scale(1.08); }
.af-btn:active { transform: scale(.94); }
.af-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(139, 92, 246, .55); opacity: 0; animation: afping 5s ease-out infinite; pointer-events: none; }
@keyframes afb { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes afping { 0%, 70% { transform: scale(1); opacity: 0; } 76% { opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.astro-fab.open .af-btn::after { animation: none; }
.af-b { position: absolute; right: 13px; bottom: 13px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; transform: translate(0, 0) scale(.2); opacity: 0; pointer-events: none; transition: transform .55s var(--ease-spring) calc(var(--i) * .07s), opacity .25s ease calc(var(--i) * .07s); box-shadow: 0 12px 26px -8px rgba(27, 20, 70, .5); }
.af-b svg { width: 26px; height: 26px; }
.af-b.wa { background: #25d366; } .af-b.tel { background: #6d28f5; } .af-b.frm { background: #f26a2e; }
.astro-fab.open .af-b { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; pointer-events: auto; }
.af-b:hover { filter: brightness(1.08); }
.af-b .lb { position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%; white-space: nowrap; background: #fff; color: #1b1446; font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 99px; box-shadow: var(--shadow), 0 0 0 1px var(--line); pointer-events: none; }
.af-toast { position: absolute; right: 0; bottom: calc(100% + 12px); width: max-content; max-width: min(300px, 78vw); background: #1b1446; color: #fff; font-size: 14px; padding: 10px 16px; border-radius: 16px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-spring); pointer-events: none; }
.af-toast.on { opacity: 1; transform: none; }
@media (max-width: 560px) { .astro-fab { width: 66px; height: 66px; } .af-b { right: 7px; bottom: 7px; width: 50px; height: 50px; } }

.counter span { font-size: 21px; color: var(--ink-2); font-weight: 500; }
.counter b { font-size: clamp(42px, 5vw, 62px); }
.counter { padding: 8px 30px 8px 24px; gap: 14px; }

.af-btn { background: transparent; box-shadow: none; padding: 0; filter: drop-shadow(0 14px 22px rgba(79, 70, 229, .45)); }
.af-btn::after { border: 0; background: radial-gradient(circle, rgba(139, 92, 246, .38), rgba(139, 92, 246, 0) 68%); inset: -14px; }
@keyframes afping { 0%, 66% { transform: scale(.6); opacity: 0; } 72% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.astro-halo { border: 0; background: radial-gradient(circle, rgba(139, 92, 246, .22), rgba(139, 92, 246, 0) 66%); inset: 0; }

.mq-track { animation: none !important; will-change: transform; }
.mq { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mq.drag { cursor: grabbing; }
.tc img { pointer-events: none; -webkit-user-drag: none; }

.pf-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(18px, 3vw, 40px); margin-top: 34px; align-items: start; }
.pf-tabs { display: flex; flex-direction: column; gap: 10px; }
.pf-tab { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; color: #fff; background: rgba(255, 255, 255, .06); border-radius: 22px; padding: 16px 18px; overflow: hidden; transition: background .35s, transform .4s var(--ease-spring); }
.pf-tab:hover { background: rgba(255, 255, 255, .11); transform: translateX(4px); }
.pf-tab .n { width: 34px; height: 34px; border-radius: 12px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-weight: 700; flex: none; transition: background .3s, color .3s; }
.pf-tab b { display: block; font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.pf-tab small { color: #b9b0e6; font-size: 15px; }
.pf-tab.on { background: rgba(255, 255, 255, .15); }
.pf-tab.on .n { background: #fff; color: var(--violet); }
.pf-tab .pb { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--violet-2); }
.pf-tab.on .pb { animation: pfbar var(--pfdur, 7s) linear forwards; }
@keyframes pfbar { to { width: 100%; } }
.pf-stage { min-width: 0; }
.pf-slide { display: none; }
.pf-slide.on { display: block; animation: pfin .7s var(--ease-out) both; }
@keyframes pfin { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.pf-frame { background: #fff; color: #1b1446; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .65); }
.pf-bar { height: 34px; background: #eceaf3; display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 12px; color: #57536f; }
.pf-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d2d0dc; }
.pf-bar span { margin-left: 10px; background: #fff; border-radius: 99px; padding: 3px 16px; }
.pf-body { height: clamp(300px, 34vw, 400px); position: relative; background: #f6f6fa; overflow: hidden; }
.pf-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.pf-vs p { margin: 0; border-radius: 18px; padding: 14px 18px; font-size: 16px; line-height: 1.45; }
.pf-vs b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.pf-vs .no { background: rgba(255, 255, 255, .07); color: #b9b0e6; }
.pf-vs .no b { color: #ff8a8a; }
.pf-vs .yes { background: rgba(109, 40, 245, .35); color: #fff; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .4); }
.pf-vs .yes b { color: #86efac; }
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-tabs { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .pf-tab { flex: none; padding: 12px 14px; }
  .pf-tab small { display: none; }
  .pf-vs { grid-template-columns: 1fr; }
}

@keyframes lnw { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }

.m1 { position: absolute; inset: 0; display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr); }
.m1 aside { background: #fff; padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; border-right: 1px solid #e4e2ee; }
.m1 aside u { width: 26px; height: 26px; border-radius: 9px; background: #e4e2ee; }
.m1 aside u.on { background: var(--violet); }
.m1 .list { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.m1 li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 9px 12px; box-shadow: 0 1px 2px rgba(27, 20, 70, .06); }
.pf-slide.on .m1 li { animation: li .6s var(--ease-out) both; animation-delay: calc(var(--i) * .4s); }
@keyframes li { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.m1 li i { width: 30px; height: 30px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; flex: none; }
.m1 li b { display: block; font-size: 14px; } .m1 li small { color: #57536f; font-size: 12px; }
.m1 .detail { background: #fff; margin: 12px 12px 12px 0; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.m1 .detail b { font-size: 16px; }
.m1 .ln1 { height: 9px; border-radius: 5px; background: #e4e2ee; } .m1 .ln1.s { width: 60%; }
.m1 .act { margin-top: auto; align-self: flex-start; background: var(--violet); color: #fff; padding: 9px 20px; border-radius: 99px; font-weight: 600; font-size: 14px; animation: actp 2.4s ease-in-out infinite; }
@keyframes actp { 50% { box-shadow: 0 0 0 8px rgba(109, 40, 245, .2); } }

.m2 { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.m2 .sb { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 99px; padding: 12px 18px; box-shadow: 0 0 0 1px #e4e2ee; font-size: 16px; }
.m2 .sb svg { width: 18px; height: 18px; color: var(--violet); }
.m2 .q { display: inline-block; overflow: hidden; white-space: nowrap; font-weight: 600; }
.pf-slide.on .m2 .q { animation: qt 1.4s steps(6, end) both; }
@keyframes qt { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.m2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.m2 li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 10px 14px; }
.pf-slide.on .m2 li { animation: li .6s var(--ease-out) both; animation-delay: calc(1.5s + var(--i) * .4s); }
.m2 em { width: 38px; height: 38px; border-radius: 11px; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11px; flex: none; }
.m2 b { display: block; font-size: 14px; } .m2 small { color: #57536f; font-size: 13px; }
.m2 mark { background: #fde68a; color: #1b1446; border-radius: 4px; padding: 0 3px; }

.m3 { position: absolute; inset: 0; padding: 16px; display: grid; place-items: center; }
.m3 .site { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px #e4e2ee; padding: 14px 18px; overflow: hidden; }
.m3 .nv { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.m3 .nv i { width: 22px; height: 22px; border-radius: 8px; background: var(--violet); } .m3 .nv u { width: 44px; height: 8px; border-radius: 4px; background: #e4e2ee; }
.m3 .hr { position: relative; }
.m3 .ttl { position: relative; display: inline-block; font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.02em; padding: 4px 8px; margin: 0 0 8px -8px; }
.m3 .ttl { display: inline-grid; }
.m3 .t1, .m3 .t2 { grid-area: 1 / 1; white-space: nowrap; }
.m3 .t2 { opacity: 0; }
.pf-slide.on .m3 .t1 { animation: swapA 8s ease-in-out infinite; }
.pf-slide.on .m3 .t2 { animation: swapB 8s ease-in-out infinite; }
@keyframes swapA { 0%, 36% { opacity: 1; } 42%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes swapB { 0%, 36% { opacity: 0; } 42%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.m3 .sel { position: absolute; inset: -2px; border: 2px dashed var(--violet); border-radius: 8px; opacity: 0; }
.pf-slide.on .m3 .sel { animation: selA 8s ease-in-out infinite; }
@keyframes selA { 0%, 12% { opacity: 0; } 18%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
.m3 .sel em { position: absolute; left: -2px; top: -26px; background: var(--violet); color: #fff; font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px 8px 8px 0; }
.m3 p { height: 9px; border-radius: 5px; background: #e4e2ee; width: 70%; margin: 0 0 8px; } .m3 p.s { width: 44%; }
.m3 .img { position: relative; height: clamp(90px, 12vw, 130px); border-radius: 14px; margin-top: 14px; overflow: hidden; }
.m3 .img span { position: absolute; inset: 0; }
.m3 .i1 { background: linear-gradient(135deg, #ede6ff, #cdbcff); } .m3 .i2 { background: linear-gradient(135deg, #fde68a, #f26a2e); opacity: 0; }
.pf-slide.on .m3 .i2 { animation: imgB 8s ease-in-out infinite; }
@keyframes imgB { 0%, 56% { opacity: 0; } 64%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.m3 .add { position: absolute; right: 16px; bottom: 14px; background: #1b1446; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 99px; animation: actp 2.4s ease-in-out infinite; }

.m4 { position: absolute; inset: 0; padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.m4 .sc { background: #fff; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pf-slide.on .m4 .sc { animation: li .6s var(--ease-out) both; animation-delay: calc(var(--i) * .25s); }
.m4 .sc small { color: #57536f; font-size: 13px; font-weight: 600; } .m4 .sc b { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; }
.m4 svg { width: 100%; height: 38px; } .m4 svg path { stroke: var(--violet); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pf-slide.on .m4 svg path { animation: lnw 1.6s ease-out .6s forwards; }
.m4 .tag { position: absolute; right: 18px; bottom: 12px; font-size: 12px; color: #57536f; }

.m5 { position: absolute; inset: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); }
.m5 aside { background: #fff; border-right: 1px solid #e4e2ee; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.m5 .pc { background: #ede6ff; color: var(--violet); font-weight: 600; font-size: 13px; padding: 9px 12px; border-radius: 10px; }
.m5 .cv { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.m5 .fd { background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #57536f; box-shadow: 0 0 0 1px #e4e2ee; }
.m5 .newf { opacity: 0; }
.pf-slide.on .m5 .newf { animation: newf 6s ease-out infinite; }
@keyframes newf { 0%, 38% { opacity: 0; transform: translateY(-10px); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.m5 .sbm { align-self: flex-start; background: var(--violet); color: #fff; padding: 10px 24px; border-radius: 99px; font-weight: 600; font-size: 14px; }
.pf-slide.on .m5 .mv { animation: mvA 6s ease-in-out infinite; position: relative; z-index: 3; box-shadow: 0 10px 24px -8px rgba(109, 40, 245, .6); }
@keyframes mvA { 0%, 10% { transform: translate(0, 0); } 36% { transform: translate(190px, 56px) rotate(-4deg); } 44%, 92% { transform: translate(190px, 56px) rotate(0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }

.post { margin: clamp(12px, 2.2vw, 26px) var(--pad); border-radius: 44px; background: linear-gradient(135deg, #efe9ff 0%, #e2ebff 100%); padding: clamp(28px, 4.5vw, 70px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; position: relative; overflow: hidden; }
.post::before { content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .28), transparent 65%); pointer-events: none; }
.post > * { position: relative; }
.eyebrow2 { color: var(--violet); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; margin: 0 0 14px; }
.post-title { font-weight: 500; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.035em; display: flex; flex-direction: column; margin: 0; }
.post-title .sl { white-space: normal; }
.post .lead { margin-top: 22px; color: var(--ink-2); }
.post-jab { margin: 14px 0 0; font-size: 18px; color: var(--ink); font-weight: 600; max-width: 560px; padding-left: 16px; border-left: 4px solid var(--violet); line-height: 1.45; }
.post-ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; max-width: 580px; }
.post-ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; color: var(--muted); line-height: 1.5; }
.post-ul li b { color: var(--ink); }
.post-ul i { width: 22px; height: 22px; border-radius: 50%; background: var(--violet); flex: none; margin-top: 2px; position: relative; }
.post-ul i::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.post .stores { margin-top: 26px; }
.post-stage { position: relative; display: grid; justify-items: center; gap: 16px; min-width: 0; }
.ps-icons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pi { position: relative; width: 56px; height: 56px; border-radius: 18px; background: var(--bg); display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(27, 20, 70, .5); transition: transform .45s var(--ease-spring), box-shadow .3s; cursor: pointer; opacity: .85; }
.pi svg { width: 28px; height: 28px; }
.pi:hover { transform: translateY(-4px); opacity: 1; }
.pi.on { opacity: 1; transform: translateY(-6px) scale(1.12); box-shadow: 0 16px 30px -10px rgba(27, 20, 70, .6), 0 0 0 4px #fff; }
.pi .pn { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; font-size: 12px; font-weight: 700; color: var(--ink); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.pi.on .pn { opacity: 1; }
.ps-card { width: min(100%, 380px); background: #fff; border-radius: 30px; padding: 16px; box-shadow: 0 40px 80px -30px rgba(27, 20, 70, .5); margin-top: 18px; }
.ps-head { display: flex; align-items: center; gap: 12px; }
.ps-av { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, var(--violet-2), var(--violet)); display: grid; place-items: center; flex: none; }
.ps-av svg { width: 18px; height: 18px; }
.ps-head b { display: block; font-size: 16px; } .ps-head small { color: var(--muted); font-size: 13px; }
.ps-fmt { margin-left: auto; background: var(--tint, #ede6ff); color: var(--violet); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; white-space: nowrap; }
.ps-prog { height: 4px; border-radius: 4px; background: #ebeaf2; margin: 12px 0; overflow: hidden; }
.ps-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet-2), var(--violet)); }
.ps-canvas { height: 330px; display: grid; place-items: center; background: #f6f6fa; border-radius: 20px; overflow: hidden; }
.pc-art { container-type: inline-size; position: relative; width: min(100%, calc(330px * var(--rn))); border-radius: 14px; overflow: hidden; background: #1b1446; transition: width .7s var(--ease-out), aspect-ratio .7s var(--ease-out); }
.pc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; filter: blur(18px) saturate(.5); opacity: 0; transform: scale(1.15); transition: filter 1s ease, opacity .8s ease, transform 1.2s var(--ease-out); }
.ps-card.img-in .pc-img { filter: none; opacity: 1; transform: scale(1); }
.pc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 10, 48, 0) 40%, rgba(17, 10, 48, .82)); opacity: 0; transition: opacity .6s; }
.ps-card.img-in .pc-scrim { opacity: 1; }
.pc-txt { position: absolute; left: 7cqw; right: 7cqw; bottom: 12cqw; color: #fff; display: grid; gap: 1.5cqw; }
.pc-t { font-size: 10.5cqw; line-height: 1.04; letter-spacing: -.02em; min-height: 2.1em; font-weight: 700; display: block; }
.pc-s { font-size: 4.4cqw; opacity: 0; transition: opacity .5s .2s; }
.ps-card.txt-in .pc-s { opacity: .9; }
.pc-brand { position: absolute; left: 7cqw; bottom: 4.5cqw; color: #fff; font-size: 3.8cqw; font-weight: 600; opacity: .85; }
.pc-play { position: absolute; right: 6cqw; top: 6cqw; width: 12cqw; height: 12cqw; border-radius: 50%; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); display: none; place-items: center; }
.pc-play svg { width: 55%; height: 55%; }
.pc-art.vid .pc-play { display: grid; }
.ps-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; min-height: 30px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-spring); }
.ps-chips.on { opacity: 1; transform: none; }
.ps-chips span { background: #ede6ff; color: var(--violet); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.ps-act { display: flex; gap: 10px; margin-top: 12px; }
.ps-ok, .ps-edit { flex: 1; text-align: center; border-radius: 99px; padding: 11px; font-weight: 700; font-size: 15px; }
.ps-ok { background: #0b0b12; color: #fff; transition: background .3s; }
.ps-edit { box-shadow: inset 0 0 0 1.5px #d6d3e6; color: var(--ink); }
.ps-card.ready .ps-ok { background: var(--violet); animation: actp 1.6s ease-in-out infinite; }
.ps-done { display: flex; gap: 10px; min-height: 72px; justify-content: center; flex-wrap: wrap; }
.ps-done .dn { position: relative; width: 62px; height: 72px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 22px -8px rgba(27, 20, 70, .5); animation: dnin .6s var(--ease-spring) both; background: #1b1446; }
.ps-done .dn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; filter: none; opacity: 1; transform: none; }
.ps-done .bd { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; }
.ps-done .bd svg { width: 14px; height: 14px; }
@keyframes dnin { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
.ps-count { font-weight: 600; color: var(--ink-2); font-size: 16px; }
.ps-count b { color: var(--violet); font-size: 22px; }
@media (max-width: 960px) { .post { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pi { width: 48px; height: 48px; border-radius: 16px; } .ps-canvas { height: 300px; } .pc-art { width: min(100%, calc(300px * var(--rn))); } }

.show { padding: clamp(32px, 5vw, 68px) 0 clamp(16px, 3vw, 36px); overflow: hidden; }
.show .sec-title, .show .lead, .show .show-note, .show .stores { padding-inline: var(--pad); }
.cmp { position: relative; max-width: 980px; margin: 30px auto 0; width: calc(100% - 2 * var(--pad)); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; background: #fff; aspect-ratio: 16 / 10; }
.bf { position: absolute; inset: 0 0 auto 0; height: 36px; background: #eceaf3; display: flex; gap: 6px; align-items: center; padding: 0 14px; z-index: 6; font-size: 12px; color: var(--muted); }
.bf i { width: 10px; height: 10px; border-radius: 50%; background: #d2d0dc; }
.bf span { margin-left: 12px; background: #fff; border-radius: 99px; padding: 3px 16px; }
.old { position: absolute; inset: 36px 0 0 0; background: #d4d0c8; padding: clamp(10px, 2vw, 22px); font-family: "Times New Roman", Times, serif; color: #000; overflow: hidden; font-size: clamp(11px, 1.4vw, 16px); }
.old h3 { margin: 0 0 10px; color: #00e; text-decoration: underline; font-size: clamp(18px, 3.2vw, 38px); text-align: center; font-weight: 700; }
.o-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.o-nav span { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; font-size: .9em; }
.o-body { display: grid; grid-template-columns: 30% 1fr; gap: 14px; }
.o-img { background: #9a9a9a; border: 2px inset #fff; display: grid; place-items: center; min-height: 80px; color: #333; }
.old p { margin: 0 0 8px; line-height: 1.35; }
.o-mq { color: #c00; font-weight: 700; animation: blink2 1.2s steps(1) infinite; }
@keyframes blink2 { 50% { opacity: .2; } }
.o-cnt b { background: #000; color: #0f0; padding: 1px 6px; font-family: monospace; }
.new { position: absolute; inset: 36px 0 0 0; clip-path: inset(0 0 0 100%); animation: cmpwipe 9s var(--ease-out) infinite; background: #111; }
.new img { width: 100%; height: 100%; object-fit: cover; object-position: top; max-width: none; }
@keyframes cmpwipe { 0%, 26% { clip-path: inset(0 0 0 100%); } 42%, 80% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 0 0 100%); } }
.cmpline { position: absolute; top: 36px; bottom: 0; width: 4px; margin-left: -2px; background: var(--violet); box-shadow: 0 0 26px 8px rgba(109, 40, 245, .6); z-index: 5; left: 100%; opacity: 0; animation: cmpline 9s var(--ease-out) infinite; }
@keyframes cmpline { 0%, 26% { left: 100%; opacity: 0; } 27% { left: 100%; opacity: 1; } 42% { left: 0%; opacity: 1; } 43%, 80% { left: 0%; opacity: 0; } 81% { left: 0%; opacity: 1; } 96% { left: 100%; opacity: 1; } 97%, 100% { left: 100%; opacity: 0; } }
.cmp-tag { position: absolute; left: 16px; top: 52px; z-index: 7; background: #111; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .1em; padding: 7px 14px; border-radius: 99px; }
.cmp-tag.t-new { background: var(--violet); opacity: 0; animation: tagnew 9s linear infinite; }
.cmp-tag.t-old { animation: tagold 9s linear infinite; }
@keyframes tagnew { 0%, 40% { opacity: 0; } 46%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes tagold { 0%, 30% { opacity: 1; } 36%, 84% { opacity: 0; } 92%, 100% { opacity: 1; } }
.mq { overflow: hidden; margin-top: 18px; padding-block: 12px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; width: max-content; animation: mqL 55s linear infinite; }
.mq.rev .mq-track { animation-name: mqR; animation-duration: 62s; }
@keyframes mqL { to { transform: translateX(-50%); } }
@keyframes mqR { from { transform: translateX(-50%); } to { transform: none; } }
.mq:hover .mq-track { animation-play-state: paused; }
.tc { flex: none; width: clamp(250px, 26vw, 380px); margin: 0 18px 0 0; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; transition: transform .5s var(--ease-spring); }
.tc:hover { transform: translateY(-8px) scale(1.03); }
.tb { height: 22px; background: #eceaf3; display: flex; gap: 5px; align-items: center; padding: 0 10px; }
.tb i { width: 7px; height: 7px; border-radius: 50%; background: #d2d0dc; }
.tc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; max-width: none; }
.tc figcaption { padding: 10px 14px; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 10px; }
.tc figcaption small { color: var(--muted); font-weight: 500; font-size: 13px; }
.show-note { margin-top: 18px; color: var(--muted); font-size: 17px; text-align: center; }
.show .stores { margin-top: 18px; }

.site-header, .site-footer { display: contents; }
.nav-links ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links li { list-style: none; margin: 0; padding: 0; }
.col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.col ul li { margin: 0; padding: 0; }
@media (max-width: 860px) {
  .nav-links ul { flex-direction: column; gap: 4px; }
  .nav.open .nav-links li:nth-child(1) a { transition-delay: .18s; } .nav.open .nav-links li:nth-child(2) a { transition-delay: .24s; }
  .nav.open .nav-links li:nth-child(3) a { transition-delay: .30s; } .nav.open .nav-links li:nth-child(4) a { transition-delay: .36s; }
  .nav.open .nav-links li:nth-child(5) a { transition-delay: .42s; } .nav.open .nav-links li:nth-child(6) a { transition-delay: .48s; }
}

.demo-form .mpf { width: 100%; }
.demo-form .mpf-btn, .demo-form button[type=submit] { background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 24px; font-weight: 600; }

.blogsec { padding: clamp(32px, 5vw, 72px) var(--pad); }
.blogwrap { max-width: 1180px; margin: 30px auto 0; }
.blogwrap .blk { margin: 0; }
.blogwrap .blk-all { text-align: center; margin-top: 22px; }
.blogwrap .blk-all a { display: inline-block; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 14px 28px; font-weight: 600; transition: background .25s, transform .35s var(--ease-spring); }
.blogwrap .blk-all a:hover { background: var(--violet); color: #fff; transform: translateY(-2px); }
.imza-satir { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imza-satir .signature { --sg: 36px; }
@media (max-width: 860px) { .nav-links li { display: block; width: 100%; } .nav-links li a { display: block; } }

.counter { width: max-content; max-width: calc(100% - 28px); gap: 14px; padding: 9px 24px 9px 10px; border-radius: 26px; align-items: center; box-shadow: 0 18px 40px -18px rgba(109, 40, 245, .45), 0 0 0 1px var(--line); }
.counter b { width: clamp(50px, 5.4vw, 64px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--violet-2), var(--violet)); color: #fff; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: 0; min-width: 0; box-shadow: 0 10px 20px -8px rgba(109, 40, 245, .65); transition: background .5s; }
.chaos-stage.on .counter b { color: #fff; background: linear-gradient(135deg, #34d399, #16a34a); box-shadow: 0 10px 20px -8px rgba(22, 163, 74, .6); }
.counter span { font-size: clamp(15px, 1.7vw, 20px); font-weight: 600; line-height: 1.2; color: var(--ink); text-align: left; max-width: 24ch; }
.chaos-stage { height: clamp(430px, 50vw, 560px); }
.hub { top: 58%; height: 76%; }
.hub span { padding-bottom: 2px; }
.chaos-stage.on .ch:nth-child(-n+3) { top: 37% !important; }
.chaos-stage.on .ch:nth-child(n+4):nth-child(-n+6) { top: 57% !important; }
.chaos-stage.on .ch:nth-child(n+7) { top: 77% !important; }
@media (max-width: 700px) {
  .ch { padding: 7px 9px; font-size: 11px; gap: 5px; }
  .ch i { width: 8px; height: 8px; }
  .chaos-stage.on .ch:nth-child(3n+1) { left: 18% !important; }
  .chaos-stage.on .ch:nth-child(3n) { left: 83% !important; }
  .chaos-stage.on .ch:nth-child(8) { left: 49% !important; }
  .counter span { font-size: 15px; }
}

.pchev { position: absolute; z-index: 4; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--violet); display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); pointer-events: none; transition: transform .6s var(--ease-out), opacity .4s; }
.pchev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.panel.active .pchev { opacity: 0; }
@media (min-width: 901px) {
  .pchev { right: auto; left: 50%; top: auto; bottom: 18px; margin-left: -18px; }
  .pchev svg { rotate: -90deg; }
  .panel.active .pchev { opacity: 0; transform: none; }
}

.pf-mob { display: none; }
@media (max-width: 900px) {
  .pf-tabs { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; gap: 8px; padding-bottom: 0; }
  .pf-tab { justify-content: center; padding: 12px 0; border-radius: 16px; }
  .pf-tab > div { display: none; }
  .pf-tab:hover { transform: none; }
  .pf-tab .n { width: 38px; height: 38px; }
  .pf-mob { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border-radius: 22px; padding: 10px; }
  .pf-cap { flex: 1; min-width: 0; text-align: center; color: #fff; }
  .pf-cap b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
  .pf-cap small { color: #b9b0e6; font-size: 14px; }
  .pf-pv, .pf-nx { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--violet); font-size: 26px; line-height: 1; display: grid; place-items: center; padding-bottom: 3px; }
}

.demo-form { gap: 12px; }
.df-sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.demo-form .store { align-self: flex-start; }
.mdl { margin: auto; inset: 0; padding: 0; width: min(600px, calc(100vw - 24px)); max-height: min(90vh, 860px); overflow: hidden; border-radius: 28px; border: 0; background: #fff; color: var(--ink); box-shadow: 0 50px 120px -30px rgba(27, 20, 70, .7); }
.mdl[open] { display: flex; flex-direction: column; }
.mdl::backdrop { background: rgba(28, 18, 64, .62); backdrop-filter: blur(4px); }
.mdl-h { position: relative; flex: none; padding: 26px 70px 20px 28px; background: linear-gradient(135deg, #7c3aed, var(--violet)); color: #fff; cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; }
.mdl-grip { position: absolute; left: 50%; top: 8px; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: rgba(255, 255, 255, .4); }
.mdl-tag { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ddd3ff; }
.mdl h3 { margin: 0; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.mdl-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mdl-x:hover { background: rgba(255, 255, 255, .3); }
.mdl-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mdl-b { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 28px 28px; }
.mdl .mpf { margin: 0; }
.mdl.dragging { transition: none !important; }
@media (max-width: 640px) {
  .mdl { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border-radius: 0; translate: none !important; }
  .mdl-h { cursor: default; padding: calc(20px + env(safe-area-inset-top)) 64px 16px 20px; }
  .mdl-grip { display: none; }
  .mdl-x { top: calc(14px + env(safe-area-inset-top)); }
  .mdl-b { padding: 20px 18px calc(28px + env(safe-area-inset-bottom)); }
}

.phone.mac {
  --mw: clamp(300px, calc((100svh - var(--nav-h, 76px) - 330px) * 1.1), 540px);
  width: min(var(--mw), 86vw); height: auto; aspect-ratio: 16 / 10.2;
  padding: 2.2% 2.4% 2.6%;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #2a2933, #15141b);
  box-shadow: inset 0 0 0 1.5px #3b3a47, 0 1px 0 #8d8c99, var(--shadow-lg);
  display: block;
  margin-bottom: 4.2%;
}
.phone.mac .notch {
  top: 0; width: 15%; height: 2.6%; min-height: 6px; border-radius: 0 0 8px 8px;
  background: #0b0b10; translate: -50% 0; z-index: 3;
}
.phone.mac .notch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%; background: #23324d; box-shadow: 0 0 0 1px #11182a; }
.phone.mac::before {
  content: ""; position: absolute; left: -7%; right: -7%; top: 100%;
  height: 4.6%; min-height: 10px;
  border-radius: 0 0 22px 22px / 0 0 14px 14px;
  background: linear-gradient(180deg, #d9d8e0 0, #b8b7c2 70%, #9c9ba7 100%);
  box-shadow: 0 18px 28px -14px rgba(30, 20, 80, .5), inset 0 1px 0 #f3f2f7;
  z-index: -1;
}
.phone.mac::after {

  content: ""; position: absolute; left: 50%; top: calc(100% - 1px); translate: -50% 0;
  width: 17%; height: 2.3%; min-height: 5px; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #a9a8b4, #c6c5cf); z-index: 1;
}
.slide:first-child .phone.mac::after { inset: auto; border: 0; opacity: 1; animation: none; border-radius: 0 0 10px 10px; left: 50%; top: calc(100% - 1px); }
.phone.mac .screen {
  height: 100%; position: relative; border-radius: 6px; padding: 24px 14px 12px;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content;
  gap: 5px 16px; align-content: start; font-size: clamp(9px, 1.05vw, 12px);
  background: #fff;
}
.phone.mac .screen::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px;
  background: linear-gradient(180deg, #f6f5fb, #ebeaf3); border-bottom: 1px solid var(--line);
}
.phone.mac .screen::after {
  content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 6px; border-radius: 50%;
  background: #ff5f57; box-shadow: 10px 0 0 #febc2e, 20px 0 0 #28c840;
}
.phone.mac .ph-head, .phone.mac .ph-tag, .phone.mac .ph-btn, .phone.mac .ph-sub { grid-column: 1 / -1; }
.phone.mac .ph-sub { display: none; }
.phone.mac .ph-btn { margin-top: 4px; width: 46%; justify-self: center; padding: 5px; }
.phone.mac .ph-row { padding: 7px 4px; }
.phone.mac .ph-row b { font-size: 1.1em; }
.phone.mac .ph-row small, .phone.mac .ph-head small { font-size: .95em; }
.phone.mac .ph-head b { font-size: 1.2em; }
.phone.mac .dot { width: 22px; height: 22px; }
.phone.mac .ph-btn { padding: 7px; }
.phone.mac .screen { gap: 8px 18px; }
.phone.mac .site-prev { height: auto; min-height: 90px; grid-row: span 3; }
.phone.mac .steps { grid-column: 2; gap: 5px; }
.phone.mac .rw-big { grid-row: span 3; align-self: stretch; }
.phone.mac .rw-big b { font-size: 26px; margin-bottom: 6px; }
@media (max-width: 860px) {
  .hero .phone.mac { height: auto; padding: 2.2% 2.4% 2.6%; border-radius: 14px 14px 5px 5px; --mw: clamp(260px, calc((100svh - var(--nav-h, 70px) - 390px) * 1.3), 460px); }
  .hero .phone.mac .screen { border-radius: 5px; }
  .phone.mac .screen { gap: 4px 10px; padding: 22px 10px 8px; }
}

.phone-wrap { transform: none; }
@media (min-width: 861px) {
  .slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto auto auto 1fr; padding: 20px var(--pad) 108px; }
  .hero-title { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; margin: 0; font-size: clamp(44px, min(6.2vw, 12svh), 100px); }
  .hero-title .indent { margin-left: 0; }
  .hero-right { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; max-width: 470px; margin-top: 20px; }
  .phone-wrap { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; margin-top: 0; }
  .hclock { grid-column: 1; grid-row: 4; align-self: start; margin-top: 22px; }
  .hero-left { position: absolute; left: var(--pad); bottom: 112px; grid-column: auto; grid-row: auto; }
  .hero .phone.mac { --mw: clamp(340px, min(46vw, calc((100svh - var(--nav-h, 76px) - 200px) * 1.55)), 720px); }
  .slide .tile[data-depth="-22"] { left: 47%; right: auto; top: 6%; }
  .slide .tile[data-depth="28"] { left: auto; right: 3%; top: 68%; }
}
@media (min-width: 861px) and (max-height: 760px) { .hero-left { display: none; } }

.deck-wrap { container-type: inline-size; width: min(100%, 600px); --f: clamp(10px, 3.3cqw, 19px); }
@media (min-width: 861px) { .deck-wrap { width: min(100%, 580px, calc((100svh - var(--nav-h, 76px) - 170px) * 1.06)); } }
@media (max-width: 860px) { .deck-wrap { width: min(100%, calc((100svh - 400px) * 1.06), 420px); min-width: 250px; } }
.dk-stage { position: relative; width: 100%; aspect-ratio: 1.06; }
.slide-deck .hero-title { }
.dk .d-deck{position:absolute;inset:0}
.dk .d-cd{position:absolute;left:7%;top:13%;width:88%;height:74%;background:linear-gradient(#fff,#faf8ff);border-radius:4.4cqw;box-shadow:0 4.4cqw 7cqw -2.8cqw rgba(50,20,150,.55),0 0 0 .3cqw #ffffffd0,0 0 0 .6cqw #cfc3f755;overflow:hidden;--dp:-1;--op:0;opacity:var(--op);transform:translate(calc(var(--dp)*-3.4cqw),calc(var(--dp)*-3.2cqw)) scale(calc(1 - var(--dp)*.04)) rotate(calc(var(--dp)*-.8deg));transition:transform .9s cubic-bezier(.2,.9,.25,1.05),opacity .7s ease;transform-origin:50% 100%}
.dk .d-wb{display:flex;align-items:center;gap:2cqw;height:8.4cqw;padding:0 3.4cqw;background:linear-gradient(#fffffff2,#f4f0fdf2);border-bottom:1px solid #e8e2f7;font-size:calc(var(--f)*.8);color:#7a74a8}
.dk .d-wb i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#ff5f57;box-shadow:2.8cqw 0 #febc2e,5.6cqw 0 #28c840;margin-right:5.8cqw;flex:none}
.dk .d-wb span{flex:1;background:#f1edfb;border-radius:99px;padding:.7cqw 2.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.dk .d-wb b{background:linear-gradient(135deg,#8b5cf6,#6d28f5);color:#fff;border-radius:99px;padding:.3em .85em;font-size:.95em}
.dk .d-cb{padding:3.8cqw;font-size:calc(var(--f)*.95);line-height:1.3;color:#1e1b4b;height:calc(100% - 8.4cqw);overflow:hidden}
.dk .d-cb h5{margin:0 0 2cqw;font-size:calc(var(--f)*.85);font-weight:600;color:#7a74a8;letter-spacing:.1em}
.dk .d-inp{display:flex;align-items:center;gap:2cqw;border-radius:99px;background:#fff;border:1.5px solid #d8ccfb;box-shadow:0 1.2cqw 2.4cqw -1.2cqw #6d28f544;padding:2.2cqw 3.6cqw;font-weight:500;margin-bottom:3.4cqw}
.dk .d-inp i{font-style:normal;color:#6d28f5}
.dk .d-inp u{display:inline-block;width:.12em;height:1em;background:#6d28f5;vertical-align:-.15em;animation:dk-bl 1s steps(1) infinite;text-decoration:none}
@keyframes dk-bl{50%{opacity:0}}
.dk .d-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2cqw}
.dk .d-tt{text-align:center;font-weight:600;font-size:.88em}
.dk .d-tt s{display:block;aspect-ratio:.82;border-radius:2.4cqw;margin-bottom:1.4cqw;box-shadow:0 1.2cqw 2.2cqw -1cqw #4b2fbf66,0 0 0 1px #ece6ff;position:relative;background-color:#fff}
.dk .d-pgp{background:linear-gradient(135deg,#a78bfa,#6d28f5) top/100% 38% no-repeat,linear-gradient(#e5e1f7,#e5e1f7) 12% 54%/76% 7% no-repeat,linear-gradient(#e5e1f7,#e5e1f7) 12% 68%/54% 7% no-repeat,linear-gradient(#6d28f5,#6d28f5) 12% 86%/36% 9% no-repeat}
.dk .d-igp{background:linear-gradient(135deg,#f9a8d4,#fb923c) top/100% 66% no-repeat,linear-gradient(#e8e2f7,#e8e2f7) 12% 78%/70% 6% no-repeat,linear-gradient(#e8e2f7,#e8e2f7) 12% 90%/44% 6% no-repeat}
.dk .d-prp{background:linear-gradient(135deg,#fde68a,#f59e0b) top/100% 58% no-repeat,linear-gradient(#e8e2f7,#e8e2f7) 12% 70%/60% 6% no-repeat,linear-gradient(#16a34a,#16a34a) 12% 86%/38% 9% no-repeat}
.dk .d-flp svg{position:absolute;inset:0;width:100%;height:100%}
.dk .d-res{display:flex;gap:2.2cqw;margin-top:3cqw}
.dk .d-res b{flex:1;background:#dcfce7;color:#14532d;border-radius:99px;padding:1.2cqw 2cqw;font-size:.85em;font-weight:600;text-align:center}
.dk .d-mk{display:grid;grid-template-columns:repeat(5,1fr);gap:1.8cqw;margin-bottom:2.4cqw}
.dk .d-mk s{display:grid;place-items:center;height:9cqw;border-radius:2.4cqw;color:#fff;font-weight:700;font-size:calc(var(--f)*.7);text-decoration:none;letter-spacing:-.01em;text-align:center;line-height:1;box-shadow:inset 0 -.6cqw 0 #0003,0 1cqw 1.8cqw -1cqw #0006}
.dk .d-stamp{position:absolute;right:5%;bottom:6%;color:#dc2626;border:.8cqw solid #dc2626;border-radius:2cqw;padding:1.2cqw 3cqw;font-weight:800;font-size:calc(var(--f)*1.7);letter-spacing:.06em;background:#ffffffd0;opacity:0;transform:scale(2.6) rotate(-16deg);box-shadow:inset 0 0 0 .3cqw #dc262655;z-index:3}
.dk .d-stamp.s{font-size:calc(var(--f)*1.15);border-width:.6cqw;padding:1cqw 2.4cqw}
.dk .d-cd.front .d-stamp{animation:dk-slam .5s .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes dk-slam{to{opacity:1;transform:scale(1) rotate(-9deg)}}
.dk .d-url{display:flex;gap:2cqw;margin-bottom:2.8cqw}
.dk .d-url div{flex:1;border-radius:99px;background:#fff;border:1.5px solid #bfe6fb;box-shadow:0 1.2cqw 2.4cqw -1.2cqw #0ea5e955;padding:2.2cqw 3.6cqw;font-weight:500}
.dk .d-url b{background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff;border-radius:99px;padding:2.2cqw 4cqw;font-weight:600}
.dk .d-pb{height:2.4cqw;border-radius:9px;background:#e8e2f7;margin-bottom:3cqw;overflow:hidden}
.dk .d-pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0ea5e9,#22c55e);border-radius:9px}
.dk .d-cd.front .d-pb i{animation:dk-fill 1.8s .3s ease-out forwards}
@keyframes dk-fill{to{width:100%}}
.dk .d-ck{display:flex;gap:2cqw;align-items:center;padding:1cqw 0}
.dk .d-ck b{width:4.6cqw;height:4.6cqw;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;font-size:.8em;flex:none}
.dk .d-nr{display:flex;align-items:center;gap:2.4cqw;padding:1.5cqw 2cqw;margin-bottom:1.4cqw;border-radius:2.6cqw;background:#fff;box-shadow:0 1cqw 2cqw -1.2cqw #4b2fbf55,0 0 0 1px #efeaff}
.dk .d-nr b{width:7cqw;height:7cqw;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:.8em}
.dk .d-nr div{flex:1;min-width:0;font-weight:600}
.dk .d-nr small{display:block;font-weight:400;color:#7a76a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk .d-nr em{font-style:normal;font-size:.78em;background:#f1edff;border-radius:99px;padding:.2em .7em;color:#5b21b6;white-space:nowrap}
.dk .d-nr i.d-dt{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#e0364a;flex:none}
.dk .d-th{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw}
.dk .d-tm{border-radius:2.4cqw;box-shadow:0 1.2cqw 2.2cqw -1.2cqw #4b2fbf66,0 0 0 1px #ece6ff;overflow:hidden;background:#fff;font-size:.78em;font-weight:600;text-align:center;padding-bottom:1cqw}
.dk .d-tm i{display:block;height:2.6cqw;background:#f4f0fe}
.dk .d-tm b{display:block;height:9cqw}
.dk .d-tm u{display:block;height:2cqw;margin:1.2cqw 2cqw .8cqw;border-radius:9px;background:#e8e2f7;text-decoration:none}
.dk .d-pr3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw}
.dk .d-pc{border-radius:2.8cqw;overflow:hidden;position:relative;font-size:.82em;font-weight:600;padding-bottom:1.8cqw;background:#fff;box-shadow:0 1.2cqw 2.4cqw -1.2cqw #4b2fbf66,0 0 0 1px #ece6ff}
.dk .d-pc b{display:block;height:13cqw}
.dk .d-pc span{display:block;padding:1.2cqw 1.8cqw 0}
.dk .d-pc em{display:block;font-style:normal;color:#16a34a;padding:0 1.8cqw}
.dk .d-pc u{display:block;margin:1.2cqw 1.8cqw 0;background:#1e1b4b;color:#fff;border-radius:99px;text-align:center;text-decoration:none;padding:.8cqw 0;font-size:.85em}
.dk .d-pc .d-rb{position:absolute;left:0;top:2cqw;background:#e0364a;color:#fff;padding:.5cqw 2cqw .5cqw 1.4cqw;border-radius:0 99px 99px 0;font-size:.9em}
.dk .d-cmp{border-radius:2.6cqw;background:linear-gradient(90deg,#e0364a,#f97316);color:#fff;font-weight:700;padding:2.2cqw 3.2cqw;margin-bottom:2.6cqw;display:flex;justify-content:space-between;font-size:.95em;box-shadow:0 1.4cqw 2.6cqw -1.4cqw #e0364a99}
.dk .d-tabs{display:flex;gap:1.4cqw;margin-bottom:2.6cqw;flex-wrap:wrap}
.dk .d-tabs span{padding:1.3cqw 2.8cqw;border-radius:99px;background:#f1edff;font-weight:600;font-size:.88em}
.dk .d-tabs span.on{background:#6d28f5;color:#fff}
.dk .d-dts{display:grid;grid-template-columns:repeat(5,1fr);gap:1.8cqw;margin-bottom:2.2cqw}
.dk .d-dts s{text-decoration:none;text-align:center;border-radius:2.2cqw;background:#fff;box-shadow:0 0 0 1px #e6dffb;padding:1.4cqw 0;font-weight:600;font-size:.85em}
.dk .d-dts s.on{background:#1e1b4b;color:#fff;box-shadow:0 1.2cqw 2cqw -1cqw #1e1b4b}
.dk .d-dslot{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8cqw;margin-bottom:2.6cqw}
.dk .d-dslot s{text-decoration:none;text-align:center;border-radius:99px;background:#f4f0fe;padding:1.3cqw 0;font-size:.85em;font-weight:500}
.dk .d-dslot s.on{background:#dcfce7;color:#14532d;font-weight:700;box-shadow:0 0 0 1.5px #22c55e}
.dk .d-bk{background:linear-gradient(135deg,#8b5cf6,#6d28f5);color:#fff;text-align:center;border-radius:99px;padding:2.2cqw;font-weight:600;box-shadow:0 1.6cqw 2.8cqw -1.4cqw #6d28f5}
.dk .d-chips{display:flex;flex-wrap:wrap;gap:1.8cqw}
.dk .d-ch{display:inline-block;padding:1.5cqw 3cqw;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #e6dffb;font-weight:600;font-size:.95em}
.dk .d-ch.v{background:#6d28f5;color:#fff;box-shadow:none}
.dk .d-lab{position:absolute;left:7%;right:0;bottom:-1%;display:flex;align-items:center;gap:2cqw;font-size:calc(var(--f)*1);font-weight:600;z-index:20}
.dk .d-lab em{font-style:normal;background:#1e1b4b;color:#fff;border-radius:99px;padding:.3em .9em}
.dk .d-cd.up{transform:translate(0,-80cqw) rotate(-4deg);transition:transform .9s cubic-bezier(.25,1.15,.35,1),opacity .35s ease}
.dk .d-cd{transition:transform .95s cubic-bezier(.25,1.15,.35,1),opacity .35s ease}
.dk .d-stamp{right:3.5%;bottom:4.5%;font-size:calc(var(--f)*1.05);border-width:.5cqw;border-radius:1.4cqw;padding:.7cqw 2cqw;letter-spacing:.07em;background:#ffffffe6;box-shadow:none;transform:translate(-4cqw,-50cqw) scale(6) rotate(-18deg)}
.dk .d-stamp.s{font-size:calc(var(--f)*1.05);border-width:.5cqw;padding:.7cqw 2cqw}
.dk .d-cd.front .d-stamp{animation:dk-thud .75s .55s cubic-bezier(.3,1.35,.5,1) forwards}
@keyframes dk-thud{0%{opacity:0;transform:translate(-4cqw,-50cqw) scale(6) rotate(-18deg)}35%{opacity:1}100%{opacity:1;transform:rotate(-8deg)}}
.dk .d-cd.up{transform:translate(30cqw,-26cqw) scale(2.3) rotate(4deg);transition:transform 1s cubic-bezier(.22,.9,.3,1),opacity .45s ease}
.dk .d-cd{transition:transform 1s cubic-bezier(.22,.9,.3,1),opacity .6s ease}

.sg-line { display: none; }

@media (min-width: 861px) {
  .slide { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 24px; }
  .phone-wrap { justify-self: start; }
  .slide .tile[data-depth="-22"] { left: 41%; }
}

@media (min-width: 861px) {
  .slide { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: 12px; }
  .hero-title { font-size: clamp(44px, min(5.6vw, 12svh), 92px); }
  .hero .phone.mac { --mw: clamp(340px, min(50vw, calc((100svh - var(--nav-h, 76px) - 200px) * 1.55)), 760px); }
  .deck-wrap { width: min(100%, 620px, calc((100svh - var(--nav-h, 76px) - 150px) * 1.06)); }
  .slide .tile[data-depth="-22"] { left: 37%; }
}

@media (min-width: 861px) {
  .deck-wrap { width: min(100%, 560px, calc((100svh - var(--nav-h, 76px) - 250px) * 1.06)); }
}

@media (min-width: 861px) {
  .slide { padding-left: max(var(--pad), calc((100% - 1360px) / 2)); padding-right: max(var(--pad), calc((100% - 1360px) / 2)); }
  .hero .phone.mac { --mw: clamp(340px, min(calc(min(100vw - 17px - 2 * var(--pad), 1360px) - 492px), calc((100svh - var(--nav-h, 76px) - 200px) * 1.55)), 900px); }
  .phone-wrap { justify-self: center; }
  .deck-wrap { width: min(100%, 700px, calc((100svh - var(--nav-h, 76px) - 170px) * 1.06)); }
}

@media (min-width: 861px) {
  .hero .phone.mac { --mw: clamp(340px, min(calc(min(100vw - 17px - 2 * var(--pad), 1360px) - 572px), calc((100svh - var(--nav-h, 76px) - 200px) * 1.55)), 900px); }
}

.hero-track { transition-duration: 1.5s; }
.slide.sx { background-repeat: no-repeat; }
.hero-title .hk { display: block; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin: 0 0 14px; color: var(--sxa, var(--violet)); white-space: normal; }
.hero-title.sm { font-size: clamp(34px, min(4.4vw, 9.5svh), 70px); }
.hero-title .sl { white-space: normal; }
@media (min-width: 861px) {
  .slide { grid-template-columns: minmax(0, 580px) minmax(0, 1fr); column-gap: 8px; }
  .hero-right { max-width: 540px; }
  .hero-right p { font-size: 18px; }
  .hero .phone.mac { --mw: clamp(340px, min(calc(min(100vw - 17px - 2 * var(--pad), 1360px) - 672px), calc((100svh - var(--nav-h, 76px) - 200px) * 1.55)), 900px); }
  .slide .tile[data-depth="-22"] { left: 44%; }
}

.hero.dark .hc-count, .hero.dark .hc-count b { color: #fff; }
.hero.dark .hc-bar { background: #ffffff44; }
.hero.dark .hc-bar i { background: #fff; }
.hero.dark .scroll-cue { color: #fff; }
.hero.dark .scroll-cue i { border-color: #fff; }
.t-dark .hero-title { color: #fff; }
.t-dark .hero-title .sl-l { filter: brightness(1.9) saturate(1.3); }
.t-dark .hero-right p { color: #ffffffd9; }
.t-dark .store { background: #fff; color: #17142e; }
.t-dark .store:hover { background: var(--sxa); color: #111; }

.vz { container-type: inline-size; --f: clamp(10px, 3.3cqw, 19px); width: min(100%, 700px); }
@media (min-width: 861px) { .vz { width: min(100%, 700px, calc((100svh - var(--nav-h, 76px) - 170px) * 1.1)); } }
@media (max-width: 860px) { .vz { width: min(100%, calc((100svh - 400px) * 1.06), 420px); min-width: 250px; } }
.vz .st { position: relative; width: 100%; aspect-ratio: 1.06; }
.vz .v-lap { position: relative; width: 100%; filter: drop-shadow(0 3cqw 3cqw rgba(0,0,0,.3)); }
.vz .v-lid { background: linear-gradient(180deg,#2c2b36,#15141b); border-radius: 1.4cqw 1.4cqw .4cqw .4cqw; padding: .9cqw .9cqw 1cqw; box-shadow: inset 0 0 0 .12cqw #45444f; }
.vz .v-scr { position: relative; border-radius: .5cqw; aspect-ratio: 16/10; overflow: hidden; font-size: calc(var(--f) * .9); line-height: 1.3; }
.vz .v-base { height: 1.3cqw; margin: 0 -4%; border-radius: 0 0 2cqw 2cqw / 0 0 1cqw 1cqw; background: linear-gradient(#dcdbe3,#a9a8b4); }
.vz .v-tb { display: flex; gap: 1cqw; align-items: center; padding: .7cqw 1cqw; border-bottom: 1px solid #8884; font-size: calc(var(--f) * .8); }
.vz .v-tb i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #ff5f57; box-shadow: 1.1cqw 0 #febc2e, 2.2cqw 0 #28c840; margin-right: 2.6cqw; }
.vz .v-row { display: flex; align-items: center; gap: 1cqw; padding: .6cqw 1cqw; }
.vz .v-row em { margin-left: auto; font-style: normal; font-weight: 600; }
.vz .v-dot { width: 1.7cqw; height: 1.7cqw; border-radius: .5cqw; flex: none; }
.vz .v-chip { position: absolute; z-index: 4; padding: 1.1cqw 1.8cqw; border-radius: 1.6cqw; font-size: calc(var(--f) * 1.05); font-weight: 600; white-space: nowrap; box-shadow: 0 1.4cqw 2.6cqw -.8cqw rgba(0,0,0,.4); display: flex; align-items: center; gap: 1.2cqw; }
.vz .v-chip small { display: block; font-weight: 500; opacity: .7; font-size: .82em; }
@keyframes vpop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }
@keyframes vbob { 50% { transform: translateY(-1.4cqw); } }
@keyframes vgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vin { from { opacity: 0; transform: translateX(6cqw); } to { opacity: 1; transform: none; } }
@keyframes vup { from { opacity: 0; transform: translateY(4cqw); } to { opacity: 1; transform: none; } }
@keyframes vtw { 0%,100% { opacity: .25; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
@keyframes vpulse { 0% { box-shadow: 0 0 0 0 var(--pc, #fff8); } 100% { box-shadow: 0 0 0 4cqw transparent; } }

.sx-neon { --sxa: #b6ff3c; background-image: radial-gradient(60vw 50vw at 92% -10%, #6d28f5aa, transparent 60%), radial-gradient(50vw 40vw at 55% 112%, #06d6a055, transparent 60%), linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: auto, auto, 56px 56px, 56px 56px; background-color: #0a0b1f; }
.v-neon .v-scr { background: #0f1030; color: #d9d9ff; }
.v-neon .v-rev { display: flex; align-items: baseline; gap: 1.4cqw; padding: .8cqw 1cqw; } .v-neon .v-rev b { font-size: calc(var(--f) * 1.9); } .v-neon .v-rev em { font-style: normal; color: #b6ff3c; font-weight: 700; }
.v-neon .v-spark { display: flex; align-items: flex-end; gap: .7cqw; height: 9cqw; padding: 0 1cqw; }
.v-neon .v-spark s { flex: 1; height: var(--h); border-radius: .4cqw .4cqw 0 0; background: linear-gradient(#b6ff3c,#06d6a0); transform-origin: bottom; transform: scaleY(0); }
.is-active .v-neon .v-spark s { animation: vgrow .9s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * .1s + .6s); }
.v-neon .v-row { opacity: 0; }
.is-active .v-neon .v-row { animation: vin .7s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i) * .3s + 1.6s); }
.v-neon .v-chip { background: #14153d; color: #fff; border: 1px solid #3b3d8a; opacity: 0; }
.v-neon .v-chip.vk-a { left: -5%; top: 3%; } .v-neon .v-chip.vk-b { right: -3%; bottom: 8%; color: #b6ff3c; }
.is-active .v-neon .v-chip { animation: vpop .7s cubic-bezier(.2,1.5,.4,1) both, vbob 3.6s ease-in-out infinite; }
.is-active .v-neon .v-chip.vk-a { animation-delay: 2.2s, 3s; } .is-active .v-neon .v-chip.vk-b { animation-delay: 2.7s, 3.5s; }
.v-neon .v-moon { position: absolute; right: 4%; top: -8%; width: 13cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%,#fff,#d4d4f0 60%,#8888b8); display: grid; place-items: center; color: #1b1b44; font-weight: 700; font-size: calc(var(--f) * 1.1); box-shadow: 0 0 6cqw #8b8bff88; opacity: 0; }
.is-active .v-neon .v-moon { animation: vpop .8s cubic-bezier(.2,1.4,.4,1) .3s both, vbob 5s ease-in-out 1.2s infinite; }

.sx-bento { --sxa: #2563eb; background: radial-gradient(50vw 40vw at 90% 0, #c7d9ff, transparent 60%), #e8f0ff; }
.v-bento .v-bn { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 2.4cqw; }
.v-bento .v-bn > div { position: relative; overflow: hidden; border-radius: 3cqw; padding: 3cqw; font-size: calc(var(--f) * 1); box-shadow: 0 1.8cqw 3cqw -1.4cqw rgba(15,27,61,.35); opacity: 0; color: #0f1b3d; }
.is-active .v-bento .v-bn > div { animation: vpop .8s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * .13s + .5s); }
.v-bento .v-bn > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff88 50%, transparent 70%); background-size: 250% 100%; background-position: 130% 0; }
.is-active .v-bento .v-bn > div::after { animation: vshine 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * .35s + 2s); }
@keyframes vshine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.v-bento b { font-weight: 700; display: block; } .v-bento small { display: block; opacity: .65; font-size: .8em; }
.v-bento .vk-a { grid-column: 1 / 3; grid-row: 1 / 3; background: #fff; } .v-bento .vk-b { background: #fde68a; } .v-bento .vk-c { background: #bbf7d0; } .v-bento .vk-d { background: #0b1226; color: #38e0ff !important; } .v-bento .vk-e { background: #fbcfe8; } .v-bento .vk-f { background: #c7d2fe; }
.v-bento .v-mb { margin-top: 2.4cqw; height: 62%; border-radius: 1.6cqw; background: #eef2ff; position: relative; overflow: hidden; }
.v-bento .v-mb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20%; background: #dbe3ff; } .v-bento .v-mb::after { content: ""; position: absolute; left: 8%; top: 34%; width: 55%; height: 34%; border-radius: 1.2cqw; background: linear-gradient(135deg,#2563eb,#7c3aed); }
.v-bento .v-big { display: block; font-size: calc(var(--f) * 2.8); font-weight: 700; line-height: 1; margin-top: 1.2cqw; }
.is-active .v-bento .vk-d .v-big, .is-active .v-bento .vk-e .v-big { animation: vbob 2.4s ease-in-out 2s infinite; }
.v-bento .v-cd { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2cqw; margin-top: 2cqw; } .v-bento .v-cd s { aspect-ratio: 1; border-radius: 50%; background: #0f1b3d33; } .v-bento .v-cd s.vk-o { background: #f59e0b; }
.v-bento .v-lang { display: block; margin-top: 1.4cqw; font-weight: 700; }

.sx-forest { --sxa: #f2b84b; background: radial-gradient(40vw 30vw at 8% 100%, #2d6a4f88, transparent 60%), #173a2c; }
.v-forest .v-scr { background: #f6efdc; color: #173a2c; }
.v-forest .v-leaf { position: absolute; z-index: 0; opacity: .22; fill: #8fd1a7; transform-origin: bottom center; }
.v-forest .v-leaf svg { width: 100%; height: 100%; display: block; }
.v-forest .vk-l1 { left: -14%; bottom: -8%; width: 30%; } .v-forest .vk-l2 { right: -6%; top: -10%; width: 18%; rotate: 120deg; }
.is-active .v-forest .v-leaf { animation: vsway 5s ease-in-out infinite; } @keyframes vsway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
.v-forest .v-art { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2cqw; padding: 1.2cqw; }
.v-forest .v-art > div { opacity: 0; } .is-active .v-forest .v-art > div { animation: vup .7s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i) * .22s + .6s); }
.v-forest .vk-im { border-radius: .6cqw; min-height: 9cqw; background: linear-gradient(160deg,#2f6b4f,#8fd1a7); } .v-forest .vk-im.vk-y { background: linear-gradient(160deg,#f2b84b,#f7dd9c); }
.v-forest .v-art i { display: block; height: .6cqw; border-radius: 9px; background: #173a2c22; margin: .6cqw 0; }
.v-forest .v-chip { background: #f6efdc; color: #173a2c; opacity: 0; }
.v-forest .v-chip.vk-a { left: -6%; top: 2%; } .v-forest .v-chip.vk-b { right: -2%; bottom: 8%; }
.is-active .v-forest .v-chip { animation: vpop .7s cubic-bezier(.2,1.5,.4,1) both, vbob 4s ease-in-out infinite; } .is-active .v-forest .v-chip.vk-a { animation-delay: 1.8s, 2.6s; } .is-active .v-forest .v-chip.vk-b { animation-delay: 2.4s, 3.2s; }
.v-forest .v-ring { width: 5.2cqw; height: 5.2cqw; transform: rotate(-90deg); flex: none; } .v-forest .v-ring circle { fill: none; stroke: #173a2c22; stroke-width: 4; } .v-forest .v-ring .vk-f { stroke: #16a34a; stroke-linecap: round; stroke-dasharray: 88; stroke-dashoffset: 88; }
.is-active .v-forest .v-ring .vk-f { animation: vring 1.6s ease-out 2s forwards; } @keyframes vring { to { stroke-dashoffset: 5; } }

.sx-notif { --sxa: #e0364a; background: linear-gradient(150deg, #ffe3d3, #ffb9a8); }
.sx-notif .hero-title, .sx-notif .sl-t { color: #4a1a14; } .sx-notif .hero-right p { color: #6b2f28; }
.v-notif .v-nt { position: absolute; display: flex; align-items: center; gap: 3cqw; width: 84%; height: 17%; background: #fff; border-radius: 3cqw; padding: 0 3.4cqw; box-shadow: 0 2cqw 3.4cqw -1.2cqw rgba(110,30,20,.4); font-size: calc(var(--f) * 1.05); font-weight: 600; color: #4a1a14; opacity: 0; rotate: var(--r); }
.is-active .v-notif .v-nt { animation: vdrop .9s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * .3s + .5s); }
@keyframes vdrop { 0% { opacity: 0; transform: translateY(-40cqw) scale(.8); } 100% { opacity: 1; transform: none; } }
.v-notif .vk-ic { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.v-notif small { display: block; font-weight: 500; opacity: .6; font-size: .82em; } .v-notif em { margin-left: auto; font-style: normal; font-size: .82em; opacity: .6; }
.v-notif .v-bd { position: absolute; right: 3%; top: -3%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #e0364a; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--f) * 2.6); z-index: 5; opacity: 0; --pc: #e0364a88; }
.is-active .v-notif .v-bd { animation: vpop .8s cubic-bezier(.2,1.6,.4,1) 2.2s both, vpulse 1.8s ease-out 3s infinite; }
.is-active .v-notif .v-nt:first-of-type { }

.sx-ai { --sxa: #67e8f9; background: radial-gradient(45vw 35vw at 85% 0, #db277788, transparent 60%), linear-gradient(135deg, #1a1147, #4a1d96 60%, #7c1d8a); }
.v-ai .v-pr { position: absolute; left: 0; right: 0; top: 2%; background: #fff; color: #2b1160; border-radius: 99px; padding: 2.6cqw 4cqw; font-size: calc(var(--f) * 1.1); font-weight: 500; display: flex; gap: 2cqw; align-items: center; box-shadow: 0 2cqw 4cqw -1cqw #0006; z-index: 6; }
.v-ai .v-pr i { font-style: normal; color: #c026d3; font-size: 1.3em; } .v-ai .v-pr u { display: inline-block; width: .12em; height: 1em; background: #c026d3; text-decoration: none; animation: vblink 1s steps(1) infinite; }
@keyframes vblink { 50% { opacity: 0; } }
.v-ai .vk-ty { display: inline-block; clip-path: inset(0 100% 0 0); }
.is-active .v-ai .vk-ty { animation: vtype 2.2s steps(32) .5s forwards; } @keyframes vtype { to { clip-path: inset(0 0 0 0); } }
.v-ai .v-pg { position: absolute; top: 25%; width: 44%; aspect-ratio: .78; background: #fff; border-radius: 2.4cqw; padding: 2.4cqw; box-shadow: 0 3cqw 5cqw -1.5cqw #0008; color: #2b1160; opacity: 0; }
.v-ai .vk-p1 { left: 0; --rr: -8deg; } .v-ai .vk-p3 { right: 0; --rr: 7deg; } .v-ai .vk-p2 { left: 28%; --rr: -1deg; z-index: 2; }
.is-active .v-ai .v-pg { animation: vfan 1s cubic-bezier(.2,1.3,.4,1) both; } .is-active .v-ai .vk-p1 { animation-delay: 3s; } .is-active .v-ai .vk-p3 { animation-delay: 3.2s; } .is-active .v-ai .vk-p2 { animation-delay: 3.4s; }
@keyframes vfan { 0% { opacity: 0; transform: translate(0,-18cqw) scale(.2) rotate(0); } 100% { opacity: 1; transform: rotate(var(--rr)); } }
.v-ai .v-pg .vk-h { height: 38%; border-radius: 1.4cqw; background: linear-gradient(135deg,#f472b6,#fb923c); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: calc(var(--f) * 1.4); }
.v-ai .v-pg s { display: block; height: 1.2cqw; border-radius: 9px; background: #2b116022; margin-top: 1.8cqw; } .v-ai .v-pg .vk-b { margin-top: 2.4cqw; width: 46%; height: 5cqw; border-radius: 99px; background: #2b1160; }
.v-ai .v-rdy { position: absolute; left: 50%; bottom: 0; margin-left: -17cqw; width: 34cqw; text-align: center; background: #22d3ee; color: #041b24; padding: 1.8cqw 0; border-radius: 99px; font-weight: 700; font-size: calc(var(--f) * 1.05); box-shadow: 0 1.6cqw 3cqw -1cqw #000a; z-index: 7; opacity: 0; }
.is-active .v-ai .v-rdy { animation: vpop .7s cubic-bezier(.2,1.6,.4,1) 4.4s both; }
.v-ai .v-sp { position: absolute; color: #fde68a; width: 5cqw; height: 5cqw; opacity: 0; } .v-ai .v-sp svg { width: 100%; height: 100%; }
.v-ai .vk-s1 { left: -3%; top: 30%; } .v-ai .vk-s2 { right: -2%; top: 14%; width: 3.6cqw; height: 3.6cqw; } .v-ai .vk-s3 { right: 10%; bottom: 14%; color: #67e8f9; }
.is-active .v-ai .v-sp { animation: vtw 2.4s ease-in-out infinite; } .is-active .v-ai .vk-s2 { animation-delay: .8s; } .is-active .v-ai .vk-s3 { animation-delay: 1.5s; }

.sx-day { --sxa: #fde68a; background: #0b1030; }
.v-skyl { position: absolute; inset: 0; z-index: 0; }
.v-skyl .vk-sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; } .v-skyl .vk-sky.on { opacity: 1; }
.v-skyl .vk-s0 { background: linear-gradient(180deg,#4db3ff,#2f6fe8 70%,#2556c8); } .v-skyl .vk-s1 { background: linear-gradient(180deg,#2d9bf0,#1d63d6 70%,#1e40af); } .v-skyl .vk-s2 { background: linear-gradient(180deg,#f59e0b,#ea580c 70%,#be3a10); }
.v-skyl .vk-s3 { background: linear-gradient(180deg,#fb7185,#c026d3 70%,#6d28d9); } .v-skyl .vk-s4 { background: linear-gradient(180deg,#5b21b6,#3b1a8f 70%,#1e1b4b); }
.v-skyl .vk-s5 { background: linear-gradient(180deg,#070b22,#111a4a 75%,#2a2478); }
.v-skyl .vk-s5::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#fff 1px,transparent 1.5px), radial-gradient(#fff9 1px,transparent 1.5px); background-size: 46px 46px, 71px 71px; background-position: 0 0, 23px 31px; opacity: .55; }
.sx-day .phone-wrap, .sx-day .hero-title, .sx-day .hero-right { position: relative; z-index: 2; }
.v-day .v-clk { position: absolute; left: 0; top: 0; } .v-day .v-clk b { display: block; font-size: calc(var(--f) * 3.8); line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .v-day .v-clk small { display: block; font-size: calc(var(--f) * .9); opacity: .92; letter-spacing: .16em; margin-top: .35em; font-weight: 500; }
.v-day .v-sun { position: absolute; right: 2%; top: 0; width: 12cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%,#fffbe0,#fde047 60%,#f59e0b); box-shadow: 0 0 9cqw #fde047; transition: all 1.6s ease; }
.v-day .v-sun.vk-set { background: radial-gradient(circle at 35% 35%,#ffe2c0,#fb923c 60%,#e11d48); box-shadow: 0 0 9cqw #fb923c; } .v-day .v-sun.vk-moon { background: radial-gradient(circle at 35% 35%,#fff,#e5e7eb 60%,#9ca3af); box-shadow: 0 0 6cqw #fff6; }
.v-day .v-dy { position: absolute; left: 0; right: 0; top: 19.5%; display: flex; gap: 1cqw; } .v-day .v-dy s { flex: 1; height: .9cqw; border-radius: 9px; background: #ffffff40; transition: background .5s; } .v-day .v-dy s.on { background: #fff; }
.v-day .v-evs { position: absolute; left: 0; right: 0; top: 24.5%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.8cqw; align-content: start; }
.v-day .v-ev { display: flex; align-items: center; gap: 2cqw; background: #ffffff2b; backdrop-filter: blur(10px); border: 0 solid #ffffff4d; border-radius: 2.6cqw; padding: 0 2.2cqw; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(4cqw) scale(.96); transition: max-height .6s cubic-bezier(.2,1,.3,1), opacity .5s, margin .6s, padding .6s, transform .7s cubic-bezier(.2,1.3,.4,1); color: #fff; }
.v-day .v-ev.on { max-height: 16cqw; opacity: 1; margin-bottom: 1.5cqw; padding: 1.5cqw 2.2cqw; transform: none; border-width: 1px; }
.v-day .v-ev time { background: #fff; color: #1e1b4b; border-radius: 99px; padding: .3em .7em; font-weight: 700; font-size: calc(var(--f) * .82); font-variant-numeric: tabular-nums; flex: none; }
.v-day .v-ev strong { flex: 1; min-width: 0; font-size: calc(var(--f) * .95); font-weight: 600; line-height: 1.2; }
.v-day .v-ev i { font-style: normal; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: calc(var(--f) * .8); flex: none; }
@media (max-width: 860px) { .v-day .v-evs { grid-template-columns: 1fr; top: 26%; } .v-day .v-dy { top: 21.5%; } .v-day .v-ev.on { max-height: 10cqw; padding: 1cqw 2.2cqw; margin-bottom: 1cqw; } }

.sx-scatter { --sxa: #6d28f5; background: radial-gradient(50vw 40vw at 15% 0, #ffffffaa, transparent 60%), #f1edff; }
.v-scatter .v-rg { position: absolute; left: 50%; top: 50%; border: 1px solid #cfc3f7; border-radius: 50%; translate: -50% -50%; aspect-ratio: 1; }
.v-scatter .vk-r1 { width: 62%; } .v-scatter .vk-r2 { width: 94%; }
.is-active .v-scatter .v-rg { animation: vringx 3.4s ease-out infinite; } .is-active .v-scatter .vk-r2 { animation-delay: 1.2s; }
@keyframes vringx { 0% { transform: scale(.9); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.06); opacity: .4; } }
.v-scatter .v-ln { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.v-scatter .v-ln line { stroke: #9d82f2; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-active .v-scatter .v-ln line { animation: vdraw .9s ease-out both; animation-delay: calc(var(--i) * .1s + 1.5s); } @keyframes vdraw { to { stroke-dashoffset: 0; } }
.v-scatter .v-tl { position: absolute; width: 15%; aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: calc(var(--f) * 1.5); box-shadow: 0 1.4cqw 2.4cqw -.8cqw rgba(30,27,75,.35); z-index: 2; rotate: var(--r); opacity: 0; }
.is-active .v-scatter .v-tl { animation: vfly 1.2s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i) * .1s + .2s); }
@keyframes vfly { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.4) rotate(40deg); } 100% { opacity: 1; transform: none; } }
.v-scatter .v-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 34%; aspect-ratio: 1.05; border-radius: 12%; background: linear-gradient(145deg,#8b5cf6,#5b21b6); color: #fff; display: grid; place-items: center; text-align: center; box-shadow: 0 3cqw 5cqw -1.5cqw #6d28f5aa, inset 0 0 0 .5cqw #ffffff33; z-index: 3; opacity: 0; }
.is-active .v-scatter .v-core { animation: vpop .9s cubic-bezier(.2,1.6,.4,1) 1.9s both; }
.v-scatter .v-core b { display: block; font-size: calc(var(--f) * 3); line-height: 1; font-weight: 600; } .v-scatter .v-core small { display: block; font-size: calc(var(--f) * .95); opacity: .85; margin-top: .3em; letter-spacing: .06em; }

.sx-cal { --sxa: #c2410c; background: radial-gradient(40vw 40vw at 90% -10%, #fff8, transparent 60%), linear-gradient(135deg, #ffd9a8, #ff9a8b 55%, #ff6f91); }
.sx-cal .hero-title, .sx-cal .sl-t { color: #3a1020; } .sx-cal .hero-right p { color: #5a2a30; }
.v-calw .v-sunc { position: absolute; right: -14%; top: -22%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff9 0, #fff0 65%); animation: vbob 6s ease-in-out infinite; }
.v-calw .v-scr { background: #fff8f1; color: #3a1020; }
.v-calw .v-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: .5cqw; padding: .9cqw 1cqw; }
.v-calw .v-cal b { font-weight: 600; text-align: center; opacity: .5; font-size: .85em; }
.v-calw .v-cal span { aspect-ratio: 1.3; border-radius: .5cqw; background: #ffe9d6; display: grid; place-items: center; font-size: .95em; opacity: 0; }
.is-active .v-calw .v-cal span { animation: vpop .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * .06s + .4s); }
.v-calw .v-cal span.vk-f { background: #ff6f91; color: #fff; font-weight: 600; } .v-calw .v-cal span.vk-g { background: #3a1020; color: #fff; }
.v-calw .v-row { opacity: 0; } .is-active .v-calw .v-row { animation: vin .7s cubic-bezier(.2,1.2,.4,1) 2.2s both; }
.v-calw .v-chip { background: #fff; color: #3a1020; opacity: 0; } .v-calw .v-chip.vk-a { left: -6%; top: 2%; } .v-calw .v-chip.vk-b { right: -2%; bottom: 10%; }
.is-active .v-calw .v-chip { animation: vpop .7s cubic-bezier(.2,1.5,.4,1) both, vbob 4s ease-in-out infinite; } .is-active .v-calw .v-chip.vk-a { animation-delay: 2.4s, 3.2s; } .is-active .v-calw .v-chip.vk-b { animation-delay: 3s, 3.8s; }

.v-neon .st, .v-forest .st, .v-calw .st { aspect-ratio: 1.5; }
@media (min-width: 861px) { .v-neon, .v-forest, .v-calw { width: min(100%, 780px, calc((100svh - var(--nav-h, 76px) - 190px) * 1.5)); } }
@media (max-width: 860px) { .v-neon, .v-forest, .v-calw { width: min(100%, calc((100svh - 400px) * 1.5), 440px); } }
.v-forest .v-chip.vk-a { left: -7%; top: -6%; } .v-neon .v-chip.vk-a { top: -6%; } .v-calw .v-chip.vk-a { top: -6%; }

.hc-pp .ic-play { display: none; }
.hero.hold .hc-pp .ic-pause { display: none; }
.hero.hold .hc-pp .ic-play { display: block; }
.hero.hold .hc-pp { background: var(--ink); color: #fff; }
.hero.hold .slide.is-active *, .hero.hold .slide.is-active *::before, .hero.hold .slide.is-active *::after { animation-play-state: paused !important; }
.hero.dark .hc-btn:not(.hc-next) { }
.hero-right p { font-size: 21px; line-height: 1.55; }
.hero-title .hk { font-size: 16px; }
@media (min-width: 861px) {
  .hero-right { max-width: 580px; }
  .hero-right p { font-size: 21px; }
  .vz { --f: clamp(11px, 3.9cqw, 22px); }
  .hero .phone.mac .screen { font-size: clamp(10px, 1.25vw, 15px); }
}
@media (max-width: 860px) { .hero-right p { font-size: 18px; } .vz { --f: clamp(11px, 3.9cqw, 20px); } }
.sx-forest { --sxa: #0b8f6c; background: radial-gradient(45vw 35vw at 92% 0, #ffffffcc, transparent 60%), radial-gradient(40vw 30vw at 5% 100%, #5ed3b455, transparent 60%), linear-gradient(160deg, #e3f8ef, #b4ead7); }
.sx-forest .hero-title, .sx-forest .sl-t { color: #0b3b33; }
.sx-forest .hero-right p { color: #1d5a4e; }
.sx-forest .store { background: #0b3b33; color: #fff; }
.sx-forest .store:hover { background: #0b8f6c; }
.v-forest .v-leaf { fill: #12a37f; opacity: .28; }
.v-forest .v-scr { background: #ffffff; color: #0b3b33; }
.v-forest .vk-im { background: linear-gradient(160deg, #0ea5a4, #6ee7b7); }
.v-forest .vk-im.vk-y { background: linear-gradient(160deg, #38bdf8, #a5f3fc); }
.v-forest .v-chip { background: #ffffff; color: #0b3b33; }
.v-forest .v-ring .f { stroke: #0b8f6c; }

.astro-fab { touch-action: none; }
.astro-fab:not(.on-scr) { opacity: 0 !important; pointer-events: none !important; }
.astro-fab.fly { animation: fabfly 1.7s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes fabfly {
  0% { opacity: 0; transform: translateX(calc(-100vw + 120px)) rotate(-300deg); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.astro-fab.dragging { transition: none; }
.astro-fab.dragging .af-btn { cursor: grabbing; }
.astro-fab .af-btn { cursor: grab; }
.hero-right p { font-size: 24px; line-height: 1.5; }
.hero-title .hk { font-size: 18px; }
@media (min-width: 861px) {
  .slide { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
  .hero-right { max-width: 620px; }
  .hero-right p { font-size: 24px; }
  .hero .phone.mac { --mw: clamp(340px, min(calc(min(100vw - 17px - 2 * var(--pad), 1360px) - 712px), calc((100svh - var(--nav-h, 76px) - 200px) * 1.55)), 900px); }
}
@media (max-width: 860px) { .hero-right p { font-size: 19px; } }
@media (min-width: 861px) and (max-height: 820px) { .hero-right p { font-size: 22px; } }

.astro-fab { touch-action: none; }
.astro-fab:not(.on-scr) { opacity: 0 !important; transform: translateY(24px) scale(.8) !important; pointer-events: none !important; }
.astro-fab .af-btn, .astro-fab .af-btn * { user-select: none; -webkit-user-drag: none; }
.astro-fab.dragging { transition: none; }
.astro-fab.dragging .af-btn { cursor: grabbing; }
.astro-fab .af-btn { cursor: grab; }
.hero-right p { font-size: 24px; line-height: 1.5; }
.hero-title .hk { font-size: 18px; }
@media (min-width: 861px) {
  .slide { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
  .hero-right { max-width: 620px; }
  .hero-right p { font-size: 24px; }
  .hero .phone.mac { --mw: clamp(340px, min(calc(min(100vw - 17px - 2 * var(--pad), 1360px) - 712px), calc((100svh - var(--nav-h, 76px) - 200px) * 1.55)), 900px); }
}
@media (max-width: 860px) { .hero-right p { font-size: 19px; } }
@media (min-width: 861px) and (max-height: 820px) { .hero-right p { font-size: 22px; } }

.fp-hero { padding: clamp(28px, 4vw, 56px) var(--pad) clamp(30px, 4vw, 60px); position: relative; overflow: hidden; background: radial-gradient(60vw 40vw at 90% -10%, #ede6ff, transparent 60%), var(--bg); }
.fp-hero-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.fp-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; color: var(--muted); margin-bottom: 22px; }
.fp-crumb a { color: var(--muted); } .fp-crumb a:hover { color: var(--violet); } .fp-crumb b { color: var(--ink); font-weight: 600; }
.fp-kick { display: inline-block; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--violet); margin-bottom: 14px; }
.fp-copy h1 { font-weight: 400; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.fp-lead { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.6; color: var(--muted); margin: 22px 0 28px; max-width: 640px; }
.fp-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fp-ghost { display: inline-flex; align-items: center; padding: 15px 26px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 500; font-size: 16px; transition: background .3s, color .3s; }
.fp-ghost:hover { background: var(--ink); color: #fff; }
.fp-vis { position: relative; display: grid; gap: 14px; padding: clamp(10px, 2vw, 28px); }
.fp-glow { position: absolute; inset: 8% 4%; background: radial-gradient(circle, #c9b6ff88, transparent 65%); filter: blur(10px); z-index: 0; }
.fp-card { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 22px; padding: 16px 20px; box-shadow: var(--shadow); font-size: 18px; animation: fpin .8s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * .12s + .2s); }
.fp-card:nth-child(odd) { margin-right: 28px; } .fp-card:nth-child(even) { margin-left: 28px; }
.fp-card b { display: block; font-weight: 600; } .fp-card small { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.fp-card em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 14px; }
.fp-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; flex: none; }
@keyframes fpin { from { opacity: 0; transform: translateX(32px) scale(.96); } }
.fp-sec { padding: clamp(44px, 6vw, 90px) var(--pad); }
.fp-sec > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.fp-alt { background: #fff; }
.fp-h2 { font-weight: 400; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -.03em; margin: 0 auto clamp(24px, 3vw, 44px); text-wrap: balance; }
.fp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fp-why { background: #fff; border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow); }
.fp-why h3, .fp-steps h3, .fp-list h3 { margin: 0 0 8px; font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.fp-why p, .fp-steps p, .fp-list p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.fp-n, .fp-sn { width: 44px; height: 44px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 600; margin-bottom: 18px; flex: none; }
.fp-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.fp-steps li { display: flex; gap: 20px; align-items: flex-start; background: var(--bg); border-radius: var(--radius-lg); padding: 26px; }
.fp-steps .fp-sn { margin: 0; }
.fp-list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
.fp-list li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.fp-ch { width: 14px; height: 14px; border-radius: 5px; margin-top: 9px; flex: none; }
.fp-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fp-vs > div { border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 44px); }
.fp-vs small { display: block; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.fp-vs p { margin: 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; letter-spacing: -.01em; }
.fp-vs-a { background: var(--bg); color: var(--muted); } .fp-vs-a small { color: #e0364a; }
.fp-vs-b { background: linear-gradient(135deg, #6d28f5, #4b1ec0); color: #fff; } .fp-vs-b small { color: #d6c8ff; }
.fp-relgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fp-rel { display: block; background: #fff; border-radius: 20px; padding: 22px 24px; box-shadow: var(--shadow); transition: transform .3s var(--ease-spring); }
.fp-rel:hover { transform: translateY(-4px); } .fp-rel b { display: block; font-size: 19px; font-weight: 600; } .fp-rel span { display: block; color: var(--muted); font-size: 16px; margin-top: 6px; line-height: 1.5; }
.fp-cta { padding: 0 var(--pad) clamp(40px, 6vw, 90px); }
.fp-cta-in { max-width: 1280px; margin: 0 auto; border-radius: var(--radius-xl); padding: clamp(36px, 6vw, 84px) clamp(24px, 5vw, 72px); background: linear-gradient(135deg, #1c1240, #3b1f8f); color: #fff; text-align: center; }
.fp-cta-in h2 { margin: 0 0 12px; font-weight: 400; font-size: clamp(30px, 4vw, 56px); letter-spacing: -.03em; line-height: 1.05; }
.fp-cta-in p { margin: 0 auto 28px; color: #d9d0ff; font-size: clamp(17px, 1.6vw, 21px); max-width: 560px; }
.fp-cta-in .store { background: #fff; color: #1b1446; }
@media (max-width: 900px) {
  .fp-hero-in, .fp-grid3, .fp-steps, .fp-list, .fp-vs, .fp-relgrid { grid-template-columns: 1fr; }
  .fp-card:nth-child(odd), .fp-card:nth-child(even) { margin: 0; }
}

.fp-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.fp-story .fp-h2 { margin: 0; }
.fp-text p { margin: 0 0 20px; color: var(--muted); font-size: 20px; line-height: 1.7; }
.fp-uc { background: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); border-top: 4px solid var(--violet); }
.fp-uc h3 { margin: 0 0 8px; font-weight: 600; font-size: 21px; }
.fp-uc p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.fp-day { list-style: none; margin: 0 auto; padding: 0 0 0 28px; border-left: 3px solid var(--violet-soft); display: grid; gap: 22px; }
.fp-day li { display: grid; grid-template-columns: 90px 1fr; gap: 20px; align-items: start; position: relative; }
.fp-day li::before { content: ""; position: absolute; left: -38px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 5px var(--violet-soft); }
.fp-day time { font-weight: 700; font-size: 22px; color: var(--violet); font-variant-numeric: tabular-nums; }
.fp-day b { display: block; font-size: 20px; font-weight: 600; } .fp-day span { display: block; color: var(--muted); font-size: 17px; line-height: 1.55; margin-top: 4px; }
@media (max-width: 900px) { .fp-story { grid-template-columns: 1fr; } .fp-day li { grid-template-columns: 70px 1fr; } }

.fp-hero::before, .fp-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; }
.fp-hero::before { width: 420px; height: 420px; right: 6%; top: -80px; background: #8b5cf655; animation: fpblob 12s ease-in-out infinite; }
.fp-hero::after { width: 320px; height: 320px; left: -60px; bottom: -80px; background: #22c55e33; animation: fpblob 15s ease-in-out infinite reverse; }
@keyframes fpblob { 50% { transform: translate(40px, 30px) scale(1.15); } }
.fp-hero-in { position: relative; z-index: 1; }
.fp-card { animation: fpin .8s cubic-bezier(.2, 1.2, .4, 1) both, fpfloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * .12s + .2s), calc(var(--i) * .7s + 1.2s); }
@keyframes fpfloat { 50% { transform: translateY(-6px); } }
.fp-card:hover { transform: scale(1.03); }
.fp-card:first-of-type em { background: #e0364a; color: #fff; padding: 2px 10px; border-radius: 99px; animation: fppulse 2s infinite; }
@keyframes fppulse { 0% { box-shadow: 0 0 0 0 #e0364a88; } 100% { box-shadow: 0 0 0 12px #e0364a00; } }
.fp-marq { overflow: hidden; background: var(--ink); color: #fff; padding: 18px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fp-marq-t { display: flex; gap: 48px; width: max-content; animation: fpmarq 28s linear infinite; font-size: clamp(22px, 2.6vw, 34px); font-weight: 300; letter-spacing: -.01em; white-space: nowrap; }
.fp-marq-t span::after { content: "✦"; color: var(--violet-2); margin-left: 48px; }
@keyframes fpmarq { to { transform: translateX(-50%); } }
.fp-stats-sec { padding-top: clamp(28px, 4vw, 56px); padding-bottom: 0; }
.fp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fp-stat { background: linear-gradient(135deg, #6d28f5, #4b1ec0); color: #fff; border-radius: var(--radius-lg); padding: 28px; }
.fp-stat:nth-child(2) { background: linear-gradient(135deg, #0f766e, #14b8a6); } .fp-stat:nth-child(3) { background: linear-gradient(135deg, #f26a2e, #ec4899); }
.fp-stat b { display: block; font-size: clamp(44px, 5vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.fp-stat span { display: block; margin-top: 8px; font-size: 18px; opacity: .9; }
.fp-why { transition: transform .4s var(--ease-spring), box-shadow .4s; }
.fp-why:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 24px 48px -18px rgba(109, 40, 245, .35); }
.fp-n { transition: transform .5s var(--ease-spring); } .fp-why:hover .fp-n { transform: scale(1.2) rotate(12deg); }
.fp-story-l { display: grid; gap: 28px; align-content: start; }
.fp-photo { position: relative; margin: 0; border-radius: var(--radius-xl); }
.fp-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); box-shadow: 0 30px 60px -24px rgba(27, 20, 70, .5); aspect-ratio: 4 / 3; object-fit: cover; }
.fp-fchip { position: absolute; background: #fff; padding: 12px 18px; border-radius: 16px; box-shadow: var(--shadow); font-weight: 600; font-size: 16px; animation: fpfloat 5s ease-in-out infinite; }
.fp-fchip::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); margin-right: 10px; }
.fp-fchip.c1 { left: -18px; top: 12%; } .fp-fchip.c2 { right: -14px; top: 44%; animation-delay: -1.5s; } .fp-fchip.c3 { left: 8%; bottom: -16px; animation-delay: -3s; }
.fp-uc { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 0; overflow: hidden; transition: transform .4s var(--ease-spring), box-shadow .4s; border-top: 0; }
.fp-uc:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -18px rgba(27, 20, 70, .35); }
.fp-uc-i { aspect-ratio: 16 / 10; overflow: hidden; }
.fp-uc-i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.fp-uc:hover .fp-uc-i img { transform: scale(1.08); }
.fp-uc-b { padding: 24px 26px 28px; border-top: 4px solid var(--violet); }
.fp-day { position: relative; }
.fp-day::before { content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 100%; background: linear-gradient(var(--violet), var(--violet-2) 60%, transparent); transform-origin: top; animation: fpline 2s ease-out both; }
@keyframes fpline { from { transform: scaleY(0); } }
.fp-day li.in::before { animation: fppulse2 2.4s ease-out infinite; }
@keyframes fppulse2 { 0% { box-shadow: 0 0 0 0 #6d28f588; } 70%, 100% { box-shadow: 0 0 0 12px #6d28f500; } }
.fp-vs-b { position: relative; overflow: hidden; }
.fp-vs-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff30 50%, transparent 70%); background-size: 250% 100%; animation: fpshine 5s ease-in-out infinite; pointer-events: none; }
@keyframes fpshine { 0%, 50% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.fp-cta-in { position: relative; overflow: hidden; }
.fp-cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.06); animation: fpkb 20s ease-in-out infinite alternate; }
@keyframes fpkb { to { transform: scale(1.16) translate(-1.5%, -1%); } }
.fp-cta-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #1c1240e6, #3b1f8fbf); z-index: 1; }
.fp-cta-c { position: relative; z-index: 2; }
.fp-cta-in .store { animation: fppulse3 2.4s infinite; }
@keyframes fppulse3 { 0% { box-shadow: 0 0 0 0 #ffffff88; } 100% { box-shadow: 0 0 0 18px #ffffff00; } }
@media (max-width: 900px) { .fp-stats { grid-template-columns: 1fr; } .fp-fchip.c1 { left: 6px; } .fp-fchip.c2 { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .fp-card, .fp-fchip, .fp-marq-t, .fp-cta-img, .fp-hero::before, .fp-hero::after, .fp-vs-b::after { animation: none; } }
.fp-h2 .sl { white-space: normal; }
.fp-story > * { min-width: 0; }
.fp-story-l { grid-template-columns: minmax(0, 1fr); }

.hb-sec { padding: clamp(36px, 5vw, 80px) var(--pad); }
.hb-frame { max-width: 1280px; margin: 0 auto; border: 1.5px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(180deg, #fff, #faf9ff); padding: clamp(22px, 3.4vw, 52px); box-shadow: var(--shadow); }
.hb-head { text-align: center; max-width: 760px; margin: 0 auto clamp(24px, 3vw, 44px); }
.hb-head .fp-h2 { margin: 0 auto 12px; display: flex; flex-direction: column; align-items: center; }
.hb-head .sl { white-space: normal; }
.hb-head p { margin: 0; color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; }
.hb-kick { display: inline-block; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--violet); margin-bottom: 14px; }
.hb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hb-card { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 28px; background: #fff; padding: 26px 26px 22px; transition: transform .4s var(--ease-spring), box-shadow .4s, border-color .3s; }
.hb-card:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 22px 44px -22px var(--c); }
.hb-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hb-n { width: 36px; height: 36px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.hb-k { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--c); }
.hb-card h3 { margin: 0 0 8px; font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.hb-card p { margin: 0 0 18px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.hb-vis { position: relative; margin-top: auto; border-radius: 20px; background: color-mix(in srgb, var(--c) 8%, #fff); border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); padding: 16px; min-height: 176px; display: flex; flex-direction: column; gap: 12px; justify-content: center; overflow: hidden; }
.hb-prompt { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 99px; padding: 12px 18px; font-size: 16px; box-shadow: var(--shadow); }
.hb-sp { color: var(--c); }
.hb-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: hstype 3.6s steps(32) .6s infinite alternate; }
@keyframes hstype { 0% { width: 0; } 60%, 100% { width: 19em; } }
.hb-tags { display: flex; flex-wrap: wrap; gap: 8px; } .hb-tags b { background: #fff; border-radius: 99px; padding: 7px 14px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); }
.hb-pills { display: flex; flex-wrap: wrap; gap: 8px; } .hb-pills span { background: var(--c); color: #fff; padding: 8px 14px; border-radius: 12px; font-weight: 700; font-size: 14px; }
.hb-stamp { align-self: flex-end; color: #dc2626; border: 3px solid #dc2626; border-radius: 8px; padding: 2px 14px; font-weight: 800; font-size: 18px; letter-spacing: .06em; transform: rotate(-6deg); background: #ffffffd9; }
.hb-card.in .hb-stamp { animation: hsslam .6s cubic-bezier(.2, 1.5, .4, 1) .5s both; }
@keyframes hsslam { from { opacity: 0; transform: scale(3) rotate(-18deg); } to { opacity: 1; transform: rotate(-6deg); } }
.hb-url { display: flex; gap: 8px; } .hb-url span { flex: 1; background: #fff; border-radius: 99px; padding: 10px 16px; font-size: 15px; box-shadow: var(--shadow); } .hb-url b { background: #0ea5e9; color: #fff; border-radius: 99px; padding: 10px 18px; font-size: 15px; }
.hb-prog { height: 8px; border-radius: 99px; background: #fff; overflow: hidden; } .hb-prog i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #0ea5e9, #22c55e); }
.hb-card.in .hb-prog i { animation: hsfill 3s ease-out .4s forwards; } @keyframes hsfill { to { width: 100%; } }
.hb-ck { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; } .hb-ck li::before { content: "✓"; color: #fff; background: #22c55e; border-radius: 50%; display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 12px; margin-right: 6px; }
.hb-photo { position: absolute; inset: 0; } .hb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-photo span { position: absolute; left: 12px; bottom: 12px; background: #fff; border-radius: 12px; padding: 8px 14px; font-weight: 600; font-size: 15px; box-shadow: var(--shadow); animation: fpfloat 5s ease-in-out infinite; }
.hb-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .hb-tabs b { background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; } .hb-tabs b.on { background: var(--c); color: #fff; }
.hb-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .hb-cal s { aspect-ratio: 1.4; border-radius: 6px; background: #fff; } .hb-cal s.o { background: var(--c); opacity: .85; } .hb-cal s.g { background: #3a1020; }
.hb-slots { display: flex; gap: 8px; } .hb-slots i { font-style: normal; background: #fff; border-radius: 99px; padding: 6px 14px; font-size: 14px; } .hb-slots i.on { background: #dcfce7; color: #14532d; font-weight: 700; box-shadow: 0 0 0 1.5px #22c55e; }
.hb-day { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .hb-day li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 9px 12px; font-size: 15px; box-shadow: var(--shadow); }
.hb-day time { background: var(--c); color: #fff; border-radius: 99px; padding: 2px 10px; font-weight: 700; font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
.hb-more { margin-top: 16px; font-weight: 600; font-size: 16px; color: var(--c); display: inline-flex; gap: 8px; align-items: center; }
.hb-more span { transition: transform .3s var(--ease-spring); } .hb-card:hover .hb-more span { transform: translateX(6px); }
.hb-all { margin-top: 26px; padding-top: 22px; border-top: 1.5px dashed var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hb-all b { width: 100%; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hb-all a { background: var(--violet-soft); color: var(--violet); padding: 9px 18px; border-radius: 99px; font-weight: 600; font-size: 15px; transition: background .3s, color .3s, transform .3s var(--ease-spring); }
.hb-all a:hover { background: var(--violet); color: #fff; transform: translateY(-3px); }
@media (max-width: 1000px) { .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hb-grid { grid-template-columns: 1fr; } .hb-frame { padding: 18px; border-radius: 28px; } }
@media (prefers-reduced-motion: reduce) { .hb-type, .hb-photo span { animation: none; width: auto; } }
.lang-wrap { display: flex; align-items: center; flex: none; }
.mp-lang-switcher { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.mp-lang-switcher li { margin: 0; }
.mp-lang-switcher a { display: flex; align-items: center; justify-content: center; width: 36px; height: 32px; border-radius: 999px; font-size: 0; line-height: 0; border: 1.5px solid transparent; transition: border-color .2s, background .2s, transform .2s; }
.mp-lang-switcher a:hover { background: var(--surface); transform: translateY(-1px); }
.mp-lang-switcher .active a { border-color: var(--violet); background: var(--surface); }
.mp-lang-switcher img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; display: block; }
@media (max-width: 1180px) { .mp-lang-switcher a { width: 30px; } .nav { gap: 14px; } }
@media (max-width: 860px) { .lang-wrap { margin-left: auto; } .nav .btn-outline { display: none; } }

.lang-wrap { position: relative; }
.lang-wrap .mp-lang-dd { display: none !important; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 11px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 700 13px/1 var(--font, inherit); letter-spacing: .05em; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.lang-btn:hover, .lang-wrap.open .lang-btn { border-color: var(--violet-2); box-shadow: 0 0 0 4px var(--violet-soft); }
.lang-btn img, .lang-wrap.sel .mp-lang-switcher img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; display: block; flex: none; }
.lang-btn i { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s var(--ease-out); }
.lang-wrap.open .lang-btn i { transform: rotate(225deg) translateY(-1px); }
.lang-wrap.sel .mp-lang-switcher { display: flex !important; flex-direction: column; gap: 2px; position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 100%; padding: 6px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s var(--ease-out), visibility 0s linear .18s; }
.lang-wrap.open .mp-lang-switcher { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang-wrap.sel .mp-lang-switcher a { width: auto; height: 36px; justify-content: flex-start; gap: 9px; padding: 0 12px; border-radius: 10px; border: 0; font: 700 13px/1 var(--font, inherit); letter-spacing: .05em; color: var(--ink); white-space: nowrap; }
.lang-wrap.sel .mp-lang-switcher a:hover { background: var(--lav-1); transform: none; }
.lang-wrap.sel .mp-lang-switcher .active a { background: var(--violet-soft); color: var(--violet); }

.slide.cold > * { content-visibility: hidden; }
.slide.warming > * { visibility: hidden; }
.slide.cold::after, .slide.warming::after { content: ""; position: absolute; left: 50%; top: 46%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid rgba(139, 92, 246, .22); border-top-color: var(--violet-2); animation: lzspin .8s linear infinite; z-index: 5; pointer-events: none; }
.slide:not(.is-active):not(.cold):not(.warming) *, .slide:not(.is-active):not(.cold):not(.warming) *::before, .slide:not(.is-active):not(.cold):not(.warming) *::after { animation-play-state: paused !important; }

.lz { position: relative; }
.lz, .lz * { animation-play-state: paused !important; }
.lz-veil { position: absolute; inset: 0; z-index: 30; border-radius: inherit; display: flex; justify-content: center; padding-top: min(30%, 200px); transition: opacity .45s ease; }
.lz-veil.out { opacity: 0; pointer-events: none; }
.lz-veil i { display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(139, 92, 246, .22); border-top-color: var(--violet-2); animation: lzspin .8s linear infinite; }
@keyframes lzspin { to { transform: rotate(360deg); } }
.lz-veil i { animation-play-state: running !important; }

.cap { display: contents; }
.cap-tg, .cap-cur, .cap-sep, .sr { display: none; }
@media (min-width: 861px) {
  .nav { justify-content: space-between; }
  .cap { display: flex; align-items: center; gap: 8px; position: relative; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -16px rgba(27, 20, 70, .28); }
  .cap-sep { display: block; width: 1px; height: 24px; background: var(--line); flex: none; }
  .cap-tg { display: flex; flex: none; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: var(--violet); color: #fff; font: 700 14px/1 var(--font, inherit); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 18px -8px var(--violet); }
  .cap-ic { position: relative; width: 16px; height: 10px; }
  .cap-ic::before, .cap-ic::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
  .cap-ic::before { top: 0; } .cap-ic::after { top: 8px; }
  .cap.mo .cap-ic::before { top: 4px; transform: rotate(45deg); } .cap.mo .cap-ic::after { top: 4px; transform: rotate(-45deg); }
  .cap-cur { display: block; flex: none; padding: 0 16px 0 12px; font: 600 15px/1 var(--font, inherit); color: var(--violet); white-space: nowrap; max-width: 160px; overflow: hidden; transition: max-width .5s var(--ease-out), opacity .3s, padding .5s var(--ease-out); }
  .cap-cur:empty { padding: 0 4px; }
  .cap.mo .cap-cur { max-width: 0; opacity: 0; padding: 0; }
  .cap .nav-links { display: flex; max-width: 0; overflow: hidden; transition: max-width .75s var(--ease-out); }
  .cap.mo .nav-links { max-width: 760px; }
  .cap .nav-links ul { flex-wrap: nowrap; gap: 2px; }
  .cap .nav-links a { display: block; background: none; box-shadow: none; padding: 9px 10px; font: 600 15px/1.2 var(--font, inherit); white-space: nowrap; opacity: 0; transform: translateX(-14px); animation: none !important; transition: opacity .4s ease, transform .5s var(--ease-out), background .2s, color .2s; }
  .cap.mo .nav-links a { opacity: 1; transform: none; }
  .cap.mo .nav-links li:nth-child(1) a { transition-delay: .12s, .12s, 0s, 0s; } .cap.mo .nav-links li:nth-child(2) a { transition-delay: .17s, .17s, 0s, 0s; }
  .cap.mo .nav-links li:nth-child(3) a { transition-delay: .22s, .22s, 0s, 0s; } .cap.mo .nav-links li:nth-child(4) a { transition-delay: .27s, .27s, 0s, 0s; }
  .cap.mo .nav-links li:nth-child(5) a { transition-delay: .32s, .32s, 0s, 0s; } .cap.mo .nav-links li:nth-child(6) a { transition-delay: .37s, .37s, 0s, 0s; }
  .cap.mo .nav-links li:nth-child(7) a { transition-delay: .42s, .42s, 0s, 0s; }
  .cap .nav-links a:hover { background: var(--violet-soft); color: var(--violet); transform: none; transition-delay: 0s; }
  .cap .nav-links a.on-page { color: var(--violet); }
  .cap .btn-outline { display: flex; flex: none; align-items: center; height: 44px; padding: 0 20px; border: 0; background: var(--ink); color: #fff; font: 700 15px/1 var(--font, inherit); white-space: nowrap; animation: none !important; }
  .cap .btn-outline:hover { background: var(--violet); }
  .cap .lang-wrap { margin: 0; }
  .cap .lang-btn { height: 44px; border: 0; background: var(--bg); }
  .cap .lang-btn:hover, .cap .lang-wrap.open .lang-btn { background: var(--violet-soft); box-shadow: 0 0 0 3px var(--violet-soft); }
  .cap .lang-wrap.sel .mp-lang-switcher { top: calc(100% + 16px); }

  .sr { display: block; position: relative; flex: none; width: 240px; transition: width .6s var(--ease-out); }
  .sr-box { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px; border-radius: 999px; background: var(--bg); border: 1px solid transparent; cursor: text; overflow: hidden; transition: border-color .2s, box-shadow .2s, background .2s; }
  .sr-box:focus-within { border-color: var(--violet-2); box-shadow: 0 0 0 4px var(--violet-soft); background: var(--surface); }
  .sr-box svg { flex: none; width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2.2; stroke-linecap: round; }
  .sr-box:focus-within svg { stroke: var(--violet); }
  .sr-box input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; outline: 0; font: 500 15px/1 var(--font, inherit); color: var(--ink); transition: opacity .25s; }
  .sr-box input::placeholder { color: var(--muted); opacity: .85; }
  .cap.mo .sr { width: 44px; }
  .cap.mo .sr-box { padding: 0 13px; }
  .cap.mo .sr-box input { opacity: 0; pointer-events: none; }
  .sr-pop { position: absolute; left: 0; top: calc(100% + 18px); z-index: 80; width: 400px; max-width: 92vw; padding: 8px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -22px rgba(27, 20, 70, .4); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: 30px 0; transition: opacity .22s ease, transform .35s var(--ease-out), visibility 0s linear .35s; }
  .sr.open .sr-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .sr-lab { padding: 10px 12px 6px; font: 700 11px/1 var(--font, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .sr-it { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; color: var(--ink); }
  .sr-it.act { background: var(--violet-soft); }
  .sr-ch { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--lav-1); color: var(--violet); font-weight: 700; font-size: 13px; }
  .sr-ch.blog { background: #ffe9de; color: var(--orange); } .sr-ch.pg { background: #dcfce7; color: #16a34a; }
  .sr-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .sr-t { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sr-s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sr-t mark { background: none; color: var(--violet); box-shadow: inset 0 -2px 0 var(--violet-2); }
  .sr-go { margin-left: auto; flex: none; color: var(--violet); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease-out); }
  .sr-it.act .sr-go { opacity: 1; transform: none; }
  .sr-foot { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
  .sr-foot kbd { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); font: 600 11px/1.4 var(--font, inherit); }
  .sr-empty { padding: 22px 12px; text-align: center; color: var(--muted); }
}
@media (min-width: 861px) and (max-width: 1260px) {
  .cap.mo .sr, .cap.mo .sr + .cap-sep { display: none; }
  .cap .nav-links a { padding: 9px 8px; font-size: 14px; }
}
@media (min-width: 861px) and (max-width: 1040px) {
  .cap.mo .btn-outline, .cap.mo .btn-outline ~ .cap-sep { display: none; }
  .cap.mo .lang-wrap + .cap-sep { display: none; }
  .nav { gap: 12px; }
}
.cap-tm { display: none; }
@media (min-width: 861px) {
  .cap-tm { display: block; position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); color: var(--ink); overflow: hidden; transition: background .2s, color .2s; }
}
@media (max-width: 860px) {
  .cap-tm { display: block; position: relative; flex: none; order: 5; margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); overflow: hidden; }
  .nav .lang-wrap { margin-left: 0; order: 6; }
  .cap-tm + .cap-sep { display: none; }
}
.cap-tm:hover { background: var(--violet-soft); color: var(--violet); }
.cap-tm svg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease-out), opacity .3s; }
.cap-tm .moon { transform: translateY(26px) rotate(-60deg); opacity: 0; }
html[data-theme="dark"] .cap-tm .sun { transform: translateY(-26px) rotate(60deg); opacity: 0; }
html[data-theme="dark"] .cap-tm .moon { transform: none; opacity: 1; }

.af-b.src { background: #6d28f5; } .af-b.cb { background: #f26a2e; }
.mdl-s .mdl-b { min-height: 300px; padding: 20px 22px 24px; }
.mdl-s .sr { display: block; position: relative; width: 100%; }
.mdl-s .sr-box { display: flex; align-items: center; gap: 12px; height: 54px; margin: 0; padding: 0 20px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); cursor: text; }
.mdl-s .sr-box:focus-within { border-color: var(--violet-2); box-shadow: 0 0 0 4px var(--violet-soft); }
.mdl-s .sr-box svg { flex: none; width: 20px; height: 20px; stroke: var(--violet); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.mdl-s .sr-box input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; outline: 0; font: 500 17px/1 var(--font, inherit); color: var(--ink); }
.mdl-s .sr-box input::placeholder { color: var(--muted); opacity: .85; }
.mdl-s .sr-pop { position: static; width: auto; max-width: none; margin-top: 14px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
.mdl-s .sr-lab { padding: 10px 12px 6px; font: 700 11px/1 var(--font, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mdl-s .sr-it { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; color: var(--ink); }
.mdl-s .sr-it.act { background: var(--violet-soft); }
.mdl-s .sr-ch { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--lav-1); color: var(--violet); font-weight: 700; font-size: 13px; }
.mdl-s .sr-ch.blog { background: #ffe9de; color: var(--orange); } .mdl-s .sr-ch.pg { background: #dcfce7; color: #16a34a; }
.mdl-s .sr-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mdl-s .sr-t { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-s .sr-s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-s .sr-t mark { background: none; color: var(--violet); box-shadow: inset 0 -2px 0 var(--violet-2); }
.mdl-s .sr-go { margin-left: auto; flex: none; color: var(--violet); font-weight: 700; opacity: 0; }
.mdl-s .sr-it.act .sr-go { opacity: 1; }
.mdl-s .sr-foot { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.mdl-s .sr-foot kbd { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); font: 600 11px/1.4 var(--font, inherit); }
.mdl-s .sr-empty { padding: 22px 12px; text-align: center; color: var(--muted); }
@media (max-width: 860px) { .mdl-s .sr-foot { display: none; } }
.mdl-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mdl-x:focus:not(:focus-visible) { outline: 0; }
.mdl-s .sr-it, .mdl-s .sr-it:hover { text-decoration: none; }

html { overflow-x: clip; overscroll-behavior-x: none; }
body, .frame { overflow-x: clip; max-width: 100%; }
.hb-grid > *, .bento > *, .c-shop > *, .c-rewards > *, .c-tabs > *, .contact-grid > *, .who > *, .aigrid > *, .signsec > *, .astro-stage > *, .pf-grid > *, .pf-vs > *, .post > *, .fp-hero-in > *, .fp-grid3 > *, .fp-steps > *, .fp-list > *, .fp-vs > *, .fp-relgrid > *, .fp-story > *, .fp-stats > * { min-width: 0; }

.ct-hero { padding: clamp(28px, 4vw, 56px) var(--pad) 0; }
.ct-hero-in { max-width: 1280px; margin: 0 auto; }
.ct-hero h1 { font-weight: 400; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.ct-main { padding: clamp(24px, 3.4vw, 48px) var(--pad) clamp(44px, 6vw, 90px); }
.ct-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.ct-info { display: grid; gap: 16px; min-width: 0; }
.ct-box { background: var(--surface); border: 1.5px solid var(--line); border-radius: 28px; padding: 26px 26px 24px; box-shadow: var(--shadow); }
.ct-box h2, .ct-box h3 { margin: 0 0 10px; font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.ct-box p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.ct-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ct-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.ct-list li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 4px; background: var(--violet); margin-top: 8px; }
.ct-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: ct; }
.ct-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; counter-increment: ct; }
.ct-steps li::before { content: counter(ct); grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 600; }
.ct-steps b { font-weight: 600; font-size: 17px; }
.ct-steps span { color: var(--muted); font-size: 16px; line-height: 1.5; }
.ct-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ct-form { position: sticky; top: 100px; min-width: 0; }
.ct-form-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 32px; padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow-lg); }
.ct-form-card h2 { margin: 0 0 6px; font-weight: 400; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; }
.ct-form-card > p { color: var(--muted); margin: 0 0 22px; font-size: 17px; }
@media (max-width: 860px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } .ct-form { position: static; } .ct-box { padding: 22px 20px; } }

.oz-hero { padding: clamp(28px, 4vw, 56px) var(--pad) clamp(20px, 3vw, 40px); position: relative; overflow: hidden; background: radial-gradient(60vw 40vw at 90% -10%, var(--violet-soft), transparent 60%), var(--bg); }
.oz-hero-in { max-width: 1280px; margin: 0 auto; }
.oz-hero h1 { font-weight: 400; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.035em; margin: 0; max-width: 18ch; text-wrap: balance; }
.oz-jump { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.oz-jump a { display: inline-flex; padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-weight: 600; font-size: 15px; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.oz-jump a:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
.oz-list { padding: clamp(24px, 4vw, 60px) var(--pad) clamp(44px, 6vw, 90px); }
.oz-wrap { max-width: 1280px; margin: 0 auto; display: grid; gap: clamp(44px, 6vw, 84px); }
.oz-grp { scroll-margin-top: 110px; min-width: 0; }
.oz-gh { display: flex; gap: 20px; align-items: flex-start; margin-bottom: clamp(20px, 2.6vw, 32px); }
.oz-gn { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 18px; }
.oz-gh h2 { margin: 0 0 8px; font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.oz-gh p { margin: 0; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 62ch; }
.oz-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.oz-cards.oz-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oz-cards.oz-one { grid-template-columns: minmax(0, 1fr); }
.oz-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1.5px solid var(--line); border-radius: 28px; padding: 26px 26px 22px; box-shadow: var(--shadow); transition: transform .35s var(--ease-spring), border-color .3s; }
.oz-card:hover { transform: translateY(-4px); border-color: var(--violet-2); }
.oz-card .fp-ic { margin-bottom: 16px; }
.oz-card h3 { margin: 0 0 8px; font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.oz-card p { margin: 0 0 16px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.oz-more { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 16px; color: var(--violet); }
.oz-more span { transition: transform .3s var(--ease-spring); }
.oz-card:hover .oz-more span { transform: translateX(6px); }
@media (max-width: 1000px) { .oz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .oz-cards, .oz-cards.oz-two { grid-template-columns: minmax(0, 1fr); }
  .oz-gh { gap: 14px; } .oz-gn { width: 44px; height: 44px; border-radius: 14px; font-size: 16px; }
  .oz-card { padding: 22px 20px 20px; border-radius: 24px; }
}

.logo .signature.in .sg-text { animation: sgwrite var(--wd, 2.8s) cubic-bezier(.5, .1, .3, 1) forwards; }

.mdl[open] { animation: mdlin 1.15s cubic-bezier(.4, 0, .2, 1) both; }
.mdl[open]::backdrop { animation: mdlbd 1.1s ease-in-out both; }
.mdl[open] .mdl-h { animation: mdlh 1s cubic-bezier(.4, 0, .2, 1) .3s both; }
.mdl[open] .mdl-b { animation: mdlh 1s cubic-bezier(.4, 0, .2, 1) .5s both; }
@keyframes mdlin { from { opacity: 0; transform: translateY(44px) scale(.93); } to { opacity: 1; transform: none; } }
@keyframes mdlbd { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(4px); } }
@keyframes mdlh { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mdl[open], .mdl[open]::backdrop, .mdl[open] .mdl-h, .mdl[open] .mdl-b { animation-duration: .01s; animation-delay: 0s; } }

.fps .fps-in { display: block; }
.fps-track { display: grid; touch-action: pan-y; }
.fps-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(34px); transition: opacity .45s ease, transform .5s ease, visibility 0s linear .5s; }
.fps-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .9s ease .4s, transform 1s cubic-bezier(.2, .8, .2, 1) .4s, visibility 0s; }
.fps .fp-copy h1, .fps-h { font-weight: 400; font-size: clamp(36px, 4.8vw, 66px); line-height: 1.03; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.fps .fp-card { animation: none; }
.fps-slide.is-on .fp-card { animation: fpin .8s cubic-bezier(.2, 1.2, .4, 1) both, fpfloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * .12s + .3s), calc(var(--i) * .7s + 1.3s); }
.fps-slide.is-on .bm-detail, .fps-slide.is-on .bm-tl { animation: fpin .9s cubic-bezier(.2, 1.1, .4, 1) .25s both; }
.fps-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(18px, 2.6vw, 34px); }
.fps-prev, .fps-next { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.fps-prev:hover, .fps-next:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
.fps-prev svg, .fps-next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fps-dots { display: flex; gap: 8px; align-items: center; }
.fps-dots button { width: 10px; height: 10px; border-radius: 99px; border: 0; background: var(--line); padding: 0; cursor: pointer; transition: width .45s var(--ease-spring), background .3s; }
.fps-dots button.on { width: 34px; background: var(--violet); }

.bm-detail { position: relative; z-index: 1; background: var(--surface); border: 1.5px solid var(--line); border-radius: 28px; padding: 22px; box-shadow: var(--shadow-lg); display: grid; gap: 18px; }
.bm-dh { display: flex; align-items: center; gap: 14px; }
.bm-dh b { display: block; font-weight: 600; font-size: 19px; } .bm-dh small { color: var(--muted); font-size: 15px; }
.bm-tag { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--violet-soft); color: var(--violet); white-space: nowrap; }
.bm-dl { margin: 0; display: grid; gap: 10px; }
.bm-dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 16px; }
.bm-dl dt { color: var(--muted); } .bm-dl dd { margin: 0; }
.bm-act, .fpd-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.bm-b { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 99px; border: 1.5px solid var(--line); font-weight: 600; font-size: 15px; background: var(--bg); color: var(--ink); }
.bm-ok { background: var(--violet); border-color: var(--violet); color: #fff; }
.bm-tl { list-style: none; margin: 0; padding: 20px; position: relative; z-index: 1; display: grid; gap: 14px; width: 100%; background: var(--surface); border: 1.5px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); }
.bm-tl li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.bm-tl time { font-weight: 700; font-size: 15px; background: var(--violet-soft); color: var(--violet); border-radius: 99px; padding: 6px 0; text-align: center; font-variant-numeric: tabular-nums; }
.bm-tl b { display: block; font-weight: 600; } .bm-tl small { color: var(--muted); font-size: 14px; }
.bm-st { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.bm-done { background: #e2f7ea; color: #17803f; }

.fpd { display: grid; gap: clamp(36px, 5vw, 72px); }
.fpd > * { max-width: 1280px; margin-left: auto; margin-right: auto; width: 100%; }
.fpd .fp-h2 { margin-bottom: 0; }
.fpd-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.fpd-rev .fpd-tx { order: 2; }
.fpd-n { width: 44px; height: 44px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 600; margin-bottom: 16px; }
.fpd-tx h3 { margin: 0 0 12px; font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.fpd-tx p { margin: 0; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; max-width: 56ch; }
.fpd-vs { min-width: 0; border-radius: 32px; padding: clamp(20px, 3vw, 40px); display: grid; place-items: center; min-height: 260px; background: radial-gradient(50% 60% at 80% 0, var(--violet-soft), transparent 70%), var(--bg); }
.fpd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fpd-chips span { position: relative; padding: 10px 18px 10px 34px; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--line); font-weight: 600; font-size: 16px; }
.fpd-chips span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--c); }
.fpd-list { width: 100%; display: grid; gap: 10px; }
.fpd-list > div { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.fpd-list i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.fpd-list b { font-weight: 600; } .fpd-list em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 14px; }
.fpd-acts { justify-content: center; }
@media (max-width: 860px) {
  .fps-slide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fpd-row { grid-template-columns: minmax(0, 1fr); } .fpd-rev .fpd-tx { order: 0; }
  .bm-dl > div { grid-template-columns: 82px minmax(0, 1fr); }
  .bm-tl li { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fps-slide { transition-duration: .01s; } }

.wt-hero .fp-hero-in { align-items: center; }
.wt-shots { position: relative; aspect-ratio: 1.25; min-width: 0; }
.wt-shot { position: absolute; width: 72%; height: auto; border-radius: 18px; box-shadow: var(--shadow-lg); border: 1.5px solid var(--line); background: var(--surface); }
.wt-shot.s1 { left: 0; top: 6%; z-index: 2; }
.wt-shot.s2 { right: 0; top: 0; z-index: 1; transform: rotate(3deg); }
.wt-shot.s3 { left: 14%; bottom: 0; z-index: 3; transform: rotate(-2deg); }
.wt-meta { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.wt-toc { max-width: 1280px; margin: clamp(22px, 3vw, 40px) auto 0; }
.wt-sec { padding: clamp(40px, 5.5vw, 84px) var(--pad); }
.wt-alt { background: var(--bg); }
.wt-in { max-width: 1280px; margin: 0 auto; display: grid; gap: clamp(20px, 2.6vw, 32px); }
.wt-h2 { font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; margin: 0; text-wrap: balance; scroll-margin-top: 100px; }
.wt-h3 { font-weight: 600; font-size: 22px; margin: 0 0 10px; }
.wt-prose { max-width: 72ch; min-width: 0; }
.wt-prose p { margin: 0 0 16px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.7; color: var(--muted); }
.wt-prose a, .wt-links a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wt-links { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.wt-gap { margin-top: 8px; }
.wt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: wt; }
.wt-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 24px; padding: 20px 24px; counter-increment: wt; }
.wt-steps li::before { content: counter(wt); grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 600; }
.wt-steps b { font-weight: 600; font-size: 20px; }
.wt-steps span { color: var(--muted); font-size: 17px; line-height: 1.55; }
.wt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wt-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wt-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.wt-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.wt-card h3 { margin: 16px 20px 6px; font-weight: 600; font-size: 20px; }
.wt-card p { margin: 0 20px 20px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.wt-act { display: flex; flex-wrap: wrap; gap: 12px; }
.wt-body .oz-cards { min-width: 0; }
@media (max-width: 1000px) { .wt-cards, .wt-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .wt-cards, .wt-themes { grid-template-columns: minmax(0, 1fr); }
  .wt-shots { aspect-ratio: 1.1; }
  .wt-steps li { padding: 18px 16px; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .wt-steps li::before { width: 40px; height: 40px; }
}
.wt-hero .fp-copy h1 { font-size: clamp(34px, 4.4vw, 62px); }

.hero .ink .w { transition: opacity .45s ease calc(var(--d, 0s) + var(--wi) * 7ms); }

.fpd-tx p + p { margin-top: 12px; }
.fpd-tx a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fpd-shots { width: 100%; }
.fpd-shots.n1 { aspect-ratio: 1.6; } .fpd-shots.n2 { aspect-ratio: 1.45; }
.fpd-shots.n2 .wt-shot { width: 66%; } .fpd-shots.n1 .wt-shot { width: 80%; }
.fpd-vs .bm-detail, .fpd-vs .bm-tl { width: 100%; }
.fps-slide .wt-shots { width: 100%; }
@media (max-width: 860px) { .fpd-shots, .fpd-shots.n1, .fpd-shots.n2 { aspect-ratio: 1.3; } }

.pf-links { text-align: center; margin: 22px 0 0; color: #cbc5ee; font-size: 16px; }
.pf-links a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mod-more { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--violet); }
.more-line { text-align: center; margin: 18px 0 0; }

/* dl: dile gore uzun etiketler */
.bm-dl > div { grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); }
.bm-dl dt { overflow-wrap: anywhere; hyphens: auto; }

html[data-theme="dark"] {
  color-scheme: dark;
  --frame: #1c1240; --ink: #f1eeff; --ink-2: #cfc9ee; --muted: #b0abd0; --muted-accent: #8a85ad;
  --bg: #0f0b24; --surface: #181235; --line: #2b2457;
  --violet: #8b5cf6; --violet-2: #a78bfa; --violet-soft: #2b2063; --lav-1: #231a52; --lav-2: #5b3fc0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .5);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .dark-box { --ink: #1b1446; --ink-2: #4b4672; --muted: #57536f; --muted-accent: #a09cba; --bg: #f6f6fa; --surface: #ffffff; --line: #ebeaf2; --violet: #6d28f5; --violet-2: #8b5cf6; --violet-soft: #ede6ff; --lav-1: #efe9ff; --lav-2: #b9a2f7; --shadow: 0 1px 2px rgba(27, 20, 70, .04), 0 12px 32px -12px rgba(27, 20, 70, .12); --shadow-lg: 0 30px 60px -20px rgba(27, 20, 70, .25); }
html[data-theme="dark"] .cap .btn-outline { background: var(--violet); color: #fff; }
html[data-theme="dark"] .cap .btn-outline:hover { background: var(--violet-2); }
html[data-theme="dark"] .sr-ch.blog { background: #3b2415; }
html[data-theme="dark"] .sr-ch.pg { background: #12301f; color: #4ade80; }
html[data-theme="dark"] body, html[data-theme="dark"] .frame { background: var(--surface); }
html[data-theme="dark"] .sg-text { background: linear-gradient(105deg, #a78bfa 0 40%, #ffffff 50%, #a78bfa 60% 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .burger span { background: var(--ink); }
html[data-theme="dark"] #pre { background: var(--bg); }
html[data-theme="dark"] svg [fill="#1b1446"] { fill: var(--ink); }
html[data-theme="dark"] svg [stroke="#1b1446"] { stroke: var(--ink); }
html[data-theme="dark"] svg [fill="#f3f2f8"], html[data-theme="dark"] svg [fill="#ebeaf2"] { fill: #241c4d; }
html[data-theme="dark"] svg [fill="#dcdbe8"] { fill: #352d6b; }
html[data-theme="dark"] .nav-links a:hover { background: var(--violet); }
html[data-theme="dark"] .burger span { background: var(--violet); }
html[data-theme="dark"] .rings { stroke: var(--line); }
html[data-theme="dark"] .phone { box-shadow: var(--shadow-lg), inset 0 0 0 2px #000; }
html[data-theme="dark"] .screen { background: var(--surface); }
html[data-theme="dark"] .coin { background: #241c4d; }
html[data-theme="dark"] .a1 { background: var(--violet-soft); }
html[data-theme="dark"] .a2 { background: #3b2415; }
html[data-theme="dark"] .a3 { background: #241c4d; }
html[data-theme="dark"] .a4 { background: #4a2433; }
html[data-theme="dark"] .store { background: var(--violet); }
html[data-theme="dark"] .otp-digits i { background: var(--surface); }
html[data-theme="dark"] .sneaker { background: var(--surface); }
html[data-theme="dark"] .reward-card { background: var(--surface); }
html[data-theme="dark"] .bars em { background: rgba(24, 18, 53, .7); }
html[data-theme="dark"] .orders-card { background: var(--surface); }
html[data-theme="dark"] .orders-pill { background: var(--surface); }
html[data-theme="dark"] .orders-pill > span { background: #241c4d; }
html[data-theme="dark"] .brand-tile .b { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .panel:nth-child(2) { background: #3d2c8a; }
html[data-theme="dark"] .dash-card { background: var(--surface); }
html[data-theme="dark"] .arr { background: var(--surface); }
html[data-theme="dark"] .arr:hover { background: var(--violet); }
html[data-theme="dark"] .t-card { background: var(--surface); }
html[data-theme="dark"] .t-q { color: var(--ink); }
html[data-theme="dark"] .t-prog i { background: var(--violet); }
html[data-theme="dark"] .socials a { background: var(--surface); }
html[data-theme="dark"] .download { background: var(--surface); }
html[data-theme="dark"] .dl-btns svg { background: var(--violet); }
@media (max-width: 860px) {
html[data-theme="dark"] .nav.open .nav-links { background: var(--surface); }
}
html[data-theme="dark"] .track-map { background: radial-gradient(circle at 20% 30%, var(--violet-soft) 0 18%, transparent 19%),
    radial-gradient(circle at 75% 70%, #12301f 0 22%, transparent 23%),
    repeating-linear-gradient(0deg, #241c4d 0 14px, #2b2457 14px 15px); }
html[data-theme="dark"] .rw-big .bar-line { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .rw-big .bar-line i { background: var(--surface); }
html[data-theme="dark"] .hc-bar i { background: var(--violet); }
html[data-theme="dark"] .hc-btn:hover { background: var(--violet); }
html[data-theme="dark"] .hc-next { background: var(--violet); }
html[data-theme="dark"] .store:hover { background: var(--violet); }
html[data-theme="dark"] .waves span { border: 1.5px solid var(--line); }
html[data-theme="dark"] .site-prev { background: #241c4d; }
html[data-theme="dark"] .site-prev b { background: linear-gradient(135deg, var(--violet-soft), #3d2c8a); }
html[data-theme="dark"] .site-prev u { background: #352d6b; }
html[data-theme="dark"] .slots .s1 { background: #12301f; color: #4ade80; }
html[data-theme="dark"] .slots .s2 { background: var(--violet-soft); }
html[data-theme="dark"] .slots .s3 { background: #3b2415; color: #fb923c; }
html[data-theme="dark"] .faq details[open] { background: var(--surface); }
html[data-theme="dark"] .sign-mini { background: var(--surface); }
html[data-theme="dark"] .counter { background: var(--surface); }
html[data-theme="dark"] .ch { background: var(--surface); }
html[data-theme="dark"] .dark-box .store, html[data-theme="dark"] .dark-box .store:hover { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .who { background: #1b2650; }
html[data-theme="dark"] .ws-more { background: var(--violet); }
html[data-theme="dark"] .rk { background: var(--surface); }
html[data-theme="dark"] .rk.you em { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .sg-pen { background: var(--surface); }
html[data-theme="dark"] .site-card { background: var(--surface); }
html[data-theme="dark"] .sc-bar i { background: #2f2860; }
html[data-theme="dark"] .sc-hero { background: linear-gradient(135deg, var(--violet-soft), #3d2c8a); }
html[data-theme="dark"] .sc-ln { background: #2b2457; }
html[data-theme="dark"] .sc-foot { background: var(--bg); }
html[data-theme="dark"] #pre { background: var(--surface); }
html[data-theme="dark"] .pre-bar { background: #2b2457; }
html[data-theme="dark"] .hclock b { background: var(--violet); }
html[data-theme="dark"] .ai-card .ico { background: var(--surface); }
html[data-theme="dark"] .astro-bub { background: var(--surface); }
html[data-theme="dark"] .faq details.is-open { background: var(--surface); }
html[data-theme="dark"] .faq summary::after { background: var(--tint, var(--violet-soft)); }
html[data-theme="dark"] .af-btn { background: var(--surface); }
html[data-theme="dark"] .af-b .lb { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .af-toast { background: var(--violet); }
html[data-theme="dark"] .pf-tab.on .n { background: var(--surface); }
html[data-theme="dark"] .pf-frame { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .pf-bar { background: #241c4d; color: var(--muted); }
html[data-theme="dark"] .pf-bar i { background: #3a3270; }
html[data-theme="dark"] .pf-bar span { background: var(--surface); }
html[data-theme="dark"] .pf-body { background: var(--bg); }
html[data-theme="dark"] .m1 aside { background: var(--surface); border-right: 1px solid var(--line); }
html[data-theme="dark"] .m1 aside u { background: #2b2457; }
html[data-theme="dark"] .m1 li { background: var(--surface); }
html[data-theme="dark"] .m1 li small { color: var(--muted); }
html[data-theme="dark"] .m1 .detail { background: var(--surface); }
html[data-theme="dark"] .m1 .ln1 { background: #2b2457; }
html[data-theme="dark"] .m2 .sb { background: var(--surface); box-shadow: 0 0 0 1px #2b2457; }
html[data-theme="dark"] .m2 li { background: var(--surface); }
html[data-theme="dark"] .m2 small { color: var(--muted); }
html[data-theme="dark"] .m2 mark { background: #241c4d; color: var(--ink); }
html[data-theme="dark"] .m3 .site { background: var(--surface); box-shadow: 0 0 0 1px #2b2457; }
html[data-theme="dark"] .m3 .nv u { background: #2b2457; }
html[data-theme="dark"] .m3 p { background: #2b2457; }
html[data-theme="dark"] .m3 .i1 { background: linear-gradient(135deg, var(--violet-soft), #3d2c8a); }
html[data-theme="dark"] .m3 .i2 { background: linear-gradient(135deg, #241c4d, #f26a2e); }
html[data-theme="dark"] .m3 .add { background: var(--violet); }
html[data-theme="dark"] .m4 .sc { background: var(--surface); }
html[data-theme="dark"] .m4 .sc small { color: var(--muted); }
html[data-theme="dark"] .m4 .tag { color: var(--muted); }
html[data-theme="dark"] .m5 aside { background: var(--surface); border-right: 1px solid var(--line); }
html[data-theme="dark"] .m5 .pc { background: var(--violet-soft); }
html[data-theme="dark"] .m5 .fd { background: var(--surface); color: var(--muted); box-shadow: 0 0 0 1px #2b2457; }
html[data-theme="dark"] .post { background: linear-gradient(135deg, var(--lav-1) 0%, #1b2650 100%); }
html[data-theme="dark"] .ps-card { background: var(--surface); }
html[data-theme="dark"] .ps-fmt { background: var(--tint, var(--violet-soft)); }
html[data-theme="dark"] .ps-prog { background: #2b2457; }
html[data-theme="dark"] .ps-canvas { background: var(--bg); }
html[data-theme="dark"] .pc-art { background: var(--violet); }
html[data-theme="dark"] .pc-play { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .ps-chips span { background: var(--violet-soft); }
html[data-theme="dark"] .ps-edit { box-shadow: inset 0 0 0 1.5px #2b2457; }
html[data-theme="dark"] .ps-done .dn { background: var(--violet); }
html[data-theme="dark"] .cmp { background: var(--surface); }
html[data-theme="dark"] .bf { background: #241c4d; }
html[data-theme="dark"] .bf i { background: #3a3270; }
html[data-theme="dark"] .bf span { background: var(--surface); }
html[data-theme="dark"] .o-img { color: var(--ink); }
html[data-theme="dark"] .tc { background: var(--surface); }
html[data-theme="dark"] .tb { background: #241c4d; }
html[data-theme="dark"] .tb i { background: #3a3270; }
html[data-theme="dark"] .demo-form .mpf-btn, html[data-theme="dark"] .demo-form button[type=submit] { background: var(--violet); }
html[data-theme="dark"] .blogwrap .blk-all a { background: var(--violet); }
@media (max-width: 900px) {
html[data-theme="dark"] .pf-pv, html[data-theme="dark"] .pf-nx { background: var(--surface); }
}
html[data-theme="dark"] .mdl { background: var(--surface); }
html[data-theme="dark"] .phone.mac .screen { background: var(--surface); }
html[data-theme="dark"] .phone.mac .screen::before { background: linear-gradient(180deg, var(--surface), #2b2457); }
html[data-theme="dark"] .dk .d-cd { background: linear-gradient(var(--surface),var(--surface)); }
html[data-theme="dark"] .dk .d-wb span { background: var(--surface); }
html[data-theme="dark"] .dk .d-inp { background: var(--surface); }
html[data-theme="dark"] .dk .d-tt s { background-color: var(--surface); }
html[data-theme="dark"] .dk .d-pgp { background: linear-gradient(135deg,#a78bfa,#6d28f5) top/100% 38% no-repeat,linear-gradient(#241c4d,#241c4d) 12% 54%/76% 7% no-repeat,linear-gradient(#241c4d,#241c4d) 12% 68%/54% 7% no-repeat,linear-gradient(#6d28f5,#6d28f5) 12% 86%/36% 9% no-repeat; }
html[data-theme="dark"] .dk .d-igp { background: linear-gradient(135deg,#f9a8d4,#fb923c) top/100% 66% no-repeat,linear-gradient(#241c4d,#241c4d) 12% 78%/70% 6% no-repeat,linear-gradient(#241c4d,#241c4d) 12% 90%/44% 6% no-repeat; }
html[data-theme="dark"] .dk .d-prp { background: linear-gradient(135deg,#241c4d,#f59e0b) top/100% 58% no-repeat,linear-gradient(#241c4d,#241c4d) 12% 70%/60% 6% no-repeat,linear-gradient(#16a34a,#16a34a) 12% 86%/38% 9% no-repeat; }
html[data-theme="dark"] .dk .d-res b { background: var(--surface); }
html[data-theme="dark"] .dk .d-url div { background: var(--surface); }
html[data-theme="dark"] .dk .d-pb { background: #241c4d; }
html[data-theme="dark"] .dk .d-nr { background: var(--surface); }
html[data-theme="dark"] .dk .d-nr em { background: var(--surface); }
html[data-theme="dark"] .dk .d-tm { background: var(--surface); }
html[data-theme="dark"] .dk .d-tm i { background: var(--surface); }
html[data-theme="dark"] .dk .d-tm u { background: #241c4d; }
html[data-theme="dark"] .dk .d-pc { background: var(--surface); }
html[data-theme="dark"] .dk .d-tabs span { background: var(--surface); }
html[data-theme="dark"] .dk .d-dts s { background: var(--surface); }
html[data-theme="dark"] .dk .d-dslot s { background: var(--surface); }
html[data-theme="dark"] .dk .d-dslot s.on { background: var(--surface); }
html[data-theme="dark"] .dk .d-ch { background: var(--surface); }
html[data-theme="dark"] .hero.dark .hc-bar i { background: var(--surface); }
html[data-theme="dark"] .t-dark .store { background: var(--surface); }
html[data-theme="dark"] .t-dark .store:hover { color: var(--ink); }
html[data-theme="dark"] .vz .v-base { background: linear-gradient(#241c4d,#a9a8b4); }
html[data-theme="dark"] .v-neon .v-moon { background: radial-gradient(circle at 35% 35%,var(--surface),#d4d4f0 60%,#8888b8); }
html[data-theme="dark"] .sx-bento { background: radial-gradient(50vw 40vw at 90% 0, #c7d9ff, transparent 60%), var(--surface); }
html[data-theme="dark"] .v-bento .vk-a { background: var(--surface); }
html[data-theme="dark"] .v-bento .vk-b { background: #241c4d; }
html[data-theme="dark"] .v-bento .vk-c { background: #241c4d; }
html[data-theme="dark"] .v-bento .vk-e { background: #241c4d; }
html[data-theme="dark"] .v-bento .v-mb { background: var(--surface); }
html[data-theme="dark"] .v-bento .v-mb::before { background: #241c4d; }
html[data-theme="dark"] .v-forest .v-scr { background: var(--surface); }
html[data-theme="dark"] .v-forest .vk-im.vk-y { background: linear-gradient(160deg,#f2b84b,#241c4d); }
html[data-theme="dark"] .v-forest .v-chip { background: var(--surface); }
html[data-theme="dark"] .sx-notif { background: linear-gradient(150deg, #241c4d, #ffb9a8); }
html[data-theme="dark"] .v-notif .v-nt { background: var(--surface); }
html[data-theme="dark"] .v-ai .v-pr { background: var(--surface); }
html[data-theme="dark"] .v-ai .v-pg { background: var(--surface); }
html[data-theme="dark"] .v-skyl .vk-s5::after { background-image: radial-gradient(var(--surface) 1px,transparent 1.5px), radial-gradient(#fff9 1px,transparent 1.5px); }
html[data-theme="dark"] .v-day .v-sun { background: radial-gradient(circle at 35% 35%,var(--surface),#fde047 60%,#f59e0b); }
html[data-theme="dark"] .v-day .v-sun.vk-set { background: radial-gradient(circle at 35% 35%,#241c4d,#fb923c 60%,#e11d48); }
html[data-theme="dark"] .v-day .v-sun.vk-moon { background: radial-gradient(circle at 35% 35%,var(--surface),#241c4d 60%,#9ca3af); }
html[data-theme="dark"] .v-day .v-dy s.on { background: var(--surface); }
html[data-theme="dark"] .v-day .v-ev time { background: var(--surface); }
html[data-theme="dark"] .sx-scatter { background: radial-gradient(50vw 40vw at 15% 0, #ffffffaa, transparent 60%), var(--surface); }
html[data-theme="dark"] .sx-cal { background: radial-gradient(40vw 40vw at 90% -10%, #fff8, transparent 60%), linear-gradient(135deg, #241c4d, #ff9a8b 55%, #ff6f91); }
html[data-theme="dark"] .v-calw .v-scr { background: var(--surface); }
html[data-theme="dark"] .v-calw .v-cal span { background: var(--surface); }
html[data-theme="dark"] .v-calw .v-chip { background: var(--surface); }
html[data-theme="dark"] .hero.hold .hc-pp { background: var(--violet); }
html[data-theme="dark"] .sx-forest { background: radial-gradient(45vw 35vw at 92% 0, #ffffffcc, transparent 60%), radial-gradient(40vw 30vw at 5% 100%, #5ed3b455, transparent 60%), linear-gradient(160deg, var(--surface), #b4ead7); }
html[data-theme="dark"] .v-forest .v-scr { background: var(--surface); }
html[data-theme="dark"] .v-forest .vk-im.vk-y { background: linear-gradient(160deg, #38bdf8, #241c4d); }
html[data-theme="dark"] .v-forest .v-chip { background: var(--surface); }
html[data-theme="dark"] .fp-hero { background: radial-gradient(60vw 40vw at 90% -10%, var(--violet-soft), transparent 60%), var(--bg); }
html[data-theme="dark"] .fp-ghost:hover { background: var(--violet); }
html[data-theme="dark"] .fp-card { background: var(--surface); }
html[data-theme="dark"] .fp-alt { background: var(--surface); }
html[data-theme="dark"] .fp-why { background: var(--surface); }
html[data-theme="dark"] .fp-rel { background: var(--surface); }
html[data-theme="dark"] .fp-cta-in .store { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .fp-uc { background: var(--surface); }
html[data-theme="dark"] .fp-marq { background: var(--violet); }
html[data-theme="dark"] .fp-fchip { background: var(--surface); }
html[data-theme="dark"] .fp-uc { background: var(--surface); }
html[data-theme="dark"] .hb-frame { background: linear-gradient(180deg, var(--surface), var(--surface)); }
html[data-theme="dark"] .hb-card { background: var(--surface); }
html[data-theme="dark"] .hb-vis { background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
html[data-theme="dark"] .hb-prompt { background: var(--surface); }
html[data-theme="dark"] .hb-tags b { background: var(--surface); }
html[data-theme="dark"] .hb-url span { background: var(--surface); }
html[data-theme="dark"] .hb-prog { background: var(--surface); }
html[data-theme="dark"] .hb-photo span { background: var(--surface); }
html[data-theme="dark"] .hb-tabs b { background: var(--surface); }
html[data-theme="dark"] .hb-cal s { background: var(--surface); }
html[data-theme="dark"] .hb-slots i { background: var(--surface); }
html[data-theme="dark"] .hb-slots i.on { background: var(--surface); }
html[data-theme="dark"] .hb-day li { background: var(--surface); }
@media (min-width: 861px) {
html[data-theme="dark"] .cap .btn-outline { background: var(--violet); }
html[data-theme="dark"] .sr-ch.blog { background: var(--surface); }
html[data-theme="dark"] .sr-ch.pg { background: var(--surface); }
}
html[data-theme="dark"] .af-btn { background: transparent; box-shadow: none; }
html[data-theme="dark"] .mdl { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 40px 90px -20px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .mdl-b { background: var(--surface); }
html[data-theme="dark"] .mpf-input, html[data-theme="dark"] .mpf-sel-btn, html[data-theme="dark"] textarea.mpf-input { background: #120d2c; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .mpf-input::placeholder { color: var(--muted-accent); }
html[data-theme="dark"] .mpf-sel-val { color: var(--ink); }
html[data-theme="dark"] .mpf-sel-list { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .mpf-sel-list * { color: var(--ink); }
html[data-theme="dark"] .mpf-status, html[data-theme="dark"] .mpf-success { background: #12301f; color: #4ade80; border-color: #1f5a38; }
html[data-theme="dark"] .mpf-recaptcha { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] .mpf-label, html[data-theme="dark"] .mpf-choice { color: var(--ink); }
html[data-theme="dark"] .mpf-actions, html[data-theme="dark"] .mpf-foot, html[data-theme="dark"] .mpf-nav { border-color: var(--line); }
html[data-theme="dark"] .mpf-btn, html[data-theme="dark"] .mpf button[type=submit] { background: var(--violet); color: #fff; }
html[data-theme="dark"] .hero .phone.mac .screen, html[data-theme="dark"] .vz .v-scr { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .hero .phone.mac .screen *:not(.dot):not(svg):not(path) { border-color: var(--line); }
html[data-theme="dark"] .sx-bento { background: radial-gradient(50vw 40vw at 90% 0, #2a3270, transparent 60%), #0e1230; }
html[data-theme="dark"] .v-bento .vk-a { background: #1c2152; color: #e8ecff; }
html[data-theme="dark"] .v-bento .v-mb { background: #262c63; }
html[data-theme="dark"] .v-bento .v-mb::before { background: #323a7a; }
html[data-theme="dark"] .v-bento .v-cd s { background: #ffffff22; }
html[data-theme="dark"] .sx-forest { background: radial-gradient(45vw 35vw at 92% 0, #12a37f33, transparent 60%), radial-gradient(40vw 30vw at 5% 100%, #0b8f6c44, transparent 60%), linear-gradient(160deg, #0b2a26, #0a1f24); }
html[data-theme="dark"] .sx-forest .hero-title, html[data-theme="dark"] .sx-forest .sl-t { color: #d9fff3; }
html[data-theme="dark"] .sx-forest .hero-right p { color: #a8e6d6; }
html[data-theme="dark"] .sx-forest .store { background: #0b8f6c; color: #fff; }
html[data-theme="dark"] .v-forest .v-scr { background: #102f2a; color: #d9fff3; }
html[data-theme="dark"] .v-forest .v-chip { background: #123a34; color: #d9fff3; }
html[data-theme="dark"] .v-forest .v-art i { background: #ffffff22; }
html[data-theme="dark"] .v-forest .v-ring circle { stroke: #ffffff22; }
html[data-theme="dark"] .sx-notif { background: linear-gradient(150deg, #3a1420, #230e24); }
html[data-theme="dark"] .sx-notif .hero-title, html[data-theme="dark"] .sx-notif .sl-t { color: #ffe3d8; }
html[data-theme="dark"] .sx-notif .hero-right p { color: #f0b8ae; }
html[data-theme="dark"] .v-notif .v-nt { background: #2b1a38; color: #fff; box-shadow: 0 2cqw 3.4cqw -1.2cqw rgba(0, 0, 0, .6); }
html[data-theme="dark"] .sx-scatter { background: radial-gradient(50vw 40vw at 15% 0, #3b2a8a88, transparent 60%), #130e33; }
html[data-theme="dark"] .v-scatter .v-rg { border-color: #4b3aa0; }
html[data-theme="dark"] .v-scatter .v-ln line { stroke: #7c5ee0; }
html[data-theme="dark"] .hero .hc-btn:not(.hc-next), html[data-theme="dark"] .hero .hc-pp { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .v-bento .vk-b { background: #3d3210; color: #fde68a; }
html[data-theme="dark"] .v-bento .vk-c { background: #10351f; color: #bbf7d0; }
html[data-theme="dark"] .v-bento .vk-e { background: #3d1530; color: #fbcfe8; }
html[data-theme="dark"] .v-bento .vk-f { background: #1a2a5c; color: #cfe0ff; }
html[data-theme="dark"] .t-dark .store { background: #fff; color: #17142e; }
html[data-theme="dark"] .t-dark .store:hover { background: var(--sxa); color: #111; }
html[data-theme="dark"] .v-ai .v-pr { background: #261a63; color: #fff; }
html[data-theme="dark"] .v-ai .v-pg { background: #261a63; color: #fff; }
html[data-theme="dark"] .v-ai .v-pg s { background: #ffffff33; }
html[data-theme="dark"] .v-ai .v-pg .vk-b { background: #fff; }
html[data-theme="dark"] .v-day .v-ev time { background: #fff; color: #1e1b4b; }