/* ============================================================
   Blixye — Home page styles
   Extracted from index.html for maintainability.
   ============================================================ */

    :root{
      --bg-1:#0a102c;--bg-2:#0d1540;--bg-3:#0a1033;
      --violet:#7a2cff;--magenta:#e83a95;--cyan:#21d4fd;--gold:#ffba3a;
      --text:#eef3ff;--muted:#94a3c8;--line:rgba(255,255,255,.08);
      --r:16px;--r-lg:20px;
      --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--s8:96px;
      --section-pad:80px;
      --shadow:0 12px 40px rgba(0,0,0,.40);
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
    ::-webkit-scrollbar{width:6px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:999px}
    ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}
    html,body{height:100%}
    html{scroll-behavior:smooth;overflow-x:hidden}
    body{margin:0;color:var(--text);font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow-x:hidden;
      background:var(--bg-1)}

    a{color:inherit;text-decoration:none}
    .container{max-width:1160px;margin:auto;padding:0 var(--s4)}

    /* Top gradient veil — adds depth to hero without banding further down */
    body::before{content:"";position:absolute;top:0;left:0;right:0;height:900px;z-index:0;pointer-events:none;
      background:linear-gradient(180deg,var(--bg-2) 0%,transparent 100%)}

    /* Glow + Stars */
    .glow-layer{position:fixed;inset:-120px;z-index:0;pointer-events:none;opacity:.7;
      background:
        radial-gradient(580px 380px at 18% 22%,rgba(232,58,149,.08),transparent 70%),
        radial-gradient(600px 400px at 78% 18%,rgba(33,212,253,.06),transparent 70%),
        radial-gradient(700px 480px at 60% 78%,rgba(122,44,255,.08),transparent 70%)}
    body > :not(.glow-layer):not(.stars):not(.nav):not(.popup-container){position:relative;z-index:1}
    .stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.75}
    .stars .star{position:absolute;width:2px;height:2px;border-radius:999px;background:#fff;opacity:.6;will-change:transform;animation:fall var(--t) linear infinite}
    @keyframes fall{to{transform:translate3d(0,100vh,0);opacity:.1}}

    /* Carousel — auto-scroll screenshot strip */
    .carousel{width:100%;overflow:hidden;padding:var(--s5) 0;position:relative}
    .carousel::before,.carousel::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
    .carousel::before{left:0;background:linear-gradient(90deg,var(--bg-1),transparent)}
    .carousel::after{right:0;background:linear-gradient(270deg,var(--bg-1),transparent)}
    .carousel-track{display:flex;gap:var(--s4);width:max-content;animation:carouselScroll 40s linear infinite;will-change:transform}
    .carousel:hover .carousel-track{animation-play-state:paused}
    @keyframes carouselScroll{to{transform:translateX(-50%)}}
    .carousel-item{flex:0 0 280px;display:grid;gap:10px;transition:transform .22s var(--ease)}
    .carousel-item:hover{transform:translateY(-4px) scale(1.03)}
    .carousel-item img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
    .carousel-item:hover img{border-color:rgba(122,44,255,.25);box-shadow:0 16px 48px rgba(0,0,0,.50),0 0 20px rgba(122,44,255,.10)}
    .carousel-cap{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);padding:4px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);width:fit-content;margin:0 auto;transition:color .22s var(--ease),background .22s var(--ease)}
    .carousel-item:hover .carousel-cap{color:var(--text);background:rgba(122,44,255,.08)}

    /* Card image variant */
    .card-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--r-lg) - 4px) calc(var(--r-lg) - 4px) 0 0;display:block}
    .card-label{display:flex;align-items:center;gap:10px;padding:var(--s3) var(--s4);font-weight:800;font-size:15px}
    .card-label .card-ico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(122,44,255,.08);border:1px solid rgba(122,44,255,.12);font-size:15px;flex:0 0 auto}

    /* Section / Layout — equal top & bottom padding */
    section{padding:0 0 var(--section-pad);scroll-margin-top:92px}

    /* Scroll reveal */
    .reveal{opacity:0;transform:translateY(32px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
    .reveal.visible{opacity:1;transform:translateY(0)}
    .reveal-delay-1{transition-delay:.08s}
    .reveal-delay-2{transition-delay:.16s}
    .reveal-delay-3{transition-delay:.24s}
    .reveal-delay-4{transition-delay:.32s}
    .reveal-delay-5{transition-delay:.40s}
    section .container{padding-top:var(--section-pad)}
    header{padding:140px 0 90px;position:relative;isolation:isolate}
    .sec-title{margin:0 0 var(--s3);font-size:34px;letter-spacing:-.3px;font-weight:900}
    .sec-sub{margin:0 0 var(--s5);color:var(--muted);line-height:1.7}

    /* Section separator — full width */
    .section-sep{height:1px;margin:0;position:relative;
      background:rgba(255,255,255,.06)}
    .section-sep::before{content:"";position:absolute;left:50%;top:-18px;transform:translateX(-50%);width:200px;height:36px;
      background:radial-gradient(ellipse at center,rgba(122,44,255,.08),transparent 70%);pointer-events:none;filter:blur(16px)}

    /* Nav */
    .nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(10,16,44,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05)}
    .nav .row{display:flex;align-items:center;gap:16px;height:64px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.2px}
    .mark{width:34px;height:34px;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(122,44,255,.25);border:1px solid rgba(255,255,255,.12)}
    .mark img{width:100%;height:100%;object-fit:cover;display:block}
    .menu{display:flex;gap:4px;align-items:center;margin-left:auto}
    .menu a{padding:10px 14px;border-radius:12px;color:var(--muted);font-weight:700;font-size:14px;border:1px solid transparent;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease)}
    .menu a:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);transform:translateY(-1px)}
    .nav-right{display:flex;gap:10px;align-items:center;margin-left:12px}
    .nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--text);font-size:22px;padding:6px 10px;border-radius:12px;cursor:pointer;margin-left:auto}

    /* Buttons */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 20px;border-radius:14px;font-weight:800;letter-spacing:.2px;border:0;cursor:pointer;user-select:none;white-space:nowrap;transition:transform .16s var(--ease),box-shadow .22s var(--ease),background-position .5s var(--ease),border-color .22s var(--ease),background .22s var(--ease),filter .16s var(--ease);font-family:inherit;font-size:14px;color:var(--text)}
    .btn.primary{background:linear-gradient(135deg,var(--violet) 0%,var(--magenta) 50%,var(--violet) 100%);background-size:200% 200%;box-shadow:0 6px 24px rgba(122,44,255,.25),0 2px 8px rgba(0,0,0,.2);position:relative}
    .btn.primary:hover{background-position:100% 100%;transform:translateY(-2px);box-shadow:0 12px 36px rgba(122,44,255,.30),0 4px 14px rgba(0,0,0,.25)}
    .btn.primary::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;background:linear-gradient(135deg,rgba(122,44,255,.30),rgba(232,58,149,.20));filter:blur(16px);opacity:.4;transition:opacity .22s var(--ease)}
    .btn.primary:hover::after{opacity:.7}
    .btn.ghost{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(0,0,0,.15)}
    .btn.ghost:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.25);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
    .btn svg.ico{width:18px;height:18px;flex:0 0 auto;opacity:.92}
    .btn.discord-btn{background:linear-gradient(135deg,#5865F2 0%,#7289da 100%);box-shadow:0 4px 20px rgba(88,101,242,.22)}
    .btn.discord-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(88,101,242,.30);filter:brightness(1.06)}

    /* Hero */
    header::before{content:"";position:absolute;inset:-200px -60px -100px -60px;z-index:-1;pointer-events:none;
      background:
        radial-gradient(800px 550px at 48% 18%,rgba(122,44,255,.18),transparent 70%),
        radial-gradient(700px 500px at 55% 35%,rgba(232,58,149,.12),transparent 70%),
        radial-gradient(600px 400px at 40% 45%,rgba(33,212,253,.08),transparent 70%);
      filter:blur(20px)}
    .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s6);align-items:center}
    .title{margin:0;font-size:clamp(42px,5.6vw,78px);line-height:1.08;font-weight:900;letter-spacing:-1.2px;font-family:"Poppins","Outfit",system-ui;
      background:linear-gradient(95deg,var(--cyan) 0%,var(--violet) 35%,var(--magenta) 65%,var(--violet) 100%);
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
      filter:drop-shadow(0 20px 80px rgba(122,44,255,.25)) drop-shadow(0 14px 60px rgba(232,58,149,.14)) drop-shadow(0 8px 30px rgba(0,0,0,.25))}
    .subtitle{margin:10px 0 0;color:var(--muted);font-size:clamp(15px,2.0vw,17px);line-height:1.7;max-width:680px}
    .cta{margin-top:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap}

    /* Device stack */
    .device{position:relative;min-height:300px;display:grid;place-items:center}
    .device-stack{position:relative;width:min(420px,52vw);aspect-ratio:1.15/1}
    .screen{position:absolute;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);box-shadow:var(--shadow);backdrop-filter:blur(10px);overflow:hidden}
    .screen::before{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(122,44,255,.14),rgba(232,58,149,.10),rgba(33,212,253,.08));opacity:.5;filter:blur(18px)}
    .screen .bmark{position:absolute;inset:0;display:grid;place-items:center;font-family:"Poppins";font-weight:900;font-size:52px;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.06),transparent 55%);color:transparent}
    .bmark span{background:linear-gradient(95deg,var(--cyan),var(--violet) 45%,var(--magenta) 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 8px 20px rgba(122,44,255,.18)) drop-shadow(0 8px 20px rgba(232,58,149,.14))}
    .screen.phone{width:26%;height:54%;right:2%;bottom:4%;transform:rotate(6deg)}
    .screen.laptop{width:64%;height:58%;left:0;bottom:0;transform:rotate(-4deg)}
    .screen.monitor{width:66%;height:62%;right:10%;top:0;transform:rotate(3deg)}
    .wing{position:absolute;right:6%;top:36%;width:62%;height:44%;border-radius:24px;
      background:
        radial-gradient(circle at 35% 50%,rgba(122,44,255,.16),transparent 60%),
        radial-gradient(circle at 70% 40%,rgba(232,58,149,.12),transparent 60%),
        radial-gradient(circle at 55% 65%,rgba(33,212,253,.08),transparent 60%);
      filter:blur(16px);opacity:.65;transform:rotate(10deg)}

    /* Grid */
    .grid{display:grid;gap:var(--s4)}
    .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

    /* Card */
    .card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);box-shadow:0 4px 20px rgba(0,0,0,.20);overflow:hidden;position:relative;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
    .card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(122,44,255,.06),rgba(33,212,253,.03));mix-blend-mode:overlay;opacity:.15;filter:blur(14px)}
    .card:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.32);border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
    .card .pad{padding:var(--s5);position:relative}
    .card.active{border-color:rgba(122,44,255,.20);background:rgba(122,44,255,.04)}
    .card.active::before{background:linear-gradient(135deg,rgba(122,44,255,.10),rgba(232,58,149,.06));opacity:.25}

    /* Kicker */
    .kicker{display:flex;align-items:center;gap:10px;font-weight:900}
    .kicker .ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(122,44,255,.06);border:1px solid rgba(122,44,255,.10);font-size:16px}
    .card h3{margin:12px 0 8px;font-size:18px;font-weight:900}
    .card p{margin:0;color:var(--muted);line-height:1.7}

    /* About */
    .about-block{display:grid;gap:var(--s3);text-align:center;margin-bottom:var(--s5)}
    .about-block .sec-sub{margin:0 auto;max-width:860px}

    /* Screenshots — left: 2 landscape (16:9), right: 2 phones filling same total height */
    .screenshots-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:stretch}
    .ss-col-left{display:grid;gap:var(--s4)}
    .ss-col-right{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
    .screenshots-grid img{width:100%;border-radius:var(--r);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .22s var(--ease)}
    .screenshots-grid img:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 16px 48px rgba(0,0,0,.50)}
    .ss-col-left img{aspect-ratio:16/9;object-fit:cover}
    .ss-col-right img{height:100%;object-fit:cover;object-position:top}

    /* Access / Integration */
    .access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch}
    .access-card{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
    .access-card .pill{display:inline-flex;gap:8px;align-items:center;justify-content:center;margin:0 auto 14px;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12)}
    .pill--active{background:linear-gradient(135deg,rgba(122,44,255,.22),rgba(232,58,149,.16)) !important;border-color:rgba(122,44,255,.30) !important;box-shadow:0 0 28px rgba(122,44,255,.12)}
    .pill--next{background:rgba(33,212,253,.08) !important;border-color:rgba(33,212,253,.18) !important}
    .pill--planned{background:rgba(232,58,149,.08) !important;border-color:rgba(232,58,149,.16) !important}
    .pill .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--violet),var(--magenta))}
    .access-card h3{margin:0 0 10px;font-size:20px}
    .access-card p{color:var(--muted);line-height:1.7;font-size:14px;margin:0 0 16px}
    .access-card ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px;text-align:left;width:100%}
    .access-card li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px}
    .tick{width:14px;height:14px;border-radius:5px;flex:0 0 auto;margin-top:4px;background:linear-gradient(135deg,var(--violet),var(--magenta));box-shadow:0 0 10px rgba(122,44,255,.10)}

    /* Changelog */
    .ch-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
    .mini-link{padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .18s var(--ease),transform .18s var(--ease);font-weight:800;font-size:14px;cursor:pointer;color:var(--text);font-family:inherit}
    .mini-link:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
    .c-card{height:100%;display:flex;flex-direction:column}
    .meta{display:flex;gap:10px;align-items:center;color:rgba(240,244,255,.80);font-weight:800;font-size:13px}
    .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 0 12px rgba(255,255,255,.08)}
    .meta-date{white-space:nowrap}
    /* Tags — colored by type */
    .tags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
    .tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid;line-height:1.2}
    .tag--release{color:#34d399;background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.32)}
    .tag--beta{color:#22d3ee;background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.32)}
    .tag--fix{color:#fbbf24;background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.32)}
    .tag--hotfix{color:#fb7185;background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.34)}
    .tag--feature{color:#c084fc;background:rgba(192,132,252,.12);border-color:rgba(192,132,252,.32)}
    .tag--security{color:#f472b6;background:rgba(244,114,182,.12);border-color:rgba(244,114,182,.32)}
    .tag--default{color:var(--muted);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
    .c-card ul{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.7;font-size:14px}
    .btnline{margin-top:auto;padding-top:18px}
    .log-open{width:100%;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 14px;border-radius:12px;background:rgba(122,44,255,.06);border:1px solid rgba(122,44,255,.12);font-weight:800;color:rgba(240,244,255,.80);cursor:pointer;font-family:inherit;font-size:13px;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
    .log-open:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25);border-color:rgba(122,44,255,.20);background:rgba(122,44,255,.10)}

    /* FAQ */
    .faq-head{display:grid;gap:12px;margin-bottom:var(--s4);text-align:left}
    .search{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;backdrop-filter:blur(12px);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
    .search:focus-within{transform:translateY(-1px);border-color:rgba(122,44,255,.30);box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(122,44,255,.14);background:rgba(255,255,255,.05)}
    .search svg.ico{width:16px;height:16px;opacity:.6}
    .search input{width:100%;background:transparent;border:0;outline:0;color:var(--text);font-weight:700;font-family:inherit;font-size:inherit}
    .search input::placeholder{color:rgba(240,244,255,.4)}
    .faq{display:grid;gap:12px}
    .faq-item{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease)}
    .faq-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
    .faq-item.open{border-color:rgba(122,44,255,.16);box-shadow:0 8px 28px rgba(0,0,0,.25);background:rgba(255,255,255,.035)}
    .faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:14px 18px;font-weight:800;background:transparent;border:0;color:var(--text);font-family:inherit;font-size:14px}
    .faq-q{display:flex;align-items:center;gap:12px;min-width:0}
    .qdot{width:20px;height:20px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:900;line-height:1;background:rgba(122,44,255,.10);border:1px solid rgba(122,44,255,.18);color:rgba(240,244,255,.70);flex:0 0 auto}
    .chev{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);opacity:.8}
    .faq-item.open .chev{transform:rotate(180deg);background:rgba(122,44,255,.10);border-color:rgba(122,44,255,.22)}
    .faq-content{height:0;overflow:hidden;transition:height .32s var(--ease)}
    .faq-inner{padding:0 18px 18px;color:var(--muted);white-space:pre-wrap;line-height:1.7;font-size:14px}

    /* View more btn */
    .view-more-wrap{text-align:center;margin-top:var(--s4)}

    /* Modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:0;z-index:80;background:rgba(3,6,20,.75);backdrop-filter:blur(14px)}
    .modal.open{display:flex;animation:modalFade .18s var(--ease)}
    @keyframes modalFade{from{opacity:0}to{opacity:1}}
    .modal-card{width:min(900px,calc(100% - 40px));max-height:90vh;overflow:auto;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(10,16,44,.94);box-shadow:0 40px 140px rgba(0,0,0,.65);position:relative;transform:translateY(0) scale(.98);opacity:0;animation:modalIn .20s var(--ease) forwards}
    @keyframes modalIn{to{opacity:1;transform:translateY(0) scale(1)}}
    .modal-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(122,44,255,.16),rgba(232,58,149,.10),rgba(33,212,253,.08));opacity:.3;filter:blur(18px)}
    .modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;background:rgba(10,16,44,.95);backdrop-filter:blur(10px);z-index:2}
    .modal-title{display:grid;gap:4px}
    .modal-title strong{font-size:18px}
    .modal-title span{font-size:13px;color:var(--muted)}
    .modal-body{padding:18px}
    .modal-close{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:18px;transition:transform .18s var(--ease),background .18s var(--ease)}
    .modal-close:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
    .log{display:grid;gap:12px}
    .log-item{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
    .log-item .top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
    .log-item .pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:6px 12px;border-radius:999px;color:rgba(233,240,255,.80);font-weight:800;font-size:12px}
    .log-item ul{margin:10px 0 0 18px;color:var(--muted);line-height:1.7;font-size:14px}

    /* Popup / Modal — fullscreen overlay */
    .popup-container{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s var(--ease)}
    .popup-container.active{pointer-events:auto;opacity:1;visibility:visible}
    .popup-overlay{position:absolute;inset:0;background:rgba(3,6,20,.70);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .popup{position:relative;max-width:620px;min-width:320px;width:calc(100% - 48px);max-height:80vh;overflow:auto;padding:28px 32px;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(10,16,44,.96);backdrop-filter:blur(24px);box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(122,44,255,.08);transform:scale(.94);opacity:0;animation:popupIn .28s var(--ease) forwards;transition:opacity .22s var(--ease),transform .22s var(--ease)}
    .popup.removing{opacity:0;transform:scale(.92)}
    @keyframes popupIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
    .popup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
    .popup-head strong{font-size:18px;font-weight:900}
    .popup-close{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:16px;transition:background .18s var(--ease),transform .18s var(--ease);flex:0 0 auto}
    .popup-close:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
    .popup p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
    .popup-body{color:var(--muted);font-size:14px;line-height:1.7}
    .popup-body ul{margin:8px 0 0;padding-left:18px}
    .popup-body li{margin-bottom:4px}
    .popup-footer{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:10px;flex-wrap:wrap}
    .popup-bar{position:absolute;bottom:0;left:16px;right:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--magenta));transform-origin:left;animation:popupBar var(--popup-dur,5s) linear forwards}
    @keyframes popupBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
    .popup--success .popup-bar{background:linear-gradient(90deg,#22c55e,#10b981)}
    .popup--error .popup-bar{background:linear-gradient(90deg,#ef4444,#f97316)}
    .popup--info .popup-bar{background:linear-gradient(90deg,var(--violet),var(--cyan))}

    /* Get Started options */
    .gs-intro{color:var(--muted);font-size:14px;line-height:1.6;margin:2px 0 16px}
    .gs-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .gs-option{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);cursor:pointer;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
    .gs-option:hover{transform:translateY(-3px);border-color:rgba(122,44,255,.32);background:rgba(122,44,255,.06);box-shadow:0 16px 44px rgba(0,0,0,.38)}
    .gs-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;color:#cdbcff;background:linear-gradient(135deg,rgba(122,44,255,.20),rgba(232,58,149,.12));border:1px solid rgba(122,44,255,.24)}
    .gs-option h4{margin:0 0 8px;font-size:16px;font-weight:900;color:var(--text);line-height:1.25}
    .gs-option .gs-desc{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
    .gs-note{margin-top:16px;padding:12px 14px;border-radius:12px;background:rgba(33,212,253,.06);border:1px solid rgba(33,212,253,.18);color:var(--text);font-size:13px;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
    .gs-note .gs-note-ico{flex:0 0 auto;color:var(--cyan)}
    @media (max-width:540px){.gs-options{grid-template-columns:1fr}}

    /* Footer */
    footer{padding:var(--s6) 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}
    .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
    .foot-links{display:flex;gap:6px;align-items:center}
    .foot-links a{color:var(--muted);transition:color .18s var(--ease)}
    .foot-links a:hover{color:#fff}
    .foot-note{margin:14px 0 0;font-size:12px;line-height:1.6;color:rgba(148,163,200,.65);max-width:760px}

    /* Responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr;gap:var(--s5);text-align:center}
      .cta{justify-content:center}
      .device{min-height:260px}
      .grid.two{grid-template-columns:1fr}
      .grid.three{grid-template-columns:1fr}
      .access-grid{grid-template-columns:1fr}
      .menu{display:none}
      .nav-right{display:none}
      .nav-toggle{display:block}
      .screenshots-grid{grid-template-columns:1fr}
      .ss-col-right{grid-template-columns:1fr 1fr}
      .ch-head{flex-direction:column;align-items:flex-start}
      .popup{max-width:calc(100% - 32px);min-width:0;padding:20px}
      /* Mobile nav menus */
      .menu.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:rgba(10,16,44,.96);backdrop-filter:blur(16px);padding:var(--s3);border-bottom:1px solid rgba(255,255,255,.06);gap:4px;z-index:50}
      .menu.open a{padding:12px 16px;border-radius:12px}
      .nav-right.open{display:flex;flex-direction:column;position:absolute;top:auto;left:0;right:0;background:rgba(10,16,44,.96);backdrop-filter:blur(16px);padding:var(--s3);border-bottom:1px solid rgba(255,255,255,.06);gap:4px;z-index:49}
    }
    @media (max-width:540px){
      .ss-col-right{grid-template-columns:1fr}
    }
    @media (prefers-reduced-motion:reduce){
      *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
      .carousel-track{animation:none!important}
      .stars{display:none}
      .reveal{opacity:1;transform:none}
    }

/* Changelog "Novedades" card — rendered markdown */
.c-md{color:var(--muted);line-height:1.7;font-size:14px}
.c-md p{margin:6px 0}
.c-md h1{font-size:17px;font-weight:900;color:var(--text);margin:10px 0 6px}
.c-md h2{font-size:15px;font-weight:800;color:var(--text);margin:9px 0 5px}
.c-md h3{font-size:14px;font-weight:800;color:var(--text);margin:8px 0 4px}
.c-md ul{margin:6px 0 6px 18px;padding:0}
.c-md li{margin:3px 0}
.c-md .md-small{font-size:11px;opacity:.65;margin:3px 0}
.c-md code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px;font-size:12px}
.c-md a{color:var(--cyan);text-decoration:underline}
.c-md hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:10px 0}