@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/outfit-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/outfit-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.yil-body, .yil-body button, .yil-body input { font-family: "Outfit", "Hanken Grotesk", sans-serif; }
.yil h1, .yil-card h2, .yil-sum-t { font-family: "Fraunces", "Bodoni Moda", serif; }
.yil h1, .yil-card h2 { font-weight: 700; }
.yil-body { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100vh; background: #050b16; }
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora::before { content: ""; position: absolute; inset: -10px; opacity: .5; filter: blur(10px) saturate(1.4); will-change: transform;
  --stripe: repeating-linear-gradient(100deg, #050b16 0%, #050b16 7%, transparent 10%, transparent 12%, #050b16 16%);
  --aur: repeating-linear-gradient(100deg, #f0c36a 10%, #1fa37a 15%, #6c4ad8 20%, #e0679a 25%, #3b82f6 30%);
  background-image: var(--stripe), var(--aur); background-size: 300%, 200%; background-position: 50% 50%, 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  animation: aurora 40s linear infinite; }
.aurora::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 100%, rgba(240,195,106,.12), transparent 60%); }
@keyframes aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
@media (prefers-reduced-motion: reduce) { .aurora::before { animation: none; } }

.yil { position: relative; z-index: 1; max-width: 560px; min-height: 100vh; margin: 0 auto; padding: 24px 18px 70px; display: flex; flex-direction: column; }
.yil-back { align-self: flex-start; color: var(--gold); text-decoration: none; font-size: 14px; opacity: .85; margin-bottom: 8vh; }
.step { display: none; flex-direction: column; animation: stepIn .45s cubic-bezier(.2,.8,.2,1); }
.step.on { display: flex; }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.yil h1 { font: 600 clamp(46px, 12vw, 78px)/1 var(--serif); color: #fff3d6; margin: 8px 0 16px; letter-spacing: -.01em; }
.yil h1 em { color: var(--gold); font-style: italic; }
.yil-lead { font-size: 17px; line-height: 1.55; opacity: .8; margin: 0 0 30px; max-width: 42ch; }

.yil-cta { align-self: flex-start; padding: 16px 30px; border: 0; border-radius: 999px; font-weight: 600; font-size: 16px; font-family: inherit; color: #1a1405; cursor: pointer;
  background: linear-gradient(135deg, #ffe3a0, #f0c36a 55%, #d9a441); box-shadow: 0 10px 40px -10px rgba(240,195,106,.7), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .2s, box-shadow .2s; }
.yil-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(240,195,106,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.yil-ghost { align-self: flex-start; margin-top: 22px; padding: 10px 4px; background: none; border: 0; color: var(--gold); font: inherit; font-size: 14px; cursor: pointer; opacity: .8; }
.yil-ghost:hover { opacity: 1; }

.yil-prog { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.yil-bar { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #1fa37a, #f0c36a); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.yil-count { margin: 12px 0 18px; font-size: 13px; letter-spacing: .18em; color: var(--gold); opacity: .85; }

.yil-card { position: relative; padding: 38px 26px 26px; border-radius: 26px; background: rgba(9, 17, 32, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); animation: cardIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes cardIn { from { opacity: 0; transform: translateX(26px) scale(.98); } to { opacity: 1; transform: none; } }
.yil-card.back { animation-name: cardBack; }
@keyframes cardBack { from { opacity: 0; transform: translateX(-26px) scale(.98); } to { opacity: 1; transform: none; } }
.yil-card.glow::before { content: ""; position: absolute; inset: -1px; border-radius: 27px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from calc(var(--a, 0) * 1deg), #f0c36a, #1fa37a, #6c4ad8, #e0679a, #f0c36a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; transition: opacity .3s; }
.yil-card.glow:hover::before { opacity: 1; }
.yil-card h2 { font: 600 clamp(26px, 6.5vw, 36px)/1.2 var(--serif); color: #fff3d6; margin: 0 0 34px; min-height: 3.6em; display: flex; align-items: center; }

.yil-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yil-choice button { padding: 22px 10px; border-radius: 18px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff3d6; font-weight: 600; font-size: 20px; font-family: inherit; cursor: pointer; transition: transform .15s, background .2s, border-color .2s, box-shadow .2s; }
.yil-choice button:hover { transform: translateY(-3px); }
.yil-choice .yes:hover, .yil-choice .yes.sel { background: linear-gradient(135deg, #ffe3a0, #f0c36a); color: #1a1405; border-color: #f0c36a; box-shadow: 0 12px 34px -12px rgba(240,195,106,.8); }
.yil-choice .no:hover, .yil-choice .no.sel { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.yil-choice button:active { transform: scale(.97); }

.yil-name { display: block; margin: 6px 0 22px; font-size: 14px; opacity: .9; }
.yil-name input { display: block; width: 100%; margin-top: 8px; padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--gold-line); background: rgba(9,17,32,.7); color: #fff3d6; font: inherit; font-size: 17px; }
.yil-name input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(240,195,106,.18); }
.yil-sum-t { margin: 0 0 10px; font-size: 13px; opacity: .7; }
.yil-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.yil-sum button { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: rgba(255,243,214,.7); font: inherit; font-size: 13px; cursor: pointer; }
.yil-sum button.on { background: rgba(240,195,106,.18); border-color: var(--gold); color: #ffe3a0; }
.yil-sum button.on::before { content: "\2713\00a0"; }
.yil-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.yil-actions .yil-ghost { margin: 0; }
.yil-out { margin-top: 34px; text-align: center; }
.yil-out .yil-cta { align-self: center; margin-top: 4px; }
.yil-out .cert-img { margin-bottom: 20px; }
.yil-link { display: inline-block; margin-top: 6px; color: var(--gold); font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.yil-name input.err { border-color: #e0679a; box-shadow: 0 0 0 4px rgba(224,103,154,.2); }
.yil-lead, .yil-sum-t { opacity: .92; } .yil-name { opacity: 1; color: #fff3d6; font-size: 15px; } .yil-sum button { color: #e9dfc8; background: rgba(255,255,255,.08); } .yil-card h2, .yil h1 { text-shadow: 0 2px 18px rgba(0,0,0,.7); } .aurora::before { opacity: .38; }
.yil { max-width: 720px; }
#yGroups { display: grid; gap: 14px; margin: 6px 0 28px; }
.yg { --c: 240,195,106; padding: 16px 16px 18px; border-radius: 22px; background: linear-gradient(160deg, rgba(var(--c),.10), rgba(9,17,32,.7) 60%); border: 1px solid rgba(var(--c),.28); backdrop-filter: blur(10px); }
.yg h3 { margin: 0 0 12px; font: 600 13px var(--sans, inherit); letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--c)); }
.g-love { --c: 244,114,160; } .g-life { --c: 52,211,153; } .g-fun { --c: 167,139,250; } .g-money { --c: 96,165,250; } .g-body { --c: 251,191,36; }
.yg-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.yg-chips button { padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(var(--c),.35); background: rgba(var(--c),.07); color: #f4ecd8; font: 500 15px inherit; font-family: inherit; cursor: pointer; transition: transform .15s, background .2s, box-shadow .2s, color .2s; }
.yg-chips button:hover { transform: translateY(-2px); background: rgba(var(--c),.18); }
.yg-chips button.on { background: linear-gradient(135deg, rgba(var(--c),1), rgba(var(--c),.72)); color: #130d02; border-color: rgb(var(--c)); font-weight: 600; box-shadow: 0 8px 24px -8px rgba(var(--c),.8); }
.yg-chips button.on::before { content: "\2713\00a0"; }
.yil-count { margin: 12px 0 20px; }
.yil-sh-t { margin: 26px 0 10px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.yil-share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sh { padding: 12px 20px; border-radius: 999px; border: 0; font-weight: 600; font-size: 15px; font-family: inherit; color: #fff; cursor: pointer; text-decoration: none; transition: transform .15s, filter .2s; }
.sh:hover { transform: translateY(-2px); filter: brightness(1.12); }
.sh.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.sh.tw { background: #111; border: 1px solid rgba(255,255,255,.35); }
.sh.fb { background: #1877f2; }
.sh.more { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); }
.yil-sh-n { margin: 14px auto 0; max-width: 40ch; font-size: 13px; opacity: .85; }
.yil h1, .yil-card h2 { font-family: "Fraunces", serif !important; font-weight: 700; } .yil h1 em { font-weight: 800; }

@media (max-width: 760px), (pointer: coarse) { .aurora::before { animation: none; filter: none; opacity: .32; will-change: auto; } .yil-card, .yg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .yil-card { background: rgba(9,17,32,.92); } .yg { background: linear-gradient(160deg, rgba(var(--c),.12), rgba(9,17,32,.92) 60%); } .yil-cta, .yg-chips button.on { box-shadow: none; } .step, .yil-card { animation-duration: .25s; } }
.yil-body { -webkit-tap-highlight-color: transparent; } .yil-choice button, .yg-chips button, .yil-cta { touch-action: manipulation; }