/* ===================================================================
   GERETRON — style system
   Palette: blueprint-black + signal-amber + trace-teal
   =================================================================== */

:root{
  --bg-void:      #090C10;
  --bg-panel:     #0F151B;
  --bg-panel-alt: #141C24;
  --bg-raised:    #1A232C;
  --line:         #232E39;
  --line-soft:    #1A222B;

  --text-hi:      #EAF2F8;
  --text-mid:     #A9B8C5;
  --text-low:     #6C7C8A;

  --amber:        #FF8A3D;
  --amber-dim:    #7A4720;
  --teal:         #4FE3C1;
  --teal-dim:     #1E4E45;

  --font-cjk:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  --font-disp: "Space Grotesk", var(--font-cjk), sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-body: "Inter", var(--font-cjk), sans-serif;

  --radius: 3px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-void);
  color:var(--text-hi);
  font-family:var(--font-body), var(--font-cjk);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-disp); margin:0; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

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

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background:var(--amber);
  display:inline-block;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(9,12,16,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-disp); font-weight:700; font-size:17px;
  letter-spacing:0.02em;
}
.nav-logo .mark{
  width:26px; height:26px;
  border:1.5px solid var(--amber);
  border-radius:50%;
  position:relative;
  flex:none;
}
.nav-logo .mark::after{
  content:"";
  position:absolute; inset:6px;
  border:1.5px solid var(--teal);
  border-radius:50%;
}
.nav-links{
  display:flex; gap:32px;
  font-size:14px;
  color:var(--text-mid);
}
.nav-links a{ transition:color .15s; }
.nav-links a:hover{ color:var(--text-hi); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.lang-btn{
  font-family:var(--font-mono);
  font-size:12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-mid);
  padding:7px 12px;
  border-radius:var(--radius);
  letter-spacing:0.06em;
  transition:border-color .15s, color .15s;
}
.lang-btn:hover{ border-color:var(--amber); color:var(--text-hi); }
.nav-cta{
  display:none;
}
@media(min-width:760px){
  .nav-cta{ display:inline-flex; }
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600;
  padding:10px 18px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .15s, border-color .15s, background .15s, color .15s;
}
.btn-primary{
  background:var(--amber);
  color:#1A0F04;
}
.btn-primary:hover{ transform:translateY(-1px); background:#ff9d5c; }
.btn-ghost{
  border-color:var(--line);
  color:var(--text-hi);
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }

.mobile-toggle{
  display:flex; flex-direction:column; gap:4px;
  background:none; border:none; padding:6px;
}
.mobile-toggle span{ width:20px; height:1.5px; background:var(--text-hi); }
@media(min-width:900px){ .mobile-toggle{ display:none; } }
.nav-links{ display:none; }
@media(min-width:900px){ .nav-links{ display:flex; } }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:150px 0 70px;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero-grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 20%, transparent 75%);
  opacity:0.5;
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; }
.hero h1{
  font-size:clamp(32px, 5vw, 56px);
  line-height:1.15;
  max-width:820px;
  letter-spacing:-0.01em;
}
.hero h1 .accent{ color:var(--amber); }
.hero-sub{
  margin-top:22px;
  font-size:17px;
  color:var(--text-mid);
  max-width:640px;
}
.hero-actions{
  margin-top:34px;
  display:flex; gap:14px; flex-wrap:wrap;
}

/* Signal diagram */
.diagram-wrap{
  margin-top:70px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-void));
  border-radius:6px;
  padding:10px;
}
.diagram-caption{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-low);
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 10px 14px;
}
.diagram-caption .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--teal);
  display:inline-block;
  margin-right:6px;
  box-shadow:0 0 6px var(--teal);
}
.sig-node-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  fill:var(--text-mid);
  letter-spacing:0.04em;
}
.sig-hub-label{
  font-family:var(--font-disp);
  font-weight:700;
  fill:var(--text-hi);
}
.sig-symbol{ stroke:var(--text-mid); fill:none; stroke-width:1.6; }
.sig-line{ stroke:var(--line); stroke-width:1.4; fill:none; }
.sig-pulse{ fill:var(--amber); filter:drop-shadow(0 0 4px var(--amber)); }
.sig-hub-shell{ fill:var(--bg-raised); stroke:var(--amber); stroke-width:1.6; }
.sig-hub-ring{ fill:none; stroke:var(--teal); stroke-width:1; opacity:0.5; }
.sig-teal{ fill:var(--teal); }
.sig-motor-m{ fill:var(--text-mid); font-family:var(--font-mono); }

.brand-strip{
  margin-top:18px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.brand-chip{
  font-family:var(--font-mono);
  font-size:12px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--text-mid);
  animation:chip-pulse 6s ease-in-out infinite;
}
@keyframes chip-pulse{
  0%,88%,100%{ border-color:var(--line); color:var(--text-mid); }
  92%{ border-color:var(--amber); color:var(--text-hi); box-shadow:0 0 12px -3px var(--amber); }
}

/* ---------- SECTION SHELL ---------- */
section{ padding:96px 0; border-bottom:1px solid var(--line-soft); }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); }
.section-head p{ margin-top:16px; color:var(--text-mid); font-size:15.5px; }

