:root {
  --bg0: #070613;
  --bg1: #0b0a1d;
  --text: rgba(255, 255, 255, .92);
  --muted: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .10);
  --glass: rgba(255, 255, 255, .06);
  --shadow: 0 18px 70px rgba(0, 0, 0, .58);
  --shadow2: 0 14px 44px rgba(0, 0, 0, .40);
  --radius: 22px;
  --max: 1200px;
  --goldA: #FFE2A8;
  --goldB: #F3C85E;
  --goldC: #D79A1E;
  --goldInk: #231500;
  --tg: #2AABEE;
  --pad: 22px;
  --muted: rgba(255, 255, 255, .70);
  --shadow: 0 18px 60px rgba(0, 0, 0, .55);
  --shadow2: 0 10px 40px rgba(0, 0, 0, .40);
  --radiusCard: 22px;
  --gold: #ffcf6a;
  --wrap: 1200px;
  --stroke: rgba(255,255,255,.14);
  --glassA: rgba(255,255,255,.10);
  --glassB: rgba(255,255,255,.05);
  --r: 22px;
  --loadDur: 3.393s;
  --bg1: rgba(255, 120, 80, .10);
  --bg2: rgba(120, 180, 255, .10);
  --bg3: rgba(255, 110, 200, .08);
  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.06);
  --br: rgba(255,255,255,.14);
  --br2: rgba(255,255,255,.10);
  --txt: rgba(255,255,255,.92);
  --dim: rgba(255,255,255,.70);
  --dim2: rgba(255,255,255,.55);
  --shadow: 0 18px 55px rgba(0,0,0,.40);
  --shadow2: 0 12px 28px rgba(0,0,0,.28);
  --r: 22px;
  --r2: 16px;
  --gold: rgba(255,210,120,.98);
  --gold2: rgba(255,160,70,.94);
  --danger1: rgba(255,77,77,.95);
  --warn1: rgba(255,184,77,.95);
  --ok1: rgba(49,217,125,.95);    
  --orange: #ff8a2a;
    --orange2: #ffb36b;
    --radius: 22px;
    --duck1:#ffb300;
    --duck2:#ff6a00;
    --duck3:#ffd36b;
    --tg1:#2AABEE;
    --tg2:#229ED9;
    --shadow: 0 18px 70px rgba(0,0,0,.55);
	
  --radius:26px;
  --radius2:22px;
  --gap:18px;
  --accent1:#ffb44d;
  --accent2:#ff7a2f;
  --accent3:#66c7ff;
  --maxw:1060px;
  
    --glass: rgba(255,255,255,.06);
    --glass2: rgba(255,255,255,.09);
    --stroke: rgba(255,255,255,.12);
    --stroke2: rgba(255,200,120,.22);
    --text: rgba(255,255,255,.90);
    --muted: rgba(255,255,255,.65);
    --muted2: rgba(255,255,255,.52);
    --duck1:#ffb03a;
    --duck2:#ff7a18;
    --duck3:#ffcf6a;
    --good:#35d07f;
    --bad:#ff5a6b;
    --shadow: 0 18px 55px rgba(0,0,0,.55);
}

* {
  box-sizing: border-box
}

html,
body {
  height: auto%
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color: var(--txt);
    background: radial-gradient(1200px 520px at 12% 8%, rgba(255,160,90,.22), transparent 62%),
        radial-gradient(900px 420px at 82% 14%, rgba(120,190,255,.22), transparent 60%),
        radial-gradient(1000px 520px at 50% 100%, rgba(255,120,200,.20), transparent 65%),
        linear-gradient(180deg, #070610, #0b0a14 55%, #080712);
    overflow-x: hidden;
}

/* ===== Background drift + parallax (ONLY background) ===== */
.bgshift {
  position: fixed;
  z-index: -3;
  pointer-events: none;
  animation: bgDrift 16s ease-in-out infinite alternate;
  will-change: transform;
}

.bgshift::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 500px at 40% 40%, rgba(255, 255, 255, .04), transparent 60%), radial-gradient(900px 600px at 60% 60%, rgba(255, 195, 80, .05), transparent 62%);
  mix-blend-mode: screen;
  opacity: .30;
  animation: renderSheen 8s ease-in-out infinite;
}

@keyframes bgDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
    transform: translate3d(0, 0, 0) scale(1.02);
  }

  100% {
    background-position: 10% 6%, 92% 8%, 55% 92%, 0 0;
    transform: translate3d(0, 0, 0) scale(1.03);
  }
}

@keyframes renderSheen {

  0%,
  100% {
    opacity: .18;
    filter: blur(0px)
  }

  50% {
    opacity: .34;
    filter: blur(1px)
  }
}
.h1 {
    text-align: center;
    margin: 10px 0 8px;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.02em;
}
  /* ===== Sticky header ===== */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 12px 18px;
    background: rgba(12, 14, 26, .28);
    backdrop-filter: blur(14px) saturate(1.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }

.topbar {
  padding: 1px 0;
}

.topbar.scrolled {
  background: rgba(10, 12, 22, .46);
  backdrop-filter: blur(18px) saturate(1.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.22);
  border-bottom-color: rgba(255, 255, 255, .10);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .38);
}
a:-webkit-any-link {
    cursor: pointer;
}
.navWrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  align-content: center;
  flex-direction: row;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  text-decoration: none;
  color: inherit;
}

.duck {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  position: relative;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .40));
}

.duck img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: 50% 70%;
  animation: duckSwim 2.8s ease-in-out infinite;
}

.duck::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 34px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 210, 110, .40), rgba(255, 210, 110, .16), transparent 70%);
  animation: ripple 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes duckSwim {
  0% {
    transform: translateY(0px) rotate(-0.3deg);
  }

  25% {
    transform: translateY(-0.5px) rotate(0.25deg);
  }

  50% {
    transform: translateY(0.1px) rotate(-0.18deg);
  }

  75% {
    transform: translateY(-0.4px) rotate(0.28deg);
  }

  100% {
    transform: translateY(0px) rotate(-0.3deg);
  }
}

@keyframes ripple {
  0% {
    transform: translateX(-50%) scaleX(.96);
    opacity: .30;
  }

  50% {
    transform: translateX(-50%) scaleX(1.02);
    opacity: .18;
  }

  100% {
    transform: translateX(-50%) scaleX(.96);
    opacity: .30;
  }
}

.brandtext {
    line-height: 1.08;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}

.brandtext .title {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 14px;
    color: var(--text);
    list-style: none;
    text-transform: none;
}
.brandtext .tag {
    font-size: 12px;
    color: var(--muted);
}
.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.menu a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 12px;
  padding: 6px 7px;
  border-radius: 999px;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.menu a:hover {
  color: rgba(255, 255, 255, .96);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
a:hover {
    color: #ffffff !important;
}
.actions {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 37px;
  flex: 0 0 auto;
  padding-left: 6px;
  align-content: center;
  justify-content: center;
}

.btn {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 750;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .90);
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    transition: transform .18s 
ease, box-shadow .18s 
ease, border-color .18s 
ease, filter .18s 
ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    isolation: isolate;
}

.btn:hover {
  transform: translateY(-1px);
    color: rgba(255, 255, 255, .90);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .35);
  filter: brightness(1.06) saturate(1.02);
}

.btnGold {
  border: 1px solid rgba(255, 255, 255, .18);
  height: 44px;
  color: var(--goldInk) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 35%), linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .25), rgba(255, 255, 255, .0)), linear-gradient(135deg, var(--goldA), var(--goldB) 52%, var(--goldC));
  background-size: 100% 100%, 220% 100%, 100% 100%;
  background-position: 0 0, -120% 0, 0 0;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  animation: goldBreath 2.8s ease-in-out infinite;
}
.btnGold:hover {
    animation: goldBreath 2.8s 
ease-in-out infinite, goldSheen 1.25s 
ease-in-out infinite;
    box-shadow: 0 22px 62px rgba(0, 0, 0, .46), 0 0 34px rgba(255, 186, 70, .18), 0 0 0 1px rgba(255, 255, 255, .16) inset;
    filter: brightness(1.08) saturate(1.10);
    color: #000 !important;
}
.btnGold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, rgba(255, 255, 255, 0) 2px 7px);
  opacity: .18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes goldBreath {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.01);
  }
}

.btnTg {
  height: 44px;
  background: rgba(42, 171, 238, .10);
  border-color: rgba(42, 171, 238, .22);
}

.btnTg:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38), 0 0 26px rgba(42, 171, 238, .18);
}

.ico {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto
}
a.glassBtn .ico {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, rgba(255, 210, 120, .12), rgba(0, 0, 0, .20));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    transition: transform .18s 
ease, box-shadow .18s 
ease, border-color .18s 
ease;
}
.ico svg {
  width: 100%;
  height: 100%;
  position: relative;
}

.btnCta {
  animation: ctaPulse 2.4s ease-in-out infinite;
}

.btnCta::before,
.btnCta::after {
  content: "";
  position: absolute;
  inset: 3px;
  /* INSIDE button */
  border-radius: 999px;
  border: 1px solid rgba(255, 226, 150, .0);
  opacity: 0;
  pointer-events: none;
}

.btnCta:hover::before {
  animation: waveIn 1.8s ease-out infinite;
}

.btnCta:hover::after {
  animation: waveIn 1.8s ease-out infinite;
  animation-delay: .9s;
}

@keyframes ctaPulse {
  0% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.03) saturate(1.05);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes waveIn {
  0% {
    opacity: 0;
    transform: scale(.92);
    border-color: rgba(255, 226, 150, .0);
  }

  15% {
    opacity: .55;
    border-color: rgba(255, 226, 150, .65);
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
    border-color: rgba(255, 226, 150, .0);
  }
}

/* ===== First screen canvas ===== */
.first {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 0px 18px;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Gallery slider */
.slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  /* border: 1px solid rgba(255, 255, 255, .10); */
  /* background: rgba(255, 255, 255, .03); */
  /* box-shadow: var(--shadow); */
}

.slides {
  display: flex;
  transition: transform 1.15s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 16 / 4.2;
  /* compact */
  background: rgba(0, 0, 0, .25);
}

.slideLink {
  position: absolute;
  inset: 0;
  display: block
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.04);
}

.slideShade {
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 220px at 18% 60%, rgba(0, 0, 0, .58), transparent 60%), linear-gradient(90deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, .10) 55%, rgba(0, 0, 0, .52));
  pointer-events: none;
}

.slideCap {
  position: absolute;
  left: 16px;
  bottom: 14px;
  max-width: 560px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(15, 12, 24, .52);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}

.slideCap h3 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: .2px
}

.slideCap p {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255, 255, 255, .72)
}

.ctrl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .92);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.arrow:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(255, 255, 255, .26);
  filter: brightness(1.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 20px rgba(255, 179, 0, .10);
}

.arrow svg {
  width: 18px;
  height: 18px
}

.hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.dots {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .16);
  backdrop-filter: blur(10px);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .16);
  opacity: .65;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

.dot.active {
  opacity: 1;
  background: linear-gradient(90deg, #ffb300, #ff7a00);
  border-color: rgba(0, 0, 0, .25);
  transform: scale(1.25);
}

.progressWrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .10);
}

.bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffb300, #ff7a00);
}

/* Offer + Form under gallery (still within first screen) */
.below {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: stretch;
}

.card {
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  overflow: hidden;
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(560px 240px at 18% 10%, rgba(246, 213, 138, .15), transparent 60%), radial-gradient(520px 260px at 65% 55%, rgba(42, 171, 238, .10), transparent 55%);
  opacity: .85;
  pointer-events: none;
}

.cardInner {
  position: relative;
  z-index: 1;
}

.heroTitle {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.heroTitle .hl {
  display: inline-block;
  padding: 0 .06rem;
  background: linear-gradient(90deg, rgba(255, 214, 102, .22), rgba(255, 173, 56, .10), rgba(255, 214, 102, .22));
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(255, 195, 80, .10);
  padding: 10px;
}

.sub {
    text-align: center;
    margin: 0 auto 18px;
    max-width: 980px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.55;
}
.subtitleLine1 {
    white-space: nowrap;
}
.subtitleLine2 {
    white-space: normal;
}
.trust {
  margin: 12px 0 14px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .80);
}

.trust p {
  margin: 0;
  line-height: 1.35;
  font-size: 13px
}

.trust p+p {
  margin-top: 6px
}

.trust strong {
  color: rgba(255, 255, 255, .92);
  font-weight: 900;
}

.btnCol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px
}

.btnWide {
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

.socialRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  font-size: 12px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  overflow: hidden;
  position: relative;
}

.chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  filter: brightness(1.06);
}

.chip .miniIco {
  width: 14px;
  display: inline-block
}

.chip .miniIco svg {
  width: 100%;
  height: 100%
}

/* Form */
.badgeRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 10px
}

.badge {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .78);
  font-weight: 400;
}

.formCard {
  border-radius: 18px;
  padding: 14px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .10);
}

.formTitle {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(255, 255, 255, .88);
}

