:root{
  --base:#F5F3FA;
  --surface:#AF91D7;
  --surface-2:#EBE8F6;
  --line:#283593;
  --ink:#1D1A30;
  --ink-dim:#5F5B7A;
  --accent:#7E57C2;
  --accent-dim:#5E3FA3;
  --accent-deep:#283593;
  --gold:#FF4081;
  --gold-dim:#E0246E;
  --gold-ink:#FFFFFF;
  --status-live:#7E57C2;
  --footer:#283593;
  --footer-ink:#FFFFFF;
  --done-bg:#E1FCFE;
  --done-ink:#283593;
  --progress-bg:#7E57C2;
  --progress-ink:#FFFFFF;
  --pending-bg:#EFEDF7;
  --pending-ink:#5A5670;
  --err:#D81B60;
  --font-display:'Archivo',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-body:'Archivo',sans-serif;
}

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

html{scroll-behavior:smooth;}

body{
  background:#AF91D7;
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  font-size:16px;
}

body.no-scroll{overflow:hidden;}

a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}

.mono{font-family:var(--font-mono);}

.wrap{max-width:1200px;margin:0 auto;padding-left:48px;padding-right:48px;}

header.site{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 48px;
  border-bottom:1px solid rgba(255,255,255,0.15);
  position:sticky;top:0;z-index:20;
  background:var(--footer);
}

