html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; color: #fff;
}
.main-box { width: 100vw; height: 100svh; overflow: hidden; position: relative; }
.container { width:100%; height:100%; position:relative; overflow:hidden; touch-action:manipulation; }

[data-mindar-container] video:not([data-ar-video]) {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center center !important;
  background:#000; z-index:0 !important;
}
[data-mindar-container] canvas {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center center !important;
  background:transparent; z-index:1 !important;
}

.overlay{
  position:absolute; inset:0; z-index:10; display:flex; flex-direction:column;
  padding: clamp(16px, 4vw, 32px);
  background:#000;
  overflow:hidden; 
}

.overlay::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("/public/background.jpg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index:0;
  pointer-events:none;
  filter: brightness(.95);
}

.overlay::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(120% 90% at 50% 45%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.0) 38%,
      rgba(0,0,0,.75) 72%,
      rgba(0,0,0,.95) 100%),
    linear-gradient(to bottom,
      #6c1b17 0%,
      rgba(108,27,23,0) 34%,
      rgba(108,27,23,0) 68%,
      #6c1b17 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  z-index:1;
  pointer-events:none;
}

.overlay > *{ position:relative; z-index:2; }


.top{ text-align:center; margin-top: clamp(8px, 3vh, 24px); }
.bottom{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center; margin-bottom: clamp(12px, 4vh, 32px);
}
.spacer{ flex:1; }

.top img { display:block; margin: 3vw auto; height:auto; }
.author-img   { width: clamp(200px, 40vw, 420px); }
.title-img    { width: clamp(260px, 70vw, 760px); margin-top: clamp(6px, .8vh, 10px); }
.subtitle-img { width: clamp(240px, 76vw, 760px); margin-top: clamp(8px, 1.5vh, 16px); }

.brand-img { width: clamp(180px, 42vw, 360px); margin-top: 8px; }

.hint{
  opacity:.95;
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.5;
  max-width: 920px;
  margin: 0;
}
.hint--desktop{ display:none; }
.hint--mobile{ display:block; }

.btn-primary{
  padding: 14px 28px;
  min-width: 200px;
  border-radius: 14px;
  background: transparent;
  color:#fff;
  font-weight: 700;
  font-size: clamp(16px, 3.2vw, 18px);
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .08s ease, background .2s ease, opacity .2s ease;
}
.btn-primary:active{ transform: translateY(1px) scale(.99); }
.btn-primary:hover{ background: rgba(255,255,255,.08); }
.btn-primary[disabled]{ opacity:.5; cursor: default; }

@media (min-width: 900px){
  .top{ margin-top: min(8vh, 80px); }
  .author-img   { width: min(36vw, 640px); }
  .title-img    { width: min(62vw, 1100px); margin-top: 10px; }
  .subtitle-img { width: min(58vw, 1050px); margin-top: 14px; }

  .hint{ font-size: clamp(16px, 1.4vw, 22px); }
  .hint--desktop{ display:block; }
  .hint--mobile{ display:none; }

  .btn-primary{ display:none; }

  .brand-img{ width: min(22vw, 320px); margin-top: 24px; }
}