/* WertGlobal — sistema visual (fase 2) implementado */
:root{
  --blue:#009CE3;
  --blue-ink:#00679C;
  --blue-soft:#E1F2FB;
  --graphite:#3A3B3C;
  --bg:#FFFFFF;
  --surface-alt:#F3F5F8;
  --border:#E2E6ED;
  --text:#1C2226;
  --text-muted:#5B6472;
  --dark-bg:#12161C;
  --dark-surface:#1B212A;
  --dark-text:#F3F5F8;
  --dark-muted:#97A1AF;
  --dark-border:#2A323D;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,30,50,.04), 0 10px 28px rgba(20,30,50,.06);
  --maxw:1120px;
}
*,*::before,*::after{box-sizing:border-box;}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
#contact{scroll-margin-top:76px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Sora", ui-sans-serif, system-ui, sans-serif; text-wrap:balance; margin:0; font-weight:700;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:14px; padding-bottom:14px;}
.brand{display:flex; align-items:center;}
.brand img{height:38px; width:auto;}
.main-nav{display:flex; gap:26px;}
.nav-contact-link{display:none;}
.main-nav a{
  font-size:14px; font-weight:500; color:var(--text-muted); white-space:nowrap;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.main-nav a:hover{color:var(--text);}
.main-nav a[aria-current="page"]{color:var(--text); font-weight:600; border-bottom-color:var(--blue);}
.header-right{display:flex; align-items:center; gap:16px;}

/* standard language switcher: flag + code, like most multilingual sites */
.lang-switch{display:flex; align-items:center; gap:4px;}
.lang-switch a{
  display:flex; align-items:center; gap:6px;
  border:1px solid transparent; background:none; padding:5px 7px 5px 5px; border-radius:7px; cursor:pointer;
}
.lang-switch a:hover{background:var(--surface-alt);}
.lang-switch a[aria-current="true"]{background:var(--surface-alt); border-color:var(--border);}
.lang-switch .flag{
  width:20px; height:14px; border-radius:2px; display:block; flex-shrink:0; position:relative;
  box-shadow:0 0 0 1px rgba(20,30,50,.14); overflow:hidden;
}
.lang-switch .code{font-family:"IBM Plex Mono"; font-size:11px; color:var(--text-muted);}
.lang-switch a[aria-current="true"] .code{color:var(--text); font-weight:600;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"IBM Plex Sans"; font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:8px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-ink);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue-ink);}
.btn-sm{padding:8px 14px; font-size:13px;}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:7px; padding:8px 10px; cursor:pointer;}
.nav-toggle svg{display:block;}

@media (max-width:860px){
  .main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--bg); flex-direction:column; padding:24px; gap:4px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
  }
  .main-nav a{padding:12px 4px; border-bottom:1px solid var(--border); font-size:16px;}
  .main-nav a[aria-current="page"]{border-bottom-width:1px;}
  body.nav-open .main-nav{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-toggle{display:inline-flex; align-items:center;}
  .header-right .btn-primary{display:none;}
  .nav-contact-link{display:block;}
}

/* ---------- hero / sections ---------- */
.hero{padding:48px 0 32px;}
.hero.compact{padding:36px 0 24px;}
.eyebrow{
  font-family:"IBM Plex Mono"; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-ink); font-weight:500; margin-bottom:12px; display:block;
}
.hero h1{font-size:clamp(30px,4.4vw,44px); line-height:1.14; max-width:18ch;}
.hero .lede{font-size:18px; color:var(--text-muted); max-width:60ch; margin-top:14px;}
.hero-actions{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}

section{padding:40px 0;}
.section-tight{padding:28px 0;}
section + section{border-top:1px solid var(--border);}
.section-head{margin-bottom:22px; max-width:70ch;}
.section-head h2{font-size:clamp(22px,3vw,28px);}
.section-head p{color:var(--text-muted); font-size:15.5px; margin-top:8px;}

.section-dark{background:var(--dark-bg); color:var(--dark-text); border-top:1px solid var(--dark-border);}
.section-dark .eyebrow{color:#6FC4F2;}
.section-dark h2, .section-dark h1{color:var(--dark-text);}
.section-dark p{color:var(--dark-muted);}
.section-dark .card{background:var(--dark-surface); border-color:var(--dark-border);}

/* ---------- grids / cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr;} .grid-5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3,.grid-2,.grid-5{grid-template-columns:1fr;}}

.card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
}
.card h2, .card h3{font-size:16.5px; font-weight:600; margin-bottom:8px;}
.card p{font-size:14.5px; color:var(--text-muted);}
.tag{
  display:inline-block;
  font-family:"IBM Plex Mono"; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blue-ink); background:var(--blue-soft); padding:3px 9px; border-radius:5px; margin-bottom:14px;
}

/* ---------- icon chips ---------- */
.icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--blue-soft); color:var(--blue-ink); margin-bottom:12px;
}
.icon-chip svg{width:19px; height:19px;}
.section-dark .icon-chip{background:rgba(0,156,227,.18); color:#7FCBF4;}
.path-card .icon-chip{margin-bottom:2px;}

.path-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:22px 20px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; transition:border-color .15s ease, transform .15s ease;
}
.path-card:hover{border-color:var(--blue); transform:translateY(-2px);}
.path-card h2, .path-card h3{font-size:18px;}
.path-card .go{font-family:"IBM Plex Mono"; font-size:12.5px; color:var(--blue-ink); font-weight:500;}

