/* =========================================================
   AMENSIS — cinematic landing (dark, high-contrast, red accent)
   Inspired by modern horror game landing pages.
   ========================================================= */

:root{
  --bg: #05050a;
  --bg2:#0a0a12;
  --ink:#f0f0f6;
  --muted:#b7b7c6;
  --red:#f0f0f6;
  --red2:#c9c9d6;
  --line: rgba(255,255,255,.10);
  --glass: rgba(255,255,255,.06);
  --shadow: 0 18px 48px rgba(0,0,0,.55);
  --radius: 18px;
  --max: 1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 20% 5%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(900px 600px at 80% 15%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{ color: inherit; text-decoration:none; }
a:hover{ color: var(--red2); }
p{ line-height:1.65; color: var(--muted); margin:0; }
h1,h2,h3{ margin:0; color: var(--ink); }
h2{
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2.2rem);
  letter-spacing:.08em;
  text-transform: uppercase;
}
h3{ font-size: 1.05rem; letter-spacing:.02em; }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9em;
  color: rgba(240,240,246,.9);
}

/* Noise */
.noise{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Topbar */
.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.topbar--overlay{
  background: rgba(5,5,10,.10);
  border-bottom: 1px solid rgba(255,255,255,.00);
  backdrop-filter: blur(8px);
}
.topbar.is-solid{
  background: rgba(5,5,10,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{
  height: 42px;
  width:auto;
  display:block;
  filter: drop-shadow(0 0 18px rgba(255,31,58,.14));
}

.nav{ display:flex; gap: 10px; align-items:center; }
.nav a{
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(240,240,246,.82);
  padding: 10px 12px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav a:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.nav__toggle{
  display:none;
  width:44px; height:44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  height:2px;
  margin: 7px 11px;
  background: rgba(240,240,246,.85);
  border-radius: 2px;
}

/* Hero */
.hero{
  position:relative;
  min-height: 100vh;
  display:grid;
  align-items:center;
  padding: 110px 18px 68px;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 75% 45%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(700px 520px at 80% 40%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.28) 55%, rgba(0,0,0,.82)),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.18));
  filter: saturate(.9) contrast(1.08);
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 35% 35%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(1000px 600px at 75% 70%, rgba(255,255,255,.03), transparent 62%);
  pointer-events:none;
}

.hero__inner{
  max-width: var(--max);
  margin:0 auto;
  width:100%;
  position:relative;
  z-index:2;
  text-align:center;
}

.kicker{
  color: rgba(240,240,246,.70);
  letter-spacing:.22em;
  text-transform: uppercase;
  font-size:.85rem;
  margin-bottom: 14px;
}

.hero__logo{
  width: min(1120px, 96vw);
  height:auto;
  display:block;
  margin: 6px auto 14px;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.22))
    drop-shadow(0 0 42px rgba(255,255,255,.10));
  transform: translateZ(0);
}

.subtitle{
  color: rgba(240,240,246,.84);
  max-width: 70ch;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  margin-bottom: 14px;
}

.lead{
  max-width: 78ch;
  font-size: 1rem;
  margin-bottom: 22px;
  color: rgba(240,240,246,.68);
}

.hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin: 10px 0 18px;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(240,240,246,.92);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size:.9rem;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.btn--primary{
  background: linear-gradient(135deg, rgba(240,240,246,.96), rgba(200,200,214,.72));
  border-color: rgba(240,240,246,.55);
  color: rgba(10,10,16,.92);
  text-shadow: none;
}
.btn--ghost{
  background: rgba(0,0,0,.18);
}

.hero__bar{

  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
  justify-content:center;
}
.pill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(240,240,246,.80);
  font-size: .85rem;
}

.stores{

  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 18px;
  justify-content:center;
}
.store{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(240,240,246,.82);
  text-transform: uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
}

.social{

  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 16px;
  justify-content:center;
}
.social__label{
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(240,240,246,.55);
}
.social__link{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(240,240,246,.78);
}

/* Scroll hint */
.scrollhint{
  position:absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.16);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top: 10px;
  z-index:3;
}
.scrollhint__dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(240,240,246,.90);
  box-shadow: 0 0 18px rgba(255,255,255,.28);
  animation: dot 1.25s ease-in-out infinite;
}
@keyframes dot{
  0%,100%{ transform: translateY(0); opacity:.7; }
  50%{ transform: translateY(18px); opacity:1; }
}

