/* ============ NOOR DE FILIPINAS : black & gold ============ */
:root{
  --bg:#070503; --bg-2:#0d0a05;
  --gold-1:#F6E7B8; --gold-2:#E6C96B; --gold-3:#D4AF37; --gold-4:#A87E2F;
  --grad:linear-gradient(135deg,#F6E7B8,#D4AF37 42%,#E6C96B 76%,#A87E2F);
  --text:#F5F1E6; --muted:#B9AE93; --line:rgba(212,175,55,.22);
  --sans:"Avenir Next","Avenir","Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cinzel","Trajan Pro",Georgia,serif;
  --script:"Great Vibes","Snell Roundhand",cursive;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.12;margin:0}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:.02em}
h2 .g,.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}
.eyebrow{color:var(--gold-3);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.72rem}
.rule{display:block;width:54px;height:2px;background:var(--grad);margin:0 auto 16px;border-radius:2px}
.rule.left{margin:0 0 16px}
.sub{color:var(--muted);max-width:680px;margin:16px auto 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--grad);color:#1a1405;font-weight:700;
  border:0;border-radius:40px;padding:13px 30px;cursor:pointer;font-size:.92rem;
  box-shadow:0 10px 28px rgba(212,175,55,.3);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(212,175,55,.42)}
.btn.ghost{background:transparent;color:var(--gold-1);border:1px solid var(--line);box-shadow:none}
.section{padding:92px 0;position:relative;z-index:1}
.note-line{color:var(--muted);font-size:.8rem;margin-top:22px}

/* atmosphere canvases injected by JS */
#nf-emb{position:fixed;inset:0;z-index:0;pointer-events:none}
.nf-aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 30% at 20% 20%,rgba(212,175,55,.09),transparent 70%),
             radial-gradient(36% 26% at 82% 14%,rgba(246,231,184,.06),transparent 70%),
             radial-gradient(48% 34% at 58% 88%,rgba(168,126,47,.08),transparent 70%);
  animation:nfAur 28s ease-in-out infinite alternate}
@keyframes nfAur{to{transform:translate3d(2.5%,-2%,0) scale(1.05)}}
section,header,footer,.topbar,.ribbon,.statband-wrap{position:relative;z-index:1}

