*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

/* ── КРАСИВЫЕ СИСТЕМНЫЕ ШРИФТЫ без интернета ── */
/* Для заголовков — тонкий элегантный sans */
:root {
  --font-display: 'Segoe UI', 'Helvetica Neue', 'Arial Nova', Arial, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
}

body {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  /* ── BACKGROUND ── */
  background-color: #0a0a0f;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 80%, rgba(120,119,198,0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,119,198,0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120,219,255,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
  background-size: 10px 22px, 22px 10px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0;
  background-repeat: repeat;
  background-attachment: fixed;
  /* box-shadow: 0 8px 32px rgb(0 0 0); */
}

/* ── VIGNETTE ── */
.vignette {
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(ellipse 85% 85% at 50% 40%, #00000000 10%, rgb(6 6 18) 100%);
}

/* ── GRAIN ── */
.grain {
  position:fixed;
  inset:0;
  z-index:2;
  opacity:.016;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
  animation:gr .8s steps(1) infinite;
}
@keyframes gr{0%{background-position:0 0}33%{background-position:-60px 30px}66%{background-position:25px -45px}}

/* ── CORNER MARKS ── */
.mark { position:fixed; width:16px; height:16px; z-index:10; pointer-events:none; }
.tl { top:20px; left:20px; border-top:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2); }
.tr { top:20px; right:20px; border-top:1px solid rgba(255,255,255,.2); border-right:1px solid rgba(255,255,255,.2); }
.bl { bottom:20px; left:20px; border-bottom:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2); }
.br { bottom:20px; right:20px; border-bottom:1px solid rgba(255,255,255,.2); border-right:1px solid rgba(255,255,255,.2); }

/* ── SYS LABEL ── */
.sys {
  position:fixed;
  top:24px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing:.3em;
  text-transform:uppercase;
  z-index:10;
  pointer-events:none;
  white-space:nowrap;
  animation:rise 1.5s 3s ease forwards;
  margin-top: clamp(5px, 1vh, 10px);
  color: rgba(200, 215, 255, .5);
}

/* ── PAGE LAYOUT ── */
#page {
  position:relative;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding:0 16px;
  justify-content:center;
  margin-top: -10rem;
}

/* ── MODEL VIEWER ── */
.model-wrap {
  position:relative;
  /* Десктоп: 55% вьюпорта, но не больше 680px
     Мобильный: почти весь экран по ширине */
  width: clamp(300px, 75vw, 680px);
  height: clamp(240px, 58vw, 540px);
  flex-shrink:0;
  opacity:0; animation:rise 2s .3s ease forwards;
}

/* На мобильных — занимает больше места */
@media (max-width: 600px) {
  .model-wrap {
    width: clamp(300px, 92vw, 460px);
    height: clamp(240px, 72vw, 380px);
  }
  .sys{display:none}
}
@media (max-height: 700px) {
  .model-wrap {
    width: clamp(200px, 40vw, 400px);
    height: clamp(160px, 32vw, 320px);
  }
}

model-viewer {
  width:100%; height:100%;
  background:transparent;
  --poster-color: transparent;
}
model-viewer::part(default-progress-bar) { display:none; }
model-viewer::part(default-ar-button)    { display:none; }

.model-glow {
  position:absolute; inset:-12%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(140,170,255,.12) 0%, transparent 65%);
  animation:glowPulse 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.07); }
}

/* ── TITLE ── */
.title {
  margin-top: clamp(6px, 1.5vh, 20px);
  text-align:center;
  opacity:0; animation:rise 2s 1.2s ease forwards;
}
.title h1 {
  font-family: var(--font-display);
  font-size: clamp(20px, 5.0vw, 52px);
  font-weight:200;
  letter-spacing: clamp(.18em, 2vw, .38em);
  color:rgba(255,255,255,.97);
  line-height:1;
}
.title h1 span {
  font-weight:300;
  color:rgba(200,212,255,.65);
  font-style:italic;
  font-size:.72em;
  letter-spacing:.12em;
  display: none;
}
.title .tag {
  margin-top: clamp(5px, 1vh, 10px);
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.2vw, 12px);
  letter-spacing: clamp(.18em, 1vw, .36em);
  color:rgba(200,215,255,.5);
  text-transform:uppercase;
  display: none;
}

