/* =========================================================================
   IRON CURTAIN — marketing site.
   © 2026 Iron Curtain. Original work. All rights reserved.

   Deliberately hand-written, single file, no framework and no build step. The
   whole site is two files and a font stack, so it loads instantly on the kind
   of connection a lot of this playerbase actually has.

   Shares the client's palette on purpose — someone arriving from this page
   should recognise the client as the same product.
   ========================================================================= */

:root{
  --bg:        #080a0d;
  --bg-2:      #0c0f13;
  --panel:     #10141a;
  --panel-2:   #141920;
  --panel-3:   #1a2028;
  --line:      #1f262f;
  --line-2:    #2b343f;

  --txt:       #e2e7ed;
  --txt-2:     #a8b2bd;
  --mut:       #79848f;
  --dim:       #545e69;

  --red:       #c8232c;
  --red-hot:   #ff4b4b;
  --amber:     #f0a202;
  --amber-hot: #ffc043;
  --gold:      #ffd24a;
  --steel:     #5b9bd5;

  --ui: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, -apple-system, sans-serif;

  --maxw: 1120px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:760px}

a{color:var(--steel);text-decoration:none}
a:hover{color:#9ac8f0}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;
  padding:10px 16px;z-index:100;font-weight:600;
}
.skip:focus{left:0}

/* --------------------------------------------------------------- header -- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(8,10,13,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:60px}

.brand{display:flex;align-items:center;gap:11px;color:var(--txt)}
.brand:hover{color:var(--txt)}
.mark{
  width:22px;height:22px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold),var(--amber));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.brandtext{display:flex;flex-direction:column;line-height:1.15}
.brandtext b{font-size:15px;letter-spacing:3.2px;font-weight:600}
.brandtext i{font-style:normal;font-size:8.5px;letter-spacing:1.7px;color:var(--dim);text-transform:uppercase}

.topnav{display:flex;align-items:center;gap:22px}
.topnav a{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-2);
}
.topnav a:hover{color:#fff}
.cta-s{
  border:1px solid var(--line-2);background:var(--panel-3);
  padding:7px 14px;border-radius:2px;color:var(--gold) !important;
}
.cta-s:hover{border-color:rgba(255,210,74,.5);background:rgba(255,210,74,.1)}

/* ----------------------------------------------------------------- hero -- */
.hero{
  padding:104px 0 88px;
  border-bottom:1px solid var(--line);
  /* Two soft pools of light rather than an image: no asset to load, no asset
     whose provenance anyone can question. */
  background:
    radial-gradient(1000px 460px at 18% -8%, rgba(240,162,2,.11), transparent 62%),
    radial-gradient(760px 400px at 88% 8%, rgba(200,35,44,.13), transparent 60%),
    var(--bg);
}
.kicker{
  margin:0 0 18px;font-size:10.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--amber);
}
.hero h1{
  margin:0 0 22px;
  font-size:clamp(34px,6vw,60px);
  line-height:1.08;letter-spacing:-.5px;font-weight:600;
}
.lede{
  margin:0 0 30px;max-width:62ch;
  font-size:clamp(15px,1.7vw,18px);color:var(--txt-2);line-height:1.7;
}
.herobtns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}

