:root{
  /* Layout: sticky header > hero on a blue gradient and faint grid (copy | glowing logo) > control stack (Tip / Framework / Kategorija) > card grid > footer.
     Deep navy-black ground, silver type, electric blue accents taken from the Nova logo. */
  --bg:#04060c;
  --surface:#090d17;
  --surface-2:#0e1523;
  --line:#16233a;
  --line-2:#243a5c;
  --silver:#eaf0fa;
  --muted:#8f9db5;
  --accent:#2f7bff;
  --accent-hi:#7ec3ff;
  --accent-lo:rgba(47,123,255,.15);
  --accent-2:#3aa0ff;
  --font-head:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --font-brand:"Michroma","Eurostile","Segoe UI",sans-serif;
  --font-body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--silver);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:rgba(4,6,12,.94)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(4,6,12,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.brand img{width:44px;height:44px;object-fit:cover}
.brand b{display:block;font:400 .78rem/1 var(--font-brand);letter-spacing:.22em;white-space:nowrap}
.brand small{display:block;margin-top:6px;font:500 .6rem/1 var(--font-mono);letter-spacing:.38em;color:var(--accent)}
.nav{display:flex;align-items:center;gap:22px}
.nl{font:600 .95rem/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .25s}
.nl:hover{color:var(--silver)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;padding:15px 26px;border-radius:10px;border:1px solid transparent;font:700 1rem/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s,background .3s,border-color .3s,color .3s}
.btn.pri{background:linear-gradient(135deg,#7ec3ff,var(--accent));color:#04101f;box-shadow:0 12px 30px -12px rgba(47,140,255,.75)}
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(47,140,255,.9)}
.btn.pri:hover::after{left:130%}
.btn.sec{border-color:rgba(255,255,255,.2);color:var(--silver);background:rgba(0,0,0,.25)}
.btn.sec:hover{border-color:var(--accent-hi);color:var(--accent-hi);transform:translateY(-2px)}

/* hero */
.hero{position:relative;overflow:clip;padding-block:clamp(40px,7vw,92px) clamp(48px,7vw,96px);
  background:
    radial-gradient(52% 70% at 78% 30%,rgba(47,123,255,.30),transparent 70%),
    radial-gradient(55% 45% at 8% 72%,rgba(58,160,255,.10),transparent 70%),
    linear-gradient(180deg,#04060c 0%,#060b17 62%,var(--bg) 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(126,195,255,.07) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(126,195,255,.07) 1px,transparent 1px) 0 0/56px 56px;-webkit-mask-image:radial-gradient(70% 85% at 72% 35%,#000,transparent 78%);mask-image:radial-gradient(70% 85% at 72% 35%,#000,transparent 78%)}
.hero::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:20%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(126,195,255,.13),transparent);transform:translateX(-500%) skewX(-18deg);animation:beam 9s ease-in-out 1.4s infinite}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,5vw,60px);align-items:center}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;font:500 .74rem/1 var(--font-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--accent-hi)}
.eyebrow::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--accent-hi))}
h1{margin:0;font:700 clamp(2.7rem,6.4vw,5rem)/.96 var(--font-head);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(180deg,#d6eaff,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lead{max-width:44ch;margin:22px 0 30px;color:#b6c3da;font-size:1.08rem}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.stats{display:flex;flex-wrap:wrap;gap:14px 0;margin:36px 0 0;padding:0;list-style:none}
.stats li{display:flex;align-items:baseline;gap:9px;padding:0 24px 0 0;margin-right:24px;border-right:1px solid rgba(255,255,255,.16);font:600 .95rem/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase;color:#9fb0cc}
.stats li:last-child{border-right:0;margin-right:0;padding-right:0}
.stats b{font:700 2rem/1 var(--font-head);color:var(--silver);letter-spacing:.02em;font-variant-numeric:tabular-nums}

.stage{position:relative;aspect-ratio:1;width:100%;max-width:440px;justify-self:end}
.stage img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 0 26px rgba(47,123,255,.6));animation:appear 1.1s var(--ease) .1s backwards,float 7s ease-in-out 1.3s infinite}
.glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(47,123,255,.42),transparent 68%);filter:blur(30px);animation:pulse 5s ease-in-out infinite}