/* topbar + nav */
.topbar{background:linear-gradient(90deg,#14100a,#0d0a05);border-bottom:1px solid var(--line);
  text-align:center;padding:9px 14px;font-size:.78rem;letter-spacing:.08em}
.topbar b{color:var(--gold-1);font-weight:700}
.topbar .sep{margin:0 10px;color:var(--gold-4)}
.topbar .hideSm{color:var(--muted)}
.nav{position:sticky;top:0;z-index:50;background:rgba(7,5,3,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:26px;height:76px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:700;letter-spacing:.06em}
.brand img{height:46px;width:auto}
.brand i{font-family:var(--script);font-style:normal;color:var(--gold-2);font-weight:400;font-size:1.25em;vertical-align:-.08em;margin:0 1px}
.brand span{font-size:.94rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.links{display:flex;gap:26px;margin-left:auto}
.links a{font-size:.86rem;letter-spacing:.06em;color:var(--muted);transition:color .15s}
.links a:hover{color:var(--gold-1)}
.nav-cta{padding:10px 22px;font-size:.84rem}
.burger{display:none;background:none;border:0;color:var(--gold-1);font-size:1.5rem;cursor:pointer}
#mmenu{display:none;border-top:1px solid var(--line);padding:12px 24px 18px}
#mmenu a{display:block;padding:10px 0;color:var(--muted)}

/* hero */
.hero{position:relative;overflow:hidden;padding:88px 0 70px;text-align:center}
.rays{position:absolute;left:50%;top:150px;width:900px;height:900px;transform:translateX(-50%);
  pointer-events:none;opacity:.5;
  background:conic-gradient(from 0deg,
    transparent 0deg 7deg, rgba(212,175,55,.10) 10deg 12deg, transparent 15deg 22deg,
    rgba(212,175,55,.07) 25deg 27deg, transparent 30deg 37deg, rgba(212,175,55,.10) 40deg 42deg,
    transparent 45deg 52deg, rgba(212,175,55,.07) 55deg 57deg, transparent 60deg 67deg,
    rgba(212,175,55,.10) 70deg 72deg, transparent 75deg 82deg, rgba(212,175,55,.07) 85deg 87deg,
    transparent 90deg);
  background-repeat:repeat; border-radius:50%;
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 62%);
  mask-image:radial-gradient(circle,#000 18%,transparent 62%);
  animation:nfSpin 80s linear infinite}
@keyframes nfSpin{to{transform:translateX(-50%) rotate(360deg)}}
.hero-in{position:relative;z-index:1}
.emblem{width:min(56vw,330px);margin:0 auto 10px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(212,175,55,.3));
  animation:nfFloat 7s ease-in-out infinite}
@keyframes nfFloat{50%{transform:translateY(-8px)}}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5.6vw,3.9rem);letter-spacing:.1em;margin-top:8px}
.hero h1 em{font-family:var(--script);font-style:normal;font-weight:400;color:var(--gold-2);letter-spacing:0;font-size:.92em;vertical-align:-.06em;margin:0 .12em;text-transform:none}
.sheen{background:linear-gradient(100deg,#F6E7B8 0%,#D4AF37 30%,#FFF6D8 48%,#D4AF37 64%,#A87E2F 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nfSheen 7s linear infinite;filter:drop-shadow(0 0 26px rgba(212,175,55,.3))}
@keyframes nfSheen{to{background-position:220% 0}}
.tag{color:var(--muted);max-width:620px;margin:18px auto 28px;font-size:clamp(.96rem,1.6vw,1.12rem)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.count{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.cd{min-width:86px;padding:14px 10px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(165deg,rgba(246,231,184,.06),rgba(10,8,5,.6));backdrop-filter:blur(6px)}
.cd b{display:block;font-size:1.9rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cd span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.count-cap{display:block;margin-top:14px;color:var(--gold-4);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}

/* ribbon marquee */
.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(13,10,5,.7);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ribbon-in{display:inline-block;white-space:nowrap;padding:11px 0;animation:nfTick 42s linear infinite;
  font-family:var(--serif);letter-spacing:.34em;font-size:.76rem;color:var(--gold-3)}
.ribbon-in b{color:var(--gold-1);font-weight:700}
@keyframes nfTick{to{transform:translateX(-50%)}}

/* stats */
.statband-wrap{padding:60px 24px 0}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border:1px solid var(--line);
  border-radius:20px;padding:30px 20px;background:linear-gradient(165deg,rgba(246,231,184,.05),rgba(10,8,5,.6))}
.statband .s{text-align:center}
.statband b{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.statband span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.pillar{border:1px solid var(--line);border-radius:20px;padding:34px 28px;
  background:linear-gradient(170deg,rgba(246,231,184,.05),rgba(10,8,5,.55));
  transition:transform .18s,border-color .18s,box-shadow .18s}
.pillar:hover{transform:translateY(-6px);border-color:rgba(246,231,184,.5);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 30px rgba(212,175,55,.1)}
.pillar .ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#1a1405;background:var(--grad);margin-bottom:18px;box-shadow:0 8px 22px rgba(212,175,55,.35)}
.pillar h3{font-family:var(--serif);font-size:1.3rem}
.pillar h3 small{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-4);margin-top:5px}
.pillar p{color:var(--muted);font-size:.92rem;margin:14px 0 0}

/* crown section */
.crown-sec{background:linear-gradient(180deg,rgba(246,231,184,.03),transparent)}
.crown-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.crown-art img{max-width:420px;margin:0 auto;filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(212,175,55,.3));animation:nfFloat 8s ease-in-out infinite}
.body-lg{color:var(--muted);font-size:1.04rem;margin:18px 0 10px}
.crown-list{list-style:none;padding:0;margin:18px 0 30px}
.crown-list li{padding:14px 0 14px 34px;border-bottom:1px solid rgba(212,175,55,.14);color:var(--muted);position:relative;font-size:.95rem}
.crown-list li::before{content:"✦";position:absolute;left:4px;color:var(--gold-3)}
.crown-list b{color:var(--text)}

/* faces */
.faces-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.face{margin:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;position:relative;
  background:var(--bg-2);transition:transform .18s,border-color .18s,box-shadow .18s}
.face:hover{transform:translateY(-6px);border-color:rgba(246,231,184,.5);box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 32px rgba(212,175,55,.12)}
.face img{width:100%;aspect-ratio:4/4.6;object-fit:cover;filter:saturate(.92)}
.face figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;
  background:linear-gradient(180deg,transparent,rgba(5,4,2,.92) 62%)}
.face b{font-family:var(--serif);font-size:1.12rem;display:block}
.face span{color:var(--gold-3);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}

/* timeline */
.timeline{list-style:none;max-width:760px;margin:54px auto 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold-3),rgba(212,175,55,.08))}
.timeline li{position:relative;padding:0 0 34px 48px}
.timeline li::before{content:"";position:absolute;left:4px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 14px rgba(212,175,55,.7)}
.timeline .when{display:inline-block;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-3);margin-bottom:4px}
.timeline b{display:block;font-family:var(--serif);font-size:1.18rem}
.timeline p{color:var(--muted);margin:6px 0 0;font-size:.92rem}

