@import url("demos/destellos/destellos.css");
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage.woff") format("woff");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff") format("woff");font-weight:300 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#121014;--muted:#615C68;--blue:#2F5BFF;--magenta:#C058D6;--lilac:#F5F0FB;--line:#ECE8EF;--pad:clamp(20px,4vw,56px)}
body{font-family:"Figtree",system-ui,sans-serif;color:var(--ink);background:#fff;font-size:19px;font-weight:600;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.kh{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad)}
.mark{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;text-decoration:none}
.ig{font-weight:700;font-size:16px;text-decoration:none;color:var(--muted)}.ig:hover{color:var(--blue)}
main{padding:0 var(--pad)}
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100vh - 80px);padding:20px 0 60px}
.label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--blue))}
h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(56px,8vw,120px);line-height:.92;margin:16px 0 20px}
h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(28px,3vw,40px);line-height:1}
.lead{font-size:clamp(19px,1.6vw,23px);font-weight:600;color:#2b2830;max-width:34ch;margin-bottom:28px}
.cta{display:inline-block;padding:16px 26px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;font-size:18px;position:relative;overflow:hidden}
.cta:hover{background:var(--blue)}
.cta.light{background:#fff;color:var(--ink)}.cta.light:hover{background:var(--blue);color:#fff}
.small{font-size:15px;color:var(--muted);margin-top:12px}
.hero-img{width:100%;aspect-ratio:4/3;display:block}
.fx{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 70px}
.card{position:relative;overflow:hidden;border-radius:19px;padding:30px 28px;background:var(--lilac);display:flex;flex-direction:column;gap:12px;min-height:300px}
.card p{font-size:18px;color:#3b3741;flex:1}
.card a{font-weight:800;text-decoration:none}.card a:hover{color:var(--blue)}
.card.dark{background:#0b0c12;color:#eef3ff}.card.dark p{color:#c9c4d3}
.card.mesh{background:linear-gradient(135deg,#151A2B,#2F5BFF 65%,#C058D6);color:#fff}.card.mesh p{color:#eef3ff}
.card.dark a:hover,.card.mesh a:hover{color:#fff;text-decoration:underline}
.num{font-size:14px;font-weight:800;letter-spacing:.14em;opacity:.7}
.how{max-width:760px;margin:0 auto 70px}
.how ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.how li{padding:16px 20px;border-radius:14px;background:var(--lilac)}
.end{position:relative;overflow:hidden;border-radius:19px;padding:clamp(36px,6vw,72px);margin-bottom:40px;text-align:center;color:#fff;
  background:radial-gradient(60% 80% at 80% 20%,rgba(192,88,214,.55),transparent 70%),radial-gradient(60% 80% at 20% 80%,rgba(47,91,255,.6),transparent 70%),#0b0c12}
.end p{margin:14px auto 26px;max-width:40ch;color:#dcd7e6}
.kf{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:22px var(--pad);border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
@media (max-width:860px){ .hero{grid-template-columns:1fr;min-height:0} .fx{grid-template-columns:1fr} }
.kr{display:flex;align-items:center;gap:16px}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{all:unset;cursor:pointer;font-size:15px;font-weight:800;padding:6px 12px;border-radius:999px;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.lang button:focus-visible{outline:2px solid var(--blue)}
@media (max-width:480px){ .ig{display:none} }