/*
Theme Name: Void Signal Sci-Fi Portal
Theme URI: https://example.com
Author: Twoje Studio
Author URI: https://example.com
Description: Gamingowy motyw WordPress dla portalu o grze Void Signal: Ostatni Sygnał z Głębi — kosmicznym roguelite akcji. Strona główna z hero, funkcjami, opiniami i CTA, blog, formularz kontaktowy oraz strony regulaminowe.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: voidsignal
*/

/* =============================================
   DESIGN TOKENS — zimny holograficzny HUD kosmiczny
   ============================================= */
:root{
  --bg:            #05070C;
  --bg-raised:     #0C1018;
  --bg-raised-2:   #131A24;
  --cyan:          #7CF5E0;
  --cyan-dim:      #2E8A78;
  --violet:        #8C6CFF;
  --violet-dim:    #4E3AA0;
  --ink:           #E7F3F1;
  --ink-muted:     #8CA0A0;
  --ink-faint:     #57696A;
  --border:        #1C2732;

  --font-display: 'Michroma', 'Arial', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;

  --radius: 0px;
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--cyan); text-decoration:none; }
a:hover{ color:#b6fdf0; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family: var(--font-display); font-weight:400; letter-spacing:.02em;
  line-height:1.2; margin: 0 0 .5em; text-transform: uppercase;
}
h1{ font-size: clamp(1.8rem, 4.4vw, 3.4rem); }
h2{ font-size: clamp(1.4rem, 2.8vw, 2rem); }
h3{ font-size: clamp(1rem, 1.6vw, 1.2rem); }
p{ margin:0 0 1em; color: var(--ink-muted); }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-mono); font-size:.8rem; letter-spacing:.22em;
  text-transform:uppercase; color: var(--cyan);
  margin-bottom: 16px;
}
.eyebrow::before{ content:"//"; color: var(--violet); }

/* przyciski z narożnymi "notchami" HUD zamiast zaokrągleń */
.btn{
  display:inline-block; font-family: var(--font-display); font-size:.85rem;
  letter-spacing:.05em; text-transform:uppercase; padding: 15px 30px;
  border: 1px solid transparent; cursor:pointer; position:relative;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background .15s ease, color .15s ease;
}
.btn-cyan{ background: var(--cyan); color:#04211c; }
.btn-cyan:hover{ background:#b6fdf0; color:#04211c; }
.btn-outline{ background: transparent; border: 1px solid var(--cyan-dim); color: var(--ink); }
.btn-outline:hover{ border-color: var(--cyan); color:#fff; }

.section{ padding: 96px 0; position:relative; }
.section-alt{ background: var(--bg-raised); }
.section-head{ max-width: 640px; margin-bottom: 52px; }

.scan-divider{ width:100%; height:2px; background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent); position:relative; }

.card{
  background: var(--bg-raised); border: 1px solid var(--border); padding: 30px; position:relative;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.card::before{
  content:""; position:absolute; top:0; left:0; width:18px; height:1px; background: var(--cyan-dim);
}

.grid{ display:grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .section{ padding: 64px 0; }
}