/* ═══════════════════════════════════════
   ONBOARDING — 4 SCREENS
═══════════════════════════════════════ */
#onboarding{background:var(--bg);overflow:hidden;overflow-x:hidden;}

.ob-wrap{
  width:100%;
  height:100dvh;
  min-height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
}

.ob-slides{
  flex:1;position:relative;
  overflow:hidden;
  overflow-x:hidden !important;
  touch-action:pan-y pinch-zoom;
}

.ob-slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:calc(60px + var(--safe-top)) 36px 32px;
  opacity:0;
  transform:translateX(40px);
  transition:opacity .4s,transform .4s;
  pointer-events:none;
  overflow-y:auto;
  overflow-x:hidden;
  max-width:100vw;
  box-sizing:border-box;
}
.ob-slide.active{opacity:1;transform:translateX(0);pointer-events:all;}
.ob-slide.exit{opacity:0;transform:translateX(-40px);}

/* Desktop: center onboarding content in a max-width column */
@media(min-width:768px){
  .ob-slide{
    align-items:center;
    padding:60px 48px 32px;
  }
  .ob-slide > *{
    width:100%;
    max-width:520px;
  }
  .ob-h1{font-size:clamp(42px,5vw,64px);}
}

/* Slide 1 — Hero */
.ob-logo-wrap{
  display:flex;align-items:center;gap:14px;
  margin-bottom:48px;
}
.ob-logo-text{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);
}
.ob-logo-tag{font-size:11px;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;margin-top:2px;}

.ob-h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(38px,9vw,58px);
  font-weight:900;line-height:1.0;
  margin-bottom:20px;color:var(--text);
}
.ob-h1 em{font-style:italic;color:var(--accent2);}
.ob-p{font-size:16px;color:var(--text2);line-height:1.65;max-width:440px;}

/* Slides 2-4 — Pillars */
.ob-pillar-num{
  font-family:'Cormorant Garamond',serif;
  font-size:72px;font-weight:900;
  line-height:1;margin-bottom:8px;
  opacity:.07;color:var(--text);
}
.ob-pillar-icon{font-size:44px;margin-bottom:20px;}
.ob-pillar-name{
  font-family:'Cormorant Garamond',serif;
  font-size:40px;font-weight:700;
  margin-bottom:16px;color:var(--text);line-height:1.1;
}
.ob-pillar-name em{font-style:italic;color:var(--accent2);}
.ob-pillar-desc{font-size:16px;color:var(--text2);line-height:1.7;margin-bottom:24px;max-width:460px;}
.ob-pillar-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 14px;border-radius:20px;font-weight:600;
}

/* Slide 4 — wrap up */
.ob-pillars-mini{
  display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap;
}
.ob-mini-pill{
  padding:8px 14px;border-radius:8px;border:1px solid var(--border2);
  font-size:12px;font-weight:600;color:var(--text2);
  display:flex;align-items:center;gap:6px;
}

/* SLIDE NAV */
.ob-nav{
  flex-shrink:0;
  padding:16px 36px calc(24px + var(--safe-bottom));
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
@media(min-width:768px){
  .ob-nav{
    padding:16px 48px calc(32px + var(--safe-bottom));
    max-width:616px; /* 520px content + 48px*2 padding */
    margin:0 auto;
    width:100%;
  }
  .ob-begin{max-width:520px;}
}
.ob-dots{display:flex;gap:7px;justify-content:center;}
.ob-dot{
  width:6px;height:6px;border-radius:3px;
  background:var(--border2);transition:.3s;cursor:pointer;
}
.ob-dot.active{width:20px;background:var(--accent);}

/* Begin button — only shown on last slide */
.ob-begin{
  width:100%;max-width:360px;
  padding:16px;background:var(--accent);color:#fff;
  border:none;border-radius:10px;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s;
  display:none;
}
.ob-begin:hover{background:var(--accent2);}
.ob-begin.visible{display:block;}

/* Swipe hint */
.swipe-hint{
  position:absolute;
  bottom:calc(90px + var(--safe-bottom));
  left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  pointer-events:none;
  transition:opacity .5s;
}
.swipe-hint.hidden{opacity:0;}
.sh-chevrons{
  display:flex;gap:2px;
  animation:swipe-hint-anim 1.6s ease-in-out infinite;
}
@keyframes swipe-hint-anim{
  0%{transform:translateX(0);opacity:.3;}
  40%{transform:translateX(10px);opacity:1;}
  80%{transform:translateX(0);opacity:.3;}
  100%{transform:translateX(0);opacity:.3;}
}
.sh-ch{
  width:8px;height:8px;border-right:2px solid var(--text3);border-top:2px solid var(--text3);
  transform:rotate(45deg);
}
.sh-ch:nth-child(2){opacity:.6;}
.sh-ch:nth-child(3){opacity:.3;}
.sh-label{
  font-size:11px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;
}

/* glow effects */
.ob-glow{
  position:absolute;border-radius:50%;pointer-events:none;
}