/* Moneeb-e — page sections */
/* ========== HERO ========== */
.hero{position:relative; min-height:860px; display:flex; align-items:center; padding-block:40px 120px; isolation:isolate; margin-top:-76px; padding-top:156px}
.hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.light-a,.light-b{position:absolute; border-radius:50%; filter:blur(80px)}
.light-a{width:58vw; height:58vw; max-width:820px; max-height:820px; left:-10%; top:-14%; background:radial-gradient(circle,var(--glow) 0%,transparent 66%); animation:drift-a 22s var(--ease-in-out) infinite alternate}
.light-b{width:44vw; height:44vw; max-width:640px; max-height:640px; right:-12%; bottom:-22%; background:radial-gradient(circle,var(--glow-2) 0%,transparent 66%); animation:drift-b 26s var(--ease-in-out) infinite alternate}
@keyframes drift-a{to{transform:translate(8%,10%) scale(1.08)}}
@keyframes drift-b{to{transform:translate(-10%,-6%) scale(1.1)}}
.lattice{position:absolute; inset:-60px; color:var(--text); opacity:.07; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 45%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 30% 45%,#000 0%,transparent 75%); animation:pan 60s linear infinite}
@keyframes pan{to{transform:translate(60px,60px)}}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:var(--s-6)}
.hero-tag{display:inline-flex; align-items:center; gap:12px; align-self:flex-start; padding:7px 16px 7px 8px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); font-size:var(--t-small); color:var(--muted); animation:rise .8s var(--ease) .05s both}
.hero-tag b{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); background:color-mix(in oklab,var(--gold) 16%,transparent); color:var(--gold); font-weight:500}
.hero-title{font-family:var(--f-display); font-weight:400; font-size:var(--t-hero); line-height:1.08; letter-spacing:-.02em; display:flex; flex-wrap:wrap; column-gap:.26em}
.hero-title .w{display:inline-block; animation:focus-in 1s var(--ease) both; animation-delay:calc(.18s + var(--i) * .12s)}
.hero-title .w-gold{color:var(--gold)}
@keyframes focus-in{from{opacity:0; transform:translateY(.35em); filter:blur(14px)}}
@keyframes rise{from{opacity:0; transform:translateY(18px)}}
.hero-sub{font-size:var(--t-lead); color:var(--muted); max-width:54ch; line-height:1.9; animation:rise .9s var(--ease) .62s both; text-wrap:pretty}
.hero-sub strong{color:var(--text); font-weight:500}
.hero-ctas{display:flex; flex-wrap:wrap; gap:var(--s-3); animation:rise .9s var(--ease) .76s both}
.hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); animation:rise .9s var(--ease) .9s both}
.hero-meta a{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:var(--t-small); color:var(--muted); transition:color var(--d-fast) var(--ease)}
.hero-meta a:hover{color:var(--gold)}
.hero-meta svg{width:16px; height:16px; flex:none}
.hero-meta .ltr{direction:ltr; font-family:var(--f-latin); letter-spacing:.01em}

