:root{--midnight:#1E1433;--indigo:#2A1B4A;--navy:#120D22;--violet:#4B3480;--violet2:#5E4596;--flame:#F2A650;--cream:#F5E6CC;--ivory:#FBF5EA;--ink:#1E1433;--muted:#4a3d63;--head:"Cinzel",Georgia,serif;--body:"Cormorant Garamond",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 1.2rem/1.65 var(--body)}
img{max-width:100%;display:block}
a{color:var(--violet)}a:hover{color:var(--midnight)}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:.06em;line-height:1.2;margin:.2em 0 .45em;color:var(--midnight)}
h1{font-size:clamp(2rem,5vw,3.2rem)}h2{font-size:clamp(1.5rem,3vw,2.1rem)}h3{font-size:1.4rem}
.spark{width:.9em;height:.9em;color:var(--flame);display:inline-block;vertical-align:-.05em}
.moon{width:1.5em;height:1.5em;color:var(--flame);flex:none}
.sr{position:absolute;left:-9999px}
/* header (night) */
.site-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1rem,4vw,3rem);background:var(--navy);position:sticky;top:0;z-index:5;border-bottom:1px solid #F2A65033}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--cream);text-decoration:none;font:600 1.2rem var(--head);letter-spacing:.1em;text-transform:uppercase}
nav{display:flex;gap:2rem}nav a{color:var(--cream);text-decoration:none;font:400 .85rem var(--head);letter-spacing:.18em;text-transform:uppercase}nav a:hover,nav a[aria-current]{color:var(--flame)}
.navt,.burger{display:none}
/* sections */
.light{background:var(--ivory)}.cream{background:var(--cream)}
.night{background:radial-gradient(ellipse at 20% 0,#4B348066,transparent 60%),radial-gradient(ellipse at 90% 100%,#5E459655,transparent 55%),var(--midnight);color:var(--cream)}
.night h2,.night h1{color:var(--cream)}.night a{color:var(--flame)}
.wrap{max-width:1120px;margin:0 auto;padding:4.5rem clamp(1.2rem,4vw,2rem)}.narrow{max-width:740px}.center-text{text-align:center}
.eyebrow{font:600 .78rem var(--head);text-transform:uppercase;letter-spacing:.28em;color:var(--violet);margin:0}.eyebrow a{text-decoration:none}
.tagline{font-style:italic;font-size:1.35rem;color:var(--violet);margin:.1rem 0 .7rem}
/* hero */
.hero{background:var(--navy);color:var(--cream);text-align:center;overflow:hidden}
.hero-banner{width:100%;height:auto;max-height:520px;object-fit:cover}
.hero-inner{padding:1.6rem 1.5rem 3rem;background:linear-gradient(180deg,#120D22,#1E1433)}
.lede{font:400 clamp(1rem,2.2vw,1.35rem) var(--head);letter-spacing:.12em;color:var(--cream);margin:0 auto 1.6rem;max-width:760px}
/* buttons */
.btns{display:flex;gap:.7rem;flex-wrap:wrap}.center{justify-content:center}
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:999px;text-decoration:none;font:600 .78rem var(--head);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:1.5px solid transparent;transition:.2s;text-align:center}
.btn.flame{background:var(--flame);color:var(--navy);box-shadow:0 4px 18px #F2A65055}.btn.flame:hover{background:#f7bb72;color:var(--navy);transform:translateY(-1px)}
.btn.ghost{border-color:var(--midnight);color:var(--midnight)}.btn.ghost:hover{background:var(--midnight);color:var(--cream)}
.btn.outline{border-color:var(--violet);color:var(--violet)}.btn.outline:hover{background:var(--violet);color:#fff}
.btn.outline-light{border-color:var(--cream);color:var(--cream)}.btn.outline-light:hover{border-color:var(--flame);color:var(--flame)}
.btn.wide{display:block;margin:1rem 0 .4rem}
/* motifs */
.divider{display:flex;justify-content:center;align-items:center;gap:.8rem;margin:0 auto 1rem}.divider .spark{width:.8rem;height:.8rem}.divider .moon{width:1.8rem;height:1.8rem}
.sec-head{text-align:center;margin-bottom:2.5rem}.sec-head p{color:var(--muted)}
.arch{position:relative;border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:4/5;border:2px solid #F2A65080;box-shadow:0 0 0 6px var(--ivory),0 0 0 7px #4B348033}
.arch.photo{background:#fff}.arch.photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.arch.night{background:radial-gradient(circle at 50% 35%,#5E4596,#2A1B4A 60%,#120D22);display:flex;align-items:center;justify-content:center}
.arch.night:before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 20%,#F5E6CC,transparent),radial-gradient(1px 1px at 75% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 45%,#F5E6CC,transparent),radial-gradient(1px 1px at 12% 60%,#fff,transparent)}
.jar{width:62%;position:relative}
.badge{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--flame);color:var(--navy);font:600 .7rem var(--head);letter-spacing:.18em;text-transform:uppercase;padding:.35rem .9rem;border-radius:999px;white-space:nowrap}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem}.grid.one{max-width:460px;margin:0 auto}
.card{background:#fff;border:1px solid #2A1B4A1f;border-radius:24px;padding:1.4rem;box-shadow:0 10px 30px #1E14331a;transition:.25s}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px #1E14332b}
.card-media{display:block;max-width:300px;margin:0 auto}.card-media .arch{box-shadow:0 0 0 6px #fff,0 0 0 7px #4B348033}
.card-body{padding:1.4rem .4rem .4rem;text-align:center}.card-body .btns{justify-content:center}.card h3 a{color:var(--midnight);text-decoration:none}
.price{font:600 1.05rem var(--head);letter-spacing:.08em;color:var(--midnight)}.price span{font:italic 400 1rem var(--body);color:var(--muted)}.price.big{font-size:1.5rem;margin:.6rem 0 0}
.more{text-align:center;font-style:italic;font-size:1.25rem;color:var(--muted);margin-top:3rem}
/* feature */
.feature{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:4rem;align-items:center}.feature .arch{box-shadow:0 0 0 6px var(--cream),0 0 0 7px #4B348033}
.facts{list-style:none;padding:0;margin:1rem 0}.facts li{padding:.25rem 0;display:flex;gap:.7rem;align-items:center}
.link{font:600 .85rem var(--head);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
/* signup */
.note{font-size:.95rem;opacity:.8;margin-top:-.6rem}
.signup-form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}.signup-form input{flex:1 1 240px;max-width:340px;padding:.8rem 1.2rem;border-radius:999px;border:1px solid #F5E6CC88;background:#ffffff10;color:var(--cream);font:inherit}.signup-form input::placeholder{color:#F5E6CCaa}
.msg{width:100%;color:var(--cream)}
/* page head (night band) */
.page-head{text-align:center;padding:4rem 1.5rem 3.5rem;background:radial-gradient(ellipse at 50% 120%,#5E459699,transparent 60%),var(--midnight);color:var(--cream)}
.page-head h1{color:var(--cream)}.page-head .eyebrow{color:var(--flame)}.page-head a{color:var(--flame)}
/* product */
.product{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.p-media{position:sticky;top:6rem;max-width:480px;width:100%;margin:0 auto}
.subtitle{color:var(--muted);margin:-.4rem 0 .4rem;font-size:1.1rem}
.p-info h2{font-size:1.25rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid #2A1B4A22}.small{font-size:.95rem;color:var(--muted);margin-top:.2rem}
.specs{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.6rem}.specs dt{font:600 .78rem var(--head);letter-spacing:.15em;text-transform:uppercase;color:var(--violet);padding-top:.2rem}.specs dd{margin:0}
/* about */
.prose .lead{font-size:1.5rem;font-style:italic;color:var(--violet)}.about-icon{width:150px;border-radius:50%;margin:0 auto 2rem;box-shadow:0 0 0 4px var(--cream),0 0 0 5px #F2A650}
/* footer (night) */
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;padding:3rem clamp(1.2rem,4vw,3rem) 2rem;background:var(--navy);color:var(--cream);font-size:1.05rem}
.foot-a{display:flex;gap:1rem;align-items:center}.foot-a img{width:72px;height:72px;border-radius:50%}.foot-a p{margin:0}
.foot-brand{font:600 1.15rem var(--head);letter-spacing:.1em;text-transform:uppercase}
.foot-links{display:flex;flex-direction:column;gap:.3rem}.foot-links a{color:var(--cream);text-decoration:none}.foot-links a:hover{color:var(--flame)}
.copy{width:100%;color:#F5E6CCb3;font-size:.9rem;border-top:1px solid #F5E6CC1f;padding-top:1.4rem;margin:0}
@media(max-width:800px){
.burger{display:block;width:28px;height:20px;position:relative;cursor:pointer}.burger span,.burger:before,.burger:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--cream)}.burger:before{top:0}.burger span{top:9px}.burger:after{bottom:0}
nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--navy)}nav a{padding:1rem 1.5rem;border-top:1px solid #F5E6CC14}.navt:checked~nav{display:flex}
.brand{font-size:1rem}.hero-banner{height:auto}
.feature,.product{grid-template-columns:1fr;gap:2.5rem}.feature .arch{max-width:340px;margin:0 auto;width:100%}.p-media{position:static;max-width:380px}.wrap{padding-block:3.2rem}.grid{grid-template-columns:1fr}}
.signup-form+.note{margin-top:.9rem}