
:root{
  --bg:#0E0F12;
  --bg-2:#14161B;
  --txt:#E8EAED;
  --muted:#9AA0A6;
  --card:#1A1B20;
  --line:#23252B;
  --accent:#7CFFB2;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--txt);
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

a {
  color:var(--txt);
  text-decoration:none
}

a:hover {
  color:var(--accent)
}

.container {
  width:min(1120px, 92vw);
  margin:0 auto
}

header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(14,15,18,.75);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)
}

.nav{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:14px 0; 
  gap:10px; 
}

.brand{ 
  display:flex; 
  align-items:center; 
  gap:12px; 
  min-width:0; 
}

.brand i{
  width:14px;
  height:14px;
  border-radius:50%;
  box-shadow:0 0 18px var(--accent),0 0 3px var(--accent) inset;
  background:var(--accent)
}

.brand span{
  font-weight:700;
  letter-spacing:.3px
}

nav a{
  opacity:.9;
  margin:0 10px
}

nav a.active{
  color:var(--accent)
}

.btn{
  display:inline-flex; 
  align-items:center; 
  gap:8px;
  background:linear-gradient(180deg, #1E2026, #121318);
  border:1px solid var(--line);
  padding:10px 14px; 
  border-radius:12px;
  color:var(--txt); 
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn:hover{ 
  transform:translateY(-1px); 
  border-color:#2B2E36; 
}

.btn.primary{
  background:radial-gradient(120% 120% at 50% 0%, rgba(124,255,178,.15), rgba(124,255,178,.06) 40%, rgba(124,255,178,.02) 70%, transparent), #15171C;
  border:1px solid rgba(124,255,178,.35);
  box-shadow:0 0 24px rgba(124,255,178,.12)
}

.btn.primary:hover{
  border-color:rgba(124,255,178,.55);
  box-shadow:0 0 28px rgba(124,255,178,.18);
}

.hero{
  padding:72px 0 72px;
  position:relative;
  overflow:hidden
}

.hero > .container { 
  position:relative; 
  z-index:2; 
}

h1{
  font-size:clamp(28px, 4.6vw, 48px);
  line-height:1.15;
  margin:0 0 14px
}

.lead{
  color:var(--muted);
  font-size:clamp(15px,2.6vw,18px)
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px
}

.grid{
  display:grid;
  gap:16px
}

.grid.cards{
  grid-template-columns:repeat(3, 1fr)
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow)
}

.card h3{
  margin:0 0 8px;
  font-size:18px
}

.card p{
  margin:0;
  margin-top: 5px;
  color:var(--muted)
}

.section{
  padding:42px 0;
  border-top:1px solid var(--line)
}

.section h2{
  font-size:26px;
  margin:0 0 12px
}

.kpis{ 
  display:grid; 
  grid-template-columns:repeat(3,minmax(0,1fr)); 
  gap:16px; 
}

.kpi{ 
  background:var(--card); 
  border:1px solid var(--line); 
  border-radius:12px; 
  padding:10px; 
  text-align:center; 
}

.kpis--wide{ 
  grid-template-columns:repeat(5,minmax(0,1fr)); 
}

.kpi b{
  font-size:1.6rem;
  color:var(--accent)
}

footer.site{
  padding:36px 0 0;
  border-top:1px solid var(--line);
  background:var(--bg-2);
  margin-top:48px
}

.footer-grid{
  display:grid;
  gap:16px;
  grid-template-columns:2fr 1fr 1fr
}

small, .muted{
  color:var(--muted)
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(124,255,178,.06)
}

.badge i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent)
}

.hero-graph{
  position:absolute;
  inset:auto -10% -60px -10%;
  height:400px;
  pointer-events:none;
  opacity:.9;
  filter:blur(0.3px);
  z-index:1;
  overflow:hidden;
}

.link{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg, rgba(124,255,178,0), rgba(124,255,178,.45), rgba(124,255,178,0));
  filter:blur(.2px);
  opacity:.8;
  will-change: transform;
  animation: flowX var(--speed,8s) linear infinite;
}

@keyframes pulse {0%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}100%{opacity:.6;transform:scale(.9)}}
@keyframes flowX {
  0%   { transform: translateX(-60vw); }
  100% { transform: translateX(160vw); }
}

