/* =========================================================
   PIONEER TECH GAMES — main studio site
   Design language: technical drafting / blueprint schematic.
   A solo, multi-disciplinary builder's site should look like
   a page torn from an engineering notebook, not a game-jam
   flyer — grid paper, title blocks, revision stamps.
   ========================================================= */

:root{
  --ink:        #0e1b2c;
  --panel:      #142b45;
  --panel-2:    #0f2238;
  --grid:       #3e6b96;
  --amber:      #f2a93b;
  --rust:       #c1440e;
  --paper:      #f4efe1;
  --paper-dim:  #cfc9b8;

  --display: "Space Grotesk", "Archivo", sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  background:
    linear-gradient(var(--ink), var(--ink)),
    repeating-linear-gradient(0deg, rgba(111,183,224,.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(111,183,224,.07) 0 1px, transparent 1px 40px);
  color: var(--paper);
  font-family: var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family: var(--display); margin:0 0 .5em; letter-spacing:-.01em; }
.mono{ font-family: var(--mono); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* -------- corner crop marks used on framed sections -------- */
.blueprint-frame{
  position:relative;
  border:1px solid rgba(111,183,224,.35);
  background: rgba(20,43,69,.55);
}
.blueprint-frame::before,
.blueprint-frame::after,
.blueprint-frame > .cm-tr,
.blueprint-frame > .cm-bl{
  content:"";
  position:absolute; width:14px; height:14px;
  border-color: var(--amber); border-style:solid; border-width:0;
}
.blueprint-frame::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.blueprint-frame::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

/* -------- nav -------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background: rgba(14,27,44,.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(111,183,224,.25);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; }
.brand-mark{
  flex:none;
  width:34px; height:34px; border-radius:7px;
  background: linear-gradient(135deg, var(--amber), var(--rust));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; color:var(--ink); font-size:16px;
}
.brand-name{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.02em; white-space:nowrap; }
.brand-name span{ color: var(--amber); }
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.nav-links a{ text-decoration:none; opacity:.8; transition:opacity .15s; }
.nav-links a:hover{ opacity:1; color:var(--amber); }

/* -------- mobile nav toggle -------- */
.nav-toggle{
  display:none; flex:none; width:38px; height:38px; border-radius:5px;
  background:transparent; border:1px solid rgba(111,183,224,.4);
  position:relative; cursor:pointer; padding:0;
}
.nav-toggle i{ position:absolute; left:9px; right:9px; height:2px; background:var(--paper); transition:transform .2s, opacity .2s; display:block; }
.nav-toggle i:nth-child(1){ top:12px; }
.nav-toggle i:nth-child(2){ top:18px; }
.nav-toggle i:nth-child(3){ top:24px; }
.site-nav.open .nav-toggle i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.site-nav.open .nav-toggle i:nth-child(2){ opacity:0; }
.site-nav.open .nav-toggle i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:760px){
  .brand-name{ font-size:15px; }
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; gap:0;
    background: rgba(14,27,44,.98);
    border-bottom:1px solid rgba(111,183,224,.25);
    max-height:0; overflow:hidden;
  }
  .nav-links li{ border-top:1px solid rgba(111,183,224,.15); }
  .nav-links a{ display:block; padding:16px 24px; }
  .site-nav.open .nav-links{ max-height:400px; }
}

/* -------- buttons -------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:4px;
  font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--amber); color: var(--ink); font-weight:700; box-shadow:0 0 0 rgba(242,169,59,0); }
.btn-primary:hover{ box-shadow:0 6px 22px rgba(242,169,59,.35); }
.btn-ghost{ border-color: rgba(111,183,224,.5); color: var(--paper); }
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber); }

/* -------- hero -------- */
.hero{ padding:96px 0 72px; position:relative; overflow:hidden; }
@media (max-width:700px){
  .hero{ padding:52px 0 44px; }
  section{ padding:52px 0; }
}
.hero .eyebrow{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.18em;
  color: var(--grid); display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.hero .eyebrow::before{ content:""; width:26px; height:1px; background:var(--grid); }
.hero h1{ font-size:clamp(38px,6vw,68px); line-height:1.03; max-width:820px; }
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero p.lead{ max-width:600px; color:var(--paper-dim); font-size:18px; margin-top:22px; }
.hero-cta{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }

.title-block{
  margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(111,183,224,.35); font-family:var(--mono); font-size:12px;
}
.title-block div{ padding:12px 16px; border-right:1px solid rgba(111,183,224,.25); }
.title-block div:last-child{ border-right:none; }
.title-block .label{ display:block; color:var(--grid); text-transform:uppercase; letter-spacing:.1em; font-size:10px; margin-bottom:4px; }
@media (max-width:700px){
  .title-block{ grid-template-columns:1fr 1fr; }
  .title-block div{ border-right:1px solid rgba(111,183,224,.25); border-bottom:1px solid rgba(111,183,224,.25); }
  .title-block div:nth-child(2n){ border-right:none; }
}
@media (max-width:460px){
  .title-block{ grid-template-columns:1fr; }
  .title-block div{ border-right:none; }
}

/* -------- section shells -------- */
section{ padding:80px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head .eyebrow{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--amber); margin-bottom:12px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); }
.section-head p{ color:var(--paper-dim); margin-top:12px; }

/* -------- schematic disciplines diagram -------- */
.schematic{ padding:40px; }
.node-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:rgba(111,183,224,.25); margin-top:8px; }
.node{ background: var(--panel-2); padding:26px 20px; position:relative; }
.node .num{ font-family:var(--mono); font-size:11px; color:var(--grid); }
.node h3{ font-size:17px; margin:10px 0 8px; }
.node p{ font-size:13.5px; color:var(--paper-dim); margin:0; }
@media (max-width:900px){ .node-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .node-grid{ grid-template-columns:1fr; } }

/* -------- game showcase card -------- */
.showcase{ display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:center; padding:36px; }
.showcase img.icon{ width:100%; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.showcase .tag{ display:inline-block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; background:rgba(242,169,59,.15); color:var(--amber); border:1px solid rgba(242,169,59,.4); padding:4px 10px; border-radius:3px; margin-bottom:14px; }
.showcase h3{ font-size:30px; }
.showcase p{ color:var(--paper-dim); }
.showcase .stat-row{ display:flex; gap:28px; margin:22px 0; flex-wrap:wrap; }
.showcase .stat b{ display:block; font-family:var(--display); font-size:22px; color:var(--amber); }
.showcase .stat span{ font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--grid); }
@media (max-width:760px){ .showcase{ grid-template-columns:1fr; } }

/* -------- footer -------- */
footer{ border-top:1px solid rgba(111,183,224,.25); padding:48px 0 32px; margin-top:40px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }
footer .fmono{ font-family:var(--mono); font-size:12.5px; color:var(--grid); }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--amber); }
.foot-links{ display:flex; gap:22px; list-style:none; padding:0; margin:0; font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; flex-wrap:wrap; }
.foot-links li{ white-space:nowrap; }
@media (max-width:700px){ footer .wrap{ flex-direction:column; } .foot-links{ gap:12px 20px; } }

::selection{ background: var(--amber); color:var(--ink); }