/*
Theme Name: El Dinamo Professional
Author: M365 Copilot
Version: 1.0
Description: Elementor compatible El Dinamo theme
*/


:root{
  --orange:#FF6B1A;
  --orange-2:#FF8A3D;
  --blue:#1E8FE1;
  --blue-2:#0B5FA8;
  --ink:#0B0B0B;
  --grey:#6B7280;
  --line:#EAEAEA;
  --bg:#FFFFFF;
  --bg-soft:#F7F8FA;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; overflow-x:hidden;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
.display{font-family:'Anton',sans-serif; text-transform:uppercase; line-height:0.98; letter-spacing:0.005em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1280px; margin:0 auto; padding:0 40px;}
img{max-width:100%; display:block;}

/* ================= NAV ================= */
header.nav{position:sticky; top:0; z-index:90; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:1280px; margin:0 auto; padding:14px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo-badge{width:52px; height:52px; flex-shrink:0;}
.nav-links{display:flex; gap:30px; font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;}
.nav-links a{position:relative; padding-bottom:6px; color:var(--ink); opacity:0.85;}
.nav-links a.active{opacity:1;}
.nav-links a.active::after{content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--orange);}
.nav-links a:hover{opacity:1;}
.nav-right{display:flex; align-items:center; gap:20px;}
.icon-btn{position:relative; width:22px; height:22px; opacity:0.8; cursor:pointer;}
.cart-badge{position:absolute; top:-6px; right:-8px; background:var(--orange); color:#fff; font-size:9px; font-weight:800; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.btn-shop{background:linear-gradient(90deg, var(--orange), var(--orange-2)); color:#fff; font-weight:800; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; padding:12px 22px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; transition:transform .15s ease, box-shadow .15s ease;}
.btn-shop:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,107,26,0.35);}
@media(max-width:900px){.nav-links{display:none;}}

