@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800;900&display=swap');

:root{
  --black:#050505;
  --ink:#0a0a0a;
  --cream:#f7f1e8;
  --cream2:#e5d8c8;
  --white:#fff;
  --cedar:#a86f3c;
  --cedar-dark:#673516;
  --muted:#72685d;
  --line:rgba(5,5,5,.12);
  --shadow:0 34px 120px rgba(0,0,0,.22);
  --soft:0 18px 60px rgba(53,35,17,.12);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  background:var(--black);
  color:var(--ink);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
input,select,textarea{
  width:100%;
  min-height:56px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  padding:15px 16px;
  outline:none;
  color:var(--ink);
  font-weight:800;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:var(--black);
  box-shadow:0 0 0 5px rgba(5,5,5,.08);
  transform:translateY(-1px);
}
label{
  display:flex;
  flex-direction:column;
  gap:9px;
  color:var(--muted);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.world{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 8%,rgba(168,111,60,.42),transparent 29%),
    radial-gradient(circle at 18% 80%,rgba(247,241,232,.13),transparent 26%),
    linear-gradient(135deg,#050505,#11100f 57%,#291306);
}
.halo{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(5px);
  opacity:.72;
  animation:float 9s infinite;
}
.halo-one{right:-200px;top:-190px;background:radial-gradient(circle,var(--cedar),transparent 64%)}
.halo-two{left:18%;bottom:-260px;background:radial-gradient(circle,rgba(247,241,232,.17),transparent 62%);animation-delay:1.2s}
.grain{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:60px 60px;
}
.topbar{
  position:sticky;
  top:18px;
  z-index:20;
  width:min(1180px,calc(100vw - 30px));
  margin:18px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border-radius:999px;
  color:var(--cream);
  background:rgba(247,241,232,.11);
  border:1px solid rgba(247,241,232,.17);
  backdrop-filter:blur(26px);
  box-shadow:var(--shadow);
}
.identity{
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:950;
  letter-spacing:-.04em;
}
.identity img{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:contain;
  background:var(--cream);
  padding:5px;
}
.topbar nav{
  display:flex;
  gap:4px;
  border-radius:999px;
  padding:5px;
  background:rgba(0,0,0,.22);
}
.topbar nav a{
  color:rgba(247,241,232,.72);
  font-size:13px;
  font-weight:950;
  padding:10px 14px;
  border-radius:999px;
}
.topbar nav a:hover{
  background:rgba(247,241,232,.13);
  color:var(--cream);
}
main{
  position:relative;
  z-index:1;
  width:min(1180px,calc(100vw - 30px));
  margin:18px auto 56px;
}
.cinema-hero{
  min-height:760px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:18px;
}
.headline{
  position:relative;
  overflow:hidden;
  border-radius:48px;
  background:var(--cream);
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:var(--shadow);
}
.headline:before{
  content:"";
  position:absolute;
  inset:auto auto -180px -160px;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,111,60,.18),transparent 68%);
}
.place,.order-title span,.portal-callout span,.contact-card span{
  position:relative;
  z-index:1;
  color:var(--cedar-dark);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:950;
  margin-bottom:14px;
}
.headline h1{
  position:relative;
  z-index:1;
  margin:0;
  font-size:96px;
  line-height:.81;
  letter-spacing:-.115em;
  max-width:680px;
}
.headline p{
  position:relative;
  z-index:1;
  max-width:480px;
  margin:24px 0 30px;
  color:var(--muted);
  font-size:20px;
  line-height:1.4;
  font-weight:800;
}
.hero-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.button{
  border:0;
  border-radius:999px;
  min-height:52px;
  padding:15px 19px;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.button:hover{transform:translateY(-2px)}
.button.primary{
  background:var(--black);
  color:var(--cream);
  box-shadow:0 16px 36px rgba(0,0,0,.2);
}
.button.secondary{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--black);
}
.button.full{width:100%;grid-column:1/-1}
.visual{
  position:relative;
  min-height:760px;
  border-radius:48px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.26),transparent 27%),
    linear-gradient(135deg,var(--cedar),var(--cedar-dark));
  box-shadow:var(--shadow);
}
.visual:after{
  content:"";
  position:absolute;
  inset:24px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:36px;
}
.egg-orbit{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
}
.ring-a{
  width:410px;
  height:410px;
  animation:spin 22s linear infinite;
}
.ring-b{
  width:560px;
  height:560px;
  transform:rotate(18deg);
  animation:spin 34s linear infinite reverse;
}
.egg-main{
  width:230px;
  height:310px;
  border-radius:54% 54% 48% 48% / 62% 62% 42% 42%;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.95),rgba(255,255,255,.45) 28%,transparent 31%),
    linear-gradient(145deg,#fff8eb,#d8b992 80%);
  box-shadow:0 42px 95px rgba(0,0,0,.26), inset -24px -34px 60px rgba(105,52,18,.25);
  animation:eggFloat 5.8s infinite;
}
.egg-small{
  position:absolute;
  width:64px;
  height:86px;
  border-radius:54% 54% 48% 48% / 62% 62% 42% 42%;
  background:linear-gradient(145deg,#fff8eb,#d8b992);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}
.egg-one{top:140px;right:105px;animation:eggFloat 6.4s infinite .4s}
.egg-two{bottom:142px;left:92px;animation:eggFloat 7.2s infinite .8s}
.egg-three{top:245px;left:76px;width:46px;height:64px;animation:eggFloat 5.4s infinite 1.2s}
.tag{
  position:absolute;
  z-index:2;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(22px);
  color:white;
  border-radius:28px;
  padding:18px;
  min-width:150px;
}
.tag span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:950;
  opacity:.75;
}
.tag b{
  display:block;
  font-size:30px;
  letter-spacing:-.07em;
  margin-top:6px;
}
.tag-top{top:36px;left:36px}
.tag-bottom{right:36px;bottom:36px}
.order-experience{
  margin-top:18px;
  border-radius:48px;
  background:var(--cream);
  box-shadow:var(--shadow);
  padding:38px;
  position:relative;
  overflow:hidden;
}
.order-experience:after{
  content:"";
  position:absolute;
  right:-130px;
  bottom:-150px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,111,60,.20),transparent 66%);
}
.order-title{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:22px;
}
.order-title h2,.portal-callout h2,.contact-card h2{
  margin:0;
  font-size:62px;
  line-height:.87;
  letter-spacing:-.1em;
}
.order-card{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
}
.order-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.order-row.main{
  grid-template-columns:1.15fr .85fr;
}
.method-picker{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  background:rgba(255,255,255,.58);
  border:1px solid var(--line);
  border-radius:26px;
  padding:6px;
}
.method-picker button{
  border:0;
  border-radius:20px;
  min-height:54px;
  background:transparent;
  font-weight:950;
  color:var(--muted);
}
.method-picker button.active{
  background:var(--black);
  color:var(--cream);
}
.full{grid-column:1/-1}
.bottom-section{
  margin-top:18px;
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:18px;
}
.portal-callout,.contact-card{
  border-radius:48px;
  background:var(--cream);
  box-shadow:var(--shadow);
  padding:38px;
}
.portal-callout{
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
.portal-callout:after{
  content:"";
  position:absolute;
  right:-120px;
  top:-130px;
  width:330px;
  height:330px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,111,60,.22),transparent 66%);
}
.portal-callout a{align-self:flex-start;margin-top:26px;position:relative;z-index:1}
.contact-card{
  display:grid;
  gap:14px;
}
footer{
  color:rgba(247,241,232,.68);
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:26px 6px 0;
  font-size:13px;
  font-weight:950;
}
.toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:100;
  background:var(--black);
  color:var(--cream);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:var(--shadow);
  font-weight:950;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes eggFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(18px) rotate(2deg)}}
