/* Base setup */
:root {
    --bg-0: #000000; /* pure black base */
    --text: #aeb3c2; /* faint white/gray for contrast with neon */
    --muted: #7f8696;
    --cyan: #00e6ff;
    --red: #ff163d;
    --red-strong: #ff0033;
    --border-subtle: rgba(255,255,255,0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg-0);
    overflow-x: hidden;
}

/* Canvas glitch grid backdrop */
#gridCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: transparent; /* keep base pure black; lines are drawn via canvas */
    pointer-events: none;
}

/* Fixed header */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(10,12,18,0.72), rgba(10,12,18,0.35));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    z-index: 10;
}

.brand {
    letter-spacing: 0.24em;
    font-weight: 800;
    font-size: 14px;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    color: #e5e7eb; /* light gray/white */
}
.brand span { color: var(--red); margin: 0 8px; }

.actions { display: flex; gap: 10px; }
.icon-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    color: #b6c0ff;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: 160ms ease;
}
.icon-btn:hover { color: #fff; border-color: rgba(255,255,255,0.18); box-shadow: 0 0 0 2px rgba(255,255,255,0.03) inset; }

/* Main layout */
main { padding-top: 96px; }

.hero {
    position: relative;
    min-height: clamp(60vh, 72vh, 78vh);
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 40px 20px 20px;
}

.slogan {
    margin: 0;
    line-height: 1.05;
    text-align: center;
    letter-spacing: 0.02em;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
}
.slogan .line-1 {
    display: block;
    font-weight: 800;
    font-size: clamp(24px, 3.6vw, 44px);
    color: #e6e9ee; /* white/light gray */
    text-shadow: 0 0 16px rgba(0, 255, 255, 0.08);
}

.glow-wrap {
    position: relative;
    display: inline-block;
    margin-top: 8px;
}

.forbidden {
    display: inline-block;
    font-weight: 900;
    font-size: clamp(42px, 9.5vw, 120px);
    letter-spacing: 0.02em;
    color: var(--red); /* neon red core */
    padding: 0 10px;
    /* Intense neon halo with slight cyan aberration */
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.6),
        0 0 14px rgba(255, 0, 51, 0.85),
        0 0 28px rgba(255, 0, 51, 0.75),
        0 0 56px rgba(255, 0, 51, 0.65),
        1px 0 18px rgba(0, 230, 255, 0.25), /* cyan fringe */
        -1px 0 18px rgba(255, 0, 51, 0.5);
}

.y-overlay {
    position: absolute;
    left: -0.18em;
    top: -0.28em;
    font-weight: 900;
    font-size: clamp(96px, 18vw, 240px);
    color: rgba(255, 0, 51, 0.18);
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 18px rgba(255,0,60,0.6)) drop-shadow(0 0 48px rgba(255,0,60,0.5));
    transform: rotate(-9deg) translate(-14px, -12px);
    pointer-events: none;
}

