/* ===== Layout ===== */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(10,9,18,.62);
  border-bottom: 1px solid var(--line2);
  padding-top: env(safe-area-inset-top);
}

.topbar__row{
  padding: 12px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.scan{
  height:2px;
  width:100%;
  opacity:0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201,166,255,.55),
    rgba(143,107,222,.20),
    transparent
  );
  transform: translateX(-35%);
}

.topbar.is-armed .scan{
  opacity:.85;
  animation: scanMove 1.8s linear infinite;
}

@keyframes scanMove{
  0%{ transform: translateX(-40%); }
  100%{ transform: translateX(40%); }
}

/* ===== Scroll Progress Glow Bar (token-driven) =====
   Inserted inside .topbar, directly under the scan line.
   JS writes --scroll-p in [0..1]. */
.scrollprog{
  height: var(--progress-h, 3px);
  width: 100%;
  background: var(--progress-track);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.05);
}

.scrollprog__fill{
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-p, 0));
  background: var(--progress-grad);
  box-shadow: 0 0 14px var(--progress-glow), 0 0 28px var(--progress-glow2);
  will-change: transform;
}

.scrollprog__fill::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--progress-specular);
  opacity:.95;
  mix-blend-mode: screen;
  transform: translateX(-65%);
  pointer-events:none;
}

@media (prefers-reduced-motion: no-preference){
  .scrollprog__fill::after{
    animation: progSheen 2.2s ease-in-out infinite;
  }
}

@keyframes progSheen{
  0%{ transform: translateX(-65%); opacity:.0; }
  30%{ opacity:.65; }
  60%{ opacity:.15; }
  100%{ transform: translateX(65%); opacity:0; }
}

main{
  padding-top: calc(var(--topbar-h) + var(--topbar-gap));
  position: relative;
  z-index: 1;
}

.section{
  padding: 14px 0;
}

/* ===== Section tone system (ultra-luxury separators) =====
   Usage: <section class="section" data-tone="sapphire"> ... */
.section[data-tone]{
  border-top: 1px solid var(--sec-edge-soft);
  border-bottom: 1px solid var(--sec-edge-soft);
  background: var(--sec-obsidian);
}

.section[data-tone="obsidian"]{ background: var(--sec-obsidian); }
.section[data-tone="sapphire"]{ background: var(--sec-sapphire); }
.section[data-tone="gunmetal"]{ background: var(--sec-gunmetal); }
.section[data-tone="petrol"]{ background: var(--sec-petrol); }
.section[data-tone="bordeaux"]{ background: var(--sec-bordeaux); }

.section[data-tone] .card,
.section[data-tone] .panel{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hair);
}

/* anchor offset safety (for normal jump links) */
[id]{
  scroll-margin-top: calc(var(--topbar-h) + 14px);
}

/* ===== Scroll lock when nav is open ===== */
html.nav-open,
body.nav-open{
  overflow: hidden;
  height: 100%;
}

/* ===== Mobile menu overlay ===== */
.mobile{
  position: fixed;
  inset: calc(var(--topbar-h) + 2px) 0 0 0;
  z-index: 60;
  padding: 16px 0 20px;
  background: rgba(8,7,14,.78);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.06);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.mobile.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile__inner{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mobile__nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile__foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding-top:10px;
  color: rgba(255,255,255,.65);
  font-size: var(--fs-xs);
}

.sep{
  opacity:.55;
}

/* ============================= */
/* DESKTOP MOBILE FRAME SYSTEM  */
/* ============================= */

@media (min-width: 900px){

  html{
    scroll-padding-top: calc(var(--topbar-h) + 14px);
  }

  body{
    background:
      radial-gradient(900px 600px at 50% 20%, rgba(143,107,222,.15), transparent 60%),
      #0B0A10;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-direction:column;
    min-height:100dvh;
    padding-top: calc(var(--topbar-h) + 12px);
  }

  .desktop-shell{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:0 0 auto;
    padding-top:0;
  }

  .desktop-message{
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.55;
    margin:0 0 18px;
    text-align:center;
    flex:0 0 auto;
  }

  .desktop-message span{
    display:block;
    font-size:11px;
    opacity:.4;
    margin-top:6px;
  }

  .device-frame{
    width:420px;
    border-radius:32px;
    padding:18px;
    background: linear-gradient(145deg,#111018,#1a1624);
    box-shadow:
      0 0 60px rgba(143,107,222,.25),
      0 0 120px rgba(143,107,222,.15),
      inset 0 0 0 1px rgba(255,255,255,.05);
    position:relative;
    flex:0 0 auto;
  }

  .device-frame::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:80px;
    height:6px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
  }

  .mobile-container{
    width:100%;
    max-height: calc(100dvh - var(--topbar-h) - 72px);
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    border-radius:22px;
    background:#0B0A10;
  }

  /* prevent background scrolling when nav is open in desktop frame */
  html.nav-open .mobile-container,
  body.nav-open .mobile-container{
    overflow:hidden;
  }
}

/*
.section:first-child{
  margin-top: calc(-1 * (var(--topbar-h) + var(--topbar-gap)));
}


@media (max-width:520px){
.section:first-child{
  margin-top: -60px;
}
}

@media (min-width: 899px){
.section:first-child{
  margin-top: -30px;
}
}

@media (min-width: 900px){
.section:first-child{
  margin-top: -88px;
}
}*/

/* Mobile */



/* Tablet */
@media (max-width: 899px) {
  .section:first-child{
    margin-top: -60px;
  }
}

/* Desktop */
@media (min-width: 900px) {
  .section:first-child{
    margin-top: -88px;
  }
}