label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
  margin: 10px 0 6px;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, .38)
}
input:focus, textarea:focus {
    border-color: rgba(246, 213, 138, .45);
    box-shadow: 0 0 0 3px rgba(246, 213, 138, .12);
    background: rgba(10, 10, 14, .62);
}
textarea {
    min-height: 84px;
    resize: vertical;
}
input, textarea {
    width: 100%;
    border-radius: 14px;
    padding: 12px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(10, 10, 14, .55);
    color: rgba(255, 255, 255, .90);
    outline: none;
    transition: border-color .2s 
ease, box-shadow .2s 
ease, background .2s 
ease;
    line-height: 14px;
    font-size: 14px;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Layout compacting */
@media (max-width: 980px) {
  .menu {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu::-webkit-scrollbar {
    display: none;
  }

  .actions {
    gap: 12px;
  }

  .slide {
    aspect-ratio: 16 / 7.2;
  }

  .below {
    grid-template-columns: 1fr;
  }

  .badgeRow {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .brandtext .tag {
    display: none;
  }

  .actions .btn:not(.btnCta) {
    display: none;
  }

  .btnWide {
    padding: 12px 14px;
  }

  .first {
    padding-bottom: 14px;
  }
}

html {
  scroll-behavior: smooth;
}

body.is-loading main {
  opacity: 0;
  transform: translateY(10px);
}

main {
  transition: opacity .7s ease, transform .7s ease;
}

body.is-loaded main {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Liquid Glass (subtle) ===== */
.liquidGlass {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .45);
  position: relative;
  overflow: hidden;
}

.liquidGlass::before {
  content: "";
  position: absolute;
  inset: -2px;
  opacity: .65;
  pointer-events: none;
}

.liquidGlass::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .06) 0 2px, rgba(255, 255, 255, 0) 2px 9px); */
  opacity: .08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Apply gently */
.topbar {
  border-bottom-color: rgba(255, 255, 255, .14);
  background: rgba(10, 8, 25, .55);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.slider {
  /* background: rgba(255, 255, 255, .04); */
}

.slider,
.card {
  /* border-color: rgba(255, 255, 255, .12); */
}

.slider {
  /* box-shadow: 0 26px 90px rgba(0, 0, 0, .55); */
}

.card {
  box-shadow: 0 18px 70px rgba(0, 0, 0, .42);
}

/* ===== Cursor glow ===== */
.cursorGlow {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  margin-top: -130px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle, rgba(255, 190, 90, .14), rgba(120, 90, 255, .10), rgba(0, 0, 0, 0) 60%);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: .0;
  transition: opacity .25s ease;
  will-change: transform;
}

@media (pointer: coarse) {
  .cursorGlow {
    display: none;
  }
}

/* Header visible during preloader */
.preloader {
  z-index: 9000;
}

header.topbar {
  z-index: 9500;
}

:root {
  --bg0: #06070a;
  --bg1: #0b0f16;
  --glass: rgba(255, 255, 255, .08);
  --glass2: rgba(255, 255, 255, .05);
  --br: rgba(255, 255, 255, .14);
  --br2: rgba(255, 255, 255, .10);
  --txt: rgba(255, 255, 255, .92);
  --dim: rgba(255, 255, 255, .70);
  --dim2: rgba(255, 255, 255, .55);
  --gold: rgba(255, 210, 120, .98);
  --gold2: rgba(255, 160, 70, .94);
  --r: 22px;
  --r2: 16px;
  --shadow: 0 18px 55px rgba(0, 0, 0, .40);
  --shadow2: 0 12px 28px rgba(0, 0, 0, .28);
}

.wrap {
  width: min(1200px, calc(100% - 28px));
  margin: 36px auto 0;
  padding: 42px 0 66px;
}

.hero {
  border-radius: calc(var(--r) + 6px);
  border: 1px solid var(--br2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 18px 16px;
}

.hero h1 {
  margin: 0;
  font-weight: 850;
  letter-spacing: .2px;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.08;
}

.hero p {
  margin: 10px 0 0;
  color: var(--dim);
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.45;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 1px 6px;
  border-radius: 10px;
}

.page {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 36px;
}

.head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

h1 {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: bold;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
h2 {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.05;
    letter-spacing: .01em;
	}

    .sub .warn{ color: rgba(255,200,120,.95); }
    .sub .ok{ color: rgba(120,255,170,.95); }

    .grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      .head{ flex-direction: column; align-items: stretch; }
    }

    .card{
      position:relative;
      border-radius: var(--r);
      background: linear-gradient(180deg, var(--glass), var(--glass2));
      border: 1px solid var(--br);
      box-shadow: var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transform: translateY(0);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .card:hover::after{ opacity:.25; }

    /* premium coins behind right card */
    @keyframes drift{
      0%{ transform: translateY(0px) translateX(0px) scale(1); }
      50%{ transform: translateY(-10px) translateX(8px) scale(1.01); }
      100%{ transform: translateY(0px) translateX(0px) scale(1); }
    }
    .card.cashback .form{
      padding-bottom: 54px;
      background: rgba(0,0,0,.10);
      border-radius: calc(var(--r) - 10px);
      border: 1px solid rgba(255,255,255,.09);
      box-shadow: 0 18px 45px rgba(0,0,0,.20);
    }

    .card-head{
      position:relative;
      padding: 16px 16px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom: 1px solid var(--br2);
    }
    .card-head h2{ margin:0; font-size: 16px; letter-spacing: .01em; }

    .pill{
      font-size: 12px;
      color: rgba(255,255,255,.86);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.14);
      box-shadow: var(--shadow2);
      user-select:none;
      white-space:nowrap;
      display:flex;
      align-items:center;
      gap:8px;
    }

    .form{
      position:relative;
      padding: 14px 16px 16px;
      display:flex;
      flex-direction:column;
      gap: 12px;
      z-index:2;
    }

    .row{display:flex;flex-direction:column;gap: 8px;}
    .row-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 10px; }
    .label{ font-size: 13px; color: var(--dim); }

    .inline{ display:flex; align-items:center; gap: 8px; }
    .inline-wide{ flex-wrap: wrap; justify-content:flex-end; }

    .input{
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.20);
      color: var(--txt);
      padding: 12px 12px;
      outline:none;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    .input:focus{
      border-color: rgba(255, 210, 120, .35);
      background: rgba(0,0,0,.24);
      box-shadow: 0 0 0 6px rgba(255, 190, 90, .10);
      transform: translateY(-1px);
    }
    .input:hover{ border-color: rgba(255,255,255,.20); }
    .input-sm{ width: 120px; padding: 10px 10px; text-align:right; }
    .textarea{ min-height: 92px; resize: vertical; }
    .sfx{ font-size: 12px; color: var(--dim2); user-select:none; }

    .seg{
      display:flex;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      overflow:hidden;
      box-shadow: 0 12px 26px rgba(0,0,0,.22);
    }
    .seg-btn{
      border:0;
      padding: 9px 10px;
      color: rgba(255,255,255,.78);
      background: transparent;
      font-size: 12px;
      cursor:pointer;
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }
    .seg-btn:hover{ transform: translateY(-1px); }
    .seg-btn.is-active{
      color: rgba(20,15,10,.92);
      background: linear-gradient(180deg, var(--gold), var(--gold2));
    }

    .chipset{ display:flex; flex-wrap:wrap; gap: 8px; justify-content:flex-end; }
    .chip{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      color: rgba(255,255,255,.80);
      padding: 8px 10px;
      border-radius: 999px;
      font-size: 12px;
      cursor:pointer;
      transition: transform .16s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
      box-shadow: 0 12px 26px rgba(0,0,0,.20);
    }
    .chip:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.20); }
    .chip.is-active{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,210,120,.28);
      box-shadow: 0 0 0 6px rgba(255, 190, 90, .10), 0 12px 26px rgba(0,0,0,.22);
    }

    .slider input[type="range"], .forecast input[type="range"]{
      width:100%;
      appearance:none;
      -webkit-appearance:none;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      outline:none;
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .slider input[type="range"]:hover, .forecast input[type="range"]:hover{
      transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.22);
    }
    .slider input[type="range"]::-webkit-slider-thumb,
    .forecast input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width: 18px; height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.22));
      box-shadow: 0 12px 26px rgba(0,0,0,.35);
      cursor:pointer;
      transition: transform .18s ease;
    }
    .slider input[type="range"]::-webkit-slider-thumb:active,
    .forecast input[type="range"]::-webkit-slider-thumb:active{ transform: scale(1.06); }

    .slider-meta, .forecast-meta{
      display:flex; justify-content:space-between;
      font-size: 12px; color: var(--dim2);
      margin-top: 6px;
    }

    .check{ display:flex; align-items:center; gap: 10px; cursor:pointer; user-select:none; color: rgba(255,255,255,.84); font-size: 13px; }
    .check input{ display:none; }
    .check-ui{
      width: 18px; height: 18px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.16);
      box-shadow: 0 10px 18px rgba(0,0,0,.22);
      position:relative;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .check-ui::after{
      content:"";
      position:absolute; inset: 3px;
      border-radius: 4px;
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      opacity:0; transform: scale(.85);
      transition: opacity .16s ease, transform .16s ease;
    }
    .check input:checked + .check-ui{
      border-color: rgba(255,210,120,.28);
      transform: translateY(-1px);
      background: rgba(255,255,255,.08);
      box-shadow: 0 0 0 6px rgba(255, 190, 90, .10), 0 10px 18px rgba(0,0,0,.22);
    }
    .check input:checked + .check-ui::after{ opacity:1; transform: scale(1); }

    .results{ margin-top: 4px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .result{
      border-radius: var(--r2);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.14);
      padding: 12px;
      box-shadow: 0 18px 40px rgba(0,0,0,.22);
      transition: transform .18s ease, border-color .18s ease;
    }
    .result:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
    .result-wide{ grid-column: 1 / -1; }
    .rk{ font-size: 12px; color: var(--dim2); margin-bottom: 6px; }
    .rv{ font-size: 16px; font-weight: 800; letter-spacing: .01em; }
    .rs{ margin-top: 6px; font-size: 12px; color: var(--dim); line-height: 1.25; }

    .forecast-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
    .forecast-days{ display:flex; align-items:center; gap: 8px; }
    .forecast-val{
      font-size: 13px;
      color: rgba(255,255,255,.88);
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      white-space:nowrap;
    }

    .mini{ margin-top: 10px; font-size: 12px; color: var(--dim); line-height: 1.35; }
    .mini-muted{ margin-top: 10px; color: var(--dim2); }


    .btn:hover{ transform: translateY(-1px); }
    .btn:hover::after{ opacity:.55; animation: sweep .9s ease both; }
    @keyframes sweep{ from{ transform: translateX(-35%);} to{ transform: translateX(55%);} }
    .btn:active{ transform: translateY(0px) scale(.99); }

    .btn-primary{
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      color: rgba(20,15,10,.95);
      box-shadow: 0 18px 40px rgba(0,0,0,.28);
    }
    .btn-primary:hover{filter: brightness(1.02);box-shadow: 0 20px 46px rgba(0,0,0,.34);color: #000;}

    .btn-ghost{
      background: rgba(0,0,0,.14);
      color: rgba(255,255,255,.88);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
    }
    .btn-ghost:hover{
      border-color: rgba(255,210,120,.22);
      box-shadow: 0 0 0 6px rgba(255, 190, 90, .10), 0 14px 34px rgba(0,0,0,.24);
    }
.success{
      position:absolute; inset: 0;
      display:none; place-items:center;
      background: rgba(0,0,0,.32);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 16px;
      z-index: 5;
    }
    .success.is-open{ display:grid; }

    .success-card{
      filter: none;

      width: min(520px, 100%);
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.16);
      background: linear-gradient(180deg, #171520, #0d0b12);
      box-shadow: 0 22px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
      padding: 16px;
      display:flex; align-items:center; gap: 14px;
      animation: pop .22s ease both;
      position:relative;
      overflow:hidden;
    }
    @keyframes pop{ from{ transform: translateY(10px) scale(.98); opacity: 0; } to{ transform: translateY(0px) scale(1); opacity: 1; } }

    .success-anim{
      width: 96px;
      height: 96px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.16);
      position:relative;
      overflow:hidden;
      display:grid;
      place-items:center;
      flex: 0 0 auto;
      box-shadow: 0 18px 40px rgba(0,0,0,.26);
    }

    .mail-scene{
      position:relative;
      width: 76px;
      height: 76px;
    }

    /* Mailbox */
    .mailbox{
      position:absolute;
      left: 18px;
      top: 18px;
      width: 40px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.18);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      box-shadow: 0 12px 26px rgba(0,0,0,.22);
      transform: translateY(0);
    }
    .mailbox-top{
      position:absolute;
      inset: -10px 2px auto 2px;
      height: 18px;
      border-radius: 12px 12px 10px 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.10);
    }
    .slot{
      position:absolute;
      left: 9px;
      top: 14px;
      width: 22px;
      height: 6px;
      border-radius: 999px;
      background: rgba(0,0,0,.30);
      border: 1px solid rgba(255,255,255,.10);
    }
    .flag{
      position:absolute;
      right: -7px;
      top: 16px;
      width: 10px;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,210,120,.92), rgba(255,160,70,.92));
      transform-origin: left center;
      animation: flagWiggle 2.8s ease-in-out infinite;
    }
    @keyframes flagWiggle{
      0%, 65%, 100%{ transform: rotate(0deg); }
      75%{ transform: rotate(-18deg); }
      85%{ transform: rotate(10deg); }
    }

    /* Duck */
    .duck{
      position:absolute;
      /* left: 12px; */
      /* bottom: 6px; */
      width: 26px;
      height: 26px;
      opacity: 0;
      transform: translateY(10px);
      animation: duckPop 1.6s ease forwards;
      animation-delay: .10s;
    }
    @keyframes duckPop{
      0%{ opacity:0; transform: translateY(10px); }
      30%{ opacity:1; transform: translateY(0px); }
      100%{ opacity:1; transform: translateY(0px); }
    }
    .duck-head{
      position:absolute;
      left: 2px;
      top: 2px;
      width: 22px;
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,210,120,.95), rgba(255,160,70,.92));
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
    }
    .duck-beak{
      position:absolute;
      left: 16px;
      top: 10px;
      width: 12px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,120,80,.95);
      box-shadow: 0 10px 18px rgba(0,0,0,.16);
      transform: scaleX(.92);
    }
    .duck-eye{
      position:absolute;
      left: 10px;
      top: 7px;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(15,10,18,.85);
    }

    /* Envelope pulled out */
    .envelope{
      position:absolute;
      left: 30px;
      top: 26px;
      width: 18px;
      height: 12px;
      border-radius: 4px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 14px 26px rgba(0,0,0,.22);
      opacity: 0;
      transform: translateY(8px) rotate(-6deg);
      animation: envelopeMove 1.6s ease forwards;
      animation-delay: .35s;
    }
    .envelope::before{
      content:"";
      position:absolute;
      left: 2px;
      top: 2px;
      width: 14px;
      height: 8px;
      border-radius: 3px;
      background: linear-gradient(180deg, rgba(255,210,120,.22), rgba(255,110,200,.14));
      opacity:.55;
    }
    @keyframes envelopeMove{
      0%{ opacity:0; transform: translateY(10px) rotate(-10deg); }
      30%{ opacity:1; transform: translateY(0px) rotate(-6deg); }
      100%{ opacity:1; transform: translateY(-2px) rotate(-4deg); }
    }

    /* Thumb up for sender */
    .thumb{
      position:absolute;
      right: -2px;
      bottom: 4px;
      font-size: 18px;
      opacity: 0;
      transform: translateY(8px) scale(.9);
      animation: thumbUp 1.6s ease forwards;
      animation-delay: .85s;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
    }
    @keyframes thumbUp{
      0%{ opacity:0; transform: translateY(10px) scale(.9); }
      35%{ opacity:1; transform: translateY(0px) scale(1); }
      100%{ opacity:1; transform: translateY(0px) scale(1); }
    }
