/* =========================================================
   LOGON SYSTEM — design tokens
   Palette lifted from the Amstrad CPC's own hardware colour
   set; type pairs a pixel-grid display face with a modern
   geometric sans + mono, echoing code listings and manuals.
   ========================================================= */
:root{
  --bg:        #0a0a13;
  --bg-alt:    #12121e;
  --panel:     #15152388;
  --ink:       #edeadf;
  --ink-dim:   #a8a5b3;
  --line:      rgba(237,234,223,0.12);

  --blue:      #3d5cff;
  --amber:     #ffb300;
  --red:       #ff3b5c;
  --green:     #2be0a0;

  --font-pixel: 'Silkscreen', monospace;
  --font-head:  'Space Grotesk', sans-serif;
  --font-body:  'IBM Plex Sans', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

a{ color:inherit; }
img{ max-width:100%; display:block; }

h1,h2,h3{ font-family:var(--font-head); font-weight:700; margin:0 0 .4em; letter-spacing:-0.01em; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
h3{ font-size:1.15rem; margin-top:1.6em; }
p{ margin:0 0 1em; color:var(--ink); }
strong{ color:#fff; }

.eyebrow{
  font-family:var(--font-pixel);
  font-size:0.7rem;
  letter-spacing:0.14em;
  color:var(--amber);
  margin:0 0 .8em;
}

.text-link{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(61,92,255,0.5);
}
.text-link:hover{ color:var(--amber); }

::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* ---------- top raster line ---------- */
.raster-top{
  height:4px;
  background:repeating-linear-gradient(90deg,
    var(--blue) 0 12.5%, var(--amber) 12.5% 25%,
    var(--red) 25% 37.5%, var(--green) 37.5% 50%,
    var(--blue) 50% 62.5%, var(--amber) 62.5% 75%,
    var(--red) 75% 87.5%, var(--green) 87.5% 100%);
  background-size:200% 100%;
  animation:rasterSlide 6s linear infinite;
}
@keyframes rasterSlide{ to{ background-position:-200% 0; } }

.raster-divider{
  height:3px;
  margin:0;
  background:linear-gradient(90deg, transparent, var(--blue), var(--amber), var(--red), var(--green), transparent);
  opacity:0.55;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,19,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:120px; height:auto; flex:none; }
.brand-mark.footer-mark{ width:104px; }
.brand-word{
  font-family:var(--font-pixel);
  font-size:0.95rem;
  letter-spacing:0.02em;
  color:var(--ink);
}
.brand-word em{ color:var(--amber); font-style:normal; }
.brand-word.small{ font-size:0.85rem; }

.main-nav{ display:flex; gap:18px; }
.main-nav a{
  font-family:var(--font-mono);
  font-size:0.8rem;
  text-decoration:none;
  color:var(--ink-dim);
  position:relative;
  padding:4px 0;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a.active{ color:var(--amber); }
.main-nav a.active::after{ transform:scaleX(1); background:var(--amber); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  text-align:center;
  padding:80px 0 60px;
}
.hero-rasters{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; justify-content:space-evenly;
  opacity:0.5;
}
.hero-rasters span{
  display:block; height:5vh;
  filter:blur(1px);
  animation:rasterDrift 9s ease-in-out infinite;
}
.hero-rasters span:nth-child(1){ background:var(--blue);   animation-delay:0s; }
.hero-rasters span:nth-child(2){ background:var(--red);    animation-delay:.6s; }
.hero-rasters span:nth-child(3){ background:var(--amber);  animation-delay:1.2s; }
.hero-rasters span:nth-child(4){ background:var(--green);  animation-delay:1.8s; }
.hero-rasters span:nth-child(5){ background:var(--blue);   animation-delay:2.4s; opacity:.7; }
.hero-rasters span:nth-child(6){ background:var(--red);    animation-delay:3s; opacity:.6; }
@keyframes rasterDrift{
  0%,100%{ transform:translateX(-6%) scaleY(1); opacity:.35; }
  50%{ transform:translateX(6%) scaleY(1.6); opacity:.7; }
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at 50% 40%, transparent 0%, var(--bg) 72%);
}
.hero-inner{ position:relative; z-index:2; }

.hero-logo{
  display:block; margin:0 auto 26px; max-width:min(560px, 82vw); width:100%; height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,0.55));
  opacity:0; transition:opacity .35s ease;
}
.hero-logo.is-loaded{ opacity:1; }

.hero h1{
  font-family:var(--font-head);
  font-size:clamp(2.6rem, 8vw, 5.5rem);
  line-height:0.95;
  margin:0 0 .3em;
  text-transform:uppercase;
}
.hero h1 em{ color:var(--amber); font-style:normal; }
.hero-tag{
  max-width:560px; margin:0 auto 1.8em;
  color:var(--ink-dim); font-size:1.05rem;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.9rem;
  padding:12px 22px;
  border-radius:2px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--amber); color:#161200; }
.btn-primary:hover{ background:#ffc63d; }
.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2;
  font-family:var(--font-pixel); font-size:0.6rem; letter-spacing:0.2em;
  color:var(--ink-dim);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue span{
  width:1px; height:26px; background:linear-gradient(var(--blue), transparent);
  animation:cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }

/* ---------- sections ---------- */
.section{ padding:88px 0; }
.section-intro{ max-width:640px; color:var(--ink-dim); }

/* about */
.about-grid{
  display:grid; grid-template-columns:1fr 260px; gap:64px;
  margin-top:2em;
}
.about-copy p{ color:var(--ink-dim); }
.about-copy strong{ color:var(--ink); }
.about-copy h3{ color:#fff; }
.about-copy h3:first-child{ margin-top:0; }

.about-figure{ margin:1.6em 0; }
.about-figure img{
  border:1px solid var(--line);
  border-radius:2px;
}
.about-figure figcaption{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-dim);
  margin-top:8px;
}

.about-rail{
  display:flex; flex-direction:column; gap:14px;
  align-self:start; position:sticky; top:100px;
}
.rail-card{
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  background:var(--bg-alt);
  padding:14px 16px;
  display:flex; flex-direction:column; gap:2px;
}
.rail-card:nth-child(2){ border-left-color:var(--amber); }
.rail-card:nth-child(3){ border-left-color:var(--red); }
.rail-card:nth-child(4){ border-left-color:var(--green); }
.rail-label{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.05em; }
.rail-card strong{ font-family:var(--font-head); font-size:1.15rem; color:#fff; }
.rail-sub{ font-size:0.82rem; color:var(--ink-dim); }

/* card grid (software) */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px; margin-top:2em;
}
.card{
  background:var(--bg-alt);
  border:1px solid var(--line);
  padding:24px;
  display:flex; flex-direction:column;
}
.card-tag{
  font-family:var(--font-pixel); font-size:0.62rem; letter-spacing:.1em;
  color:var(--green); text-transform:uppercase;
}
.card h3{ margin-top:.6em; color:#fff; }
.card p{ color:var(--ink-dim); font-size:0.94rem; flex:1; }

.link-list{ list-style:none; margin:1em 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.link-list a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  text-decoration:none; padding:9px 4px;
  border-top:1px solid var(--line);
  font-size:0.92rem;
}
.link-list a span{ color:var(--ink); }
.link-list a em{ font-style:normal; font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-dim); }
.link-list a:hover span{ color:var(--amber); }
.link-list a:hover em{ color:var(--amber); }

/* table lists (demos / archive / blog / media) */
.sub-h{ font-family:var(--font-mono); font-size:0.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); border-bottom:1px solid var(--line); padding-bottom:10px; margin-top:2.2em; }
.table-list{ display:flex; flex-direction:column; margin-top:.4em; }
.table-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  text-decoration:none; padding:12px 4px;
  border-bottom:1px solid var(--line);
  transition:background .15s ease, padding-left .15s ease;
}
.table-row:hover{ background:var(--bg-alt); padding-left:10px; }
.table-row span{ color:var(--ink); font-size:0.95rem; }
.table-row em{ color:var(--ink-dim); }
.table-row .fmt{
  font-style:normal; font-family:var(--font-mono); font-size:0.7rem;
  border:1px solid var(--line); border-radius:2px; padding:2px 7px; flex:none;
}
.table-list.compact .table-row{ padding:9px 4px; }
.table-list.compact .table-row span{ font-size:0.88rem; color:var(--ink-dim); }