/* partners */
.partners{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:48px;align-items:center}
.partners img{width:100%;max-width:150px;margin:0 auto;opacity:.6;filter:sepia(1) hue-rotate(-12deg) saturate(1.6) brightness(1.05);transition:opacity .2s}
.partners img:hover{opacity:1}

/* news */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.news-card{display:block;border:1px solid var(--line);border-radius:20px;padding:30px 26px;
  background:linear-gradient(170deg,rgba(246,231,184,.05),rgba(10,8,5,.55));
  transition:transform .18s,border-color .18s,box-shadow .18s}
.news-card:hover{transform:translateY(-6px);border-color:rgba(246,231,184,.5);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 28px rgba(212,175,55,.1)}
.news-card .date{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-4)}
.news-card h3{font-family:var(--serif);font-size:1.26rem;margin:12px 0 10px}
.news-card p{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.news-card .more{color:var(--gold-1);font-size:.8rem;letter-spacing:.08em}

/* join band */
.join-band{position:relative;overflow:hidden;text-align:center;border:1px solid rgba(212,175,55,.35);
  border-radius:26px;padding:72px 32px 64px;
  background:radial-gradient(70% 120% at 50% 0%,rgba(212,175,55,.12),transparent 60%),linear-gradient(170deg,rgba(246,231,184,.05),rgba(8,6,3,.8));
  box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 48px rgba(212,175,55,.1)}
.jb-mark{position:absolute;right:-70px;bottom:-90px;width:330px;opacity:.1;pointer-events:none}
.center-eyebrow{display:block;margin-bottom:14px}
.join-band h2{font-size:clamp(1.7rem,4vw,2.7rem)}
.join-band p{color:var(--muted);max-width:600px;margin:18px auto 30px}
.join-band small{display:block;margin-top:22px;color:var(--gold-4);font-size:.72rem}

/* footer */
footer{border-top:1px solid var(--line);padding:70px 0 30px;background:linear-gradient(180deg,transparent,rgba(13,10,5,.8))}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}
.foot-brand img{max-width:190px;margin-bottom:16px}
.foot-brand p{color:var(--muted);font-size:.86rem;max-width:280px}
footer h5{font-family:var(--serif);letter-spacing:.08em;color:var(--gold-1);margin:0 0 14px;font-size:.95rem}
footer a{display:block;color:var(--muted);font-size:.86rem;padding:5px 0;transition:color .15s}
footer a:hover{color:var(--gold-1)}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(212,175,55,.14);
  margin-top:46px;padding-top:22px;color:var(--muted);font-size:.78rem}
