@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Inter:wght@400;600;700;800&display=swap');
:root{--gold:#f7c653;--blue:#00aaff;--cyan:#5ee7ff;--ink:#01050c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}a{color:inherit}
header{height:82px;position:fixed;z-index:100;inset:0 0 auto;display:flex;align-items:center;padding:0 clamp(18px,3.4vw,58px);background:#01060df5;border-bottom:1px solid #dcae3e45;backdrop-filter:blur(15px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:280px}.brand img{width:55px;height:55px;object-fit:contain}.brand span{display:grid}.brand strong{font:800 16px Cinzel;letter-spacing:2px;color:#fff}.brand small{font-size:6px;letter-spacing:2px;color:var(--gold);margin-top:3px}
nav{margin-left:auto;display:flex;align-items:center;gap:clamp(8px,1vw,18px)}nav a{text-decoration:none;font-size:8px;font-weight:800;letter-spacing:.6px;color:#dce4ed;white-space:nowrap}nav a:hover{color:var(--gold)}.login{padding:9px 13px;border:1px solid #f7c6538c;border-radius:17px;color:var(--gold)!important}.menu{display:none}
.hero{height:690px;position:relative;display:flex;align-items:center;padding:120px clamp(24px,5.8vw,100px) 58px;overflow:hidden;isolation:isolate;background:#020711}
.photo{position:absolute;z-index:-5;inset:0;background:url('../images/hero-man-afro-staff.jpg') center/cover no-repeat;filter:saturate(1.08) contrast(1.05)}
.hero:before{content:"";position:absolute;z-index:-4;inset:0;background:linear-gradient(90deg,#010713fa 0%,#021126ef 31%,#021126b5 44%,#0211262b 62%,transparent 78%),linear-gradient(0deg,#01050caa,transparent 30%)}
.hero:after{content:"";position:absolute;z-index:-2;inset:auto 0 0;height:100px;background:linear-gradient(transparent,#02070e)}
.azure{position:absolute;z-index:-3;left:-9%;top:12%;width:54%;height:75%;background:radial-gradient(ellipse,#008cff35,transparent 66%);filter:blur(10px)}
.copy{width:min(720px,54vw);position:relative}.welcome{margin:0;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:6px}.copy h1{margin:5px 0 0;font:900 clamp(50px,5.3vw,90px)/1 Cinzel;color:#fff;letter-spacing:-1px;text-shadow:-2px 0 14px #00aaff77,2px 0 16px #f7c65366}.tag{margin:3px 0 17px;color:#fff4cc;font:700 clamp(10px,1vw,15px) Cinzel;letter-spacing:6px}.declaration{margin:0;color:#fff;font:700 clamp(12px,1.12vw,17px)/1.5 Cinzel;letter-spacing:.5px}.reference{margin:5px 0 0;color:var(--gold);font-size:9px;font-weight:900;letter-spacing:2.3px}.mission{margin:17px 0 0;color:#c6d3e2;font-size:11px;line-height:1.65}.actions{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap}.actions a{padding:11px 17px;border-radius:18px;text-decoration:none;font-size:8px;font-weight:900;letter-spacing:.9px;transition:.25s}.gold{background:linear-gradient(135deg,#ffe17b,#d89a1f);color:#07101b;box-shadow:0 0 24px #f7c65345}.ghost{border:1px solid #43d6ff95;background:#03152bbd}.actions a:hover{transform:translateY(-2px);filter:brightness(1.14)}
.cards{position:relative;z-index:5;width:min(1510px,95%);margin:-54px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{min-height:240px;position:relative;overflow:hidden;padding:21px 20px;border-radius:10px;background:linear-gradient(150deg,#062440,#020811 72%);border:1px solid #00c2ff9a;box-shadow:0 0 20px #00aaff35,0 22px 40px #0009;transition:.35s}.card.amber{border-color:#f7c653a0;background:linear-gradient(150deg,#2a1908,#04070b 72%);box-shadow:0 0 20px #f7c65332,0 22px 40px #0009}.card:hover{transform:translateY(-6px);filter:brightness(1.13)}.card>span{position:absolute;right:16px;top:14px;color:#ffffff77;font:700 9px Cinzel}.art{position:absolute;left:18px;top:17px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff45;background:#071422bd;color:#fff;font-style:normal;font-size:20px;box-shadow:0 0 26px #00aaff60}.amber .art{color:var(--gold);box-shadow:0 0 26px #f7c65350}.card h2{margin:66px 0 8px;font:800 18px/1.02 Cinzel}.card p{max-width:215px;color:#bac7d8;font-size:9px;line-height:1.5}.card>a{position:absolute;right:17px;bottom:16px;color:var(--gold);text-decoration:none;font-size:8px;font-weight:900}.times{display:grid;gap:2px;margin-top:4px}.times b{font-size:8px}.times small{font-size:7px;color:#aebbd0;margin-bottom:3px}
.prepare{position:relative;text-align:center;padding:38px 20px 34px;background:radial-gradient(circle at 50% 0,#ffcf5c42,transparent 29%),linear-gradient(90deg,#02070f,#071b31,#1d1106);border-block:1px solid #f7c65335}.prepare:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),#fff,var(--gold),transparent);box-shadow:0 0 24px var(--gold)}.prepare p{color:var(--gold);font-size:8px;font-weight:900;letter-spacing:5px}.prepare h2{margin:9px auto 0;max-width:1180px;font:600 clamp(17px,1.65vw,25px)/1.35 Cinzel;color:#fff2ca}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:38px 5%;background:#02060d}.pillars div{text-align:center;display:grid;place-items:center}.pillars i{width:40px;height:40px;border:1px solid #f7c65360;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-style:normal;margin-bottom:9px}.pillars b{font:700 9px Cinzel;letter-spacing:1px}.pillars small{font-size:7px;color:#75869d;margin-top:4px}
.living-light{position:fixed;z-index:200;pointer-events:none;inset:0;background:linear-gradient(112deg,transparent 44%,#39d8ff14 48%,#fff2ad94 50%,#ffae3020 52%,transparent 56%);transform:translateX(-130%);animation:sweep 8s 2s ease-in-out infinite}@keyframes sweep{0%,66%{transform:translateX(-130%);opacity:0}70%{opacity:1}82%{transform:translateX(130%);opacity:.9}83%,100%{opacity:0}}
.reveal{opacity:0;transform:translateY(20px);transition:.8s}.reveal.show{opacity:1;transform:none}.flash{animation:hit .7s ease-out}@keyframes hit{20%{filter:brightness(1.55) drop-shadow(0 0 15px #ffd76f66)}100%{filter:brightness(1)}}
@media(max-width:1180px){nav a:not(.login){display:none}.cards{grid-template-columns:repeat(2,1fr)}.copy{width:60vw}}
@media(max-width:720px){header{height:72px;padding:0 12px}.brand{min-width:0}.brand img{width:45px;height:45px}.brand strong{font-size:13px}.brand small{font-size:5px}.menu{display:block;margin-left:auto;background:#071427;color:#fff;border:1px solid #ffffff33;border-radius:5px;padding:8px 10px}nav{display:none;position:fixed;top:72px;left:0;right:0;padding:17px;background:#020814fb;flex-direction:column;align-items:stretch}nav.open{display:flex}nav a:not(.login){display:block;padding:8px}.hero{height:780px;align-items:flex-start;padding:112px 20px 260px}.photo{background-position:58% center}.hero:before{background:linear-gradient(180deg,#010713f9 0%,#021126e9 44%,#0211265a 65%,transparent 82%)}.copy{width:100%}.copy h1{font-size:clamp(42px,12vw,64px)}.tag{letter-spacing:3px}.declaration{font-size:11px}.cards{grid-template-columns:1fr;margin:-42px auto 0}.card{min-height:220px}.prepare{padding:68px 18px}.pillars{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.living-light{display:none}.reveal{opacity:1;transform:none;transition:none}.card{transition:none}}

/* ============================================================
   NATIVE HD FEATURE CARDS — NO CARD IMAGES
   Live HTML text + CSS vector shapes for maximum sharpness.
   ============================================================ */
.native-hd-cards{
  position:relative;
  z-index:8;
  width:min(1540px,97%);
  margin:-58px auto 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
}

.feature-card{
  --accent:#18c8ff;
  --accent-rgb:24,200,255;
  position:relative;
  min-height:330px;
  padding:42px 28px 25px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#f7fbff;
  text-decoration:none;
  border:1px solid var(--accent);
  border-radius:8px;
  background:
    radial-gradient(circle at 50% 12%,rgba(var(--accent-rgb),.20),transparent 35%),
    linear-gradient(145deg,rgba(9,30,49,.98),rgba(1,7,15,.99) 58%,rgba(0,2,7,1));
  box-shadow:
    inset 0 0 24px rgba(var(--accent-rgb),.12),
    0 0 14px rgba(var(--accent-rgb),.38),
    0 18px 44px rgba(0,0,0,.62);
  isolation:isolate;
  transition:transform .25s ease,box-shadow .25s ease;
}
.feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.42;
  background:
    linear-gradient(115deg,transparent 0 30%,rgba(var(--accent-rgb),.11) 30.5%,transparent 31% 68%,rgba(var(--accent-rgb),.08) 68.5%,transparent 69%),
    repeating-linear-gradient(90deg,transparent 0 68px,rgba(var(--accent-rgb),.045) 69px,transparent 70px);
}
.feature-card::after{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 16px var(--accent);
}
.feature-card.card-gold{
  --accent:#f0c45d;
  --accent-rgb:240,196,93;
}
.feature-card:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 0 30px rgba(var(--accent-rgb),.16),
    0 0 22px rgba(var(--accent-rgb),.55),
    0 22px 50px rgba(0,0,0,.68);
}
.card-number{
  position:absolute;
  top:15px;
  right:18px;
  font:700 12px/1 Arial,sans-serif;
  letter-spacing:.13em;
  color:rgba(255,255,255,.72);
}
.card-icon{
  position:relative;
  width:82px;
  height:72px;
  margin:0 auto 14px;
  color:var(--accent);
  filter:drop-shadow(0 0 9px rgba(var(--accent-rgb),.75));
}
.video-icon{
  width:82px;height:58px;margin-top:6px;
  border:2px solid currentColor;border-radius:9px;
  box-shadow:inset 0 0 14px rgba(var(--accent-rgb),.13);
}
.video-icon::before,.video-icon::after{
  content:"";position:absolute;top:-7px;width:18px;height:10px;
  border:2px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0;
}
.video-icon::before{left:11px}.video-icon::after{right:11px}
.video-icon span{
  position:absolute;left:32px;top:17px;width:0;height:0;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:17px solid currentColor;
}
.path-icon{
  width:90px;height:62px;
  border-bottom:2px solid currentColor;
}
.path-icon::before,.path-icon::after{
  content:"";position:absolute;bottom:0;width:47px;height:47px;
  border-top:2px solid currentColor;transform:skewX(-28deg) rotate(45deg);
}
.path-icon::before{left:2px}.path-icon::after{right:2px;transform:skewX(28deg) rotate(-45deg)}
.path-icon span{
  position:absolute;left:39px;bottom:0;width:12px;height:49px;
  border-left:2px dashed currentColor;transform:perspective(60px) rotateX(22deg);
}
.calendar-icon{
  width:68px;height:62px;margin-top:2px;
  border:2px solid currentColor;border-radius:7px;
  box-shadow:inset 0 0 14px rgba(var(--accent-rgb),.12);
}
.calendar-icon::before{
  content:"";position:absolute;left:-2px;right:-2px;top:13px;border-top:2px solid currentColor;
}
.calendar-icon::after{
  content:"";position:absolute;left:14px;right:14px;top:-8px;height:15px;
  border-left:4px solid currentColor;border-right:4px solid currentColor;
}
.calendar-icon span{
  position:absolute;inset:22px 0 auto;
  font:700 22px/1 Georgia,serif;color:currentColor;
}
.people-icon::before,.people-icon::after,.people-icon span{
  content:"";position:absolute;border:2px solid currentColor;border-radius:50%;
}
.people-icon::before{width:28px;height:28px;left:27px;top:3px}
.people-icon::after{width:22px;height:22px;left:5px;top:19px}
.people-icon span{width:22px;height:22px;right:5px;top:19px}
.people-icon{
  border-bottom:2px solid currentColor;border-radius:0 0 45px 45px;
}
.feature-card h2{
  margin:0 0 11px;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,1.45vw,27px);
  line-height:1.02;
  letter-spacing:.025em;
  color:var(--accent);
  text-shadow:0 0 12px rgba(var(--accent-rgb),.48);
}
.feature-card p{
  margin:0 auto 9px;
  max-width:310px;
  font:500 13px/1.48 Arial,sans-serif;
  letter-spacing:.015em;
  color:#f3f6fa;
}
.feature-card p strong{
  font-size:11px;
  letter-spacing:.04em;
  color:#fff;
}
.card-cta{
  margin-top:auto;
  padding-top:14px;
  font:800 11px/1 Arial,sans-serif;
  letter-spacing:.12em;
  color:var(--accent);
}
.card-cta b{
  display:inline-block;margin-left:7px;font-size:19px;vertical-align:-2px;
}
@media(max-width:1180px){
  .native-hd-cards{grid-template-columns:repeat(2,1fr);margin-top:-42px}
  .feature-card h2{font-size:25px}
}
@media(max-width:680px){
  .native-hd-cards{grid-template-columns:1fr;width:94%;margin-top:-30px;gap:11px}
  .feature-card{min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  .feature-card{transition:none}
}


/* ============================================================
   APPROVED UHD CARD ART + LOOPING CINEMATIC ENTRANCES
   ============================================================ */
.living-light{display:none!important;animation:none!important;background:none!important}

.cards-stage{
  position:relative;
  z-index:8;
  width:100%;
  margin:-58px auto 0;
  padding:18px clamp(14px,1.7vw,30px) 22px;
  overflow:hidden;
  isolation:isolate;
  background:#020711;
}
.cards-gradient{
  position:absolute;
  z-index:-2;
  inset:-65%;
  background:linear-gradient(115deg,
    #006dff 0%,
    #00bfff 17%,
    #f4c64f 39%,
    #ff9f1c 57%,
    #061735 78%,
    #007dff 100%);
  background-size:300% 300%;
  animation:yaGradientFlow 7s linear infinite;
  filter:saturate(1.25) brightness(.78);
}
.cards-stage::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,rgba(0,4,12,.22),rgba(0,5,14,.68));
  pointer-events:none;
}
@keyframes yaGradientFlow{
  0%{background-position:0% 50%;transform:translate3d(-4%,0,0) rotate(0.001deg)}
  50%{background-position:100% 50%;transform:translate3d(4%,0,0) rotate(0.001deg)}
  100%{background-position:0% 50%;transform:translate3d(-4%,0,0) rotate(0.001deg)}
}
.approved-card-grid{
  width:min(1560px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  perspective:1500px;
}
.approved-card{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:10px;
  opacity:0;
  will-change:transform,opacity,filter;
  transform-origin:center;
  box-shadow:0 18px 42px rgba(0,0,0,.55);
}
.approved-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  transition:transform .35s ease,filter .35s ease;
}
.approved-card:hover img{transform:scale(1.025);filter:brightness(1.08) saturate(1.08)}

/* JS adds .play in sequence; every card uses a different entrance. */
.entrance-slide{transform:translate3d(-125%,0,0) rotateY(-18deg) scale(.92);filter:blur(8px)}
.entrance-drop{transform:translate3d(0,-145%,0) rotateX(18deg) scale(.92);filter:blur(8px)}
.entrance-rise{transform:translate3d(0,145%,0) rotateX(-18deg) scale(.92);filter:blur(8px)}
.entrance-cinematic{transform:scale(.58) rotateY(18deg);filter:blur(14px) brightness(1.65)}
.entrance-card.play{animation:cardArrival 1.05s cubic-bezier(.16,.88,.22,1.08) forwards}
@keyframes cardArrival{
  0%{opacity:0}
  62%{opacity:1;filter:blur(0) brightness(1.18)}
  82%{transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1.035);filter:blur(0) brightness(1.15)}
  100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1);filter:blur(0) brightness(1)}
}
.approved-card.hold{opacity:1;transform:none;filter:none}
.approved-card.exit{animation:cardReset .55s ease-in forwards}
@keyframes cardReset{to{opacity:0;transform:scale(.92);filter:blur(6px)}}

@media(max-width:1180px){
  .approved-card-grid{grid-template-columns:repeat(2,1fr)}
  .cards-stage{margin-top:-42px}
}
@media(max-width:680px){
  .approved-card-grid{grid-template-columns:1fr;gap:12px}
  .cards-stage{margin-top:-30px;padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){
  .cards-gradient{animation:none;background-position:50% 50%}
  .approved-card{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
}