50%{ transform: translateX(12px) translateY(-8px) rotate(10deg); opacity:1;}
      100%{ transform: translateX(-12px) translateY(8px) rotate(-8deg); opacity:.90;}
    }
    .spark{
      position:absolute;
      width: 12px; height: 12px;
      border-radius: 999px;
      background: rgba(255,210,120,.9);
      filter: blur(.2px);
      opacity:0;
    }
    .s1{ left: 14px; top: 18px; animation: spark 1.15s ease-in-out infinite; }
    .s2{ right: 16px; top: 44px; animation: spark 1.15s .15s ease-in-out infinite; }
    .s3{ left: 44px; bottom: 14px; animation: spark 1.15s .28s ease-in-out infinite; }
    @keyframes spark{
      0%{ transform: scale(.7); opacity:0; }
      35%{ transform: scale(1); opacity:.95; }
      100%{ transform: scale(1.3); opacity:0; }
    }
    .success-title{ font-weight: 900; letter-spacing:.01em; margin-bottom: 6px; }

    .toast{
      position: fixed;
      bottom: 18px; right: 18px;
      z-index: 9999;
      width: min(380px, calc(100% - 36px));
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.30);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 22px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
      padding: 12px 12px;
      color: rgba(255,255,255,.90);
      animation: pop .18s ease both;
    }
    .toast b{ color: rgba(255,210,120,.95); }
  
    18%{ opacity: 1; }
      45%{ stroke-dashoffset: 0; opacity: 1; }
      72%{ stroke-dashoffset: 0; opacity: .85; }
      100%{ stroke-dashoffset: 90; opacity: .15; }
    }

  
    /* Green checkmark: shows only on submit, does not affect layout */
    .trust-check{
      position:absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      width: 70px;
      height: 44px;
      display:grid;
      place-items:center;
      pointer-events:none;
      opacity: 0;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.26));
    }
    .trust-check svg{ overflow: visible; }
    .tc-path{
      stroke: rgba(49,217,125,.98);
      stroke-width: 5.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 90;
      stroke-dashoffset: 90;
    }
    .trust-check.is-show{
      opacity: 1;
      transition: opacity .12s ease;
    }
    .trust-check.is-show .tc-path{
      animation: checkDraw 1.25s ease-in-out forwards;
    }
    @keyframes checkDraw{
      0%{ stroke-dashoffset: 90; opacity: .15; }
      18%{ opacity: 1; }
      100%{ stroke-dashoffset: 0; opacity: 1; }
    }

  
    /* Mobile polish */
    @media (max-width: 560px){
      .page{ width: calc(100% - 18px); padding: 18px 0 28px; }
      .card-head{ padding: 14px 14px 10px; }
      .form{ padding: 12px 14px 14px; }
      .input-sm{ width: 108px; }
      .pill{ max-width: 46vw; overflow:hidden; text-overflow: ellipsis; }
      .results{ grid-template-columns: 1fr; }
      .forecast-head{ flex-direction: column; align-items: stretch; }
      .forecast-days{ justify-content: space-between; }
      .forecast-val{ text-align:center; }
      .btn{ width: 100%; }
      .chipset{ justify-content:flex-start; }
    }

    @media (hover: none) and (pointer: coarse){
      .cursor-glow{ display:none; }
      .card:hover{ transform:none; }
      .btn:hover{ transform:none; }
      .slider input[type="range"]:hover,
      .forecast input[type="range"]:hover{ transform:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
    }

  
    /* Cashback card: soft green aura (always), stronger on hover/focus */
    .card.cashback{
      box-shadow:
        0 18px 55px rgba(0,0,0,.40),
        0 0 0 1px rgba(49,217,125,.12),
        0 0 28px rgba(49,217,125,.06);
    }
    .card.cashback:hover,
    .card.cashback:focus-within{
      border-color: rgba(49,217,125,.40);
      box-shadow:
        0 22px 66px rgba(0,0,0,.46),
        0 0 0 1px rgba(49,217,125,.26),
        0 0 38px rgba(49,217,125,.10),
        0 0 0 6px rgba(49,217,125,.10);
    }

  
    
    /* Cashback card: premium luxury aura (abstract, fintech, no emojis) */
    .card.cashback::after{
      content:"";
      position:absolute;
      inset:-24px;
      pointer-events:none;
      opacity:.85;
      background:
        /* soft gold + green aura */
        radial-gradient(260px 180px at 18% 24%, rgba(255,210,120,.09), transparent 64%),
        radial-gradient(280px 200px at 78% 72%, rgba(49,217,125,.08), transparent 66%),
        radial-gradient(420px 240px at 62% 18%, rgba(120,190,255,.07), transparent 70%),
        /* subtle diagonal micro-lines */
        repeating-linear-gradient(135deg,
          rgba(255,255,255,.05) 0px,
          rgba(255,255,255,.05) 1px,
          rgba(255,255,255,0) 1px,
          rgba(255,255,255,0) 10px),
        /* micro sparkles */
        radial-gradient(2px 2px at 22% 36%, rgba(255,210,120,.45) 0 1px, transparent 2px),
        radial-gradient(2px 2px at 34% 58%, rgba(255,255,255,.35) 0 1px, transparent 2px),
        radial-gradient(2px 2px at 66% 44%, rgba(49,217,125,.40) 0 1px, transparent 2px),
        radial-gradient(2px 2px at 82% 30%, rgba(255,210,120,.40) 0 1px, transparent 2px),
        radial-gradient(2px 2px at 74% 78%, rgba(255,255,255,.30) 0 1px, transparent 2px),
        /* gentle dark base */
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16));
      mix-blend-mode: screen;
      filter: blur(.25px);
      animation: premiumDrift 10s ease-in-out infinite;
    }

    .card.cashback::before{
      /* slightly richer top-light */
      filter: brightness(1.03) saturate(1.02);
    }

    @keyframes premiumDrift{
      0%{ transform: translateY(0px) translateX(0px) scale(1); }
      50%{ transform: translateY(-8px) translateX(6px) scale(1.01); }
      100%{ transform: translateY(0px) translateX(0px) scale(1); }
    }

    /* add a crisp inner edge so it reads "expensive" */
    .card.cashback{
      box-shadow:
        0 18px 55px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(49,217,125,.10),
        0 0 34px rgba(49,217,125,.06);
    }
    .card.cashback:hover,
    .card.cashback:focus-within{
      border-color: rgba(49,217,125,.38);
      box-shadow:
        0 22px 66px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(49,217,125,.22),
        0 0 46px rgba(49,217,125,.10),
        0 0 0 6px rgba(49,217,125,.10);
    }

  
    /* Touch comfort: bigger tap targets */
    @media (hover: none) and (pointer: coarse){
      .seg-btn{ padding: 12px 12px; font-size: 13px; }
      .chip{ padding: 10px 12px; font-size: 13px; }
      .input{ padding: 13px 12px; }
      .card-head h2{ font-size: 15px; }
    }

  
    @media (max-width: 420px){
      .success-card{ flex-direction: column; align-items: stretch; text-align: center; }
      .success-anim{ margin: 0 auto; }
      #cbClose{ width: 100%; }
    }


@media (max-width: 980px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .head {
    flex-direction: column;
    align-items: stretch;
  }
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

.panel {
     position: relative;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 26px;
    background: radial-gradient(520px 180px at 20% 0%, rgba(255, 210, 120, .16), transparent 62%), radial-gradient(520px 180px at 82% 0%, rgba(120, 190, 255, .13), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .46);
    padding: 22px 22px 22px;
    overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(800px 520px at 22% 16%, rgba(255, 205, 110, .11), transparent 65%), radial-gradient(760px 520px at 88% 10%, rgba(130, 100, 255, .11), transparent 62%), radial-gradient(900px 620px at 50% 110%, rgba(255, 110, 190, .08), transparent 60%);
  opacity: .95;
  pointer-events: none;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .06), transparent 40%), radial-gradient(900px 220px at 50% 0%, rgba(255, 255, 255, .06), transparent 70%);
  mix-blend-mode: screen;
  opacity: .40;
  pointer-events: none;
}

.inner {
  position: relative;
  padding: 22px 22px 18px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 14px;
  box-shadow: var(--shadow2);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 230, 140, 1), rgba(255, 170, 60, 1));
  box-shadow: 0 0 0 4px rgba(255, 180, 70, .14);
  margin: 0;
  padding: 0;
}

.cards {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow: hidden;
  /* no horizontal scroll */
  padding: 10px 6px 10px;
}

.card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radiusCard);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  padding: 14px 14px 14px;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease, background .26s ease, filter .26s ease;
  isolation: isolate;
}

/* big step number bottom-left */
.bigStep {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, .08);
  user-select: none;
  pointer-events: none;
}

/* top row: "Шаг 1 🦆" */
.topRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.stepPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .20);
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* subtle moving sheen INSIDE pill */
.stepPill::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: translateX(-60%);
  opacity: .55;
  pointer-events: none;
}

.card:hover .stepPill::after {
  animation: pillShine 1.1s ease;
}

@keyframes pillShine {
  0% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(60%);
  }
}

.emoji {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  font-size: 16px;
  flex: 0 0 auto;
  transform: translateZ(0);
}

.title {
  font-size: 16px;
  /* smaller so it never clips */
  /* line-height: 1.1; */
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .92);
  /* margin: 0 0 10px; */
}

.card p {
  /* margin: 0; */
  /* color: rgba(255, 255, 255, .72); */
  /* font-size: 14px; */
  /* line-height: 1.35; */
}

.card p b {
  color: rgba(255, 255, 255, .90);
  font-weight: 800;
}

/* Liquid glass sheen on cards */
.card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(260px 140px at 20% 10%, rgba(255, 255, 255, .10), transparent 62%), radial-gradient(300px 200px at 80% 0%, rgba(255, 210, 120, .09), transparent 64%), linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 42%);
  opacity: .55;
  pointer-events: none;
  transition: opacity .26s ease;
  z-index: 0;
}

/* premium sheen sweep on hover (doesn't overflow) */
.card::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 45%, transparent 60%);
    transform: translateX(-70%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.card:hover::after {
  opacity: .65;
  animation: cardSheen 1.2s ease;
}

@keyframes cardSheen {
  0% {
    transform: translateX(-70%);
  }

  100% {
    transform: translateX(70%);
  }
}

/* per-card hover glow color on contour (no clipping) */
.card:hover {
  /* border-color: rgba(255, 255, 255, .22); */
  /* background: rgba(255, 255, 255, .065); */
}

.card:hover::before {
  opacity: .72;
}

/* outline glow is achieved via box-shadow + subtle ring */
.card[data-glow="1"]:hover {
  box-shadow: 0 22px 70px rgba(0, 0, 0, .50), 0 0 0 1px rgba(255, 205, 110, .22), 0 0 0 8px rgba(255, 195, 80, .06), 0 0 40px rgba(255, 195, 80, .12);
}

.card[data-glow="2"]:hover {
  box-shadow: 0 22px 70px rgba(0, 0, 0, .50), 0 0 0 1px rgba(110, 210, 255, .22), 0 0 0 8px rgba(110, 210, 255, .06), 0 0 40px rgba(110, 210, 255, .11);
}

.card[data-glow="3"]:hover {
  box-shadow: 0 22px 70px rgba(0, 0, 0, .50), 0 0 0 1px rgba(255, 120, 210, .22), 0 0 0 8px rgba(255, 120, 210, .06), 0 0 40px rgba(255, 120, 210, .11);
}

.card[data-glow="4"]:hover {
  box-shadow: 0 22px 70px rgba(0, 0, 0, .50), 0 0 0 1px rgba(255, 190, 70, .22), 0 0 0 8px rgba(255, 190, 70, .06), 0 0 40px rgba(255, 190, 70, .12);
}

.card[data-glow="5"]:hover {
  box-shadow: 0 22px 70px rgba(0, 0, 0, .50), 0 0 0 1px rgba(170, 140, 255, .22), 0 0 0 8px rgba(170, 140, 255, .06), 0 0 40px rgba(170, 140, 255, .11);
}

/* micro-animations: subtle, premium, and NO clipping */
.card[data-anim="lift"]:hover {
  transform: translateY(-4px);
}

.card[data-anim="tilt"]:hover {
  transform: translateY(-3px);
}

.card[data-anim="tilt2"]:hover {
  transform: translateY(-3px);
}

.card[data-anim="pulse"]:hover {
  transform: translateY(-3px);
}

.card[data-anim="slide"]:hover {
  transform: translateY(-3px);
}

/* distinct micro for emoji per card */
.card[data-anim="lift"]:hover .emoji {
  animation: bob 1.05s ease-in-out infinite;
}

.card[data-anim="tilt"]:hover .emoji {
  animation: nudgeL 0.9s ease-in-out infinite;
}

.card[data-anim="tilt2"]:hover .emoji {
  animation: nudgeR 0.9s ease-in-out infinite;
}

.card[data-anim="pulse"]:hover .emoji {
  animation: pop 0.85s ease-in-out infinite;
}

.card[data-anim="slide"]:hover .emoji {
  animation: crown 1.15s ease-in-out infinite;
}

@keyframes bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes nudgeL {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-6deg);
  }
}

@keyframes nudgeR {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(6deg);
  }
}

@keyframes pop {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes crown {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-1px) rotate(4deg);
  }
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.mission {
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}

.cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .40);
  color: rgba(255, 255, 255, .90);
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.cta span {
  color: var(--gold);
  font-weight: 900;
}

.cta .duck {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
}

.cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, rgba(255, 215, 120, .00), rgba(255, 215, 120, .12), rgba(255, 215, 120, .00));
  transform: translateX(-60%);
  opacity: .8;
  pointer-events: none;
}

.cta:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 120, .20);
  box-shadow: 0 18px 62px rgba(0, 0, 0, .48), 0 0 46px rgba(255, 190, 70, .14);
}

.cta:hover::before {
  animation: shine 1.2s ease;
}

@keyframes shine {
  0% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(60%);
  }
}

/* Responsive: stack without scroll */
@media (max-width: 980px) {
  .cards {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .card {
    flex: 1 1 calc(50% - 14px);
  }

  .subtitle {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .inner {
    padding: 18px 16px 16px;
  }

  h1 {
    font-size: 38px;
  }

  .card {
    flex: 1 1 100%;
  }

  .bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .cta {
    width: 100%;
    justify-content: center;
  }

  .bigStep {
    font-size: 46px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  * {
    animation: none !important;
    transition: none !important;
  }
}

.card {
  position: relative;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--br);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:hover {
  transform: translateY(-2px);
  /* border-color: rgba(255, 210, 120, .22); */
  /* box-shadow: 0 22px 66px rgba(0, 0, 0, .46); */
}

.card:hover::after {
  opacity: .25;
}

/* premium coins behind right card */
@keyframes drift {
  0% {
    transform: translateY(0px) translateX(0px) scale(1);
  }

  50% {
    transform: translateY(-10px) translateX(8px) scale(1.01);
  }

  100% {
    transform: translateY(0px) translateX(0px) scale(1);
  }
}

.card.cashback .form {
  padding-bottom: 54px;
  background: rgba(0, 0, 0, .10);
  border-radius: calc(var(--r) - 10px);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .20);
}

.card-head {
  position: relative;
  padding: 16px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--br2);
}

.card-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: .01em;
}

.pill {
  font-size: 12px;
  color: rgba(255, 255, 255, .86);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .14);
  box-shadow: var(--shadow2);
  user-select: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form {
  position: relative;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

.row {
  display: flex;
  /* flex-direction: column; */
  gap: 8px;
}

.row-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.label {
  font-size: 13px;
  color: var(--dim);
}

.inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-wide {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20) !important;
  color: var(--txt);
  padding: 12px 12px;
  outline: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.input:focus {
  border-color: rgba(255, 210, 120, .35);
  background: rgba(0, 0, 0, .24);
  box-shadow: 0 0 0 6px rgba(255, 190, 90, .10);
  transform: translateY(-1px);
}

.input:hover {
  border-color: rgba(255, 255, 255, .20);
}

.input-sm {
  width: 120px;
  padding: 10px 10px;
  text-align: right;
}

.textarea {
  min-height: 92px;
  resize: vertical
}

.sfx {
  font-size: 12px;
  color: var(--dim2);
  user-select: none;
}

.seg {
  display: flex;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .16);
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}

.seg-btn {
  border: 0;
  padding: 9px 10px;
  color: rgba(255, 255, 255, .78);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.seg-btn:hover {
  transform: translateY(-1px);
}

.seg-btn.is-active {
  color: rgba(20, 15, 10, .92);
  background: linear-gradient(180deg, var(--gold), var(--gold2));
}

.chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.chip {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .16);
  color: rgba(255, 255, 255, .80);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: transform .16s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .20);
}

.chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .20);
}

.chip.is-active {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 210, 120, .28);
  box-shadow: 0 0 0 6px rgba(255, 190, 90, .10), 0 12px 26px rgba(0, 0, 0, .22);
}

.slider input[type="range"],
.forecast input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 8px !important;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  outline: none;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.slider input[type="range"]:hover,
.forecast input[type="range"]:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 22px rgba(0, 0, 0, .22);
}

.slider input[type="range"]::-webkit-slider-thumb,
.forecast input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .22));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .18s ease;
}

.slider input[type="range"]::-webkit-slider-thumb:active,
.forecast input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.06);
}

.slider-meta,
.forecast-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--dim2);
  margin-top: 6px;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
}

.check input {
  display: none;
}

.check-ui {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .16);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .22);
  position: relative;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.check-ui::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  opacity: 0;
  transform: scale(.85);
  transition: opacity .16s ease, transform .16s ease;
}

.check input:checked+.check-ui {
  border-color: rgba(255, 210, 120, .28);
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 6px rgba(255, 190, 90, .10), 0 10px 18px rgba(0, 0, 0, .22);
}

.check input:checked+.check-ui::after {
  opacity: 1;
  transform: scale(1);
}

.results {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.result {
  border-radius: var(--r2);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .14);
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  transition: transform .18s ease, border-color .18s ease;
}

.result:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .18);
}

.result-wide {
  grid-column: 1 / -1;
}

.rk {
  font-size: 12px;
  color: var(--dim2);
  margin-bottom: 6px;
}

.rv {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
}

.rs {
  margin-top: 6px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.25;
}

.forecast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.forecast-days {
  display: flex;
  align-items: center;
  gap: 8px;
}

.forecast-val {
  font-size: 13px;
  color: rgba(255, 255, 255, .88);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .16);
  white-space: nowrap;
}

