@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;900&family=IBM+Plex+Serif:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#f2ede1;
  --bg-alt:#ece4cf;
  --surface:#faf8f1;
  --border:rgba(20,33,61,.2);
  --border-strong:rgba(20,33,61,.55);
  --text:#14213d;
  --text-dim:#4c5875;
  --text-faint:#8892a8;
  --accent:#2452ff;
  --accent-strong:#132fa0;
  --accent-soft:rgba(36,82,255,.1);
  --space-xs:.5rem;
  --space-sm:.875rem;
  --space-md:1.5rem;
  --space-lg:2.5rem;
  --space-xl:4rem;
  --space-2xl:6rem;
  --space-3xl:9rem;
  --size-sm:.875rem;
  --size-lg:1.25rem;
  --font-display:'Archivo',sans-serif;
  --font-body:'IBM Plex Serif',serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, rgba(36,82,255,.06) 0px, rgba(36,82,255,.06) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(36,82,255,.06) 0px, rgba(36,82,255,.06) 1px, transparent 1px, transparent 64px),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
a:hover{color:var(--accent-strong);}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0 0 var(--space-md);letter-spacing:-.01em;color:var(--text);}
h1{font-size:clamp(2.6rem,5.5vw,4.6rem);font-weight:900;text-transform:uppercase;}
h2{font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase;}
h3{font-size:1.1rem;font-weight:700;}
p{margin:0 0 var(--space-md);color:var(--text);}
.text-secondary{color:var(--text-dim);}
ul{padding:0;list-style:none;}
.container{max-width:1180px;margin:0 auto;padding:0 var(--space-md);}

/* kicker */
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--space-md);
}
.kicker::before{content:'';width:8px;height:8px;border:2px solid var(--accent);transform:rotate(45deg);flex:none;}

/* header */
header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--space-md);
  max-width:1180px;margin:0 auto;
  background:rgba(242,237,225,.86);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--text);
}
.logo{display:flex;align-items:center;gap:.65rem;}
.logo-mark{width:34px;height:34px;overflow:hidden;position:relative;flex:none;}
.logo-mark img{position:absolute;top:-2px;left:0;width:100%;height:auto;filter:brightness(0);opacity:.88;}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--text);}
nav{display:flex;gap:var(--space-lg);}
nav a{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);position:relative;padding-bottom:4px;text-decoration:none;
}
nav a:hover{color:var(--text);}
nav a.active{color:var(--accent);}
nav a.active::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);}
.lang-toggle{display:flex;gap:.4rem;font-family:var(--font-mono);font-size:.75rem;}
.lang-toggle a{color:var(--text-faint);padding:.3rem .55rem;border:2px solid var(--border);text-decoration:none;}
.lang-toggle a.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}

/* hero */
.hero{
  position:relative;overflow:hidden;
  padding:var(--space-3xl) var(--space-md) var(--space-2xl);
  background:var(--bg);
  border-bottom:2px solid var(--text);
}
.hero::after{
  content:'ETHI.C LAB — TECHNICAL DOSSIER';
  position:absolute;top:34px;right:var(--space-md);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--text-faint);
  border:1px solid var(--border-strong);padding:.4rem .7rem;transform:rotate(2deg);
}
.hero .container{position:relative;z-index:1;}
.hero h1{max-width:820px;}
.hero .text-secondary{max-width:640px;font-size:1.08rem;}

main > section{padding:var(--space-2xl) var(--space-md);}
main > section.tight{padding-top:0;}

/* buttons: neo-brutalist stamped */
.cta,.cta-secondary{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.9rem 1.5rem;text-decoration:none;
  border:2px solid var(--text);
  transition:transform .15s, box-shadow .15s;
}
.cta{background:var(--accent);color:#fdfdfb;font-weight:600;box-shadow:5px 5px 0 var(--text);}
.cta:hover{background:var(--accent-strong);color:#fdfdfb;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--text);}
.cta-secondary{border:2px solid var(--text);color:var(--text);background:var(--surface);box-shadow:5px 5px 0 var(--border-strong);}
.cta-secondary:hover{color:var(--accent);border-color:var(--accent);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--border-strong);}

/* cards / grids */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:var(--space-lg);}
.services-grid .card{background:var(--bg-alt);margin:0;}
.card{
  position:relative;
  background:var(--surface);border:1px solid var(--border);padding:var(--space-lg);
}
.card::before,.card::after{content:'';position:absolute;width:12px;height:12px;border:2px solid var(--accent);}
.card::before{top:-2px;left:-2px;border-right:none;border-bottom:none;}
.card::after{bottom:-2px;right:-2px;border-left:none;border-top:none;}
.card .index{font-family:var(--font-mono);color:var(--accent);font-size:.85rem;display:block;margin-bottom:var(--space-sm);}
.grid-two{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);margin-top:var(--space-lg);}
.grid-two > div{border-top:2px solid var(--text);padding-top:var(--space-md);}

/* process timeline */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-top:var(--space-2xl);position:relative;}
.process-row::before{content:'';position:absolute;top:19px;left:0;right:0;border-top:2px dashed var(--border-strong);}
.process-step{position:relative;padding-top:var(--space-lg);}
.process-step .num{
  position:absolute;top:0;left:0;width:38px;height:38px;
  background:var(--bg);border:2px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.85rem;font-weight:600;
}

/* lists */
.spec-list{margin:0;}
.spec-list li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;color:var(--text-dim);}
.spec-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-family:var(--font-mono);}
.spec-list li strong{color:var(--text);}

.divider-top{border-top:2px solid var(--text);padding-top:var(--space-2xl)!important;}

footer{
  border-top:2px solid var(--text);padding:var(--space-xl) var(--space-md);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  font-family:var(--font-mono);font-size:.8rem;color:var(--text-faint);
  max-width:1180px;margin:0 auto;
}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--accent);}

.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-md);}
.tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border-strong);color:var(--text-dim);padding:.3rem .6rem;}

@media (max-width:760px){
  header{flex-wrap:wrap;gap:1rem;}
  nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;gap:var(--space-md);}
  .services-grid{grid-template-columns:1fr;}
  .grid-two{grid-template-columns:1fr;}
  .process-row{grid-template-columns:1fr;gap:var(--space-lg);}
  .process-row::before{display:none;}
  .hero::after{display:none;}
}