.note{color:#6d6350;font-size:.72rem;margin-top:14px}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:960px){
  .pillars,.news-grid{grid-template-columns:1fr 1fr}
  .faces-grid{grid-template-columns:1fr 1fr}
  .crown-grid{grid-template-columns:1fr;gap:34px}
  .crown-art img{max-width:300px}
  .partners{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .links,.nav-cta{display:none}
  .burger{display:block;margin-left:auto}
  .statband{grid-template-columns:1fr 1fr}
  .pillars,.news-grid,.faces-grid{grid-template-columns:1fr}
  .topbar .hideSm{display:none}
  .hero{padding-top:60px}
  .cd{min-width:72px}
}
@media (prefers-reduced-motion:reduce){
  .rays,.emblem,.crown-art img,.ribbon-in,.sheen,.nf-aurora{animation:none!important}
}

/* glowing edge-sketch of the crest along the page edges */
.has-sketch{overflow:hidden}
.has-sketch .wrap{position:relative;z-index:1}
.nf-sketch{position:absolute;top:50%;width:540px;max-width:58vw;opacity:.15;pointer-events:none;z-index:0;
  filter:drop-shadow(0 0 16px rgba(230,201,107,.6)) drop-shadow(0 0 44px rgba(212,175,55,.32));
  animation:nfSketch 7s ease-in-out infinite}
.nf-sketch.s-right{right:-180px;transform:translateY(-50%) rotate(8deg)}
.nf-sketch.s-left{left:-180px;transform:translateY(-50%) rotate(-8deg)}
@keyframes nfSketch{
  50%{opacity:.27;filter:drop-shadow(0 0 24px rgba(230,201,107,.9)) drop-shadow(0 0 62px rgba(212,175,55,.5))}
}
@media (max-width:700px){.nf-sketch{display:none}}
@media (prefers-reduced-motion:reduce){.nf-sketch{animation:none!important}}

/* wordmark matches the logo: script swash initials on N and F */
.hero h1 .ini{font-family:"Cinzel Decorative",var(--serif);font-style:normal;font-weight:700;
  font-size:1.14em;line-height:0;letter-spacing:0}
.brand .ini{font-family:"Cinzel Decorative",var(--serif);font-style:normal;font-weight:700;
  font-size:1.12em;line-height:0}
.brand .de{font-family:var(--script);font-style:normal;font-weight:400;
  font-size:1.25em;vertical-align:-.08em;margin:0 1px}

/* running edge-light tracing the hero logo outline */
@property --nfA{syntax:'<angle>';initial-value:0deg;inherits:false}
.emblem{position:relative}
.emblem::after{content:none;display:none; /* CSS light-ring OFF; the JS edge glitter stays */content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("img/noor-sketch.png?v=2") center/contain no-repeat;
  mask:url("img/noor-sketch.png?v=2") center/contain no-repeat;
  background:
    conic-gradient(from var(--nfA),
      transparent 0deg 318deg,
      rgba(255,246,216,.25) 334deg,
      #FFFBEA 350deg,
      rgba(255,246,216,.25) 356deg,
      transparent 360deg);
  filter:drop-shadow(0 0 7px rgba(255,246,216,.9));
  mix-blend-mode:screen;
  animation:nfEdgeRun 5s linear infinite}
@keyframes nfEdgeRun{to{--nfA:360deg}}
@media (prefers-reduced-motion:reduce){.emblem::after{display:none}}

/* the brand name IS the logo lettering (exact artwork) */
.hero .h1-img{margin:14px 0 0}
.hero .h1-img img{width:min(84vw,700px);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(212,175,55,.3))}
.brand .brand-wm{height:30px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

/* full glowing sketch over the whole emblem (always on, breathing) */
.emblem::before{content:none;display:none; /* glowing sketch overlay OFF (8 Oct 2026: emblem must read as solid gold like the wordmark) */position:absolute;inset:0;pointer-events:none;z-index:1;
  -webkit-mask:url("img/noor-sketch.png?v=2") center/contain no-repeat;
  mask:url("img/noor-sketch.png?v=2") center/contain no-repeat;
  background:linear-gradient(135deg,#FFFBEA,#FFF2C8 40%,#FFFFFF 62%,#F6E7B8);
  opacity:.85;mix-blend-mode:screen;
  filter:drop-shadow(0 0 5px rgba(255,251,234,.95)) drop-shadow(0 0 16px rgba(246,231,184,.8)) drop-shadow(0 0 38px rgba(212,175,55,.6));
  animation:nfSketchPulse 3.2s ease-in-out infinite}
@keyframes nfSketchPulse{50%{opacity:1}}
.emblem::after{z-index:2}
@media (prefers-reduced-motion:reduce){.emblem::before{animation:none!important}}
/* the traveling edge-light replaces the old rotating glint */
.emblem::after{content:none}