.media-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; margin-top:1.6em; }

.video-block{ margin-top:1.6em; max-width:820px; }
.video-block video{ width:100%; border:1px solid var(--line); background:#000; display:block; }
.video-block .video-note{ font-size:0.82rem; color:var(--ink-dim); margin-top:12px; }
.video-block .video-note code{ font-family:var(--font-mono); background:var(--bg-alt); padding:1px 5px; border-radius:2px; font-size:0.8rem; }
.blog-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; margin-top:1.2em; }

/* before-grid */
.before-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:2em; }
.before-card{ border:1px solid var(--line); background:var(--bg-alt); padding:22px; }
.before-card h3{ margin-top:0; display:flex; align-items:baseline; gap:10px; color:#fff; }
.before-card h3 span{ font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-dim); font-weight:400; }
.before-card p{ color:var(--ink-dim); font-size:0.92rem; }
.before-shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; margin:14px 0; }
.before-shots img{
  border:1px solid var(--line); aspect-ratio:4/3; object-fit:contain; background:#000;
  cursor:zoom-in; transition:border-color .15s ease;
}
.before-shots img:hover{ border-color:var(--amber); }

/* ---------- hover zoom overlay (used on Before Logon System + Blog thumbnails) ---------- */
.zoom-overlay{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,12,0.88);
  opacity:0; visibility:hidden;
  transition:opacity .15s ease;
  pointer-events:none;
}
.zoom-overlay.show{ opacity:1; visibility:visible; }
.zoom-overlay img{
  max-width:82vw; max-height:82vh;
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,0.7);
  background:#000;
}
.zoom-overlay .zoom-cap{
  position:absolute; bottom:8vh; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-dim);
  max-width:70vw; text-align:center;
}