.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden
}

.table th,.table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  text-align:left
}

.table tr:hover td{
  background:rgba(255,255,255,.02)
}

.banner{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  gap:12px;
  align-items:center;
  box-shadow:var(--shadow);
  z-index:60
}

.banner .grow{
  flex:1
}

.banner .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.hidden{
  display:none
}

.form .input, .form textarea.input{
  width:100%; 
  padding:10px 12px; 
  border:1px solid var(--line);
  border-radius:10px; 
  background:var(--card); 
  color:var(--text);
}

.form label{ 
  display:block; 
  margin:8px 0; 
}

.form .checks{ 
  margin:8px 0 12px; 
}

.input, textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#101217;
  color:var(--txt)
}

label{
  font-weight:600
}

.checks{
  display:flex;
  gap:16px;
  flex-wrap:wrap
}

code.block{
  display:block;
  white-space:pre-wrap;
  background:#0F1218;
  border:1px solid var(--line);
  padding:12px;
  border-radius:12px;
  color:#CFE
}

blockquote{
  border-left:3px solid var(--accent);
  margin:0;
  padding:8px 12px;
  background:#13161C;
  border-radius:8px
}

.tag{
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted)
}

html.menu-open { 
  overflow:hidden; 
}

.hamburger{
  display:none;
  cursor:pointer;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  white-space:nowrap;
  line-height:1;
  flex:0 0 auto;
}

.mobile-menu{
  position:fixed;
  inset:56px 0 auto 0;
  background:rgba(14,15,18,.95);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  display:none;
  z-index:55
}

.mobile-menu.open{
  display:block
}

.mobile-menu .wrap{
  padding:12px
}

.mobile-menu a{
  display:block;
  padding:10px 8px;
  border-radius:10px
}

.mobile-menu a:hover{
  background:#15171C
}

.spotlight {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-size: 200px;
  position: relative;
}

.spotlight .card {
  position: relative;
  isolation: isolate;
}

.spotlight .card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(
    circle var(--spot-size) at var(--spot-x) var(--spot-y),
    rgba(124,255,178,.10),
    rgba(124,255,178,.06) 40%,
    rgba(124,255,178,0) 65%
  );
  mix-blend-mode: screen;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none; z-index:0;
}

.spotlight .card::before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(
    circle var(--spot-size) at var(--spot-x) var(--spot-y),
    rgba(124,255,178,.12),
    rgba(124,255,178,.06) 40%,
    rgba(124,255,178,0) 65%
  );
  mix-blend-mode: screen;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none; z-index:0;
}

.spotlight .card:hover::before { 
  opacity:1; 
}

.list{ 
  margin:.4rem 0 0; 
  padding-left:1.1rem; 
  color:var(--muted); 
}

.list li{ 
  margin:.2rem 0; 
}

.brand-link{ 
  display:block; 
  max-width:100%; 
}

.brand-link img{
  display:block;
  max-height:28px;
  height:auto;
  width:auto;
  max-width:clamp(120px, 56vw, 180px);
}

.accordion{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--surface, transparent);
}

.acc-item{ 
  border-bottom:1px solid var(--line); 
}

.acc-item:last-child{ 
  border-bottom:0; 
}

.acc-btn{
  width:100%; 
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding:14px 18px; 
  background:transparent; 
  border:0; 
  text-align:left; 
  cursor:pointer;
  font-weight:600; 
  color:var(--text); 
  line-height:1.35;
  font-size: 16px;
}

.acc-btn:hover{ 
  background:rgba(124,255,178,.06); 
}

.acc-item.open .acc-btn{ 
  background:rgba(124,255,178,.08); 
  border-left:3px solid rgba(124,255,178,.45); 
}

.acc-btn .chev{
  width:18px; 
  height:18px; 
  position:relative; 
  flex:0 0 18px; 
  opacity:.8;
}

.acc-btn .chev::before, .acc-btn .chev::after{
  content:""; 
  position:absolute; 
  inset:0; 
  margin:auto;
  width:10px; 
  height:2px; 
  background:currentColor; 
  transition:transform .18s ease;
}

.acc-btn .chev::before{ 
  transform:rotate(45deg) translateY(3px); 
}

