:root{
  --bg:#2c001e; 
  --fg:#edeae6;
  --muted:#c2b8b2;
  --accent:#e95420;
  --border:#3f1131;
  --green:#87d531;
  --font-ui: "Ubuntu", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --nav-h:64px;
  --pad-x:clamp(14px,5vw,64px);
  --photo: 250px;
}
*{
  box-sizing:border-box;
}
html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}
html,body{
  height:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top));
  overflow-x:hidden;
}
img,video{
  display:block;
  max-width:100%;
  height:auto;
}
svg{
  display:inline-block;
}
a{
  color:inherit;
  text-decoration:none;
}
::selection{
  background:rgba(233,84,32,.25);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(rgba(255,255,255,.02),rgba(0,0,0,0) 3px),
             repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
  opacity:.35;
}
.crt{
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 140px rgba(0,0,0,.75);
}

.container{
  width:100%;
  margin:0 auto;
  padding-left:max(var(--pad-x), calc(12px + env(safe-area-inset-left)));
  padding-right:max(var(--pad-x), calc(12px + env(safe-area-inset-right)));
}
.dim{
  color:var(--muted);
}

header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--nav-h);z-index:100;
  border-bottom:1px solid var(--border);
  background:rgba(44,0,30, 0.75);
  backdrop-filter:blur(4px);
}
.nav{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:16px;
}
.prompt{
  white-space:nowrap;
}
.user {
  color: var(--green);
}
.menu{
  display:flex;
  gap:16px;
  flex:1 1 auto;
  align-items:center;
}
.menu a{
  position:relative;
}
.menu a::before{
  content:"[";
  margin-right:4px;
  color:var(--muted);
}
.menu a::after{
  content:"]";
  margin-left:4px;
  color:var(--muted);
}
.menu a:hover{
  color:var(--accent);
  border-color: var(--accent);
}
.lang{
  display:flex;
  gap:8px;
}
.lang button{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  padding:.15rem .45rem;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
  line-height:1.1;
}
.lang button.active{
  color:var(--bg);
  background:var(--accent);
  border-color:var(--accent);
}
.menu-toggle{
  display:none;
  width:32px;
  height:32px;
  border:1px solid var(--border);
  border-radius:6px;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
}

.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  place-items:center;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
@supports(height:1dvh){
  .hero{
    min-height:calc(100dvh - var(--nav-h));
  }
}
.hero .hero-content{
  width:100%;
  max-width:880px;
  margin:0 auto;
  text-align:center;
  padding:56px 0;
}
.hero .title{
  position: relative;
  display: inline-block;
  line-height: 1.1;
}
.hero .title::after{
  content: "";
  display: inline-block;
  width: .6ch;
  height: 1em;
  margin-left: .2ch;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255,59,59,.35);
  vertical-align: -.15em;
  animation: caretBlink 1s steps(1,end) infinite;
}

@keyframes caretBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

@media (prefers-reduced-motion: reduce){
  .hero .title::after{ animation: none; }
}
.title{
  font-size:clamp(26px,7vw,54px);
  margin:0 0 12px;
  letter-spacing:.02em;
}
.title .term-head {
  font-family: var(--font-ui);
}
.title .caret{
  display:inline-block;
  width:.6ch;
  height:1em;
  margin-left:.2ch;
  background:var(--accent);
  box-shadow:0 0 12px rgba(255,59,59,.35);
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.title .caret{
  animation:blink 1s steps(1,end) infinite;
}
.subtitle{
  margin:0 auto 22px;
  max-width:760px;
  white-space:normal;
}

.cta,.contact{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.button{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border:1px solid var(--border);
  border-radius:8px;
  max-width:100%;
  min-width:0;
}
.button:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.button .icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.button span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.cta .button, .contact .button{
  flex:0 0 auto;
  width:auto;
}

section{
  padding:56px 0;
  border-bottom:1px solid var(--border);
}
.term{
  border:1px solid var(--border);
  border-left:none;
  border-right:none;
  border-radius:0;
  margin:18px 0;
}
.term-head{
  padding:10px 0;
  background:#3f1131;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}
.term-body{
  padding:14px 0;
}
.term-body.list .row{
  padding:6px 0;
  border-bottom:1px dotted #351010;
}
.term-body.list .row:last-child{
  border-bottom:0;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--photo), var(--photo)));
  gap: 12px;
  justify-content: center;
}
.photos figure {
  width: var(--photo);
  height: var(--photo);
  margin: 0;
}
.photos img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

footer{
  padding:22px 0;
  text-align:center;
  color:var(--muted);
}

.intro{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:#000;
}
.intro-inner{
  position:relative;
  width:min(900px,98vw);
}
.boot{
  margin:0 0 14px;
  color:var(--fg);
  white-space:pre;
  font-size:clamp(12px,3.5vw,14px);
}
.segbar{
  display:grid;
  grid-template-columns:repeat(20,1fr);
  gap:6px;
  height:12px;
}
.segbar .seg{
  background:#240a0a;
  border:1px solid #4a1515;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px #190808;
}
.segbar .seg.filled{
  background:var(--accent);
  border-color:#7a2a16;
  box-shadow:0 0 16px rgba(233,84,32,.35);
}

@media (max-width: 600px) {
  :root {
    --photo: 180px;
  }
}

@media(max-width:840px){
  :root{
    --nav-h:56px;
  }
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .menu{
    position:fixed;
    inset:var(--nav-h) 0 auto 0;
    padding:16px var(--pad-x);
    background:rgba(44,0,30,.92);
    border-bottom:1px solid var(--border);
    transform:translateY(-135%);
    transition:transform .50s ease;
    flex-direction:column;
    gap:12px;
  }
  .menu.open{
    transform:translateY(0);
  }
  .lang {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}