:root { --background:#f5efe5; --foreground:#213126; --olive:#667044; --terracotta:#b35f45; --cream:#fffaf0; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--background); color:var(--foreground); font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif; }
[hidden] { display:none!important; }
button { font:inherit; }

.experience-shell { min-height:100svh; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); overflow:hidden; background:radial-gradient(circle at 13% 16%,rgba(255,255,255,.94),transparent 28%),linear-gradient(135deg,#f8f2e7,#ead9be); }
.intro-panel { padding:clamp(3rem,7vw,7.5rem); display:flex; flex-direction:column; justify-content:center; z-index:2; }
.brand-row { position:absolute; top:2.2rem; left:clamp(1.5rem,7vw,7.5rem); display:flex; align-items:center; gap:1rem; font-size:.62rem; letter-spacing:.16em; font-weight:750; color:#656f61; }
.wordmark,.mini-logo { font-family:Georgia,serif; color:#111; font-size:2.1rem; letter-spacing:-.06em; line-height:1; text-transform:lowercase; }
.eyebrow { color:var(--terracotta); font-weight:800; letter-spacing:.18em; font-size:.72rem; margin-bottom:1.25rem; }
h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.5rem,6.8vw,7.2rem); font-weight:500; letter-spacing:-.06em; line-height:.88; margin:0; max-width:8ch; }
.lede { max-width:34rem; font-size:clamp(1rem,1.45vw,1.25rem); line-height:1.55; margin:2rem 0 1.25rem; color:#465348; }
.value-pills { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.6rem; }
.value-pills span { padding:.5rem .8rem; border:1px solid rgba(50,66,52,.16); border-radius:999px; background:rgba(255,255,255,.35); color:#596256; font-size:.75rem; font-weight:700; }
.primary-button { width:fit-content; border:0; color:white; background:var(--foreground); border-radius:999px; padding:1rem 1.35rem 1rem 1.55rem; font-weight:750; cursor:pointer; box-shadow:0 12px 30px rgba(34,49,38,.18); display:flex; align-items:center; gap:1.4rem; }
.primary-button b { width:1.85rem; height:1.85rem; display:grid; place-items:center; border-radius:50%; background:#fff; color:#263429; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(34,49,38,.22); }
.primary-button:focus-visible,.hotspot:focus-visible,.icon-button:focus-visible,.insight-tabs button:focus-visible,.drop-button:focus-visible { outline:3px solid #e8aa8e; outline-offset:4px; }
.microcopy { color:#6f776e; font-size:.74rem; margin-top:.85rem; max-width:30rem; }
.product-stage { position:relative; min-height:100svh; display:grid; place-items:center; padding:3rem; isolation:isolate; }
.product-stage::before { content:""; position:absolute; inset:6% 7%; background:rgba(255,255,255,.32); border:1px solid rgba(255,255,255,.65); border-radius:48% 52% 45% 55% / 56% 45% 55% 44%; backdrop-filter:blur(12px); box-shadow:inset 0 0 80px rgba(255,255,255,.55),0 30px 80px rgba(80,64,38,.12); z-index:-2; }
.halo { position:absolute; width:min(70vw,46rem); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(250,205,110,.38),rgba(250,205,110,0) 66%); z-index:-1; }
.orbit { position:absolute; border:1px solid rgba(104,112,67,.22); border-radius:50%; }
.orbit-one { width:60%; aspect-ratio:1; animation:spin 22s linear infinite; }.orbit-two { width:72%; aspect-ratio:1; animation:spin 28s linear reverse infinite; }
.orbit::after { content:""; position:absolute; width:.75rem; height:.75rem; border-radius:50%; background:#c97859; top:12%; left:15%; box-shadow:0 0 0 7px rgba(201,120,89,.12); }
.ar-product { width:min(79%,42rem); max-height:80svh; object-fit:contain; filter:drop-shadow(0 28px 26px rgba(69,52,24,.2)); animation:float 4.8s ease-in-out infinite; }
.stage-card { position:absolute; left:8%; right:8%; bottom:7%; padding:1rem 1.2rem; border-radius:1rem; display:flex; justify-content:space-between; gap:1rem; background:rgba(255,250,240,.82); border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(18px); color:#394237; }
.stage-card span { color:#72796d; }

.ar-shell { min-height:100svh; position:relative; overflow:hidden; background:#182019; color:white; touch-action:none; }
.camera-feed,.camera-fallback,.ar-shade { position:absolute; inset:0; width:100%; height:100%; }
.camera-feed { object-fit:cover; z-index:0; }.camera-fallback { z-index:0; opacity:0; transition:opacity .4s ease; background:radial-gradient(circle at 50% 35%,#5c624a 0%,#2d362e 35%,#141b16 100%); }.camera-fallback.is-visible { opacity:1; }
.ar-shade { z-index:1; background:linear-gradient(180deg,rgba(12,18,14,.56),transparent 22%,transparent 65%,rgba(12,18,14,.82)); pointer-events:none; }
.ar-topbar { position:absolute; z-index:5; top:max(1rem,env(safe-area-inset-top)); left:1rem; right:1rem; display:grid; grid-template-columns:2.5rem 1fr auto; align-items:center; gap:1rem; font-size:.68rem; letter-spacing:.14em; font-weight:800; }
.icon-button { width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(20,28,22,.45); color:white; font-size:1.6rem; line-height:1; cursor:pointer; backdrop-filter:blur(12px); }
.live-dot { width:.5rem; height:.5rem; margin-right:.55rem; display:inline-block; border-radius:50%; background:#e59b78; box-shadow:0 0 0 5px rgba(229,155,120,.17); }
.mini-logo { color:white; font-size:2rem; }
.ar-canvas { position:absolute; z-index:2; inset:6rem 0 12rem; display:grid; place-items:center; }
.floating-product { position:relative; width:min(70vw,29rem); transition:transform .14s ease-out; transform-style:preserve-3d; }
.floating-product img { width:100%; display:block; filter:drop-shadow(0 25px 30px rgba(0,0,0,.32)); animation:float 4.2s ease-in-out infinite; }
.scan-ring { position:absolute; z-index:-1; inset:11%; border:1px solid rgba(255,227,161,.6); border-radius:50%; box-shadow:0 0 50px rgba(255,202,103,.2),inset 0 0 40px rgba(255,202,103,.12); }
.ring-one { animation:pulse-ring 3s ease-in-out infinite; }.ring-two { inset:2%; opacity:.4; animation:pulse-ring 3s 1.5s ease-in-out infinite; }
.hotspot { position:absolute; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid white; background:rgba(255,250,233,.9); color:#243328; font-weight:850; cursor:pointer; box-shadow:0 0 0 8px rgba(255,255,255,.13),0 8px 30px rgba(0,0,0,.25); }
.hotspot-a { top:23%; left:14%; }.hotspot-b { top:52%; right:10%; }.hotspot-c { bottom:17%; left:22%; }
.insight-card { position:absolute; z-index:4; left:1rem; right:1rem; bottom:5.2rem; max-width:52rem; margin:auto; display:grid; grid-template-columns:1fr auto; gap:1.2rem; padding:1rem 1rem 1rem 1.25rem; border-radius:1.25rem; background:rgba(248,242,228,.92); color:#263429; border:1px solid rgba(255,255,255,.72); backdrop-filter:blur(20px); box-shadow:0 20px 55px rgba(0,0,0,.28); }
.insight-copy span { color:#a4563f; font-size:.58rem; font-weight:850; letter-spacing:.16em; }.insight-copy h2 { font-family:Georgia,serif; font-weight:500; margin:.2rem 0 .25rem; font-size:1.45rem; }.insight-copy p { margin:0; color:#596359; font-size:.82rem; line-height:1.35; max-width:43rem; }
.insight-tabs { display:flex; flex-direction:column; gap:.35rem; }.insight-tabs button { width:2.35rem; height:2.35rem; border-radius:50%; border:1px solid rgba(39,53,43,.16); background:transparent; color:#748075; font-size:.68rem; font-weight:800; cursor:pointer; }.insight-tabs button.is-selected { background:#263429; color:white; border-color:#263429; }
.drop-ritual { position:absolute; z-index:5; left:1rem; right:1rem; bottom:max(.8rem,env(safe-area-inset-bottom)); display:flex; justify-content:center; align-items:center; gap:1rem; }
.drop-button { border:0; background:transparent; color:white; text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; font-weight:850; cursor:pointer; }.drop-button:disabled { color:#f3d5a3; }
.drop-track { display:flex; gap:.45rem; }.drop-track i { width:.6rem; height:.85rem; display:block; border:1px solid rgba(255,255,255,.62); border-radius:55% 55% 60% 60% / 45% 45% 65% 65%; transform:rotate(45deg); transition:.3s ease; }.drop-track i.is-filled { background:#e9b869; border-color:#f4d391; box-shadow:0 0 16px rgba(244,211,145,.7); }

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1rem)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse-ring { 0%,100%{transform:scale(.92);opacity:.25} 50%{transform:scale(1.06);opacity:.8} }

@media (max-width:820px) {
  .experience-shell { grid-template-columns:1fr; }.intro-panel { min-height:55svh; padding:6rem 1.5rem 2rem; }.brand-row { top:1.5rem; left:1.5rem; }h1 { font-size:clamp(3.6rem,16vw,6rem); }.lede { margin-top:1.3rem; }.product-stage { min-height:45svh; padding:1rem; }.product-stage::before { inset:0 4% 4%; }.ar-product { max-height:50svh; width:min(92%,28rem); }.stage-card { left:6%; right:6%; bottom:4%; flex-direction:column; gap:.25rem; font-size:.78rem; }.ar-canvas { inset:5rem 0 14.5rem; }.floating-product { width:min(88vw,27rem); }.insight-card { bottom:4.4rem; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }