:root{
  --bg:#0b0d12;
  --bg2:#07080b;
  --fg:#e8e9ee;
  --muted:#a9adbd;
  --muted2:#7d8192;
  --edge:rgba(255,255,255,.10);
  --edge2:rgba(255,255,255,.16);
  --silver1:#f0f1f6;
  --silver2:#c8ccd9;
  --silver3:#8f95aa;
  --accent:rgba(210,216,235,.22);
  --shadow:rgba(0,0,0,.55);
  --radius:18px;
}

*{box-sizing:border-box}
/* html,body{height:100%} */
/*
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:radial-gradient(1200px 700px at 20% 10%, #14172a 0%, transparent 55%),
             radial-gradient(900px 600px at 80% 30%, #121424 0%, transparent 55%),
             linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  overflow-x:hidden;
}
*/

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background-color: #0b0b0c;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

html, body { height: 100%; }

html {
  background: #0b0b0c;
}

@keyframes metalSweep {
  0%   { transform: translate3d(-25%, -15%, 0) rotate(-6deg) scale(1.1); opacity:.2; }
  50%  { transform: translate3d(  0%,   0%, 0) rotate( 0deg) scale(1.1); opacity:1; }
  100% { transform: translate3d(-25%, -15%, 0) rotate( 6deg) scale(1.1); opacity:.2; }
}

/*
@media (prefers-reduced-motion: reduce) {
  html::after { animation: none; }
}
*/


.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.mesh{
  position:absolute; inset:-20%;
  background:
    radial-gradient(650px 400px at 20% 40%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(500px 350px at 70% 20%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(500px 350px at 70% 80%, rgba(255,255,255,.06), transparent 60%),
    conic-gradient(from 220deg at 55% 55%, rgba(255,255,255,.06), transparent 35%, rgba(255,255,255,.05), transparent 70%, rgba(255,255,255,.04));
  filter: blur(28px);
  opacity:.85;
  transform: translate3d(var(--mx,0px), var(--my,0px), 0) scale(1.1);
  transition: transform .15s ease;
}

.logo{
	margin-bottom:20px;
}
.noise{
  position:absolute; inset:0;
  background-image:url("assets/noise.svg");
  opacity:.09;
  mix-blend-mode:overlay;
}
.glow{
  position:absolute;
  width:900px; height:900px;
  border-radius:50%;
  filter: blur(60px);
  opacity:.35;
  transform: translate3d(0,0,0);
}
.glow-1{left:-240px; top:-320px; background: radial-gradient(circle at 30% 30%, rgba(220,225,245,.55), transparent 60%); animation-name: metalSweep; animation-duration: 20s; animation-iteration-count: infinite;}
.glow-2{right:-300px; bottom:-360px; background: radial-gradient(circle at 60% 60%, rgba(160,170,210,.40), transparent 65%); animation-name: metalSweep; animation-duration: 20s; animation-iteration-count: infinite; animation-delay: -10s; }

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 22px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:28px;
}

.brand{display:flex; align-items:center; gap:14px;}
.mark{
  width:52px; height:52px;
  border-radius:14px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid var(--edge);
  box-shadow: 0 18px 40px var(--shadow);
  display:grid; place-items:center;
  overflow:hidden;
}
.mark img{width:38px; height:38px; display:block; filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));}

.word .name{font-weight:600; letter-spacing:.2px; font-size:16px;}
.word .tag{font-size:12px; color:var(--muted2); margin-top:2px;}

.pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--edge);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  color:var(--muted);
  font-size:12px;
}
.dot{width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--silver1), var(--silver3));
  box-shadow: 0 0 18px rgba(240,241,246,.55);
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1); opacity:.75}
  50%{transform:scale(1.35); opacity:1}
}

.hero{
  width:min(980px, 100%);
  padding:28px 26px 22px;
  border-radius: calc(var(--radius) + 6px);
  border:1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(12px);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  position:relative;
  text-align: center;
}

h1{
  margin:0;
  font-size: clamp(20px, 3.3vw, 32px);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.06;
}
h1 .sub{
  display:block;
  margin-top:10px;
  font-weight:400;
  color:var(--muted);
  font-size: clamp(12px, 1.4vw, 14px);
  line-height:1.35;
}

h2{
  margin:0;
  font-size: clamp(32px, 4.0vw, 48px);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.06;
  color:var(--muted);
}

.gradient-bronze {
    background: linear-gradient(
        135deg,
        #E3B35A 0%,
        #C8922E 50%,
        #8A5E1A 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: #C8922E; /* fallback */
}


.lede{
  /* margin:18px 0 0; */
  color:var(--muted);
  /* max-width: 62ch; */
  line-height:1.55;
  text-align:center;
}

.cta-row {
  display: flex;
  justify-content: center;   /* centers horizontally */
  margin-top: 22px;
}

.cta{
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 520px;   /* adjust to taste */
  padding:10px;
  border-radius: 999px;
  border:1px solid var(--edge2);
  background: rgba(10,12,18,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 45px rgba(0,0,0,.35);
}
.cta input{
  flex: 1;
  width: min(380px, 56vw);
  background: transparent;
  border:0;
  outline:none;
  color:var(--fg);
  font-size:14px;
  padding:10px 10px;
}
.cta input::placeholder{color:rgba(169,173,189,.75)}
.cta button{
  border:1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(245,246,250,.18), rgba(210,215,234,.06));
  color:var(--fg);
  padding:10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:500;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cta button:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.35);}
.cta button:active{transform: translateY(0px) scale(.99);}

.ghost{
  border:1px solid var(--edge);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  padding:12px 14px;
  border-radius:999px;
  cursor:pointer;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.ghost:hover{border-color: rgba(255,255,255,.26); transform: translateY(-1px); background: rgba(255,255,255,.05);}
.ghost:active{transform: translateY(0px);}

.meta{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.kpi{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.k{font-size:12px; color:var(--muted2);}
.v{margin-top:6px; font-size:13px; color:var(--muted);}

.card{
  margin-top:22px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(1200px 300px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  overflow:hidden;
  transform: translate3d(0,0,0);
}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chip{
  font-size:12px;
  color: rgba(232,233,238,.95);
  border:1px solid rgba(255,255,255,.14);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.03);
}
.small{font-size:12px; color:var(--muted2);}

.spark{
  padding:16px 18px 6px;
}
.spark-line{
  stroke: rgba(240,241,246,.78);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
  animation: draw 2.6s ease forwards;
}
@keyframes draw{
  to{stroke-dashoffset: 0;}
}

.card-bottom{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:0;
  border-top:1px solid rgba(255,255,255,.08);
}
.mini{
  padding:14px 16px;
  border-right:1px solid rgba(255,255,255,.06);
}
.mini:last-child{border-right:0}
.mini-k{font-size:12px; color:var(--muted2)}
.mini-v{margin-top:6px; color:var(--muted); font-size:13px;}

.foot{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted2);
}
.fine{font-size:12px;}
.sep{opacity:.45; margin:0 8px;}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(10,12,18,.82);
  border:1px solid rgba(255,255,255,.14);
  color: var(--fg);
  padding: 10px 12px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

@media (max-width: 760px){
  .top{flex-direction:column; align-items:flex-start}
  .meta{grid-template-columns:1fr; }
  .card-bottom{grid-template-columns:1fr;}
  .mini{border-right:0; border-bottom:1px solid rgba(255,255,255,.06)}
  .mini:last-child{border-bottom:0}
}

.space-15{
	height: 15px;
}

.space-25{
	height: 25px;
}

.space-50{
	height: 50px;
}