.mini {
  margin-top: 10px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.35;
}

.mini-muted {
  margin-top: 10px;
  color: var(--dim2);
}

a.btn.btnGold.btnCta.navCta {
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 850;
  height: 37px;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  user-select: none;
  will-change: transform;
  position: relative;
  overflow: hidden;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

a.btn.btnGold.btnCta.navCta::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .14) 35%, transparent 55%, transparent 100%);
  transform: translateX(-35%);
  opacity: 0;
}

.btn:hover::after {
  opacity: .55;
  animation: sweep .9s ease both;
}

@keyframes sweep {
  from {
    transform: translateX(-35%);
  }

  to {
    transform: translateX(55%);
  }
}

.btn:active {
  transform: translateY(0px) scale(.99);
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  color: rgba(20, 15, 10, .95);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.btn-primary:hover {
  filter: brightness(1.02);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .34);
}

.btn-ghost {
  background: rgba(0, 0, 0, .14);
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.btn-ghost:hover {
  border-color: rgba(255, 210, 120, .22);
  box-shadow: 0 0 0 6px rgba(255, 190, 90, .10), 0 14px 34px rgba(0, 0, 0, .24);
}

.success {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, .32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px;
  z-index: 5;
}

.success.is-open {
  display: grid;
}

.success-card {
  filter: none;
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, #171520, #0d0b12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: pop .22s ease both;
  position: relative;
  overflow: hidden;
}

@keyframes pop {
  from {
    transform: translateY(10px) scale(.98);
    opacity: 0;
  }

  to {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

.success-anim {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .16);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .26);
}

.mail-scene {
  position: relative;
  width: 76px;
  height: 76px;
}

/* Mailbox */
.mailbox {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 40px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
  transform: translateY(0);
}

.mailbox-top {
  position: absolute;
  inset: -10px 2px auto 2px;
  height: 18px;
  border-radius: 12px 12px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .10);
}

.slot {
  position: absolute;
  left: 9px;
  top: 14px;
  width: 22px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 255, 255, .10);
}

.flag {
  position: absolute;
  right: -7px;
  top: 16px;
  width: 10px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 210, 120, .92), rgba(255, 160, 70, .92));
  transform-origin: left center;
  animation: flagWiggle 2.8s ease-in-out infinite;
}

@keyframes flagWiggle {

  0%,
  65%,
  100% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-18deg);
  }

  85% {
    transform: rotate(10deg);
  }
}

/* Duck */
.duck {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    position: relative;
    flex: 0 0 auto;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .40));
}

@keyframes duckPop {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  30% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.duck-head {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 22px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 210, 120, .95), rgba(255, 160, 70, .92));
  box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
}

.duck-beak {
  position: absolute;
  left: 16px;
  top: 10px;
  width: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 120, 80, .95);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .16);
  transform: scaleX(.92);
}

.duck-eye {
  position: absolute;
  left: 10px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 10, 18, .85);
}

/* Envelope pulled out */
.envelope {
  position: absolute;
  left: 30px;
  top: 26px;
  width: 18px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(8px) rotate(-6deg);
  animation: envelopeMove 1.6s ease forwards;
  animation-delay: .35s;
}

.envelope::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 210, 120, .22), rgba(255, 110, 200, .14));
  opacity: .55;
}

@keyframes envelopeMove {
  0% {
    opacity: 0;
    transform: translateY(10px) rotate(-10deg);
  }

  30% {
    opacity: 1;
    transform: translateY(0px) rotate(-6deg);
  }

  100% {
    opacity: 1;
    transform: translateY(-2px) rotate(-4deg);
  }
}

/* Thumb up for sender */
.thumb {
  position: absolute;
  right: -2px;
  bottom: 4px;
  font-size: 18px;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  animation: thumbUp 1.6s ease forwards;
  animation-delay: .85s;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22));
}

@keyframes thumbUp {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.9);
  }

  35% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

.spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 210, 120, .9);
  filter: blur(.2px);
  opacity: 0;
}

.s1 {
  left: 14px;
  top: 18px;
  animation: spark 1.15s ease-in-out infinite;
}

.s2 {
  right: 16px;
  top: 44px;
  animation: spark 1.15s .15s ease-in-out infinite;
}

.s3 {
  left: 44px;
  bottom: 14px;
  animation: spark 1.15s .28s ease-in-out infinite;
}

@keyframes spark {
  0% {
    transform: scale(.7);
    opacity: 0;
  }

  35% {
    transform: scale(1);
    opacity: .95;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.success-title {
  font-weight: 900;
  letter-spacing: .01em;
  margin-bottom: 6px;
}

.toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  width: min(380px, calc(100% - 36px));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 12px 12px;
  color: rgba(255, 255, 255, .90);
  animation: pop .18s ease both;
}

.toast b {
  color: rgba(255, 210, 120, .95);
}

/* Green checkmark: shows only on submit, does not affect layout */
.trust-check {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 70px;
  height: 44px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .26));
}

.trust-check svg {
  overflow: visible;
}

.tc-path {
  stroke: rgba(49, 217, 125, .98);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}

.trust-check.is-show {
  opacity: 1;
  transition: opacity .12s ease;
}

.trust-check.is-show .tc-path {
  animation: checkDraw 1.25s ease-in-out forwards;
}

@keyframes checkDraw {
  0% {
    stroke-dashoffset: 90;
    opacity: .15;
  }

  18% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Mobile polish */
@media (max-width: 560px) {
  .page {
    width: calc(100% - 18px);
    padding: 18px 0 28px;
  }

  .card-head {
    padding: 14px 14px 10px;
  }

  .form {
    padding: 12px 14px 14px;
  }

  .input-sm {
    width: 108px;
  }

  .pill {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .results {
    grid-template-columns: 1fr;
  }

  .forecast-head {
    flex-direction: column;
    align-items: stretch;
  }

  .forecast-days {
    justify-content: space-between;
  }

  .forecast-val {
    text-align: center;
  }

  .btn {
    width: 100%;
  }

  .chipset {
    justify-content: flex-start;
  }
}

@media (hover: none) and (pointer: coarse) {
  .cursor-glow {
    display: none;
  }

  .card:hover {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }

  .slider input[type="range"]:hover,
  .forecast input[type="range"]:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  }
}

/* Cashback card: soft green aura (always), stronger on hover/focus */
.card.cashback {
  box-shadow: 0 18px 55px rgba(0, 0, 0, .40), 0 0 0 1px rgba(49, 217, 125, .12), 0 0 28px rgba(49, 217, 125, .06);
}

.card.cashback:hover,
.card.cashback:focus-within {
  border-color: rgba(49, 217, 125, .40);
  box-shadow: 0 22px 66px rgba(0, 0, 0, .46), 0 0 0 1px rgba(49, 217, 125, .26), 0 0 38px rgba(49, 217, 125, .10), 0 0 0 6px rgba(49, 217, 125, .10);
}

/* Cashback card: premium luxury aura (abstract, fintech, no emojis) */
.card.cashback::after {
  content: "";
  position: absolute;
  inset: -24px;
  pointer-events: none;
  opacity: .85;
  background: radial-gradient(260px 180px at 18% 24%, rgba(255, 210, 120, .09), transparent 64%), radial-gradient(280px 200px at 78% 72%, rgba(49, 217, 125, .08), transparent 66%), radial-gradient(420px 240px at 62% 18%, rgba(120, 190, 255, .07), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 10px), radial-gradient(2px 2px at 22% 36%, rgba(255, 210, 120, .45) 0 1px, transparent 2px), radial-gradient(2px 2px at 34% 58%, rgba(255, 255, 255, .35) 0 1px, transparent 2px), radial-gradient(2px 2px at 66% 44%, rgba(49, 217, 125, .40) 0 1px, transparent 2px), radial-gradient(2px 2px at 82% 30%, rgba(255, 210, 120, .40) 0 1px, transparent 2px), radial-gradient(2px 2px at 74% 78%, rgba(255, 255, 255, .30) 0 1px, transparent 2px), linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .16));
  mix-blend-mode: screen;
  filter: blur(.25px);
  animation: premiumDrift 10s ease-in-out infinite;
}

.card.cashback::before {
  /* slightly richer top-light */
  filter: brightness(1.03) saturate(1.02);
}

@keyframes premiumDrift {
  0% {
    transform: translateY(0px) translateX(0px) scale(1);
  }

  50% {
    transform: translateY(-8px) translateX(6px) scale(1.01);
  }

  100% {
    transform: translateY(0px) translateX(0px) scale(1);
  }
}

/* add a crisp inner edge so it reads "expensive" */
.card.cashback {
  box-shadow: 0 18px 55px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(49, 217, 125, .10), 0 0 34px rgba(49, 217, 125, .06);
}

.card.cashback:hover,
.card.cashback:focus-within {
  border-color: rgba(49, 217, 125, .38);
  box-shadow: 0 22px 66px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(49, 217, 125, .22), 0 0 46px rgba(49, 217, 125, .10), 0 0 0 6px rgba(49, 217, 125, .10);
}

/* Touch comfort: bigger tap targets */
@media (hover: none) and (pointer: coarse) {
  .seg-btn {
    padding: 12px 12px;
    font-size: 13px;
  }

  .chip {
    padding: 10px 12px;
    font-size: 13px;
  }

  .input {
    padding: 13px 12px;
  }

  .card-head h2 {
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .success-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .success-anim {
    margin: 0 auto;
  }

  #cbClose {
    width: 100%;
  }
}