/* ---------- ADVANTAGE (2 col) ---------- */
.adv-grid{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
@media(min-width:820px){ .adv-grid{ grid-template-columns:1fr 1fr; } }
.adv-card{
  background:var(--bg-panel);
  padding:38px;
}
.adv-card .tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  color:var(--teal); text-transform:uppercase; margin-bottom:14px; display:block;
}
.adv-card h3{ font-size:22px; margin-bottom:14px; }
.adv-card p{ color:var(--text-mid); font-size:15px; }
.adv-list{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.adv-list li{
  font-size:14px; color:var(--text-mid);
  display:flex; gap:10px; align-items:baseline;
}
.adv-list li::before{
  content:"—"; color:var(--amber); flex:none;
}

/* ---------- SERVICES ---------- */
.svc-grid{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
@media(min-width:640px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1000px){ .svc-grid{ grid-template-columns:repeat(4,1fr); } }
.svc-card{
  background:var(--bg-panel);
  padding:30px 26px;
  transition:background .2s;
}
.svc-card:hover{ background:var(--bg-panel-alt); }
.svc-icon{
  width:38px; height:38px;
  margin-bottom:22px;
}
.svc-card h3{ font-size:17px; margin-bottom:10px; }
.svc-card p{ font-size:13.5px; color:var(--text-mid); }

/* ---------- EXPERTISE MATRIX ---------- */
.matrix-block{ margin-bottom:44px; }
.matrix-block:last-child{ margin-bottom:0; }
.matrix-label{
  font-family:var(--font-mono); font-size:12px; color:var(--text-low);
  text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:16px; display:block;
}
.badge-wall{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{
  font-family:var(--font-mono); font-size:13px;
  padding:9px 15px;
  background:var(--bg-panel-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-hi);
  transition:border-color .15s, color .15s;
}
.badge:hover{ border-color:var(--teal); color:var(--teal); }
.badge.amber:hover{ border-color:var(--amber); color:var(--amber); }

/* ---------- CLIENTS ---------- */
.client-row{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line-soft);
}
.client-cell{
  flex:1 1 140px;
  padding:22px 18px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--text-mid);
  transition:color .15s;
}
.client-cell:hover{ color:var(--text-hi); }

/* ---------- CASES / PRODUCTS placeholder cards ---------- */
.grid-3{
  display:grid; grid-template-columns:1fr; gap:20px;
}
@media(min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.case-card{
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:var(--bg-panel);
  display:flex; flex-direction:column;
}
.case-thumb{
  height:150px;
  background:
    repeating-linear-gradient(135deg, var(--bg-raised) 0 2px, var(--bg-panel-alt) 2px 14px);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.case-thumb span{
  font-family:var(--font-mono); font-size:11px; color:var(--text-low);
  letter-spacing:0.1em; text-transform:uppercase;
  border:1px dashed var(--line);
  padding:6px 12px; border-radius:20px;
}
.case-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.case-thumb-img{ padding:0; background:none; }
.case-thumb-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.data-loading, .data-error{
  font-family:var(--font-mono);
  font-size:13px;
  padding:14px 2px;
}
.data-loading{ color:var(--text-low); }
.data-error{ color:var(--amber); max-width:640px; line-height:1.6; }

.case-body .cat{
  font-family:var(--font-mono); font-size:11px; color:var(--amber);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;
}
.case-body h3{ font-size:16.5px; margin-bottom:8px; }
.case-body p{ font-size:13.5px; color:var(--text-mid); flex:1; }

.section-foot-note{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-low);
  display:flex; align-items:center; gap:8px;
}
.section-foot-note::before{
  content:"◆"; color:var(--teal); font-size:9px;
}

/* ---------- CONTACT ---------- */
.contact-panel{
  border:1px solid var(--line);
  border-radius:6px;
  background:linear-gradient(135deg, var(--bg-panel), var(--bg-panel-alt));
  padding:52px 40px;
  display:grid; gap:40px;
  grid-template-columns:1fr;
}
@media(min-width:820px){ .contact-panel{ grid-template-columns:1.2fr 1fr; } }
.contact-panel h2{ font-size:clamp(24px,3vw,34px); margin-bottom:16px; }
.contact-panel p{ color:var(--text-mid); font-size:15px; max-width:460px; }
.contact-fields{ display:flex; flex-direction:column; gap:18px; }
.field-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;
}
.field-row .k{ color:var(--text-low); font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }
.field-row .v{ color:var(--text-hi); font-family:var(--font-mono); }

/* ---------- FOOTER ---------- */
footer{ padding:40px 0; }
.foot-row{
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:center;
  font-size:13px; color:var(--text-low);
}
.foot-row .foot-links{ display:flex; gap:20px; }
.foot-row a:hover{ color:var(--text-mid); }

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* mobile nav sheet */
.mobile-sheet{
  position:fixed; inset:64px 0 0 0;
  background:var(--bg-void);
  z-index:99;
  padding:30px 28px;
  display:flex; flex-direction:column; gap:22px;
  transform:translateX(100%);
  transition:transform .25s ease;
}
.mobile-sheet.open{ transform:translateX(0); }
.mobile-sheet a{ font-size:20px; font-family:var(--font-disp); }