/* ============================================================
   PepsPlanit — Homepage-specific styles
   Master design system: do not fork per page.
   Photography: .photo containers are swap-ready — replace inner
   .still SVG with <img class="campaign" src="assets/images/...">
   ============================================================ */

.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--soft-white) 0%,var(--warm-ivory) 100%);padding:116px 0 96px;text-align:center}
.hero-inner{position:relative;z-index:2;max-width:800px;margin:0 auto}
.hero h1{font-size:clamp(44px,6.8vw,84px);margin:22px 0 24px;letter-spacing:-.01em}
.hero h1 i{font-style:italic;color:var(--emerald)}
.hero p{font-size:17px;color:#5f5f5a;max-width:600px;margin:0 auto 38px}
.cine{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(150% 130% at 70% 10%,#33584B 0%,#2A4A3F 45%,#1E3830 100%);color:#fff}
.cine::before{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.cine::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 115%,rgba(20,30,25,.55),transparent 60%)}
.cine-inner{position:relative;z-index:5;max-width:720px;padding:110px 24px}
.cine h2{font-family:var(--display);font-weight:500;color:#fff;font-size:clamp(44px,7vw,86px);line-height:1.02;letter-spacing:.04em;margin-bottom:28px}
.cine h2 span{display:block;font-style:italic;color:var(--gold-soft)}
.cine p{color:#D9E4DE;font-size:16.5px;max-width:560px;margin:0 auto 38px;font-weight:300;line-height:1.8}
.edit-grid{display:grid;grid-template-columns:1.25fr .875fr .875fr;gap:22px}
.edit{position:relative;overflow:hidden;border-radius:var(--radius);min-height:400px;display:flex;align-items:flex-end;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s}
.edit:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.edit-body{position:relative;z-index:6;padding:30px;width:100%;background:linear-gradient(transparent,rgba(20,26,22,.55));color:#fff}
.edit-body h3{color:#fff;font-size:27px;font-style:italic;margin-bottom:6px}
.edit-body p{font-size:13px;color:rgba(255,255,255,.82);margin-bottom:14px;max-width:340px}
.life-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hl-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.hl-main{padding:42px 40px;display:flex;flex-direction:column;justify-content:center}
.hl-main blockquote{font-family:var(--display);font-size:clamp(21px,2.4vw,27px);line-height:1.4;font-style:italic;margin-bottom:22px}
.hl-main cite{font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--emerald)}
.hl-main cite small{display:block;color:#9a948a;letter-spacing:.1em;margin-top:4px;text-transform:none;font-weight:500}
.hl-side{display:grid;gap:20px}
.hl-card{padding:26px;display:flex;gap:16px;align-items:flex-start}
.hl-card .avatar{width:42px;height:42px;border-radius:999px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;color:#fff}
.hl-card p{font-size:13.5px;color:#55554f;margin-bottom:6px}
.hl-card cite{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.vip{background:var(--emerald);color:#fff;position:relative;overflow:hidden}
.vip-inner{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto}
.vip h2{color:#fff;font-size:clamp(30px,4vw,46px);margin:14px 0 16px}
.vip p{color:#DCE7E1;font-size:15.5px;margin-bottom:30px}
.vip-perks{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.vip-perks span{display:flex;align-items:center;gap:8px;color:#EAF1ED}
.vip-perks svg{width:14px;height:14px;stroke:var(--gold-soft);fill:none}
@media (max-width:1080px){
.life-grid{grid-template-columns:repeat(3,1fr)}
.edit-grid{grid-template-columns:1fr 1fr}
.hl-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
.hero{padding:78px 0 70px}
.cine{min-height:480px}
}