/* =========================
   tree — institutional home
   ========================= */

:root{
  --bg:#07080a;
  --surface:#0d0f13;
  --surface-2:#080a0e;
  --text:#f4f5f7;
  --soft:#d1d4db;
  --muted:#9ea3ad;
  --brand:#F06C37;
  --brand-2:#ff8755;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.22);
  --shadow:0 28px 90px rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{font-size:16px; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.bg-left,.bg-right,.bg-overlay{position:fixed; inset:0; pointer-events:none}
.bg-left{
  background:url('/static/img/lateral-esquerda.png') no-repeat left top/contain;
  opacity:.22;
  filter:drop-shadow(0 0 24px rgba(240,108,55,.14));
}
.bg-right{
  background:url('/static/img/lateral-direita.png') no-repeat right bottom/contain;
  opacity:.22;
  filter:drop-shadow(0 0 24px rgba(240,108,55,.14));
}
.bg-overlay{
  background:
    radial-gradient(900px 560px at 8% -8%, rgba(240,108,55,.40), transparent 64%),
    radial-gradient(980px 620px at 94% 105%, rgba(255,135,85,.27), transparent 62%),
    radial-gradient(780px 440px at 68% -10%, rgba(240,108,55,.14), transparent 68%),
    linear-gradient(90deg, rgba(240,108,55,.08), transparent 30%, transparent 70%, rgba(240,108,55,.08));
  mix-blend-mode:screen;
}
.bg-overlay::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:78px 78px;
  opacity:.55;
}
.bg-left,.bg-right,.bg-overlay{z-index:0}

.page-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:52px 32px 64px;
  display:flex;
  justify-content:center;
}
.landing{
  position:relative;
  width:min(100%, 1240px);
  border:1px solid var(--line-strong);
  border-radius:40px;
  background:
    linear-gradient(180deg, rgba(15,17,22,.95), rgba(10,12,16,.93)),
    radial-gradient(560px 340px at 18% 4%, rgba(240,108,55,.14), transparent 68%);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.landing::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(240,108,55,.20), transparent 18%, transparent 82%, rgba(240,108,55,.16));
  opacity:.75;
}
.landing > *{position:relative; z-index:1}

.topbar{
  margin:40px 48px 0;
  min-height:62px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(7,9,12,.64);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px 16px 12px 22px;
  backdrop-filter:blur(14px);
}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand img{height:36px; width:auto; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.topnav{display:flex; align-items:center; gap:20px}
.topnav a{
  color:var(--muted);
  text-decoration:none;
  font-size:.84rem;
  font-weight:700;
  transition:color .18s ease;
}
.topnav a:hover{color:var(--text)}

.hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 420px;
  gap:52px;
  align-items:center;
  padding:78px 52px 38px;
}
.hero__copy{min-width:0}
.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(240,108,55,.44);
  background:rgba(240,108,55,.14);
  color:#ffd2c0;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.eyebrow--small{min-height:30px; font-size:.68rem}
.hero h1{
  max-width:760px;
  margin:24px 0 18px;
  font-size:clamp(3.3rem, 6vw, 5.2rem);
  line-height:.94;
  letter-spacing:-.07em;
}
.hero p{
  max-width:690px;
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
}
.hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:36px;
}
.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:.92rem;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#111214;
  box-shadow:0 14px 28px rgba(240,108,55,.18);
}
.btn--ghost{
  border:1px solid rgba(255,255,255,.16);
  background:#11141a;
  color:var(--text);
}
.btn--ghost:hover{border-color:rgba(240,108,55,.42)}

