/* =========================================================
   GLYP HOME — ESTILOS ESPECÍFICOS
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 88px;
  background:var(--n-0);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
  position:relative; z-index:2;
}
.hero h1{margin:20px 0 24px;}
.hero h1 .accent-word{
  background:linear-gradient(90deg, var(--primary-500), var(--primary-700));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{max-width:520px; margin-bottom:36px; color:var(--n-600);}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px;}
.hero-proof{display:flex; gap:32px; flex-wrap:wrap;}
.hero-proof-item{display:flex; flex-direction:column; gap:2px;}
.hero-proof-item strong{font-family:var(--font-display); font-size:24px; color:var(--n-800);}
.hero-proof-item span{font-size:13px; color:var(--n-500);}

.hero-visual{position:relative;}
.hero-visual svg{width:100%; height:auto;}
.node{fill:var(--n-0); stroke:var(--primary-500); stroke-width:2;}
.node.filled{fill:var(--primary-500);}
.node.accent{stroke:var(--accent); fill:var(--n-0);}
.node.accent.filled{fill:var(--accent);}
.link{stroke:var(--n-300); stroke-width:1.5;}
.link.active{stroke:var(--primary-300);}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:56px;}
  .hero-visual{order:-1; max-width:320px; margin:0 auto;}
}

/* =========================================================
   PROBLEMA
   ========================================================= */
.problem{background:var(--n-900); color:var(--n-300);}
.problem h2{color:var(--n-0); max-width:640px;}
.problem .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; flex-wrap:wrap;}
.problem-lede{max-width:380px; color:var(--n-400);}

.problem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08);}
.problem-card{background:var(--n-900); padding:32px 28px; display:flex; flex-direction:column; gap:18px;}
.problem-card .icn{width:36px; height:36px;}
.problem-card h4{color:var(--n-0); font-size:18px;}
.problem-card p{color:var(--n-400); font-size:14px; line-height:1.6;}

@media (max-width:960px){
  .problem-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .problem-grid{grid-template-columns:1fr;}
}

/* =========================================================
   PILARES
   ========================================================= */
.pillars{background:var(--n-0);}

.pillar-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--n-200); border:1px solid var(--n-200);}
.pillar{background:var(--n-0); padding:48px 40px;}
.pillar-index{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--n-400); letter-spacing:0.08em;}
.pillar h3{margin:14px 0 16px;}
.pillar-bar{width:44px; height:4px; margin-bottom:20px;}
.pillar.p1 .pillar-bar{background:var(--primary-500);}
.pillar.p2 .pillar-bar{background:var(--accent);}
.pillar p.desc{color:var(--n-600); margin-bottom:28px;}
.pillar-list{display:flex; flex-direction:column; gap:14px;}
.pillar-list li{display:flex; gap:12px; font-size:15px; color:var(--n-700); align-items:flex-start;}
.pillar-list li .dot{
  width:6px; height:6px; border-radius:50%; margin-top:8px; flex:none;
}
.pillar.p1 .dot{background:var(--primary-500);}
.pillar.p2 .dot{background:var(--accent);}

@media (max-width:860px){
  .pillar-grid{grid-template-columns:1fr;}
}

/* =========================================================
   LOOP DE EFICIÊNCIA
   ========================================================= */
.loop{background:var(--primary-900); color:var(--n-0); overflow:hidden; position:relative;}
.loop .container{position:relative; z-index:2;}
.loop .section-head h2{color:var(--n-0);}
.loop .section-head .body-lg{color:var(--primary-200);}
.loop-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
.loop-diagram{position:relative;}
.loop-diagram svg{width:100%; height:auto;}
.loop-steps{display:flex; flex-direction:column; gap:0;}
.loop-step{
  display:grid; grid-template-columns:48px 1fr; gap:20px;
  padding:22px 0; border-top:1px solid rgba(255,255,255,0.12);
}
.loop-step:last-child{border-bottom:1px solid rgba(255,255,255,0.12);}
.loop-step .num{
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent);
}
.loop-step h4{color:var(--n-0); font-size:18px; margin-bottom:6px;}
.loop-step p{color:var(--primary-200); font-size:14px; line-height:1.6;}

@media (max-width:900px){
  .loop-wrap{grid-template-columns:1fr;}
  .loop-diagram{order:-1; max-width:340px; margin:0 auto;}
}

/* =========================================================
   MÉTRICAS
   ========================================================= */
.metrics{background:var(--n-50); border-top:1px solid var(--n-200); border-bottom:1px solid var(--n-200);}
.metrics-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--n-200);}
.metric{background:var(--n-50); padding:44px 32px; text-align:left;}
.metric strong{
  font-family:var(--font-display); font-weight:700; font-size:52px; color:var(--primary-600);
  display:block; line-height:1;
}
.metric span{display:block; margin-top:14px; color:var(--n-600); font-size:15px; max-width:260px;}
@media (max-width:760px){
  .metrics-grid{grid-template-columns:1fr;}
}

/* =========================================================
   COMPARATIVO
   ========================================================= */
.compare table{width:100%; border-collapse:collapse; margin-top:8px;}
.compare th, .compare td{
  text-align:left; padding:20px 20px; border-bottom:1px solid var(--n-200); vertical-align:top;
}
.compare thead th{
  font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--n-500); font-weight:600; border-bottom:2px solid var(--n-800);
}
.compare tbody th{
  font-family:var(--font-body); font-weight:600; color:var(--n-700); font-size:15px; width:22%;
}
.compare td{font-size:15px; color:var(--n-600);}
.compare td.glyp{color:var(--n-800); font-weight:600; position:relative;}
.compare td.glyp::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
}
.compare-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
@media (max-width:760px){
  .compare table{min-width:640px;}
}

/* =========================================================
   ICP (Para quem é)
   ========================================================= */
.icp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.icp-card{
  border:1px solid var(--n-200); padding:36px 30px; border-radius:var(--radius);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.icp-card:hover{border-color:var(--primary-300); transform:translateY(-4px);}
.icp-card .tag{
  display:inline-block; padding:6px 12px; border-radius:20px;
  background:var(--primary-50); color:var(--primary-600);
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
  margin-bottom:20px;
}
.icp-card h4{margin-bottom:14px; font-size:19px;}
.icp-card p{color:var(--n-600); font-size:14px; line-height:1.7;}
@media (max-width:900px){
  .icp-grid{grid-template-columns:1fr;}
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.final-cta{
  background:linear-gradient(135deg, var(--primary-700), var(--primary-900));
  color:var(--n-0); text-align:left; position:relative; overflow:hidden;
}
.final-cta-inner{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center;
}
.final-cta h2{color:var(--n-0); max-width:540px;}
.final-cta .body-lg{color:var(--primary-100); margin-top:18px; max-width:480px;}
.final-cta-actions{display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
@media (max-width:860px){
  .final-cta-inner{grid-template-columns:1fr;}
  .final-cta-actions{align-items:flex-start;}
}