/* Sections */
.section{
  padding: 80px 18px;
}
.section--panel{
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 500px at 80% 70%, rgba(255,255,255,.04), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.10));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section__head{
  max-width: var(--max);
  margin: 0 auto 26px;
}
.section__head.center{
  text-align:center;
}
.section__head p{ max-width: 80ch; margin: 8px auto 0; }

/* Layout helpers */
.grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: 20px 18px;
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 240px at 30% 30%, rgba(255,31,58,.14), transparent 60%);
  opacity:.7;
  pointer-events:none;
}
.card h3{ margin-bottom: 10px; text-transform: uppercase; letter-spacing:.08em; font-size: .95rem; }
.card p{ margin-bottom: 12px; }

.bullets{ margin: 0; padding-left: 18px; color: rgba(240,240,246,.75); }
.bullets li{ margin: 8px 0; }

.meta{
  display:grid;
  gap: 10px;
}
.meta > div{
  display:flex; justify-content:space-between; gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.meta__k{ color: rgba(240,240,246,.65); font-size: .85rem; }
.meta__v{ color: rgba(240,240,246,.92); font-weight: 600; }

.muted{ color: rgba(240,240,246,.62); }

/* Feature grid */
.feature-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 18px 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.feature::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 220px at 30% 25%, rgba(255,255,255,.10), transparent 60%);
  opacity:.75;
  pointer-events:none;
}
.feature__icon{
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.feature h3{ margin-bottom: 8px; }
.feature p{ margin:0; }

/* Split (Camera section) */
.split{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  gap: 18px;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
.split__text h2{ margin-bottom: 12px; }
.split__text p{ margin-bottom: 14px; }
.checklist{
  display:grid;
  gap: 10px;
  margin: 18px 0;
}
.check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(240,240,246,.78);
}
.check span{
  width: 22px; height: 22px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(240,240,246,.9);
}

/* Polaroid mock */
.polaroid{
  position:relative;
  width: min(430px, 92vw);
  margin: 0 auto;
}
.polaroid__frame{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  overflow:hidden;
  padding: 14px;
}
.polaroid__img{
  height: 260px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 220px at 70% 30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.08) 2px 7px);
  filter: saturate(.9) contrast(1.05);
}
.polaroid__label{
  margin-top: 12px;
  font-size: .75rem;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: rgba(240,240,246,.65);
}
.polaroid__glow{
  position:absolute;
  inset:-30px;
  background: radial-gradient(420px 320px at 50% 40%, rgba(255,31,58,.16), transparent 65%);
  filter: blur(24px);
  opacity:.8;
  pointer-events:none;
}