.cta{
  display:inline-block;
  padding:13px 30px;border-radius:2px;
  background:linear-gradient(180deg,var(--amber-hot),var(--amber));
  color:#140d00 !important;
  font-size:12px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,210,74,.5);
}
.cta:hover{filter:brightness(1.1)}
.cta.ghost{
  background:transparent;color:var(--txt-2) !important;border-color:var(--line-2);font-weight:600;
}
.cta.ghost:hover{border-color:var(--line-hot,#3a4552);color:#fff !important;background:var(--panel-2)}
.cta.disabled{
  background:var(--panel-3);color:var(--dim) !important;border-color:var(--line-2);
  cursor:not-allowed;filter:none;
}

.freenote{margin:0;max-width:64ch;font-size:12.5px;color:var(--dim);line-height:1.7}

/* ---------------------------------------------------------------- bands -- */
.band{padding:76px 0;border-bottom:1px solid var(--line)}
.band.alt{background:var(--bg-2)}

h2{
  margin:0 0 14px;
  font-size:clamp(23px,3.2vw,32px);letter-spacing:-.2px;font-weight:600;
}
.sub{margin:0 0 34px;max-width:70ch;color:var(--txt-2);font-size:15px}
.foot{margin:28px 0 0;max-width:74ch;color:var(--dim);font-size:12.5px;line-height:1.7}

.two{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.two p{margin:0 0 15px;color:var(--txt-2)}

.pull{
  margin:22px 0 0 !important;padding:13px 0 13px 17px;
  border-left:2px solid var(--amber);
  color:var(--gold) !important;font-size:15.5px;line-height:1.6;
}

/* steps */
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;
  padding:0 0 20px 44px;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  font-size:11px;letter-spacing:1px;color:var(--amber);
  border:1px solid var(--line-2);background:var(--panel);
  width:28px;height:24px;display:grid;place-items:center;border-radius:2px;
}
.steps b{display:block;font-size:14px;margin-bottom:3px;font-weight:600}
.steps span{display:block;color:var(--txt-2);font-size:13.5px;line-height:1.65}

/* grids */
.grid{display:grid;gap:14px}
.grid article{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:17px 18px;
}
.grid article b{display:block;font-size:13.5px;letter-spacing:.4px;margin-bottom:5px;font-weight:600}
.grid article span{display:block;color:var(--txt-2);font-size:13px;line-height:1.6}

.ladders{grid-template-columns:repeat(3,1fr)}
.ladders article b{color:var(--gold)}
.ladders .feat{border-color:rgba(200,35,44,.5);background:linear-gradient(180deg,rgba(200,35,44,.1),var(--panel))}
.ladders .feat b{color:var(--red-hot)}

.rules{grid-template-columns:repeat(3,1fr)}
.rules article b{color:var(--steel)}

.feats{grid-template-columns:repeat(3,1fr)}
.feats article b{color:var(--amber-hot)}

/* fairness */
#fair p{color:var(--txt-2);margin:0 0 15px}

/* ------------------------------------------------------------- download -- */
.download{padding:80px 0;background:
  radial-gradient(760px 300px at 50% 0, rgba(240,162,2,.08), transparent 65%), var(--bg-2);
  border-bottom:1px solid var(--line);
}
.download h2,.download .sub{text-align:center}
.download .sub{margin-left:auto;margin-right:auto}

.dlbox{background:var(--panel);border:1px solid var(--line-2);border-radius:4px;padding:22px}
.dlrow{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.dlrow b{display:block;font-size:15px;font-weight:600}
.dim{color:var(--dim)}
.small{font-size:12.5px}
.dlrow .dim{font-size:12.5px}

.dlsteps{margin:18px 0 0;padding:0 0 0 20px;color:var(--txt-2);font-size:13.5px;line-height:1.9}

.download .foot{text-align:center;margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------- footer -- */
.bot{padding:52px 0 30px;background:var(--bg)}
.botgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:38px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.botgrid b{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--txt);margin-bottom:11px}
.botgrid .fbrand{letter-spacing:3.2px;font-size:13px}
.botgrid a{display:block;font-size:13px;color:var(--txt-2);margin-bottom:6px}
.botgrid a:hover{color:#fff}
.botgrid p{margin:0;max-width:44ch;line-height:1.65}

.legal{padding-top:26px}
.legal p{margin:0 0 12px;font-size:11.5px;line-height:1.75;color:var(--dim);max-width:96ch}
.legal b{color:var(--mut)}

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 900px){
  .two{grid-template-columns:1fr;gap:32px}
  .ladders,.rules,.feats{grid-template-columns:repeat(2,1fr)}
  .botgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width: 620px){
  .topnav a:not(.cta-s){display:none}
  .hero{padding:66px 0 56px}
  .band{padding:54px 0}
  .ladders,.rules,.feats{grid-template-columns:1fr}
  .botgrid{grid-template-columns:1fr}
  .herobtns .cta{flex:1 1 100%;text-align:center}
}