/* BrandGram — Hub (/) — estilos específicos desta página.
   Tokens e componentes reutilizáveis vêm de base.css. */

/* Hero do hub: mais editorial/espaçoso que o hero de produto */
.hub-hero{position:relative;padding:64px 0 40px;overflow:hidden}
.hub-hero .sub{max-width:680px}
.hub-hero .wrap{position:relative;z-index:1}
.hub-hero .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hub-hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.4}
.hub-hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,transparent 30%,transparent 55%,var(--bg) 96%)}
@media(max-width:640px){ .hub-hero .hero-bg img{opacity:.3} }

/* Sobre — texto grande + bloco complementar */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.about-grid .lead{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,34px);line-height:1.35;letter-spacing:-.3px}
.about-grid .lead em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold)}
.about-side{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px}
.about-side .eyebrow{margin-bottom:12px}
.about-side p{color:var(--txt-mut);font-size:14.5px;line-height:1.7}
@media(max-width:900px){ .about-grid{grid-template-columns:1fr;gap:32px} }

/* Pilares "Por que BrandGram" — numerados */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{padding:26px 4px;border-top:1px solid var(--line-soft)}
.pillar .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(145deg,var(--blue),var(--blue-soft));border:1px solid var(--line);color:var(--gold)}
.pillar .n{font-family:var(--display);color:var(--gold);font-size:14px;font-weight:600;letter-spacing:1px;margin-bottom:14px;display:block}
.pillar h3{font-family:var(--display);font-weight:600;font-size:18.5px;margin-bottom:8px}
.pillar p{color:var(--txt-mut);font-size:14px;line-height:1.6}
@media(max-width:900px){ .pillars{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .pillars{grid-template-columns:1fr} }

/* Produtos: cabeçalho de seção alinhado à esquerda (mais storefront, menos "LP") */
.products-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;text-align:left}
.products-head h2{margin:0}
.products-head p{color:var(--txt-mut);font-size:15px;max-width:360px}
@media(max-width:640px){ .products-head{flex-direction:column;align-items:flex-start} }