/* ── ENTER BUTTON ── */
.enter-wrap {
  margin-top: clamp(12px, 2.5vh, 30px);
  opacity:0; animation:rise 2s 1.8s ease forwards;
}
.enter {
  display:inline-block;
  padding: clamp(11px,1.8vh,15px) clamp(30px,5vw,56px);
  border:1px solid rgba(255,255,255,.30);
  background: rgb(255 255 255 / 6%);
  color:rgba(255,255,255,.82);
  font-family: var(--font-display);
  font-weight:300;
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: clamp(.2em, 1.2vw, .42em);
  text-transform:uppercase;
  text-decoration:none;
  transition:color .4s, border-color .4s, background .4s;
  white-space:nowrap;
  border-radius: 26px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.enter:hover {
  color:#fff;
  border-color:rgba(180,200,255,.7);
  background:rgba(100,130,255,.12);
}

@keyframes rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ────────────────────────────────────────
   MODAL — светлый, читаемый, крупный
──────────────────────────────────────── */
#modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:16px;
}
#modal.open { display:flex; }

.box {
  width:min(460px, 100%);
  background: rgb(0 0 0 / 21%);
  border: 1px solid rgb(255 255 255 / 0%);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding: clamp(28px,5vw,52px) clamp(24px,5vw,48px);
  position:relative;
  animation:boxIn .4s ease;
  box-shadow: 0 20px 60px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(0 0 0 / 0%);
  border-radius: 19px;
}
@keyframes boxIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* corner accents */
.box::before,.box::after { content:''; position:absolute; width:14px; height:14px; }
.box::before {top: -7px;left: -9px;border-top: 2px solid rgb(255 255 255 / 26%);border-left: 2px solid rgb(255 255 255 / 26%);/* border-radius: 0px; */}
.box::after  {bottom: -10px;right: -12px;border-bottom: 2px solid rgb(255 255 255 / 26%);border-right: 2px solid rgb(255 255 255 / 26%);}

.bt {
  font-family: var(--font-display);
  font-weight:200;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing:.18em;
  color:rgba(255,255,255,.98);
  margin-bottom:6px;
}
.bs {
  font-family: var(--font-mono);
  font-size: clamp(9px,1.2vw,11px);
  color:rgba(200,215,255,.45);
  letter-spacing:.25em;
  margin-bottom: clamp(22px,4vh,40px);
  text-transform:uppercase;
  display: none;
}

.f { margin-bottom: clamp(18px,3vh,26px); }
.f label {
  display:block;
  font-family: var(--font-mono);
  font-size: clamp(9px,1.1vw,13px);
  color:rgba(200,215,255,.6);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.f input {
  width:100%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:2px;
  color:rgba(255,255,255,.97);
  font-family: var(--font-display);
  font-weight:300;
  font-size: clamp(14px,2vw,17px);
  padding: clamp(10px,1.5vh,14px) 16px;
  outline:none;
  transition:border-color .3s, background .3s;
}
.f input:focus {
  border-color:rgba(180,200,255,.55);
  background:rgba(255,255,255,.14);
}
.f input::placeholder { color:rgba(255,255,255,.2); }

.sb {
  width:100%;
  padding: clamp(12px,2vh,16px);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.9);
  font-family: var(--font-display);
  font-weight:300;
  font-size: clamp(12px,1.5vw,15px);
  letter-spacing:.4em;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:8px;
  transition:all .3s;
}
.sb:hover {
  background:rgba(120,150,255,.22);
  border-color:rgba(180,200,255,.6);
  color:#fff;
}
.xb {
  position:absolute; top:16px; right:18px;
  background:none; border:none;
  color:rgba(255,255,255,.35);
  font-size:16px; cursor:pointer;
  font-family: var(--font-mono);
  transition:color .2s; line-height:1;
}
.xb:hover { color:rgba(255,255,255,.85); }