.brand{display:flex;align-items:center;gap:12px;color:var(--footer-ink);}
.brand .mark{width:28px;height:28px;flex-shrink:0;}
.brand .word{display:flex;align-items:baseline;gap:8px;color:var(--footer-ink);}
.brand .word b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:0.02em;}
.brand .word span{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.16em;color:#C9C5E2;}

nav.main{display:flex;gap:30px;align-items:center;}
nav.main a{font-family:var(--font-mono);font-size:0.88rem;color:var(--footer-ink);transition:color 0.2s ease;}
nav.main a:hover{color:var(--gold);}
.nav-close{display:none;background:none;border:none;color:var(--footer-ink);font-size:1.6rem;line-height:1;}

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

.lang{display:flex;border:1px solid rgba(255,255,255,0.3);}
.lang button{
  background:none;border:none;color:#D9D5F0;
  font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.06em;
  padding:6px 11px;transition:background 0.2s ease,color 0.2s ease;
}
.lang button + button{border-left:1px solid rgba(255,255,255,0.3);}
.lang button:hover{color:#FFFFFF;}
.lang button.active{background:var(--accent);color:#FFFFFF;}

.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:6px;
}
.hamburger span{width:22px;height:2px;background:var(--footer-ink);transition:transform 0.2s ease,opacity 0.2s ease;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:0.88rem;
  padding:12px 22px;
  border:1px solid var(--accent-dim);
  background:var(--accent-dim);
  color:#FFFFFF;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#FFFFFF;}
.btn.solid{background:var(--accent-dim);border-color:var(--accent-dim);color:#FFFFFF;}
.btn.solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#FFFFFF;}

.btn.in-hero{background:#FFFFFF;border-color:rgba(40,53,147,0.35);color:#283593;font-weight:600;box-shadow:0 4px 14px rgba(40,53,147,0.25);}
.btn.in-hero:hover{background:#E1FCFE;border-color:var(--accent-deep);color:#283593;}

.hero{
  padding:90px 48px 80px;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;
  max-width:none;margin:0;
  background:linear-gradient(to bottom,var(--footer) 0%,var(--accent) 45%,#AF91D7 100%);
}
.hero-copy{padding:0 0 0 6vw;}

.hero-label{
  font-family:var(--font-mono);color:#FFFFFF;font-size:0.85rem;margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.hero-label::before{content:'';width:22px;height:1px;background:#FFFFFF;}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-0.015em;max-width:16ch;
  color:#FFFFFF;text-shadow:0 1px 3px rgba(0,0,0,0.35),0 0 14px rgba(0,0,0,0.25);
}
.hero p.lead{margin-top:22px;max-width:50ch;color:#FFFFFF;font-size:1.05rem;text-shadow:0 1px 3px rgba(0,0,0,0.35),0 0 14px rgba(0,0,0,0.25);}
.hero .actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}
.hero-graphic{aspect-ratio:1/1;}
.hero-graphic svg{width:100%;height:100%;}
.hero-graphic img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,0.25);box-shadow:0 12px 40px rgba(0,0,0,0.35);}

.project-hero .tag{color:#FFFFFF;}
.project-hero .hero-badge-row{margin-top:18px;display:flex;gap:10px;align-items:center;}
.project-hero .badge{font-size:0.78rem;padding:5px 12px;}
.project-hero .ref{color:#FFFFFF;margin-top:14px;letter-spacing:0.04em;}

.tag{font-family:var(--font-mono);color:#283593;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;}

.section-head{padding:60px 48px 24px;max-width:1200px;margin:0 auto;background:#AF91D7;}
.section-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);margin-top:10px;color:#283593;}
.section-head .count{font-family:var(--font-mono);color:#283593;font-size:0.85rem;margin-top:12px;}

.about{
  padding:80px 48px;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:0.4fr 0.6fr;gap:48px;
  border-top:1px solid var(--line);
  background:#AF91D7;
}
.about h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);color:#283593;}
.about p{max-width:60ch;color:#283593;margin-top:16px;font-size:1.02rem;}
.about p:last-child{margin-top:10px;}

.services{border-top:1px solid var(--line);padding-bottom:80px;background:#AF91D7;}
.services-grid{
  max-width:1200px;margin:34px auto 0;
  padding:0 48px;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;
  background:#AF91D7;
}
.card.svc{
  background:var(--surface);
  border:1px solid var(--line);
  padding:26px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color 0.2s ease,transform 0.2s ease;
}
.card.svc:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 0 20px rgba(126,87,194,0.35);}
.card.svc .svc-icon{width:30px;height:30px;color:#283593;}
.card.svc h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:#283593;}
.card.svc .desc{color:#283593;font-size:0.96rem;}

.projects{border-top:1px solid var(--line);background:#AF91D7;}

.filters{
  max-width:1200px;margin:30px auto 0;
  display:flex;gap:10px;flex-wrap:wrap;
  padding:0 48px;
  background:#AF91D7;
}
.filter{
  border:1px solid var(--line);background:none;color:#283593;
  font-family:var(--font-mono);font-size:0.82rem;
  padding:9px 18px;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
.filter:hover{border-color:var(--accent);color:#283593;}
.filter.active{background:var(--accent);border-color:var(--accent);color:#FFFFFF;box-shadow:0 0 14px rgba(126,87,194,0.5);}

.grid{
  max-width:1200px;margin:34px auto 0;
  padding:0 48px 90px;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;
  background:#AF91D7;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:border-color 0.2s ease,transform 0.2s ease;
}
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 0 24px rgba(126,87,194,0.45),0 0 8px rgba(255,64,129,0.25);}
.card .thumb{
  aspect-ratio:16/10;background:var(--surface-2);
  position:relative;overflow:hidden;cursor:pointer;
}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .thumb:hover img{transform:scale(1.03);}
.card .thumb img{transition:transform 0.3s ease;}
.card .ref{
  font-family:var(--font-mono);font-size:0.7rem;color:#283593;
  position:absolute;top:10px;left:10px;
  background:var(--base);padding:3px 8px;
}
.badge{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;
  padding:3px 9px;
}
.badge.status-done{background:var(--done-bg);color:var(--done-ink);border:1px solid #c5e6cb;}
.badge.status-inprogress{background:var(--progress-bg);color:var(--progress-ink);border:1px solid #e8d06e;}
.badge.status-pending{background:var(--pending-bg);color:var(--pending-ink);border:1px solid var(--line);}
.card .thumb .badge{position:absolute;top:10px;right:10px;}
.card h3{font-family:var(--font-body);font-weight:600;font-size:1.15rem;padding:18px 20px 0;color:#283593;}
.card p.desc{color:#283593;font-size:0.94rem;padding:8px 20px 20px;}

.contact{
  padding:96px 48px 110px;
  max-width:none;margin:0;
  background:linear-gradient(to bottom,#AF91D7 0%,var(--accent) 45%,var(--footer) 100%);
  color:var(--footer-ink);
}
.contact-wrap{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:0.45fr 0.55fr;gap:56px;
}
.contact .tag{color:#FFFFFF;}
.contact h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);margin-top:10px;color:#FFFFFF;}
.contact-sub{color:#E9E2F9;margin-top:14px;max-width:42ch;}
.info-list{margin-top:30px;display:flex;flex-direction:column;gap:16px;}
.info-item{display:flex;flex-direction:column;gap:4px;}
.info-label{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:#D9CFF5;}
.info-item a{color:#FFFFFF;font-size:1rem;font-family:var(--font-mono);transition:color 0.2s ease;}
.info-item a:hover{color:var(--gold);}
.info-item .social{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);}
.info-item .social svg{width:18px;height:18px;}

form.contact-form{display:flex;flex-direction:column;gap:18px;}
.contact .field label{color:#E9E2F9;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink-dim);}
.field input,.field textarea{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;font-family:var(--font-body);font-size:0.98rem;
  transition:border-color 0.2s ease,background 0.2s ease,box-shadow 0.2s ease;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#E1FCFE;color:#283593;box-shadow:0 0 0 3px rgba(126,87,194,0.25);}
.field input:focus::placeholder,.field textarea:focus::placeholder{color:#5F6899;}
.form-msg{font-size:0.9rem;min-height:1.2em;}
.form-msg.ok{color:#1E7E34;font-weight:600;}
.form-msg.err{color:var(--err);}
.contact .form-msg.ok{color:#BFF2CB;}
.contact .form-msg.err{color:#FF9EBC;}
form.contact-form .btn{align-self:flex-start;background:var(--gold);border-color:var(--gold);color:#FFFFFF;box-shadow:0 0 16px rgba(255,64,129,0.45);}
form.contact-form .btn:hover{background:var(--gold-dim);border-color:var(--gold-dim);color:#FFFFFF;box-shadow:0 0 24px rgba(255,64,129,0.65);}

footer.site{
  padding:28px 48px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:0.8rem;color:var(--footer-ink);
  background:var(--footer);
  border-top:1px solid var(--footer);
}

.lightbox{
  position:fixed;inset:0;z-index:50;
  background:rgba(20,18,14,0.9);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease;
}
.lightbox.open{opacity:1;visibility:visible;}
.lb-content{
  max-width:760px;width:100%;
  background:var(--surface);border:1px solid var(--line);
  overflow:hidden;max-height:90vh;overflow-y:auto;
}
.lb-content img{width:100%;display:block;object-fit:cover;max-height:60vh;}
.lb-content figcaption{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;}
.lb-content figcaption .badge{align-self:flex-start;}
.lb-content figcaption h3{font-family:var(--font-display);font-weight:700;font-size:1.4rem;}
.lb-content figcaption p{color:var(--ink-dim);}
.lb-project{
  display:none;
  align-self:flex-start;margin-top:6px;
  background:var(--gold);color:#FFFFFF;border:1px solid var(--gold);
  font-family:var(--font-mono);font-size:0.88rem;padding:11px 20px;border-radius:4px;
  box-shadow:0 0 16px rgba(255,64,129,0.45);
  transition:background 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
}
.lb-project.show{display:inline-flex;align-items:center;gap:8px;}
.lb-project:hover{background:var(--gold-dim);border-color:var(--gold-dim);box-shadow:0 0 24px rgba(255,64,129,0.7);}
.lb-close{
  position:absolute;top:18px;right:22px;
  background:none;border:none;color:#FFFFFF;
  font-size:2rem;line-height:1;
  transition:color 0.2s ease;
}
.lb-close:hover{color:var(--gold);}

.fab{
  position:fixed;right:26px;bottom:26px;z-index:40;
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:#FFFFFF;
  box-shadow:0 6px 20px rgba(0,0,0,0.35),0 0 22px rgba(255,64,129,0.55);
  transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
}
.fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 26px rgba(0,0,0,0.4),0 0 32px rgba(255,64,129,0.75);background:var(--gold-dim);}
.fab svg{width:30px;height:30px;}
.fab .fab-label{
  position:absolute;right:72px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--gold);color:var(--ink);
  font-family:var(--font-mono);font-size:0.78rem;padding:6px 12px;border-radius:4px;
  opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease;
}
.fab:hover .fab-label{opacity:1;visibility:visible;}

@media (max-width:900px){
  header.site{padding:16px 22px;}
  .hero{padding:60px 22px;grid-template-columns:1fr;}
  .hero-copy{padding:0;}
  .about{padding:60px 22px;grid-template-columns:1fr;}
  .section-head{padding:50px 22px 20px;}
  .services-grid{padding:26px 22px;grid-template-columns:1fr;}
  .filters{padding:26px 22px;}
  .grid{padding:26px 22px 70px;grid-template-columns:1fr;}
  .contact{padding:72px 22px 96px;}
  .contact-wrap{grid-template-columns:1fr;}
  footer.site{padding:22px;}

  .hamburger{display:flex;}
  nav.main{
    position:fixed;inset:0;z-index:30;
    flex-direction:column;justify-content:center;gap:28px;
    background:var(--footer);
    padding:24px;
    opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease;
  }
  nav.main.open{opacity:1;visibility:visible;}
  nav.main a{font-size:1.15rem;}
  .nav-close{display:block;position:absolute;top:20px;right:22px;}

  .fab{right:18px;bottom:18px;width:54px;height:54px;}
  .fab .fab-label{display:none;}
}