/* =====================================================================
   ALAYN LUXE — Dark-fantasy layer
   Midnight-plum atmosphere, aurora haze, a CSS-only starfield, glass cards,
   champagne-gold gradients and crescent ornaments. GPU-cheap: no runtime JS,
   no large blur filters; animations stop for reduced motion and "anim-none".
   ===================================================================== */
:root {
  --plum: #2a1640; --amethyst: #9b6ce0; --rose: #e88bb8; --aurora-a: rgba(155,108,224,.22); --aurora-b: rgba(232,139,184,.14); --aurora-c: rgba(63,181,154,.08);
  --gold-grad: linear-gradient(135deg, #F7E3B0 0%, #E7C27D 38%, #C9974E 62%, #F3D9A4 100%);
  --glass: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  --font-deco: 'Cinzel', var(--font-display);
  --radius-card: 18px;
}
body { background:
  radial-gradient(1200px 700px at 12% -10%, var(--aurora-a), transparent 60%),
  radial-gradient(900px 600px at 100% 20%, var(--aurora-b), transparent 60%),
  radial-gradient(1000px 800px at 40% 120%, var(--aurora-c), transparent 60%),
  var(--bg); background-attachment: fixed; }
/* starfield: two tiled layers of tiny radial-gradient stars, gently twinkling */
body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-repeat: repeat; }
body::before { background-image:
  radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.75), transparent 60%), radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1.5px 1.5px at 260px 160px, rgba(243,217,164,.8), transparent 60%), radial-gradient(1px 1px at 330px 40px, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(1px 1px at 80px 230px, rgba(255,255,255,.45), transparent 60%), radial-gradient(1.2px 1.2px at 210px 280px, rgba(232,139,184,.6), transparent 60%);
  background-size: 360px 320px; opacity: .55; animation: twinkle 7s ease-in-out infinite alternate; }
body::after { background-image:
  radial-gradient(1px 1px at 60px 120px, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.4px 1.4px at 300px 260px, rgba(243,217,164,.7), transparent 60%),
  radial-gradient(1px 1px at 420px 60px, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 500px 330px, rgba(155,108,224,.8), transparent 60%);
  background-size: 560px 420px; opacity: .35; animation: twinkle 11s ease-in-out infinite alternate-reverse; }
