:root{--deep:#0F0914;--coral:#9A0E84;--neon:#E11CC0;--sun:#F2A7E6;--mist:#F9E9F6;--ink:#1B1220;--line:#E6DDE9}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:"Bricolage Grotesque","Cairo",system-ui,sans-serif;color:var(--ink);line-height:1.65;font-size:1.0625rem;overflow-x:hidden}
img,video{max-width:100%;display:block}a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.w{max-width:1080px;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.8rem,9vw,5.6rem);font-weight:800;max-width:13ch}
h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;margin-bottom:1rem}
section{padding:4rem 0}
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:999px;font:inherit;font-weight:600;text-decoration:none;background:var(--coral);color:#fff;border:2px solid var(--coral);cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(225,28,192,.38)}
.btn.o{background:none;border-color:var(--coral);color:var(--coral)}
.btn.o:hover{background:var(--mist);box-shadow:none}
.bar{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:9}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;flex-wrap:wrap;padding-block:.4rem}
.nav img{height:64px;width:auto}
.nav ul{display:flex;gap:1.3rem;list-style:none;padding:0;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:600}.nav a:hover,.nav a.on{color:var(--coral)}
.lg button{font:inherit;font-weight:600;border:1px solid var(--line);background:#fff;padding:.25rem .7rem;border-radius:6px;cursor:pointer}
.lg button.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.hero{background:linear-gradient(135deg,#0F0914 0%,#2A0C33 55%,#7A0A68 100%);color:#fff;padding:5rem 0 3.5rem;position:relative;overflow:hidden}
.hero .w{position:relative;z-index:1}
.hero p{max-width:48ch;margin:1.2rem 0 2rem;font-size:1.2rem;color:#EBD9F0}
.hero .btn{background:var(--neon);border-color:var(--neon)}.hero .btn.o{background:none;border-color:#fff;color:#fff}.hero .btn.o:hover{background:rgba(255,255,255,.12)}
.b{position:absolute;border-radius:50%;filter:blur(2px);animation:fl 9s ease-in-out infinite alternate}
.b1{width:360px;height:360px;background:var(--neon);opacity:.38;top:-90px;inset-inline-end:-60px}
.b2{width:220px;height:220px;background:var(--sun);opacity:.3;bottom:20px;inset-inline-end:28%;animation-delay:-3s}
.b3{width:140px;height:140px;border:10px solid var(--sun);opacity:.35;top:30%;inset-inline-end:8%;animation-delay:-6s}
@keyframes fl{to{transform:translate(-30px,40px) scale(1.12)}}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.mq{direction:ltr;overflow:hidden;background:linear-gradient(90deg,#F2A7E6,#E8B5F5);color:var(--deep);padding:.8rem 0;font-weight:800;font-size:1.4rem;white-space:nowrap}
.mq div{display:inline-block;animation:mq 22s linear infinite}
.mq span{margin:0 1.6rem}.mq i{font-style:normal;color:var(--coral)}
@keyframes mq{to{transform:translateX(-50%)}}
.stats{padding:2.5rem 0}
.stats ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem}
.stats b{display:block;font-size:2.7rem;color:var(--coral);font-weight:800;line-height:1}
.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;margin-top:1.5rem}
.g>div{transition:transform .25s}.g>div:hover{transform:translateY(-6px)}
.g h3{border-top:4px solid var(--sun);padding-top:.7rem;margin-bottom:.3rem}
.dark{background:linear-gradient(135deg,#0F0914,#24092C);color:#fff}
.dark ol{list-style:none;padding:0;counter-reset:s;margin:1.5rem 0 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem}
.dark li{counter-increment:s;position:relative;padding-inline-start:3.2rem}
.dark li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--sun);color:var(--ink);font-weight:800;display:grid;place-items:center}
.vid{background:var(--mist)}.vid .w{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;align-items:center}
video{width:100%;max-width:420px;border-radius:14px;background:#000;box-shadow:12px 12px 0 var(--sun)}
.ph{padding:3rem 0;background:var(--mist);border-bottom:6px solid var(--coral)}
.ph h1{font-size:clamp(2.2rem,7vw,4rem)}
ul.t{padding-inline-start:1.2rem;margin-top:.6rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:3rem}
.d{padding:2.5rem 0;border-top:2px solid var(--line);display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:1rem 2.5rem;align-items:start}
.d h2{font-size:clamp(2rem,5vw,3.2rem);color:var(--deep);margin:0;position:relative}
.d h2::after{content:"";display:block;width:48px;height:5px;background:var(--coral);margin-top:.6rem;border-radius:3px}
.d p{max-width:62ch;font-size:1.15rem}
@media(max-width:640px){.d{grid-template-columns:1fr}}
form{display:grid;gap:1rem;max-width:560px}label{font-weight:600;display:grid;gap:.3rem}
input,textarea{font:inherit;padding:.8rem 1rem;border:2px solid var(--line);border-radius:10px;width:100%}
input:focus,textarea:focus{border-color:var(--coral);outline:none}textarea{min-height:140px}
form .btn{justify-self:start}
footer{background:var(--deep);color:#e4d9e8;padding:2.5rem 0;font-size:.95rem}footer .w{display:grid;gap:.3rem}footer a{color:#fff}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.b,.mq div{animation:none}.js .rv{opacity:1;transform:none;transition:none}}

[hidden]{display:none!important}
.lg button{font-size:.78rem;padding:.1rem .5rem;border-radius:5px}
.nav a{padding:.3rem 0}
@media(max-width:640px){
body{font-size:1rem}
.nav{padding-block:.3rem}.nav img{height:46px}
.nav ul{order:3;width:100%;justify-content:space-between;gap:.5rem;font-size:.95rem;padding-bottom:.2rem}
.hero{padding:3rem 0 2.5rem}.hero p{font-size:1.05rem}.b1{width:220px;height:220px;top:-70px}.b3{display:none}
section{padding:2.75rem 0}.ph{padding:2rem 0}
.row .btn{flex:1 1 100%;text-align:center}
.stats ul{grid-template-columns:1fr 1fr;gap:1.2rem}.stats b{font-size:2.1rem}
.mq{font-size:1.1rem}video{box-shadow:7px 7px 0 var(--sun)}
.d{padding:1.8rem 0}.two{gap:2rem}form .btn{justify-self:stretch}
}
.lg{display:flex;gap:.3rem}.lg a{font-size:.78rem;font-weight:600;border:1px solid var(--line);padding:.1rem .5rem;border-radius:5px;text-decoration:none}.nav .lg a{padding:.1rem .5rem}.lg a.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.hero .eb{font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sun);font-weight:600;max-width:none}
.hero .sl{font-size:clamp(2.8rem,9vw,5.6rem);font-weight:800;line-height:1.1;max-width:13ch;margin:.5rem 0 0;color:#fff;letter-spacing:-.01em}
.hero .sl+p{margin-top:1.2rem}
@media(max-width:640px){.hero .eb{font-size:.8rem}}
[dir=rtl] .stats b{direction:ltr;text-align:right}

/* La Vida platform harmony */
.nav .btn.lgin{padding:.45rem 1.15rem;font-size:.92rem;box-shadow:0 0 0 0 rgba(225,28,192,0)}
.nav a.btn:hover,.nav a.btn.on{color:#fff}
.nav a:hover,.nav a.on{color:var(--coral)}
.btn:not(.o){background-image:linear-gradient(135deg,#9A0E84,#C0159F)}
.hero .btn:not(.o){background-image:linear-gradient(135deg,#C0159F,#E11CC0)}
.g>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.3rem;box-shadow:0 1px 2px rgba(15,9,20,.04)}
.g>div:hover{box-shadow:0 12px 30px -10px rgba(225,28,192,.35);border-color:rgba(154,14,132,.35)}
.g h3{border-top:0;padding-top:0}
.g h3::before{content:"";display:block;width:34px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--neon));margin-bottom:.7rem}
video{box-shadow:12px 12px 0 var(--sun),0 0 50px -10px rgba(225,28,192,.5)}
.dark li::before{background:var(--neon);color:#fff}
footer .lgin-f{display:inline-block;margin-top:.4rem;padding:.35rem 1rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;text-decoration:none;justify-self:start}
footer .lgin-f:hover{background:rgba(255,255,255,.1)}
@media(max-width:640px){.nav .btn.lgin{padding:.35rem .9rem;font-size:.85rem}}
