:root{
  --navy:#0b1b5c; --navy-deep:#061140; --navy-mid:#14297a;
  --gold:#f5c842; --gold-deep:#c98b17; --gold-soft:#ffe9a0;
  --red:#9c0f26; --red-hot:#c8182f; --white:#fff;
  --serif:'Cinzel','Trajan Pro',Georgia,serif;
  --sans:'Roboto','Segoe UI',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.avf-body{margin:0;background:var(--navy-deep);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.avf-page{position:relative;min-height:100vh;overflow:hidden;
  background:radial-gradient(ellipse 70% 45% at 50% 18%,var(--navy-mid) 0%,rgba(20,41,122,0) 70%),
             linear-gradient(180deg,#0c1d63 0%,#0a1855 45%,#050f3a 100%);
  isolation:isolate}
.avf-topborder{position:absolute;top:0;left:0;right:0;height:26px;z-index:3;
  background:linear-gradient(var(--gold-deep),var(--gold-deep)) 0 0/100% 2px no-repeat,
             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26'%3E%3Cpath d='M14 4 L22 13 L14 22 L6 13Z' fill='none' stroke='%23e3a92b' stroke-width='1.3'/%3E%3Ccircle cx='14' cy='13' r='2' fill='%23e3a92b'/%3E%3C/svg%3E") 0 0/28px 26px repeat-x}
.avf-bottomborder{position:absolute;bottom:0;left:0;right:0;height:22px;z-index:3;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 3 L19 11 L11 19 L3 11Z' fill='none' stroke='%23e3a92b' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/22px 22px repeat-x}

/* garlands */
.garland{position:absolute;top:0;z-index:2;width:56px;display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
.garland .strand{width:100%;flex:1;background:url(garland.svg) center top/56px auto repeat-y}
.garland .bell{width:30px;height:38px;margin-top:-4px;flex:none;animation:ring 3s ease-in-out infinite;transform-origin:50% 0}
.g-l1{left:2.5%;height:640px}.g-l2{left:8%;height:340px;animation-delay:-1.8s}
.g-r1{right:2.5%;height:640px;animation-delay:-3s}.g-r2{right:8%;height:340px;animation-delay:-.9s}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes ring{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* fireworks */
.fw{position:absolute;z-index:1;width:150px;height:150px;pointer-events:none;color:var(--gold);
  animation:burst 5s ease-out infinite;transform-origin:center;opacity:0}
.fw svg{width:100%;height:100%;overflow:visible}
@keyframes burst{0%{transform:scale(.15) rotate(0);opacity:0}12%{opacity:1}60%{opacity:.85;transform:scale(1) rotate(8deg)}100%{opacity:0;transform:scale(1.18) rotate(12deg)}}

/* mandalas */
.mandala{position:absolute;z-index:0;width:min(46vw,380px);aspect-ratio:1;background:url(mandala.svg) center/contain no-repeat;opacity:.75;animation:spin 90s linear infinite}
.m-bl{left:-130px;bottom:-110px}.m-br{right:-130px;bottom:-110px;animation-direction:reverse}
.m-ml{left:-190px;top:46%;width:min(38vw,300px);opacity:.5}.m-mr{right:-190px;top:46%;width:min(38vw,300px);opacity:.5;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* layout */
.avf-wrap{position:relative;z-index:4;max-width:780px;margin:0 auto;padding:58px 20px 70px;text-align:center}

.logo-card{display:block;width:min(100%,500px);margin:0 auto;background:#fff;border-radius:18px;padding:6px;
  border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(245,200,66,.18),0 12px 40px rgba(0,0,0,.45)}
.logo-card img{display:block;width:100%;height:auto;border-radius:12px}

.hello{margin:34px 0 0;font-family:var(--serif);font-weight:700;line-height:1;color:var(--gold)}
.hello .happy{display:flex;align-items:center;justify-content:center;gap:16px;font-size:clamp(2rem,6vw,3.2rem);letter-spacing:.04em}
.hello .happy i{display:block;width:clamp(36px,8vw,64px);height:14px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14' fill='none' stroke='%23f5c842' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 11 C16 11 14 2 26 4 C34 5 30 12 24 9 C20 7 24 3 28 5 M26 4 C40 2 46 11 62 7'/%3E%3C/svg%3E") center/contain no-repeat}
.hello .happy i:last-child{transform:scaleX(-1)}
.hello .big{display:block;margin-top:4px;font-size:clamp(3.2rem,13vw,7rem);font-weight:900;letter-spacing:.02em;
  background:linear-gradient(100deg,#c98b17 0%,#ffe27a 30%,#f5c842 45%,#fff4c2 52%,#f5c842 60%,#c98b17 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(90,50,0,.55)) drop-shadow(0 0 22px rgba(245,200,66,.25));
  animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,20%{background-position:120% 0}70%,100%{background-position:-60% 0}}

/* ribbons */
.ribbon{position:relative;display:block;margin:30px auto 0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.ribbon>svg{position:absolute;inset:0;width:100%;height:100%}
.ribbon .in{position:relative;z-index:1}
.ribbon-main{width:min(100%,690px);padding:30px 70px 34px}
.ribbon-main .t1{display:block;font-family:var(--serif);font-weight:900;font-size:clamp(2.2rem,8vw,4.4rem);line-height:1;color:var(--gold);text-shadow:0 3px 0 #6b3a05,0 0 18px rgba(245,200,66,.35)}
.ribbon-main .t2{display:block;margin-top:6px;font-family:var(--serif);font-weight:800;font-size:clamp(1.3rem,5vw,2.7rem);letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.ribbon-main .gem{position:absolute;top:50%;width:34px;height:34px;transform:translateY(-50%);z-index:1}
.ribbon-main .gem.l{left:6%}.ribbon-main .gem.r{right:6%}

.divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:30px auto 0;width:min(100%,400px)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep) 30%,var(--gold))}
.divider::after{transform:scaleX(-1)}
.divider svg{width:30px;height:24px;flex:none}

.tagline{margin:22px 0 0;font-weight:700;font-size:clamp(1.3rem,4.4vw,2rem);color:var(--gold)}

.features{list-style:none;margin:26px auto 0;padding:0;display:inline-flex;flex-direction:column;gap:20px;text-align:left}
.features li{display:flex;align-items:center;gap:22px;font-weight:600;font-size:clamp(1.25rem,4.2vw,2rem);line-height:1.15}
.ico{flex:none;width:clamp(68px,13vw,104px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--gold);background:radial-gradient(circle,#13286f,#0a1651);box-shadow:inset 0 0 0 5px #0a1651,inset 0 0 0 6px rgba(245,200,66,.5),0 0 16px rgba(245,200,66,.2)}
.ico svg{width:52%;height:52%}

.ribbon-date{width:min(100%,560px);padding:22px 70px 24px;margin-top:26px}
.date-row{display:flex;align-items:center;justify-content:center;gap:18px;text-align:left}
.date-row svg{width:58px;height:58px;flex:none}
.date-row small{display:block;font-weight:500;font-size:clamp(1rem,3.4vw,1.5rem)}
.date-row strong{display:block;font-weight:700;font-size:clamp(1.5rem,5.4vw,2.5rem);color:var(--gold-soft);line-height:1.1}
.count{display:flex;justify-content:center;gap:10px;margin-top:14px}
.count span{min-width:60px;padding:6px 8px 5px;border:1px solid rgba(245,200,66,.6);border-radius:8px;background:rgba(0,0,0,.28);font-weight:700;font-size:1.3rem;line-height:1}
.count em{display:block;margin-top:3px;font-style:normal;font-weight:500;font-size:.7rem;color:var(--gold-soft)}

.cta{display:inline-flex;align-items:center;gap:16px;margin-top:30px;padding:12px 14px 12px 40px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:clamp(1.2rem,4vw,1.9rem);color:#0b1b5c;border:2px solid #fff3b0;
  background:linear-gradient(180deg,#ffe277,#e8a720 55%,#f5c842);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 0 rgba(245,200,66,.6);
  animation:pulse 2.4s ease-out infinite;transition:transform .2s}
.cta:hover{transform:translateY(-2px) scale(1.02)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.cta .arr{width:46px;height:46px;border-radius:50%;background:#0b1b5c;display:grid;place-items:center;flex:none}
.cta .arr svg{width:22px;height:22px}
@keyframes pulse{0%{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 0 rgba(245,200,66,.55)}70%,100%{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 22px rgba(245,200,66,0)}}

.site{display:inline-flex;align-items:center;gap:12px;margin-top:22px;color:#fff;text-decoration:none;font-weight:500;font-size:clamp(1.1rem,3.6vw,1.7rem)}
.site svg{width:36px;height:36px}

/* diyas */
.diya{position:absolute;z-index:3;width:min(24vw,215px);bottom:250px}
.diya.l{left:-1%}.diya.r{right:-1%}
.diya svg{width:100%;height:auto;overflow:visible}
.flame{transform-origin:100px 118px;animation:flicker 1.7s ease-in-out infinite}
.diya.r .flame{animation-delay:-.8s}
.glow{animation:glowp 1.7s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}20%{transform:scale(.94,1.06) skewX(3deg)}45%{transform:scale(1.04,.96) skewX(-3deg)}70%{transform:scale(.97,1.04) skewX(2deg)}}
@keyframes glowp{0%,100%{opacity:.75}50%{opacity:1}}

@media (max-width:900px){
  .g-l2,.g-r2{display:none}.garland{width:42px}.garland .strand{background-size:42px auto}.g-l1,.g-r1{height:520px;left:1%}.g-r1{left:auto;right:1%}
  .diya{display:none}
  .ribbon-main{padding:24px 46px 26px}.ribbon-date{padding:18px 46px 20px}
  .ribbon-main .gem{width:24px;height:24px}
  .features li{gap:14px}
}
@media (max-width:480px){
  .avf-wrap{padding-top:50px}
  .features{gap:14px}.date-row svg{width:42px;height:42px}
  .cta{padding-left:26px;gap:10px}.cta .arr{width:38px;height:38px}
  .count span{min-width:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fw{opacity:.55}
}