.orbit{position:relative; aspect-ratio:1; width:100%; max-width:520px; margin-inline:auto; animation:rise 1.2s var(--ease) .3s both}
.orbit-inner{position:absolute; inset:0}
.orbit .ring{position:absolute; border-radius:50%; border:1px solid var(--line)}
.orbit .r1{inset:0} .orbit .r2{inset:14%; border-style:dashed; border-color:var(--line-2); animation:spin 90s linear infinite}
.orbit .r3{inset:29%; border-color:color-mix(in oklab,var(--gold) 35%,transparent)}
.orbit .core{position:absolute; inset:34%; filter:drop-shadow(0 20px 60px var(--glow))}
.orbit .core .gem{width:100%; height:100%; animation:breathe 7s var(--ease-in-out) infinite}
@keyframes breathe{50%{transform:scale(1.04) rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .track{position:absolute; inset:0; animation:spin 48s linear infinite}
.orbit .node{position:absolute; width:12px; height:12px; margin:-6px; border-radius:50%; background:var(--bg); border:2px solid var(--gold); box-shadow:0 0 0 6px color-mix(in oklab,var(--gold) 10%,transparent)}
.orbit .node.n1{left:50%; top:0} .orbit .node.n2{left:97.55%; top:34.55%} .orbit .node.n3{left:79.39%; top:90.45%} .orbit .node.n4{left:20.61%; top:90.45%} .orbit .node.n5{left:2.45%; top:34.55%}
.orbit .path{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.orbit .path path{fill:none; stroke:var(--gold); stroke-width:.35; stroke-dasharray:2 3; opacity:.55; animation:flow 6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-50}}
.orbit .labels{position:absolute; inset:0; pointer-events:none}
.orbit .lbl{position:absolute; transform:translate(-50%,-50%); font-size:var(--t-micro); color:var(--muted); background:var(--bg); padding:3px 10px; border-radius:var(--r-pill); border:1px solid var(--line); white-space:nowrap}
.scroll-cue{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-size:var(--t-micro); color:var(--faint); letter-spacing:.12em}
.scroll-cue i{display:block; width:1px; height:44px; background:linear-gradient(var(--gold),transparent); animation:cue 2.4s var(--ease-in-out) infinite; transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0}}
/* ========== ABOUT ========== */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start}
.about-story{display:flex; flex-direction:column; gap:var(--s-6)}
.about-story .big{font-family:var(--f-display); font-weight:300; font-size:clamp(1.35rem,2.1vw,1.85rem); line-height:1.7; text-wrap:pretty}
.about-story .big b{font-weight:400; color:var(--gold)}
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3)}
.pillar{display:flex; flex-direction:column; gap:14px; padding:20px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); transition:border-color var(--d-mid) var(--ease), transform var(--d-mid) var(--ease)}
.pillar:hover{border-color:var(--line-2); transform:translateY(-3px)}
.pillar svg{width:26px; height:26px; color:var(--gold)}
.pillar span{font-size:.95rem; font-weight:500}
.company{display:flex; align-items:center; gap:var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--line); font-size:var(--t-small); color:var(--muted)}
.company .bp{font-family:var(--f-latin); font-weight:700; letter-spacing:.06em; color:var(--text); font-size:.95rem}
.company .bp small{display:block; font-size:.62rem; letter-spacing:.24em; color:var(--gold); font-weight:600}
.about-media{position:relative}
.photo{position:relative; border-radius:var(--r-3); overflow:hidden; aspect-ratio:4/3.3; background:var(--surface-2); box-shadow:var(--shadow)}
.photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.06)}
.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(9,15,32,.55),transparent 45%)}
.about-points{display:flex; flex-direction:column; margin-top:var(--s-6)}
.ap{display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s-4); padding-block:22px; border-top:1px solid var(--line)}
.ap:last-child{border-bottom:1px solid var(--line)}
.ap .n{font-family:var(--f-latin); font-size:var(--t-small); color:var(--gold); font-weight:600; padding-top:4px}
.ap h3{font-family:var(--f-display); font-weight:500; font-size:1.15rem; margin-bottom:4px}
.ap p{color:var(--muted); font-size:.98rem}
/* ========== VISION BAND ========== */
.vision{position:relative; background:var(--olive); color:#FBF6E4; overflow:hidden; isolation:isolate}
.vision .gem-xl{position:absolute; inset-inline-end:-6%; top:50%; width:min(46vw,620px); height:min(46vw,620px); transform:translateY(-50%); color:#FBF6E4; opacity:.09; z-index:-1; animation:spin 140s linear infinite}
.vision .eyebrow{color:#F3E3A2}
.vision-q{font-family:var(--f-display); font-weight:300; font-size:clamp(1.9rem,3.9vw,3.6rem); line-height:1.4; max-width:20ch; margin-top:var(--s-5); text-wrap:balance}
.goals{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-6); margin-top:clamp(56px,7vw,104px)}
.goal{display:flex; flex-direction:column; gap:var(--s-3); padding-top:var(--s-5); border-top:1px solid rgba(243,227,162,.55)}
.goal h3{font-family:var(--f-display); font-weight:500; font-size:1.2rem}
.goal p{font-size:.95rem; color:rgba(251,246,228,.86)}
/* ========== AUDIENCE ========== */
.aud{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden}
.aud-item{position:relative; display:flex; flex-direction:column; gap:var(--s-3); padding:clamp(28px,3.4vw,44px); background:var(--bg); transition:background-color var(--d-mid) var(--ease)}
.aud-item:hover{background:var(--bg-2)}
.aud-item .n{font-family:var(--f-latin); font-size:var(--t-micro); letter-spacing:.14em; color:var(--gold); font-weight:600}
.aud-item h3{font-family:var(--f-display); font-weight:500; font-size:var(--t-h3)}
.aud-item p{color:var(--muted)}
.aud-item::before{content:""; position:absolute; inset-inline-start:0; top:0; height:2px; width:0; background:var(--gold); transition:width var(--d-slow) var(--ease)}
.aud-item:hover::before{width:100%}
/* ========== VALUES GRAPH ========== */
.values-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(40px,6vw,96px); align-items:center}
.vg{position:relative; aspect-ratio:1; width:100%; max-width:600px; margin-inline:auto}
.vg-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.vg-ring{fill:none; stroke:var(--line); stroke-width:.25}
.vg-ring-2{stroke-dasharray:1 2; stroke:var(--line-2); transform-origin:50px 50px; animation:spin 80s linear infinite}
.vg-l{stroke:var(--line-2); stroke-width:.3; transition:stroke var(--d-mid) var(--ease), stroke-width var(--d-mid) var(--ease)}
.vg-l.is-on{stroke:var(--gold); stroke-width:.55; stroke-dasharray:1.5 1.5; animation:flow 4s linear infinite}
.vg-core{position:absolute; inset:38%; display:grid; place-items:center}
.vg-core .gem{width:100%; height:100%; filter:drop-shadow(0 10px 40px var(--glow)); transition:transform var(--d-slow) var(--ease)}
.vg-node{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px; min-width:44px; min-height:44px; padding:6px; background:none; border:0; color:var(--muted); font:inherit; cursor:pointer; transition:color var(--d-mid) var(--ease)}
.vg-node .dot{width:18px; height:18px; border-radius:5px; transform:rotate(22.5deg); border:1.5px solid var(--line-2); background:var(--bg); transition:all var(--d-mid) var(--ease)}
.vg-node .t{font-family:var(--f-display); font-size:1.05rem; font-weight:500; white-space:nowrap}
.vg-node:hover,.vg-node.is-on{color:var(--text)}
.vg-node.is-on .dot,.vg-node:hover .dot{border-color:var(--gold); background:var(--gold); box-shadow:0 0 0 8px color-mix(in oklab,var(--gold) 14%,transparent); transform:rotate(22.5deg) scale(1.15)}
.v-panel{display:flex; flex-direction:column; gap:var(--s-5); padding:clamp(28px,3.5vw,48px); border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface); position:relative; overflow:hidden}
.v-panel::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.6}
.v-panel .top{display:flex; justify-content:space-between; align-items:baseline}
.v-panel .idx{font-family:var(--f-latin); font-size:var(--t-small); color:var(--gold); letter-spacing:.1em}
.v-panel .en{font-family:var(--f-latin); font-size:var(--t-micro); letter-spacing:.24em; color:var(--faint); text-transform:uppercase}
.v-panel h3{font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:1.15; animation:swap .5s var(--ease) both}
.v-panel p{font-size:var(--t-lead); color:var(--muted); line-height:1.85; animation:swap .5s var(--ease) .06s both}
@keyframes swap{from{opacity:0; transform:translateY(10px); filter:blur(6px)}}
.v-hint{font-size:var(--t-small); color:var(--faint)}
/* ========== GALLERY ========== */
.gallery{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(150px,15vw,220px); gap:var(--s-4)}
.g{position:relative; border-radius:var(--r-3); overflow:hidden; background:var(--surface-2)}
.g img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.g:hover img{transform:scale(1.05)}
.g1{grid-column:span 7; grid-row:span 3} .g2{grid-column:span 5; grid-row:span 2} .g3{grid-column:span 5; grid-row:span 2} .g4{grid-column:span 7; grid-row:span 1}
.g4{display:flex; flex-direction:column; justify-content:center; gap:10px; padding:clamp(24px,3vw,40px); border:1px solid var(--line); background:var(--surface)}
.g4 p{font-family:var(--f-display); font-size:clamp(1.15rem,1.7vw,1.5rem); font-weight:300; line-height:1.6}
.g4 small{color:var(--faint); font-size:var(--t-micro)}
.g-cap{position:absolute; bottom:14px; inset-inline-start:14px; font-size:var(--t-micro); padding:5px 12px; border-radius:var(--r-pill); background:rgba(9,15,32,.62); color:#F4EEDC; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
/* ========== JOURNEY TIMELINE ========== */
.journey{background:var(--bg-2); overflow:hidden}
.tl{position:relative; display:flex; flex-direction:column; gap:clamp(40px,5vw,72px); padding-inline-start:clamp(56px,8vw,120px)}
.tl-rail{position:absolute; inset-inline-start:clamp(19px,3.4vw,47px); top:8px; bottom:8px; width:2px; background:var(--line); border-radius:2px}
.tl-fill{position:absolute; inset:0; background:linear-gradient(var(--gold-2),var(--gold)); border-radius:2px; transform-origin:top}
.step{position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px); align-items:start}
.step .marker{position:absolute; inset-inline-start:calc(-1 * clamp(56px,8vw,120px) + clamp(19px,3.4vw,47px) - 13px); top:4px; width:28px; height:28px; display:grid; place-items:center; color:var(--gold)}
.step .marker .gem{width:28px; height:28px}
.step-head{display:flex; flex-direction:column; gap:var(--s-3)}
.step-no{font-family:var(--f-latin); font-weight:600; font-size:clamp(3rem,5.4vw,5rem); line-height:.9; color:transparent; -webkit-text-stroke:1px color-mix(in oklab,var(--gold) 70%,transparent); letter-spacing:-.02em}
.step-head h3{font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1.25}
.step-head p{color:var(--muted); font-size:1.05rem}
.step-body{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3)}
.sub{display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); transition:border-color var(--d-mid) var(--ease), background-color var(--d-mid) var(--ease)}
.sub:hover{border-color:color-mix(in oklab,var(--gold) 45%,transparent)}
.sub b{font-family:var(--f-display); font-weight:500; font-size:1rem}
.sub span{font-size:.9rem; color:var(--muted); line-height:1.7}
.step-tag{align-self:flex-start; font-size:var(--t-micro); padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--line-2); color:var(--muted)}
/* ========== PACKAGES ========== */
.pk-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap; margin-bottom:clamp(40px,5vw,72px)}
.pk-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-4)}
.pk{position:relative; display:flex; flex-direction:column; border-radius:var(--r-3); border:1px solid var(--line); background:var(--surface); overflow:hidden; transition:transform var(--d-slow) var(--ease), border-color var(--d-mid) var(--ease), box-shadow var(--d-slow) var(--ease)}
.pk:hover{transform:translateY(-8px); border-color:color-mix(in oklab,var(--gold) 50%,transparent); box-shadow:var(--shadow)}
.pk-vis{position:relative; aspect-ratio:1/1.02; overflow:hidden; display:grid; place-items:center; isolation:isolate}
.pk-vis .pat{position:absolute; inset:-20%; opacity:.18; transition:transform 1.6s var(--ease)}
.pk:hover .pk-vis .pat{transform:rotate(12deg) scale(1.08)}
.pk-vis .gem{width:42%; height:42%; transition:transform var(--d-slow) var(--ease); filter:drop-shadow(0 18px 40px rgba(0,0,0,.25))}
.pk:hover .pk-vis .gem{transform:rotate(22.5deg) scale(1.08)}
.pk-vis .big{position:absolute; bottom:12px; inset-inline-end:18px; font-family:var(--f-latin); font-weight:700; font-size:4.6rem; line-height:1; opacity:.16; letter-spacing:-.04em}
.v-navy{background:#16234A; color:#E7CF73} .v-olive{background:#6F611D; color:#FBF6E4} .v-cream{background:#F5EDD3; color:#9A7F1E} .v-gold{background:#C9AE3A; color:#16234A}
.v-cream .big{color:#16234A} .v-navy .big,.v-olive .big{color:#FBF6E4}
.pk-body{display:flex; flex-direction:column; gap:var(--s-3); padding:22px 22px 24px; flex:1}
.pk-name{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3)}
.pk-name h3{font-family:var(--f-display); font-weight:500; font-size:1.3rem}
.pk-name .en{font-family:var(--f-latin); font-size:var(--t-micro); color:var(--faint); letter-spacing:.06em; direction:ltr}
.price{display:flex; align-items:baseline; gap:8px; margin-top:auto}
.price .amt{font-family:var(--f-latin); font-weight:600; font-size:2.3rem; letter-spacing:-.02em; line-height:1; color:var(--text)}
.price .cur{font-size:var(--t-small); color:var(--muted)}
.cnt{--n:var(--to); counter-reset:c var(--n)}
.cnt::after{content:counter(c)}
.pk-cta{display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); font-size:var(--t-small); color:var(--gold)}
.pk-cta svg{width:18px; height:18px; transition:transform var(--d-mid) var(--ease)}
.pk:hover .pk-cta svg{transform:translateX(-6px)}
.pk-note{margin-top:var(--s-5); font-size:var(--t-small); color:var(--faint)}
/* ========== PLATFORM ========== */
.plat-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(40px,6vw,96px); align-items:center}
.device{position:relative; padding:clamp(28px,4vw,56px); border-radius:28px; background:color-mix(in oklab,var(--gold) 9%,var(--bg)); border:1px solid var(--line)}
.device .e{position:absolute; top:22%; inset-inline-end:-26px; font-family:var(--f-latin); font-weight:700; font-size:7rem; line-height:1; color:var(--gold); opacity:.9}
.card-ui{position:relative; display:flex; flex-direction:column; gap:var(--s-4); padding:28px 24px; border-radius:22px; background:var(--bg); border:1px solid var(--line-2); box-shadow:var(--shadow); max-width:380px; margin-inline:auto}
.card-ui .wm{font-size:17px; align-self:center}
.card-ui h4{font-family:var(--f-display); font-weight:500; font-size:1.35rem; margin-top:8px}
.stage{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:var(--r-2); background:var(--surface-2); border:1px solid transparent}
.stage b{display:block; font-weight:500; color:var(--gold); font-size:.95rem}
.stage small{font-size:.8rem; color:var(--muted)}
.stage .st{width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none; opacity:.3}
.stage:nth-of-type(1) .st{animation:pulse 4.5s var(--ease-in-out) infinite}
.stage:nth-of-type(2) .st{animation:pulse 4.5s var(--ease-in-out) 1.5s infinite}
.stage:nth-of-type(3) .st{animation:pulse 4.5s var(--ease-in-out) 3s infinite}
@keyframes pulse{0%,30%{opacity:1; box-shadow:0 0 0 6px color-mix(in oklab,var(--gold) 20%,transparent)} 45%,100%{opacity:.3; box-shadow:none}}
.caps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); margin-top:var(--s-7)}
.cap{display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:var(--r-2); border:1px solid var(--line); background:var(--surface); transition:transform var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease)}
.cap:hover{transform:translateY(-4px); border-color:var(--line-2)}
.cap .k{display:flex; align-items:center; gap:10px; font-family:var(--f-latin); font-size:var(--t-micro); letter-spacing:.16em; color:var(--gold)}
.cap .k i{flex:1; height:1px; background:var(--line)}
.cap h3{font-family:var(--f-display); font-weight:500; font-size:1.15rem}
.cap p{font-size:.94rem; color:var(--muted)}
/* ========== QUALITY ========== */
.quality{background:var(--bg-2)}
.gates{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s-4)}
.gates::before{content:""; position:absolute; top:21px; inset-inline:10%; height:1px; background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px); opacity:.55}
.gate{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-3)}
.gate .oct{width:44px; height:44px; display:grid; place-items:center; color:var(--gold); background:var(--bg-2)}
.gate .oct svg{width:44px; height:44px}
.gate .oct span{position:absolute; font-family:var(--f-latin); font-size:.72rem; font-weight:700; color:var(--gold)}
.gate h3{font-family:var(--f-display); font-weight:500; font-size:1.1rem; margin-top:8px}
.gate p{font-size:.9rem; color:var(--muted); max-width:24ch}
.axes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-4); margin-top:clamp(64px,8vw,112px)}
.axis{display:flex; flex-direction:column; gap:var(--s-3); padding:26px 24px; border-radius:var(--r-2); background:var(--bg); border:1px solid var(--line)}
.axis .tag{align-self:flex-start; font-size:var(--t-micro); padding:4px 12px; border-radius:var(--r-pill); color:var(--gold); background:color-mix(in oklab,var(--gold) 12%,transparent)}
.axis h3{font-family:var(--f-display); font-weight:500; font-size:1.15rem}
.axis p{font-size:.92rem; color:var(--muted)}
.axis .bar{height:3px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:auto}
.axis .bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transform-origin:right}
.sub-h{font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,2.4vw,2.1rem); margin-top:clamp(64px,8vw,112px); margin-bottom:var(--s-3)}
/* ========== RULING / PRINCIPLES ========== */
.ruling-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,96px); align-items:start}
.ruling-aside{position:sticky; top:120px; display:flex; flex-direction:column; gap:var(--s-5)}
.cond{padding:22px 24px; border-radius:var(--r-2); border:1px solid color-mix(in oklab,var(--gold) 40%,transparent); background:color-mix(in oklab,var(--gold) 7%,transparent); font-size:.98rem; line-height:1.85}
.cond b{color:var(--gold); font-weight:500}
.schools{display:flex; flex-direction:column}
.school{display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr); gap:var(--s-6); padding-block:30px; border-top:1px solid var(--line); align-items:baseline}
.school:last-child{border-bottom:1px solid var(--line)}
.school h3{font-family:var(--f-display); font-weight:300; font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.2; transition:color var(--d-mid) var(--ease)}
.school:hover h3{color:var(--gold)}
.school p{color:var(--muted)}
.clarity{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-6); margin-top:clamp(72px,9vw,128px)}
.cl{display:flex; flex-direction:column; gap:10px; padding-top:var(--s-5); border-top:2px solid var(--gold)}
.cl .n{font-family:var(--f-latin); font-size:var(--t-micro); letter-spacing:.14em; color:var(--gold); font-weight:600}
.cl h3{font-family:var(--f-display); font-weight:500; font-size:1.12rem}
.cl p{font-size:.93rem; color:var(--muted)}
/* ========== CONTACT ========== */
.contact{position:relative; overflow:hidden; isolation:isolate; text-align:center}
.contact .halo{position:absolute; left:50%; top:46%; width:900px; height:900px; transform:translate(-50%,-50%); background:radial-gradient(circle,var(--glow) 0%,transparent 60%); z-index:-1; filter:blur(20px)}
.contact .gem-c{width:84px; height:84px; margin:0 auto var(--s-6); animation:breathe 7s var(--ease-in-out) infinite}
.contact-title{font-family:var(--f-display); font-weight:300; font-size:clamp(2.4rem,6vw,5.6rem); line-height:1.15; letter-spacing:-.02em; text-wrap:balance; max-width:16ch; margin-inline:auto}
.contact-title em{font-style:normal; color:var(--gold)}
.contact .lead{margin:var(--s-5) auto 0}
.start{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-3); max-width:980px; margin:clamp(48px,6vw,80px) auto 0; text-align:start}
.start div{padding:18px 20px; border-radius:var(--r-2); border:1px solid var(--line); background:var(--surface)}
.start b{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:500; font-size:1.1rem}
.start b span{font-family:var(--f-latin); font-size:var(--t-micro); color:var(--gold); letter-spacing:.12em}
.start p{font-size:.88rem; color:var(--muted); margin-top:4px; line-height:1.7}
.contact-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3); margin-top:clamp(40px,5vw,64px)}
.channels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; max-width:1100px; margin:clamp(48px,6vw,80px) auto 0; background:var(--line); border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden}
.ch{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:24px; background:var(--bg); text-align:start; transition:background-color var(--d-mid) var(--ease); min-height:44px}
.ch:hover{background:var(--bg-2)}
.ch small{font-size:var(--t-micro); color:var(--faint)}
.ch span{font-family:var(--f-latin); font-weight:500; font-size:1rem; direction:ltr; color:var(--text)}
.ch:hover span{color:var(--gold)}
.partners{max-width:760px; margin:var(--s-6) auto 0; font-size:var(--t-small); color:var(--faint)}
.foot{border-top:1px solid var(--line); padding-block:36px}
.foot-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5)}
.foot p,.foot a{font-size:var(--t-small); color:var(--faint)}
.foot a{display:inline-flex; align-items:center; min-height:44px}
.foot a:hover{color:var(--gold)}
.foot nav{display:flex; flex-wrap:wrap; gap:var(--s-5)}