:root{
  --bg:#0A0E13;
  --surface:#0F141B;
  --line:#212B3A;
  --text:#E9EEF7;
  --muted:#91A4B6;
  --accent:#22E0FF;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; letter-spacing:0.01em;
  overflow-x:hidden; max-width:100vw;
}
.container{width:min(1140px,92%);margin:0 auto;max-width:100%}

/* Header */
header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(130%) blur(6px);
  background:rgba(10,14,19,.72);
  border-bottom:1px solid var(--line);
}
.nav{height:64px; display:flex; align-items:center; justify-content:space-between}
.nav-actions{
  display:flex; align-items:center; gap:18px;
  margin-left:auto; justify-content:flex-end; flex:1;
}
.nav-actions nav{display:flex; align-items:center}
.lang-switch{display:flex; align-items:center; position:relative}
.lang-toggle{
  background:transparent; color:var(--text);
  border:1px solid var(--line); border-radius:8px;
  padding:.5rem 2.1rem .5rem .7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:12px;
  cursor:pointer; min-height:40px;
  -webkit-tap-highlight-color:rgba(34,224,255,.2); touch-action:manipulation;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.lang-toggle:focus{outline:none; border-color:var(--accent)}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  min-width:76px; padding:6px; display:grid; gap:6px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.lang-switch.open .lang-menu{opacity:1; transform:translateY(0); pointer-events:auto}
.lang-option{
  background:transparent; border:1px solid transparent; color:var(--text);
  padding:.5rem .8rem; border-radius:8px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:12px;
  cursor:pointer; text-align:left; min-height:36px;
  -webkit-tap-highlight-color:rgba(34,224,255,.2); touch-action:manipulation;
}
.lang-option:hover,.lang-option:active{border-color:var(--accent)}
.lang-option.active{background:var(--accent); color:#041319; border-color:transparent}
.brand{
  display:flex; align-items:center; gap:3px;
}
.brand .mark{width:56px;height:56px; border:0; transform:none; display:block; object-fit:contain}
.brand .logo-text{height:30px; width:auto; display:block}
nav a, nav button{
  color:var(--muted); text-decoration:none; margin-left:20px; font-weight:600;
  padding:6px 0; border:none; border-bottom:2px solid transparent; letter-spacing:.01em;
  background:transparent; font-size:inherit; font-family:inherit; cursor:pointer;
}
nav a:hover, nav button:hover{color:var(--text); border-color:var(--accent)}
.nav-cta{margin-left:16px}

/* Mobile nav - hidden on desktop */
.mobile-nav{display:none; align-items:center; gap:12px}
.hamburger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer;
  -webkit-tap-highlight-color:rgba(34,224,255,.2); touch-action:manipulation;
}
.hamburger span{
  display:block; width:100%; height:2px; background:var(--text);
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px, -5px)}

/* Mobile menu */
.mobile-menu{
  display:none;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:16px 0;
}
.mobile-menu.open{display:block}
.mobile-menu nav{
  display:flex; flex-direction:column; gap:0;
  width:min(1140px,92%); margin:0 auto;
}
.mobile-menu nav a, .mobile-menu nav button{
  color:var(--text); text-decoration:none; padding:16px 0;
  border:none; border-bottom:1px solid var(--line); font-weight:600; margin:0;
  display:block; -webkit-tap-highlight-color:rgba(34,224,255,.2);
  background:transparent; font-size:inherit; font-family:inherit; cursor:pointer;
  width:100%; text-align:left;
}
.mobile-menu nav a:active, .mobile-menu nav button:active{color:var(--accent)}
.mobile-menu nav a:last-child, .mobile-menu nav button:last-child{border-bottom:none; margin-top:8px}
.mobile-menu nav a.btn, .mobile-menu nav button.btn{text-align:center; margin-top:16px; border-bottom:none; display:flex}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:8px; border:1px solid var(--line);
  color:var(--text); background:transparent; text-decoration:none; font-weight:700;
  letter-spacing:.005em; transition:border-color .18s ease, color .18s ease, background .18s ease;
  cursor:pointer; -webkit-tap-highlight-color:rgba(34,224,255,.2);
  touch-action:manipulation; min-height:44px; position:relative; z-index:1;
}
.btn:hover{border-color:var(--accent)}
.btn:active{opacity:.9}
.btn.primary{background:var(--accent); color:#041319; border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}

/* Sections */
section{padding:88px 0; max-width:100vw; overflow-x:hidden; scroll-margin-top:64px}
section:first-of-type{scroll-margin-top:0}
h1,h2,h3{margin:0 0 12px}
h1{
  font-family:"Oxanium","Inter Tight",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(34px,5.2vw,56px); line-height:1.08;
}
h2{
  font-family:"Oxanium","Inter Tight",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(22px,3vw,28px);
}
h3{font-weight:700; letter-spacing:.005em; font-size:18px}
.sub{color:var(--muted); max-width:72ch}
.kicker{
  font-family:"JetBrains Mono",ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.divider{height:1px; background:var(--line); width:100%; margin:64px 0 0}

/* Hero */
.hero{padding:128px 0 96px}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px}
.hero .grid > div{min-width:0; overflow:hidden}
.hero h1,
.hero .kicker,
.hero .sub{
  max-width:100%;
  white-space:normal;
  word-wrap:break-word;
}
.bullets{display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-size:14px; position:relative; z-index:0}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; position:relative; z-index:2}

