/* ===================================================================
   OSV Consultoria — design system
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --black:#000000;
  --white:#ffffff;
  --gray-bg:#f7f7f5;
  --gray-line:#e4e4e0;
  --ink:#141414;
  --ink-soft:#55564f;
  --muted:#8c8d86;
  --white-soft:rgba(255,255,255,.72);
  --white-faint:rgba(255,255,255,.14);
  --max:1220px;
  --pad:6.4vw;
  --serif-tight:-0.03em;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  margin:0;
  color:inherit;
  font-weight:700;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.on-black a:focus-visible,.on-black button:focus-visible,.on-black summary:focus-visible{
  outline-color:var(--white);
}

/* ---------- header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem var(--pad);
  color:var(--white);
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  transition:background .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled{
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(6px);
  padding-top:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-0.01em;
}
.brand span{ color:var(--muted); font-weight:500; }
.header-links{
  display:flex;
  align-items:center;
  gap:2.2rem;
}
.header-phone{
  font-size:.92rem;
  color:var(--white-soft);
  display:none;
}
@media (min-width:860px){ .header-phone{ display:inline; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.95rem 1.9rem;
  border-radius:2px;
  font-weight:600;
  font-size:.98rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-light{
  background:var(--white);
  color:var(--black);
}
.btn-light:hover{ background:#e9e9e6; }
.btn-dark{
  background:var(--black);
  color:var(--white);
}
.btn-dark:hover{ background:#232323; }
.btn-outline-black{
  background:transparent;
  color:var(--black);
  border-color:var(--black);
}
.btn-outline-black:hover{ background:var(--black); color:var(--white); }
.btn-sm{
  padding:.7rem 1.3rem;
  font-size:.88rem;
}

/* ---------- hero ---------- */
.hero{
  background:var(--black);
  color:var(--white);
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:9rem;
  padding-bottom:5rem;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.15fr .95fr;
  gap:4.5rem;
  align-items:center;
  width:100%;
}
@media (max-width:920px){
  .hero .wrap{ grid-template-columns:1fr; gap:3.2rem; }
  .hero{ padding-top:7.5rem; }
}
.hero-eyebrow{
  font-size:.92rem;
  color:var(--muted);
  margin-bottom:1.6rem;
  font-weight:500;
}
.hero h1{
  font-size:clamp(2.3rem,4.6vw,4.15rem);
  line-height:1.06;
  letter-spacing:var(--serif-tight);
  font-weight:800;
  max-width:15ch;
}
.hero-sub{
  margin-top:1.9rem;
  font-size:1.14rem;
  line-height:1.65;
  color:var(--white-soft);
  max-width:46ch;
}
.hero-cta-row{
  margin-top:2.6rem;
  display:flex;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
}
.hero-cta-note{
  font-size:.88rem;
  color:var(--muted);
}
.hero-anim{
  animation:rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.hero-anim.d1{ animation-delay:.08s; }
.hero-anim.d2{ animation-delay:.18s; }
.hero-anim.d3{ animation-delay:.28s; }
.hero-anim.d4{ animation-delay:.4s; }
@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- hero data panel (custom illustration) ---------- */
.panel{
  position:relative;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  padding:1.6rem;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  grid-template-rows:auto auto;
  gap:1rem;
}
.panel-head{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.78rem;
  color:var(--muted);
}
.panel-head .dot{
  width:6px; height:6px; border-radius:50%;
  background:#7d7d7d;
  display:inline-block;
  margin-right:.5rem;
}
.panel-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:3px;
  padding:1.1rem 1.2rem;
}
.panel-kpi .num{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:2.1rem;
  font-weight:800;
  letter-spacing:-0.02em;
}
.panel-kpi .lbl{
  font-size:.78rem;
  color:var(--muted);
  margin-top:.35rem;
}
.panel-trend svg{ width:100%; height:64px; display:block; }
.panel-bars{ grid-column:1/-1; }
.panel-bars .lbl{ font-size:.78rem; color:var(--muted); margin-bottom:.7rem; }
.panel-bars svg{ width:100%; height:78px; display:block; }

/* ---------- positioning ---------- */
.positioning{
  background:var(--white);
  padding:8.5rem 0;
}
.positioning-head{
  max-width:820px;
  margin:0 auto 4.5rem;
  text-align:center;
}
.positioning-head h2{
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:var(--serif-tight);
  line-height:1.18;
}
.positioning-split{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:3.2rem;
  max-width:960px;
  margin:0 auto;
}
@media (max-width:760px){
  .positioning-split{ grid-template-columns:1fr; gap:2.4rem; }
  .positioning-split .rule{ display:none; }
}
.positioning-split .rule{ background:var(--gray-line); }
.pos-col h3{
  font-size:1.05rem;
  margin-bottom:.9rem;
  font-weight:700;
}
.pos-col p{
  color:var(--ink-soft);
  font-size:1.02rem;
  max-width:42ch;
}