.radar-card{
  min-height:440px;
  padding:30px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:32px;
  background:
    radial-gradient(260px 210px at 50% 55%, rgba(240,108,55,.10), transparent 68%),
    linear-gradient(180deg, rgba(8,10,14,.97), rgba(8,10,14,.9));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.radar-card__head h2{margin:0 0 6px; font-size:1.48rem; letter-spacing:-.035em}
.radar-card__head p{margin:0; color:var(--muted); font-size:.86rem}
.brand-radar{position:relative; width:292px; height:292px; align-self:center; margin-top:16px}
.ring,.signal,.core{position:absolute; display:block}
.ring{border:2px solid rgba(240,108,55,.32); border-radius:50%; inset:0}
.ring--2{inset:34px; opacity:.9}
.ring--3{inset:74px; opacity:.82}
.ring--4{inset:110px; opacity:.7}
.core{
  width:88px;
  height:88px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#111214;
  font-weight:900;
  font-size:.9rem;
  box-shadow:0 0 34px rgba(240,108,55,.24);
}
.signal{
  min-width:68px;
  min-height:42px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(240,108,55,.22);
  border:1px solid rgba(240,108,55,.48);
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:.66rem;
  font-weight:800;
}
.signal--marca{right:0; top:96px}
.signal--creator{right:48px; top:24px}
.signal--evento{left:22px; top:62px}
.signal--publico{left:4px; bottom:62px}
.signal--experiencia{right:32px; bottom:20px}

.value-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  padding:28px 52px 0;
}
.value-strip article{
  min-height:146px;
  padding:24px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(15,18,24,.88), rgba(8,10,14,.86));
}
.value-strip h2{margin:0 0 10px; font-size:1.22rem; letter-spacing:-.03em}
.value-strip p{margin:0; color:var(--muted); font-size:.9rem}
.value-strip article::after{
  content:'';
  display:block;
  width:96px;
  height:2px;
  margin-top:20px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), transparent);
}

.paths{padding:76px 52px 52px}
.paths__intro{max-width:760px; margin-bottom:30px}
.paths__intro h2{margin:16px 0 8px; font-size:clamp(2rem, 3vw, 3rem); line-height:1; letter-spacing:-.055em}
.paths__intro p{margin:0; color:var(--muted)}
.path-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px}
.path-card{
  position:relative;
  min-height:280px;
  padding:30px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:32px;
  background:#0d1015;
  color:var(--text);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  transition:transform .16s ease, border-color .2s ease, background .2s ease;
}
.path-card::before{
  content:'';
  position:absolute;
  inset:auto -120px -170px auto;
  width:320px;
  height:320px;
  border-radius:50%;
  background:rgba(240,108,55,.16);
  filter:blur(4px);
}
.path-card:hover{transform:translateY(-3px); border-color:rgba(240,108,55,.5); background:#11151c}
.number{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#111214;
  font-weight:900;
  font-size:.76rem;
}
.path-card h3{margin:28px 0 12px; font-size:1.9rem; line-height:1.04; letter-spacing:-.05em}
.path-card p{max-width:520px; margin:0; color:var(--muted); font-size:.96rem}
.path-card strong{position:relative; display:inline-flex; color:#ffd2c0; font-size:.88rem; margin-top:28px}

@media (max-width:1180px){
  .page-shell{padding:34px 20px 48px}
  .topbar{margin:32px 32px 0}
  .hero{padding:56px 36px 30px; grid-template-columns:1fr; gap:34px}
  .radar-card{max-width:560px; width:100%; justify-self:center}
  .value-strip{padding:24px 36px 0}
  .paths{padding:66px 36px 42px}
}

@media (max-width:820px){
  .page-shell{padding:18px 12px 34px}
  .landing{border-radius:28px}
  .topbar{margin:18px 16px 0; border-radius:24px; padding:12px 14px}
  .brand img{height:30px}
  .topnav{display:none}
  .hero{padding:40px 22px 20px; display:block}
  .hero h1{font-size:clamp(2.65rem, 12vw, 3.9rem)}
  .hero p{font-size:.95rem}
  .hero__actions{flex-direction:column; margin-top:28px}
  .btn{width:100%}
  .radar-card{margin-top:30px; min-height:360px; padding:24px; border-radius:28px}
  .brand-radar{width:236px; height:236px}
  .signal{min-width:58px; min-height:36px; font-size:.58rem}
  .signal--marca{right:0; top:78px}
  .signal--creator{right:40px; top:16px}
  .signal--evento{left:12px; top:50px}
  .signal--publico{left:0; bottom:48px}
  .signal--experiencia{right:20px; bottom:12px}
  .core{width:74px; height:74px}
  .value-strip{grid-template-columns:1fr; padding:22px 22px 0}
  .value-strip article{min-height:auto}
  .paths{padding:54px 22px 30px}
  .path-grid{grid-template-columns:1fr}
  .path-card{min-height:250px; padding:26px; border-radius:28px}
  .path-card h3{font-size:1.55rem}
}

@media (max-width:460px){
  .radar-card{display:none}
  .topbar{justify-content:center}
  .paths__intro h2{font-size:2rem}
}