/* shop */
.shop{padding-block:clamp(10px,2vw,24px) 96px}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.sec-head h2{margin:0;font:700 clamp(1.7rem,3.4vw,2.3rem)/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase}
.sec-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.controls{display:grid;gap:18px;padding:clamp(16px,2.6vw,26px);border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:0 30px 60px -40px rgba(47,140,255,.35)}
.row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:14px}
.lbl{font:600 .92rem/1 var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.seg{--n:2;--i:0;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,330px);padding:4px;border:1px solid var(--line-2);border-radius:12px;background:#05080f}
.seg button{position:relative;z-index:1;padding:12px 10px;border:0;background:none;cursor:pointer;color:var(--muted);font:700 1.05rem/1 var(--font-head);letter-spacing:.18em;text-transform:uppercase;transition:color .3s}
.seg button:hover{color:var(--silver)}
.seg button[aria-pressed="true"]{color:#04101f}
.seg .ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n));border-radius:9px;background:linear-gradient(135deg,#7ec3ff,var(--accent));box-shadow:0 8px 22px -8px rgba(47,140,255,.7);transform:translateX(calc(var(--i)*100%));transition:transform .5s var(--ease)}
.seg.light .ind{background:linear-gradient(135deg,#f4f8ff,#b4c3de);box-shadow:0 8px 22px -8px rgba(255,255,255,.35)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--muted);font:700 1rem/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,color .25s,background .25s,transform .3s var(--ease)}
.chip span{font:500 .66rem/1 var(--font-mono);letter-spacing:0;color:#5e6f8c;transition:color .25s}
.chip:hover{color:var(--silver);border-color:#3a5b8f;transform:translateY(-1px)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-lo);color:var(--accent-hi)}
.chip[aria-pressed="true"] span{color:var(--accent)}

.res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:40px 0 20px}
.res-head h3{margin:0;font:700 1.7rem/1.1 var(--font-head);letter-spacing:.06em;text-transform:uppercase}
.res-head h3 em{font-style:normal;color:var(--accent-hi)}
.res-head p{margin:8px 0 0;font:500 .72rem/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.search{position:relative;width:min(100%,280px)}
.search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--muted);pointer-events:none}
.search input{width:100%;padding:13px 14px 13px 40px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--silver);font:400 .92rem/1 var(--font-body);transition:border-color .25s}
.search input::placeholder{color:#6a7a96}
.search input:focus{outline:none;border-color:var(--accent)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:18px}
.card{--tint:#6ab0ff;position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface);animation:rise .65s var(--ease) var(--d,0ms) backwards;transition:border-color .3s,transform .45s var(--ease),box-shadow .45s}
.card[data-cat="car"]{--tint:#4f8bff}
.card[data-cat="core"]{--tint:#cfd8ea}
.card[data-cat="other"]{--tint:#8fa6c8}
.card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(47,140,255,.16),transparent 70%);transition:opacity .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(47,123,255,.55);box-shadow:0 28px 46px -26px rgba(47,140,255,.5)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}
.pv{position:relative;display:grid;place-items:center;height:150px;overflow:hidden;background:radial-gradient(70% 90% at 50% 115%,color-mix(in srgb,var(--tint) 38%,transparent),transparent 70%),linear-gradient(180deg,#070b14,#0c1220);border-bottom:1px solid var(--line)}
.pv .ic{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tint) 45%,transparent);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tint) 22%,transparent),rgba(0,0,0,.35));color:var(--tint);transition:transform .5s var(--ease),box-shadow .5s}
.pv svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card:hover .ic{transform:scale(1.1);box-shadow:0 0 34px -4px color-mix(in srgb,var(--tint) 55%,transparent)}
.badge{position:absolute;top:13px;left:13px;padding:6px 10px;border-radius:7px;font:700 .8rem/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase}
.badge.free{border:1px solid rgba(239,235,230,.35);background:rgba(0,0,0,.35);color:var(--silver)}
.badge.paid{background:linear-gradient(135deg,#7ec3ff,var(--accent));color:#04101f}
.ex{position:absolute;top:13px;right:13px;padding:5px 8px;border:1px dashed #3a4f73;border-radius:7px;font:500 .6rem/1 var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.cb{display:flex;flex-direction:column;gap:9px;flex:1;padding:18px 18px 20px}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;font:500 .66rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.meta .v{color:var(--muted)}
.card h4{margin:0;font:700 1.45rem/1.1 var(--font-head);letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
.card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.tags span{padding:5px 9px;border:1px solid var(--line-2);border-radius:999px;font:500 .64rem/1 var(--font-mono);letter-spacing:.08em;color:#a9b8d2}
.cf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-top:1px solid var(--line);background:rgba(0,0,0,.2)}
.price{font:700 1.7rem/1 var(--font-head);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.price.paid{color:var(--accent-hi)}
.price.free{color:var(--silver);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase}
.go{padding:12px 20px;border:1px solid var(--accent);border-radius:9px;background:transparent;color:var(--accent-hi);font:700 .98rem/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s,transform .3s var(--ease)}
.go:hover{background:linear-gradient(135deg,#7ec3ff,var(--accent));color:#04101f;transform:translateX(2px)}

.empty{grid-column:1/-1;display:grid;justify-items:center;gap:6px;padding:48px 20px;border:1px dashed var(--line-2);border-radius:16px;text-align:center;animation:rise .6s var(--ease) backwards}
.empty img{width:96px;height:96px;object-fit:cover}
.empty b{font:700 1.5rem/1.2 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
.empty span{max-width:42ch;color:var(--muted);font-size:.94rem}

/* discord */
.discord{padding-block:0 72px}
.dbox{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(22px,4vw,38px);border:1px solid var(--line-2);border-radius:18px;background:radial-gradient(60% 150% at 100% 100%,rgba(47,140,255,.24),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.dbox h2{margin:0 0 8px;font:700 clamp(1.7rem,3.4vw,2.3rem)/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
.dbox p{margin:0;max-width:46ch;color:var(--muted)}

/* footer */
.foot-bar{border-top:1px solid var(--line);background:#03050a}
.foot-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:26px calc(26px + env(safe-area-inset-bottom,0px))}
.foot-bar .brand img{width:36px;height:36px}
.foot-bar p{margin:0;font:500 .68rem/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* load sequence */
.hero .eyebrow,.hero h1,.hero .lead,.hero .cta,.hero .stats{animation:rise .8s var(--ease) backwards}
.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.16s}.hero .cta{animation-delay:.24s}.hero .stats{animation-delay:.34s}

@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes appear{from{opacity:0;transform:scale(.95)}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes pulse{50%{opacity:.6;transform:scale(1.07)}}
@keyframes beam{0%{transform:translateX(-500%) skewX(-18deg)}55%,100%{transform:translateX(640%) skewX(-18deg)}}

@media(max-width:820px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .stage{order:-1;max-width:240px;margin-inline:auto;justify-self:center}
}
@media(max-width:640px){
  .row{grid-template-columns:minmax(0,1fr);gap:9px}
  .seg{width:100%}
  .nav .nl{display:none}
  .stats li{padding-right:16px;margin-right:16px}
  .search{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}