/* ---------- authority ---------- */
.authority{
  background:var(--gray-bg);
  padding:8.5rem 0;
  border-top:1px solid var(--gray-line);
  border-bottom:1px solid var(--gray-line);
}
.authority-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:end;
  margin-bottom:4.5rem;
}
@media (max-width:820px){
  .authority-top{ grid-template-columns:1fr; }
}
.authority-top h2{
  font-size:clamp(2rem,3.6vw,3.1rem);
  letter-spacing:var(--serif-tight);
  line-height:1.1;
}
.authority-top p{
  color:var(--ink-soft);
  font-size:1.03rem;
  max-width:48ch;
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--ink);
}
@media (max-width:760px){
  .stat-grid{ grid-template-columns:1fr; }
}
.stat{
  padding:2.2rem 2rem 2.2rem 0;
  border-bottom:1px solid var(--gray-line);
}
.stat + .stat{ padding-left:2rem; }
@media (min-width:761px){
  .stat{ border-right:1px solid var(--gray-line); }
  .stat:last-child{ border-right:none; }
}
.stat .num{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:clamp(2rem,3vw,2.6rem);
  letter-spacing:-0.02em;
}
.stat .desc{
  margin-top:.7rem;
  color:var(--ink-soft);
  font-size:.98rem;
  max-width:30ch;
}
.stat .src{
  margin-top:.9rem;
  font-size:.82rem;
  color:var(--muted);
}
.authority-note{
  margin-top:2.4rem;
  font-size:.88rem;
  color:var(--muted);
  max-width:60ch;
}

/* ---------- pillars ---------- */
.pillars{
  background:var(--black);
  color:var(--white);
  padding:8.5rem 0;
}
.pillars-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:3.5rem;
  flex-wrap:wrap;
}
.pillars-head h2{
  font-size:clamp(2rem,3.6vw,3.1rem);
  letter-spacing:var(--serif-tight);
}
.pillars-head p{
  color:var(--white-soft);
  max-width:36ch;
  font-size:1rem;
}
.pillar-list{
  border-top:1px solid rgba(255,255,255,.15);
}
.pillar{
  border-bottom:1px solid rgba(255,255,255,.15);
}
.pillar summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:1.6rem;
  padding:1.9rem 0;
  transition:padding-left .25s ease;
}
.pillar summary::-webkit-details-marker{ display:none; }
.pillar summary:hover{ padding-left:.6rem; }
.pillar .idx{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--muted);
  font-size:.95rem;
  width:2.4rem;
  flex-shrink:0;
}
.pillar summary h3{
  font-size:clamp(1.15rem,2.1vw,1.55rem);
  font-weight:600;
  flex:1;
}
.pillar .plus{
  position:relative;
  width:18px; height:18px;
  flex-shrink:0;
}
.pillar .plus::before,.pillar .plus::after{
  content:"";
  position:absolute;
  background:var(--white);
  transition:transform .25s ease, opacity .25s ease;
}
.pillar .plus::before{ width:100%; height:1px; top:50%; left:0; transform:translateY(-50%); }
.pillar .plus::after{ height:100%; width:1px; left:50%; top:0; transform:translateX(-50%); }
.pillar[open] .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.pillar-body{
  padding:0 0 2.1rem 4rem;
  color:var(--white-soft);
  font-size:1rem;
  max-width:60ch;
}
@media (max-width:600px){
  .pillar-body{ padding-left:0; }
}

/* ---------- final cta / footer ---------- */
.final-cta{
  background:var(--white);
  padding:8rem 0 3rem;
}
.final-cta-inner{
  text-align:center;
  max-width:700px;
  margin:0 auto 5rem;
}
.final-cta-inner h2{
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  letter-spacing:var(--serif-tight);
  margin-bottom:1.3rem;
}
.final-cta-inner p{
  color:var(--ink-soft);
  font-size:1.05rem;
  margin-bottom:2.4rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:2.5rem;
  padding-top:3rem;
  border-top:1px solid var(--gray-line);
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
}
.footer-brand h3{
  font-size:1.2rem;
  margin-bottom:.8rem;
}
.footer-brand p{
  color:var(--ink-soft);
  font-size:.96rem;
  max-width:34ch;
}
.footer-col h4{
  font-size:.82rem;
  color:var(--muted);
  font-weight:600;
  margin-bottom:1rem;
}
.footer-col ul li{ margin-bottom:.6rem; font-size:.96rem; }
.footer-col ul li a{ color:var(--ink); }
.footer-col ul li a:hover{ color:var(--ink-soft); }
.footer-bottom{
  margin-top:3.5rem;
  padding-top:1.6rem;
  border-top:1px solid var(--gray-line);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.84rem;
  color:var(--muted);
}

/* ---------- thank you page ---------- */
.thanks-page{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh var(--pad);
  background:var(--white);
}
.thanks-box{
  text-align:center;
  max-width:560px;
}
.thanks-mark{
  width:52px; height:52px;
  border:1px solid var(--ink);
  border-radius:50%;
  margin:0 auto 2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thanks-mark svg{ width:20px; height:20px; }
.thanks-box h1{
  font-size:clamp(2rem,4.4vw,2.9rem);
  letter-spacing:var(--serif-tight);
  margin-bottom:1.3rem;
}
.thanks-box p{
  color:var(--ink-soft);
  font-size:1.08rem;
  line-height:1.65;
  margin-bottom:2.6rem;
}
.thanks-back{
  font-size:.92rem;
  font-weight:600;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}
.thanks-foot{
  position:fixed;
  bottom:2rem;
  left:0; right:0;
  text-align:center;
  font-size:.82rem;
  color:var(--muted);
}