:root{--brand-primary:#FF5722;--brand-primary-hover:#E64A19;--brand-light:#FFF3E0;--text-dark:#1E293B;--text-muted:#64748B;--bg-light:#F8FAFC;--white:#FFFFFF;--radius-md:12px;--radius-lg:20px;--radius-pill:50px;--shadow-sm:0 2px 8px rgba(0,0,0,0.04);--shadow-md:0 10px 25px -5px rgba(0,0,0,0.05);--shadow-hover:0 20px 25px -5px rgba(0,0,0,0.1)}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-dark);background-color:var(--bg-light)}
.hero-wrapper{position:relative;padding:100px 0 120px;background-color:#ffffff;overflow:hidden}
.hero-blur-circle{position:absolute;border-radius:50%;filter:blur(80px);z-index:1;opacity:0.6;animation:float-slow 10s infinite alternate ease-in-out}
.hero-blur-1{width:400px;height:400px;background:rgba(255,87,34,0.15);top:-100px;left:-100px}
.hero-blur-2{width:350px;height:350px;background:rgba(14,165,233,0.15);bottom:-50px;right:-50px;animation-delay:-5s}
@keyframes float-slow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,50px) scale(1.1)}}
.hero-top-badge{background:var(--white);padding:8px 16px;border-radius:50px;border:1px solid rgba(0,0,0,0.04);backdrop-filter:blur(4px)}
.live-indicator{display:inline-block;width:8px;height:8px;background-color:#10B981;border-radius:50%;box-shadow:0 0 0 0 rgba(16,185,129,0.4);animation:pulse-green 1.5s infinite}
@keyframes pulse-green{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(16,185,129,0.7)}70%{transform:scale(1);box-shadow:0 0 0 6px rgba(16,185,129,0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.hero-title{font-weight:800;font-size:3.8rem;line-height:1.35;color:var(--text-dark);letter-spacing:-1.5px}
.title-highlight{color:var(--brand-primary);position:relative;display:inline-block;z-index:1;padding:0 4px}
.title-highlight::after{content:'';position:absolute;bottom:8px;left:0;width:100%;height:24px;background-color:var(--brand-primary);opacity:0.15;z-index:-1;border-radius:4px;transform:skewX(-15deg) rotate(-1deg)}
.trend-tag{display:inline-flex;align-items:center;background:var(--white);color:var(--text-dark);text-decoration:none;padding:10px 20px;border-radius:50px;font-size:0.95rem;font-weight:600;border:1px solid rgba(0,0,0,0.05);box-shadow:0 2px 6px rgba(0,0,0,0.02);transition:all 0.3s ease}
.trend-tag i{color:var(--brand-primary);transition:color 0.3s ease}
.trend-tag:hover{background:var(--brand-primary);color:var(--white);border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:0 8px 15px rgba(255,87,34,0.15)}
.trend-tag:hover i{color:var(--white)}
@media (max-width:768px){.hero-wrapper{padding:80px 0 90px}.hero-title{font-size:2.5rem}.hero-blur-1{width:250px;height:250px}.hero-blur-2{width:250px;height:250px}.title-highlight::after{height:8px;bottom:4px}.trend-tag{padding:8px 16px;font-size:0.9rem}}
.section-container{padding:70px 0;background:transparent}
.section-title{font-size:1.8rem;font-weight:700;color:var(--text-dark);margin-bottom:0.25rem}
.section-desc{color:var(--text-muted);font-size:1rem}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;padding-bottom:0}
.brand-grid-layout{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px;width:100%}
.brand-logo-item{height:90px;background:var(--white);border-radius:var(--radius-md);padding:15px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:all 0.3s cubic-bezier(0.16,1,0.3,1);border:1px solid rgba(0,0,0,0.02);cursor:pointer}
.brand-logo-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(255,87,34,0.2)}
.brand-logo-item img{max-width:100%;max-height:50px;object-fit:contain;transition:transform 0.3s ease}
.brand-logo-item:hover img{transform:scale(1.05)}
.why-bento-section{background-color:var(--bg-light);overflow:hidden}
.bento-grid{display:grid;grid-template-columns:5fr 7fr;gap:24px;max-width:1200px;margin:0 auto}
.bento-right-col{display:flex;flex-direction:column;gap:24px}
.bento-card{background:var(--white);border-radius:28px;padding:40px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.04);box-shadow:0 10px 30px -10px rgba(0,0,0,0.03);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s ease;display:flex;flex-direction:column}
.bento-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -10px rgba(0,0,0,0.08)}
.brand-bg{background:linear-gradient(145deg,#FFF7F2 0%,#FFFFFF 100%)}
.blue-bg{background:linear-gradient(145deg,#F0F9FF 0%,#FFFFFF 100%);justify-content:center}
.green-bg{background:linear-gradient(145deg,#F0FDF4 0%,#FFFFFF 100%);justify-content:center}
.icon-glass{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 8px 16px rgba(0,0,0,0.05);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.6)}
.icon-glass.orange{background:rgba(255,87,34,0.1);color:var(--brand-primary)}
.icon-glass.blue{background:rgba(14,165,233,0.1);color:#0EA5E9}
.icon-glass.green{background:rgba(16,185,129,0.1);color:#10B981}
.bento-bg-icon{position:absolute;right:-20px;bottom:-30px;font-size:180px;opacity:0.03;z-index:1;transform:rotate(-15deg);transition:transform 0.5s ease}
.bento-card:hover .bento-bg-icon{transform:rotate(0deg) scale(1.1)}
.bento-content{position:relative;z-index:2}
.bento-content h3{font-size:1.5rem;letter-spacing:-0.5px;color:var(--text-dark)}
.bento-content p{font-size:1.05rem;line-height:1.6}
.visual-mockup{margin-top:auto;padding-top:30px;position:relative;z-index:2}
.mockup-coupon{background:var(--white);border:2px dashed #FFD0C0;border-radius:16px;padding:16px 24px;box-shadow:0 10px 20px -5px rgba(255,87,34,0.1);transform:rotate(-2deg);transition:transform 0.3s ease}
.bento-card:hover .mockup-coupon{transform:rotate(0deg) scale(1.02)}
.code-text{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:1.2rem;letter-spacing:2px}
.badge-success-soft{background:#E2F8EE;color:#10B981;padding:6px 12px;border-radius:50px;font-size:0.85rem;font-weight:700}
.live-pulse{display:inline-block;width:10px;height:10px;background-color:#EF4444;border-radius:50%;position:relative;margin-left:5px}
.live-pulse::after{content:'';position:absolute;width:100%;height:100%;background-color:#EF4444;border-radius:50%;top:0;left:0;animation:pulse-animation 1.5s infinite}
@keyframes pulse-animation{0%{transform:scale(1);opacity:0.8}100%{transform:scale(3);opacity:0}}
@media (max-width:991px){.bento-grid{grid-template-columns:1fr}.card-tall{min-height:400px}.bento-card{padding:30px}}
@media (max-width:768px){.hero-wrapper{padding:60px 0 70px}.hero-title{font-size:2.2rem}.hero-search-form{flex-direction:column;padding:10px;border-radius:var(--radius-md)}.hero-search-form .input-wrapper{padding:10px;margin-bottom:10px}.hero-btn-primary{width:100%;border-radius:8px}.section-header{flex-direction:column;align-items:flex-start;gap:5px}}