:root{--primary:#e85d04;--primary-dark:#d62828;--secondary:#f4a261;--accent:#f77f00;--dark:#1a0a05;--dark-light:#2d1b14;--cream:#fff8f0;--text:#2b1810;--glass:rgba(255,248,240,0.1)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{background:var(--dark);color:var(--cream);font-family:Poppins,Arial,Helvetica,sans-serif;overflow-x:hidden}h1,h2,p{margin:0}h1{font-size:36px;line-height:1.15}h2{font-size:24px}nav{position:fixed;top:0;width:100%;padding:1rem 5%;justify-content:space-between;z-index:1000;background:rgba(26,10,5,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(232,93,4,.3);transition:all .3s ease}.logo,nav{display:flex;align-items:center}.logo{font-family:Playfair Display,serif;font-size:1.8rem;font-weight:900;color:var(--primary);text-decoration:none;gap:.5rem}.logo span{color:var(--cream)}.nav-links{display:flex;gap:2rem;list-style:none}.nav-links a{color:var(--cream);text-decoration:none;font-weight:500;font-size:.9rem;position:relative;transition:color .3s;cursor:pointer}.nav-links a:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--primary);transition:width .3s}.nav-links a.active,.nav-links a:hover{color:var(--primary)}.nav-links a.active:after,.nav-links a:hover:after{width:100%}.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.nav-cta{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:.55rem 1.2rem;border-radius:50px;text-decoration:none;font-weight:600;font-size:.85rem;transition:transform .3s,box-shadow .3s;border:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}.nav-cta-outline{background:transparent;border:1.5px solid rgba(232,93,4,.7);color:var(--secondary)}.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(232,93,4,.4)}.nav-cta-outline:hover{background:rgba(232,93,4,.15);border-color:var(--primary);color:var(--primary)}.mobile-menu-btn{display:none;background:none;border:none;color:var(--cream);font-size:1.5rem;cursor:pointer}.page{display:none;min-height:100vh;padding-top:80px;animation:fadeIn .6s ease}.page.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero{min-height:100vh;display:flex;align-items:center;padding:0 5%;position:relative;overflow:hidden;background:radial-gradient(circle at top right,rgba(232,93,4,.15),transparent 50%),radial-gradient(circle at bottom left,rgba(214,40,40,.1),transparent 50%)}.hero:before{content:"";position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(232,93,4,.2),transparent 70%);border-radius:50%;animation:pulse 4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.hero-content{display:grid;grid-template-columns:1fr 1fr;grid-gap:4rem;gap:4rem;align-items:center;max-width:1400px;margin:0 auto;width:100%;position:relative;z-index:1}.hero-text h3{color:var(--secondary);font-size:1.1rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:1rem}.hero-text h1{font-family:Playfair Display,serif;font-size:4rem;font-weight:900;line-height:1.1;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--cream),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-text h1 span{color:var(--primary);-webkit-text-fill-color:var(--primary)}.hero-text p{font-size:1.1rem;color:rgba(255,248,240,.8);margin-bottom:2rem;line-height:1.8;max-width:500px}.hero-badges{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.badge{background:rgba(232,93,4,.2);border:1px solid rgba(232,93,4,.4);padding:.5rem 1rem;border-radius:50px;font-size:.8rem;color:var(--secondary);display:flex;align-items:center;gap:.5rem}.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:1rem 2.5rem;border-radius:50px;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s;border:none;cursor:pointer;font-size:1rem;box-shadow:0 10px 30px rgba(232,93,4,.3)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(232,93,4,.5)}.btn-secondary{background:transparent;color:var(--cream);padding:1rem 2.5rem;border-radius:50px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s;border:2px solid rgba(255,248,240,.3);cursor:pointer;font-size:1rem}.btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:rgba(232,93,4,.1)}.hero-image{position:relative;display:flex;justify-content:center;align-items:center}.hero-image img{max-width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));animation:float 3s ease-in-out infinite;border-radius:20px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.floating-elements{position:absolute;width:100%;height:100%;pointer-events:none}.float-item{position:absolute;background:rgba(232,93,4,.1);border:1px solid rgba(232,93,4,.3);border-radius:50%;animation:floatAround 6s ease-in-out infinite}@keyframes floatAround{0%,to{transform:translate(0) rotate(0deg)}25%{transform:translate(10px,-15px) rotate(5deg)}50%{transform:translate(-5px,10px) rotate(-5deg)}75%{transform:translate(15px,5px) rotate(3deg)}}.features{padding:6rem 5%;background:linear-gradient(to bottom,var(--dark),var(--dark-light))}.section-header{text-align:center;margin-bottom:4rem}.section-header h2{font-family:Playfair Display,serif;font-size:2.5rem;margin-bottom:1rem;color:var(--cream)}.section-header p{color:rgba(255,248,240,.7);max-width:600px;margin:0 auto}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:2rem;gap:2rem;max-width:1200px;margin:0 auto}.feature-card{background:rgba(255,248,240,.05);border:1px solid rgba(232,93,4,.2);border-radius:20px;padding:2.5rem;text-align:center;transition:all .4s;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:transform .4s}.feature-card:hover:before{transform:scaleX(1)}.feature-card:hover{transform:translateY(-10px);border-color:rgba(232,93,4,.5);box-shadow:0 20px 40px rgba(0,0,0,.3)}.feature-icon{width:70px;height:70px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:1.8rem;color:white}.feature-card h3{font-size:1.3rem;margin-bottom:1rem;color:var(--cream)}.feature-card p{color:rgba(255,248,240,.7);font-size:.95rem;line-height:1.7}.products-section{padding:4rem 5%;max-width:1400px;margin:0 auto}.product-showcase{display:grid;grid-template-columns:1fr 1fr;grid-gap:4rem;gap:4rem;align-items:center;margin-bottom:4rem}.product-image-main{position:relative;background:radial-gradient(circle,rgba(232,93,4,.2),transparent 70%);border-radius:30px;padding:2rem;display:flex;justify-content:center}.product-image-main img{max-width:100%;border-radius:20px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}.product-info h2{font-family:Playfair Display,serif;font-size:2.5rem;margin-bottom:.5rem;color:var(--cream)}.product-info .variant-tag{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:.4rem 1.2rem;border-radius:50px;font-size:.85rem;font-weight:600;margin-bottom:1.5rem}.product-info p{color:rgba(255,248,240,.8);line-height:1.8;margin-bottom:2rem}.product-meta{display:flex;gap:2rem;margin-bottom:2rem}.meta-item{text-align:center}.meta-item .value{font-size:1.5rem;font-weight:700;color:var(--primary)}.meta-item .label{font-size:.8rem;color:rgba(255,248,240,.6)}.buy-buttons{display:flex;gap:1rem;flex-wrap:wrap}.btn-shopee{background:linear-gradient(135deg,#ee4d2d,#d0011b);color:white;padding:1rem 2rem;border-radius:12px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s;border:none;cursor:pointer}.btn-shopee:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(238,77,45,.4)}.btn-wa{background:linear-gradient(135deg,#25d366,#128c7e);color:white;padding:1rem 2rem;border-radius:12px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s;border:none;cursor:pointer}.btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(37,211,102,.4)}.variants-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:2rem;gap:2rem;margin-top:3rem}.variant-card{background:rgba(255,248,240,.05);border:1px solid rgba(232,93,4,.2);border-radius:20px;overflow:hidden;transition:all .4s ease;cursor:pointer;display:flex;flex-direction:column}.variant-card:hover{transform:translateY(-5px);border-color:var(--primary);box-shadow:0 15px 30px rgba(0,0,0,.3)}.variant-card.active{border-color:var(--primary);background:rgba(232,93,4,.1)}.variant-img{height:240px;padding:1.5rem;background:linear-gradient(135deg,rgba(232,93,4,.15),rgba(214,40,40,.08));display:flex;align-items:center;justify-content:center;overflow:hidden}.variant-img img{max-height:100%!important;max-width:100%!important;width:auto!important;height:auto!important;object-fit:contain!important;transition:transform .4s ease}.variant-card:hover .variant-img img{transform:scale(1.06)}.variant-info{padding:1.5rem}.variant-info h4{margin-bottom:.5rem;color:var(--cream)}.variant-info p{font-size:.85rem;color:rgba(255,248,240,.6)}.story-section{padding:4rem 5%;max-width:1200px;margin:0 auto}.story-hero{text-align:center;margin-bottom:4rem;padding:3rem;background:radial-gradient(circle,rgba(232,93,4,.1),transparent 70%);border-radius:30px}.story-hero h2{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}.story-hero p{font-size:1.2rem;color:var(--secondary)}.story-content{display:grid;grid-template-columns:1fr 1fr;grid-gap:3rem;gap:3rem;align-items:center;margin-bottom:4rem}.story-text h3{font-size:1.8rem;margin-bottom:1rem;color:var(--secondary)}.story-text p{color:rgba(255,248,240,.8);line-height:1.9;margin-bottom:1.5rem}.story-visual{background:linear-gradient(135deg,rgba(232,93,4,.2),rgba(45,27,20,.8));border-radius:20px;padding:3rem;text-align:center;border:1px solid rgba(232,93,4,.3)}.story-visual i{font-size:4rem;color:var(--primary);margin-bottom:1rem;display:block}.culture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:2rem;gap:2rem}.culture-card{background:rgba(255,248,240,.03);border:1px solid rgba(232,93,4,.15);border-radius:20px;padding:2rem;transition:all .4s}.culture-card:hover{background:rgba(232,93,4,.08);transform:translateY(-5px)}.culture-card i{font-size:2.5rem;color:var(--primary);margin-bottom:1rem;display:block}.culture-card h4{margin-bottom:.8rem;color:var(--cream)}.culture-card p{font-size:.9rem;color:rgba(255,248,240,.7);line-height:1.7}.flavor-section{padding:4rem 5%;max-width:1200px;margin:0 auto}.flavor-hero{display:grid;grid-template-columns:1fr 1fr;grid-gap:4rem;gap:4rem;align-items:center;margin-bottom:5rem}.flavor-profile{background:rgba(255,248,240,.05);border:1px solid rgba(232,93,4,.2);border-radius:30px;padding:3rem}.flavor-bar{margin-bottom:1.5rem}.flavor-bar label{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.9rem;color:var(--cream);font-weight:500}.flavor-bar .bar{height:10px;background:rgba(255,248,240,.1);border-radius:10px;overflow:hidden}.flavor-bar .bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width 1.5s ease}.flavor-text h2{font-family:Playfair Display,serif;font-size:2.5rem;margin-bottom:1rem}.flavor-text .subtitle{color:var(--secondary);font-size:1.1rem;margin-bottom:2rem}.flavor-text p{color:rgba(255,248,240,.8);line-height:1.9;margin-bottom:1.5rem}.sate-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-top:3rem}.sate-feature{text-align:center;padding:2rem;background:rgba(232,93,4,.1);border-radius:20px;border:1px solid rgba(232,93,4,.2)}.sate-feature i{font-size:2rem;color:var(--primary);margin-bottom:1rem;display:block}.sate-feature h4{font-size:1rem;margin-bottom:.5rem}.sate-feature p{font-size:.85rem;color:rgba(255,248,240,.6)}.loyalty-section{padding:4rem 5%;max-width:1200px;margin:0 auto}.loyalty-hero{text-align:center;padding:4rem 2rem;background:linear-gradient(135deg,rgba(232,93,4,.2),rgba(214,40,40,.1));border-radius:30px;margin-bottom:4rem;border:1px solid rgba(232,93,4,.3)}.loyalty-hero i{font-size:4rem;color:var(--accent);margin-bottom:1rem;display:block}.loyalty-hero h2{font-family:Playfair Display,serif;font-size:2.5rem;margin-bottom:1rem}.loyalty-hero p{font-size:1.1rem;color:rgba(255,248,240,.8);max-width:600px;margin:0 auto}.how-it-works{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:2rem;gap:2rem;margin-bottom:4rem}.step-card{text-align:center;padding:2rem;position:relative}.step-number{width:60px;height:60px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:1.5rem;font-weight:700;color:white}.step-card h4{margin-bottom:.8rem;color:var(--cream)}.step-card p{font-size:.9rem;color:rgba(255,248,240,.7)}.rewards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-bottom:3rem}.reward-card{background:rgba(255,248,240,.05);border:1px solid rgba(232,93,4,.2);border-radius:20px;padding:2rem;display:flex;align-items:center;gap:1.5rem;transition:all .3s}.reward-card:hover{transform:translateX(10px);border-color:var(--primary)}.reward-icon{width:60px;height:60px;background:rgba(232,93,4,.2);border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--primary);flex-shrink:0}.reward-info h4{margin-bottom:.3rem;color:var(--cream)}.reward-info .points{color:var(--secondary);font-weight:600;font-size:.9rem}footer{background:rgba(0,0,0,.3);border-top:1px solid rgba(232,93,4,.2);padding:3rem 5%;margin-top:4rem}.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:3rem;gap:3rem}.footer-brand h3{font-family:Playfair Display,serif;font-size:1.5rem;color:var(--primary);margin-bottom:1rem}.footer-brand p{color:rgba(255,248,240,.6);font-size:.9rem;line-height:1.7}.footer-links h4{color:var(--cream);margin-bottom:1rem}.footer-links a{display:block;color:rgba(255,248,240,.6);text-decoration:none;margin-bottom:.5rem;font-size:.9rem;transition:color .3s;cursor:pointer}.footer-links a:hover{color:var(--primary)}.footer-bottom{text-align:center;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,248,240,.1);color:rgba(255,248,240,.4);font-size:.85rem}.scroll-reveal{opacity:0;transform:translateY(30px);transition:all .8s ease}.scroll-reveal.revealed{opacity:1;transform:translateY(0)}@keyframes slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.auth-shell,.dashboard-shell{margin:0 auto;max-width:1120px;min-height:100vh;padding:32px 20px}.auth-shell{align-items:center;display:flex;flex-direction:column;justify-content:center}.auth-card,.panel,.token-card{background:rgba(255,248,240,.06);border:1px solid rgba(232,93,4,.24);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.28)}.auth-card{display:grid;grid-gap:18px;gap:18px;margin-top:20px;max-width:440px;padding:32px;width:100%}.panel{display:grid;grid-gap:16px;gap:16px;padding:26px}.token-card{display:flex;flex-direction:column;justify-content:center;min-height:230px;padding:30px}.token-card strong{color:#f4a261;font-size:64px;line-height:1;margin:10px 0}.eyebrow{color:#f4a261;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.muted{color:rgba(255,248,240,.68);line-height:1.6}.center{text-align:center}label{color:rgba(255,248,240,.82);display:grid;font-size:14px;font-weight:700;grid-gap:8px;gap:8px}input{background:rgba(255,248,240,.1);border:1px solid rgba(255,248,240,.22);border-radius:12px;color:#fff8f0;font:inherit;padding:13px 14px;width:100%}input:focus{border-color:#f4a261;outline:2px solid rgba(244,162,97,.18)}.primary-button{background:linear-gradient(135deg,#e85d04,#d62828);border:0;border-radius:999px;color:white;cursor:pointer;font:inherit;font-weight:800;padding:14px 18px}.ghost-button:disabled,.primary-button:disabled{cursor:wait;opacity:.68}.ghost-button{cursor:pointer}.back-link,.ghost-button{background:rgba(255,248,240,.09);border:1px solid rgba(255,248,240,.24);border-radius:999px;color:#fff8f0;font-size:14px;font-weight:700;padding:10px 14px;text-decoration:none}.form-error{color:#ffb4a8;font-size:14px}.form-success{color:#8ff0b0;font-size:14px}.auth-card a,.dashboard-shell a{color:#f4a261}.dashboard-header{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:28px}.dashboard-grid{display:grid;grid-gap:22px;gap:22px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin-bottom:22px}.history-list{display:grid;grid-gap:12px;gap:12px}.history-row{align-items:center;border-bottom:1px solid rgba(255,248,240,.1);display:flex;justify-content:space-between;padding:12px 0}.history-row div{display:grid;grid-gap:5px;gap:5px}.history-row span{color:rgba(255,248,240,.58);font-size:13px}.positive{color:#8ff0b0}.negative{color:#ffb4a8}@media (max-width:968px){nav{padding:.8rem 4%;flex-wrap:wrap}.nav-links{display:none}.nav-actions{display:flex;align-items:center;gap:6px;flex-shrink:1;min-width:0;overflow:hidden}.user-greeting{display:none!important}.nav-cta{padding:.4rem .8rem;font-size:.75rem}.nav-cta i{margin-right:0}.mobile-menu-btn{display:block}.logo{font-size:1.4rem;gap:.35rem;flex-shrink:0}.logo img{width:32px!important;height:32px!important}.hero{padding-top:110px;padding-bottom:40px;min-height:auto}.dashboard-grid,.flavor-hero,.hero-content,.product-showcase,.story-content{grid-template-columns:1fr;gap:2.5rem}.hero-text{text-align:center}.hero-text h1{font-size:2.8rem}.hero-text p{margin-left:auto;margin-right:auto}.hero-badges,.hero-cta{justify-content:center}.hero-image{order:-1}.product-info,.product-showcase{text-align:center}.buy-buttons,.product-meta{justify-content:center}.story-hero h2{font-size:2.2rem}.story-hero{padding:2rem 1.5rem}.flavor-text h2{font-size:2rem}.flavor-profile{padding:2rem}.loyalty-hero{padding:2.5rem 1.5rem}.footer-content{grid-template-columns:1fr 1fr;gap:2rem}}@media (max-width:768px){.hero-text h1{font-size:2.2rem}.hero-text h3{font-size:.95rem}.flavor-text h2,.loyalty-hero h2,.product-info h2,.section-header h2,.story-hero h2{font-size:1.8rem}.variants-grid{grid-template-columns:1fr}.variant-img{height:210px;padding:1rem}.buy-buttons{flex-direction:column;width:100%}.btn-shopee,.btn-wa{width:100%;justify-content:center}.auth-card{padding:24px}.dashboard-header{align-items:flex-start;flex-direction:column;gap:12px}.token-card strong{font-size:48px}.nav-cta{padding:.35rem .7rem;font-size:.72rem}.features-grid{grid-template-columns:1fr}.feature-card{padding:2rem}.culture-grid{grid-template-columns:1fr}.sate-features{grid-template-columns:1fr 1fr}.rewards-grid{grid-template-columns:1fr}.how-it-works{grid-template-columns:1fr 1fr}.footer-content{grid-template-columns:1fr;gap:2rem}}@media (max-width:480px){nav{padding:.6rem 3%}.logo{font-size:1.2rem}.logo img{width:28px!important;height:28px!important}.hero{padding-top:90px;padding-bottom:30px}.hero-text h1{font-size:1.8rem}.hero-text h3{font-size:.85rem;letter-spacing:2px}.hero-text p{font-size:.95rem}.hero-cta{flex-direction:column;width:100%}.btn-primary,.btn-secondary{width:100%;justify-content:center}.hero-badges{flex-direction:column;align-items:center}.badge{width:100%}.badge,.product-meta{justify-content:center}.product-meta{flex-wrap:wrap;gap:1rem}.flavor-text h2,.loyalty-hero h2,.product-info h2,.section-header h2,.story-hero h2{font-size:1.5rem}.section-header{margin-bottom:2.5rem}.how-it-works,.sate-features{grid-template-columns:1fr}.token-card{min-height:180px;padding:20px}.token-card strong{font-size:40px}.panel{padding:18px}.auth-card{padding:20px}.dashboard-shell{padding:20px 12px}.footer-content{gap:1.5rem}footer{padding:2rem 4%}}