@keyframes twinkle { from { opacity: .2; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
body.anim-none::before, body.anim-none::after { animation: none; }

/* typography accents */
.eyebrow { font-family: var(--font-deco); font-weight: 500; letter-spacing: .28em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-flex; align-items: center; gap: .8em; }
.section-head .eyebrow::before, .section-head .eyebrow::after { content: '✦'; font-size: .7em; color: var(--gold); -webkit-text-fill-color: var(--gold); opacity: .7; }
h1, h2 { text-wrap: balance; }
.section-head h2, .page-hero h1 { background: linear-gradient(180deg, #fff 0%, var(--text) 45%, #d9c6e6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head h2 em, .hero h1 em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* crescent-and-star ornament replaces the plain rule */
.rule { width: 160px; height: 14px; border: 0; margin: 16px auto; background:
  radial-gradient(circle at 50% 50%, var(--gold) 0 2.5px, transparent 3px),
  linear-gradient(90deg, transparent, rgba(231,194,125,.7) 40%, transparent 46%, transparent 54%, rgba(231,194,125,.7) 60%, transparent) center / 100% 1px no-repeat; }

/* buttons: luminous champagne gradient with a passing shimmer */
.btn { background: var(--gold-grad); border-color: transparent; color: #1a0d22; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px -14px rgba(231,194,125,.55); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.btn:hover { background: var(--gold-grad); color: #12081a; box-shadow: 0 14px 40px -12px rgba(231,194,125,.7), 0 0 0 1px rgba(243,217,164,.5); }
.btn:hover::before { transform: translateX(120%); }
.btn-outline { background: rgba(255,255,255,.02); color: var(--text); border-color: rgba(231,194,125,.4); box-shadow: none; backdrop-filter: blur(6px); }
.btn-outline:hover { background: rgba(231,194,125,.08); color: var(--gold2); border-color: var(--gold); box-shadow: 0 0 30px -10px rgba(155,108,224,.6); }
.btn-ghost, .btn-ghost:hover { background: transparent; box-shadow: none; }
.btn-ghost::before { display: none; }
.p-quick .btn { background: rgba(20,11,31,.82); color: var(--text); border-color: rgba(231,194,125,.3); box-shadow: none; }
.p-quick .btn:hover { background: var(--gold-grad); color: #12081a; }
.chip { border-radius: 999px; background: rgba(255,255,255,.02); }

/* header: glassy midnight */
.site-header { border-bottom-color: rgba(231,194,125,.12); }
.site-header.scrolled { box-shadow: 0 12px 40px -24px rgba(155,108,224,.6); }
.main-nav { border-top-color: rgba(231,194,125,.08); }
.main-nav > ul > li > a { font-family: var(--font-body); letter-spacing: .22em; }
.main-nav > ul > li > a::after { background: var(--gold-grad); height: 1.5px; }
.dropdown { background: rgba(20,11,31,.96); border-radius: 14px; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(155,108,224,.12); backdrop-filter: blur(16px); }
.announce { background: var(--announce-bg, var(--gold-grad)); }
.demo-ribbon { background: repeating-linear-gradient(45deg, #1a0d26, #1a0d26 10px, #22102f 10px, #22102f 20px); }

/* page loader with rising crescent */
.page-loader { background: radial-gradient(600px 400px at 50% 40%, #241238, var(--bg)); }
.page-loader .moon { display: block; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px; animation: float 3s ease-in-out infinite; }
.page-loader .mark { font-family: var(--font-deco); }
.page-loader .bar::after { background: var(--gold-grad); }
@keyframes float { 50% { transform: translateY(-6px); } }

/* hero: plum veil and soft text glow */
.hero { background: var(--bg); }
.hero-slide::after { background: linear-gradient(90deg, rgba(11,6,18,calc(var(--ov,.35) + .45)) 0%, rgba(11,6,18,calc(var(--ov,.35)*.5)) 55%, transparent 100%), linear-gradient(0deg, var(--bg), transparent 30%); }
.hero-slide.align-right::after { background: linear-gradient(270deg, rgba(11,6,18,calc(var(--ov,.35) + .45)), transparent 80%), linear-gradient(0deg, var(--bg), transparent 30%); }
.hero-slide.align-center::after { background: radial-gradient(ellipse at center, rgba(11,6,18,calc(var(--ov,.35) + .35)), transparent 70%), linear-gradient(0deg, var(--bg), transparent 30%); }
.hero h1, .hero h2.hero-title { font-weight: 300; text-shadow: 0 0 40px rgba(155,108,224,.35); }
.hero p { color: #e6dcea; }
.hero-dots button { border-radius: 2px; } .hero-dots button.on::after { background: var(--gold-grad); }
.hero-arrows button { backdrop-filter: blur(8px); background: rgba(20,11,31,.35); }

/* sections */
.section.alt { background: linear-gradient(180deg, transparent, rgba(42,22,64,.35) 20%, rgba(42,22,64,.35) 80%, transparent); }

/* cards: glass with an aurora glow on hover */
body.cards-elevated .p-card, body.cards-bordered .p-card { background: var(--glass); border: 1px solid rgba(231,194,125,.1); border-radius: var(--radius-card); padding: 10px; box-shadow: 0 24px 50px -36px #000; backdrop-filter: blur(4px); }
body.cards-elevated .p-card:hover, body.cards-bordered .p-card:hover { transform: translateY(-6px); border-color: rgba(231,194,125,.32); box-shadow: 0 30px 70px -34px rgba(155,108,224,.65), 0 0 0 1px rgba(231,194,125,.08); }
.p-frame, .p-media { border-radius: calc(var(--radius-card) - 6px); }
.p-name { font-size: 1.2rem; }
.price .now { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; }
.badge { border-radius: 999px; padding: 6px 10px; background: rgba(20,11,31,.8); backdrop-filter: blur(6px); }
.badge.sale { background: var(--gold-grad); color: #1a0d22; border-color: transparent; }
.p-wish { background: rgba(20,11,31,.55); backdrop-filter: blur(6px); }
.p-wish.on svg { fill: var(--rose); } .p-wish.on, .p-wish:hover { color: var(--rose); }
.skeleton { background: linear-gradient(90deg, #170D24 25%, #23133a 37%, #170D24 63%); background-size: 400% 100%; }
.cat-tile, .col-card, .promo, .insta-grid a, .split .media img { border-radius: var(--radius-card); }
.cat-tile { box-shadow: 0 20px 50px -34px #000; }
.cat-tile::before { border-radius: calc(var(--radius-card) - 6px); }
.cat-tile .label { background: linear-gradient(0deg, rgba(11,6,18,.92), transparent); }
.cat-tile .label h3 { font-family: var(--font-display); font-style: italic; }
.col-card .ov { background: linear-gradient(0deg, rgba(11,6,18,.94) 5%, rgba(11,6,18,.1) 60%); }
.promo::after { background: linear-gradient(90deg, rgba(11,6,18,.85), transparent 70%); }
.insta-grid { gap: 10px; }
.gem-card { border-radius: var(--radius-card); background: var(--glass); border-color: rgba(231,194,125,.1); }
.gem-card:hover { box-shadow: 0 24px 60px -30px rgba(155,108,224,.6); }
.gem-card img { box-shadow: 0 0 0 4px rgba(231,194,125,.08), 0 0 40px -6px rgba(155,108,224,.6); }
.why-grid { border: 1px solid rgba(231,194,125,.12); border-radius: 22px; overflow: hidden; background: var(--glass); }
.why svg { stroke: var(--gold2); filter: drop-shadow(0 0 10px rgba(231,194,125,.35)); }
.testi { border-radius: var(--radius-card); background: var(--glass); border-color: rgba(231,194,125,.12); position: relative; overflow: hidden; }
.testi::after { content: '☾'; position: absolute; right: 18px; top: 8px; font-size: 3.2rem; color: rgba(231,194,125,.1); }
.split .media::before { border-radius: var(--radius-card); border-color: rgba(155,108,224,.35); }
.inline-form { border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.02); }
.inline-form .btn { border-radius: 999px; margin: 4px; }
.countdown b { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* footer: aurora edge */
.site-footer { position: relative; background: linear-gradient(180deg, rgba(11,6,18,.2), rgba(20,11,31,.92) 18%, #07040c); border-top-color: transparent; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(155,108,224,.6), rgba(231,194,125,.8), rgba(232,139,184,.6), transparent); }

/* inputs, drawers, modals */
.input, input.input, select.input, textarea.input { border-radius: 12px; }
.drawer .panel { background: linear-gradient(180deg, #170c26, var(--bg)); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--plum), #4a2a6a); border-radius: 10px; border: 2px solid var(--bg); }
::selection { background: var(--amethyst); color: #fff; }
.cookie { background: rgba(20,11,31,.92); border-color: rgba(231,194,125,.22); border-radius: 18px; backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px #000, 0 0 50px -20px rgba(155,108,224,.5); }