:root{
  --cyan:#0AFFFF;
  --purple:#6A00F4;
  --neon:#FF00F5;
  --matrix:#00FF47;
  --carbon:#1A1A1A;
  --ink:#0B0B0F;
  --card:#121212;
  --muted:#9aa0a6;
  --gradient: radial-gradient(1200px 600px at 20% -10%, rgba(10,255,255,.35), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(255,0,245,.22), transparent 50%),
              radial-gradient(800px 400px at 50% 120%, rgba(0,255,71,.15), transparent 60%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:#E6F2FF;
  background: var(--ink);
  background-image: var(--gradient);
  line-height:1.5;
}

a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--neon)}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background: linear-gradient(90deg, rgba(10,10,16,.85), rgba(10,10,16,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 6vw;
}
.brand{position:relative; display:flex; align-items:center; gap:14px}
.brand-badge{
  position:absolute; inset:-8px -14px -8px -14px; z-index:-1;
  background: linear-gradient(135deg, rgba(10,255,255,.18), rgba(255,0,245,.10));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow:0 0 40px rgba(10,255,255,.25), 0 0 40px rgba(255,0,245,.18) inset;
}
.brand-logo{
  display:block;
  filter: drop-shadow(0 2px 12px rgba(10,255,255,.45))
          drop-shadow(0 0 24px rgba(255,0,245,.25));
  height:auto;
}

.nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav a{font-weight:600; opacity:.9}
.nav .cta{
  padding:.55rem .95rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(10,255,255,.18), rgba(255,0,245,.12));
}
.nav .cta:hover{border-color:rgba(255,255,255,.35); transform:translateY(-1px)}

.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1000px 600px at 10% -10%, rgba(106,0,244,.35), transparent 60%),
              radial-gradient(900px 500px at 120% 10%, rgba(10,255,255,.28), transparent 60%);
  min-height:68vh; display:grid; place-items:center; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-bg::before{
  content:""; position:absolute; inset:-10% -10% 40% -10%;
  background: conic-gradient(from 210deg at 50% 40%, rgba(255,0,245,.35), rgba(10,255,255,.35), rgba(0,255,71,.25), transparent 65%);
  filter: blur(60px);
}
.hero-inner{padding:12vh 6vw 14vh; max-width:1100px}
.hero h1{margin:0 0 16px; font-weight:800; font-size: clamp(44px, 6vw, 82px); letter-spacing:-.02em}
.hero h1 strong{background:linear-gradient(90deg, var(--cyan), var(--neon)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 18px rgba(10,255,255,.35)}
.hero p{max-width:720px; margin:0 auto 28px; color:#cfe6ff; opacity:.95}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:12px; padding:.9rem 1.2rem; font-weight:700; letter-spacing:.2px; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary{
  color:#041b1b; background: linear-gradient(90deg, var(--cyan), var(--neon));
  box-shadow:0 8px 30px rgba(10,255,255,.35);
}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 14px 44px rgba(255,0,245,.25)}
.btn.ghost{border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.04); color:#E9EEFF}
.btn.ghost:hover{border-color:rgba(255,255,255,.45)}

