/* ===========================================================
   GC Metal Solutions — site styles
   Brand: black + metallic silver + lime accent. Oswald / Barlow.
   =========================================================== */
:root{
  --black:#0A0A0A; --ink:#0d100d; --panel:#12160f; --panel2:#171c12;
  --line:#242a20; --line2:#333a2c;
  --lime:#A6E22E; --lime-d:#7ED321; --green:#2E8B2E; --deep:#12401A;
  --txt:#E8ECE4; --mut:#9BA595; --dim:#6f776a;
  --white:#fff;
  --maxw:1180px;
  --r:14px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --silver:linear-gradient(180deg,#ffffff 0%,#d8d8d8 42%,#9a9a9a 100%);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--black); color:var(--txt);
  font-family:'Barlow',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.ey,.btn,.nav a{font-family:'Oswald','Arial Narrow',Arial,sans-serif;}
h1,h2,h3{line-height:1.06; margin:0 0 .5em; letter-spacing:.5px; font-weight:600;}
h2{font-size:clamp(28px,4.2vw,46px); text-transform:uppercase;}
h3{font-size:clamp(20px,2.4vw,26px); text-transform:uppercase; letter-spacing:1px;}
p{margin:0 0 1em;}
a{color:var(--lime); text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.silver{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lime{color:var(--lime);}
.ey{display:inline-block; font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--lime); font-weight:600; margin-bottom:14px;}
.sec{padding:84px 0;}
.sec.tight{padding:56px 0;}
.center{text-align:center;}
.lead{font-size:clamp(17px,2vw,20px); color:var(--mut); max-width:760px;}
.center .lead{margin-left:auto;margin-right:auto;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; padding:14px 26px; border-radius:10px;
  cursor:pointer; border:2px solid transparent; transition:.16s; white-space:nowrap;}
.btn-primary{background:var(--lime); color:#0a0a0a;}
.btn-primary:hover{background:#b6f23e; transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--txt); border-color:#3a4433;}
.btn-ghost:hover{border-color:var(--lime); color:var(--lime);}
.btn-dark{background:#0d100d; color:var(--txt); border-color:#2a3122;}
.btn-dark:hover{border-color:var(--lime);}
.btns{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:60; background:rgba(10,10,10,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.hdr .container{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand img{height:42px; width:auto;}
.nav{display:flex; align-items:center; gap:26px;}
.nav a{color:var(--txt); font-size:15px; letter-spacing:1.5px; text-transform:uppercase; font-weight:500; padding:6px 0; position:relative;}
.nav a:hover,.nav a.active{color:var(--lime);}
.nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--lime);}
.hdr .btn{padding:10px 18px; font-size:14px;}
.hdr-cta{display:none;}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.burger span{display:block; width:26px; height:3px; background:var(--txt); margin:5px 0; border-radius:2px; transition:.2s;}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero-bg{position:absolute; inset:0; background:#000;}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.55;}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.72) 42%,rgba(10,10,10,.55) 100%);}
.hero-diag{position:absolute; top:-10%; bottom:-10%; left:44%; width:70px; background:var(--lime);
  transform:skewX(-13deg); opacity:.9; box-shadow:0 0 60px rgba(166,226,46,.35); display:none;}
.hero .container{position:relative; z-index:2; padding-top:96px; padding-bottom:96px;}
.hero h1{font-size:clamp(40px,7vw,76px); text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; max-width:16ch;}
.hero .sub{font-size:clamp(18px,2.3vw,23px); color:var(--txt); max-width:640px; margin-bottom:14px;}
.hero .tag{color:var(--lime); font-weight:600; letter-spacing:1px; margin-bottom:30px; font-family:'Oswald',sans-serif; text-transform:uppercase;}
.hero .btns{margin-bottom:0;}

/* ---------- we-buy strip ---------- */
.strip{background:var(--panel); border-bottom:1px solid var(--line);}
.strip .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 26px; padding:20px 22px;}
.strip .lbl{color:var(--dim); font-family:'Oswald',sans-serif; letter-spacing:2px; text-transform:uppercase; font-size:14px;}
.strip .metal{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-weight:500; font-size:17px;}
.strip .metal::before{content:"●"; color:var(--lime); font-size:9px; vertical-align:middle; margin-right:8px;}

/* ---------- generic panels / cards ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);}
.grid{display:grid; gap:20px;}
.g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:.16s;}
.card:hover{border-color:var(--line2); transform:translateY(-3px);}
.card .ic{width:46px; height:46px; margin-bottom:14px; color:var(--lime);}
.card h3{font-size:20px; margin-bottom:8px;}
.card p{color:var(--mut); font-size:15.5px; margin:0;}

/* feature split */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:stretch;}
.split > div:not(.media){align-self:center;}
.split.rev .media{order:2;}
.media{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); position:relative; min-height:280px; background:#0d100d;}
.media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.media.ph{display:flex; align-items:center; justify-content:center; background:
  radial-gradient(120% 120% at 30% 20%,#1a1f16 0%,#0d100d 60%,#070907 100%);}
.media.ph .mono{width:120px; opacity:.5;}
.media .cap{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; font-family:'Oswald',sans-serif;
  letter-spacing:2px; text-transform:uppercase; font-size:12px; color:var(--mut);
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);}

/* process flow */
.flow{display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; margin-top:8px;}
.step{flex:1 1 150px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 16px; position:relative;}
.step .n{font-family:'Oswald',sans-serif; font-size:13px; color:#0a0a0a; background:var(--lime); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; margin-bottom:10px;}
.step h4{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.5px; font-size:16px; margin:0 0 4px;}
.step p{font-size:13.5px; color:var(--mut); margin:0;}
.flow.arrows .step:not(:last-child)::after{content:"➜"; position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--lime); z-index:2; font-size:14px;}

/* badge */
.badge{display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#1a2113,#0f1409); border:2px solid var(--lime); border-radius:16px;
  padding:20px 30px; text-align:center; box-shadow:0 0 40px rgba(166,226,46,.15);}
.badge .big{font-family:'Oswald',sans-serif; font-size:44px; font-weight:700; color:var(--lime); line-height:1;}
.badge .sm{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:12px; color:var(--mut); margin-top:6px;}

/* comparison table */
.cmp{width:100%; border-collapse:collapse; overflow:hidden; border-radius:var(--r); border:1px solid var(--line);}
.cmp th,.cmp td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line);}
.cmp thead th{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:14px; background:var(--panel);}
.cmp thead th:last-child{color:var(--lime);}
.cmp td:first-child{color:var(--mut);}
.cmp td:last-child{color:var(--txt); font-weight:600;}
.cmp tbody tr:hover{background:rgba(166,226,46,.03);}
.cmp .x{color:#8a5151;} .cmp .ck{color:var(--lime);}

/* sectors */
.sector{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.5px; font-size:15px;}
.sector .ic{width:26px; height:26px; color:var(--lime); flex:none;}

/* signature band */
.sig{background:linear-gradient(120deg,#0e1309 0%,#0a0a0a 55%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.sig .container{position:relative; z-index:2;}
.sig h2{max-width:16ch;}
.sig .pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.sig .pill{border:1px solid var(--line2); border-radius:30px; padding:8px 18px; font-family:'Oswald',sans-serif; letter-spacing:1px; text-transform:uppercase; font-size:14px; color:var(--txt);}
.sig-diag{position:absolute; top:-20%; bottom:-20%; right:6%; width:60px; background:var(--lime); opacity:.12; transform:skewX(-13deg);}

/* CTA band */
.cta{background:var(--lime); color:#0a0a0a; text-align:center;}
.cta h2{color:#0a0a0a;}
.cta p{color:#183a08; font-weight:500; max-width:620px; margin:0 auto 24px;}
.cta .btn-dark{background:#0a0a0a; color:#fff; border-color:#0a0a0a;}
.cta .btn-dark:hover{background:#111; color:var(--lime);}

/* money journey */
.journey{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px; text-align:center;}
.jbox{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 18px;}
.jbox .t{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; color:var(--lime); font-size:15px; margin-bottom:8px;}
.jbox .s{color:var(--mut); font-size:14px;}
.jarrow{color:var(--lime); font-size:26px; font-family:'Oswald',sans-serif;}

/* forms */
.form{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px;}
.form label{display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:13px; color:var(--mut); margin:0 0 7px;}
.form .row{margin-bottom:18px;}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%; background:#0c0f0b; border:1px solid var(--line2); border-radius:10px; padding:13px 14px;
  color:var(--txt); font:inherit; font-size:16px;}
.form textarea{min-height:130px; resize:vertical;}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--lime); outline-offset:1px; border-color:var(--lime);}
.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px;}
.chk{display:flex; align-items:center; gap:10px; background:#0c0f0b; border:1px solid var(--line2); border-radius:10px; padding:11px 13px; cursor:pointer; font-size:15px;}
.chk input{width:18px; height:18px; accent-color:var(--lime);}
.form .note{font-size:13px; color:var(--dim); margin:6px 0 0;}
.form .ok{display:none; background:rgba(46,139,46,.12); border:1px solid #2E8B2E; color:#bfe6bf; border-radius:10px; padding:14px; margin-bottom:16px;}

/* contact rows */
.crow{display:flex; align-items:flex-start; gap:14px; margin-bottom:20px;}
.crow .ic{width:22px; height:22px; color:var(--lime); flex:none; margin-top:3px;}
.crow .t{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:12px; color:var(--dim);}
.crow a,.crow .v{color:var(--txt); font-size:17px;}

/* page header */
.phead{background:linear-gradient(120deg,#0e1309,#0a0a0a); border-bottom:1px solid var(--line); padding:70px 0 54px; position:relative; overflow:hidden;}
.phead .container{position:relative; z-index:2;}
.phead h1{font-size:clamp(34px,6vw,58px); text-transform:uppercase; margin-bottom:12px;}
.phead p{color:var(--mut); max-width:640px; font-size:19px; margin:0;}
.phead .diag{position:absolute; top:-30%; bottom:-30%; right:8%; width:56px; background:var(--lime); opacity:.14; transform:skewX(-13deg);}
.crumbs{font-size:13px; color:var(--dim); margin-bottom:16px; letter-spacing:.5px;}
.crumbs a{color:var(--mut);}

/* footer */
.ft{background:#070807; border-top:1px solid var(--line); padding:60px 0 26px;}
.ft-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px;}
.ft img{height:40px; margin-bottom:16px;}
.ft p{color:var(--mut); font-size:15px;}
.ft h4{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.5px; font-size:14px; color:var(--txt); margin:0 0 14px;}
.ft ul{list-style:none; margin:0; padding:0;}
.ft li{margin-bottom:9px;}
.ft a{color:var(--mut); font-size:15px;}
.ft a:hover{color:var(--lime);}
.ft .metals span{color:var(--mut); font-size:14px;}
.ft-bot{border-top:1px solid var(--line); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--dim); font-size:13px;}
.ft-bot .arc{display:inline-flex; align-items:center; gap:7px;}

/* reveal (progressive enhancement: only hides when JS is active) */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.js .rv.in{opacity:1; transform:none;}

/* responsive */
@media(min-width:900px){ .hero-diag{display:block;} }
@media(max-width:980px){
  .split{grid-template-columns:1fr; gap:26px;} .split.rev .media{order:0;}
  .ft-top{grid-template-columns:1fr 1fr;}
  .journey{grid-template-columns:1fr; } .jarrow{transform:rotate(90deg);}
}
@media(max-width:820px){
  .nav{display:none;}
  .hdr-cta{display:inline-flex;}
  .burger{display:block;}
  .nav.open{display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; background:#0c0f0b; border-bottom:1px solid var(--line); padding:8px 22px 18px;}
  .nav.open a{padding:13px 0; width:100%; border-bottom:1px solid var(--line);}
  .nav.open .btn{margin-top:12px;}
  .g3,.g4,.g2{grid-template-columns:1fr;}
  .checks{grid-template-columns:1fr 1fr;}
  .sec{padding:60px 0;}
}
@media(max-width:520px){
  body{font-size:16px;}
  .checks{grid-template-columns:1fr;}
  .cmp th,.cmp td{padding:12px 12px; font-size:14px;}
}