/* ---------- homepage hub tiles ---------- */
.hub{ padding:90px 0 100px; }
.hub-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  margin-top:1.6em;
}
.hub-tile{
  background:var(--bg); padding:28px 24px;
  text-decoration:none; display:flex; flex-direction:column; gap:8px;
  border-top:3px solid var(--blue);
  transition:background .15s ease;
}
.hub-grid .hub-tile:nth-child(4n+2){ border-top-color:var(--amber); }
.hub-grid .hub-tile:nth-child(4n+3){ border-top-color:var(--red); }
.hub-grid .hub-tile:nth-child(4n+4){ border-top-color:var(--green); }
.hub-tile:hover{ background:var(--bg-alt); }
.hub-tile .tile-num{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-dim); }
.hub-tile h3{ margin:0; font-size:1.2rem; color:#fff; }
.hub-tile p{ margin:0; font-size:0.86rem; color:var(--ink-dim); }

/* ---------- blog rows with thumbnail + translate ---------- */
.blog-row{
  display:flex; align-items:center; gap:14px;
  padding:10px 4px; border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.blog-row:hover{ background:var(--bg-alt); }
.blog-row .thumb{
  width:52px; height:52px; flex:none; object-fit:cover;
  border:1px solid var(--line); background:#000; cursor:zoom-in;
}
.blog-row a.blog-title{ flex:1; text-decoration:none; color:var(--ink); font-size:0.94rem; }
.blog-row a.blog-title:hover{ color:var(--amber); }
.blog-row .translate-btn{
  flex:none; font-family:var(--font-mono); font-size:0.68rem;
  border:1px solid var(--line); border-radius:2px; padding:4px 8px;
  color:var(--ink-dim); text-decoration:none;
}
.blog-row .translate-btn:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- Photos page: grid + lightbox ---------- */
.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px; margin:1em 0 2.4em;
}
.photo-item{ margin:0; }
.photo-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line); background:#000; cursor:zoom-in;
  transition:border-color .15s ease, transform .15s ease;
}
.photo-item img:hover{ border-color:var(--amber); transform:translateY(-2px); }
.photo-item figcaption{
  font-size:0.78rem; color:var(--ink-dim); margin-top:6px; line-height:1.4;
}
.photo-extra{ display:block; margin-top:4px; font-family:var(--font-mono); font-size:0.7rem; }
.photo-extra a{ color:var(--blue); text-decoration:underline; text-decoration-color:rgba(61,92,255,.5); }
.group-note{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-dim); margin-top:-0.4em; }

.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,4,9,0.94);
  opacity:0; visibility:hidden; transition:opacity .18s ease;
  padding:40px;
}
.lightbox.show{ opacity:1; visibility:visible; }
.lb-frame{ display:flex; flex-direction:column; align-items:center; max-width:90vw; }
.lb-title{
  font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--amber); margin:0 0 14px; text-align:center;
}
.lb-img{ max-width:min(88vw, 1100px); max-height:68vh; border:1px solid var(--line); box-shadow:0 30px 90px rgba(0,0,0,.7); background:#000; }
.lb-caption{ max-width:74vw; text-align:center; color:var(--ink-dim); font-size:0.86rem; margin-top:16px; line-height:1.5; }
.lb-links{ max-width:74vw; text-align:center; margin-top:8px; }
.lb-links a{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--blue);
  text-decoration:underline; text-decoration-color:rgba(61,92,255,.5); margin:0 6px;
}
.lb-links a:hover{ color:var(--amber); }
.lb-close{
  position:absolute; top:20px; right:26px; background:none; border:0; color:var(--ink);
  font-size:2rem; line-height:1; cursor:pointer;
}
.lb-close:hover{ color:var(--amber); }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(237,234,223,0.08); border:1px solid var(--line); color:var(--ink);
  font-size:1.8rem; width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lb-nav:hover{ border-color:var(--amber); color:var(--amber); }
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
@media (max-width:640px){
  .lb-nav{ width:42px; height:42px; font-size:1.4rem; }
  .lightbox{ padding:16px; }
}

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:44px 0; background:var(--bg-alt); }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.footer-brand p{ color:var(--ink-dim); font-size:0.85rem; margin:.3em 0 0; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ font-family:var(--font-mono); font-size:0.85rem; text-decoration:none; color:var(--ink-dim); }
.footer-links a:hover{ color:var(--amber); }
.to-top{
  font-family:var(--font-mono); font-size:0.8rem;
  background:none; border:1px solid var(--line); color:var(--ink-dim);
  padding:8px 14px; cursor:pointer; border-radius:2px;
}
.to-top:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-rail{ position:static; flex-direction:row; flex-wrap:wrap; }
  .rail-card{ flex:1 1 200px; }
}

@media (max-width:760px){
  .main-nav{
    position:absolute; top:68px; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    flex-direction:column; padding:8px 28px 18px; gap:4px;
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:10px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:flex; }
  .section{ padding:60px 0; }
}