/* ============================================================
   WeldHub — shared design system (custom CSS only)
   ============================================================ */
@import url('fonts.css');

:root{
  --steel-950:#06080a;
  --steel-900:#0a0d11;
  --steel-850:#0f1319;
  --steel-800:#141a21;
  --steel-700:#1c242e;
  --steel-600:#28333f;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);

  --text:#e9eff5;
  --muted:#90a0b0;
  --dim:#65727f;

  --spark:#ffb020;
  --spark-2:#ff7a18;
  --molten:#ff5a0a;
  --arc:#5cc8ff;
  --arc-2:#2ea8e8;
  --hot:#fff6df;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 24px 70px -20px rgba(0,0,0,.85);
  --wrap:1180px;
  --display:"Oswald","Arial Narrow",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--steel-950);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
input,button{font:inherit;color:inherit}
::selection{background:var(--spark);color:#140c02}

/* ---------- fixed background layers ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-base{
  background:
    radial-gradient(1100px 620px at 50% -10%, #1a2230 0%, transparent 62%),
    radial-gradient(900px 700px at 12% 112%, #221607 0%, transparent 60%),
    radial-gradient(900px 700px at 92% 105%, #0d1c26 0%, transparent 58%),
    linear-gradient(180deg,var(--steel-900) 0%, var(--steel-950) 55%, #05070a 100%);
}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1200px 800px at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(1200px 800px at 50% 30%,#000 0%,transparent 78%);
}
.bg-grain{
  opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}
.bg-vignette{
  background:radial-gradient(120% 100% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%);
}
canvas.fx{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- layout ---------- */
.page{position:relative;z-index:3;display:flex;flex-direction:column;min-height:100vh}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}

/* ---------- header ---------- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 0;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:38px;height:38px;flex:none;border-radius:10px;
  background:linear-gradient(150deg,var(--spark) 0%,var(--molten) 55%,#8f2b00 100%);
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,176,32,.35),0 10px 30px -8px rgba(255,122,24,.65);
}
.brand-mark svg{width:22px;height:22px;fill:#180d02}
.brand-txt{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.16em;text-transform:uppercase}
.brand-txt span{color:var(--spark)}

.lang{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);backdrop-filter:blur(8px)}
.lang button{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.12em;padding:7px 14px;border-radius:999px;
  transition:color .18s,background .18s;
}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{background:var(--spark);color:#170d02}

/* ---------- hero ---------- */
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0 30px;align-items:flex-start}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 12px;border-radius:999px;
  border:1px solid rgba(255,176,32,.3);
  background:linear-gradient(90deg,rgba(255,176,32,.14),rgba(255,90,10,.06));
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#ffd07a;
}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--spark);box-shadow:0 0 12px 3px rgba(255,176,32,.85);animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

h1.wordmark{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(52px,12vw,148px);line-height:.92;letter-spacing:.015em;
  margin:22px 0 0;
  background:linear-gradient(178deg,#ffffff 2%,#dbe6f0 26%,#7d8b99 52%,#e6eef6 62%,#9aa8b6 82%,#5c6874 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(120,170,220,.16));
}
h1.wordmark .hub{
  background:linear-gradient(178deg,#fff0cf 0%,var(--spark) 38%,var(--molten) 78%,#94300a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,122,24,.42));
}
.tagline{
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(13px,2.1vw,20px);color:#c7d4e0;margin:20px 0 0;
}
.tagline em{font-style:normal;color:var(--spark)}
.lead{max-width:56ch;color:var(--muted);font-size:clamp(15px,1.6vw,17px);margin:18px 0 0}
.lead b{color:var(--text);font-weight:600}

/* ---------- countdown ---------- */
.count{display:flex;gap:12px;margin:30px 0 0;flex-wrap:wrap}
.count .cell{
  min-width:92px;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);text-align:center;
}
.count .num{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.count .lbl{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:7px}
.count .cell.hot{border-color:rgba(255,176,32,.38);box-shadow:0 0 26px -10px rgba(255,176,32,.55) inset}
.count .cell.hot .num{color:var(--spark)}

/* ---------- form ---------- */
.cta{margin:34px 0 0;width:100%;max-width:560px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cta input[type=email]{
  flex:1 1 250px;min-width:0;padding:16px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:rgba(6,9,12,.72);color:var(--text);
  outline:none;transition:border-color .18s,box-shadow .18s;
}
.cta input[type=email]::placeholder{color:var(--dim)}
.cta input[type=email]:focus{border-color:var(--spark);box-shadow:0 0 0 4px rgba(255,176,32,.16)}
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:16px 26px;border:0;border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#ffc44d,var(--spark) 40%,var(--molten) 100%);
  color:#1a0d01;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13.5px;
  box-shadow:0 14px 34px -14px rgba(255,140,30,.9),0 0 0 1px rgba(255,200,90,.5) inset;
  transition:transform .16s,filter .16s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.cta-note{font-size:12.5px;color:var(--dim);margin:12px 2px 0}
.cta-msg{margin:14px 2px 0;font-size:14px;font-weight:600;display:none}
.cta-msg.ok{display:block;color:#7ee0a5}
.cta-msg.err{display:block;color:#ff8b7a}

/* tight countdown variant for narrow cards / mobile */
.count.tight{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.count.tight .cell{min-width:0}
.count.tight .num{font-size:28px}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line);margin-top:auto;
  padding:22px 0 30px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--dim);
}
.foot a{color:var(--muted);border-bottom:1px solid rgba(255,255,255,.12)}
.foot a:hover{color:var(--spark);border-color:var(--spark)}
.hint{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(8,11,14,.6);
  backdrop-filter:blur(8px);pointer-events:none;transition:opacity .6s;
}
.hint.gone{opacity:0}

@media (max-width:760px){
  .wrap{padding:0 18px}
  .hero{padding:24px 0 20px}
  .count .cell{min-width:74px;padding:11px 12px}
  .count .num{font-size:26px}
  .cta-row{flex-direction:column}
  .cta input[type=email]{flex:0 0 auto;width:100%}
  .btn{justify-content:center;width:100%}
  .foot{flex-direction:column;gap:8px}
  .hint{display:none}
  .count.tight{gap:6px}
  .count.tight .cell{padding:10px 4px}
  .count.tight .num{font-size:22px}
  .count.tight .lbl{font-size:9px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}