/* ===========================================================
   SURFACE TECH INDUSTRIES — Design System v2
   ----------------------------------------------------------
   PALETTE — not generic navy/blue: layered metal + oxide dye.
     --navy        #0A1420   base substrate
     --navy-2      #0F1D2A   panel
     --steel       #46566A   mid steel
     --steel-deep  #1B2530   deep steel / hairlines
     --white       #F2F4F6   ink white
     --silver      #98ABBC   secondary text
     --blue        #3FC4FF   electric blue (process / current)
     --oxide       #C98A3D   anodized bronze/gold dye — secondary
                              signature accent, used sparingly
   TYPE
     Display  — Big Shoulders Display (condensed industrial slab;
                named for Sandburg's "City of Big Shoulders" —
                heavy-industry lineage, used tight + large)
     Heading  — Archivo (grotesk workhorse, wide weight range)
     Body     — IBM Plex Sans
     Data     — IBM Plex Mono
   SIGNATURE
     The oxide cross-section: a layered micron diagram of
     substrate + grown oxide film with a measurement bracket.
     This is literally what anodizing does — it is the one
     visual no generic "industrial" site would reach for.
   =========================================================== */

:root{
  --navy:#0A1420;
  --navy-2:#0F1D2A;
  --steel:#46566A;
  --steel-deep:#1B2530;
  --white:#F2F4F6;
  --silver:#93A7B8;
  --blue:#3FC4FF;
  --blue-deep:#0E7FB0;
  --oxide:#C98A3D;
  --oxide-deep:#8C5A22;
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy);
  color:var(--white);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:var(--navy);}

h1,h2,h3,h4{ font-family:'Archivo',sans-serif; letter-spacing:-0.01em; }
.font-display{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
}
.hero-headline{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  line-height:0.92;
}
.font-mono{font-family:'IBM Plex Mono',monospace;}

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

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- Layout helpers ---------- */
.wrap{max-width:1320px;margin:0 auto;padding-left:24px;padding-right:24px;}
@media(min-width:768px){.wrap{padding-left:48px;padding-right:48px;}}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{ content:"";width:18px;height:1px;background:var(--blue);display:block; }
.eyebrow.gold{ color:var(--oxide); }
.eyebrow.gold::before{ background:var(--oxide); }

/* ---------- Glassmorphism Nav ---------- */
.glass-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,20,32,0.55);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .3s ease;
}
.glass-nav.scrolled{background:rgba(8,16,26,0.88);}

.nav-link{
  font-family:'Archivo',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.01em; color:var(--silver);
  position:relative; padding:6px 0; transition:color .25s;
}
.nav-link:hover{color:var(--white);}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--blue);transition:width .3s ease;
}
.nav-link:hover::after{width:100%;}
.nav-link.active{color:var(--blue);}
.nav-link.active::after{width:100%;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;
  font-size:14px; font-weight:700; letter-spacing:.01em;
  padding:14px 26px; border-radius:var(--radius);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:var(--navy); }
.btn-primary:hover{
  background:#6BD3FF;
  box-shadow:0 0 28px rgba(63,196,255,.4);
  transform:translateY(-1px);
}
.btn-ghost{ border:1px solid rgba(255,255,255,.22); color:var(--white); }
.btn-ghost:hover{border-color:var(--blue); color:var(--blue); background:rgba(63,196,255,.06);}
.btn-arrow{transition:transform .3s;}
.btn:hover .btn-arrow{transform:translateX(4px);}

/* ---------- Signature: oxide cross-section divider ---------- */
.oxide-divider{ position:relative; height:46px; width:100%; overflow:hidden; }
.oxide-divider svg{ width:100%; height:100%; display:block; }

/* ---------- Process line (kept, recolored) ---------- */
.process-line{ position:relative; height:2px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(63,196,255,.35) 20%, rgba(63,196,255,.35) 80%, transparent); }
.process-line .node{ position:absolute; top:50%; width:7px;height:7px; border-radius:50%;
  background:var(--blue); transform:translate(-50%,-50%); box-shadow:0 0 10px var(--blue); }
.process-line .pulse{ position:absolute; top:50%; left:0; width:60px; height:2px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, #fff, transparent); filter:blur(.5px);
  animation:travel 4.5s linear infinite; }
@keyframes travel{ 0%{left:-10%;opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:108%;opacity:0;} }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:
    radial-gradient(ellipse 55% 50% at 82% 18%, rgba(63,196,255,.14), transparent 60%),
    radial-gradient(ellipse 40% 35% at 15% 85%, rgba(201,138,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(8,14,22,.5), rgba(8,14,22,.93) 80%, var(--navy) 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2" result="t"/><feColorMatrix in="t" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0"/></filter><rect width="800" height="800" filter="url(%23n)"/></svg>');
  background-size:cover, cover, cover, 300px 300px;
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, black, transparent 85%);
}

/* ---------- Cards: engineering-drawing corner ticks ---------- */
.card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  transition:border-color .35s, transform .35s, background .35s;
}
.card::before, .card::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
  opacity:0; transition:opacity .35s;
}
.card::before{ top:-1px; left:-1px; border-top:1.5px solid var(--blue); border-left:1.5px solid var(--blue); }
.card::after{ bottom:-1px; right:-1px; border-bottom:1.5px solid var(--blue); border-right:1.5px solid var(--blue); }
.card:hover{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(160deg, rgba(63,196,255,.07), rgba(255,255,255,.02));
  transform:translateY(-4px);
}
.card:hover::before, .card:hover::after{ opacity:1; }
.card .idx{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--blue); opacity:.8; }

/* ---------- misc ---------- */
.hairline{height:1px;background:rgba(255,255,255,.08);}
.split-blue{color:var(--blue);}
.split-gold{color:var(--oxide);}
.tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.15); padding:4px 10px; border-radius:999px; color:var(--silver);
}
.bg-noise-panel{
  background:radial-gradient(circle at 30% 20%, rgba(63,196,255,.06), transparent 55%), var(--navy-2);
}
.stat-num{font-family:'Big Shoulders Display',sans-serif; font-weight:800;}

input,textarea,select{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  color:var(--white);
  border-radius:2px;
  padding:12px 14px;
  font-size:14px;
  width:100%;
  font-family:'IBM Plex Sans',sans-serif;
  transition:border-color .25s, background .25s;
}
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--blue); background:rgba(63,196,255,.05); }
label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--silver); text-transform:uppercase; margin-bottom:6px; display:block; }
select option{background:var(--navy-2);}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.oxide-tab-btn{ color:var(--silver); background:transparent; cursor:pointer; }
.oxide-tab-btn:hover{ border-color:rgba(63,196,255,.4); color:var(--white); }
.oxide-tab-btn.active{ background:var(--blue); color:var(--navy); border-color:var(--blue); font-weight:700; }

/* ---------- Process Finder tool ---------- */
.pf-pill{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.02em;
  padding:10px 16px; border:1px solid rgba(255,255,255,.16); border-radius:999px;
  color:var(--silver); cursor:pointer; transition:all .2s ease; background:transparent;
}
.pf-pill:hover{ border-color:rgba(63,196,255,.5); color:var(--white); }
.pf-pill.selected{ background:var(--blue); border-color:var(--blue); color:var(--navy); font-weight:600; }
.pf-step{ opacity:.35; pointer-events:none; transition:opacity .4s ease; }
.pf-step.active{ opacity:1; pointer-events:auto; }
.pf-result{
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .5s ease, max-height .5s ease;
}
.pf-result.show{ opacity:1; max-height:500px; }

footer a:hover{color:var(--blue);}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:var(--steel);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--blue-deep);}