@font-face{
  font-family:'Benzin';
  src:url('assets/fonts/benzin-medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{ --bg:#2c2e38; --bg3:#3a3c46; --pink:#fb2a6b; }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:'Manrope',sans-serif;
  background:var(--bg);
  background:
    radial-gradient(440px 560px at -12% 14%, rgba(58,60,70,.5), transparent 60%),
    radial-gradient(520px 560px at 112% 52%, rgba(58,60,70,.45), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

.page{
  position:relative;
  max-width:414px;
  margin:0 auto;
  padding:66px 26px 50px;
  min-height:100%;
  overflow-x:clip;
}
.page::before{
  content:"";
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100lvh;
  background:url('assets/img/dh-pattern.png') center 195px / 350% auto no-repeat;
  opacity:.04;
  pointer-events:none;
  z-index:0;
}
.page > *{ position:relative; z-index:1; }

.hero{ position:relative; }
.hero-spark{ width:21px; height:21px; margin-bottom:13px; }
.headline{ color:#f4f4f4; font-size:16px; line-height:22px; font-weight:400; letter-spacing:0; max-width:362px; text-wrap:balance; }
.headline b{ font-weight:inherit; color:inherit; }

.badge{ position:absolute; top:115px; right:-5px; width:79px; height:79px; z-index:2; }
.badge svg{ width:100%; height:100%; overflow:visible; }
.badge .spin{ transform-box:fill-box; transform-origin:center; animation:spin 22s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.badge-star{ transform-box:fill-box; transform-origin:center; }

.logo-svg{ margin-top:110px; display:flex; justify-content:center; }
.logo-svg svg{ width:280px; height:auto; display:block; }

.social-row{ margin-top:72px; display:flex; justify-content:center; gap:12px; }
.soc{ width:68px; height:68px; display:block; position:relative; isolation:isolate; border-radius:50%; box-shadow: 0 12px 20px rgba(0,0,0,.4); }
.soc svg{ width:100%; height:100%; display:block; position:relative; z-index:1; }
.soc::before{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow: inset 0 4px 1.5px -2.5px rgba(255,255,255,.75), inset 0 -4px 1.5px -2.5px rgba(255,255,255,.65); pointer-events:none; z-index:2; }
.soc::after{ content:""; position:absolute; inset:12px; border-radius:50%; box-shadow: 0 0 6px 2px rgba(0,0,0,.4); pointer-events:none; z-index:0; }

.cards{ margin:46px -26px 0; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.card-wrap svg{ width:100%; height:auto; display:block; }
.card-wrap:nth-child(1){ width:85.33%; margin-left:7.47%; }
.card-wrap:nth-child(2){ width:92.27%; margin-left:15%; }
.card-wrap:nth-child(3){ width:100%; margin-left:0; }

.tw{ transform-box:fill-box; transform-origin:center; }
.tw-b{ animation:twinkle 4.6s ease-in-out infinite; animation-delay:1.1s; }
/* card 1 white star — multi-layer SVG glow (CSS filter on SVG children is broken in Safari iOS + Chrome with clip-path ancestors) */
.shine-halo{ animation:starGlow 5s ease-in-out infinite; }
@keyframes starGlow{
  0%,100%{ opacity:.25; }
  50%{ opacity:.9; }
}
@keyframes twinkle{ 0%,100%{ opacity:.5; transform:scale(.74); } 50%{ opacity:1; transform:scale(1.16); } }

/* card 2 — subtle glossy light sweep + gentle bag rock */
.glare{ transform-box:fill-box; animation:glare 5.6s ease-in-out infinite; }
@keyframes glare{ 0%{ transform:translateX(0); } 48%{ transform:translateX(560px); } 100%{ transform:translateX(560px); } }
.bagSwing{ transform-box:fill-box; transform-origin:62% 22%; animation:bagSwing 3.4s ease-in-out infinite; }
@keyframes bagSwing{ 0%,100%{ transform:rotate(-2.6deg); } 50%{ transform:rotate(2.6deg); } }

/* card 3 — swing */
.swing{ transform-box:fill-box; transform-origin:50% 4%; animation:swing 3.2s ease-in-out infinite; }
@keyframes swing{ 0%,100%{ transform:rotate(-2.4deg); } 50%{ transform:rotate(2.4deg); } }

.reveal{ opacity:0; transform:translateY(48px) scale(.965); }
.reveal.in{ opacity:1; transform:translateY(0) scale(1); transition:opacity .85s ease, transform 1s cubic-bezier(.16,.84,.3,1); }

@media (prefers-reduced-motion: reduce){
  .spin,.tw,.badge-star,.glare,.swing,.bagSwing,.shine-halo{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}

.footer{ margin-top:60px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.footer h3{ color:#fff; font-family:'Benzin',sans-serif; font-weight:500; font-size:12px; line-height:normal; letter-spacing:0; text-transform:uppercase; }
.footer-icons{ display:flex; gap:16px; }
.soc-sm{ width:30px; height:30px; display:block; }
.soc-sm svg{ width:100%; height:100%; display:block; }