/* Match FEAR – shared theme (reuse for privacy.html as well)
   Drop into assets/css/styles.css and link with <link rel="stylesheet" href="assets/css/styles.css"> 
*/
:root{
  --bg-0:#0a0b0e;
  --bg-1:#0f1319;
  --panel:#121821;
  --ink:#e6e7ea;
  --muted:#97a1ab;
  --accent:#e11d48;     /* crimson crack from the gem */
  --neon:#b7ff5a;       /* eerie sword/particle green */
  --link:#c7d2fe;
  --ring:rgba(183,255,90,.35);
  --shadow:rgba(0,0,0,.45);
  --maxw:1100px;
  --pad:24px; /* default container padding */
  --radius:18px;
  --logo-size:64px; /* ~2x the old 32px */
}

@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
src: local('Inter'), url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtU.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
src: local('Inter Bold'), url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtU.woff2') format('woff2');}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 700px at 60% -10%, rgba(183,255,90,.05), transparent 60%),
linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, #07090b 100%);
color:var(--ink); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; line-height:1.6;
}

html {
  scroll-behavior: smooth;
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw); margin-inline:auto; padding:var(--pad);}

.header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(10,11,14,.85), rgba(10,11,14,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:6px; padding-bottom:6px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.08em}
.brand img{width:var(--logo-size); height:var(--logo-size); image-rendering:-webkit-optimize-contrast}
.brand .wordmark{font-family:'Estonia', cursive; font-size:2.5rem; color:#fff; text-shadow:0 0 22px rgba(183,255,90,.35), 0 0 2px #fff; line-height: 2rem;}
.nav a{opacity:.9}
.nav a:hover{opacity:1}

.btn{display:inline-block; padding:.8rem 1.1rem; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0f141a; 
     box-shadow:0 10px 25px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04); font-weight:600}
.btn.primary{background:linear-gradient(180deg, #16241f, #0d1712); border-color:rgba(183,255,90,.25); color:#eaffea; 
             box-shadow:0 0 30px rgba(183,255,90,.18), inset 0 0 40px rgba(183,255,90,.035)}
.btn.primary:hover{box-shadow:0 0 38px rgba(183,255,90,.28)}
.btn.ghost{background:transparent}
/* Small button variant for secondary CTAs */
.btn.sm{ padding:.6rem .8rem; font-size:.95rem; display:inline-flex; gap:.5rem; align-items:center }
.sep{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); margin:8px 0 0}

.hero{
  position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08);
  background: #07090b;
}
.hero .bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:contrast(1.05) saturate(1) brightness(.60); transform:scale(1.02);
}
.bg::after{ /* soft vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 30%, rgba(0,0,0,.1), rgba(0,0,0,.35)),
             linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, rgba(0,0,0,.8) 100%);
  pointer-events:none;
}
.hero .inner{position:relative; padding:88px 24px 96px; text-align:center}
h1{font-family:'Estonia', cursive; font-size:clamp(3.2rem, 6vw, 5.2rem); line-height:1.1; margin:0 0 8px;
         color:#fff; text-shadow:0 0 24px rgba(183,255,90,.15), 0 0 2px #fff;}
.hero p{max-width:780px; margin:0 auto 28px; color:#d7dbe0; opacity:1}
.badges{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.tagline{display:inline-flex; gap:10px; align-items:center; padding:.35rem .7rem; border-radius:9999px; 
         background:rgba(183,255,90,.08); color:#e9ffe1; border:1px solid rgba(183,255,90,.25); font-weight:600; letter-spacing:.02em}
.spark{display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--neon); box-shadow:0 0 12px var(--neon), 0 0 40px var(--neon)}

.section{padding:56px 24px}
.section h2{font-family:'Estonia', cursive; font-size:4rem; margin:0 0 6px; line-height: 1;}
.section .lead{color:#c7ccd3; margin:0 0 24px}

.features{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius); padding:20px; box-shadow:0 20px 40px var(--shadow)}
.card h3{margin:0 0 6px; font-size:1.1rem}
.card p{margin:0; color:#c1c6cd}

.gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px}
.tile{position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
      aspect-ratio:16/9; background:#0b0e12; margin: 0px}
.tile img{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) brightness(.9)}
+.tile .caption{
  position:absolute; left:12px; bottom:10px; font-weight:700; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.95);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.8));
}

.about{display:grid; grid-template-columns:1.1fr .9fr; gap:26px}
.about p{color:#c9cdd4}
.about .panel{border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0b0e12}
.about .panel img{display:block; width:100%; height:100%; object-fit:cover; opacity:.92}

.footer{margin-top:48px; padding:24px 0 56px; border-top:1px solid rgba(255,255,255,.08); color:#9aa4ac}
.footer .cols{display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px}
.small{font-size:.92rem; opacity:.9}

.notice{padding:16px; border:1px dashed rgba(255,255,255,.2); border-radius:14px; background:rgba(225,29,72,.06)}

@media (max-width: 880px){
  .about{grid-template-columns:1fr}
  .hero .inner{padding:72px var(--pad) 84px}
}

@media (max-width: 640px){
  :root{ --pad:28px; }
}

@media (max-width: 640px){
  .gallery{ grid-template-columns: 1fr; gap:16px; }
}

/* Lightbox */
/* Lightbox */
.gallery .tile img,
.about .panel img,
img[data-lightbox] { cursor: zoom-in; }

#lightbox[hidden] { display: none; }

#lightbox {
  position: fixed;
  left: 0; right: 0; top: 0;           /* omit bottom so height takes effect */
  height: 100vh;                        /* fallback */
  height: 100dvh;                       /* visual viewport on mobile */
  display: flex;                        /* robust centering */
  align-items: center;
  justify-content: center;

  /* Mobile-safe padding + notches/home indicators */
  padding: 12px;
  padding-top:    calc(12px + env(safe-area-inset-top));
  padding-right:  calc(12px + env(safe-area-inset-right));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  padding-left:   calc(12px + env(safe-area-inset-left));

  background: rgba(0,0,0,.85);
  z-index: 1000;
  animation: lb-fade .15s ease-out;
  overscroll-behavior: contain;
}

#lightbox img {
  display: block;                       /* avoid inline baseline quirks */
  cursor: zoom-out;
  max-width: min(96vw, 1400px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background: #3a3f47;

  /* Grey frame around the modal image */
  --lb-frame-color: #181e26;            /* tweak to taste */
  --lb-frame-thickness: 4px;            /* thickness of the frame */
  border-radius: 4px;
  /* First shadow = solid ring (the frame), second = drop shadow */
  box-shadow:
    0 0 0 var(--lb-frame-thickness) var(--lb-frame-color),
    0 12px 48px rgba(0,0,0,.6);
}

@keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } }

/* Prevent background page from scrolling while open */
body.lb-open { overflow: hidden; touch-action: none; }