*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#000;color:#fff;font-family:'Roboto',sans-serif}
a{text-decoration:none}

/* Preloader */
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s ease}
#preloader.fade-out{opacity:0}
#preloader .spinner{width:50px;height:50px;border:5px solid rgba(255,23,68,.2);border-top-color:#ff1744;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#page-content.hidden{visibility:hidden}

/* Typed */
#typed-text::after{content:'|';margin-left:3px;animation:blink .7s infinite}
@keyframes blink{0%,100%{opacity:0}50%{opacity:1}}
#typed-text{font-family:'Orbitron',sans-serif;font-size:clamp(.9rem,2.4vw,1.2rem);letter-spacing:2px;text-transform:uppercase;background:linear-gradient(90deg,#ff1744,#ff5252,#ff1744);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 8px rgba(255,23,68,.35);margin-bottom:1.6rem}

/* Background video – always behind content */
.video-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:-1}
.video-bg video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#000}
.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6)}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.active{opacity:1;transform:translateY(0)}

/* Hero */
.hero{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1rem}
.hero-content h1{font-family:'Orbitron',sans-serif;font-weight:700;font-size:clamp(2.5rem,8vw,5rem);background-image:linear-gradient(100deg,#b61525 0%,#e9e9e9 18%,#bdbdbd 35%,#f7f7f7 52%,#9e9e9e 70%,#ff243f 88%,#d7d7d7 100%),repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,rgba(255,255,255,.05) 2px 4px);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.35);margin-bottom:.5rem}
.hero-content p{font-size:1.05rem;color:#ccc;margin-bottom:1.6rem;letter-spacing:.5px}

/* Buttons */
.btn,.btn-outline,.btn-consultation{display:inline-block;margin:0 .6rem;padding:.9rem 2rem;font-family:'Orbitron',sans-serif;font-weight:500;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;border-radius:14px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn{border:none;background:linear-gradient(45deg,#8e111c,#3a3a3a);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.55)}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.65)}
.btn-outline{background:transparent;border:1px solid #ff2a3c;color:#ff2a3c}
.btn-outline:hover{background:rgba(255,23,68,.08)}
.btn-consultation{background:linear-gradient(45deg,#ff1f3c,#4f4f4f);color:#fff;font-weight:600;border:none;border-radius:16px;padding:1rem 2.5rem;font-size:1rem;box-shadow:0 5px 16px rgba(0,0,0,.6)}
.btn-consultation:hover{transform:translateY(-3px);box-shadow:0 7px 20px rgba(0,0,0,.8)}

/* Sections */
.section{padding:6rem 1rem;max-width:1000px;margin:0 auto;text-align:center}
.section.alt{background:rgba(0,0,0,.6)}
.section h2{font-family:'Orbitron',sans-serif;font-size:2.2rem;margin-bottom:1rem;letter-spacing:1px;background-image:linear-gradient(100deg,#b61525 0%,#e9e9e9 20%,#bdbdbd 45%,#f7f7f7 60%,#bdbdbd 80%),repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,rgba(255,255,255,.05) 2px 4px);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.section--spacious{padding-top:8rem;padding-bottom:8rem}

/* Vault */
.vault-container{display:flex;flex-direction:column;align-items:center;gap:2rem;margin-top:2rem}
.vault-menu{overflow-x:auto;width:100%}
.vault-menu ul{display:flex;justify-content:center;gap:1rem;list-style:none;padding:0 .5rem}
.vault-menu li{padding:.8rem 1.2rem;cursor:pointer;font-family:'Orbitron',sans-serif;position:relative;color:#ccc;transition:color .25s;white-space:nowrap}
.vault-menu li:hover,.vault-menu li.active{color:#ff2a3c}
.vault-menu li::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#ff2a3c;transition:width .25s}
.vault-menu li:hover::after,.vault-menu li.active::after{width:100%}

/* Showcase */
.vault-showcase{display:flex;flex-direction:column;align-items:center;height:600px;margin-bottom:2rem;overflow:hidden}
#vault-video{transition:opacity .3s ease;display:block;background:#000}
.holo-container{position:relative;display:flex;align-items:center;justify-content:center;gap:1rem;width:100%}
.holo-stage{position:relative;perspective:1200px;transform-style:preserve-3d;width:100%;max-width:800px}
.holo-stage video{width:100%;max-height:450px;transform:rotateX(18deg) rotateY(3deg) scaleY(.98);border:none;border-radius:8px;box-shadow:0 18px 36px rgba(0,0,0,.55);filter:contrast(1.06) saturate(1.03) brightness(1.02)}

.vault-nav{background:#1b1b1b;color:#fff;border:1px solid #ff2a3c;padding:.7rem 1.1rem;font-family:'Orbitron',sans-serif;font-size:.78rem;text-transform:uppercase;border-radius:6px;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.vault-nav:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.55)}
.vault-nav:focus{outline:none}

/* About */
.about-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;margin-top:2rem}
.about-text{flex:1 1 60%;text-align:left;font-size:1rem;line-height:1.6}
.about-image{flex:1 1 35%;text-align:center}
.about-image img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.founder-info{margin-top:1rem}
.manifesto-signoff{text-align:left;padding-left:2rem;margin-top:.75rem}

/* Services */
.services-container{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:2rem;margin-top:2rem}
.services-list{flex:1 1 60%}
.services-table{width:100%;max-width:600px;margin:0 auto;border-collapse:collapse;font-size:1rem}
.services-table th,.services-table td{padding:.6rem .8rem;border:1px solid #555;text-align:left;vertical-align:top}
.services-table th{background:rgba(255,23,68,.12);font-family:'Orbitron',sans-serif}
.services-cta{flex:1 1 35%;display:flex;align-items:center;justify-content:center}

/* Timeline */
.timeline{margin-top:2rem;display:flex;flex-direction:column;gap:1.2rem}
.timeline .entry{display:flex;align-items:baseline;gap:1rem}
.timeline time{font-weight:bold;color:#aaa;width:5rem;text-align:right}

/* Contact */
.contact-form{max-width:480px;margin:0 auto;display:grid;gap:1rem}
.contact-form label{display:flex;flex-direction:column;text-align:left;font-weight:500}
.contact-form input,.contact-form select,.contact-form textarea{padding:.6rem;margin-top:.3rem;border:1px solid #555;border-radius:4px;background:rgba(255,255,255,.1);color:#fff}

/* Footer */
.footer{padding:2rem 1rem;background:rgba(0,0,0,.6);text-align:center}
.footer p{font-size:.9rem;color:#ccc;margin-bottom:.5rem}
.footer .social a{color:#ff2a3c;margin:0 .5rem;font-family:'Orbitron',sans-serif;letter-spacing:.5px;transition:color .25s ease}
.footer .social a:hover{color:#fff}

/* ───────── MOBILE-FIRST MORPHOLOGY FOR VAULT ───────── */
@media (max-width: 768px) {
  /* Reduce section padding a bit for small screens */
  .section{padding:4.5rem 0.75rem}

  /* Menu: left-aligned scrollable chips */
  .vault-menu ul{justify-content:flex-start;gap:.6rem}
  .vault-menu li{padding:.6rem .9rem;font-size:.95rem}

  /* Showcase becomes full-bleed top video; remove tilt, remove heavy shadows */
  .vault-showcase{height:auto;margin-bottom:1rem}
  .holo-container{gap:.5rem}
  .holo-stage{max-width:none;width:100%}
  .holo-stage video{
    width:100vw;max-height:60vh;
    transform:none;border-radius:0;box-shadow:none
  }

  /* Hide desktop prev/next buttons; swipe replaces them */
  .vault-nav{display:none}

  /* Description: readable, left-aligned */
  .vault-description{padding:0 1rem;text-align:left}
  .vault-description h3{margin:0.4rem 0 0.2rem}
}

/* Extra small devices */
@media (max-width: 380px) {
  .holo-stage video{max-height:55vh}
}