/* Industries tags */
.tags{display:flex; gap:10px; flex-wrap:wrap; max-width:100%}
.tag{
  border:1px solid var(--line); color:var(--muted);
  padding:8px 12px; border-radius:8px; font-size:14px;
}
.tag:hover{border-color:var(--accent); color:var(--text)}

/* Service groups (collapsible) */
details.group{margin-bottom:36px}
details.group > summary{list-style:none}
details.group > summary::-webkit-details-marker{display:none}
.group-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  border-bottom:1px solid var(--line); padding-bottom:8px; cursor:pointer;
  user-select:none; transition:color 0.2s;
}
.group-head:hover{color:var(--accent)}
.group-head:hover .group-label{color:var(--accent)}
.group-label{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:color 0.2s;
}
.group-toggle{
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  transition:transform 0.2s ease;
}
.group-toggle::before{
  content:''; border:solid var(--muted); border-width:0 2px 2px 0;
  display:inline-block; padding:4px; transform:rotate(-45deg);
  transition:border-color 0.2s;
}
.group-head:hover .group-toggle::before{border-color:var(--accent)}
details.group[open] .group-toggle{transform:rotate(90deg)}
details.group .cards{
  animation:slideDown 0.25s ease;
}
@keyframes slideDown{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:translateY(0)}
}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.card{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  padding:16px; display:flex; flex-direction:column; gap:8px; min-height:140px;
  overflow:hidden; word-break:break-word
}
.card:hover{border-color:var(--accent)}
.card p{color:var(--muted); margin:0}
.meta{color:var(--muted); font-size:12px; margin-top:4px; word-break:break-word}
.meta code{font-family:"JetBrains Mono",ui-monospace,monospace; background:#0C1219; padding:2px 6px; border:1px solid var(--line); border-radius:6px; word-break:break-word}

/* List blocks (approach/why) */
.list{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.item{border:1px solid var(--line); border-radius:10px; padding:16px; background:var(--surface); color:var(--muted)}
.item strong{color:var(--text)}
.why{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.why .box{border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--surface); display:flex; align-items:center; min-height:84px; font-weight:700}

/* Contact actions */
.contact-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn.signal::before{
  content:""; display:inline-block; width:10px; height:10px; border:2px solid currentColor; border-radius:50%; margin-right:8px;
  pointer-events:none;
}
.btn.email::before{
  content:"@"; margin-right:8px; font-weight:400;
  pointer-events:none;
}

/* Footer */
footer{border-top:1px solid var(--line); color:var(--muted); padding:24px 0; font-size:14px}

/* Responsive */
@media (max-width:1080px){
  .cards{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr}
  .hero .grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .desktop-nav{display:none}
  .mobile-nav{display:flex}
  section{padding:64px 0}
  .hero{padding:88px 0 64px}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .list{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  section{padding:48px 0}
  .hero{padding:72px 0 48px}
  .hero h1,
  .hero .kicker,
  .hero .sub{
    word-wrap:break-word;
    overflow-wrap:break-word;
    white-space:normal;
    max-width:100%;
  }
  .bullets{gap:8px; font-size:13px}
  .actions{flex-direction:column; gap:16px}
  .actions .btn{width:100%; text-align:center; display:flex; padding:1rem}
  .contact-actions{flex-direction:column; gap:16px}
  .contact-actions .btn{width:100%; text-align:center; display:flex; padding:1rem}
}