/* D&E — Home page styles */

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero-text h1{font-size:clamp(2.5rem,5.6vw,4.4rem);margin:22px 0 22px;font-weight:800}
.hero-text .lead{font-size:1.16rem;color:var(--text);max-width:34em;font-weight:300;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero-mini{display:flex;gap:36px}
.hero-mini div{display:flex;flex-direction:column}
.hero-mini b{font-family:var(--disp);font-size:1.7rem;font-weight:800;color:var(--white);letter-spacing:-.02em}
.hero-mini span{font-size:.82rem;color:var(--muted);margin-top:2px}

/* hero art collage */
.hero-art{position:relative;height:540px}
.ha-main{position:absolute;right:0;top:0;width:66%;height:100%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel-2)}
.ha-main img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.ha-sub{position:absolute;border-radius:18px;overflow:hidden;border:2px solid var(--ink);box-shadow:0 20px 44px rgba(0,0,0,.55);background:var(--panel-2)}
.ha-sub img{width:100%;height:100%;object-fit:cover}
.ha-sub-1{left:0;top:64px;width:44%;height:230px;z-index:3}
.ha-sub-2{left:6%;bottom:20px;width:38%;height:190px;z-index:3}
.ha-chip{position:absolute;background:rgba(16,19,30,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;padding:14px 18px;z-index:5;box-shadow:0 16px 34px rgba(0,0,0,.5)}
.ha-chip-1{right:6%;bottom:24px;display:flex;flex-direction:column;gap:8px}
.ha-chip-1 .plats{display:flex;gap:8px}
.ha-chip-1 .plats img{width:26px;height:26px}
.ha-chip-1 span{font-size:.78rem;color:var(--text)}
.ha-chip-2{right:-8px;top:40px;text-align:center}
.ha-chip-2 b{font-family:var(--disp);font-size:1.5rem;font-weight:800;display:block}
.ha-chip-2 span{font-size:.72rem;color:var(--muted)}

/* ---------- BRANDS ---------- */
.brands{padding:44px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--ink-2)}
.brands-label{text-align:center;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.bchip{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 12px}
.bchip img{max-height:42px;width:auto;filter:grayscale(1) brightness(1.7) opacity(.85);transition:filter .3s}
.bchip:hover img{filter:none}
.bchip.word{font-family:var(--disp);font-weight:700;font-size:1.3rem;color:var(--muted);letter-spacing:.02em;opacity:.65}
.bchip.name{height:52px;padding:0 30px;font-family:var(--disp);font-weight:700;font-size:1.12rem;letter-spacing:.01em;white-space:nowrap;color:var(--white);border:1px solid rgba(201,152,42,.38);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 8px 22px rgba(0,0,0,.28);transition:border-color .3s,transform .3s,box-shadow .3s}
.bchip.name:hover{border-color:var(--gold);color:var(--gold-soft);transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,152,42,.18)}

/* ---------- STATS ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:44px 20px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius)}
.stat b{font-family:var(--disp);font-size:clamp(3.4rem,7vw,5.2rem);font-weight:800;color:var(--gold);display:block;letter-spacing:-.03em;line-height:1}
.stat b .suf{font-size:.42em;font-style:normal;font-weight:700;color:var(--gold-deep);margin-left:.03em;letter-spacing:0}
.stat>span{font-size:1rem;color:var(--text);margin-top:14px;display:block}
.hero-mini b .suf{font-size:.6em;font-style:normal;font-weight:700;color:var(--muted);margin-left:.02em;letter-spacing:0}

/* ---------- SERVICES ---------- */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.serv{padding:34px 30px 32px;display:flex;flex-direction:column}
.serv-ic{width:56px;height:56px;border-radius:15px;background:linear-gradient(150deg,rgba(232,184,124,.16),rgba(232,184,124,.04));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:22px;transition:.4s}
.serv-ic svg{width:26px;height:26px}
.serv:hover .serv-ic{background:var(--gold);color:var(--ink);transform:rotate(-6deg)}
.serv h3{font-size:1.24rem;margin-bottom:10px}
.serv p{font-size:.96rem;color:var(--text)}
.serv-cta{align-items:center;justify-content:center;flex-direction:row;gap:12px;background:linear-gradient(150deg,rgba(232,184,124,.1),rgba(232,184,124,.02));border-style:dashed;border-color:var(--line);color:var(--gold-soft);font-family:var(--disp);font-weight:600;font-size:1.05rem}
.serv-cta svg{width:22px;height:22px;transition:transform .3s}
.serv-cta:hover svg{transform:translateX(5px)}

/* ---------- CREATORS extra ---------- */
.creator-more{display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(150deg,var(--panel),var(--ink-2));min-height:100%}
.creator-more .cm-inner{display:flex;flex-direction:column;gap:6px;padding:30px}
.creator-more .grad{font-family:var(--disp);font-size:2.6rem;font-weight:800;line-height:1}
.creator-more b{font-family:var(--disp);color:var(--white);font-size:1.1rem;margin-top:6px}
.creator-more span{font-size:.84rem;color:var(--muted)}

/* ---------- WHY ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why-text h2{font-size:clamp(1.9rem,4vw,2.8rem);margin:16px 0 18px}
.why-text>p{color:var(--text);font-size:1.06rem;font-weight:300;margin-bottom:26px}
.why-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.why-list li{display:flex;align-items:center;gap:14px;font-size:1rem;color:var(--cream)}
.why-list svg{width:20px;height:20px;color:var(--gold);flex:0 0 auto;padding:4px;background:rgba(232,184,124,.12);border-radius:50%;box-sizing:content-box}
.why-art{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:4/5}
.why-art img{width:100%;height:100%;object-fit:cover}
.why-badge{position:absolute;left:20px;bottom:20px;background:rgba(11,13,20,.82);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.why-badge b{font-family:var(--disp);font-size:1.2rem;font-weight:800;display:block}
.why-badge span{font-size:.8rem;color:var(--muted)}

/* ---------- CTA INFLUENCERS ---------- */
.cta-box{position:relative;overflow:hidden;text-align:center;background:linear-gradient(150deg,var(--panel),var(--ink-2));border:1px solid var(--line);border-radius:var(--radius-lg);padding:70px 40px}
.cta-box h2{font-size:clamp(2rem,4.4vw,3rem);margin:16px 0 16px;position:relative;z-index:2}
.cta-box p{max-width:40em;margin:0 auto 30px;color:var(--text);font-weight:300;position:relative;z-index:2}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.eyebrow{justify-content:center}

/* ---------- FINAL CTA ---------- */
.final-cta h2{font-size:clamp(2rem,4.6vw,3.2rem)}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-art{height:440px;max-width:520px;margin:0 auto;width:100%}
  .why-grid{grid-template-columns:1fr;gap:36px}
  .serv-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hero-mini{gap:22px}
  .hero-mini b{font-size:1.4rem}
  .hero-art{height:452px}
  .ha-chip{padding:11px 15px}
  .ha-chip-2{top:0;left:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;border-radius:14px}
  .ha-chip-2 b{font-size:1.4rem}
  .ha-chip-2 span{font-size:.8rem}
  .ha-main{top:64px;height:388px;width:64%}
  .ha-sub-1{top:122px;height:150px}
  .ha-sub-2{bottom:16px;height:132px}
  .ha-chip-1{right:2%;bottom:12px}
  .serv-grid{grid-template-columns:1fr}
  .cta-box{padding:48px 22px}
}