:root{
  --bg:#070b14;
  --bg-alt:#0c1120;
  --surface:rgba(255,255,255,0.045);
  --surface-strong:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.09);
  --text:#eef2fb;
  --text-muted:#9aa7bd;
  --accent:#4f8cff;
  --accent-2:#3fe0c5;
  --swiss-red:#e8384f;
  --radius:16px;
  --max-width:1120px;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-head:'Space Grotesk',var(--font-body);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

ul{list-style:none}

h1,h2,h3{font-family:var(--font-head);font-weight:600;letter-spacing:-0.02em;line-height:1.15}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
}

/* Background decoration */
.bg-grid{
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.bg-glow{
  position:fixed;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:1100px;
  height:700px;
  z-index:-1;
  background:radial-gradient(closest-side, rgba(79,140,255,0.18), rgba(63,224,197,0.08), transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(7,11,20,0.72);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.05rem;
  white-space:nowrap;
}

.logo-mark{
  display:inline-flex;
  width:34px;
  height:34px;
  flex-shrink:0;
}
.logo-mark svg{
  width:100%;
  height:100%;
}

.logo-text-accent{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.nav{
  display:flex;
  align-items:center;
  gap:32px;
}

.nav a{
  font-size:0.94rem;
  color:var(--text-muted);
  transition:color .2s ease;
}
.nav a:hover{color:var(--text)}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.lang-switch{
  display:flex;
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
  gap:2px;
}

.lang-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--text-muted);
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.02em;
  padding:5px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lang-btn:hover{color:var(--text)}
.lang-btn.is-active{
  background:var(--surface-strong);
  color:var(--text);
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  border:1px solid var(--border);
  border-radius:8px;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:16px;
  margin:0 auto;
  background:var(--text);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:10px;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(0.98)}

.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#04070d;
  box-shadow:0 8px 24px -8px rgba(79,140,255,0.55);
}
.btn-primary:hover{box-shadow:0 10px 30px -6px rgba(79,140,255,0.7)}

.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn-ghost:hover{background:var(--surface)}

.btn-small{
  padding:9px 18px;
  font-size:0.85rem;
}

@media (max-width:860px){
  .btn-small{display:none}
}

.btn-cookie{
  padding:9px 18px;
  font-size:0.85rem;
  flex-shrink:0;
}

/* Hero */
.hero{
  padding:120px 0 100px;
}
.hero-inner{
  max-width:780px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  font-size:0.85rem;
  color:var(--text-muted);
}

.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  background:linear-gradient(135deg, #fff 30%, var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-subtitle{
  font-size:1.15rem;
  color:var(--text-muted);
  max-width:600px;
}

.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* Sections */
.section{
  padding:110px 0;
  border-bottom:1px solid var(--border);
}
.section-alt{
  background:linear-gradient(180deg, transparent, var(--bg-alt) 12%, var(--bg-alt) 88%, transparent);
}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}

.eyebrow{
  display:inline-block;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:14px;
}

.section-head h2{
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom:16px;
}

.section-head p{
  color:var(--text-muted);
  font-size:1.05rem;
}

/* About */
.value-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.value-card{
  padding:28px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform .2s ease, border-color .2s ease;
}
.value-card:hover{transform:translateY(-4px);border-color:rgba(79,140,255,0.4)}

.value-icon{font-size:1.6rem;display:block;margin-bottom:14px}

.value-card h3{font-size:1.02rem;margin-bottom:8px}
.value-card p{font-size:0.9rem;color:var(--text-muted)}

/* Services */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.service-card{
  padding:34px 28px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  position:relative;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(63,224,197,0.4);
  background:var(--surface-strong);
}

.service-num{
  display:inline-block;
  font-family:var(--font-head);
  font-size:0.85rem;
  font-weight:700;
  color:var(--accent);
  border:1px solid var(--border);
  border-radius:8px;
  padding:4px 10px;
  margin-bottom:20px;
}

.service-card h3{
  font-size:1.2rem;
  margin-bottom:12px;
}
.service-card p{
  color:var(--text-muted);
  font-size:0.95rem;
}

/* Projects */
.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.project-card{
  padding:36px 32px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  transition:transform .2s ease, border-color .2s ease;
}

.project-card-featured{
  background:linear-gradient(160deg, rgba(79,140,255,0.14), rgba(63,224,197,0.06));
  border-color:rgba(79,140,255,0.35);
}
.project-card-featured:hover{transform:translateY(-4px)}

.project-card h3{
  font-size:1.4rem;
}

.project-card p{
  color:var(--text-muted);
  font-size:0.95rem;
}

.project-badge{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  background:var(--surface-strong);
  border:1px solid var(--border);
  color:var(--text-muted);
}
.project-badge-active{
  background:rgba(63,224,197,0.16);
  border-color:rgba(63,224,197,0.4);
  color:var(--accent-2);
}

.project-link{
  margin-top:auto;
  font-weight:600;
  color:var(--accent-2);
  font-size:0.95rem;
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-row label{
  font-size:0.88rem;
  color:var(--text-muted);
}

.form-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

.form-row input,
.form-row textarea{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:13px 14px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.95rem;
  resize:vertical;
  transition:border-color .2s ease, background .2s ease;
}
.form-row input:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface-strong);
}

.form-row-checkbox{
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
}
.form-row-checkbox input{
  width:auto;
  margin-top:3px;
  accent-color:var(--accent);
}
.form-row-checkbox label{
  font-size:0.85rem;
}
.privacy-link{
  color:var(--accent-2);
  white-space:nowrap;
}
.privacy-link:hover{
  text-decoration:underline;
}

.contact-form .btn{
  align-self:flex-start;
  margin-top:8px;
}

.form-feedback{
  font-size:0.9rem;
  color:var(--accent-2);
  min-height:1.2em;
}

.contact-info{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.contact-info-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.contact-info-item h3{
  font-size:1rem;
  margin-bottom:4px;
}
.contact-info-item p{
  color:var(--text-muted);
  font-size:0.92rem;
}
.contact-info-item a:hover{color:var(--accent-2)}

/* Footer */
.site-footer{
  padding:40px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.footer-inner p{
  color:var(--text-muted);
  font-size:0.85rem;
}

/* Cookie banner */
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:200;
  background:rgba(7,11,20,0.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  transform:translateY(100%);
  transition:transform .35s ease;
}
.cookie-banner.is-visible{
  transform:translateY(0);
}
.cookie-banner-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.cookie-banner-inner p{
  color:var(--text-muted);
  font-size:0.88rem;
  max-width:640px;
  margin:0;
}
.cookie-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
}
.cookie-actions a{
  color:var(--accent-2);
  font-size:0.85rem;
  white-space:nowrap;
}
.cookie-actions a:hover{
  text-decoration:underline;
}

/* Reveal animation */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width:900px){
  .value-grid{grid-template-columns:repeat(2, 1fr)}
  .service-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:760px){
  .nav{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav.is-open{max-height:280px}
  .nav a{
    width:100%;
    padding:16px 24px;
    border-top:1px solid var(--border);
  }
  .nav-toggle{display:flex}
  .value-grid{grid-template-columns:1fr}
  .hero{padding:90px 0 70px}
  .section{padding:80px 0}
}