/* Video */
.video{ max-width: var(--max); margin: 0 auto 18px; }
.video__ratio{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.video__ratio iframe{
  width:100%;
  height:100%;
  border:0;
  background: transparent;
}
.video__placeholder{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 18px;
  background:
    radial-gradient(700px 300px at 50% 40%, rgba(255,31,58,.12), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
}
.video__placeholder p{ margin: 6px 0; }
.video__placeholder strong{
  letter-spacing:.18em;
  text-transform: uppercase;
}

/* Gallery */
.gallery{
  max-width: var(--max);
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.gallery--tight .shot{ padding:0; border-radius: 18px; overflow:hidden; }
.shot{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.shot__img{
  height: 210px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.9) contrast(1.05);
}
.shot__img--1{background-image:url("assets/screens/shot1.png");}
.shot__img--2{background-image:url("assets/screens/shot2.png");}
.shot__img--3{background-image:url("assets/screens/shot3.png");}


.shot__img--4{background-image:url("assets/screens/shot4.png");}
.shot__img--5{background-image:url("assets/screens/shot5.png");}
.shot__img--6{background-image:url("assets/screens/shot6.png");}
/* Contact */
.contact{ max-width: var(--max); margin: 0 auto; }
.form label{
  display:block;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: rgba(240,240,246,.70);
  margin-bottom: 12px;
}
input, textarea{
  width:100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  color: rgba(240,240,246,.92);
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(255,31,58,.40);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.form__msg{ margin-top: 12px; min-height: 1.5em; }

.links{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.links a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

.sep{
  border:0;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 18px 0;
}

/* Footer */
.footer{
  padding: 30px 18px 44px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.28);
}
.footer__inner{
  max-width: var(--max);
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.footer__title{
  font-family: "Special Elite", ui-serif, Georgia, serif;
  letter-spacing:.18em;
  color: rgba(240,240,246,.85);
}
.footer__text{ color: rgba(240,240,246,.55); }

.footer__logo{
  height: 18px;
  width: auto;
  display: block;
  opacity: .95;
}
.footer__brand{
  display: inline-flex;
  align-items: center;
}


/* a11y */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Responsive */
@media (max-width: 980px){
  .brand__logo{ height: 34px; }
  .feature-grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }

  .nav{
    display:none;
    position:absolute;
    top: 64px;
    right: 14px;
    left: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(5,5,10,.88);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    flex-direction:column;
    gap: 8px;
  }
  .nav a{ padding: 12px 12px; }
  .nav__toggle{ display:block; }
  .nav.is-open{ display:flex; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .scrollhint__dot{ animation:none !important; }
  .btn, .nav a{ transition:none; }
}

/* Title wrapper: subtle glitch for the logo image */
.hero__title{
  position:relative;
  width: min(1120px, 96vw);
  margin: 0 auto;
  display:block;
}
.hero__title::before,
.hero__title::after{
  content:"";
  position:absolute;
  inset:0;
  background: url("assets/amensis-logo.webp") no-repeat center / contain;
  opacity:0;
  pointer-events:none;
  mix-blend-mode: screen;
  filter: blur(.2px);
}
.hero__title::before{
  animation: titleGlitch1 6.5s infinite;
}
.hero__title::after{
  animation: titleGlitch2 7.4s infinite;
}

/* A tiny flicker on the main image */
.hero__logo{
  animation: titleFlicker 9s infinite;
}

@keyframes titleFlicker{
  0%, 96%, 100%{ opacity:1; }
  97%{ opacity:.86; }
  98%{ opacity:1; }
  99%{ opacity:.92; }
}

@keyframes titleGlitch1{
  0%, 92%, 100%{ opacity:0; transform: translateX(0); clip-path: inset(0 0 0 0); }
  93%{ opacity:.35; transform: translateX(6px); clip-path: inset(0 0 72% 0); }
  94%{ opacity:.18; transform: translateX(-4px); clip-path: inset(45% 0 0 0); }
  95%{ opacity:.0; }
}
@keyframes titleGlitch2{
  0%, 90%, 100%{ opacity:0; transform: translateX(0); clip-path: inset(0 0 0 0); }
  91%{ opacity:.28; transform: translateX(-6px); clip-path: inset(58% 0 0 0); }
  92%{ opacity:.14; transform: translateX(4px); clip-path: inset(0 0 48% 0); }
  93%{ opacity:0; }
}

/* Demo download */
.btn--download{
  box-shadow: 0 18px 44px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.demo-note{
  margin: 8px auto 0;
  max-width: 78ch;
  font-size: .92rem;
  color: rgba(240,240,246,.55);
}


/* =========================================================
   Centered typography (requested)
   ========================================================= */
.section, .section__head, .card, .feature, .split__text, .footer, .footer__inner{
  text-align: center;
}

/* Keep lists readable even when centered */
.bullets{
  display: inline-block;
  text-align: left;
}

/* Make meta blocks look centered but still aligned */
.meta{
  max-width: 560px;
  margin: 0 auto;
}
.links, .hero__bar, .stores, .social, .hero__cta{
  justify-content: center;
}

.shot__img--4{background-image:url("assets/screens/shot4.png");}
.shot__img--5{background-image:url("assets/screens/shot5.png");}
.shot__img--6{background-image:url("assets/screens/shot6.png");}

.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero__copy{max-width:820px;margin-left:auto;margin-right:auto;}

.camera-showcase{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  margin-top:2rem;
}
.camera-showcase img{
  max-width:520px;
  width:100%;
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
}
.camera-description{
  max-width:600px;
  text-align:center;
  opacity:.85;
}
.social{display:none;}

.camera-image {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.camera-image:hover {
  transform: scale(1.03);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9);
}


/* ===== Enhancements (layout polish) ===== */
.split__media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 220px;
}

.camera-image{
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
  transition: transform .6s ease, box-shadow .6s ease;
}

.camera-image:hover{
  transform: scale(1.03);
  box-shadow: 0 40px 100px rgba(0,0,0,0.9);
}

/* Hide hero overlays (safety) */
.store, .social{ display:none !important; }