@font-face{font-family:'Poppins';src:url('fonts/Poppins-Bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Regular.ttf') format('truetype');font-weight:100 599;font-display:swap}
:root{--navy:#0A2342;--blue:#0B4F9C;--cyan:#29B6E8;--orange:#F28C28;--green:#1E9E6E;--red:#E5484D;--bg:#F4F8FC;--card:#fff;--ink:#16263A;--muted:#5B6B7E;--line:#E1EAF3;--saweria:#FAAE2B;--r:20px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--blue)}
.muted{color:var(--muted)}
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:rgba(10,35,66,.92);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:20px;font-weight:600}
.brand b{color:var(--orange)}
.logo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--orange),#FFB15C);color:var(--navy);font-weight:900;font-size:15px}
.nav nav{display:flex;align-items:center;gap:18px}
.nav nav a{color:#CFE3F5;text-decoration:none;font-weight:600;font-size:15px}
.nav nav a:hover{color:#fff}

.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:64px 6vw 70px;background:radial-gradient(1200px 500px at 85% -10%,#1F5FAF 0%,transparent 60%),radial-gradient(800px 400px at -10% 120%,#0E6E8C 0%,transparent 55%),var(--navy);color:#fff}
.eyebrow{display:inline-block;background:rgba(242,140,40,.18);color:#FFC48A;border:1px solid rgba(242,140,40,.4);padding:6px 14px;border-radius:99px;font-weight:700;font-size:14px}
.eyebrow.light{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35)}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.08;margin:18px 0 14px;font-weight:800}
.grad{background:linear-gradient(90deg,#FFB15C,#F28C28 40%,#29B6E8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:#CFE3F5;max-width:620px;margin:0 0 22px}
.search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:6px 8px 6px 16px;max-width:560px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.search input{flex:1;border:0;outline:0;font:inherit;font-size:17px;padding:10px 4px;color:var(--ink);background:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.chip{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;border-radius:99px;padding:6px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}
.chip:hover{background:rgba(255,255,255,.18)}
.chip.on{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.stats{display:flex;gap:28px;margin-top:28px}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:30px;line-height:1;color:#fff}
.stats span{font-size:13px;color:#9FC2E3}
.hero-art{display:flex;justify-content:center}
.code-float{width:100%;max-width:380px;background:#0D1B2A;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:16px 20px;box-shadow:0 30px 60px rgba(0,0,0,.4);transform:rotate(-3deg);animation:bob 6s ease-in-out infinite}
.code-float pre{margin:8px 0 0;color:#BFD7EA;font:14px/1.6 Consolas,'Courier New',monospace;white-space:pre}
.code-float .c{color:#6C8BA6}.code-float .k{color:#FFB15C}
.dots i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;background:#E5484D}
.dots i:nth-child(2){background:#F5C04A}.dots i:nth-child(3){background:#2BD96B}
@keyframes bob{50%{transform:rotate(-1deg) translateY(-10px)}}

.wrap{max-width:1180px;margin:0 auto;padding:56px 22px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:22px}
.sec-head h2{margin:0;font-size:30px;color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(10,35,66,.06);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(10,35,66,.12)}
.thumb{position:relative;aspect-ratio:16/10;background:#DDE8F2;overflow:hidden;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.05)}
.badge{position:absolute;top:12px;left:12px;background:var(--orange);color:var(--navy);font-weight:800;font-size:12px;padding:5px 11px;border-radius:99px}
.badge.lvl{left:auto;right:12px;background:rgba(10,35,66,.85);color:#fff}
.body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{margin:0;font-size:20px;line-height:1.3;color:var(--navy)}
.card p{margin:0;color:var(--muted);font-size:15px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:#EAF3FB;color:var(--blue);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:700}
.files{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.file{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 10px;border-radius:12px;background:#F6F9FC;border:1px solid var(--line)}
.file .ic{font-size:18px}
.file .nm{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .sz{color:var(--muted);font-size:12px}
.file a{text-decoration:none;font-weight:700;font-size:13px}
.actions{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 16px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;transition:.2s}
.btn.dl{flex:1;white-space:nowrap;background:linear-gradient(135deg,#1E9E6E,#22B07D);color:#fff;box-shadow:0 8px 20px rgba(30,158,110,.35);font-size:17px;padding:14px 18px}
.btn.dl:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,158,110,.45)}
.btn.ghost{background:#EEF4FA;color:var(--navy);white-space:nowrap}
.btn.dl small{font-weight:600;opacity:.85;font-size:.8em}
.btn.ghost:hover{background:#E1ECF7}

.btn-support{display:inline-flex;align-items:center;gap:8px;background:var(--saweria);color:#3A2600;text-decoration:none;font-weight:800;border-radius:14px;padding:10px 16px;box-shadow:0 8px 22px rgba(250,174,43,.4);transition:.2s}
.btn-support:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px rgba(250,174,43,.55)}
.btn-support.sm{padding:8px 14px;font-size:14px;color:#3A2600 !important}
.btn-support.big{font-size:20px;padding:16px 28px;border-radius:18px}

.support{padding:20px 22px 30px}
.support-card{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;background:linear-gradient(135deg,#F28C28 0%,#FAAE2B 45%,#FFD27A 100%);border-radius:28px;padding:40px 44px;color:#2B1A00;box-shadow:0 30px 60px rgba(242,140,40,.3);position:relative;overflow:hidden}
.support-card::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.18);right:-140px;top:-180px}
.cup{font-size:130px;text-align:center;filter:drop-shadow(0 14px 18px rgba(0,0,0,.2));animation:steam 3s ease-in-out infinite}
@keyframes steam{50%{transform:translateY(-8px) rotate(-4deg)}}
.support-text{position:relative;z-index:1}
.support h2{font-size:clamp(26px,3.4vw,38px);margin:12px 0 8px;color:#2B1A00}
.support p{font-size:17px;margin:0 0 12px}
.perks{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:10px}
.perks li{background:rgba(255,255,255,.55);border-radius:12px;padding:8px 14px;font-weight:700;font-size:14px}
.support .btn-support.big{background:#0A2342;color:#fff;box-shadow:0 12px 28px rgba(10,35,66,.4)}
.tiny{font-size:13px !important;margin-top:10px !important;opacity:.8}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.step b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;font-size:18px}
.step h3{margin:12px 0 4px;color:var(--navy)}
.step p{margin:0;color:var(--muted);font-size:15px}
.empty{text-align:center;color:var(--muted);padding:30px}
.foot{text-align:center;padding:36px 20px 90px;background:var(--navy);color:#CFE3F5}
.foot p{margin:4px 0}.foot a{color:#FFC48A}

.float-support{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;gap:8px;background:var(--saweria);color:#3A2600;text-decoration:none;font-weight:800;font-size:22px;padding:12px 18px;border-radius:99px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:pulse 2.6s ease-in-out infinite}
.float-support span{font-size:15px}
@keyframes pulse{0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.25),0 0 0 0 rgba(250,174,43,.6)}50%{box-shadow:0 12px 30px rgba(0,0,0,.25),0 0 0 14px rgba(250,174,43,0)}}

.modal{position:fixed;inset:0;z-index:50;background:rgba(6,18,34,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-box{position:relative;background:#fff;border-radius:24px;max-width:760px;width:100%;max-height:90vh;overflow:auto;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .25s ease-out}
.modal-box.wide{max-width:980px}
@keyframes pop{from{transform:scale(.95);opacity:0}}
.x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:12px;border:0;background:#EEF4FA;font-size:18px;cursor:pointer}
.detail-img{width:100%;border-radius:16px;margin:4px 0 14px;aspect-ratio:16/9;object-fit:cover}
.detail h2{margin:0 0 6px;color:var(--navy);font-size:26px;padding-right:40px}
.detail h3{color:var(--blue);margin:18px 0 8px}
.detail ul,.detail ol{margin:0;padding-left:20px}
.detail li{margin:4px 0}
.comp{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;list-style:none;padding:0 !important}
.comp li{background:#F6F9FC;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.detail .actions{flex-wrap:wrap}
.viewer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 46px 12px 0}
.code{margin:0;background:#0D1B2A;color:#D6E6F5;border-radius:16px;padding:16px 0;overflow:auto;max-height:70vh;font:13.5px/1.55 Consolas,'Courier New',monospace;counter-reset:ln}
.code .ln{display:block;padding:0 18px 0 0;white-space:pre}
.code .ln::before{counter-increment:ln;content:counter(ln);display:inline-block;width:46px;margin-right:14px;text-align:right;color:#4D6680;user-select:none}
.code .cm{color:#6C8BA6;font-style:italic}.code .kw{color:#FFB15C}.code .st{color:#8BE28B}.code .nu{color:#7FD6F5}.code .pp{color:#E59BE0}
.thanks{text-align:center;max-width:480px}
.party{font-size:70px;animation:steam 1.6s ease-in-out infinite}
.thanks h2{margin:4px 0;color:var(--navy)}
.thanks p{color:var(--muted)}
.thanks .btn-support{margin:8px 0 10px}
.thanks .btn{display:flex;margin:0 auto}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:14px;font-weight:700;opacity:0;transition:.3s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:44px 22px 50px}
  .hero-art{display:none}
  .support-card{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .cup{font-size:90px}
  .perks{justify-content:center}
  .nav nav a:not(.btn-support){display:none}
  .stats{gap:20px}
}
@media (max-width:420px){
  .btn.dl small{display:none}
  .sec-head h2{font-size:26px}
  .grid{grid-template-columns:1fr}
  .float-support span{display:none}
  .btn.dl{font-size:16px}
}