/* ═══════════════════════════════════════════════════════
   SENCO — MAISON-LEVEL LUXURY CSS
   Magnolia palette · warm earthy tones on dark theme
   ═══════════════════════════════════════════════════════ */
:root {
  --bg: #0c0908;
  --bg-alt: #110e0b;
  --bg-card: #151110;
  --text: rgba(252,237,223,0.92);
  --muted: rgba(222,195,168,0.78);
  --dim: rgba(222,195,168,0.55);
  --gold: #ba8d6c;
  --gold-light: #dec3a8;
  --gold-dark: #864a1f;
  --emerald: #dec3a8;
  --accent-deep: #3b261a;
  --cream: #fceddf;
  --glass: rgba(12,9,8,0.90);
  --glass-border: rgba(186,141,108,0.15);
  --glow: radial-gradient(65% 65% at 50% 45%, rgba(134,74,31,0.10) 0%, transparent 70%);
  --ease: cubic-bezier(0.22,0.9,0.2,1);
  --font-heading: 'Cormorant Garamond','Playfair Display',Georgia,serif;
  --font-body: 'Jost','Raleway','Inter',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:rgba(252,237,223,0.75);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(1200px 600px at 50% 0%,rgba(134,74,31,0.06),transparent 70%);pointer-events:none;z-index:0;}
::selection{background:rgba(186,141,108,0.30);color:#fff;}
a{color:inherit;text-decoration:none;}

/* Ambient halo */
.ambient-halo{position:fixed;inset:-20vh -10vw auto -10vw;height:70vh;background:var(--glow);opacity:0.3;pointer-events:none;z-index:0;}

/* ═══ PILL NAVBAR ═══ */
.nav{position:fixed;top:16px;left:24px;right:24px;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:12px 24px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translateY(-12px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;}
.nav--visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.nav--hidden{opacity:0;transform:translateY(-20px);pointer-events:none;}
.nav__brand{font-family:var(--font-heading);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav__links{display:flex;gap:20px;justify-content:center;font-size:11px;text-transform:uppercase;letter-spacing:.16em;}
.nav__links a{color:rgba(252,237,223,0.7);transition:color .3s ease;}
.nav__links a:hover{color:rgba(252,237,223,0.95);}
.nav__cta{position:relative;overflow:hidden;justify-self:end;padding:10px 20px;border-radius:999px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--gold),var(--emerald)) border-box;border:1px solid transparent;color:var(--cream);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.nav__cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(186,141,108,0.2);}
/* Shimmer on CTA */
.nav__cta::after{content:"";position:absolute;top:0;left:-140%;width:140%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);transform:translateX(-100%);transition:transform .8s var(--ease);pointer-events:none;}
.nav__cta:hover::after{transform:translateX(220%);}

/* ═══ SCROLLY CONTAINER ═══ */
.scrolly{position:relative;z-index:1;}
.sticky{position:sticky;top:0;height:100vh;width:100vw;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;}
#sequence{width:100vw;height:100vh;display:block;}
.canvas-glow{position:absolute;inset:0;background:radial-gradient(45% 45% at 50% 45%,rgba(134,74,31,0.06),transparent 65%);mix-blend-mode:screen;pointer-events:none;}

/* Loader */
.loader{position:absolute;bottom:32px;right:32px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;gap:12px;align-items:center;background:rgba(12,9,8,0.80);padding:10px 16px;border-radius:999px;border:1px solid rgba(186,141,108,0.16);backdrop-filter:blur(10px);transition:opacity .6s var(--ease);}
body.is-loaded .loader{opacity:0;pointer-events:none;}

/* ═══ STORY PANELS ═══ */
.story{position:relative;margin-top:-100vh;}
.panel{position:relative;z-index:2;min-height:100vh;max-width:640px;padding:0 clamp(24px,6vw,96px);display:flex;flex-direction:column;justify-content:center;gap:18px;opacity:0;transform:translateY(24px);transition:opacity .4s linear;}

/* The glassmorphism dark box */
.panel__content{width:min(100%,700px);padding:clamp(18px,2.5vw,32px);border-radius:20px;border:1px solid rgba(186,141,108,0.12);background:linear-gradient(135deg,rgba(17,14,11,0.94),rgba(12,9,8,0.90));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 22px 60px rgba(0,0,0,0.5),inset 0 1px 0 rgba(222,195,168,0.06);color:rgba(252,237,223,0.92);}
.panel__content>*{margin-left:auto;margin-right:auto;}