.cursor-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cursor-glow::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255, 200, 90, .08), rgba(255, 120, 80, .04), transparent 72%);
  filter: blur(2px);
  opacity: .55;
  transition: opacity .25s ease;
}

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

    .particles{
      position:fixed; inset:0; pointer-events:none;
      z-index:0;
      opacity:.42;
      mix-blend-mode: screen;
    }
    .particles i{
      position:absolute;
      width:3px; height:3px;
      border-radius:99px;
      background: rgba(255,255,255,.12);
      box-shadow: 0 0 18px rgba(255,210,120,.08);
      opacity:.30;
      animation: drift 9s ease-in-out infinite;
    }
    .particles i:nth-child(odd){ animation-duration: 11s; opacity:.20; }
    .particles i:nth-child(3n){ width:2px; height:2px; opacity:.16; }
    @keyframes drift{
      0%,100%{ transform: translateY(0) translateX(0); }
      50%{ transform: translateY(-10px) translateX(6px); }
    }


    /* === Header === */
    @keyframes gradientFlow{
      0%{ background-position: 0% 50%; filter:saturate(1) brightness(1); }
      50%{ background-position: 100% 50%; filter:saturate(1.07) brightness(1.03); }
      100%{ background-position: 0% 50%; filter:saturate(1) brightness(1); }
    }

    .minihead{
      margin: 0 0 18px;
      max-width: 980px;
    }
    .minihead-title{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight: 950;
      letter-spacing: -.02em;
      line-height: 1.08;
      margin: 0 0 14px; /* more air */
      font-size: 34px;   /* +~20% vs 28px base */
      background: linear-gradient(90deg, #FFD58A, #FFB36B, #FF8A55, #FFD58A);
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 10px 30px rgba(255,170,90,.10);
      animation: gradientFlow 6s ease-in-out infinite;
      will-change: background-position, filter;
    }
    .title-emoji{
      display:inline-block;
      background: linear-gradient(90deg, #FFD58A, #FFB36B, #FF8A55, #FFD58A);
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientFlow 6s ease-in-out infinite;
      filter: drop-shadow(0 10px 24px rgba(255,170,90,.18));
      transform: translateY(1px);
    }
    .minihead-sub{
      display:flex;
      flex-direction:column;
      gap:10px;
      max-width: 820px;
    }
    .minihead-strong{
      font-weight: 850;
      color: rgba(255,255,255,.90);
      font-size: 16.5px; /* +~20% */
      line-height: 1.25;
    }
    .minihead-muted{
      color: rgba(255,255,255,.74);
      font-size: 15.5px; /* +~20% */
      line-height: 1.35;
    }

    /* === Cards grid === */
    main.wrap .grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
    }

    .card{
      position:relative;
      border-radius: var(--r);
      border: 1px solid var(--stroke);
      /* background: linear-gradient(180deg, var(--glassA), var(--glassB)); */
      /* backdrop-filter: blur(10px); */
      -webkit-backdrop-filter: blur(10px);
      /* box-shadow: 0 18px 55px rgba(0,0,0,.42); */
      overflow:hidden;
      padding: 16px;
      /* min-height: 150px; */
      /* transform: translateZ(0); */
      /* transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; */
    }
    .card::before{
      content:"";
      position:absolute; inset:-2px;
      border-radius: calc(var(--r) + 2px);
      background:
        radial-gradient(600px 240px at 30% 0%, rgba(255,255,255,.12), transparent 55%),
        radial-gradient(520px 240px at 90% 60%, rgba(255,180,90,.12), transparent 60%),
        radial-gradient(520px 240px at 20% 90%, rgba(120,190,255,.10), transparent 65%);
      opacity:.85;
      pointer-events:none;
      mix-blend-mode: screen;
    }
    .card:hover{
      /* transform: translateY(-2px); */
      /* border-color: rgba(255,200,120,.45); */
      /* box-shadow:
        0 18px 60px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.08),
        0 0 0 6px rgba(255,180,90,.18),
        0 0 36px rgba(255,160,80,.22); */
    }

    .top{ display:flex; align-items:center; gap:12px; margin-bottom: 10px; }
    .badge{ display:flex; align-items:center; gap:12px; min-width:0; }

    .icon{
      width: 52px;
      height:52px;
      border-radius: 16px;
      display:grid;
      place-items:center;
      font-size: 26px;
      line-height: 1;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,210,120,.10), rgba(0,0,0,.18));
      /* box-shadow: 0 16px 36px rgba(0,0,0,.28); */
      user-select:none;
      position:relative;
      overflow:hidden;
    }
    /* unified subtle gradient animation on icon chip */
    .icon::after{
      content:"";
      position:absolute; inset:-40%;
      background: linear-gradient(90deg, rgba(255,213,138,.18), rgba(255,140,80,.14), rgba(120,190,255,.14), rgba(255,213,138,.18));
      background-size: 240% 100%;
      animation: gradientFlow 6s ease-in-out infinite;
      opacity:.55;
      transform: rotate(12deg);
      mix-blend-mode: screen;
      pointer-events:none;
    }
    .icon > span{ position:relative; z-index:1; }

    .title{
      font-weight: 900;
      font-size: 16px;
      letter-spacing: -.01em;
      line-height: 1.15;
      white-space: normal;
      margin: 0 0 10px;
    }
    .divider{
      height: 1px;
      margin: 10px 0 10px;
      background: linear-gradient(90deg,
        rgba(255,255,255,0.00),
        rgba(255,255,255,0.16),
        rgba(255,210,120,0.20),
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.00)
      );
      opacity: .9;
    }
    .text{
      margin: 0;
      color: rgba(255,255,255,.78);
      line-height: 1.48;
      font-size: 13.6px;
    }

    /* Scroll reveal (safe) */
    .reveal{ opacity: 1; transform: none; filter: none; }
    /* Optional reveal polish (never hides content) */
    .reveal{
      transition: transform .55s ease, filter .55s ease;
      will-change: transform, filter;
    }
    .reveal.is-in{ transform: translateY(-1px); filter: saturate(1.02); }
    .reveal.is-in{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }

    /* Tap ripple */
    .ripple{
      position:absolute;
      border-radius: 999px;
      transform: translate(-50%,-50%) scale(0);
      background: radial-gradient(circle, rgba(255,210,120,.28), rgba(255,255,255,.10), rgba(255,255,255,0));
      pointer-events:none;
      width: 260px; height:260px;
      opacity:0;
      animation: ripple .55s ease-out forwards;
      mix-blend-mode: screen;
    }
    @keyframes ripple{
      0%{ transform: translate(-50%,-50%) scale(.15); opacity:0; }
      15%{ opacity:.9; }
      100%{ transform: translate(-50%,-50%) scale(1); opacity:0; }
    }

    
    /* === Premium micro-animations (firm gloss) === */
    .card{
      will-change: transform, box-shadow, border-color;
	}
    .card:hover{
      /* box-shadow:
        0 22px 75px rgba(0,0,0,.62),
        0 0 0 1px rgba(255,255,255,.10),
        0 0 0 7px rgba(255,180,90,.20),
        0 0 44px rgba(255,160,80,.26); */
    }

    /* subtle "glass rim" that wakes up on hover */
    .card .rim{
      position:absolute;
      inset: 0;
      border-radius: var(--r);
      pointer-events:none;
      border: 1px solid rgba(255,255,255,.10);
      opacity: .55;
      transition: opacity .22s ease, border-color .22s ease;
    }
    .card:hover .rim{
      opacity: .95;
      border-color: rgba(255,210,120,.38);
    }

    /* icon chip reacts too */
    .card:hover .icon{
      transform: translateY(-1px) scale(1.02);
      box-shadow: 0 18px 40px rgba(0,0,0,.34);
    }
    .icon{ transition: transform .22s ease, box-shadow .22s ease; }

    /* text stays sharp: avoid blur on hover */
    .card, .card *{ filter:none !important; }
    .card:hover .title{ text-shadow: 0 10px 26px rgba(0,0,0,.25); }

    /* reduced motion support */
    @media (prefers-reduced-motion: reduce){
      .card::after, .card .rim{ transition:none !important; }
      .icon{ transition:none !important; }
    }


    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    /* Mobile must be one-by-one vertically */
    @media (max-width: 768px){
      .grid{ grid-template-columns: 1fr; }
      .wrap{ width: calc(100% - 18px); padding: 32px 0 44px; }
      .cursor-glow{ display:none; }
    }
    @media (max-width: 560px){
      .minihead-title{ font-size: 30px; margin-bottom: 14px; }
      .minihead-strong{ font-size: 15.6px; }
      .minihead-muted{ font-size: 14.8px; }
      .grid{ gap: 10px; }
      .card{ padding: 15px 14px 13px; min-height: 0; }
      .divider{ margin: 9px 0 9px; }
      .icon{ width: 46px; height:46px; font-size: 24px; }
      .title{ font-size: 15px; }
      .text{ font-size: 13.5px; }
    }

    @media (hover:none) and (pointer:coarse){
      .card:hover{ transform:none; }
    }
    @media (prefers-reduced-motion: reduce){
      .minihead-title, .title-emoji, .icon::after{ animation:none !important; }
      .card{ transition:none !important; }
      }
	  
	  

    .titleRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin:0 0 14px;
      position:relative;
      z-index:1;
    }
    .titleLeft{
      gap:12px;
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }
    .titleText{
      font-weight: 950;
      letter-spacing: -.02em;
      font-size: 20px;
      color: rgba(255,255,255,.92);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

          70%{ opacity:0; transform: translate(-50%,-50%) scale(4.3); }
      100%{ opacity:0; transform: translate(-50%,-50%) scale(4.3); }
    }

    /* Mini duck (no block, sits on site background visually) */
    .miniDuckWrap{
      width:60px; height:60px;
      flex: 0 0 auto;
      position:relative;
    }
    .miniDuckWrap canvas{
      width:60px; height:60px;
      display:block;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
    }
    .miniDuckWrap::after{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius: 22px;
      background: radial-gradient(circle at 50% 50%, rgba(255,200,120,.12), transparent 62%);
      opacity:.0;
      transition: opacity .22s ease;
      pointer-events:none;
    }
    .panel:hover .miniDuckWrap::after{ opacity:.9; }

    /* Buttons */
    .btnRow{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 10px;
      position:relative;
      z-index:1;
    }
    a.glassBtn{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 14px 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.15);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 16px 48px rgba(0,0,0,.40);
      color: rgba(255,255,255,.92);
      text-decoration:none;
      font-weight: 950;
      letter-spacing: .01em;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      overflow:hidden;
      min-height: 54px;
      user-select:none;
      outline:none;
    }
    a.glassBtn::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(520px 180px at 30% 0%, rgba(255,210,120,.18), transparent 60%),
        radial-gradient(520px 180px at 80% 100%, rgba(120,190,255,.13), transparent 62%);
      opacity:.70;
      mix-blend-mode: screen;
      pointer-events:none;
      transition: opacity .18s ease;
    }
    a.glassBtn::after{
      content:"";
      position:absolute;
      inset:-40% -80%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
      transform: rotate(10deg) translateX(-40%);
      opacity:0;
      transition: opacity .18s ease, transform .45s ease;
      pointer-events:none;
    }
    a.glassBtn:hover{
      transform: translateY(-1px);
      border-color: rgba(255,200,120,.46);
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
      box-shadow:
        0 22px 70px rgba(0,0,0,.58),
        0 0 0 7px rgba(255,180,90,.16),
        0 0 42px rgba(255,160,80,.20);
    }
    a.glassBtn:hover::before{ opacity: .94; }
    a.glassBtn:hover::after{ opacity:1; transform: rotate(10deg) translateX(40%); }
    a.glassBtn:active{ transform: translateY(0px) scale(.99); }

    .ico{
      width: auto;
      border-radius: 12px;
      display:grid;
      place-items:center;
      background: #0000;
      position:relative;
      overflow:hidden;
      flex: 0 0 auto;
      box-shadow: none;
    }
    .ico::after{
      content:"";
      position:absolute;
      inset:-40%;
      background-size: 240% 100%;
      animation: grad 6s ease-in-out infinite;
      opacity:.55;
      transform: rotate(10deg);
      mix-blend-mode: screen;
      pointer-events:none;
    }
    .ico span{ position:relative; z-index:1; font-size: 18px; }
    a.glassBtn:hover .ico{
      transform: translateY(-1px) scale(1.02);
      border-color: rgba(255,210,120,.30);
      box-shadow: 0 18px 44px rgba(0,0,0,.40);
    }
    @keyframes grad{
      0%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
      100%{ background-position: 0% 50%; }
    }

    @media (max-width: 980px){
      .btnRow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .titleText{ font-size: 18px; }
    }
    @media (max-width: 560px){
      .wrap{ width: calc(100% - 18px); padding: 34px 0 44px; }
      .panel{ padding: 18px 16px 18px; border-radius: 22px; }
      .btnRow{ grid-template-columns: 1fr; }
      .cursor-glow{ display:none; }
      .miniDuckWrap{ width:56px; height:56px; }
      .miniDuckWrap canvas{ width:56px; height:56px; }
    }
    @media (prefers-reduced-motion: reduce){
      a.glassBtn, .ico::after, .panel::after, .dot::before, .dot::after{ transition:none !important; animation:none !important; }
    }
	

    .grain{
      position:fixed; inset:0; pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
      opacity:.08;
      mix-blend-mode: overlay;
      z-index:0;
    }

    .shimmerTitle{
      background: linear-gradient(90deg,
        rgba(255,210,120,.95),
        rgba(255,165,95,.95),
        rgba(255,220,155,.95),
        rgba(255,170,90,.95),
        rgba(255,210,120,.95)
      );
      background-size: 220% 100%;
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
      text-shadow: 0 16px 38px rgba(0,0,0,.55);
      animation: titleShimmer 4.2s ease-in-out infinite;
    }
    @keyframes titleShimmer{
      0%{ background-position: 0% 50%; filter: saturate(1.0); }
      50%{ background-position: 100% 50%; filter: saturate(1.15); }
      100%{ background-position: 0% 50%; filter: saturate(1.0); }
    }

    /* Categories (centered) */
    .cats{
      display:flex;
      justify-content:center;
      align-items:stretch;
      gap:10px;
      flex-wrap:wrap;
      padding: 8px 0 14px;
      margin: 0 0 10px;
    }

    .cat::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(520px 180px at 30% 0%, rgba(255,210,120,.14), transparent 62%),
        radial-gradient(520px 180px at 85% 120%, rgba(255,140,80,.10), transparent 64%);
      opacity:.44;
      mix-blend-mode: screen;
      pointer-events:none;
      transition: opacity .16s ease;
    }
    .cat .icon{ font-size: 17.5px; line-height: 1; margin-top: 1px; }
    .cat .text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
    .cat .name{
      font-weight: 950;
      letter-spacing: -.01em;
      font-size: 13px;
      color: rgba(255,255,255,.92);
      white-space:nowrap;
    }
    .cat .hint{
      font-size: 11px;
      color: rgba(255,255,255,.54);
      letter-spacing: .01em;
      white-space:nowrap;
    }

    .cat:hover{
      border-color: rgba(255,210,120,.26);
      box-shadow: 0 28px 102px rgba(0,0,0,.70), 0 0 0 7px rgba(255,180,90,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    }
    .cat:hover::before{ opacity:.68; }

.cat.active {
    border-color: rgba(255, 210, 120, .44);
    background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
    box-shadow: 0 30px 110px rgba(0, 0, 0, .72), 0 0 0 8px rgba(255, 180, 90, .12), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 210, 120, .14);
}
    
    /* Shell */
    .shell{
      position:relative;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      box-shadow: 0 26px 98px rgba(0,0,0,.66);
      overflow:hidden;
      padding: 14px;
    }
    .shell::before{
      content:"";
      position:absolute; inset:-85%;
      background: conic-gradient(from 210deg, rgba(255,210,120,.11), rgba(130,210,255,.085), rgba(255,120,210,.075), rgba(255,210,120,.11));
      filter: blur(50px);
      opacity:.22;
      animation: aura 11s ease-in-out infinite;
      pointer-events:none;
    }
    .shell::after{
      content:"";
      position:absolute; inset:0;
      border-radius: inherit;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 0 0 1px rgba(0,0,0,.16);
      pointer-events:none;
    }

    .viewport{
      position:relative;
      --navTop: 50%;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      overflow:hidden;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .track{
      display:flex;
      transition: transform .62s cubic-bezier(.18,1,.16,1);
      will-change: transform;
    }
    .page{
      flex: 0 0 100%;
      padding: 0;
      display:grid;
      gap: 12px;
      grid-template-columns: 1fr; /* 1 проект */
      align-items: stretch;
    }

    /* Offer card (no "crazy" hover animations) */
    .offer{
      position:relative;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(520px 210px at 22% 0%, rgba(255,210,120,.11), transparent 62%),
        radial-gradient(520px 210px at 92% 100%, rgba(130,210,255,.09), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 26px 90px rgba(0,0,0,.62);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height: 0;
      transition: border-color .20s ease, box-shadow .20s ease;
    }
    .offer::before{
      content:"";
      position:absolute; inset:-1px;
      border-radius: inherit;
      background: linear-gradient(120deg,
        rgba(255,210,120,.0),
        rgba(255,210,120,.22),
        rgba(130,210,255,.18),
        rgba(255,120,210,.14),
        rgba(255,210,120,.0)
      );
      opacity:0;
      filter: blur(10px);
      pointer-events:none;
      transition: opacity .20s ease;
    }
    .offer:hover{
      border-color: rgba(255,210,120,.24);
      box-shadow:
        0 34px 120px rgba(0,0,0,.72),
        0 0 0 9px rgba(255,180,90,.08);
    }
    .offer:hover::before{ opacity:.55; }

    .media{
      position:relative;
      height: 340px;
      display:block;
      text-decoration:none;
      outline:none;
      border-bottom: 1px solid rgba(255,255,255,.08);
      overflow:hidden;
      background: #0a0914;
    }

    /* Responsive media height (keep the hero image premium and readable) */
    @media (max-width: 900px){
      .media{ height: 290px; }
    }
    .media::before{
      content:"";
      position:absolute; inset:-30%;
      background: radial-gradient(55% 70% at 20% 20%, var(--a), transparent 62%),
                  radial-gradient(60% 70% at 86% 92%, var(--b), transparent 62%),
                  radial-gradient(60% 70% at 55% 55%, rgba(255,255,255,.085), transparent 62%);
      filter: blur(10px);
      opacity:.95;
      transition: opacity .22s ease;
    }
    .offer:hover .media::before{ opacity: 1; }

    .logoBubble{
      position:absolute;
      left: 16px; top: 16px;
      width: 46px; height:46px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 22px 86px rgba(0,0,0,.58);
      display:grid;
      place-items:center;
      font-weight: 1000;
      letter-spacing: -.02em;
      color: rgba(255,255,255,.92);
    }
    .logoBubble span{
      filter: drop-shadow(0 12px 20px rgba(0,0,0,.42));
    }

    .meta{
      padding: 20px 20px 18px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      flex:1 1 auto;
      position:relative;
      z-index:1;
    }
    .meta h3{
      margin:0;
      font-size: 20px;
      font-weight: 1000;
      letter-spacing: -.02em;
      line-height: 1.15;
    }
    .meta p{
      margin: 0 0 18px;
      color: rgba(255,255,255,.76);
      font-size: 15.8px;
      line-height: 1.46;
      max-width: 86ch;

      /* keep the layout premium: always enough room for 2–3 lines */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      min-height: calc(15.8px * 1.46 * 2.3);
    }

    .actions{
      margin-top: 0;
      display:flex;
      padding-top: 0px;
      gap:10px;
      flex-wrap:wrap;
    }

    .btn:active{
      border-color: rgba(255,210,120,.42);
      background: linear-gradient(180deg, rgba(255,210,120,.14), rgba(255,255,255,.03));
      box-shadow:
        0 22px 84px rgba(0,0,0,.72),
        0 0 0 9px rgba(255,180,90,.10),
        inset 0 1px 0 rgba(255,255,255,.14);
      transform: translateY(1px);
    }

    /* Nav buttons */
    .navBtn{
      position:absolute;
      top: var(--navTop, 50%);
      transform: translateY(-50%);
      width: 46px; height:46px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 22px 90px rgba(0,0,0,.60);
      display:grid;
      place-items:center;
      cursor:pointer;
      user-select:none;
      opacity: 0;
      transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
      z-index:3;
      border-top-color: rgba(255,255,255,.16);
    }
    .navBtn svg{ width:18px; height:18px; opacity:.92; }
    .navBtn.prev{ left: 30px; }
    .navBtn.next{ right: 30px; }
    .viewport:hover .navBtn,
    .navBtn:focus-visible{ opacity: 1; }
    .navBtn:hover{
      border-color: rgba(255,210,120,.22);
      box-shadow: 0 30px 112px rgba(0,0,0,.76), 0 0 0 8px rgba(255,180,90,.09);
    }
    .navBtn:active{ filter: brightness(.98); }

    /* Progress */
    .progress{
      position:absolute;
      left: 12px; right: 12px; bottom: 12px;
      height: 2px;
      border-radius: 999px;
      background: rgba(255,255,255,.085);
      overflow:hidden;
      z-index:2;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    }
    .progress .bar{
      height:100%;
      width:0%;
      border-radius: 999px;
      background: linear-gradient(90deg,
        rgba(255,210,120,.28),
        rgba(255,210,120,.92),
        rgba(255,170,95,.90),
        rgba(255,210,120,.34)
      );
      background-size: 220% 100%;
      box-shadow: 0 0 22px rgba(255,180,95,.12);
      transition: width .12s linear;
      animation: goldFlow 2.8s ease-in-out infinite;
    }
    @keyframes goldFlow{
      0%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
      100%{ background-position: 0% 50%; }
    }

    /* Mobile */
    @media (max-width: 720px){
      .cat{ min-width: 160px; }
      .head{ justify-content:center; text-align:center; }
      .head h2{ font-size: 28px; }
    }
    @media (max-width: 560px){
      .wrap{ width: calc(100% - 18px); padding: 36px 0 56px; }
      .head h2{ font-size: 27px; }
      .cursorGlow{ display:none; }
      .shell{ border-radius: 22px; padding: 12px; }
      .viewport{ border-radius: 18px; }
      .page{ padding: 12px; }
      .navBtn{ opacity:1; } /* taps */
      .navBtn.prev{ left: 30px; }
      .navBtn.next{ right: 30px; }
      .progress{ left: 10px; right: 10px; bottom: 10px; }
      .media{ height: 290px; }
      .meta{ padding: 14px; }
      .cats{ justify-content:center; }
    }

    @media (prefers-reduced-motion: reduce){
      .track, .offer, .cat, .btn, .head .mark::after, body::before, .shell::before{ transition:none !important; animation:none !important; }
      .progress .bar{ transition:none !important; }
    }

    @keyframes aura{
      0%{ transform: translate3d(-2%, -2%, 0) rotate(0deg); }
      50%{ transform: translate3d(2%, 1%, 0) rotate(10deg); }
      100%{ transform: translate3d(-2%, -2%, 0) rotate(0deg); }
    }
	
	
    /* Header */
    
    .head{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom: 14px;
      justify-content: space-between;
      text-align:center;
      align-content: center;
      flex-direction: row;
      flex-wrap: nowrap;
    }
    .head h2{
      margin:0;
      font-size: 32px;
      font-weight: 1000;
      letter-spacing: -.03em;
      line-height: 1.1;
    }
	
	/* top pill (search + progress) */
.pill{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
  position: sticky;
  top: 12px;
  z-index: 5;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.pill::before{content: ""; position:absolute; inset:-18px; border-radius: inherit;
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  z-index:-1;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius:999px;
}
.brand .name{font-weight: 850; letter-spacing:.08em; font-size: 12px; color: rgba(255,255,255,.78);}
.searchWrap{flex:1; display:flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 999px;
  background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10);
}
.searchIcon{width:18px; height:18px; opacity:.75}
.search{flex:1; border:none; outline:none; background:transparent; color: rgba(255,255,255,.92);
  font-size: 14px;
}
.search::placeholder{color: rgba(255,255,255,.42)}
.progressBox{display:flex; align-items:center; gap:12px; padding: 8px 10px; border-radius: 999px;
  background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10);
  min-width: 190px; justify-content: space-between;
}
.pct{font-weight: 900; font-size: 12px; color: rgba(255,255,255,.82); letter-spacing:.04em;}
.bar{height:10px; width:110px; border-radius: 999px; position:relative; overflow:hidden;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
}
.fill{position:absolute; inset:0; width:0%; border-radius:999px;
  background: linear-gradient(90deg, rgba(255,138,42,.95), rgba(255,198,120,.95));
  box-shadow: 0 0 18px rgba(255,138,42,.28);
}
/* liquid shimmer */
.fill::before{
  content:""; position:absolute; inset:-40% -20%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  transform: translateX(-40%);
  animation: wave 2.4s linear infinite;
  opacity:.55;
}
@keyframes wave{to{transform: translateX(80%);}}

.blocks{display:flex; flex-direction:column; gap:16px; margin-top: 22px;}
.block{border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10); box-shadow: var(--shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  overflow:hidden;
}
.blockHdr{display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px;
}
.blockLeft{display:flex; align-items:center; gap:12px;}
.icon{
  width:34px;
  height:34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  /* box-shadow: 0 10px 26px rgba(0,0,0,.25); */
}
.blockTitle{font-weight: 900; letter-spacing:-.01em; font-size: 18px;}
.blockMeta{color: var(--muted2); font-size: 12px;}
.items{padding: 0 12px 14px; display:flex; flex-direction:column; gap:10px;}

.item{border-radius: 18px; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.qRow{display:flex; align-items:center; gap:12px; padding: 14px 14px;
  cursor:pointer; user-select:none;
}
.badge{
  height: 31.6px;
  border-radius: 999px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .78);
  font-weight: 400;
  flex:0 0 auto;
}
.qText{flex:1; font-size: 16px; font-weight: 850; line-height:1.25;}
.qRight{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.tick{width:22px; height:22px; border-radius: 7px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.06);
}
.tick.on{border-color: rgba(255,138,42,.55); background: rgba(255,138,42,.18); color: rgba(255,220,180,.95);}
.chev{width:18px; height:18px; opacity:.8; transition: transform .25s ease;}
.item.open .chev{transform: rotate(180deg);}

.aRow{max-height:0px; overflow:hidden; transition: max-height .32s ease, opacity .22s ease; opacity:0;}
.item.open .aRow{opacity:1;}
.aInner{padding: 0 14px 16px 60px; color: rgba(255,255,255,.72); font-size: 14.8px; line-height:1.65;}
.aInner p{margin: 10px 0;}
.aInner b{color: rgba(255,255,255,.92); font-weight: 850;}
.aInner i{color: rgba(255,255,255,.78);}
.aInner ol{margin: 10px 0 10px 18px; padding:0;}
.aInner li{margin: 6px 0;}
.lock{display:none; padding: 10px 18px 18px; color: rgba(255,255,255,.64);}
.lockBox{border-radius: 18px; padding: 14px 14px; background: rgba(0,0,0,.25); border: 1px dashed rgba(255,255,255,.18);}
.lockBox b{color: rgba(255,255,255,.90)}

/* toast */
.toast{position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 18px; z-index: 30; width: min(520px, calc(100vw - 22px));
  border-radius: 18px; padding: 12px 12px;
  background: rgba(20,20,24,.55); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.toast .t{color: rgba(255,255,255,.86); font-size: 13.5px; line-height:1.35;}
.toast .btn{border:none; cursor:pointer; border-radius: 14px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,138,42,.95), rgba(255,170,92,.92));
  color: rgba(20,10,0,.92); font-weight: 900;
  box-shadow: 0 14px 30px rgba(255,138,42,.20);
}
.toast .btn:active{transform: translateY(1px);}