/* Cyan accent shards using pseudo-elements */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    z-index: -1;
}
.hero::before {
    background-image:
        conic-gradient(from 150deg at 18% 22%, rgba(0,230,255,0.22), rgba(0,230,255,0) 26%),
        conic-gradient(from -20deg at 82% 28%, rgba(255,0,60,0.28), rgba(255,0,60,0) 22%);
    mask: linear-gradient(#000, transparent 62%);
}
.hero::after {
    background-image:
        linear-gradient(120deg, rgba(0,230,255,0.18) 0 20%, transparent 60%),
        linear-gradient(-60deg, rgba(255,0,60,0.22) 0 18%, transparent 58%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
    opacity: 0.85;
}

/* tiny glitch class used by JS to pulse elements momentarily */
.glitch { animation: glitchy 0.16s steps(2, end) 1; }
@keyframes glitchy {
    0% { transform: translate(0); filter: hue-rotate(0deg) saturate(1.15); }
    50% { transform: translate(-1px, 1px); filter: hue-rotate(10deg) saturate(1.6); }
    100% { transform: translate(0); filter: hue-rotate(0deg) saturate(1.15); }
}

/* Section titles */
.section-titles { padding: 24px 20px 60px; }
.section-titles h2 {
    font-size: 14px;
    letter-spacing: 0.28em;
    font-weight: 700;
    color: #e6e9ee; /* white/light gray titles */
}

/* Decorative angled separators */
.section-titles h2::after {
    content: "";
    display: inline-block;
    width: 72px; height: 1px;
    background: linear-gradient(90deg, rgba(0,240,255,0.0), rgba(0,240,255,0.6), rgba(0,240,255,0.0));
    margin-left: 12px;
    box-shadow: 0 0 12px rgba(0,240,255,0.4);
}

/* Responsive tweaks */
@media (min-width: 900px) {
    .slogan .line-1 { font-size: 48px; }
}

/* ========================= */
/*        CARDS LAYOUT       */
/* ========================= */
.products, .services { padding: 6px 20px 72px; }

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 42px; /* a bit more spacing between cards */
    align-items: start;
    max-width: 1200px;
    margin: 6px auto 30px; /* more breathing room to section title */
}

/* middle product slightly lower to mimic perspective */
/* inverted V: side cards slightly higher, center card clearly lower */
.products-grid .card.upper { transform: translateY(-4px); }
.products-grid .card.center-lower { transform: translateY(44px); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 42px;
    justify-content: center;
    max-width: 980px;
    margin: 16px auto 54px; /* centered below products with extra spacing */
}

/* Card base */
.card {
    --neon: #00e6ff;
    --neonGlow: rgba(0, 230, 255, 0.75);
    position: relative;
    padding: 36px 30px;
    background: rgba(255,255,255,0.02);
    isolation: isolate;
    overflow: hidden;
    /* Angular trapezoid shape */
    clip-path: polygon(10% 0, 90% 0, 100% 18%, 92% 100%, 8% 100%, 0 82%);
    transition: transform 200ms ease, filter 200ms ease;
}
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: inherit;
    /* Thin neon outline using inner stroke */
    box-shadow: inset 0 0 0 2px var(--neon);
    filter: drop-shadow(0 0 10px var(--neonGlow)) drop-shadow(0 0 26px var(--neonGlow)) drop-shadow(0 0 56px var(--neonGlow));
    pointer-events: none;
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: inherit;
    background: linear-gradient(140deg, rgba(255,255,255,0.06), transparent 45%);
    opacity: 0.6;
    pointer-events: none;
}