.acc-btn .chev::after{ 
  transform:rotate(-45deg) translateY(3px); 
}

.acc-item.open .acc-btn .chev::before{ 
  transform:rotate(-45deg) translateY(-3px); 
}

.acc-item.open .acc-btn .chev::after{ 
  transform:rotate(45deg) translateY(-3px); 
}

.acc-panel{
  height:0; 
  overflow:hidden; 
  padding:0 18px; 
  transition:height .2s ease;
}

.acc-panel > p{ 
  margin:10px 0 16px; 
  color:var(--muted); 
}

.cta-fragment{
  width: 600px;
  margin: 0; 
  padding: 18px 18px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,0.02);
}

.cta-fragment .input{
  width:100%; 
  padding:12px 12px;
  border:1px solid var(--line); 
  border-radius:12px;
  background:var(--card); 
  color:var(--text);
}

.cta-fragment label{ 
  display:block; 
  margin:10px 0; 
}

.cta-fragment textarea.input{
  min-height: 160px; 
  resize: none; 
}

.cta-fragment .input:focus{
  outline:none; 
  border-color:rgba(124,255,178,.55);
  box-shadow:0 0 0 3px rgba(124,255,178,.12);
}

#cta .container{
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}

#brief .container{
  position:relative;
  overflow:hidden;
}

.cta-fragment{ 
  margin: 0 auto; 
  position:relative;
  z-index:2;
}

.hero-graph--cta{
  position:absolute;
  inset:auto -10% -40px -10%;
  height:600px;
  z-index:1;
  opacity:.85;
}

.grid.cards{ 
  display:grid; 
  grid-template-columns:repeat(2, minmax(0,1fr)); 
  gap:16px; 
}

.grid.cards_second{ 
  display:grid; 
  grid-template-columns:repeat(3, minmax(0,1fr)); 
  gap:16px; 
}

.kpis--wide{ 
  grid-template-columns:repeat(3,minmax(0,1fr)); 
}

.lead-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,0.02);
}

.lead-card__body{ 
  padding:18px; 
}

.lead-card h2{ 
  margin:0 0 8px; 
}

.lead-card p{ 
  margin:0 0 10px; 
  color:var(--muted); 
}

.lead-points{ 
  margin:10px 0 14px; 
  padding-left:1.1rem; 
  color:var(--muted);
}

.lead-points li{ 
  margin:.25rem 0; 
}

.lead-actions{ 
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
}

.footer-copy{
  border-top:1px solid var(--line);
  margin-top:20px;
  padding:12px 0;
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
}

.cookie-overlay{
  position:fixed; 
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index:1090;
}

.hidden{ 
  display:none !important; 
}

#cookieModal{
  position:fixed; 
  left:50%; 
  top:50%;
  transform:translate(-50%,-50%) scale(.98);
  max-width:760px; 
  width:calc(100% - 40px);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px; 
  padding:20px;
  z-index:1100; 
  opacity:0; 
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

#cookieModal:not(.hidden){ 
  opacity:1; 
  pointer-events:auto; 
  transform:translate(-50%,-50%) scale(1); 
}

.cookie-modal--column{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.cookie-modal--column h3{ 
  margin:0; 
}

.cookie-modal--column p{ 
  margin:0; 
  color:var(--muted); 
}

.cm-options{ 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
}

.cm-row{
  display:flex; 
  gap:10px; 
  align-items:flex-start;
  padding:10px 12px; 
  border:1px solid var(--line); 
  border-radius:12px;
  background:rgba(255,255,255,.02);
}

.cm-row:hover{ 
  border-color:#2B2E36; 
}

.cm-row input{ 
  margin-top:4px; 
}

.cm-text b{ 
  display:block; 
  line-height:1.2; 
}

.cm-text span{ 
  display:block; 
  color:var(--muted); 
  font-size:.92rem; 
}

.cm-actions{ 
  display:flex; 
  justify-content:flex-end; 
  gap:10px; 
  margin-top:4px; 
}

.cm-actions .btn{ 
  min-width:140px; 
  justify-content:center; 
}

#cookieBanner{
  position:fixed; 
  bottom:20px; 
  left:50%; 
  transform:translateX(-50%);
  max-width:680px; 
  width:calc(100% - 40px);
  background:var(--card); 
  border:1px solid var(--line); 
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  padding:0px 18px 14px; 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
  z-index:1000;
}