/* ================= HERO ================= */
.hero{padding:70px 0 30px; position:relative; overflow:hidden;}
.hero-inner{max-width:1280px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center;}
.hero h1{font-size:clamp(38px,5.4vw,64px);}
.hero h1 .accent{color:var(--orange);}
.hero-sub{margin-top:18px; max-width:420px; color:var(--grey); font-size:15.5px; line-height:1.65;}
.hero-ctas{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap;}
.btn-outline{border:2px solid var(--ink); color:var(--ink); font-weight:800; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; padding:11px 22px; border-radius:6px; display:inline-flex; align-items:center; gap:8px; transition:background .15s ease, color .15s ease;}
.btn-outline:hover{background:var(--ink); color:#fff;}
.hero-visual{position:relative; display:flex; justify-content:center; animation:can-float 5.5s ease-in-out infinite;}
@keyframes can-float{0%,100%{transform:translateY(0) rotate(-1.5deg);} 50%{transform:translateY(-14px) rotate(1.5deg);}}
.hero-visual img{max-width:420px; width:100%; filter:drop-shadow(0 30px 40px rgba(0,0,0,0.18));}
.watch-power{position:absolute; right:6%; bottom:8%; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
.play-btn{width:56px; height:56px; border-radius:50%; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; background:#fff; cursor:pointer; transition:transform .15s ease;}
.play-btn:hover{transform:scale(1.08);}
.watch-power .lbl{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; max-width:80px;}
.scroll-cue{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:34px; font-size:10.5px; font-weight:700; letter-spacing:0.12em; color:var(--grey); text-transform:uppercase;}
.scroll-cue svg{animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;} .hero-visual{order:-1; margin-bottom:10px;} .watch-power{display:none;}}

/* ================= STATS BAR ================= */
.stats{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0;}
.stats-row{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.stat-item{display:flex; align-items:center; gap:12px;}
.stat-item .ic{width:38px; height:38px; flex-shrink:0;}
.stat-item .n{font-family:'Anton',sans-serif; font-size:26px; line-height:1;}
.stat-item .n small{font-size:12px; font-weight:700; margin-left:2px;}
.stat-item .l{font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--grey); margin-top:2px;}
@media(max-width:900px){.stats-row{grid-template-columns:repeat(2,1fr); row-gap:24px;}}

/* ================= WHEN YOU NEED MORE ================= */
.section{padding:90px 0;}
.section-title{text-align:center; font-size:clamp(28px,3.6vw,42px); margin-bottom:44px;}
.section-title .accent{color:var(--blue);}
.lifestyle-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.life-card{position:relative; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background-size:cover; background-position:center;}
.life-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);}
.life-card .lbl{position:absolute; left:14px; bottom:14px; z-index:2; color:#fff; font-weight:800; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; display:flex; align-items:center; gap:6px;}
.life-card .lbl svg{width:14px; height:14px;}
.life-1{background:linear-gradient(140deg,#2b2b2b,#4a3020);}
.life-2{background:linear-gradient(140deg,#1c2430,#0e1420);}
.life-3{background:linear-gradient(140deg,#26313d,#0f1620);}
.life-4{background:linear-gradient(140deg,#2a2020,#120c0c);}
.life-5{background:linear-gradient(140deg,#3a2410,#150a12);}
@media(max-width:900px){.lifestyle-grid{grid-template-columns:repeat(2,1fr);}}

/* ================= OUR ENERGY (feature + can + comparison) ================= */
.energy-section{background:var(--bg-soft);}
.energy-grid{display:grid; grid-template-columns:0.9fr 0.7fr 1fr; gap:30px; align-items:center;}
.energy-eyebrow{font-size:12px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue);}
.energy-grid h2{font-size:clamp(28px,3.2vw,38px); margin-top:10px;}
.energy-grid h2 .accent{color:var(--blue);}
.feature-list{margin-top:26px; display:flex; flex-direction:column; gap:18px;}
.feature-item{display:flex; gap:12px;}
.feature-item .ic{width:22px; height:22px; flex-shrink:0; margin-top:2px;}
.feature-item .ft{font-weight:800; font-size:13.5px; color:var(--blue); text-transform:uppercase; letter-spacing:0.02em;}
.feature-item .fd{font-size:13px; color:var(--grey); margin-top:2px;}
.can-center{display:flex; justify-content:center; position:relative;}
.can-center img{max-width:220px; width:100%; animation:can-float 6s ease-in-out infinite;}

.compare-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px; box-shadow:0 10px 30px rgba(0,0,0,0.04);}
.compare-card h3{font-size:18px; margin-bottom:16px;}
.compare-card h3 .accent{color:var(--blue);}
.compare-table{width:100%; border-collapse:collapse;}
.compare-table th{font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--grey); font-weight:700; padding-bottom:10px; text-align:center;}
.compare-table th:first-child{text-align:left;}
.compare-table td{padding:9px 0; border-top:1px solid var(--line); font-size:12.5px; font-weight:600;}
.compare-table td:not(:first-child){text-align:center; width:70px;}
.check{color:var(--blue); font-weight:900;}
.cross{color:#c7c7c7; font-weight:900;}
.other-can{margin-top:16px; display:flex; justify-content:center;}
.other-can img{max-width:70px;}
@media(max-width:1050px){.energy-grid{grid-template-columns:1fr;} .can-center{order:-1;}}

/* ================= POWER BANNER ================= */
.power-banner{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:70px 0;}
.power-banner .circuit{position:absolute; right:0; top:0; bottom:0; width:55%; opacity:0.5;}
.power-inner{position:relative; z-index:2; display:flex; align-items:center; gap:40px;}
.power-inner h2{font-size:clamp(30px,4.4vw,50px);}
.power-inner h2 .accent{color:var(--orange);}
.power-inner p{margin-top:10px; color:#c9c9c9; font-size:14.5px;}
.power-can{position:relative; z-index:2; max-width:220px; margin-left:auto; animation:can-float 6s ease-in-out infinite;}
@media(max-width:800px){.power-inner{flex-direction:column; text-align:center;} .power-can{margin:0 auto;}}

/* ================= WHERE TO BUY ================= */
.buy-strip{padding:64px 0; text-align:center;}
.buy-strip h3{font-size:22px;}
.buy-strip p{margin-top:6px; color:var(--grey); font-size:13.5px;}
.retail-row{margin-top:32px; display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap;}
.retail-row .rname{font-weight:800; font-size:16px; color:#333; opacity:0.85;}
.more-stores{margin-top:26px; display:inline-flex; align-items:center; gap:8px; border:2px solid var(--ink); padding:11px 20px; border-radius:6px; font-weight:800; font-size:12.5px; text-transform:uppercase;}

/* ================= FOOTER ================= */
footer{background:var(--ink); color:#fff; padding:26px 0;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.footer-inner .logo-badge{width:36px; height:36px;}
.footer-inner p{font-size:12px; color:#aaa;}
.social-row{display:flex; gap:14px;}
.social-row a{width:32px; height:32px; border-radius:50%; border:1px solid #333; display:flex; align-items:center; justify-content:center; transition:border-color .2s, transform .2s;}
.social-row a:hover{border-color:var(--orange); transform:translateY(-2px);}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:translateY(0);}