.card .card-inner { display: grid; gap: 14px; align-content: center; justify-items: center; min-height: 180px; text-align: center; }
.card .title { margin: 0; color: #fff; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.card .icon { color: #ffffff; display: grid; place-items: center; width: 54px; height: 54px; }
.card .icon svg { display: block; width: 100%; height: 100%; }

.card:hover { transform: translateY(-4px); }
.card:hover::before { filter: drop-shadow(0 0 16px var(--neonGlow)) drop-shadow(0 0 42px var(--neonGlow)) drop-shadow(0 0 100px var(--neonGlow)); box-shadow: inset 0 0 0 2px var(--neon), 0 0 24px var(--neonGlow); }

/* Neon themes */

.neon-yellow { --neon: #fff89c; --neonGlow: rgba(255,248,156,0.8); color: #fff; }

.neon-cyan { --neon: #00e6ff; --neonGlow: rgba(0,230,255,0.85); color: #fff; }

.neon-orange { --neon: #ff5e00; --neonGlow: rgba(255,94,0,0.85); color: #fff; }

.neon-purple { --neon: #d100ff; --neonGlow: rgba(209,0,255,0.85); color: #fff; }

/* Subtle angled accents to echo the reference shapes */
.card .title { font-size: 20px; }

/* Responsive */
@media (max-width: 900px) {
    .products-grid { grid-template-columns: 1fr; max-width: 520px; }
    .products-grid .card.upper, .products-grid .card.center-lower { transform: none; }
    .services-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* ========================= */
/*        CTA SECTION        */
/* ========================= */
.cta {
    display: grid;
    gap: 18px;
    place-items: center;
    padding: 20px 20px 90px;
}
.cta-lead {
    margin: 0;
    color: #e6e9ee;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
}
.btn-quote {
    --r: var(--red);
    appearance: none;
    border: 2px solid var(--r);
    background: linear-gradient(180deg, #ff2b4d, var(--r));
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 14px 28px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 0, 51, 0.5), 0 0 32px rgba(255, 0, 51, 0.35);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.btn-quote:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.1);
    box-shadow: 0 0 16px rgba(255, 0, 51, 0.7), 0 0 48px rgba(255, 0, 51, 0.5);
}

/* ========================= */
/*       DETAIL MODAL        */
/* ========================= */
.detail-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(1000px 600px at 50% -10%, rgba(0,0,0,0.65), rgba(0,0,0,0.85));
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 50;
}
.detail-overlay.active { opacity: 1; pointer-events: auto; }

.detail-modal {
    --neon: #00e6ff;
    width: min(880px, 92vw);
    border-radius: 16px;
    background: rgba(10,12,18,0.8);
    padding: 28px;
    transform: scale(0.96);
    transition: transform 220ms ease;
    position: relative;
    clip-path: polygon(8% 0, 92% 0, 100% 14%, 94% 100%, 6% 100%, 0 86%);
}
.detail-overlay.active .detail-modal { transform: scale(1); }
.detail-modal::before {
    content: "";
    position: absolute; inset: 0; clip-path: inherit;
    box-shadow: inset 0 0 0 2px var(--neon);
    filter: drop-shadow(0 0 20px var(--neon)) drop-shadow(0 0 50px var(--neon));
    pointer-events: none;
}

.detail-close {
    position: absolute; top: 10px; right: 10px;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    color: #d2d6e5;
    display: grid; place-items: center;
    cursor: pointer;
}

.detail-content { text-align: center; padding: 22px 10px 8px; }
.detail-content .detail-app { margin: 0; font-weight: 800; letter-spacing: 0.28em; color: #e6e9ee; }
.detail-content .detail-title { margin: 10px 0 18px; font-size: clamp(18px, 3vw, 26px); color: #c8cede; font-weight: 700; }
.detail-content .coming-soon {
    font-weight: 900;
    font-size: clamp(38px, 9vw, 96px);
    color: var(--red);
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.6),
        0 0 14px rgba(255, 0, 51, 0.85),
        0 0 28px rgba(255, 0, 51, 0.75),
        0 0 56px rgba(255, 0, 51, 0.65);
}

/* Color variants driven by data attribute */
.detail-modal[data-variant="lituria"] { --neon: #fff89c; }
.detail-modal[data-variant="onepercent"] { --neon: #00e6ff; }


/* ========================= */
/*      NAV OVERLAY MENU     */
/* ========================= */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
}
.nav-overlay.active { pointer-events: auto; opacity: 1; }

.nav-panel {
    position: relative;
    width: min(820px, 92vw);
    background: rgba(10,12,18,0.9);
    padding: 40px 24px 34px;
    clip-path: polygon(8% 0, 92% 0, 100% 16%, 94% 100%, 6% 100%, 0 84%);
    transform: translateY(-16px) scale(0.98) skewY(-1.2deg);
    transition: transform 320ms cubic-bezier(.2,.9,.25,1.2);
}
.nav-overlay.active .nav-panel { transform: translateY(0) scale(1) skewY(0); }
.nav-panel::before {
    content: "";
    position: absolute; inset: 0; clip-path: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--cyan);
    filter: drop-shadow(0 0 16px rgba(0,230,255,0.75)) drop-shadow(0 0 44px rgba(0,230,255,0.6));
}

.nav-close {
    position: absolute; top: 10px; right: 10px;
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    color: #d2d6e5; display: grid; place-items: center; cursor: pointer;
}

.nav-menu { list-style: none; margin: 6px 0 0; padding: 28px 8px 6px; display: grid; gap: 14px; }
.nav-menu a {
    display: inline-block;
    text-decoration: none;
    color: #e6e9ee;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 800;
    letter-spacing: 0.2em;
    font-size: clamp(16px, 2.2vw, 22px);
    padding: 10px 12px;
    position: relative;
}
.nav-menu a::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1px;
    background: linear-gradient(90deg, rgba(0,240,255,0.0), rgba(0,240,255,0.6), rgba(0,240,255,0.0));
    opacity: 0; transform: scaleX(0.8); transition: 180ms ease; box-shadow: 0 0 10px rgba(0,240,255,0.4);
}
.nav-menu a:hover { color: #fff; text-shadow: 0 0 10px rgba(0,230,255,0.8), 0 0 28px rgba(0,230,255,0.6); }
.nav-menu a:hover::after { opacity: 1; transform: scaleX(1); }

/* ========================= */
/*          FOOTER           */
/* ========================= */
.site-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(8,10,14,0.92);
    position: relative;
    color: #9aa0ae;
}
.site-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, rgba(0,240,255,0.0), rgba(0,240,255,0.8), rgba(0,240,255,0.0));
    box-shadow: 0 0 16px rgba(0,240,255,0.5);
}
.footer-inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 16px; padding: 12px 20px; max-width: 1200px; margin: 0 auto;
}
.footer-left .copyright { font-size: 12px; letter-spacing: 0.16em; }
.footer-left span { color: var(--red); }
.legal { margin-top: 4px; font-size: 12px; }
.legal a { color: #6b7280; text-decoration: none; }
.legal a:hover { color: #aab1c2; text-shadow: 0 0 8px rgba(255,255,255,0.15); }
.legal .dot { margin: 0 8px; color: #4b5563; }

.footer-center { text-align: center; }
.footer-center .email { color: #9aa0ae; text-decoration: none; font-size: 13px; }
.footer-center .email:hover { color: #e6e9ee; text-shadow: 0 0 8px rgba(0,230,255,0.4); }

.footer-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.footer-logo { width: 28px; height: 28px; opacity: 0.9; filter: drop-shadow(0 0 4px rgba(255,255,255,0.06)); }
.philosophy { font-size: 12px; color: #aab1c2; }

@media (max-width: 720px) {
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-right { justify-self: center; }
}

/* ========================= */
/*     LEGAL TERMS MODAL     */
/* ========================= */
.legal-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    justify-items: center;
    align-items: start;
    background: radial-gradient(900px 500px at 50% -10%, rgba(0,0,0,0.55), rgba(0,0,0,0.85));
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    overscroll-behavior: contain;
    overflow: auto;
    padding: 40px 0; /* ensure full document can fit within overlay scroll */
}
.legal-overlay.active { opacity: 1; pointer-events: auto; }

.legal-modal {
    position: relative;
    width: min(900px, 92vw);
    max-height: none; /* allow container to grow to full terms height */
    overflow: visible;
    background: rgba(10,12,18,0.92);
    padding: 26px;
    border-radius: 16px;
    /* Use regular rectangle to avoid clipping long content */
    transform: translateY(-10px) scale(0.98);
    transition: transform 240ms ease;
    overscroll-behavior: contain;
}
.legal-overlay.active .legal-modal { transform: translateY(0) scale(1); }
.legal-modal::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    border-radius: 16px;
    box-shadow: inset 0 0 0 2px #00e6ff, 0 0 0 0 rgba(0,0,0,0);
    filter: drop-shadow(0 0 16px rgba(0,230,255,0.7));
}

.legal-close {
    position: absolute; top: 10px; right: 10px;
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    color: #d2d6e5; display: grid; place-items: center; cursor: pointer;
}

.legal-content { color: #c8cede; }
.legal-content h3 { margin: 4px 0 8px; font-family: 'Orbitron','Rajdhani',sans-serif; letter-spacing: 0.08em; }
.legal-content h4 { margin: 18px 0 8px; color: #e6e9ee; }
.legal-content p, .legal-content li { font-size: 14px; line-height: 1.65; }
.legal-content a { color: #8ee9f7; text-decoration: none; }
.legal-content a:hover { color: #fff; text-shadow: 0 0 10px rgba(0,230,255,0.7); }