/* Moneeb-e — tablet + app-style mobile layout */
/* ========== RESPONSIVE ========== */
@media (max-width:1180px){
  .nav-link{padding:0 10px; font-size:.88rem}
  .pk-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .axes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clarity{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:inline-grid}
  .hero{min-height:0; padding-bottom:110px}
  .hero-grid,.about-grid,.values-grid,.plat-grid,.ruling-grid{grid-template-columns:minmax(0,1fr)}
  .orbit{max-width:420px}
  .ruling-aside{position:static}
  .step{grid-template-columns:minmax(0,1fr)}
  .gates{grid-template-columns:minmax(0,1fr); gap:0}
  .gates::before{top:22px; bottom:22px; inset-inline:auto; inset-inline-start:21px; width:1px; height:auto; background:repeating-linear-gradient(180deg,var(--gold) 0 6px,transparent 6px 12px)}
  .gate{flex-direction:row; align-items:flex-start; text-align:start; gap:var(--s-5); padding-bottom:var(--s-6)}
  .gate h3{margin-top:6px}
  .gate p{max-width:none}
  .gate > div{display:flex; flex-direction:column; gap:4px}
  .start,.channels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ========== MOBILE APP SHELL ========== */
.tabbar,.m-lbl{display:none}
@media (max-width:768px){
  .mb{--gutter:16px; padding-bottom:calc(104px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color:transparent}
  /* lighter rendering for phones */
  .light-a,.light-b,.scroll-cue,.device .e{display:none}
  .lattice,.vision .gem-xl,.orbit .r2,.vg-ring-2,.contact .halo{animation:none}
  .contact .halo{width:480px; height:480px; filter:none}
  /* app bar */
  .nav,.nav.is-solid{background:color-mix(in oklab,var(--bg) 84%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line); padding-top:env(safe-area-inset-top)}
  .nav-in{height:60px}
  .nav-brand{font-size:17px}
  .menu-btn{display:none}
  /* type scale */
  .sec{padding-block:44px}
  .sec-head{gap:10px; margin-bottom:22px}
  .h2{font-size:1.72rem; line-height:1.32}
  .lead{font-size:1rem; line-height:1.8}
  .eyebrow{font-size:.8rem}
  .eyebrow::before{width:16px}
  /* hero = home screen */
  .hero{margin-top:-60px; padding-top:84px; padding-bottom:12px; min-height:0}
  .hero-grid{gap:4px}
  .orbit-wrap{order:-1}
  .orbit{max-width:210px}
  .orbit .lbl{display:none}
  .hero-copy{gap:18px; padding:22px 18px 18px; border-radius:28px; background:var(--surface); border:1px solid var(--line)}
  .hero-tag{font-size:.76rem; padding:5px 12px 5px 6px}
  .hero-title{font-size:2.55rem}
  .hero-sub{font-size:1rem; line-height:1.8}
  .hero-ctas{flex-direction:column; gap:10px}
  .hero-ctas .btn{width:100%}
  .hero-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; border-top:0; padding-top:0}
  .hero-meta a{flex-direction:column; justify-content:center; gap:6px; min-height:74px; border-radius:18px; background:var(--surface-2); font-size:.76rem; color:var(--text)}
  .hero-meta svg{width:22px; height:22px; color:var(--gold)}
  .hero-meta .ltr{display:none}
  .m-lbl{display:inline}
  /* horizontal swipe rails */
  .aud,.goals,.caps,.axes,.clarity,.start,.pk-row,.pillars,.gallery,.step-body{display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; gap:12px; margin-inline:-16px; padding:4px 16px 10px; scroll-padding-inline:16px; scrollbar-width:none; background:none; border:0; border-radius:0}
  .aud::-webkit-scrollbar,.goals::-webkit-scrollbar,.caps::-webkit-scrollbar,.axes::-webkit-scrollbar,.clarity::-webkit-scrollbar,.start::-webkit-scrollbar,.pk-row::-webkit-scrollbar,.pillars::-webkit-scrollbar,.gallery::-webkit-scrollbar,.step-body::-webkit-scrollbar{display:none}
  .aud>*,.goals>*,.caps>*,.axes>*,.clarity>*,.start>*,.pk-row>*,.gallery>*,.step-body>*{flex:0 0 80%; scroll-snap-align:start}
  .pillars>*{flex:0 0 auto; scroll-snap-align:start}
  .aud-item{border:1px solid var(--line); border-radius:22px; background:var(--surface); padding:22px 20px}
  .aud-item h3{font-size:1.15rem}
  .pillar{flex-direction:row; align-items:center; padding:12px 16px; border-radius:999px}
  .pillar svg{width:20px; height:20px}
  .gallery{grid-auto-rows:auto}
  .g{aspect-ratio:4/5}
  .g4{aspect-ratio:auto}
  .g4 p{font-size:1.1rem}
  .cap,.axis,.sub,.start>div{border-radius:20px}
  .cl{padding:18px; border-radius:20px; background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--gold)}
  .goal{padding:18px; border-radius:20px; background:rgba(251,246,228,.08); border-top:0}
  .start{margin-top:28px}
  /* about: grouped list */
  .about-grid{gap:28px}
  .about-story{gap:20px}
  .about-story .big{font-size:1.2rem}
  .company{flex-direction:column; align-items:flex-start; gap:8px; padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--surface)}
  .photo{border-radius:24px}
  .about-points{margin-top:14px; border:1px solid var(--line); border-radius:22px; background:var(--surface); padding-inline:18px}
  .ap{grid-template-columns:32px minmax(0,1fr); gap:10px; padding-block:16px}
  .ap:first-of-type{border-top:0}
  .ap:last-child{border-bottom:0}
  .ap h3{font-size:1.05rem}
  .ap p{font-size:.92rem}
  /* vision as an inset card */
  .vision{margin-inline:16px; border-radius:28px; padding-block:36px}
  .vision .wrap{padding-inline:20px}
  .vision .goals{margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px; margin-top:28px}
  .vision-q{font-size:1.55rem; line-height:1.55}
  .vision .gem-xl{width:300px; height:300px; inset-inline-end:-30%}
  /* values */
  .vg{max-width:320px}
  .vg-node .t{font-size:.84rem}
  .vg-node .dot{width:15px; height:15px}
  .v-panel{padding:20px; border-radius:22px; gap:14px}
  .v-panel h3{font-size:1.9rem}
  .v-panel p{font-size:1rem}
  /* journey: compact timeline cards */
  .tl{padding-inline-start:40px; gap:30px}
  .tl-rail{inset-inline-start:13px}
  .step{gap:14px}
  .step .marker{inset-inline-start:-38px; width:24px; height:24px}
  .step .marker .gem{width:24px; height:24px}
  .step-no{font-size:2.3rem}
  .step-head h3{font-size:1.35rem}
  .step-head p{font-size:.95rem}
  .step-body{margin-inline:-16px -16px; padding-inline-start:0}
  .step-body>*{flex-basis:76%}
  .sub{padding:16px}
  /* packages */
  .pk-head{margin-bottom:22px; gap:14px}
  .pk-head .btn{display:none}
  .pk{border-radius:24px}
  .pk-vis{aspect-ratio:1/.8}
  .pk-vis .big{font-size:3.4rem}
  .price .amt{font-size:2rem}
  /* platform */
  .plat-grid{gap:28px}
  .device{padding:16px; border-radius:26px}
  .card-ui{padding:20px 16px; border-radius:20px}
  .caps{margin-top:24px}
  /* quality */
  .sub-h{margin-top:36px; font-size:1.35rem}
  .axes{margin-top:18px !important}
  .gate{padding-bottom:22px}
  /* rulings: grouped list */
  .ruling-grid{gap:22px}
  .ruling-aside{gap:14px}
  .cond{border-radius:20px; font-size:.95rem; padding:18px}
  .schools{border:1px solid var(--line); border-radius:22px; background:var(--surface); padding-inline:18px}
  .school{grid-template-columns:minmax(0,1fr); gap:4px; padding-block:16px}
  .school:first-child{border-top:0}
  .school:last-child{border-bottom:0}
  .school h3{font-size:1.3rem}
  .school p{font-size:.94rem}
  .clarity{margin-top:32px}
  /* contact */
  .contact{text-align:start}
  .contact .gem-c{width:60px; height:60px; margin:0 0 18px}
  .contact .eyebrow{justify-content:flex-start !important}
  .contact-title{font-size:2.05rem; margin-inline:0}
  .contact .lead{margin-inline:0}
  .contact-ctas{flex-direction:column; gap:10px; margin-top:24px}
  .contact-ctas .btn{width:100%}
  .channels{display:flex; flex-direction:column; gap:0; margin-top:24px; border-radius:22px; background:var(--surface)}
  .ch{flex-direction:row-reverse; justify-content:space-between; align-items:center; padding:16px 18px; min-height:60px; background:transparent; border-top:1px solid var(--line)}
  .ch:first-child{border-top:0}
  .ch span{font-size:.92rem}
  .partners{margin-inline:0}
  .foot{padding-block:22px}
  .foot-in{flex-direction:column; align-items:flex-start; gap:6px}
  /* touch feedback */
  .btn:active,.pk:active,.cap:active,.aud-item:active,.ch:active,.tab:active{transform:scale(.97)}
  .pk:hover,.cap:hover,.pillar:hover{transform:none}
  /* bottom tab bar */
  .tabbar{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; position:fixed; z-index:60; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); height:70px; padding:0 4px; border-radius:26px; background:color-mix(in oklab,var(--bg-2) 88%,transparent); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border:1px solid var(--line-2); box-shadow:0 20px 50px -18px rgba(0,0,0,.55)}
  .tab{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:70px; font-size:.7rem; color:var(--faint); transition:color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
  .tab svg{width:22px; height:22px}
  .tab.is-active{color:var(--gold)}
  .tab.is-active::before{content:""; position:absolute; top:7px; width:18px; height:3px; border-radius:3px; background:var(--gold)}
  .tab-cta{color:var(--text); justify-content:flex-end; padding-bottom:9px}
  .tab-cta .fab{position:absolute; top:-20px; width:60px; height:60px; display:grid; place-items:center; border-radius:21px; background:var(--gold); color:var(--on-gold); box-shadow:0 12px 30px -8px var(--glow),0 0 0 5px var(--bg)}
  .tab-cta .fab .gem{width:30px; height:30px; color:var(--on-gold)}
  .mb[data-theme="light"] .tab-cta .fab{background:var(--navy)}
  .mb[data-theme="light"] .tab-cta .fab .gem{color:#E7CF73}
}
@media (max-width:380px){
  .hero-title{font-size:2.25rem}
  .h2{font-size:1.55rem}
  .tab{font-size:.64rem}
}