:root{
      --bg:#05080e;
      --bg-soft:#09111d;
      --panel:#0d1726;
      --panel-2:#111e30;
      --panel-3:#15263c;
      --line:#223b5c;
      --line-soft:rgba(90,164,255,.18);
      --text:#f5f8ff;
      --muted:#a8b7ca;
      --blue:#42a5ff;
      --blue-2:#2478ff;
      --cyan:#54e7ff;
      --green:#64f5a8;
      --yellow:#ffc515;
      --shadow:0 24px 70px rgba(0,0,0,.38);
      --radius:24px;
      --radius-sm:16px;
      --nav-h:76px;
      --max:1220px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 10% 5%, rgba(40,122,255,.13), transparent 28%),
        radial-gradient(circle at 90% 28%, rgba(39,219,255,.08), transparent 24%),
        linear-gradient(180deg,#04070c 0%,#07101b 44%,#05090f 100%);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;inset:0;z-index:-3;pointer-events:none;
      background-image:
        linear-gradient(rgba(82,152,241,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(82,152,241,.055) 1px,transparent 1px);
      background-size:64px 64px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.15) 65%,transparent 100%);
    }
    body::after{
      content:"";
      position:fixed;inset:0;z-index:-2;pointer-events:none;
      background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.32) 100%);
    }
    body.admin-bar .nav{top:32px}
    @media (max-width:782px){body.admin-bar .nav{top:46px}}

    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{color:inherit}

    .container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
    .section{position:relative;padding:108px 0}
    .section-tight{padding:76px 0}
    .section[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
      color:#96cfff;
    }
    .eyebrow::before{content:"";width:20px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 18px rgba(66,165,255,.6)}
    .section-title{margin:14px 0 16px;font-size:clamp(2rem,4vw,4rem);line-height:1.03;letter-spacing:-.035em}
    .section-copy{max-width:720px;color:var(--muted);font-size:1.06rem;line-height:1.75}

    .nav{
      position:fixed;z-index:100;top:0;left:0;right:0;height:var(--nav-h);
      display:flex;align-items:center;
      background:rgba(4,9,16,.73);backdrop-filter:blur(18px) saturate(135%);
      border-bottom:1px solid rgba(100,168,255,.12);
      transition:box-shadow .25s ease,background .25s ease;
    }
    .nav.scrolled{background:rgba(4,9,16,.9);box-shadow:0 14px 40px rgba(0,0,0,.28)}
    .nav-inner{width:min(var(--max),calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:850;letter-spacing:-.02em}
    .brand-logo{width:42px;height:42px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 24px rgba(46,138,255,.25)}
    .brand span{font-size:1.02rem}
    .nav-links{display:flex;align-items:center;gap:4px;color:#b6c2d2;font-size:.92rem}
    .nav-links a{padding:10px 12px;border-radius:10px;transition:.2s ease}
    .nav-links a:hover,.nav-links a.active{background:rgba(66,165,255,.11);color:#fff}
    .nav-links .nav-cta{margin-left:8px;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:white;font-weight:800;box-shadow:0 8px 26px rgba(36,120,255,.24)}
    .menu-btn{display:none;background:var(--panel);border:1px solid var(--line);width:44px;height:44px;border-radius:12px;cursor:pointer}

    .hero{min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 84px) 0 92px;position:relative}
    .hero-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:center}
    .hero-title{
      margin:16px 0 18px;
      font-size:clamp(3.5rem,7.4vw,7.6rem);line-height:.84;letter-spacing:-.065em;
      text-shadow:0 0 44px rgba(54,136,255,.16);
    }
    .hero-title .accent{display:block;background:linear-gradient(180deg,#f9fbff 0%,#82c8ff 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero-slogan{margin:0 0 18px;font-size:clamp(1.23rem,2vw,1.7rem);font-weight:750;color:#dbe9fb}
    .hero-copy{max-width:640px;color:var(--muted);font-size:1.05rem;line-height:1.75}
    .badges{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}
    .badge{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(12,24,40,.82);border:1px solid rgba(78,150,238,.26);color:#c9ddf6;font:700 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
    .badge::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--blue);box-shadow:0 0 12px var(--blue)}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:14px;border:1px solid var(--line);background:rgba(13,23,38,.9);font-weight:800;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
    .btn:hover{transform:translateY(-2px);border-color:#3d7abd;background:#12233a}
    .btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-2));border-color:rgba(255,255,255,.15);box-shadow:0 15px 38px rgba(36,120,255,.24)}
    .btn-primary:hover{background:linear-gradient(135deg,#62b5ff,#2b82ff);box-shadow:0 18px 45px rgba(36,120,255,.34)}
    .btn svg{width:18px;height:18px}

    .hero-visual{position:relative;perspective:1400px}
    .screenshot-frame{
      position:relative;padding:10px;border-radius:26px;
      background:linear-gradient(145deg,rgba(103,179,255,.34),rgba(25,54,91,.16) 44%,rgba(84,231,255,.14));
      border:1px solid rgba(88,161,255,.34);box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 70px rgba(41,127,255,.15);
      transform:rotateY(-7deg) rotateX(2deg);
      transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
    }
    .screenshot-frame:hover{transform:rotateY(-2deg) rotateX(0deg) translateY(-8px) scale(1.015);box-shadow:0 44px 110px rgba(0,0,0,.52),0 0 86px rgba(41,127,255,.22)}
    .screenshot-frame img{border-radius:18px;width:100%;height:auto}
    .screen-glow{position:absolute;inset:12% 10% -7% 14%;z-index:-1;filter:blur(70px);background:rgba(35,120,255,.26);border-radius:50%}
    .floating-chip{position:absolute;padding:10px 13px;border-radius:12px;background:rgba(8,17,29,.9);border:1px solid rgba(89,159,246,.26);box-shadow:0 16px 40px rgba(0,0,0,.28);font:700 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#dcecff;backdrop-filter:blur(12px);animation:float 5s ease-in-out infinite}
    .chip-a{left:-20px;top:13%}.chip-b{right:-22px;bottom:14%;animation-delay:-2.1s}.chip-a b{color:var(--green)}.chip-b b{color:#69c4ff}
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

    .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px}
    .info-card{position:relative;overflow:hidden;padding:28px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(18,32,50,.9),rgba(11,20,33,.92));border:1px solid var(--line-soft);box-shadow:var(--shadow)}
    .info-card::after{content:"";position:absolute;right:-65px;top:-65px;width:170px;height:170px;border-radius:50%;background:rgba(66,165,255,.11);filter:blur(32px)}
    .info-card h3{margin:0 0 10px;font-size:1.15rem}
    .info-card p{margin:0;color:var(--muted);line-height:1.7}
    .info-card strong{color:#e8f3ff}

    .features-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:38px}
    .feature-card{grid-column:span 4;position:relative;min-height:190px;padding:24px;border-radius:20px;background:linear-gradient(180deg,rgba(15,29,47,.92),rgba(10,19,31,.92));border:1px solid rgba(86,154,237,.18);overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
    .feature-card:hover{transform:translateY(-6px) scale(1.012);border-color:rgba(88,169,255,.48);box-shadow:0 26px 54px rgba(0,0,0,.28),0 0 30px rgba(59,152,255,.08)}
    .feature-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#162e4c,#0d1b2e);border:1px solid rgba(109,177,255,.26);font-size:1.2rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
    .feature-card h3{margin:18px 0 8px;font-size:1.08rem}
    .feature-card p{margin:0;color:var(--muted);line-height:1.62;font-size:.94rem}
    .feature-card.wide{grid-column:span 6}
    .feature-card.highlight{background:linear-gradient(150deg,rgba(24,63,104,.9),rgba(12,25,42,.92));border-color:rgba(73,165,255,.33)}
    .feature-tag{position:absolute;top:20px;right:20px;padding:6px 8px;border-radius:9px;background:rgba(60,170,255,.1);border:1px solid rgba(78,169,255,.18);color:#89caff;font:800 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}

    .mini-cloud{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
    .mini-chip{padding:8px 10px;border-radius:10px;background:rgba(7,16,27,.74);border:1px solid rgba(81,150,232,.19);color:#c3d4e7;font-size:.79rem;font-weight:750}

    .showcase{display:grid;grid-template-columns:.78fr 1.22fr;gap:52px;align-items:center}
    .showcase.reverse{grid-template-columns:1.22fr .78fr}
    .showcase.reverse .showcase-media{order:1}.showcase.reverse .showcase-copy{order:2}
    .showcase-media{position:relative}
    .showcase-media .image-wrap{padding:8px;border:1px solid rgba(80,158,255,.28);background:rgba(11,22,37,.7);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.38),0 0 52px rgba(50,130,255,.1);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
    .showcase-media .image-wrap:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 34px 86px rgba(0,0,0,.43),0 0 65px rgba(50,130,255,.16)}
    .showcase-media img{border-radius:17px}
    .bullet-list{display:grid;gap:11px;margin-top:24px}
    .bullet{display:flex;gap:12px;align-items:flex-start;color:#c8d6e7}
    .bullet::before{content:"";flex:0 0 9px;width:9px;height:9px;margin-top:7px;border-radius:3px;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 0 14px rgba(66,165,255,.45)}

    .modrinth-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
    .shot-card{position:relative;overflow:hidden;border-radius:22px;background:rgba(12,23,38,.85);border:1px solid rgba(92,163,246,.22);box-shadow:var(--shadow);cursor:zoom-in;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
    .shot-card:hover{transform:translateY(-6px);border-color:rgba(92,170,255,.48);box-shadow:0 34px 80px rgba(0,0,0,.38),0 0 48px rgba(47,139,255,.12)}
    .shot-card img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
    .shot-card:hover img{transform:scale(1.025)}
    .shot-label{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;color:#dbe8f7;font-weight:850}
    .shot-label span:last-child{font-size:.77rem;color:#7fc1ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

    .performance-card{margin-top:38px;padding:34px;border-radius:28px;background:linear-gradient(145deg,rgba(17,37,61,.94),rgba(7,16,28,.96));border:1px solid rgba(87,161,255,.23);box-shadow:var(--shadow);position:relative;overflow:hidden}
    .performance-card::before{content:"";position:absolute;inset:auto -80px -130px auto;width:320px;height:320px;border-radius:50%;background:rgba(58,160,255,.12);filter:blur(50px)}
    .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
    .metric{padding:20px;border-radius:17px;background:rgba(7,17,30,.74);border:1px solid rgba(91,158,236,.14)}
    .metric strong{display:block;font:850 1.05rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;color:#bfe2ff}
    .metric span{display:block;margin-top:8px;color:#8fa4bc;font-size:.83rem}

    .gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:90px;gap:16px;margin-top:34px}
    .gallery .shot-card:nth-child(1){grid-column:span 7;grid-row:span 4}
    .gallery .shot-card:nth-child(2){grid-column:span 5;grid-row:span 4}
    .gallery .shot-card:nth-child(3){grid-column:span 5;grid-row:span 4}
    .gallery .shot-card:nth-child(4){grid-column:span 7;grid-row:span 4}
    .gallery .shot-card img{height:calc(100% - 54px);aspect-ratio:auto}

    .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
    .tech-item{padding:19px 20px;border-radius:16px;background:rgba(13,25,42,.78);border:1px solid rgba(84,154,238,.17)}
    .tech-item span{display:block;color:#8195ad;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
    .tech-item strong{display:block;margin-top:8px;color:#edf6ff;font:800 .98rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}

    .download-card{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:38px;border-radius:30px;background:linear-gradient(135deg,rgba(25,74,122,.9),rgba(11,29,50,.95) 60%,rgba(8,18,31,.96));border:1px solid rgba(97,175,255,.32);box-shadow:0 36px 90px rgba(0,0,0,.38),0 0 70px rgba(52,144,255,.11);overflow:hidden;position:relative}
    .download-card::after{content:"";position:absolute;right:-70px;top:-85px;width:270px;height:270px;border-radius:50%;border:40px solid rgba(83,177,255,.07)}
    .download-card h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,3rem)}
    .download-card p{margin:0;color:#b6cae1}
    .download-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
    .btn-disabled{position:relative;z-index:1;min-width:220px;opacity:.68;cursor:not-allowed;background:#17283b;border-color:#284460;color:#aac2d8}

    .faq{display:grid;gap:12px;margin-top:32px}
    .faq details{border-radius:17px;background:rgba(12,23,38,.78);border:1px solid rgba(86,153,236,.17);overflow:hidden;transition:border-color .2s ease,background .2s ease}
    .faq details[open]{border-color:rgba(74,161,255,.4);background:rgba(16,31,51,.88)}
    .faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary::after{content:"+";font-size:1.35rem;color:#73bdff;transition:transform .2s ease}
    .faq details[open] summary::after{transform:rotate(45deg)}
    .faq p{margin:0;padding:0 22px 20px;color:var(--muted);line-height:1.65}

    footer{padding:50px 0 40px;border-top:1px solid rgba(92,156,234,.13);background:rgba(3,7,12,.45)}
    .footer-grid{display:flex;justify-content:space-between;gap:32px;align-items:flex-end}
    .footer-brand{display:flex;gap:14px;align-items:center}
    .footer-brand img{width:50px;height:50px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
    .footer-brand strong{display:block}.footer-brand span{display:block;margin-top:3px;color:#7f92a8;font-size:.86rem}
    .legal{text-align:right;color:#75889d;font-size:.8rem;line-height:1.55}

    .pixel-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
    .pixel{position:absolute;width:8px;height:8px;background:#378cf4;border-radius:2px;opacity:.12;box-shadow:0 0 18px rgba(55,140,244,.4);animation:drift 12s ease-in-out infinite alternate}
    .pixel:nth-child(2n){width:5px;height:5px;opacity:.08;animation-duration:17s}
    .pixel:nth-child(3n){background:#5de7ff;animation-duration:21s}
    @keyframes drift{to{transform:translate3d(35px,-45px,0) rotate(30deg)}}

    .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
    .reveal.in{opacity:1;transform:none}
    .stagger > *{opacity:0;transform:translateY(18px)}
    .stagger.in > *{animation:staggerIn .55s ease forwards}
    .stagger.in > *:nth-child(2){animation-delay:.06s}.stagger.in > *:nth-child(3){animation-delay:.12s}.stagger.in > *:nth-child(4){animation-delay:.18s}.stagger.in > *:nth-child(5){animation-delay:.24s}.stagger.in > *:nth-child(6){animation-delay:.30s}.stagger.in > *:nth-child(7){animation-delay:.36s}.stagger.in > *:nth-child(8){animation-delay:.42s}.stagger.in > *:nth-child(9){animation-delay:.48s}
    @keyframes staggerIn{to{opacity:1;transform:none}}

    .lightbox{position:fixed;inset:0;z-index:300;background:rgba(1,5,10,.91);display:none;align-items:center;justify-content:center;padding:32px;backdrop-filter:blur(10px)}
    .lightbox.open{display:flex;animation:fadeIn .2s ease}
    .lightbox img{max-width:min(1500px,94vw);max-height:88vh;border-radius:18px;border:1px solid rgba(92,169,255,.33);box-shadow:0 40px 120px rgba(0,0,0,.7)}
    .lightbox-close{position:absolute;top:22px;right:24px;width:48px;height:48px;border-radius:14px;background:#132237;border:1px solid #2a4a70;cursor:pointer;font-size:1.35rem}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}

    @media (max-width:1050px){
      .hero-grid,.showcase,.showcase.reverse{grid-template-columns:1fr;gap:42px}
      .showcase.reverse .showcase-media,.showcase.reverse .showcase-copy{order:initial}
      .hero{padding-top:calc(var(--nav-h) + 62px)}
      .hero-copy{max-width:760px}
      .hero-visual{max-width:900px}
      .feature-card{grid-column:span 6}
      .metrics{grid-template-columns:repeat(2,1fr)}
      .download-card{grid-template-columns:1fr}
      .btn-disabled{width:max-content}
      .nav-links{position:absolute;top:calc(var(--nav-h) - 1px);left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;padding:12px;background:rgba(7,14,24,.97);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
      .nav-links.open{display:flex}
      .nav-links .nav-cta{margin-left:0}
      .menu-btn{display:block}
    }
    @media (max-width:760px){
      :root{--nav-h:68px}
      .container,.nav-inner{width:min(100% - 28px,var(--max))}
      .section{padding:78px 0}
      .hero{min-height:auto;padding-bottom:70px}
      .hero-title{font-size:clamp(3rem,18vw,5rem)}
      .hero-slogan{font-size:1.15rem}
      .intro-grid,.modrinth-grid,.tech-grid{grid-template-columns:1fr}
      .feature-card,.feature-card.wide{grid-column:span 12}
      .gallery{display:grid;grid-template-columns:1fr;grid-auto-rows:auto}
      .gallery .shot-card:nth-child(n){grid-column:auto;grid-row:auto}
      .gallery .shot-card img{height:auto;aspect-ratio:16/9}
      .metrics{grid-template-columns:1fr 1fr}
      .footer-grid{align-items:flex-start;flex-direction:column}.legal{text-align:left}
      .screenshot-frame{transform:none}.screenshot-frame:hover{transform:translateY(-4px) scale(1.005)}
      .floating-chip{display:none}
    }
    @media (max-width:480px){
      .metrics{grid-template-columns:1fr}
      .hero-actions .btn{width:100%}
      .brand span{font-size:.93rem}
      .download-card{padding:27px}
      .performance-card{padding:24px}
    }
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
      .reveal,.stagger>*{opacity:1!important;transform:none!important}
    }