/* Panel glow aura */
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 40% 50%,rgba(134,74,31,0.06),transparent 70%);opacity:.4;pointer-events:none;z-index:-1;}

/* Panel positions */
.panel--center{margin:0 auto;text-align:center;align-items:center;}
.panel--left{margin-left:clamp(12px,6vw,120px);}
.panel--right{margin-left:auto;margin-right:clamp(12px,6vw,120px);text-align:right;align-items:flex-end;}
.panel--left .panel__content{text-align:left;}
.panel--center .panel__content{text-align:center;}
.panel--right .panel__content{text-align:right;}
.panel--cta{pointer-events:auto;}

/* Kicker label */
.panel__kicker{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:rgba(222,195,168,0.85);margin-bottom:10px;}

/* Headings */
h1,h2,h3{font-family:var(--font-heading);font-weight:500;margin:0;letter-spacing:.02em;color:var(--text);}
h1{font-size:clamp(28px,4vw,56px);line-height:1.1;}
h2{font-size:clamp(24px,3vw,42px);line-height:1.15;}
h3{font-size:clamp(18px,2vw,32px);}
h1 em,h2 em{font-style:italic;background:linear-gradient(135deg,var(--cream),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Panel text */
.panel__lead{font-size:clamp(13px,1.5vw,16px);line-height:1.7;color:rgba(252,237,223,0.72);margin:12px 0 0;}
.panel__sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(222,195,168,0.6);margin:14px 0 0;}

/* Panel actions */
.panel__actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:20px;}

/* ═══ BUTTONS ═══ */
.btn{position:relative;overflow:hidden;padding:12px 28px;border-radius:999px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-family:var(--font-body);border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);text-decoration:none;display:inline-block;}
.btn--primary{background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--gold),var(--emerald)) border-box;border:1px solid transparent;color:var(--text);box-shadow:0 8px 30px rgba(134,74,31,0.12);}
.btn--ghost{border:1px solid rgba(186,141,108,0.3);color:rgba(252,237,223,0.7);}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(186,141,108,0.2);}
/* Button shimmer */
.btn::after{content:"";position:absolute;top:0;left:-140%;width:140%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);transform:translateX(-100%);transition:transform .8s var(--ease);pointer-events:none;}
.btn:hover::after{transform:translateX(220%);}