/* hide per-block count under headings */
.blockMeta{display:none !important;}

/* animated duck-orange gradient title */
.h1grad{
  display:inline-block;
  background: linear-gradient(90deg, var(--orange), var(--orange2), #ffd2a0, var(--orange));
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255,138,42,.18);
  animation: titleSheen 6.5s ease-in-out infinite;
}
@keyframes titleSheen{
  0%{background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0% 50%;}
}

/* confetti canvas */
#confetti{position: fixed; inset:0; pointer-events:none; z-index: 25; display:none;}

/* mobile */
@media (max-width: 720px){
  .container{padding: 24px 14px 70px;}
  .pill{flex-wrap:wrap; gap:10px; top: 10px;}
  .brand{width: 100%; justify-content:center;}
  .searchWrap{width: 100%;}
  .progressBox{width: 100%; min-width: 0; justify-content:space-between;}
  .bar{flex:1; width:auto;}
  .aInner{padding-left: 14px;}
  .qText{font-size: 15.5px;}
}
/* reduce ugly single-word wraps */
.qText, .aInner{word-break: normal; overflow-wrap: break-word; hyphens: none;}

/* убрать лишнюю линию между вопросом и ответом */
.item.open .qRow{ box-shadow:none !important; }
.aRow{ border-top: 0 !important; box-shadow:none !important; }

/* v12 tweaks */
.subtitleLine1{white-space:nowrap;}
.subtitleLine2{white-space:normal;}
@media (max-width: 860px){.subtitleLine1{white-space:normal;}}
.pct{display:flex;align-items:center;gap:10px;}
.pctLabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;}


.answer b, .answer strong{ font-weight:600; }

/* iOS / mobile stability fixes */
@supports (-webkit-touch-callout: none){
  body{ min-height:100dvh; height:auto; }
  .bg,.particles,.cursorGlow{ transform: translateZ(0); will-change: transform; }
  .glass, .pill, .blockCard, .qaCard{ -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
/* Ensure content always visible below the top bar on small screens */
@media (max-width: 520px){
  .wrap{ padding-bottom: 28px; }
  .blocks{ display:block !important; }
  .blockCard{ margin-top: 14px; }
}

/* --- Mobile/No-JS safe FAQ markup --- */
.blocks{display:flex;flex-direction:column;gap:18px; width:100%;}
.blockCard{border-radius:26px; padding:16px 16px 18px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);}
.blockHead{display:flex; align-items:center; gap:12px; padding:6px 4px 12px;}
.blockIcon{width:34px;height:34px;border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);}
.blockTitle{margin:0; font-size:18px; line-height:1.2; font-weight:700; letter-spacing:.2px;}
.qaList{display:flex;flex-direction:column; gap:12px;}
.qa{border-radius:22px; overflow:hidden; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10);}
.qaSum{list-style:none; cursor:pointer; user-select:none; display:flex; gap:12px; align-items:center;
  padding:14px 14px; font-size:16px; line-height:1.25;}
.qaSum::-webkit-details-marker{display:none;}
.numBadge{flex:0 0 auto; width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  font-weight:700; font-size:13px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);}
.qaQ{flex:1 1 auto; font-weight:650;}
.qaRight{flex:0 0 auto; display:flex; align-items:center; gap:10px; opacity:.9;}
.readMark{display:none; width:22px; height:22px; border-radius:8px; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; background:rgba(255,173,82,.18); border:1px solid rgba(255,173,82,.35); color:rgba(255,220,170,.95);}
.qa.isRead .readMark{display:flex;}
.chev{transition: transform .25s ease; font-size:16px; opacity:.85;}
.qa[open] .chev{transform: rotate(180deg);}
.qaBody{padding:2px 14px 14px; color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.6;}
.qaBody p{margin:10px 0;}
.qaOl{margin:10px 0 8px 20px;}
.qaUl{margin:10px 0 8px 20px;}
.qaBody strong, .qaBody b{font-weight:600; color:rgba(255,255,255,.92);}
.isSecret{display:none;}
.isSecret.isUnlocked{display:block;}
@media (max-width: 520px){
  .blockCard{border-radius:24px; padding:14px;}
  .blockTitle{font-size:16.5px;}
  .qaSum{padding:13px 12px; font-size:15px;}
  .numBadge{width:32px;height:32px;border-radius:11px;}
}
 /* liquid divider line */
  .divider{
    /* position:absolute; */
    /* left:0; */
    /* right:0; */
    /* top:-26px; */
    height:1px;
    opacity:.9;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,180,0,.0) 8%,
      rgba(255,180,0,.55) 18%,
      rgba(255,106,0,.75) 50%,
      rgba(255,211,107,.55) 82%,
      transparent);
    filter: drop-shadow(0 0 10px rgba(255,170,0,.25));
  }
  .divider::after{
    content:"";
    position:absolute; inset:-10px 0 -10px 0;
    background: radial-gradient(closest-side, rgba(255,180,0,.18), transparent 70%);
    opacity:.7;
    animation: dividerBreath 4.8s ease-in-out infinite;
  }
  @keyframes dividerBreath{
    0%,100%{transform:translateX(-1.5%); opacity:.45}
    50%{transform:translateX(1.5%); opacity:.85}
  }

  /* main glass card */
  .card{
    position:relative;
    border-radius:26px;
    /* padding:26px 26px 22px; */
    /* background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); */
    /* border:1px solid rgba(255,255,255,.12); */
    /* box-shadow: var(--shadow); */
    /* backdrop-filter: blur(16px) saturate(140%); */
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    /* overflow:hidden; */
    /* transform: translateZ(0); */
  }

  /* animated internal glow */
  .card::before{
    content:"";
    position:absolute;
    inset:-140px -140px auto auto;
    width:420px;
    height:420px;
    /* background: radial-gradient(circle at 30% 30%,
      rgba(255,179,0,.40),
      rgba(255,106,0,.22) 40%,
      rgba(0,170,255,.10) 68%,
      transparent 72%); */
    filter: blur(10px);
    opacity:.55;
    animation: orb 7s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes orb{
    0%,100%{transform:translate(10px,-10px) scale(1)}
    50%{transform:translate(-22px,18px) scale(1.06)}
  }
  /* subtle noise */
  .noise{
    pointer-events:none;
    position:absolute; inset:0;
    opacity:.08;
    mix-blend-mode: overlay;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  }

  /* header row */
  .top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }
  .left{
    display:flex; gap:14px; align-items:flex-start;
    min-width:0;
  }

  /* signal dot w waves */
  .beacon{
    position:relative;
    width:14px; height:14px;
    border-radius:99px;
    margin-top:7px;
    background: radial-gradient(circle at 30% 30%, var(--duck3), var(--duck2));
    box-shadow: 0 0 0 1px rgba(255,220,130,.25), 0 0 18px rgba(255,140,0,.45);
    flex:0 0 auto;
  }
  .beacon::before,
  .beacon::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:999px;
    border:1px solid rgba(255,180,0,.35);
    opacity:.0;
    animation: ping 2.1s ease-out infinite;
  }
  .beacon::after{ animation-delay: 1.05s; }
  @keyframes ping{
    0%{ transform:scale(.45); opacity:.0; }
    20%{ opacity:.75; }
    100%{ transform:scale(1.85); opacity:0; }
  }

  h2{
    margin:0;
    font-size:20px;
    line-height:1.15;
    letter-spacing:.2px;
    font-weight:750;
    background: linear-gradient(90deg, rgba(255,211,107,1), rgba(255,106,0,1), rgba(255,211,107,1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-size: 220% 100%;
    animation: titleSheen 6.5s ease-in-out infinite;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  @keyframes titleSheen{
    0%,100%{background-position: 0% 50%}
    50%{background-position: 100% 50%}
  }

  .sub b{
    font-weight:650;
    color: rgba(255,255,255,.86);
  }

  /* CTA button */
.cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: radial-gradient(120% 170% at 30% 20%, rgba(255, 211, 107, .38), rgba(255, 106, 0, .18) 35%, rgba(255, 255, 255, .06) 60%), linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
    color: rgba(255, 255, 255, .94);
    text-decoration: none;
    font-weight: 720;
    letter-spacing: .2px;
    box-shadow: 0 18px 60px rgba(255, 120, 0, .12), 0 10px 26px rgba(0, 0, 0, .40);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    transform: translateZ(0);
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    will-change: transform, box-shadow, filter;
    transition: transform .22s 
ease, box-shadow .22s 
ease, border-color .22s 
ease;
}
.cta .pill {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 750;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .18);
    color: rgba(255, 255, 255, .88);
    opacity: .95;
}
  .cta::before{
    content:"";
    position:absolute;
    inset:-2px;
    background: radial-gradient(closest-side at 25% 20%, rgba(255,255,255,.28), transparent 60%);
    opacity:.0;
    transition: opacity .22s ease;
    pointer-events:none;
  }
  .cta::after{
    content:"";
    position:absolute;
    width:120px; height:240px;
    left:-140px; top:-60px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent);
    transform: rotate(18deg);
    opacity:.55;
    animation: sweep 3.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes sweep{
    0%{ left:-140px; opacity:.0 }
    18%{ opacity:.65 }
    48%{ left:calc(100% + 140px); opacity:.0 }
    100%{ left:calc(100% + 140px); opacity:0 }
  }
  .cta:hover{
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(255,220,140,.32);
    box-shadow: 0 22px 80px rgba(255,120,0,.18), 0 12px 30px rgba(0,0,0,.45);
  }
  .cta:hover::before{opacity:.75}
  .cta:active{ transform: translateY(0px) scale(.995); }

  .cta .icon{
    width:18px;
    height:18px;
    display:inline-block;
    filter: drop-shadow(0 10px 14px rgba(255,140,0,.20));
    background: none;
    border: none;
  }
  .cta .pill{
    margin-left:2px;
    font-size:12px;
    font-weight:750;
    position: static;
    padding:4px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.88);
    opacity:.95;
  }

  /* bottom mini hint row */
  .bottom{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.62);
    font-size:13px;
    align-items:center;
  }
  .chips{display:flex; gap:10px; flex-wrap:wrap;}
  .chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .chip .dot{
    width:7px; height:7px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,211,107,1), rgba(255,106,0,1));
    box-shadow: 0 0 12px rgba(255,140,0,.35);
  }
  .chip .tg{ background: radial-gradient(circle at 30% 30%, rgba(100,210,255,1), rgba(42,171,238,1)); box-shadow:0 0 12px rgba(42,171,238,.35); }

  /* particles canvas */
  canvas#p{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.60;
    mix-blend-mode: screen;
  }

  /* small sparkle ornaments */
  .spark{
    position:absolute;
    inset:auto auto 14px 18px;
    width:22px;
    height:22px;
    opacity:.75;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.45));
    animation: floaty 3.8s ease-in-out infinite;
    pointer-events:none;
    background: none;
  }
  .spark.s2{ left:auto; right:18px; bottom:18px; opacity:.62; animation-duration:4.6s; }
  @keyframes floaty{
    0%,100%{ transform:translateY(0) rotate(0deg) }
    50%{ transform:translateY(-6px) rotate(12deg) }
  }

  /* mobile */
  @media (max-width: 820px){
    .wrap{ width: min(740px, calc(100% - 32px)); margin:54px auto; }
    .card{ padding:22px 18px 18px; border-radius:22px; }
    .top{ flex-direction:column; align-items:stretch; }
    .sub{ max-width: 100%; }
    .cta{ justify-content:center; width:100%; padding:13px 16px; border-radius:18px; }
    h2{ font-size:18px; white-space:normal; }
    .beacon{ margin-top:6px; }
    .bottom{ flex-direction:column; align-items:flex-start; }
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    .divider::after,.card::before,.beacon::before,.beacon::after,.cta::after,.spark{animation:none}
  }
  
  
    /* === Header === */
    @keyframes gradientFlow{
      0%{ background-position: 0% 50%; filter:saturate(1) brightness(1); }
      50%{ background-position: 100% 50%; filter:saturate(1.07) brightness(1.03); }
      100%{ background-position: 0% 50%; filter:saturate(1) brightness(1); }
    }

    .minihead{
      margin: 0 0 18px;
      max-width: 980px;
    }
    .minihead-title{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight: 950;
      letter-spacing: -.02em;
      line-height: 1.08;
      margin: 0 0 14px; /* more air */
      font-size: 34px;   /* +~20% vs 28px base */
      background: linear-gradient(90deg, #FFD58A, #FFB36B, #FF8A55, #FFD58A);
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 10px 30px rgba(255,170,90,.10);
      animation: gradientFlow 6s ease-in-out infinite;
      will-change: background-position, filter;
    }
    .title-emoji{
      display:inline-block;
      background: linear-gradient(90deg, #FFD58A, #FFB36B, #FF8A55, #FFD58A);
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientFlow 6s ease-in-out infinite;
      filter: drop-shadow(0 10px 24px rgba(255,170,90,.18));
      transform: translateY(1px);
    }
    .minihead-sub{
      display:flex;
      flex-direction:column;
      gap:10px;
      max-width: 820px;
    }
    .minihead-strong{
      font-weight: 850;
      color: rgba(255,255,255,.90);
      font-size: 16.5px; /* +~20% */
      line-height: 1.25;
    }
    .minihead-muted{
      color: rgba(255,255,255,.74);
      font-size: 15.5px; /* +~20% */
      line-height: 1.35;
    }
    .wrap.two {
    width: min(1160px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px 0 46px;
    position: relative;
    z-index: 1;
}
    /* === Cards grid === */
    .grid.two{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
    }

    .card{
      position:relative;
      border-radius: var(--r);
      border: 1px solid var(--stroke);
      background: linear-gradient(180deg, var(--glassA), var(--glassB));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 18px 55px rgba(0,0,0,.42);
      overflow:hidden;
      padding: 16px 16px 14px;
      min-height: 150px;
      transform: translateZ(0);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .card::before{
      content:"";
      position:absolute; inset:-2px;
      border-radius: calc(var(--r) + 2px);
      background:
        radial-gradient(600px 240px at 30% 0%, rgba(255,255,255,.12), transparent 55%),
        radial-gradient(520px 240px at 90% 60%, rgba(255,180,90,.12), transparent 60%),
        radial-gradient(520px 240px at 20% 90%, rgba(120,190,255,.10), transparent 65%);
      opacity:.85;
      pointer-events:none;
      mix-blend-mode: screen;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(255,200,120,.45);
      box-shadow:
        0 18px 60px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.08),
        0 0 0 6px rgba(255,180,90,.18),
        0 0 36px rgba(255,160,80,.22);
    }

    .top{ display:flex; align-items:center; gap:12px; margin-bottom: 10px; }
    .badge{ display:flex; align-items:center; gap:12px; min-width:0; }

    .icon{
      width: 52px;
      height:52px;
      border-radius: 16px;
      display:grid;
      place-items:center;
      font-size: 26px;
      line-height: 1;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,210,120,.10), rgba(0,0,0,.18));
      box-shadow: 0 16px 36px rgba(0,0,0,.28);
      user-select:none;
      position:relative;
      overflow:hidden;
    }
    /* unified subtle gradient animation on icon chip */
    .icon::after{
      content:"";
      position:absolute;
      inset:-40%;
      background: linear-gradient(90deg, rgba(255,213,138,.18), rgba(255,140,80,.14), rgba(120,190,255,.14), rgba(255,213,138,.18));
      background-size: 240% 100%;
      animation: gradientFlow 6s ease-in-out infinite;
      opacity:.55;
      transform: rotate(12deg);
      mix-blend-mode: screen;
      pointer-events:none;
    }
    .icon > span{ position:relative; z-index:1; }

    .title{
      font-weight: 900;
      font-size: 15.5px;
      letter-spacing: -.01em;
      line-height: 1.15;
      margin: 0;
      white-space: normal;
    }
    .divider{
      height: 1px;
      margin: 10px 0 10px;
      background: linear-gradient(90deg,
        rgba(255,255,255,0.00),
        rgba(255,255,255,0.16),
        rgba(255,210,120,0.20),
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.00)
      );
      opacity: .9;
    }
    .text{
      margin: 0;
      color: rgba(255,255,255,.78);
      line-height: 1.48;
      font-size: 13.6px;
    }

    /* Scroll reveal (safe) */
    .reveal{ opacity: 1; transform: none; filter: none; }
    /* Optional reveal polish (never hides content) */
    .reveal{
      transition: transform .55s ease, filter .55s ease;
      will-change: transform, filter;
    }
    .reveal.is-in{ transform: translateY(-1px); filter: saturate(1.02); }
    .reveal.is-in{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }

    /* Tap ripple */
    .ripple{
      position:absolute;
      border-radius: 999px;
      transform: translate(-50%,-50%) scale(0);
      background: radial-gradient(circle, rgba(255,210,120,.28), rgba(255,255,255,.10), rgba(255,255,255,0));
      pointer-events:none;
      width: 260px; height:260px;
      opacity:0;
      animation: ripple .55s ease-out forwards;
      mix-blend-mode: screen;
    }
    @keyframes ripple{
      0%{ transform: translate(-50%,-50%) scale(.15); opacity:0; }
      15%{ opacity:.9; }
      100%{ transform: translate(-50%,-50%) scale(1); opacity:0; }
    }

    
    /* === Premium micro-animations (firm gloss) === */
    .card{
      will-change: transform, box-shadow, border-color;
    }
    .card::after{
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 45%, transparent 60%);
    transform: translateX(-70%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    }
    .card:hover::after{ opacity: 1; }

    .card:hover{
      box-shadow:
        0 22px 75px rgba(0,0,0,.62),
        0 0 0 1px rgba(255,255,255,.10),
        0 0 0 7px rgba(255,180,90,.20),
        0 0 44px rgba(255,160,80,.26);
    }

    /* subtle "glass rim" that wakes up on hover */
    .card .rim{
      position:absolute;
      inset: 0;
      border-radius: var(--r);
      pointer-events:none;
      border: 1px solid rgba(255,255,255,.10);
      opacity: .55;
      transition: opacity .22s ease, border-color .22s ease;
    }
    .card:hover .rim{
      opacity: .95;
      border-color: rgba(255,210,120,.38);
    }

    /* icon chip reacts too */
    .card:hover .icon{
      transform: translateY(-1px) scale(1.02);
      box-shadow: 0 18px 40px rgba(0,0,0,.34);
    }
    .icon{ transition: transform .22s ease, box-shadow .22s ease; }

    /* text stays sharp: avoid blur on hover */
    .card, .card *{ filter:none !important; }
    .card:hover .title{ text-shadow: 0 10px 26px rgba(0,0,0,.25); }

    /* reduced motion support */
    @media (prefers-reduced-motion: reduce){
      .card::after, .card .rim{ transition:none !important; }
      .icon{ transition:none !important; }
    }
article.card.cashback:before {
    content: '';
    background: none;
}

    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    /* Mobile must be one-by-one vertically */
    @media (max-width: 768px){
      .grid{ grid-template-columns: 1fr; }
      .wrap{ width: calc(100% - 18px); padding: 32px 0 44px; }
      .cursor-glow{ display:none; }
    }
    @media (max-width: 560px){
      .minihead-title{ font-size: 30px; margin-bottom: 14px; }
      .minihead-strong{ font-size: 15.6px; }
      .minihead-muted{ font-size: 14.8px; }
      .grid{ gap: 10px; }
      .card{ padding: 15px 14px 13px; min-height: 0; }
      .divider{ margin: 9px 0 9px; }
      .icon{ width: 46px; height:46px; font-size: 24px; }
      .title{ font-size: 15px; }
      .text{ font-size: 13.5px; }
    }

    @media (hover:none) and (pointer:coarse){
      .card:hover{ transform:none; }
    }
    @media (prefers-reduced-motion: reduce){
      .minihead-title, .title-emoji, .icon::after{ animation:none !important; }
      .card{ transition:none !important; }
      }
	  
	  main.wrap.two section.grid.two .top .badge {
    background: none;
    border: 0;
    height: auto;
}
.divider {
    height: 1px;
    margin: 10px 0 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.16), rgba(255, 210, 120, 0.20), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.00));
    opacity: .9;
}
.cat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 22px 80px rgba(0, 0, 0, .52);
    cursor: pointer;
    user-select: none;
    transition: border-color .16s 
ease, box-shadow .16s 
ease, background .16s 
ease, transform .16s 
ease;
    position: relative;
    overflow: hidden;
    min-height: 54px;
    min-width: 230px;
}
.head.Title {
    justify-content: center;
}
.meta .actions .btn {
    flex: 1 1 190px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-weight: 950;
    letter-spacing: .01em;
    transition: border-color .16s 
ease, box-shadow .16s 
ease, background .16s 
ease;
    position: relative;
    overflow: hidden;
    min-height: 46px;
    user-select: none;
}
.card.utk {
position: relative;
    border-radius: 26px;
    padding: 26px 26px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    overflow: hidden;
    transform: translateZ(0);
}
.card.utk::before {
    content: "";
    position: absolute;
    inset: -140px -140px auto auto;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 179, 0, .40), rgba(255, 106, 0, .22) 40%, rgba(0, 170, 255, .10) 68%, transparent 72%);
    filter: blur(10px);
    opacity: .55;
    animation: orb 7s 
ease-in-out infinite;
    pointer-events: none;
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px !important;
    }
}

  .utko-next{
    width: min(1200px, calc(100% - 28px));
    position:relative;
    border-radius: calc(var(--r) + 8px);
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
    overflow:hidden;
    padding: 22px 22px 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin:  auto;
  }
  .utko-next:before{
    content:"";
    position:absolute; inset:-40%;
    background:
      radial-gradient(10px 10px at 20% 25%, rgba(255,255,255,.16), transparent 60%),
      radial-gradient(12px 12px at 55% 45%, rgba(255,255,255,.12), transparent 60%),
      radial-gradient(9px 9px at 70% 15%, rgba(255,255,255,.10), transparent 60%),
      radial-gradient(8px 8px at 85% 55%, rgba(255,255,255,.10), transparent 60%),
      radial-gradient(11px 11px at 35% 70%, rgba(255,255,255,.10), transparent 60%);
    opacity:.65;
    animation: floatDust 18s linear infinite;
    pointer-events:none;
  }
  @keyframes floatDust{
    0%{ transform: translate3d(0,0,0) rotate(0deg); }
    50%{ transform: translate3d(-1.5%,1.2%,0) rotate(8deg); }
    100%{ transform: translate3d(0,0,0) rotate(0deg); }
  }

  .utko-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 18px;
    margin-bottom: 14px;
    position:relative;
    z-index:2;
  }
  .utko-title{
    margin:0;
    font-size: clamp(22px, 3.2vw, 36px);
    line-height:1.1;
    font-weight: 760;
    color: rgba(247,185,92,0.98);
    text-shadow: 0 10px 26px rgba(0,0,0,.45);
  }
  .utko-sub{
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.35;
    max-width: 640px;
  }
  .utko-badge{
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 24px rgba(0,0,0,.30);
    color: rgba(255,255,255,.82);
    font-size: 12.5px;
    white-space:nowrap;
  }
  .dot{
    width:9px; height:9px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    box-shadow: 0 0 0 6px rgba(245,189,92,.10), 0 14px 22px rgba(0,0,0,.35);
    animation: pulseDot 1.8s ease-in-out infinite;
  }
  @keyframes pulseDot{
    0%,100%{ transform: scale(1); opacity:1;}
    50%{ transform: scale(1.18); opacity:.85;}
  }
section.utko-next .icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
    flex: 0 0 auto;
    transition: transform .35s 
cubic-bezier(.2, .9, .2, 1), border-color .35s;
}
section.utko-next .row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}
section.utko-next .spark {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 189, 92, .95), rgba(255, 147, 66, .95));
    opacity: .0;
    transform: scale(.6);
    transition: opacity .35s 
