/* v3 styles with avatar-only and cinematic reveal */
:root{ --bg:#0b0f17; --fg:#e8eefc; --muted:#9db1d0; --accent:#ff3b30; --accent2:#33b0ff; --glass:rgba(255,255,255,0.06); --card:rgba(255,255,255,0.08); }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--fg); background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.bg{ position:fixed; inset:0; z-index:-1; background:
  radial-gradient(1200px 600px at 15% 10%, rgba(255,59,48,0.25), transparent 60%),
  radial-gradient(1200px 600px at 85% 20%, rgba(51,176,255,0.22), transparent 60%),
  radial-gradient(900px 500px at 50% 110%, rgba(255,255,255,0.05), transparent 70%),
  var(--bg); pointer-events:none; filter:saturate(120%);}
.nav{ position:sticky; top:0; backdrop-filter:blur(8px); background:linear-gradient(to bottom, rgba(11,15,23,.8), rgba(11,15,23,.35)); border-bottom:1px solid rgba(255,255,255,0.06); z-index:40;}
.nav-inner{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 22px}
.brand{font-weight:800; letter-spacing:.5px; font-size:20px; color:var(--fg); text-decoration:none}
.brand span,.accent3{color:var(--accent)}
.links{display:flex; align-items:center; gap:18px}
.links a{color:var(--fg); opacity:.85; text-decoration:none}
.links a:hover{opacity:1}
.links .lang{ font-size:13px; border-radius:10px; padding:6px 10px; border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--fg); cursor:pointer;}
.links .lang:hover{background:var(--glass)}
.hero{ max-width:1100px; margin:28px auto 0; padding:0 22px 40px; display:flex; flex-direction:column; align-items:center; text-align:center;}
.logo-stage.big{ width:min(520px, 86vw); aspect-ratio:3/4; margin:10px auto 0; filter: drop-shadow(0 12px 32px rgba(0,0,0,.45)); position:relative;}
.logo-stage img{width:100%; height:100%; object-fit:contain; display:block; image-rendering:auto;}
.logo-full{opacity:0; filter:blur(6px)}
.logo-head{opacity:0; transform:scale(.98)}
.logo-head{ -webkit-mask-image: radial-gradient( circle at 50% 18%, black 0 34%, transparent 38% ); mask-image: radial-gradient( circle at 50% 18%, black 0 34%, transparent 38% );}
.eye{ position:absolute; width:15%; aspect-ratio:2/1; border-radius:50%; background:radial-gradient(60% 90% at 50% 45%, rgba(255,255,255,.95), rgba(255,255,255,.2) 60%, transparent 70%); filter: blur(1px) drop-shadow(0 0 10px rgba(255,255,255,.5)); opacity:0; transform:scale(.7);}
.eye.left{left:26%; top:25%}
.eye.right{right:27%; top:25%}
.brandline{margin:12px 0 8px; display:flex; flex-direction:column; gap:2px; align-items:center}
.brandword{font-weight:800; font-size: clamp(34px, 6vw, 64px); letter-spacing:-.02em}
.subtitle{font-weight:600; font-size: clamp(18px, 2.8vw, 28px); opacity:.9}
.tag{color:var(--muted); font-size:clamp(14px, 1.8vw, 18px); max-width:780px; margin:8px auto 20px}
.cta{display:flex; gap:12px; margin:18px 0 8px; flex-wrap:wrap; justify-content:center}
.btn{ padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,0.14); text-decoration:none; font-weight:600; font-size:15px; transition:.2s ease;}
.btn.primary{background:linear-gradient(90deg, rgba(255,59,48,.9), rgba(51,176,255,.9)); color:white; border:none}
.btn.primary:hover{transform:translateY(-1px); filter:saturate(120%)}
.btn.ghost{background:transparent; color:var(--fg)}
.btn.ghost:hover{background:var(--glass)}
.note{opacity:.8; margin-top:6px; font-size:14px}
.section{max-width:1100px; margin:40px auto; padding:0 22px}
.section h2{font-size:28px; margin:6px 0 12px}
.section p{color:var(--muted); line-height:1.7}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-top:12px}
.card{background:var(--card); border:1px solid rgba(255,255,255,0.06); padding:18px; border-radius:14px}
.card h3{margin:0 0 6px; font-size:18px}
.footer{border-top:1px solid rgba(255,255,255,0.08); padding:18px 22px; text-align:center; color:var(--muted); margin-top:60px}

.hero{padding-bottom:28px}
.logo-stage.big{width:min(520px,86vw);aspect-ratio:1/1}

/* FORCE SHOW HEAD */
.logo-head{opacity:1 !important; filter:none !important; transform:none !important; -webkit-mask-image:none !important; mask-image:none !important}

/* Contact form (glass style) */
.form.glass{background:var(--card);border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:14px;max-width:780px;margin:12px auto}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:14px;opacity:.9}
.field input,.field textarea{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--fg); padding:12px 12px; border-radius:10px; outline:none;
}
.field input:focus,.field textarea:focus{border-color:rgba(255,255,255,.28)}
.err{color:#ff6b6b;min-height:16px}
.check{display:flex;align-items:center;gap:10px;margin:10px 0}
.check input{width:16px;height:16px}
.actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.small{font-size:13px;color:var(--muted)}

/* hide NL toggle for now */
/* hidden NL removed */

/* hide NL until translations are wired */
.nav .pill[data-lang]{display:none!important}

#send-note{display:none;}

/* Fix invisible Send button */
#contact .actions .btn {display:inline-flex!important;opacity:1!important;visibility:visible!important;}
#contact .actions{display:flex!important;justify-content:center!important;}