/* ==========================================================================
   RDV Entertainment — Design System
   Brand: orange #F97316 · purple #7A2BA6 · yellow #F5D021 on charcoal
   ========================================================================== */

:root{
  --ink:#17161B;
  --ink-2:#1F1E25;
  --ink-3:#2A2932;
  --paper:#ECEAF0;
  --paper-2:#F6F5F8;
  --white:#FFFFFF;

  --orange:#F97316;
  --orange-soft:#FF9A44;
  --purple:#7A2BA6;
  --purple-soft:#A855D6;
  --yellow:#F5D021;

  --txt-on-dark:#FFFFFF;
  --txt-on-dark-dim:rgba(255,255,255,.62);
  --txt-on-light:#17161B;
  --txt-on-light-dim:rgba(23,22,27,.62);

  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(23,22,27,.12);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shell:min(1280px, 100% - 48px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--txt-on-dark);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
::selection{background:var(--orange); color:#fff}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.02}
.display{font-size:clamp(2.6rem,7.2vw,6.2rem)}
.h1{font-size:clamp(2.2rem,5.4vw,4.6rem)}
.h2{font-size:clamp(1.9rem,4vw,3.4rem); line-height:1.06}
.h3{font-size:clamp(1.25rem,2vw,1.75rem); letter-spacing:-.02em; line-height:1.15}
.serif{font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.02em}
.lead{font-size:clamp(1.02rem,1.35vw,1.22rem); line-height:1.62; color:var(--txt-on-dark-dim); max-width:56ch}
.on-light .lead{color:var(--txt-on-light-dim)}
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange); margin:0 0 18px;
}
.on-light .eyebrow{color:var(--purple)}
p{margin:0 0 1em}

/* ---------- layout ---------- */
.shell{width:var(--shell); margin-inline:auto}
.section{padding:clamp(72px,9vw,140px) 0; position:relative}
.section.tight{padding:clamp(56px,6vw,92px) 0}
.on-light{background:var(--paper); color:var(--txt-on-light)}
.on-light h1,.on-light h2,.on-light h3{color:var(--txt-on-light)}
.on-ink-2{background:var(--ink-2)}
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.split{display:grid; gap:clamp(32px,5vw,80px); grid-template-columns:1fr 1fr; align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
@media(max-width:900px){ .split,.split.wide-left{grid-template-columns:1fr} }

/* ---------- header ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:80;
  padding:14px 0;
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.site-head.solid{
  background:rgba(19,18,23,.82); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-dark);
}
.head-row{display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.brand img{height:42px; width:auto; border-radius:9px; background:#fff; padding:5px 8px; object-fit:contain}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-size:1.02rem; font-weight:800; letter-spacing:-.02em}
.brand-txt span{font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--txt-on-dark-dim); margin-top:4px}

.nav{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav a{
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82); position:relative; padding:6px 0; transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .4s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.active::after{right:0}
.nav a.active{color:#fff}
.nav .nav-cta{display:none}

.head-cta{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.burger{
  display:none; width:44px; height:40px; border:1px solid var(--line-dark); background:transparent;
  border-radius:var(--r-sm); color:#fff; cursor:pointer; align-items:center; justify-content:center;
}
.burger span{display:block; width:18px; height:2px; background:#fff; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; transition:transform .3s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1080px){
  .nav{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(17,16,21,.97); backdrop-filter:blur(20px);
    padding:8px 24px 26px; border-bottom:1px solid var(--line-dark);
    transform:translateY(-130%); transition:transform .45s var(--ease); margin-left:0;
  }
  body.menu-open .nav{transform:translateY(0)}
  .nav a{width:100%; padding:15px 0; font-size:.9rem; letter-spacing:.1em; border-bottom:1px solid rgba(255,255,255,.07)}
  .nav .nav-cta{
    display:block; text-align:center; margin-top:18px; border-bottom:none;
    background:var(--orange); color:#fff; border-radius:var(--r-pill); padding:15px 20px;
    font-size:.78rem; letter-spacing:.12em;
  }
  .nav .nav-cta::after{display:none}
  .burger{display:inline-flex}
  .head-cta{margin-left:auto}
  .head-cta .btn-ghost{display:none}
}
@media(max-width:620px){
  .head-cta .btn-primary{display:none}
  .brand img{height:36px}
  .brand-txt b{font-size:.92rem}
  .nav{inset:66px 0 auto 0}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 26px; border-radius:var(--r-pill); border:1px solid transparent;
  font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 10px 30px -12px rgba(249,115,22,.9)}
.btn-primary:hover{background:#ff8730}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:var(--yellow)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.on-light .btn-ghost{color:var(--ink); border-color:rgba(23,22,27,.24)}
.on-light .btn-ghost:hover{background:rgba(23,22,27,.06); border-color:var(--ink)}
.btn-sm{padding:11px 20px; font-size:.7rem}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:min(94vh,880px); display:flex; align-items:flex-end;
  padding:150px 0 clamp(48px,7vw,88px);
  background:linear-gradient(135deg,#241a2e,#17161B 55%,#2b1a10);
  overflow:hidden;
}
.hero.compact{min-height:min(64vh,560px)}
.hero-media{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.72}

/* rotating hero slideshow */
.hero-media.slides img{
  position:absolute; inset:0; opacity:0;
  transform:scale(1.02); transform-origin:center;
  transition:opacity 1.5s var(--ease), transform 8s linear;
  will-change:opacity, transform;
}
.hero-media.slides img:not(.on){transition:opacity 1.5s var(--ease), transform 0s linear 1.5s}
.hero-media.slides img.on{opacity:.72; transform:scale(1.09)}
.hero-dots{display:flex; gap:9px; margin-top:42px}
.hero-dots button{
  width:26px; height:3px; border:none; padding:0; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.28); transition:background .4s, width .4s var(--ease);
}
.hero-dots button.on{background:var(--orange); width:44px}
@media(max-width:760px){ .hero-dots{margin-top:32px} }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top,rgba(17,16,21,.97) 4%,rgba(17,16,21,.62) 42%,rgba(17,16,21,.35) 70%,rgba(17,16,21,.75) 100%),
    linear-gradient(105deg,rgba(122,43,166,.5),transparent 46%,rgba(249,115,22,.34));
}
.hero-inner{position:relative; z-index:2}
.hero .display{max-width:16ch}
.hero .display em{font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:300; color:var(--yellow)}
.hero .lead{margin-top:24px; color:rgba(255,255,255,.8)}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  padding:8px 16px 8px 10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px);
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.hero-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(245,208,33,.22)}
.scroll-hint{
  position:absolute; right:96px; bottom:34px; z-index:3;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:12px;
}
.scroll-hint i{display:block; width:52px; height:1px; background:rgba(255,255,255,.4); position:relative; overflow:hidden}
.scroll-hint i::after{content:""; position:absolute; inset:0; background:var(--orange); animation:swipe 2.4s var(--ease) infinite}
@keyframes swipe{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(max-width:760px){ .scroll-hint{display:none} }

/* page hero (inner pages) */
.page-hero{position:relative; padding:170px 0 clamp(48px,6vw,80px); overflow:hidden; background:var(--ink-2)}
.page-hero .crumb{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:16px}
.page-hero .lead{margin-top:20px}

/* ---------- stat rail ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border-block:1px solid var(--line-dark)}
.stats div{background:var(--ink); padding:30px 26px}
.stats b{display:block; font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:800; letter-spacing:-.04em; line-height:1}
.stats b .u{color:var(--orange)}
.stats b span{display:inline; font:inherit; letter-spacing:inherit; text-transform:none; margin:0}
.stats > div > span{display:block; margin-top:8px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-on-dark-dim)}
@media(max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* ---------- marquee ---------- */
.marquee{position:relative; overflow:hidden; padding:26px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee-track{display:flex; gap:14px; width:max-content; animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.plat-chip{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  height:64px; min-width:152px; padding:0 22px;
  background:#fff; border-radius:14px;
  box-shadow:0 8px 24px -18px rgba(0,0,0,.9);
}
.plat-chip img{height:26px; width:auto; object-fit:contain}
.marquee-label{
  text-align:center; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-on-dark-dim); margin-bottom:22px;
}
.on-light .marquee-label{color:var(--txt-on-light-dim)}
.on-light .plat-chip{box-shadow:0 10px 26px -20px rgba(0,0,0,.6); border:1px solid var(--line-light)}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.chip{
  padding:9px 18px; border-radius:var(--r-pill); font-size:.9rem; font-weight:600;
  background:#fff; color:var(--ink); transition:transform .3s var(--ease), background .3s;
}
.chip:hover{transform:translateY(-3px); background:var(--yellow)}
.chip.dark{background:var(--ink); color:#fff}
.chip.outline{background:transparent; border:1px solid var(--line-dark); color:#fff}
.on-light .chip.outline{border-color:var(--line-light); color:var(--ink)}

/* stacked centered chip list (AWAL-style promise) */
.promise{text-align:center}
.promise .h2{margin-bottom:38px}
.promise-list{display:flex; flex-direction:column; align-items:center; gap:12px}
.promise-list span{
  background:#fff; color:var(--ink); padding:11px 24px; border-radius:var(--r-pill);
  font-size:clamp(.95rem,1.5vw,1.15rem); font-weight:600;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.promise-list span:hover{transform:scale(1.04); box-shadow:0 16px 40px -22px rgba(255,255,255,.7)}

/* ---------- cards ---------- */
.grid{display:grid; gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} }

.card{
  background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--r-lg);
  padding:30px 28px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.card:hover{transform:translateY(-6px); border-color:rgba(249,115,22,.55)}
.card .num{
  font-size:.68rem; letter-spacing:.2em; color:var(--orange); font-weight:800; display:block; margin-bottom:16px;
}
.card h3{margin-bottom:12px}
.card p{color:var(--txt-on-dark-dim); font-size:.96rem; margin:0}
.card .ic{
  --c1:var(--orange); --c2:#FBBF24;
  width:64px; height:64px; border-radius:19px; display:grid; place-items:center; margin-bottom:24px;
  background:linear-gradient(140deg,var(--c1),var(--c2));
  box-shadow:0 14px 30px -16px var(--c1);
  transition:transform .45s var(--ease), box-shadow .45s;
}
.card:hover .ic{transform:translateY(-3px) rotate(-4deg); box-shadow:0 18px 34px -14px var(--c1)}
.card .ic svg{width:30px; height:30px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* a different colour per card, cycling through nine hues */
.grid .card:nth-child(9n+1) .ic{--c1:#F97316; --c2:#FBBF24}
.grid .card:nth-child(9n+2) .ic{--c1:#7A2BA6; --c2:#C026D3}
.grid .card:nth-child(9n+3) .ic{--c1:#E11D48; --c2:#FB7185}
.grid .card:nth-child(9n+4) .ic{--c1:#0D9488; --c2:#2DD4BF}
.grid .card:nth-child(9n+5) .ic{--c1:#2563EB; --c2:#60A5FA}
.grid .card:nth-child(9n+6) .ic{--c1:#16A34A; --c2:#84CC16}
.grid .card:nth-child(9n+7) .ic{--c1:#DB2777; --c2:#F472B6}
.grid .card:nth-child(9n+8) .ic{--c1:#4F46E5; --c2:#818CF8}
.grid .card:nth-child(9n+9) .ic{--c1:#CA8A04; --c2:#FACC15}

.on-light .card{background:#fff; border-color:var(--line-light)}
.on-light .card p{color:var(--txt-on-light-dim)}
.on-light .card:hover{border-color:rgba(122,43,166,.45)}

/* feature card with photo */
.photo-card{border-radius:var(--r-lg); overflow:hidden; position:relative; background:var(--ink-2); border:1px solid var(--line-dark)}
.photo-card img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease)}
.photo-card:hover img{transform:scale(1.05)}
.photo-card .pc-body{padding:24px 26px 28px}
.photo-card h3{margin-bottom:10px}
.photo-card p{color:var(--txt-on-dark-dim); font-size:.94rem; margin:0}

/* ---------- artist rail ---------- */
.rail{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-item{
  position:relative; flex:0 0 clamp(220px,25vw,300px); aspect-ratio:3/4.1; border-radius:var(--r-md);
  overflow:hidden; scroll-snap-align:start; background:var(--ink-3);
}
.rail-item img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .5s}
.rail-item:hover img{transform:scale(1.06)}
.rail-item::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,9,13,.9) 6%,transparent 52%)}
.rail-item .meta{position:absolute; left:22px; bottom:20px; z-index:2}
.rail-item .meta b{display:block; font-size:1.12rem; font-weight:700; letter-spacing:-.01em}
.rail-item .meta span{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.66)}
.rail-nav{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.rail-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-dark); background:transparent;
  color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.rail-nav button:hover{background:var(--orange); border-color:var(--orange); transform:translateY(-2px)}
.on-light .rail-nav button{border-color:var(--line-light); color:var(--ink)}
.on-light .rail-nav button:hover{color:#fff}

/* ---------- big media band ---------- */
.band{position:relative; overflow:hidden; padding:clamp(90px,11vw,180px) 0; text-align:center}
.band-media{position:absolute; inset:0; z-index:0}
.band-media img{width:100%; height:100%; object-fit:cover; opacity:.5}
.band-media::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(122,43,166,.72),rgba(17,16,21,.82) 52%,rgba(249,115,22,.6))}
.band .shell{position:relative; z-index:2}
.band .lead{margin-inline:auto; color:rgba(255,255,255,.86)}

/* ---------- media frame ---------- */
.frame{position:relative; border-radius:var(--r-lg); overflow:hidden}
.frame img{width:100%; aspect-ratio:4/3.2; object-fit:cover}
.frame.tall img{aspect-ratio:3/4}
.frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); border-radius:var(--r-lg)}
.frame-tag{
  position:absolute; left:18px; bottom:18px; z-index:2;
  background:rgba(17,16,21,.72); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18);
  padding:10px 16px; border-radius:var(--r-pill); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.stack-media{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.stack-media .frame:first-child{margin-top:38px}

/* ---------- numbered list ---------- */
.steps{counter-reset:s; display:grid; gap:0; border-top:1px solid var(--line-dark)}
.steps li{
  counter-increment:s; list-style:none; display:grid; grid-template-columns:74px 1fr;
  gap:20px; padding:26px 0; border-bottom:1px solid var(--line-dark); align-items:start;
}
.steps li::before{
  content:"0" counter(s); font-size:.86rem; font-weight:800; letter-spacing:.14em; color:var(--orange);
  padding-top:5px;
}
.steps h3{margin-bottom:8px}
.steps p{margin:0; color:var(--txt-on-dark-dim); font-size:.96rem; max-width:62ch}
.on-light .steps{border-color:var(--line-light)}
.on-light .steps li{border-color:var(--line-light)}
.on-light .steps li::before{color:var(--purple)}
.on-light .steps p{color:var(--txt-on-light-dim)}
@media(max-width:620px){ .steps li{grid-template-columns:1fr; gap:6px} }

/* ---------- dashboard mock ---------- */
.mock{
  border-radius:20px; overflow:hidden; background:#131217; border:1px solid var(--line-dark);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
}
.mock-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; background:#0F0E13; border-bottom:1px solid var(--line-dark)}
.mock-bar i{width:10px; height:10px; border-radius:50%; background:#3a3945; display:block}
.mock-bar i:first-child{background:#F9736F} .mock-bar i:nth-child(2){background:var(--yellow)} .mock-bar i:nth-child(3){background:#5ED08A}
.mock-bar em{margin-left:12px; font-style:normal; font-size:.68rem; letter-spacing:.12em; color:rgba(255,255,255,.4)}
.mock-body{display:grid; grid-template-columns:180px 1fr; min-height:340px}
.mock-side{border-right:1px solid var(--line-dark); padding:18px 14px; background:#101015}
.mock-side u{
  display:block; text-decoration:none; font-size:.74rem; padding:9px 12px; border-radius:9px;
  color:rgba(255,255,255,.55); margin-bottom:4px;
}
.mock-side u.on{background:linear-gradient(90deg,rgba(249,115,22,.24),transparent); color:#fff; box-shadow:inset 2px 0 0 var(--orange)}
.mock-main{padding:20px 22px; display:grid; gap:14px; align-content:start}
.mock-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.mock-kpis div{background:#1A1922; border:1px solid var(--line-dark); border-radius:12px; padding:14px}
.mock-kpis small{display:block; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42)}
.mock-kpis b{display:block; font-size:1.28rem; margin-top:6px; letter-spacing:-.02em}
.mock-chart{background:#1A1922; border:1px solid var(--line-dark); border-radius:12px; padding:16px}
.mock-chart .bars{display:flex; align-items:flex-end; gap:9px; height:120px; margin-top:12px}
.mock-chart .bars i{flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--orange),rgba(122,43,166,.65)); display:block}
.mock-chart small{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42)}
@media(max-width:620px){ .mock-body{grid-template-columns:1fr} .mock-side{display:none} .mock-kpis{grid-template-columns:1fr} }

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line-light)}
.acc details{border-bottom:1px solid var(--line-light)}
.acc summary{
  list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; gap:20px;
  font-weight:700; font-size:clamp(1rem,1.5vw,1.16rem); letter-spacing:-.01em;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{flex:0 0 auto; width:26px; height:26px; position:relative}
.acc summary i::before,.acc summary i::after{content:""; position:absolute; background:var(--purple); border-radius:2px; transition:transform .3s var(--ease)}
.acc summary i::before{top:12px; left:4px; width:18px; height:2px}
.acc summary i::after{top:4px; left:12px; width:2px; height:18px}
.acc details[open] summary i::after{transform:scaleY(0)}
.acc .acc-body{padding:0 0 24px; color:var(--txt-on-light-dim); max-width:76ch}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,60px)}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.info-row{display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line-dark)}
.info-row .ic{width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid var(--line-dark)}
.info-row .ic svg{width:19px; height:19px; stroke:var(--yellow); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.info-row b{display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-on-dark-dim); font-weight:700; margin-bottom:6px}
.info-row a,.info-row p{font-size:1.06rem; font-weight:600; margin:0; color:#fff}
.info-row a:hover{color:var(--orange)}

.form{background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:clamp(24px,3vw,38px)}
.field{margin-bottom:16px}
.field label{display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-on-dark-dim); font-weight:700; margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; background:#15141A; border:1px solid var(--line-dark); color:#fff;
  padding:14px 16px; border-radius:12px; font-family:inherit; font-size:.98rem; transition:border-color .3s, background .3s;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--orange); background:#191821}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){ .field-row{grid-template-columns:1fr} }
.form-note{font-size:.8rem; color:var(--txt-on-dark-dim); margin:14px 0 0}
.form-msg{display:none; margin-top:16px; padding:14px 18px; border-radius:12px; background:rgba(245,208,33,.12); border:1px solid rgba(245,208,33,.4); font-size:.9rem}
.form-msg.show{display:block}

/* ---------- footer ---------- */
.foot{position:relative; background:var(--ink-2); padding:clamp(60px,7vw,96px) 0 34px; overflow:hidden}
.foot::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--yellow),var(--purple));
}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
@media(max-width:980px){ .foot-top{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .foot-top{grid-template-columns:1fr} }
.foot h4{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:20px; font-weight:800}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:11px}
.foot li a{color:var(--txt-on-dark-dim); font-size:.94rem; transition:color .25s}
.foot li a:hover{color:#fff}
.foot .brand{margin-bottom:18px}
.foot .fdesc{color:var(--txt-on-dark-dim); font-size:.94rem; max-width:38ch}
.foot-bottom{
  margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:.78rem; color:var(--txt-on-dark-dim);
}
.foot-bottom .credit a{color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,.28); transition:color .25s, border-color .25s}
.foot-bottom .credit a:hover{color:var(--orange); border-color:var(--orange)}
.to-top{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#fff}
.to-top:hover{color:var(--orange)}
.socials{display:flex; gap:10px}
.socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark); display:grid; place-items:center;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.socials a:hover{background:var(--orange); border-color:var(--orange); transform:translateY(-3px)}
.socials svg{width:17px; height:17px; fill:currentColor}

/* floating whatsapp */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 14px 34px -12px rgba(37,211,102,.8);
  transition:transform .3s var(--ease);
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:26px; height:26px; fill:currentColor}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.09s} .rv.d2{transition-delay:.18s} .rv.d3{transition-delay:.27s} .rv.d4{transition-delay:.36s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}