/* ═══ COLLECTION SECTION ═══ */
.collection{padding:100px clamp(24px,6vw,120px);background:#f7f0e8;border-top:1px solid rgba(186,141,108,0.12);color:#3b261a;}
.collection__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;align-items:center;max-width:1200px;margin:0 auto;}
.collection__details{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;}
.collection__details span{color:#864a1f;display:block;margin-bottom:8px;font-size:11px;}
.collection__details strong{color:#3b261a;font-size:14px;font-weight:500;}
.collection h3{color:#3b261a;}
.collection p{color:#5a3d2b;}
.collection .panel__kicker{color:#864a1f;}

/* ═══ DIVIDER ═══ */
.section-divider{width:100%;padding:4rem 0;text-align:center;background:#f7f0e8;position:relative;}
.section-divider::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,#ba8d6c,transparent);}

/* ═══ TRY-ON SECTION ═══ */
.tryon-section{position:relative;z-index:10;background:linear-gradient(180deg,#f7f0e8,#faf5ef);padding:100px clamp(24px,6vw,120px);border-top:1px solid rgba(186,141,108,0.08);}
.tryon-section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60vw;height:400px;background:radial-gradient(ellipse,rgba(222,195,168,0.15),transparent 70%);pointer-events:none;}
.tryon-header{text-align:center;margin-bottom:3rem;position:relative;}
.tryon-header h2{margin-bottom:.8rem;color:#3b261a;}
.tryon-header p{font-size:1rem;color:#6b4c38;max-width:540px;margin:0 auto;}
.tryon-section .panel__kicker{color:#864a1f;}

/* Use case tabs */
.usecase-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 auto 2.5rem;max-width:1000px;}
.usecase-tab{padding:10px 20px;border-radius:999px;border:1px solid rgba(186,141,108,0.25);background:rgba(255,255,255,0.7);color:#3b261a;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .3s var(--ease);}
.usecase-tab:hover{border-color:#ba8d6c;box-shadow:0 6px 24px rgba(186,141,108,0.15);}
.usecase-tab.is-active{background:#3b261a;color:#fceddf;border-color:#3b261a;box-shadow:0 8px 26px rgba(59,38,26,0.25);}

.usecase-panel{display:none;}
.usecase-panel.is-active{display:block;}

/* Upload Zones */
.tryon-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1100px;margin:0 auto 2.5rem;}
.tryon-grid--single{grid-template-columns:1fr;max-width:680px;}
.tryon-grid--multi{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.tryon-grid--multi .upload-zone{height:300px;}
.upload-zone{position:relative;background:rgba(255,255,255,0.7);border:1px dashed rgba(186,141,108,0.3);border-radius:16px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .4s var(--ease);height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.upload-zone:hover{border-color:#ba8d6c;background:rgba(255,255,255,0.85);box-shadow:0 4px 30px rgba(186,141,108,0.10);}
.upload-zone.has-image{padding:8px;border-style:solid;border-color:#ba8d6c;}
.upload-zone .upload-icon{width:48px;height:48px;margin-bottom:1.2rem;opacity:.4;}
.upload-zone .upload-icon svg{width:100%;height:100%;stroke:#864a1f;}
.upload-zone h4{font-family:var(--font-heading);font-weight:400;font-size:1.1rem;color:#3b261a;margin-bottom:.5rem;letter-spacing:.04em;}
.upload-zone p{font-size:.8rem;color:#8a6b55;}
.upload-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;}
.upload-preview{width:100%;height:100%;object-fit:contain;border-radius:12px;display:none;}
.upload-zone.has-image .upload-preview{display:block;}
.upload-zone.has-image .upload-icon,.upload-zone.has-image h4,.upload-zone.has-image p{display:none;}

/* Prompt fields */
.prompt-wrapper{max-width:900px;margin:0 auto 2.5rem;background:rgba(255,255,255,0.65);border:1px solid rgba(186,141,108,0.18);border-radius:16px;padding:1.6rem 1.8rem;}
.prompt-wrapper label{display:block;font-family:var(--font-heading);font-size:1rem;color:#3b261a;margin-bottom:.6rem;letter-spacing:.04em;}
.prompt-wrapper textarea{width:100%;min-height:140px;resize:vertical;border-radius:12px;border:1px solid rgba(186,141,108,0.25);background:#fff;color:#3b261a;padding:14px 16px;font-family:var(--font-body);font-size:.9rem;line-height:1.6;}
.prompt-wrapper textarea:focus{outline:none;border-color:#864a1f;box-shadow:0 0 0 2px rgba(134,74,31,0.12);}
.prompt-wrapper textarea[readonly]{background:#f9f3ea;color:#6b4c38;}
.field-hint{margin-top:.6rem;font-size:.75rem;color:#8a6b55;letter-spacing:.04em;}

/* Dropdown */
.select-wrapper{max-width:1100px;margin:0 auto 2rem;display:flex;align-items:center;gap:1.5rem;justify-content:center;flex-wrap:wrap;}
.select-wrapper.is-hidden{display:none;}
.select-wrapper label{font-family:var(--font-heading);font-size:1rem;color:#3b261a;letter-spacing:.06em;font-weight:400;}
.select-wrapper select{font-family:var(--font-body);padding:12px 40px 12px 18px;background:#fff;border:1px solid rgba(186,141,108,0.25);color:#3b261a;font-size:.85rem;border-radius:12px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(59,38,26,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;letter-spacing:.04em;text-transform:capitalize;transition:border-color .3s;min-width:200px;}
.select-wrapper select:focus{outline:none;border-color:#864a1f;}
.select-wrapper select option{background:#faf5ef;color:#3b261a;}

/* Generate Button */
.generate-wrapper{text-align:center;margin:2.5rem auto;}
#generate-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:14px 48px;font-family:var(--font-body);font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:#3b261a;border:1px solid #3b261a;border-radius:999px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
#generate-btn::after{content:"";position:absolute;top:0;left:-140%;width:140%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);transform:translateX(-100%);transition:transform .8s var(--ease);pointer-events:none;}
#generate-btn:hover::after{transform:translateX(220%);}
#generate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(59,38,26,0.25);}
#generate-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

/* ═══ RESULT SECTION ═══ */
.result-section{max-width:1100px;margin:3rem auto 0;display:none;}
.result-section.visible{display:block;}
.result-image-wrapper{position:relative;text-align:center;background:rgba(255,255,255,0.6);border:1px solid rgba(186,141,108,0.15);border-radius:20px;padding:18px;margin-bottom:2rem;max-height:600px;overflow:hidden;}
#result-image{max-width:100%;max-height:560px;border-radius:16px;display:block;margin:0 auto;object-fit:contain;}
.result-actions{display:flex;gap:.8rem;position:absolute;top:1.5rem;right:1.5rem;}
.result-actions button{width:40px;height:40px;background:rgba(255,255,255,0.85);border:1px solid rgba(186,141,108,0.2);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;backdrop-filter:blur(10px);}
.result-actions button svg{width:18px;height:18px;stroke:#6b4c38;}
.result-actions button:hover{background:#fff;border-color:#ba8d6c;}
.result-actions button:hover svg{stroke:#864a1f;}

/* Analytics */
.analytics-panel{background:rgba(255,255,255,0.55);border:1px solid rgba(186,141,108,0.12);border-radius:20px;padding:2rem;}
.analytics-panel h3{font-weight:400;font-size:1rem;letter-spacing:.05em;margin-bottom:1.5rem;padding-bottom:.8rem;border-bottom:1px solid rgba(186,141,108,0.12);color:#3b261a;}
.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;}
.analytics-item{padding:1rem 1.2rem;background:rgba(255,255,255,0.5);border-radius:12px;border-left:2px solid #ba8d6c;}
.analytics-item .label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#8a6b55;margin-bottom:.3rem;}
.analytics-item .value{font-size:.85rem;color:#3b261a;font-weight:400;font-family:'JetBrains Mono',monospace;letter-spacing:.02em;}
.analytics-item .value.gold{color:#864a1f;}
.analytics-item .value.emerald{color:#3b261a;}
.analytics-divider{grid-column:1/-1;height:1px;background:rgba(186,141,108,0.12);margin:.5rem 0;}

/* ═══ LIGHTBOX ═══ */
.lightbox-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.95);display:none;align-items:center;justify-content:center;cursor:zoom-out;backdrop-filter:blur(10px);}
.lightbox-overlay.active{display:flex;}
.lightbox-overlay img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:8px;}
.lightbox-close{position:absolute;top:2rem;right:2rem;width:44px;height:44px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;}
.lightbox-close:hover{background:rgba(255,255,255,0.15);}
.lightbox-close svg{width:20px;height:20px;stroke:#fff;}

/* ═══ FOOTER ═══ */
.footer{padding:80px clamp(24px,6vw,120px);display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:center;background:#efe6db;border-top:1px solid rgba(186,141,108,0.12);}
.footer__brand{font-family:var(--font-heading);font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:#3b261a;}
.footer p{color:#6b4c38;}
.footer__cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.footer__micro{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a6b55;margin:0;}
.footer .btn--primary{background:#3b261a;border:1px solid #3b261a;color:#fceddf;}

/* ═══ SWAL OVERRIDES ═══ */
.swal2-popup.swal-dark-theme{background:#111!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:16px!important;color:var(--text)!important;}
.swal2-popup.swal-dark-theme .swal2-title{font-family:var(--font-heading)!important;font-weight:400!important;letter-spacing:.04em!important;color:var(--text)!important;}
.swal2-popup.swal-dark-theme .swal2-html-container{color:var(--muted)!important;font-family:var(--font-body)!important;}

/* Senco-style loader spinner */
.senco-loader{width:88px;height:88px;margin:8px auto 0;position:relative;}
.senco-loader::before,.senco-loader::after{content:"";position:absolute;inset:0;border-radius:50%;}
.senco-loader::before{border:2px solid rgba(186,141,108,0.2);}
.senco-loader::after{border:2px solid transparent;border-top-color:var(--gold-dark);border-right-color:var(--gold);animation:sencoSpin 1.1s linear infinite;}
.senco-loader__core{position:absolute;inset:24px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(186,141,108,0.6),rgba(134,74,31,0.4));box-shadow:0 0 20px rgba(186,141,108,0.25);animation:sencoPulse 1.8s ease-in-out infinite;}
@keyframes sencoSpin{to{transform:rotate(360deg);}}
@keyframes sencoPulse{0%,100%{transform:scale(.92);opacity:.82;}50%{transform:scale(1);opacity:1;}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .nav{grid-template-columns:1fr auto;gap:12px;padding:10px 18px;}
  .nav__links{display:none;}
  .panel--left,.panel--right{margin:0 auto;text-align:center;align-items:center;}
  .tryon-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .nav{left:12px;right:12px;top:10px;}
  .tryon-section{padding:4rem 5vw 3rem;}
  .analytics-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){.nav,.btn,.panel{transition:none;}}