/* =========================================================
   Acabamento visual (camada final, carregada depois de efeitos.css)
   Sombras em camadas, gradientes de luz, grão fino e brilho nos botões,
   para o site ter cara de arte finalizada, mantendo a base branca com azul.
   ========================================================= */
:root {
  --grad-blue: linear-gradient(145deg, #2f5bff 0%, #0130c8 55%, #0020a0 100%);
  --grad-text: linear-gradient(100deg, #0130c8 0%, #2f5bff 55%, #14a6e8 100%);
  --edge: rgba(1, 48, 200, .10);
  --shadow-sm: 0 1px 2px rgba(0, 8, 102, .05), 0 6px 16px -8px rgba(0, 8, 102, .12);
  --shadow-md: 0 1px 2px rgba(0, 8, 102, .05), 0 12px 28px -12px rgba(0, 8, 102, .20), 0 34px 60px -34px rgba(0, 8, 102, .26);
  --shadow-lg: 0 2px 4px rgba(0, 8, 102, .06), 0 22px 40px -16px rgba(0, 8, 102, .26), 0 60px 100px -50px rgba(1, 48, 200, .40);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .12  0 0 0 0 .35  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: #cfdcff; color: var(--ink); }
body { text-rendering: optimizeLegibility; }

/* ---------- Tipografia ---------- */
.h2 { letter-spacing: -.025em; }
.page-hero h1, .hs-title { font-weight: 800; letter-spacing: -.035em; }
.page-hero h1 em, .hs-title em {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.eyebrow {
  display: inline-flex; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 12px;
  background: linear-gradient(180deg, #fff, #f1f5ff); border: 1px solid var(--edge); box-shadow: 0 1px 2px rgba(0, 8, 102, .05);
}
.eyebrow::after { display: none !important; }
.eyebrow-cyan { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.section-head-center .eyebrow { display: inline-flex; }

/* ---------- Botões com brilho ---------- */
.btn { transition: background-color .2s, color .2s, border-color .2s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.btn-blue {
  background: var(--grad-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 4px rgba(1, 48, 200, .18), 0 12px 24px -10px rgba(1, 48, 200, .70);
}
.btn-blue:hover {
  background: linear-gradient(145deg, #4a72ff 0%, #0a3ae0 55%, #0028b8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 4px 8px rgba(1, 48, 200, .2), 0 20px 34px -12px rgba(1, 48, 200, .75);
}
.btn-outline { background: rgba(255, 255, 255, .85); border-color: rgba(1, 48, 200, .32); box-shadow: 0 1px 2px rgba(0, 8, 102, .05), 0 8px 18px -10px rgba(0, 8, 102, .22); }
.btn-outline:hover { background: var(--grad-blue); border-color: transparent; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-blue:hover, .btn-outline:hover { transform: translateY(-2px); }
}

/* ---------- Cabeçalho de vidro ---------- */
.site-header {
  background: rgba(255, 255, 255, .80); border-bottom-color: var(--edge);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 10px 30px -24px rgba(0, 8, 102, .35);
}

/* ---------- Aberturas: grade fina, luz e grão ---------- */
.page-hero {
  background:
    radial-gradient(760px 520px at 82% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(820px 560px at 8% 100%, #dbe5ff, rgba(219, 229, 255, 0) 65%),
    linear-gradient(180deg, #f8faff 0%, #eaf0ff 100%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain), linear-gradient(rgba(1, 48, 200, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 48, 200, .05) 1px, transparent 1px);
  background-size: 200px 200px, 56px 56px, 56px 56px; opacity: .6;
  -webkit-mask-image: radial-gradient(70% 85% at 72% 40%, #000, transparent 78%); mask-image: radial-gradient(70% 85% at 72% 40%, #000, transparent 78%);
}
.sankhya-badge { background: rgba(255, 255, 255, .9); border-color: var(--edge); box-shadow: var(--shadow-sm); }

/* Imagens de abertura (composições em camadas) */
.hero-art { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.hs-stage { border: 0; background: #eaf0ff; box-shadow: 0 0 0 1px var(--edge), var(--shadow-lg); }
.hs-stage::before { display: none; }
.hs-vis { display: block; }
.hs-stage .hero-art, .page-hero .tilt .hs-stage img.hero-art { position: static; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.page-hero .tilt::before, .page-hero .tilt-depth, .hero-photo::before { display: none; }
.hero-photo img.hero-art, .page-hero .tilt img.hero-art { aspect-ratio: 1 / 1; border-radius: 32px; box-shadow: 0 0 0 1px var(--edge), var(--shadow-lg); }
.page-hero .tilt-glare { border-radius: 32px; }
@media (max-width: 900px) {
  .hs-stage { aspect-ratio: 1 / 1; }
  .hero-slider .hero-visual, .hero-photo.hero-visual { max-width: 520px; width: 100%; }
}
@media (max-width: 640px) {
  .hs-stage, .hero-photo img.hero-art, .page-hero .tilt img.hero-art, .page-hero .tilt-glare { border-radius: 24px; }
}

/* ---------- Números ---------- */
.stats { position: relative; background: linear-gradient(180deg, #fff, #fbfcff); border-bottom-color: var(--edge); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset; }
.stats-list strong { font-weight: 800; letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.stats-list li + li { border-left-color: var(--edge); }

/* ---------- Seções suaves com luz ---------- */
.section-soft, .caminho {
  position: relative; isolation: isolate;
  background:
    radial-gradient(900px 520px at 88% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%),
    radial-gradient(760px 520px at 0% 100%, #dbe5ff, rgba(219, 229, 255, 0) 62%),
    linear-gradient(180deg, #f3f6ff 0%, #ebf0ff 100%);
}
.section-soft::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .22;
}

/* ---------- Cartões: borda fina, sombra em camadas, luz no topo ---------- */
.svc, .mini-prod, .why-steps li, .why li, .door, .prod, .member, .tile, .insta-inner, .post-card a, .only-sankhya, .modules, .logos-track li, .person-front {
  border-color: var(--edge);
  box-shadow: var(--shadow-sm);
}
.svc, .mini-prod, .why li, .member, .tile, .insta-inner, .post-card a, .only-sankhya, .logos-track li {
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
.svc, .mini-prod, .why-steps li, .why li, .prod, .member, .tile, .post-card a, .door { border-radius: 22px; }
@media (hover: hover) {
  .svc:hover, .mini-prod:hover, .member:hover, .tile:hover, .post-card a:hover, .door:hover, .prod:hover, .why-steps li:hover { box-shadow: var(--shadow-lg); border-color: rgba(1, 48, 200, .22); }
  .logos-track li { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
  .logos-track li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
.js .why-steps li.is-lit { box-shadow: var(--shadow-md); }

/* Ícones em pastilha azul com brilho */
.svc-ico {
  color: #fff; background: var(--grad-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 18px -8px rgba(1, 48, 200, .6);
}
@media (hover: hover) { .svc:hover .svc-ico { background: var(--grad-blue); } }
.prod-head .svc-ico { background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 16px -8px rgba(0, 0, 0, .3); }
.why-steps .step-n, .story-n { background: var(--grad-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 16px -8px rgba(1, 48, 200, .6); }

/* Cartões azuis: degradê de luz, grão e foto que se funde no azul */
.door-main, .prod-head, .people-photo .person-back {
  background:
    radial-gradient(420px 260px at 85% 0%, rgba(80, 140, 255, .55), rgba(80, 140, 255, 0) 70%),
    linear-gradient(160deg, #0a3ae0 0%, #0130c8 45%, #00128a 100%);
}
.door-main { box-shadow: var(--shadow-md), 0 30px 60px -30px rgba(1, 48, 200, .55); }
.door-main .door-body { position: relative; }
.door-main .door-body::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 48, 200, 0) 0%, rgba(4, 52, 210, .85) 100%);
}
.door-main::after, .prod-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .35; mix-blend-mode: overlay;
}
.prod-head::before { z-index: 0; }
.prod-head > * { position: relative; z-index: 1; }

/* Fotos: leve tratamento de cor */
.door-img, .about-photo img, .split-img img, .story-img img, .post-card img { filter: contrast(1.04) saturate(.96); }

/* ---------- Quadradinhos dos diretores ---------- */
.tile img, .hero-tiles .tile img { box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(1, 48, 200, .85), 0 12px 24px -8px rgba(0, 8, 102, .45); }
.tiles-panel { border: 0; box-shadow: 0 0 0 1px var(--edge), var(--shadow-lg); background:
  radial-gradient(420px 300px at 85% 0%, #fff, rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #eaf0ff 0%, #f8faff 50%, #e2eaff 100%); }
.person-photo { box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(1, 48, 200, .85), 0 14px 28px -10px rgba(0, 8, 102, .45); }

/* ---------- Chips e listas ---------- */
.chips li { border-color: var(--edge); background: linear-gradient(180deg, #fff, #f6f8ff); box-shadow: 0 1px 2px rgba(0, 8, 102, .05); }
.flow-chips li, .case-tag, .prod-tag { background: linear-gradient(180deg, #f3f6ff, #e8eeff); }

/* ---------- Faixa de contato ---------- */
.cta-box {
  border-color: var(--edge); box-shadow: var(--shadow-md);
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(47, 91, 255, .16), rgba(47, 91, 255, 0) 70%),
    radial-gradient(520px 320px at 0% 100%, rgba(34, 211, 238, .12), rgba(34, 211, 238, 0) 70%),
    linear-gradient(135deg, #f4f7ff 0%, #fff 60%, #eef3ff 100%);
}
.cta-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .5;
}

/* ---------- Rodapé com luz ---------- */
.site-footer {
  position: relative; isolation: isolate;
  background:
    radial-gradient(800px 420px at 88% 0%, rgba(47, 91, 255, .32), rgba(47, 91, 255, 0) 65%),
    radial-gradient(620px 320px at 0% 100%, rgba(34, 211, 238, .10), rgba(34, 211, 238, 0) 65%),
    #00054a;
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .25; mix-blend-mode: overlay;
}

/* ---------- Pop-up do e-book ---------- */
.ebook-card { box-shadow: 0 0 0 1px var(--edge), 0 50px 100px -30px rgba(0, 3, 50, .55); }
.ebook-cover { background: radial-gradient(200px 160px at 90% 0%, rgba(80, 140, 255, .6), rgba(80, 140, 255, 0) 70%), linear-gradient(160deg, #0a3ae0, #00128a); }
.door-main > * { position: relative; z-index: 1; }

/* Fotos da história em cartão azul (antes recortadas em gota sobre o branco) */
.split-img img, .story-img img { border-radius: 28px; box-shadow: 0 0 0 1px var(--edge), var(--shadow-lg); }
@media (max-width: 640px) { .split-img img, .story-img img { border-radius: 20px; } }