#cookieBanner .actions{ 
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
}

#cookieBanner .actions .btn{ 
  flex:1; 
  min-width:120px; 
  justify-content:center; 
}

.section-note{ 
  margin:2px 0 4px; 
  color:var(--muted); 
}

.list_legal {
  color: var(--txt);
}

.mobile-menu{ 
  z-index: 1000;
}

.form-alert{ 
  margin-top:10px; 
  padding:10px 12px; 
  border-radius:10px; 
  background:#231f20; 
  color:#fff; 
}

.form-alert.error{ 
  background:#3a2326; 
}

.form-alert.ok{ 
  background:#1f2d25; 
}

.hidden{ 
  display:none; 
}

.table{ 
  display:block; 
  overflow:auto; 
}

@media (max-width: 1024px){
  .container{ 
    padding-left:16px; 
    padding-right:16px; 
  }
}

@media (max-width: 990px){
  .nav .links{ 
    display:none 
  }
  .nav .hamburger{ 
    display:inline-flex 
  }
}

@media (max-width: 960px){
  .grid.cards{ 
    grid-template-columns:repeat(2, minmax(0,1fr)); 
  }
  .kpis--wide{ 
    grid-template-columns:repeat(3,minmax(0,1fr)); 
  }
}

@media (max-width: 900px){
  .grid.cards{
    grid-template-columns:1fr 1fr
  }
  .footer-grid{
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:840px){ 
  .kpis--wide{ 
    grid-template-columns:repeat(3,1fr); 
  } 
}

@media (max-width:720px){
  .cookie-modal{ 
    grid-template-columns:1fr; 
  }
  .cm-actions{ 
    justify-content:stretch; 
  }
  .cm-actions .btn{ 
    flex:1; 
  }
}

@media (max-width: 640px){
  .grid.cards{
    grid-template-columns:1fr
  }
}

@media (max-width: 560px){
  .grid.cards{ 
    grid-template-columns:1fr; 
  }
  .kpis--wide{ 
    grid-template-columns:repeat(2,minmax(0,1fr)); 
  }
  h1{ 
    font-size:1.8rem; 
    line-height:1.2; 
  }
  h2{ 
    font-size:1.35rem; 
  }
  .section{ 
    padding-top:18px; 
    padding-bottom:18px; 
  }
  .btn{ 
    width:100%; 
    justify-content:center; 
  }
  .hamburger.btn{
    width:auto;
    justify-content:flex-start;
  }
  .hero-actions .btn + .btn{ 
    margin-top:8px; 
  }
  .cta-fragment{ 
    width:100%; 
    max-width: 540px; 
  }
  .cta-fragment .input{ 
    font-size:16px; 
  }
  .cta-fragment textarea.input{ 
    min-height: 140px; 
  }
  .accordion{
    border-radius:12px; 
  }
  .acc-btn{ 
    padding:12px 14px; 
    font-size:15px; 
  }
  .acc-panel{ 
    padding:0 14px; 
  }
  .link{
    opacity:.65;
    height:2px;
  }
  .hero-graph{ 
    opacity:.85; 
  }
  .lead-card__body{ 
    padding:14px; 
  }
  .lead-actions .btn{ 
    width:100%; 
    justify-content:center; 
  }
  #cookieModal{ 
    padding:16px; 
    width:calc(100% - 24px); 
    max-height:calc(100dvh - 24px); 
  }
  .cm-row{ 
    align-items:center; 
  }
  .cm-actions{ 
    flex-direction:column; 
  }
  .footer-grid{
    grid-template-columns:1fr;
  }
  .hamburger{ 
    padding:6px 10px; 
    font-size:14px; 
    border-radius:10px; 
  }
  .kpis--wide{ 
    grid-template-columns:repeat(2,1fr); 
  } 
  .brand-link img{ 
    max-height:24px; 
  }
}

@media (max-width: 400px){
  .section{ 
    padding-top:16px; 
    padding-bottom:16px; 
  }
  .hero{ 
    padding:56px 0 56px; 
  }
}