@media(max-width:900px){
  .topbar{position:relative;top:auto;flex-direction:column;border-radius:30px}
  .cinema-hero,.bottom-section{grid-template-columns:1fr}
  .headline h1{font-size:68px}
  .visual,.cinema-hero{min-height:auto}
  .visual{height:600px}
}
@media(max-width:640px){
  main,.topbar{width:calc(100vw - 20px)}
  .headline,.visual,.order-experience,.portal-callout,.contact-card{border-radius:34px}
  .headline,.order-experience,.portal-callout,.contact-card{padding:28px}
  .headline h1,.order-title h2,.portal-callout h2,.contact-card h2{font-size:50px}
  .headline p{font-size:17px}
  .order-row,.order-row.main,.method-picker{grid-template-columns:1fr}
  .visual{height:520px}
  .ring-a{width:310px;height:310px}
  .ring-b{width:430px;height:430px}
  .egg-main{width:170px;height:230px}
  .tag{min-width:124px}
  footer{flex-direction:column}
}

/* Premium interactive order flow */
.order-app{
  position:relative;
  z-index:1;
  background:
    radial-gradient(circle at 90% 0%,rgba(168,111,60,.18),transparent 30%),
    rgba(255,255,255,.62);
  border:1px solid rgba(5,5,5,.10);
  border-radius:36px;
  padding:22px;
  min-height:520px;
  overflow:hidden;
}
.order-app:before{
  content:"";
  position:absolute;
  right:-130px;
  bottom:-160px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,111,60,.22),transparent 66%);
  pointer-events:none;
}
.order-progress{
  position:relative;
  z-index:2;
  height:8px;
  background:rgba(5,5,5,.10);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:30px;
}
.order-progress i{
  display:block;
  height:100%;
  width:12.5%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--black),var(--cedar));
  transition:width .35s var(--ease);
}
.order-step{
  position:relative;
  z-index:2;
  display:none;
  min-height:350px;
  animation:orderStepIn .34s var(--ease);
}
.order-step.active{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.order-step span{
  color:var(--cedar-dark);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-weight:950;
  margin-bottom:12px;
}
.order-step h3{
  margin:0 0 24px;
  font-size:58px;
  line-height:.87;
  letter-spacing:-.095em;
  max-width:720px;
}
.order-step p{
  margin:0 0 22px;
  color:var(--muted);
  font-size:18px;
  font-weight:800;
}
.order-step input,
.order-step textarea{
  font-size:24px;
  font-weight:900;
  border-radius:26px;
  min-height:74px;
  background:white;
}
.order-step textarea{
  min-height:130px;
  font-size:19px;
  margin-bottom:12px;
}
.dozen-picker{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
.dozen-picker button{
  min-height:92px;
  border:1px solid var(--line);
  background:white;
  border-radius:28px;
  font-size:34px;
  font-weight:950;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.dozen-picker button:hover,
.choice-cards button:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 56px rgba(53,35,17,.14);
}
.dozen-picker button.active,
.choice-cards button.active{
  background:var(--black);
  color:var(--cream);
}
.choice-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.choice-cards.two{
  grid-template-columns:repeat(2,1fr);
}
.choice-cards button{
  border:1px solid var(--line);
  background:white;
  border-radius:30px;
  min-height:142px;
  padding:20px;
  text-align:left;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.choice-cards b{
  display:block;
  font-size:28px;
  letter-spacing:-.07em;
  margin-bottom:9px;
}
.choice-cards small{
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}
.choice-cards button.active small{
  color:rgba(246,241,232,.70);
}
.order-review{
  display:grid;
  gap:9px;
  background:white;
  border:1px solid var(--line);
  border-radius:28px;
  padding:18px;
}
.order-review div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding-bottom:9px;
  color:var(--muted);
  font-weight:900;
}
.order-review div:last-child{
  border-bottom:0;
}
.order-review b{
  color:var(--black);
}
.share-card{
  background:white;
  border:1px solid var(--line);
  border-radius:32px;
  padding:20px;
  width:min(360px,100%);
  display:grid;
  gap:8px;
  box-shadow:var(--soft);
}
.share-card b{
  display:block;
  font-size:32px;
  letter-spacing:-.08em;
}
.share-card small{
  color:var(--muted);
  font-weight:900;
  margin-bottom:10px;
}
.order-flow-actions{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
}
.order-flow-actions .button.secondary{
  background:white;
}
@keyframes orderStepIn{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to{opacity:1;transform:none}
}
@media(max-width:700px){
  .order-step h3{font-size:42px}
  .dozen-picker,
  .choice-cards,
  .choice-cards.two{
    grid-template-columns:1fr 1fr;
  }
  .order-flow-actions{
    position:sticky;
    bottom:10px;
  }
}
@media(max-width:460px){
  .dozen-picker,
  .choice-cards,
  .choice-cards.two{
    grid-template-columns:1fr;
  }
}

.price-badge{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  border-radius:999px;
  background:var(--black);
  color:var(--cream);
  padding:12px 16px;
  font-weight:950;
  margin-bottom:22px;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}
.live-total{
  margin-top:14px;
  width:max-content;
  border-radius:999px;
  background:var(--black);
  color:var(--cream);
  padding:13px 17px;
  font-size:18px;
  font-weight:950;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}