ease, transform .35s 
ease;
    box-shadow: 0 0 0 10px rgba(245, 189, 92, .10);
    pointer-events: none;
}
.twrap{min-width:0;max-width: 70%;}
  .t1{
    margin: 0;
    font-weight: 760 !important;
    font-size: 15.5px !important;
    line-height: 1.18 !important;
    letter-spacing: .1px;
    color: rgba(255,255,255,.94) !important;
  }
  .t2{
    margin: 6px 0 0;
    font-weight: 560;
    font-size: 13.5px;
    line-height: 1.18;
    color: rgba(255,255,255,.78);
  }
  /* one seamless "wallpaper" layer */
  .wallpaper{
    position:fixed;
    inset:-40vh -40vw;
    pointer-events:none;
    z-index:-2;
    filter: blur(0px);
    opacity:1;
    background:
      radial-gradient(900px 460px at 35% 25%, rgba(255,160,70,.16), transparent 60%),
      radial-gradient(840px 460px at 70% 35%, rgba(120,210,255,.10), transparent 62%),
      radial-gradient(860px 520px at 50% 75%, rgba(255,120,40,.10), transparent 65%),
      radial-gradient(520px 520px at 15% 75%, rgba(200,140,255,.08), transparent 62%);
  }
  .wallpaper::after{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity:.32;
    transform: translateZ(0);
    mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,1), rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 72%);
  }

  /* subtle particles like "ChatGPT sparkle", but calmer */
  #particles{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.55;
  }

  .wrap.utko-stat{
    width:min(1200px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 40px 0 28px;
  }

  .titlebar{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 0 20px;
  }

  .ai-live{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    user-select:none;
  }
  .ai-live .ai-chip{
    font-weight:900;
    letter-spacing:.08em;
    font-size:11px;
    padding:4px 7px;
    border-radius:999px;
    background: linear-gradient(135deg, rgba(255,184,80,.22), rgba(255,255,255,.06));
    border: 1px solid rgba(255,184,80,.22);
    color: rgba(255,226,180,.95);
  }
  .ai-live .ai-text{font-size:12px; font-weight:700; letter-spacing:.03em; color:rgba(235,243,255,.82);}
  .ai-live .ai-dots{display:flex; gap:4px; align-items:center;}
  .ai-live .ai-dots i{
    width:5px; height:5px; border-radius:50%;
    background: rgba(255,184,80,.9);
    box-shadow: 0 0 0 0 rgba(255,184,80,.6);
    animation: dotPulse 1.4s ease-in-out infinite;
  }
  .ai-live .ai-dots i:nth-child(2){animation-delay:.18s}
  .ai-live .ai-dots i:nth-child(3){animation-delay:.36s}
  @keyframes dotPulse{
    0%,100%{transform:translateY(0); opacity:.45}
    50%{transform:translateY(-2px); opacity:1}
  }

  .ai-scan{
    position:absolute;
    left:50%;
    bottom:-6px;
    transform:translateX(-50%);
    width: min(560px, 86vw);
    height:2px;
    border-radius:999px;
    background: linear-gradient(90deg, transparent, rgba(255,184,80,.7), transparent);
    opacity:.25;
    filter: blur(.2px);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    animation: scan 3.8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes scan{
    0%,100%{background-position:0% 50%; opacity:.18}
    50%{background-position:100% 50%; opacity:.35}
  }
  .ai-live.pulse{animation: aiPulse 700ms ease-out 1;}
  @keyframes aiPulse{
    0%{transform:translateY(-50%) scale(1); box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 0 rgba(255,184,80,.0)}
    40%{transform:translateY(-50%) scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 8px rgba(255,184,80,.14)}
    100%{transform:translateY(-50%) scale(1); box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 0 rgba(255,184,80,.0)}
  }

  .title{
    text-align:center;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0 0 6px;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height:1.05;
    background: linear-gradient(90deg, var(--duck1), var(--duck3), var(--duck2));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
    background-size: 220% 100%;
    animation: titleSheen 5.8s ease-in-out infinite;
  }
  @keyframes titleSheen{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }

  .sub{
    text-align:center;
    color:var(--muted);
    margin:0 auto 20px;
    max-width: 1200px;
    font-size: 14.2px;
    line-height:1.35;
  }

  @media (min-width: 980px){
    .sub{white-space:nowrap;}
  }

  .panel{
    position:relative;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .panel::before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(700px 260px at 50% 0%, rgba(255,160,70,.22), transparent 60%),
                radial-gradient(600px 260px at 0% 50%, rgba(120,210,255,.12), transparent 62%),
                radial-gradient(600px 260px at 100% 50%, rgba(200,140,255,.10), transparent 62%);
    opacity:.55;
    pointer-events:none;
  }
  .panel::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: translateX(-60%);
    animation: softScan 12s ease-in-out infinite;
    opacity:.25;
    pointer-events:none;
  }
  @keyframes softScan{
    0%,100%{transform: translateX(-60%)}
    50%{transform: translateX(60%)}
  }

  .panel-inner{ position:relative; padding: 18px 18px 14px; }

  .row{
    display:grid;
    gap: 12px;
    margin-bottom: 12px;
  }
  /* 3/5/4 columns depending */
  .row.row-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .row.row-5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
  .row.row-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

  .row-title{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    margin: 8px 2px 10px;
    color: rgba(255,255,255,.82);
    font-weight: 700;
    font-size: 13px;
    letter-spacing:.02em;
  }
  .row-title .hint{ color: var(--muted2); font-weight: 600; }
  .divider{
    height: 1px;
    margin: 6px 0 14px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  }

  .tile{
    position:relative;
    --accent: rgba(255,170,80,.95);
    --accent2: rgba(255,170,80,.20);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.12);
    padding: 12px 12px 11px;
    min-height: 74px;
    display:flex;
    gap: 10px;
    align-items:flex-start;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
    isolation:isolate;
  }
  .tile::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius: 18px;
    background:
      radial-gradient(380px 130px at 50% 0%, var(--accent2), transparent 62%),
      radial-gradient(320px 150px at 0% 45%, rgba(255,255,255,.08), transparent 68%),
      radial-gradient(320px 150px at 100% 45%, rgba(255,255,255,.06), transparent 68%);
    filter: blur(8px);
    opacity:0;
    transition: opacity .22s ease;
    z-index:-1;
  }

  .tile::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 18px;
    padding:1px;
    background: linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,.06), rgba(255,255,255,.18));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .65;
    pointer-events:none;
    z-index:0;
    transition: opacity .22s ease, background .22s ease;
  }

  @keyframes waveBorder{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 200% 50%; }
  }
  @media (hover:hover){
    .tile:hover{
      transform: translateY(-2px);
      border-color: var(--accent2);
      background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
      box-shadow:
        0 16px 56px rgba(0,0,0,.40),
        0 0 0 1px var(--accent2),
        0 0 30px var(--accent2);
    }
    .tile:hover::before{ opacity:1; }
    .tile:hover::after{
      opacity: .98;
      background: linear-gradient(110deg, rgba(255,255,255,.18), var(--accent2), rgba(255,255,255,.12), var(--accent2));
      background-size: 200% 100%;
      animation: waveBorder 2.6s linear infinite;
    }
  }

  .icon{
    width: 34px; height: 34px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    flex: 0 0 auto;
    background: radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
  }
  .icon svg{ width: 18px; height: 18px; fill: rgba(255,255,255,.88); }

  .meta{ min-width:0; }
  .label{
    font-size: 12.5px;
    color: var(--muted2);
    line-height:1.2;
    margin-top: 1px;
  }
  .value{
    display:flex;
    align-items:baseline;
    gap: 10px;
    margin-top: 4px;
    font-weight: 800;
    letter-spacing:-.02em;
  }
  .value .num{
    font-size: 18px;
    line-height:1.05;
    color: rgba(255,255,255,.93);
    white-space:nowrap;
  }
  .delta{
    font-size: 12.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    white-space:nowrap;
  }
  .delta.up{ color: rgba(53,208,127,.95); border-color: rgba(53,208,127,.25); background: rgba(53,208,127,.08); }
  .delta.down{ color: rgba(255,90,107,.95); border-color: rgba(255,90,107,.25); background: rgba(255,90,107,.08); }

  .linkish{
    color: rgba(255,255,255,.9);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.28);
    text-underline-offset: 3px;
    font-weight: 700;
  }

  .cta-wrap{
    display:flex;
    justify-content:center;
    padding: 14px 0 16px;
  }
  .cta{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,200,120,.30);
    background: linear-gradient(180deg, rgba(255,160,70,.18), rgba(255,120,40,.10));
    color: rgba(255,245,235,.96);
    font-weight: 900;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
    user-select:none;
  }
  .cta svg{ width: 18px; height: 18px; fill: rgba(255,255,255,.92); }
  .cta::before{
    content:"";
    position:absolute; inset:-10px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(255,170,80,.30), transparent 58%);
    opacity:.55;
    filter: blur(6px);
    pointer-events:none;
  }
  /* radio waves */
  .cta::after{
    content:"";
    position:absolute;
    inset: -18px;
    border-radius: 999px;
    border: 1px solid rgba(255,170,80,.28);
    opacity:.0;
    transform: scale(.92);
    pointer-events:none;
    animation: waves 2.2s ease-out infinite;
  }
  @keyframes waves{
    0%{opacity:.0; transform: scale(.92)}
    12%{opacity:.9}
    100%{opacity:0; transform: scale(1.18)}
  }
  @media (hover:hover){
    .cta:hover{
      transform: translateY(-1px) scale(1.01);
      border-color: rgba(255,210,130,.42);
      filter: saturate(1.08) brightness(1.05);
    }
    .cta:hover .phone{ animation: ring .9s ease-in-out infinite; }
  }
  @keyframes ring{
    0%,100%{ transform: rotate(0deg) }
    20%{ transform: rotate(-10deg) }
    40%{ transform: rotate(12deg) }
    60%{ transform: rotate(-8deg) }
    80%{ transform: rotate(8deg) }
  }

  .total{
    display:flex;
    justify-content:center;
    margin: 10px 0 6px;
  }
  .total .capsule{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.90);
    font-weight: 850;
  }
  .total .capsule .mini{
    width: 10px; height: 10px; border-radius: 999px;
    background: linear-gradient(180deg, var(--duck1), var(--duck2));
    box-shadow: 0 0 0 6px rgba(255,160,70,.08);
  }
  .total .capsule .n{ font-variant-numeric: tabular-nums; }

  /* responsiveness */
  @media (max-width: 980px){
    .wrap{ width: min(980px, calc(100vw - 32px)); padding: 32px 0 22px; }
    .row.row-5{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
  @media (max-width: 640px){
    .wrap{ width: calc(100vw - 22px); padding: 26px 0 18px; }
    .panel-inner{ padding: 14px 12px 12px; }
    .row.row-3{ grid-template-columns: 1fr; }
    .row.row-4{ grid-template-columns: 1fr 1fr; }
    .row.row-5{ grid-template-columns: 1fr 1fr; }
    .tile{ min-height: 70px; padding: 11px 11px 10px; }
    .value .num{ font-size: 17px; }
    .row-title{ font-size: 12.5px; }
    .sub{ font-size: 14px; }
  }

  /* keep block compact (fit close to one screen) */
  @media (min-height: 760px){
    .wrap{ padding-top: 34px; padding-bottom: 22px; }
  }

  .vip-hint{
    box-shadow:
      0 0 0 1px rgba(255,165,0,.22),
      0 0 24px rgba(255,165,0,.08);
  }
  .vip-hint:before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:18px;
    background: radial-gradient(500px 120px at 20% 0%, rgba(255,180,90,.22), transparent 60%);
    opacity:.55;
    pointer-events:none;
    mix-blend-mode:screen;
  }

  /* subtle cursor glow */
  #cursorGlow{
    position:fixed;
    left:0; top:0;
    width:340px; height:340px;
    border-radius:999px;
    pointer-events:none;
    z-index:10;
    opacity:0;
    transform: translate3d(-9999px,-9999px,0);
    background: radial-gradient(circle at 50% 50%, rgba(255,168,60,0.26), rgba(255,168,60,0.10) 38%, rgba(255,168,60,0) 72%);
    filter: blur(10px);
    mix-blend-mode: screen;
    transition: opacity .28s ease;
}
@media (hover:none), (pointer:coarse){
  #cursorGlow{ display:none; }
}

  /* iOS Safari can show seams with fixed backgrounds; this prevents tearing */
  @supports (-webkit-touch-callout: none){
    body{ background-attachment: scroll; }
  }
  
  

.wrap.otziv{
  min-height:100%;
  padding:34px 18px 44px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.shell{
  width:min(var(--maxw), calc(100vw - 36px));
  border-radius:34px;
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position:relative;
}
.shell::after{
  content:"";
  position:absolute; inset:0;
  border-radius:34px;
  background: radial-gradient(900px 260px at 50% 0%, rgba(255,190,110,.10), transparent 55%);
  pointer-events:none;
  mix-blend-mode:screen;
}

.header{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:start;
  padding:10px 10px 16px;
  position:relative;
  z-index:3;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  width:max-content;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
}
.h1{
  margin:10px 0 0;
  font-size:58px;
  line-height:1.02;
  letter-spacing:-.03em;
}
@media (max-width:760px){
  .h1{font-size:42px}
}

.controls{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  padding-top:6px;
}
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:650;
  font-size:14px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.btn:active{transform: translateY(0px) scale(.99)}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}

.progressWrap{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:10px;
}
.progress{
  width:260px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.progress > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  border-radius:999px;
  filter:saturate(1.05);
}
.counter{
  font-size:13px;
  color:var(--muted);
  min-width:40px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}
@media (max-width:760px){
  .progress{width:160px}
}

.stage{
  margin-top:4px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  padding:16px;
  position:relative;
  z-index:3;
}

.viewport{
  overflow:hidden;
  border-radius:22px;
}
.track{
  display:flex;
  width:100%;
  transform: translateX(0%);
  transition: transform .55s cubic-bezier(.2,.85,.2,1);
  will-change: transform;
}
.page{
  flex: 0 0 100%;
  padding: 2px;
}
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--gap);
}
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
}

.card{
  height: 270px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 16px 14px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(255,190,110,.14), transparent 60%),
    radial-gradient(420px 240px at 90% 10%, rgba(102,199,255,.12), transparent 62%);
  opacity:.6;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
}
@media (hover:none){
  .card:hover{transform:none}
}

.top{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap:12px;
  align-items:center;
  z-index:1;
}
.avatar{
  width:56px; height:56px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  display:grid;
  place-items:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.name{
  font-size:18px;
  font-weight:750;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.desc{
  margin-top:3px;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.bubbleWrap{
  margin-top:12px;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
}
.label{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 8px 2px;
}
.bubble{
  position:relative;
  flex:1;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px 14px 14px;
  overflow:auto;
  line-height:1.4;
  color: rgba(255,255,255,.90);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.bubble::before{
  content:"";
  position:absolute;
  top:-10px; left:20px;
  width:18px; height:18px;
  background: rgba(0,0,0,.22);
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  transform: rotate(45deg);
  border-top-left-radius:4px;
}
.text{
  white-space: pre-wrap;
  font-size:14px;
}
/* nicer scrollbars */
.bubble::-webkit-scrollbar{height:10px;width:10px}
.bubble::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:999px; border:3px solid rgba(0,0,0,.25)}
.bubble::-webkit-scrollbar-track{background:rgba(255,255,255,.05); border-radius:999px}

.dots{
  margin: 14px auto 0;
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.dot{
  width:7px; height:7px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.14);
  transition: transform .18s ease, background .18s ease;
}
.dot.active{
  width:16px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  border-color: rgba(255,255,255,.18);
}
/* compact on small screens */
@media (max-width:760px){
  .shell{padding:14px}
  .header{grid-template-columns:1fr;}
  .controls{justify-content:flex-start; flex-wrap:wrap}
  .progressWrap{margin-right:0}
  .stage{padding:14px}
  .card{height: 320px}
  .name{font-size:16px}
  .text{font-size:14px}
}

@keyframes glowPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.28; }
  50%{ transform:translate(-50%,-50%) scale(1.08); opacity:.34; }
}


@media (max-width: 760px){
  /* Make the whole thing actually fit on phones, shocking concept */
  body{padding:14px;}
  .wrap{width:100%; max-width: 720px; margin:0 auto;}
  .panel{border-radius:26px; padding:18px;}
  .topRow{flex-direction:column; align-items:flex-start; gap:14px;}
  .brandPill{margin-bottom:6px;}
  .h1{font-size:44px; letter-spacing:-.02em;}
  .controls{width:100%; justify-content:space-between; gap:10px; flex-wrap:wrap;}
  .progressWrap{order:3; width:100%; margin-left:0; margin-top:2px;}
  .progressLabel{font-size:12px; opacity:.9;}
  .progressBar{flex:1; min-width: 180px; height: 10px;}
  .pageTag{min-width:48px; text-align:right;}
  .navBtns{order:2; margin-left:auto;}
  .btn{padding:10px 12px; border-radius:14px; font-size:14px;}
  .carousel{margin-top:14px; padding:14px; border-radius:22px;}
  .viewport{border-radius:18px;}
  .slide{gap:14px; padding:14px;}
  .card{height:auto; min-height: 320px; padding:16px; border-radius:20px;}
  .cardTop{gap:12px;}
  .avatar{width:54px; height:54px;}
  .name{font-size:16px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .desc{font-size:12px; line-height:1.35; margin-top:4px;}
  .bubble{margin-top:14px; padding:14px 14px 16px; border-radius:18px;}
  .bubble p{font-size:14px; line-height:1.5;}
  .dots{margin-top:10px;}
  .hint{display:none;}
}