/*
Theme Name: ELITE
Theme URI: https://example.com/
Author: ELITE, Inc.
Description: Dark brushed-metal financial front page with an animated metallic card hero, centered menu and full homepage sections.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elite
*/

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#050506}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:#050506;
  color:#eceef1;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

:root{
  --text:#eceef1;
  --muted:#8b8e96;
  --dim:#5f636b;
  --line:rgba(255,255,255,.09);
  --panel:#0e0f12;
  --plat:#e6e8ec;
  --w:min(78vw,520px,78vh);
  --rx:0deg;
  --ry:0deg;
  --sx:50;
  --bgx:50%;
  --bgy:50%;
  --ang:200deg;
  --grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{width:min(1320px,90%);margin:0 auto}

/* ============ reveal ============ */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}

/* ============ header ============ */
.bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px clamp(20px,4vw,52px);
  transition:background .4s ease,padding .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.bar.scrolled{
  padding:16px clamp(20px,4vw,52px);
  background:rgba(5,5,6,.72);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.menu{display:flex;gap:clamp(18px,2.8vw,42px)}
.menu a{
  position:relative;
  padding:6px 0;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--muted);
  transition:color .25s;
}
.menu a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--plat);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.menu a:hover,.menu a:focus-visible{color:#fff;outline:none}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}

.burger{
  display:none;position:relative;
  width:42px;height:42px;
  background:none;border:0;cursor:pointer;
}
.burger span{
  position:absolute;left:10px;right:10px;height:1.5px;
  background:#f2f3f5;
  transition:transform .3s ease,top .3s ease;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:25px}
.bar.open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
.bar.open .burger span:nth-child(2){top:20px;transform:rotate(-45deg)}

/* ============ hero ============ */
.stage{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1600px;
  overflow:hidden;
  background:
    radial-gradient(52% 46% at 50% 42%,rgba(190,200,215,.12),transparent 72%),
    radial-gradient(70% 30% at 50% 100%,rgba(255,255,255,.045),transparent 70%),
    #050506;
}
.stage::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(90% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.7));
}
.pool{
  position:absolute;left:50%;top:50%;
  width:calc(var(--w) * 1.35);
  height:calc(var(--w) * .24);
  transform:translate(-50%,calc(var(--w) * .4));
  background:radial-gradient(closest-side,rgba(190,200,215,.11),transparent);
  filter:blur(18px);
}
.floor{
  position:absolute;left:50%;top:50%;
  width:calc(var(--w) * .82);
  height:calc(var(--w) * .06);
  transform:translate(-50%,calc(var(--w) * .42));
  background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.35) 60%,transparent);
  filter:blur(10px);
  animation:floor 8s ease-in-out infinite;
}
.scene{
  position:relative;
  width:var(--w);
  height:calc(var(--w) / 1.586);
  transform-style:preserve-3d;
  animation:rise 1.8s cubic-bezier(.2,.7,.1,1) both;
}
.rig{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
}
.float{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  animation:float 8s ease-in-out infinite;
}
.card{
  position:absolute;inset:0;
  border-radius:calc(var(--w) * .045);
  overflow:hidden;
  background:linear-gradient(115deg,#08090b 0%,#18191d 20%,#050506 34%,#2d2f36 47%,#0a0b0d 59%,#1d1e23 75%,#060607 100%);
  background-size:260% 260%;
  background-position:var(--bgx) var(--bgy);
  box-shadow:
    0 50px 90px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.8);
}
.card::before{
  content:"";
  position:absolute;inset:0;z-index:5;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--ang),
    rgba(255,255,255,.9),
    rgba(255,255,255,.14) 14%,
    rgba(255,255,255,.05) 35%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.1) 64%,
    rgba(255,255,255,.05) 85%,
    rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.card::after{
  content:"";
  position:absolute;inset:0;z-index:4;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode:overlay;
  background:var(--grain) center/cover;
}
.gloss{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  background:linear-gradient(115deg,
    transparent calc(var(--sx) * 1% - 16%),
    rgba(255,255,255,.075) calc(var(--sx) * 1% - 16%),
    rgba(255,255,255,.075) calc(var(--sx) * 1% + 3%),
    transparent calc(var(--sx) * 1% + 3%));
}
.iris,.sheen{
  position:absolute;inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.iris{
  z-index:1;
  background:linear-gradient(120deg,rgba(150,175,210,.10),transparent 40%,rgba(215,205,195,.08) 75%,transparent);
  background-size:220% 220%;
  background-position:var(--bgx) var(--bgy);
}
.sheen{
  z-index:3;
  background:
    linear-gradient(115deg,transparent calc(var(--sx) * 1% - 26%),rgba(255,255,255,.10) calc(var(--sx) * 1%),transparent calc(var(--sx) * 1% + 26%)),
    linear-gradient(115deg,transparent calc(var(--sx) * 1% + 5%),rgba(255,255,255,.5) calc(var(--sx) * 1% + 5.6%),transparent calc(var(--sx) * 1% + 6.4%)),
    radial-gradient(110% 80% at 15% 0%,rgba(255,255,255,.07),transparent 55%);
}
.logo{
  position:absolute;
  left:calc(var(--w) * .08);
  top:calc(var(--w) * .07);
  z-index:2;
  font-weight:400;
  font-size:calc(var(--w) * .042);
  line-height:1;
  letter-spacing:.56em;
  background:linear-gradient(115deg,#7f838c 0%,#f6f7f9 30%,#8b8f98 50%,#eceef1 70%,#7a7e87 100%);
  background-size:250% 100%;
  background-position:var(--bgx) 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
  user-select:none;
  pointer-events:none;
}
.enter{
  position:absolute;
  left:50%;
  bottom:clamp(26px,6vh,58px);
  z-index:10;
  transform:translateX(-50%);
  padding:17px 38px 17px calc(38px + .42em);
  font-size:13px;
  font-weight:700;
  letter-spacing:.42em;
  color:#e9ebef;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.enter:hover,.enter:focus-visible{
  outline:none;
  color:#0b0b0d;
  background:var(--plat);
  border-color:var(--plat);
  box-shadow:0 0 40px rgba(220,226,238,.18);
}

/* ============ shared type ============ */
section{position:relative}
.label{
  font-size:13px;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:26px;
}
.big{
  font-size:clamp(44px,6.4vw,96px);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:700;
  color:var(--text);
}
.big .dim{color:var(--dim)}
.pad{padding:clamp(90px,12vw,170px) 0}

/* ============ stats ============ */

/* ============ intro ============ */
.intro-grid{
  display:grid;
  grid-template-columns:.6fr 1.4fr;
  gap:80px;
}
.intro .label{margin:12px 0 0}

/* ============ platform ============ */
.platform-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:56px;
}
.platform-head p{
  width:320px;
  flex:none;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.panel{
  position:relative;
  overflow:hidden;
  min-height:500px;
  padding:36px;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(145deg,#1a1b1f,#0e0f12 60%,#131418);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .5s ease;
}
.panel::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 60%);
}
.panel::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:overlay;
  background:var(--grain) center/cover;
}
.panel:hover{transform:translateY(-6px)}
.panel:hover::before{opacity:1}
.panel > *{position:relative;z-index:1}
.panel.black{background:linear-gradient(145deg,#0b0b0d,#050506)}
.panel.plat{
  background:linear-gradient(115deg,#aeb2ba 0%,#eceef1 28%,#b9bdc4 50%,#f3f4f6 72%,#a4a8b0 100%);
  color:#0b0b0d;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.7);
}
.panel.plat::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 60%)}
.panel .tag{font-size:13px;color:var(--muted);letter-spacing:.04em}
.panel.plat .tag{color:#3a3d43}
.panel h3{
  font-size:clamp(32px,3.3vw,46px);
  line-height:.96;
  letter-spacing:-.05em;
  font-weight:700;
  max-width:380px;
}
.panel p{margin-top:22px;color:var(--muted);line-height:1.6;max-width:350px;font-size:15px}
.panel.plat p{color:#2a2c31}
.panel .go{font-size:13px;font-weight:700;letter-spacing:.1em;margin-top:24px}

/* ============ market ============ */
.market{
  background:linear-gradient(180deg,#070708,#0b0c0e 50%,#070708);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.market .big{max-width:1000px}
.chart-wrap{
  margin-top:72px;
  padding:30px;
  border-radius:22px;
  background:linear-gradient(145deg,#141519,#0b0c0e);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
}
.chart-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:34px;
}
.chart-name{font-size:13px;color:var(--muted);letter-spacing:.04em}
.chart{height:clamp(220px,28vw,340px)}
.chart svg{width:100%;height:100%;display:block}
.grid-lines line{stroke:rgba(255,255,255,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.area{fill:url(#areaFill)}
.line{
  fill:none;
  stroke:#e6e8ec;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.area{opacity:0;transition:opacity 1.6s ease .8s}
.chart.in .line{animation:draw 2.6s ease forwards}
.chart.in .area{opacity:1}

/* ============ capital ============ */
.capital-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  align-items:center;
}
.capital-copy{font-size:18px;color:var(--muted);line-height:1.6;max-width:520px}
.capital-copy p + p{margin-top:24px}
.list{margin-top:44px;border-top:1px solid var(--line)}
.list a{
  display:flex;
  justify-content:space-between;
  padding:22px 0;
  font-size:15px;
  border-bottom:1px solid var(--line);
  transition:padding .3s ease,color .3s ease;
}
.list a span:last-child{color:var(--dim);transition:color .3s ease}
.list a:hover{padding-left:12px;color:#fff}
.list a:hover span:last-child{color:#fff}

/* ============ global ============ */
.global{
  background:linear-gradient(180deg,#070708,#0b0c0e);
  border-top:1px solid var(--line);
}
.map{
  position:relative;
  height:clamp(300px,42vw,470px);
  margin-top:64px;
}
.map-dots{
  position:absolute;inset:0;
  border-radius:50%;
  background-image:radial-gradient(rgba(255,255,255,.26) 1px,transparent 1.5px);
  background-size:14px 14px;
  -webkit-mask:radial-gradient(ellipse at center,#000 50%,transparent 72%);
  mask:radial-gradient(ellipse at center,#000 50%,transparent 72%);
}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map svg path{
  fill:none;
  stroke:rgba(230,232,236,.4);
  stroke-width:1;
  stroke-dasharray:3 5;
  vector-effect:non-scaling-stroke;
}
.city{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  color:#dfe1e6;
  transform:translate(-4px,-50%);
}
.city::before{
  content:"";
  flex:none;
  width:8px;height:8px;
  border-radius:50%;
  background:#f2f3f5;
  box-shadow:0 0 0 0 rgba(230,232,236,.4);
  animation:ping 3.6s ease-out infinite;
}
.ny{left:19%;top:34%}
.london{left:46%;top:24%}
.zurich{left:49%;top:36%}
.singapore{left:74%;top:61%}
.bermuda{left:32%;top:50%}

/* ============ clients ============ */
.client-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:80px;
  border-top:1px solid var(--line);
}
.client{
  position:relative;
  min-height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  color:#c8cbd2;
  transition:background .4s ease,color .4s ease;
}
.client:nth-child(3n){border-right:0}
.client:hover{background:rgba(255,255,255,.035);color:#fff}

/* ============ cta ============ */
.cta{padding:0 0 clamp(90px,12vw,170px)}
.slab{
  position:relative;
  overflow:hidden;
  padding:clamp(48px,8vw,120px);
  border-radius:28px;
  color:#0b0b0d;
  background:linear-gradient(115deg,#aeb2ba 0%,#eceef1 26%,#b9bdc4 48%,#f3f4f6 70%,#a4a8b0 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.8),0 60px 120px -40px rgba(0,0,0,.9);
}
.slab::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.28;
  mix-blend-mode:overlay;
  background:var(--grain) center/cover;
}
.slab > *{position:relative;z-index:1}
.slab h2{
  font-size:clamp(52px,8.4vw,132px);
  line-height:.88;
  letter-spacing:-.06em;
  font-weight:700;
  max-width:1000px;
}
.slab-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-top:64px;
}
.slab-bottom p{max-width:400px;line-height:1.55;font-size:16px;color:#2a2c31}
.btn-dark{
  flex:none;
  padding:19px 32px;
  border-radius:999px;
  background:#0b0b0d;
  color:#f2f3f5;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  transition:transform .3s ease,background .3s ease;
}
.btn-dark:hover{transform:translateY(-2px);background:#1b1c20}

/* ============ footer ============ */
footer{
  background:#050506;
  border-top:1px solid var(--line);
  padding:72px 0 36px;
}
.foot-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:96px;
}
.foot-logo{font-size:26px;font-weight:800;letter-spacing:.3em}
.foot-desc{margin-top:24px;max-width:330px;color:var(--muted);font-size:13px;line-height:1.6}
.foot-col h4{
  font-size:13px;
  font-weight:400;
  color:var(--dim);
  letter-spacing:.06em;
  margin-bottom:20px;
}
.foot-col a{display:block;font-size:14px;margin-bottom:12px;color:#b9bcc3;transition:color .25s}
.foot-col a:hover{color:#fff}
.foot-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:26px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:12px;
}

/* ============ motion ============ */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(26px) scale(.94)}to{transform:none}}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@keyframes floor{
  0%,100%{transform:translate(-50%,calc(var(--w) * .42)) scale(1.03);opacity:.95}
  50%{transform:translate(-50%,calc(var(--w) * .42)) scale(.92);opacity:.7}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(230,232,236,.45)}
  70%,100%{box-shadow:0 0 0 14px rgba(230,232,236,0)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .float,.floor,.scene,.city::before{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .line{stroke-dashoffset:0}
  .area{opacity:1}
}

/* ============ responsive ============ */
@media (max-width:900px){
  .burger{display:block}
  .menu{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    gap:0;
    padding:6px clamp(20px,4vw,52px) 20px;
    background:rgba(6,6,7,.96);
    border-bottom:1px solid var(--line);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  .bar.open .menu{opacity:1;visibility:visible;transform:none}
  .menu a{padding:15px 0;font-size:15px;border-bottom:1px solid rgba(255,255,255,.06)}
  .menu a::after{display:none}


  .intro-grid,.capital-grid{grid-template-columns:1fr;gap:44px}
  .platform-head{display:block}
  .platform-head p{width:auto;margin-top:24px}
  .cards{grid-template-columns:1fr}
  .panel{min-height:420px}
  .client-grid{grid-template-columns:1fr 1fr}
  .client:nth-child(3n){border-right:1px solid var(--line)}
  .client:nth-child(2n){border-right:0}
  .slab-bottom{display:block}
  .slab-bottom .btn-dark{display:inline-block;margin-top:30px}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top > div:first-child{grid-column:1/-1}
  .foot-bottom{display:block;line-height:1.8}
  .city{font-size:10px;gap:6px}
}
@media (max-width:560px){
  .client-grid{grid-template-columns:1fr}
  .client{border-right:0 !important;min-height:120px}
  .chart-wrap{padding:20px}
}

/* ============ wordpress extras ============ */
.admin-bar .bar{top:32px}
@media (max-width:782px){.admin-bar .bar{top:46px}}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important;
}
.page-wrap{padding:clamp(130px,16vw,200px) 0 clamp(80px,10vw,140px);min-height:70vh}
.entry{max-width:760px;margin:0 auto 80px}
.entry h1,.entry .entry-title{
  font-size:clamp(38px,5vw,68px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:700;
  margin-bottom:36px;
}
.entry h1 a,.entry .entry-title a{color:inherit}
.entry h2,.entry h3,.entry h4{letter-spacing:-.03em;margin:1.6em 0 .6em;font-weight:700}
.entry p,.entry li{color:var(--muted);line-height:1.75;font-size:17px}
.entry p,.entry ul,.entry ol{margin-bottom:1.4em}
.entry ul,.entry ol{padding-left:1.3em}
.entry a{color:#fff;border-bottom:1px solid var(--dim)}
.entry img{max-width:100%;height:auto;border-radius:12px}
.entry blockquote{border-left:1px solid var(--dim);padding-left:22px;margin:1.6em 0}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{display:block;margin:0 auto 1em}
.wp-caption-text{font-size:13px;color:var(--dim)}
.navigation.pagination{max-width:760px;margin:0 auto}
.navigation.pagination a,.navigation.pagination span{margin-right:14px;color:var(--muted)}