/* Reset default link color */
a {
    color: inherit;
    text-decoration: none;
}

/* Hover effect for normal links */
a:hover {
    color: #f1f5f9;
    text-decoration: underline;
    text-decoration-color: rgba(124,58,237,.65); /* violet accent */
}

/* Primary button link */
a.primary {
    display:inline-block;
    padding:12px 18px;
    border-radius:999px;
    font-weight:700;
    color:#0f172a;
    background:linear-gradient(135deg, var(--brand-a), var(--brand-b));
    box-shadow:0 8px 24px rgba(6,182,212,.18), 0 2px 6px rgba(124,58,237,.18);
    text-decoration:none !important;
}
a.primary:hover {
    filter:brightness(1.05);
}

/* Secondary CTA (pvz. "Learn more") */
.hero .actions a:not(.primary) {
    padding:12px 18px;
    border-radius:999px;
    font-weight:600;
    color:#e2e8f0;
    border:1px solid rgba(148,163,184,.25);
    transition:all .2s ease;
}
.hero .actions a:not(.primary):hover {
    border-color:rgba(148,163,184,.45);
    background:rgba(30,41,59,.5);
}

:root{
    --brand-a:#7C3AED; /* purple */
    --brand-b:#06B6D4; /* cyan   */
    --bg:#0f172a;      /* deep slate */
    --text:#e5e7eb;    /* light gray */
    --muted:#94a3b8;   /* slate-400 */
    --card:#111827;
    --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; background:var(--bg); color:var(--text);
    font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Noto Sans", sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Background canvas fills viewport behind everything */
#bg-canvas{
    position:fixed; inset:0; z-index:-1; display:block;
    background:
            radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.25), transparent 60%),
            radial-gradient(1000px 700px at 90% 110%, rgba(6,182,212,.22), transparent 60%),
            var(--bg);
}

header{
    width:100%; padding:20px 24px; position:sticky; top:0;
    backdrop-filter:saturate(120%) blur(8px);
    background:linear-gradient(to bottom, rgba(15,23,42,.7), rgba(15,23,42,.2));
    border-bottom:1px solid rgba(148,163,184,.15);
}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px}

.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo svg{width:36px; height:36px; flex:0 0 36px; border-radius:9px}
.logo .word{font-weight:700; font-size:18px; letter-spacing:.2px}
.logo small{display:block; color:var(--muted); font-weight:500; margin-top:-2px}

.cta a{
    display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600;
    border:1px solid rgba(148,163,184,.25); color:var(--text)
}
.cta a.primary{
    background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
    border:none; color:white; box-shadow:0 8px 24px rgba(6,182,212,.18), 0 2px 6px rgba(124,58,237,.18);
}

main{padding:72px 0 80px}
.hero{
    display:grid; grid-template-columns:1fr; gap:28px; text-align:center;
    align-items:center; justify-items:center; padding:0 16px;
}
.badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:999px; font-size:12px; color:#cbd5e1;
    border:1px solid rgba(148,163,184,.25); background:rgba(2,6,23,.35)
}
.title{
    font-size: clamp(36px, 6vw, 64px); line-height:1.05; font-weight:800; letter-spacing:-0.02em;
    margin:0;
    background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 0 rgba(0,0,0,0);
}
.subtitle{max-width:720px; color:#cbd5e1; margin:0 auto; font-size:18px}
.actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px}

.cards{
    margin:64px auto 0; display:grid; gap:16px; grid-template-columns:repeat(12, 1fr);
    padding:0 16px; max-width:1100px;
}
.card{
    grid-column: span 12;
    background:linear-gradient(180deg, rgba(30,41,59,.6), rgba(15,23,42,.6));
    border:1px solid rgba(148,163,184,.2);
    border-radius:var(--radius);
    padding:18px 18px 16px; min-height:100px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px rgba(2,6,23,.3);
}
.card h3{margin:0 0 6px; font-size:15px; color:#cbd5e1; font-weight:600}
.metric{
    font-size:30px; font-weight:800; letter-spacing:-.02em;
    background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.muted{color:var(--muted); font-size:14px}

@media (min-width:720px){
    .card.span-4{grid-column:span 4}
    .card.span-8{grid-column:span 8}
}

footer{
    padding:36px 16px 48px; color:#94a3b8; text-align:center; font-size:14px;
    border-top:1px solid rgba(148,163,184,.15); margin-top:64px;
    background:linear-gradient(to top, rgba(15,23,42,.7), rgba(15,23,42,0));
}
a.link{color:#a5b4fc; text-decoration:none}
a.link:hover{text-decoration:underline}

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    font-size: 0.95rem;
    max-width: 600px;
}
.cookie-banner p {
    margin: 0;
    flex: 1;
}
.cookie-banner .actions {
    display: flex;
    gap: 0.5rem;
}
.cookie-banner button {
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}
.cookie-banner .primary {
    background: #fff;
    color: #0f172a;
}
.cookie-banner .secondary {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* Header */
.nx-header{
    width:100%; padding:20px 24px; position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(120%) blur(8px);
    background:linear-gradient(to bottom, rgba(15,23,42,.7), rgba(15,23,42,.2));
    border-bottom:1px solid rgba(148,163,184,.15);
}
.nx-row{ gap:16px; }
.nx-nav{
    display:flex; align-items:center; gap:14px;
}
.nx-link{
    text-decoration:none; color:#cbd5e1; font-weight:600; padding:8px 10px; border-radius:10px;
    border:1px solid transparent;
}
.nx-link:hover{ color:#e5e7eb; border-color:rgba(148,163,184,.25); }
.nx-link[aria-current="page"]{ color:#fff; border-color:rgba(148,163,184,.35); }

.nx-cta{
    border:none; cursor:pointer; font-weight:700; color:#0f172a;
    background:linear-gradient(135deg, var(--brand-a), var(--brand-b));
    padding:10px 16px; border-radius:999px; box-shadow:0 8px 24px rgba(6,182,212,.18), 0 2px 6px rgba(124,58,237,.18);
}
.nx-cta.disabled{
    opacity:.6; cursor:not-allowed; color:#0f172a;
}

/* Burger (mobile) */
.nx-burger{
    display:none; width:42px; height:42px; border-radius:10px; border:1px solid rgba(148,163,184,.25);
    background:rgba(2,6,23,.35); align-items:center; justify-content:center; gap:4px;
}
.nx-burger span{
    display:block; width:20px; height:2px; background:#e5e7eb; border-radius:2px;
}
.nx-burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nx-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nx-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* Responsive */
@media (max-width: 860px){
    .nx-burger{ display:flex; }
    .nx-nav{
        position:fixed; right:16px; top:74px;
        flex-direction:column; align-items:flex-start; gap:10px;
        background:linear-gradient(180deg, rgba(30,41,59,.9), rgba(15,23,42,.95));
        border:1px solid rgba(148,163,184,.25); border-radius:14px; padding:12px; display:none;
        box-shadow:0 20px 60px rgba(2,6,23,.45);
    }
    .nx-nav.open{ display:flex; }
    .nx-cta{ width:100%; text-align:center }
}

/* Reduced motion: freeze animation, keep static stars */
@media (prefers-reduced-motion: reduce){
    #bg-canvas{animation: none}
    body[data-freeze="true"] #bg-canvas{opacity:.9}
}