/* ---------- steps / flow ---------- */
.steps{display:flex; flex-wrap:wrap; gap:0; margin-top:8px;}
.step{
  flex:1 1 110px; background:var(--surface-alt); border:1px solid var(--border);
  padding:16px 14px; text-align:center;
}
.section-dark .step{background:var(--dark-surface); border-color:var(--dark-border);}
.step:first-child{border-radius:10px 0 0 10px;}
.step:last-child{border-radius:0 10px 10px 0;}
.step .n{font-family:"IBM Plex Mono"; font-size:11px; color:var(--blue-ink); display:block;}
.step .t{font-size:13px; font-weight:600; margin-top:5px; display:block;}
.step .d{font-size:11.5px; color:var(--text-muted); margin-top:4px; display:block;}
@media (max-width:760px){.steps{flex-direction:column;} .step:first-child{border-radius:10px 10px 0 0;} .step:last-child{border-radius:0 0 10px 10px;}}

/* ---------- diagram ---------- */
.diagram-frame{background:var(--surface-alt); border:1px solid var(--border); border-radius:16px; padding:22px; margin-top:4px;}
.diagram-frame svg{width:100%; height:auto; display:block;}

/* ---------- product / app ---------- */
.phone-frame{
  width:220px; border-radius:28px; border:8px solid var(--graphite); overflow:hidden; box-shadow:var(--shadow); background:var(--surface-alt);
  aspect-ratio:220/460; display:flex; align-items:center; justify-content:center;
}
.phone-frame img{width:100%; height:100%; object-fit:cover;}
.phone-frame.placeholder{flex-direction:column; gap:8px; padding:16px; text-align:center;}
.phone-frame.placeholder .ph-label{font-family:"IBM Plex Mono"; font-size:11px; color:var(--text-muted);}
.phone-row{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:12px;}

.usecase{display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.usecase img{width:56px; height:56px;}
.usecase h3{font-size:16px;}
.usecase ul{margin:0; padding-left:18px; font-size:14px; color:var(--text-muted); display:flex; flex-direction:column; gap:5px;}

.badges{display:flex; gap:14px; margin-top:24px; flex-wrap:wrap;}
.badge-pill{
  display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:9px; padding:10px 16px;
  font-size:13px; font-weight:500; color:var(--text);
}
.section-dark .badge-pill{border-color:var(--dark-border); color:var(--dark-text);}

/* ---------- contact form ---------- */
.contact-form{max-width:580px; margin-top:4px; display:flex; flex-direction:column; gap:14px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:13px; font-weight:600;}
.field input, .field select, .field textarea{
  font-family:"IBM Plex Sans"; font-size:14.5px; padding:12px 14px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); width:100%;
}
.section-dark .field input, .section-dark .field select, .section-dark .field textarea{
  background:var(--dark-surface); border-color:var(--dark-border); color:var(--dark-text);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);
}
.field textarea{resize:vertical; min-height:110px;}
.form-note{font-size:12.5px; color:var(--text-muted); margin-top:2px;}
.section-dark .form-note{color:var(--dark-muted);}
.contact-details{margin-top:22px; padding-top:18px; border-top:1px solid var(--dark-border); font-size:14px; color:var(--dark-muted); display:flex; flex-direction:column; gap:6px;}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  .reveal-group > *{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
  .reveal-group.in-view > *{opacity:1; transform:translateY(0);}
  .reveal-group.in-view > *:nth-child(2){transition-delay:.08s;}
  .reveal-group.in-view > *:nth-child(3){transition-delay:.16s;}
  .reveal-group.in-view > *:nth-child(4){transition-delay:.24s;}
  .reveal-group.in-view > *:nth-child(5){transition-delay:.32s;}
}

/* ---------- diagram animation ---------- */
.diagram-frame svg .flow-line{stroke-dasharray:5 7;}
@media (prefers-reduced-motion: no-preference){
  .diagram-frame svg .flow-line{animation:dash-flow 2.6s linear infinite;}
  .diagram-frame svg .flow-line:nth-of-type(2){animation-delay:.15s;}
  .diagram-frame svg .flow-line:nth-of-type(3){animation-delay:.3s;}
  .diagram-frame svg .flow-line:nth-of-type(4){animation-delay:.45s;}
  .diagram-frame svg .flow-line:nth-of-type(5){animation-delay:.6s;}
  .diagram-frame svg .core-pulse{transform-box:fill-box; transform-origin:50% 50%; animation:core-pulse 2.8s ease-in-out infinite;}
}
@keyframes dash-flow{ to{ stroke-dashoffset:-24; } }
@keyframes core-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }

/* ---------- footer ---------- */
.site-footer{background:var(--dark-bg); color:var(--dark-muted); padding:32px 0 24px;}
.site-footer .wrap{display:flex; flex-direction:column; gap:20px;}
.footer-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-nav{display:flex; gap:20px; flex-wrap:wrap;}
.footer-nav a{font-size:13px; color:var(--dark-muted);}
.footer-nav a:hover{color:var(--dark-text);}

.callout-line{margin-top:16px; padding-top:14px; border-top:1px dashed var(--border); font-size:14px; color:var(--text-muted);}