.section{padding:72px 6vw}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.section-head{margin:0 auto 26px; text-align:center; max-width:920px}
.section-head h2{font-size: clamp(28px, 4vw, 42px); margin:0 0 10px}
.section-head p{color:#cfe6ff; opacity:.9; margin:0 auto;}

.grid{display:grid; gap:22px}
.grid.services{grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  box-shadow: 0 10px 30px rgba(14,18,40,.35);
}
.card:hover{transform:translateY(-2px); border-color:rgba(10,255,255,.25); box-shadow: 0 16px 50px rgba(10,255,255,.18)}
.card h3{margin:0 0 8px; font-size:20px}
.card p{margin:0 0 10px; color:#d4e7ff; opacity:.95}
.card ul{margin:0; padding:0 0 0 18px; color:#c8dbff}
.chip{background:linear-gradient(90deg, var(--purple), var(--neon)); padding:.08rem .45rem; border-radius:8px; font-size:.85em}

.grid.cases{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.case{display:grid; background: #0e1228; border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden}
.case-media{position:relative; aspect-ratio: 16/10; overflow:hidden}
.case img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .35s ease}
.case .glow{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 70% at 50% 50%, rgba(10,255,255,.18), transparent 60%); mix-blend-mode:screen; opacity:.8}
.case:hover img{transform:scale(1.06)}
.case-body{padding:18px}
.case-body h3{margin:0 0 6px}
.bullets{margin:10px 0 0; padding:0 0 0 18px; color:#cfe6ff}
.credit{display:block; margin-top:8px; color:#91a2bf; opacity:.8}

.logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; padding:10px 0 0}
.logo-chip{border-radius:999px; padding:.6rem 1rem; font-weight:700; letter-spacing:.3px;
  background:linear-gradient(90deg, rgba(10,255,255,.18), rgba(255,0,245,.12)); border:1px solid rgba(255,255,255,.14)}
.logo-chip.ocesa{--_c:var(--neon)}
.logo-chip.regnum{--_c:var(--purple)}

.logo-img{height:44px; width:auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); opacity:.95}

.contact{background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02))}
.contact-form{max-width:720px; margin:0 auto; display:grid; gap:14px}
.contact-form label{display:grid; gap:6px; font-size:.95rem; color:#DDE9FF}
.contact-form input, .contact-form textarea{
  background:#0b0f1c; border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#E8F2FF;
  padding:.9rem 1rem; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{border-color: var(--cyan); box-shadow:0 0 0 3px rgba(10,255,255,.15)}
.form-ok{color:#00FF8C; font-weight:700}

.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:28px 6vw 50px; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.footer-inner{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-inner nav{display:flex; gap:16px; opacity:.9}
.legal{color:#9fb2d4; opacity:.85}


/* --- v3: refined scale, spacing & motion --- */
:root{
  --maxw: 1200px;
  --step-1: clamp(14px, 1.25vw, 16px);
  --step0: clamp(16px, 1.4vw, 18px);
  --step1: clamp(18px, 1.6vw, 20px);
  --step2: clamp(22px, 2.4vw, 28px);
  --step3: clamp(32px, 4vw, 48px);
  --radius: 16px;
  --elev: 0 10px 30px rgba(14,18,40,.35);
  --elev-hover: 0 16px 50px rgba(10,255,255,.18);
}

.section{padding:84px max(6vw, calc((100% - var(--maxw))/2));}
.section-head h2{font-size:var(--step2)}
.section-head p{font-size:var(--step0)}

.hero-inner{padding:14vh max(6vw, calc((100% - var(--maxw))/2)) 16vh;}
.hero p{font-size:var(--step0)}
.btn{font-size:var(--step0)}

/* Cards equal height and improved rhythm */
.grid.services .card{display:grid; grid-template-rows: auto auto 1fr; gap:10px;}

/* Sticky nav shrink */
.site-header{transition: padding .25s ease, background .25s ease, border-color .25s ease;}
.site-header.shrink{padding:8px 6vw; background:rgba(10,10,16,.88); border-color:rgba(255,255,255,.1)}

/* Reveal animation */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1);}
  [data-reveal].is-visible{opacity:1; transform: translateY(0);}
}

/* Focus styles for a11y */
:focus-visible{outline: 3px solid rgba(10,255,255,.6); outline-offset: 2px; border-radius: 8px;}

/* Hover depth */
.card{box-shadow: var(--elev)}
.card:hover{box-shadow: var(--elev-hover)}

/* Logo chips refinement */
.logo-chip{font-size:var(--step-1)}

/* Case cards spacing */
.case-body h3{font-size:var(--step1)}
.case-body p{font-size:var(--step-1)}
.bullets{font-size:var(--step-1)}