/* =====================================================================
   HACKER / TERMINAL THEME  —  loaded last, overrides the original theme
   Remove the <link> to hacker-theme.css in layout.blade.php to revert.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=VT323&display=swap");

:root {
    --hk-bg: #030806;
    --hk-bg-2: #07110c;
    --hk-panel: rgba(6, 20, 13, 0.85);
    --hk-green: #00ff66;
    --hk-green-dim: #00b347;
    --hk-green-faint: rgba(0, 255, 102, 0.12);
    --hk-cyan: #19e6ff;
    --hk-red: #ff2e55;
    --hk-text: #b8f5cc;
    --hk-muted: #5f8f72;
    --hk-border: rgba(0, 255, 102, 0.28);
    --hk-glow: 0 0 6px rgba(0, 255, 102, .55), 0 0 18px rgba(0, 255, 102, .25);
    --hk-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

/* ---------- Base ---------- */
html, body { background: var(--hk-bg) !important; }
body, body.darktheme {
    font-family: var(--hk-mono) !important;
    color: var(--hk-text) !important;
    font-size: 15px;
}
h1, h2, h3, h4, h5, h6,
.darktheme h1, .darktheme h2, .darktheme h3, .darktheme h4, .darktheme h5, .darktheme h6 {
    font-family: var(--hk-mono) !important;
    color: var(--hk-green) !important;
    letter-spacing: .5px;
}
p, li, span, label, td, th { font-family: var(--hk-mono); }
a { color: var(--hk-green); }
a:hover { color: var(--hk-cyan); }
::selection { background: var(--hk-green); color: #000; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #010402; }
::-webkit-scrollbar-thumb { background: var(--hk-green-dim); border-radius: 0; }
html { scrollbar-color: var(--hk-green-dim) #010402; }

/* global CRT scanline film over the whole site (very subtle) */
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99998;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply; opacity: .45;
}

/* every section / box: dark */
.main-site-content,
.main-site-content > div,
.main-site-content section,
.section-padding,
.counterArea, .work-area, .testimonial, .blogs, .contact, .myclient-area, .pricing-palden,
.darktheme .main-site-content, .darktheme .section-padding {
    background: transparent !important;
}
.main-site-content {
    background:
        radial-gradient(circle at 20% 0%, rgba(0,255,102,.06), transparent 40%),
        linear-gradient(rgba(0,255,102,.035) 1px, transparent 1px) 0 0 / 100% 32px,
        linear-gradient(90deg, rgba(0,255,102,.035) 1px, transparent 1px) 0 0 / 32px 100%,
        var(--hk-bg) !important;
}

/* ---------- Preloader ---------- */
#loader-wrapper .loader-section { background: #000 !important; }
#loader { border-top-color: var(--hk-green) !important; }
#loader:before { border-top-color: var(--hk-cyan) !important; }
#loader:after  { border-top-color: var(--hk-green-dim) !important; }

/* ---------- Sidebar ---------- */
.header, .header.style, .darktheme .header {
    background: linear-gradient(180deg, #020604, #04100a) !important;
    border-right: 1px solid var(--hk-border) !important;
    box-shadow: 4px 0 30px rgba(0,255,102,.07) !important;
}
.header .header-top-area { border-bottom: 1px dashed var(--hk-border) !important; }
.header .header-top-area img {
    border: 2px solid var(--hk-green) !important;
    border-radius: 6px !important;
    box-shadow: var(--hk-glow);
    filter: grayscale(.35) contrast(1.1);
}
.header .header-top-area .name { color: var(--hk-green) !important; font-weight: 700; text-shadow: var(--hk-glow); }
.header .header-top-area .name::before { content: "~/"; color: var(--hk-muted); }
.header #ca-navbar .navbar-nav { text-align: left !important; }
.header .nav-item .nav-link,
.header.style .nav-item .nav-link {
    color: var(--hk-text) !important;
    font-size: 14px;
    text-transform: lowercase;
    padding: 6px 4px !important;
}
.header .nav-item .nav-link::before { content: "$ cd "; color: var(--hk-muted); }
.header .nav-item .nav-link:hover,
.header .nav-item.active .nav-link,
.header .nav-item .nav-link.active {
    color: var(--hk-green) !important;
    text-shadow: var(--hk-glow);
    background: var(--hk-green-faint);
}
.header .header-bottom-area .menu-social-links a { color: var(--hk-green) !important; }
.header .header-bottom-area .menu-social-links a:hover { color: var(--hk-cyan) !important; text-shadow: 0 0 8px var(--hk-cyan); }
.menu-toogle-icon { background: #000 !important; border: 1px solid var(--hk-green); border-radius: 4px !important; box-shadow: var(--hk-glow) !important; }
.menu-toogle-icon #nav-icon3 span { background: var(--hk-green) !important; }

/* ---------- HERO ---------- */
.hk-hero {
    position: relative;
    min-height: 100vh; height: auto !important;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #062514 0%, #010402 70%) !important;
    overflow: hidden;
    padding: 70px 16px;
}
#hk-matrix { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hk-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px);
    animation: hk-flicker 6s infinite steps(1);
}
.hk-hero::after { /* vignette */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 160px 40px #000;
}
.hk-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 780px; min-width: 0; text-align: center; }
.hk-status {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere;
    display: inline-block; font-size: 12px; letter-spacing: 2px; color: var(--hk-green);
    border: 1px solid var(--hk-border); padding: 4px 12px; margin-bottom: 22px;
    background: rgba(0,0,0,.5);
}
.hk-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--hk-green); box-shadow: 0 0 8px var(--hk-green);
    margin-right: 6px; animation: hk-blink 1.2s infinite;
}

/* glitch name */
.hk-glitch {
    position: relative; display: inline-block;
    font-family: var(--hk-mono) !important; font-weight: 800;
    font-size: clamp(34px, 7vw, 76px); line-height: 1.05;
    color: var(--hk-green) !important; text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0,255,102,.8), 0 0 30px rgba(0,255,102,.35);
    margin: 0 0 26px; max-width: 100%; overflow-wrap: anywhere;
}
.hk-hero { overflow-x: hidden; }
.hk-terminal { max-width: 100%; }
.hk-glitch::before, .hk-glitch::after {
    content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
    overflow: hidden; background: transparent;
}
/* glitch slices are hidden most of the time and only "burst" briefly */
.hk-glitch::before { color: var(--hk-cyan); left: 2px;  text-shadow: none; opacity: .85; clip-path: inset(100% 0 0 0); animation: hk-glitch-a 4s infinite steps(1); }
.hk-glitch::after  { color: var(--hk-red);  left: -2px; text-shadow: none; opacity: .85; clip-path: inset(100% 0 0 0); animation: hk-glitch-b 5s infinite steps(1); }

/* terminal window */
.hk-terminal {
    text-align: left; background: rgba(0, 8, 4, .88);
    border: 1px solid var(--hk-border); border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(0,255,102,.12);
    backdrop-filter: blur(2px);
    overflow: hidden;
}
.hk-terminal-bar {
    display: flex; align-items: center; gap: 7px; padding: 9px 14px;
    background: #0b1a12; border-bottom: 1px solid var(--hk-border);
}
.hk-btn { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.hk-red { background: #ff5f57; } .hk-yellow { background: #febc2e; } .hk-green { background: #28c840; }
.hk-terminal-title { flex: 1; text-align: center; font-size: 12px; color: var(--hk-muted); margin-right: 40px; }
.hk-terminal-body { padding: 18px 20px 20px; font-size: 15px; line-height: 1.7; }
.hk-terminal-body p { margin: 0; color: var(--hk-text) !important; word-break: break-word; }
.hk-prompt { color: var(--hk-cyan) !important; margin-right: 6px; }
.hk-out { color: var(--hk-green) !important; padding-left: 14px; margin-bottom: 8px !important; }
#hk-typed { color: #fff !important; text-shadow: var(--hk-glow); }
.hk-cursor { color: var(--hk-green) !important; animation: hk-blink 1s infinite steps(1); font-weight: 700; }
.hk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-left: 14px; }

.hk-cta, .mybtn, .mybtn2, .mybtn-bg, button[type="submit"], .btn-primary {
    font-family: var(--hk-mono) !important;
    display: inline-block;
    background: transparent !important;
    color: var(--hk-green) !important;
    border: 1px solid var(--hk-green) !important;
    border-radius: 2px !important;
    padding: 9px 22px !important;
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; font-size: 13px;
    box-shadow: inset 0 0 0 0 var(--hk-green);
    transition: box-shadow .25s, color .25s, text-shadow .25s !important;
}
.hk-cta:hover, .mybtn:hover, .mybtn2:hover, .mybtn-bg:hover, button[type="submit"]:hover, .btn-primary:hover {
    color: #000 !important; text-shadow: none;
    box-shadow: inset 0 0 0 40px var(--hk-green), var(--hk-glow) !important;
}
.mybtn span, .mybtn2 span { color: inherit !important; background: transparent !important; }
.mybtn::before, .mybtn::after, .mybtn-bg::before, .mybtn-bg::after { display: none !important; }
.hk-cta-ghost { border-style: dashed !important; color: var(--hk-text) !important; }

.hk-socials { margin-top: 26px; }
.hk-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 4px; color: var(--hk-green) !important;
    border: 1px solid var(--hk-border); background: rgba(0,0,0,.55); transition: .25s;
}
.hk-socials a:hover { color: #000 !important; background: var(--hk-green); box-shadow: var(--hk-glow); }
.hk-scroll {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
    font-size: 12px; letter-spacing: 3px; color: var(--hk-muted) !important; text-transform: uppercase;
    animation: hk-bob 2s infinite;
}

/* ---------- Section titles:  "> ABOUT_" ---------- */
.section-title h2 {
    color: var(--hk-green) !important; text-shadow: var(--hk-glow);
    font-size: clamp(24px, 4vw, 34px) !important;
}
.section-title h2::before { content: "> "; color: var(--hk-cyan); }
.section-title h2::after  { content: "_"; animation: hk-blink 1s infinite steps(1); margin-left: 2px; }
.section-title span, .darktheme .section-title span {
    color: rgba(0,255,102,.05) !important;
    font-family: "VT323", var(--hk-mono) !important;
    font-size: clamp(48px, 9vw, 90px) !important;
}

/* ---------- Generic "panel" look for cards ---------- */
.about-box, #services .item, .counter_box, .single-education, .single-skill, .skill-box, .edu-box,
.single-work, .blog-box, .single-review, .slider-item, .single-info, .contact-form,
.pricing-palden .single-plan, .pricing-palden [class*="single"], .myclient-area .item,
.darktheme .about-box, .darktheme #services .item, .darktheme .counter_box, .darktheme .blog-box,
.darktheme .single-review, .darktheme .single-info, .darktheme .single-education {
    background: var(--hk-panel) !important;
    border: 1px solid var(--hk-border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--hk-text) !important;
}
#services .item:hover, .single-work:hover, .blog-box:hover, .counter_box:hover, .single-info:hover {
    border-color: var(--hk-green) !important;
    box-shadow: var(--hk-glow) !important;
    transform: translateY(-3px);
}
#services .item img, .counter_box img { filter: hue-rotate(80deg) saturate(1.4) drop-shadow(0 0 6px rgba(0,255,102,.6)); }
#services .item .title, .counter_box h3, .blog-title, .blog-title a, .single-review .name, .collage-name, .degree { color: var(--hk-green) !important; }
#services .item p, .about-content p, .description, .blog-box p, .single-review .content p { color: var(--hk-text) !important; }
.counter_box .count, .counter-w span { color: #fff !important; text-shadow: var(--hk-glow); font-family: var(--hk-mono) !important; }

/* about - the about text is rich HTML from admin with its own inline fonts/colours */
.about-content, .about-content * {
    font-family: var(--hk-mono) !important;
    color: var(--hk-text) !important;
    background: transparent !important;
    font-size: 14px;
}
.about-content strong, .about-content b, .about-content h1, .about-content h2, .about-content h3,
.about-content h4, .about-content h5,
.about-content .mybtn, .about-content .mybtn span { color: var(--hk-green) !important; }
.about-content .mybtn:hover, .about-content .mybtn:hover span { color: #000 !important; }
.about-box .author-image img {
    border-radius: 4px !important; border: 1px solid var(--hk-green);
    box-shadow: var(--hk-glow); filter: grayscale(.3) contrast(1.1);
}
.about-content .info-list li .title { color: var(--hk-cyan) !important; }
.about-content .info-list li .value { color: var(--hk-text) !important; }

/* resume / skills */
.year, .label { color: var(--hk-cyan) !important; }
.progress { background: #021008 !important; border: 1px solid var(--hk-border); border-radius: 0 !important; }
.progress-bar { background-color: var(--hk-green) !important; box-shadow: var(--hk-glow); }
.progress-circle .background { stroke: #0b2216 !important; }
.progress-circle .foreground, .progress-circle path, .progress-circle circle:last-child { stroke: var(--hk-green) !important; }
.progress-circle text, .progress-circle .percent { fill: var(--hk-green) !important; color: var(--hk-green) !important; }

/* portfolio */
.single-work img { filter: grayscale(.35) contrast(1.05) brightness(.95); transition: filter .3s; }
.single-work .item-hover { background: transparent !important; }
.single-work:hover .item-hover { background: rgba(0, 20, 8, .82) !important; }
.single-work .item-hover a, .work-link { color: var(--hk-green) !important; border-color: var(--hk-green) !important; }

/* testimonials */
.single-review .stars i, .fa-star { color: var(--hk-green) !important; }
.owl-dot span, .owl-dots .owl-dot { background: var(--hk-muted) !important; }
.owl-dot.active span, .owl-dots .owl-dot.active { background: var(--hk-green) !important; }

/* blog */
.post-meta-one, .post-meta-one a, .username, .fa-clock-o, .fa-user { color: var(--hk-muted) !important; }

/* contact */
.home-page-form, .google_map_wrapper, .contact .single-info {
    background: var(--hk-panel) !important;
    border: 1px solid var(--hk-border) !important;
    border-top: 2px solid var(--hk-green) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.home-page-form .form-group, .home-page-form .controls, .home-page-form .row, .home-page-form [class*="col-"] {
    background: transparent !important;
}
.home-page-form .form-control { padding: 10px 12px !important; }
.home-page-form::before { content: "$ ./send_message.sh"; display: block; font-size: 12px; color: var(--hk-muted); margin-bottom: 14px; }
.info-icon, .info-icon i, .single-info i { color: var(--hk-green) !important; background: transparent !important; border-color: var(--hk-green) !important; }
.form-control, .contact-form input, .contact-form textarea, .darktheme .form-control {
    background: #010603 !important; color: var(--hk-green) !important;
    border: 1px solid var(--hk-border) !important; border-radius: 2px !important;
    font-family: var(--hk-mono) !important; caret-color: var(--hk-green);
}
.form-control:focus { border-color: var(--hk-green) !important; box-shadow: var(--hk-glow) !important; }
.form-control::placeholder { color: var(--hk-muted) !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #010603 inset !important; -webkit-text-fill-color: var(--hk-green) !important;
}
.google_map_wrapper iframe { filter: invert(.9) hue-rotate(90deg) saturate(.6); }
/* FIX: the map embed code saved in admin has a fixed 600px width -> page scrolled sideways */
.mapouter, .gmap_canvas, .google_map_wrapper, .google_map_wrapper iframe, .gmap_iframe {
    width: 100% !important; max-width: 100% !important;
}
.mapouter, .gmap_canvas { overflow: hidden !important; }
html, body { overflow-x: hidden; }

/* clients */
.myclient-area img { filter: grayscale(1) brightness(1.6) sepia(1) hue-rotate(70deg) saturate(3); opacity: .75; }
.myclient-area img:hover { opacity: 1; }

/* footer */
.footer { background: #000 !important; border-top: 1px dashed var(--hk-border); color: var(--hk-muted) !important; }
.footer * { color: var(--hk-muted) !important; }
.footer a { color: var(--hk-green) !important; }

/* inner pages (blog list, details, breadcrumbs) */
.breadcrumb-area, .breadcroumb, [class*="breadcrumb"] { background-color: #010603 !important; }
.widget, .sidebar .widget, .blog-details-content, .comment-area { background: var(--hk-panel) !important; border: 1px solid var(--hk-border) !important; color: var(--hk-text) !important; }
table, .table { color: var(--hk-text) !important; }
.swal2-popup { background: #010603 !important; border: 1px solid var(--hk-green) !important; font-family: var(--hk-mono) !important; }
.swal2-title { color: var(--hk-green) !important; }

/* ---------- Animations ---------- */
@keyframes hk-blink   { 50% { opacity: 0; } }
@keyframes hk-bob     { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@keyframes hk-flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: .6; } 98% { opacity: .9; } }
@keyframes hk-glitch-a {
    0%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
    80% { clip-path: inset(10% 0 78% 0); transform: translate(-3px, 0); }
    83% { clip-path: inset(45% 0 40% 0); transform: translate(3px, -1px); }
    86% { clip-path: inset(72% 0 12% 0); transform: translate(-2px, 1px); }
    89% { clip-path: inset(100% 0 0 0); transform: none; }
}
@keyframes hk-glitch-b {
    0%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
    60% { clip-path: inset(62% 0 20% 0); transform: translate(3px, 0); }
    63% { clip-path: inset(8% 0 80% 0);  transform: translate(-3px, 1px); }
    66% { clip-path: inset(35% 0 50% 0); transform: translate(2px, -1px); }
    69% { clip-path: inset(100% 0 0 0); transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    .hk-hero { padding: 80px 16px 70px; }
    .hk-terminal-body { font-size: 13px; padding: 14px; }
    .hk-terminal-title { margin-right: 0; }
    .hk-actions { padding-left: 0; }
}
@media (max-width: 480px) {
    .hk-status { font-size: 10px; letter-spacing: 1px; }
    .hk-prompt { display: block; margin-right: 0; }
}

/* accessibility: honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hk-glitch::before, .hk-glitch::after, .hk-scanlines, .hk-scroll, .hk-dot { animation: none !important; }
    #hk-matrix { display: none; }
}

/* =====================================================================
   "DARK OPS" — scarier extras (v3): boot screen, alert bar, skull,
   red intrusion mode, random screen glitches, crosshair cursor
   ===================================================================== */
body.hk-theme { cursor: crosshair; }
body.hk-theme a, body.hk-theme button, body.hk-theme .hk-cta { cursor: pointer; }
#loader-wrapper { display: none !important; } /* hacker theme uses the boot screen instead */

/* ---------- Boot screen ---------- */
#hk-boot {
    position: fixed; inset: 0; z-index: 2147483000; background: #000;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 6vh 7vw; overflow: hidden; font-family: var(--hk-mono);
    /* safety net: disappears by itself even if JavaScript fails */
    animation: hk-boot-auto-hide .4s ease 7s forwards;
}
#hk-boot::before { /* scanlines */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,255,102,.05) 0 1px, transparent 1px 3px);
}
#hk-boot.hk-boot-done { opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
#hk-boot-log { margin: 0; color: var(--hk-green); font-size: clamp(11px, 1.4vw, 15px); line-height: 1.55; white-space: pre-wrap; background: transparent; border: 0; font-family: inherit; max-width: 100%; }
#hk-boot-log .ok   { color: var(--hk-green); }
#hk-boot-log .warn { color: #ffcc00; }
#hk-boot-log .err  { color: var(--hk-red); text-shadow: 0 0 6px var(--hk-red); }
#hk-boot-log .dim  { color: var(--hk-muted); }
#hk-boot-granted {
    display: none; align-self: center; margin-top: 4vh; position: relative;
    font-size: clamp(30px, 7vw, 84px); font-weight: 800; letter-spacing: 4px;
    color: var(--hk-green); text-shadow: 0 0 18px var(--hk-green), 3px 0 var(--hk-red), -3px 0 var(--hk-cyan);
    border: 3px solid var(--hk-green); padding: 6px 24px; box-shadow: 0 0 30px rgba(0,255,102,.4), inset 0 0 30px rgba(0,255,102,.2);
}
#hk-boot.hk-granted #hk-boot-granted { display: block; animation: hk-shake .35s 2; }
#hk-boot-skip { position: absolute; bottom: 18px; right: 22px; color: var(--hk-muted); font-size: 11px; letter-spacing: 2px; }
@keyframes hk-boot-auto-hide { to { opacity: 0; visibility: hidden; } }
@keyframes hk-shake {
    0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px,-3px); }
    60% { transform: translate(-3px, 3px); } 80% { transform: translate(4px, -1px); }
}

/* ---------- Red "connection traced" bar (bottom ticker) ---------- */
#hk-alert {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    display: flex; align-items: center; gap: 10px; padding: 5px 40px 5px 14px;
    background: linear-gradient(90deg, #3a0010, #1a0008 60%, #3a0010);
    border-top: 1px solid var(--hk-red); color: #ffb3c1; font-family: var(--hk-mono);
    font-size: 12px; letter-spacing: 1px; white-space: nowrap; overflow: hidden;
    box-shadow: 0 -4px 24px rgba(255,46,85,.25);
}
#hk-alert b { color: #fff; }
.hk-alert-blink { color: var(--hk-red); font-size: 15px; animation: hk-blink .8s infinite steps(1); text-shadow: 0 0 8px var(--hk-red); }
.hk-alert-text { display: inline-block; animation: hk-ticker 22s linear infinite; padding-left: 100%; }
#hk-alert-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #ffb3c1; font-size: 20px; line-height: 1; cursor: pointer; }
#hk-alert.hk-hidden { display: none; }
@keyframes hk-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (min-width: 992px) { #hk-alert { left: 260px; } .hk-alert-text { animation: none; padding-left: 0; } }
body.hk-theme .footer { padding-bottom: 40px !important; }

/* ---------- Skull ---------- */
.hk-skull {
    display: block; width: max-content; max-width: 100%; margin: 0 auto 14px; padding: 8px 18px; border: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.85) 30%, transparent 72%);
    color: #3dff8a; font-family: var(--hk-mono); font-size: 13px; line-height: 1.1; font-weight: 700;
    text-shadow: 0 0 6px rgba(0,255,102,.8), 0 0 14px rgba(0,255,102,.35); text-align: left;
    animation: hk-skull-pulse 4s ease-in-out infinite;
}
.hk-skull i { font-style: normal; color: var(--hk-red); text-shadow: 0 0 6px var(--hk-red), 0 0 14px var(--hk-red); animation: hk-eyes 3s infinite; }
@keyframes hk-skull-pulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes hk-eyes { 0%,92%,100% { opacity: 1; } 94%,98% { opacity: .1; } }
@media (max-width: 575px) { .hk-skull { font-size: 9px; } }
@media (max-height: 760px) and (min-width: 992px) { .hk-skull { font-size: 9px; } }
/* keep the hero buttons clear of the bottom warning bar on phones */
@media (max-width: 991px) { body.hk-theme .hk-hero { padding-bottom: 90px; } }

/* ---------- Red intrusion mode (status badge flips) ---------- */
.hk-status.hk-intrusion { color: var(--hk-red) !important; border-color: var(--hk-red) !important; box-shadow: 0 0 14px rgba(255,46,85,.35); }
.hk-status.hk-intrusion .hk-dot { background: var(--hk-red); box-shadow: 0 0 8px var(--hk-red); }
.hk-out-red { color: var(--hk-red) !important; text-shadow: 0 0 6px rgba(255,46,85,.6); }

/* ---------- Random glitch flash (added by JS for ~250ms) ---------- */
.hk-hero.hk-glitching .hk-hero-inner { animation: hk-rgb-split .25s steps(2) 1; }
.hk-hero.hk-glitching::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,46,85,.12) 0 3px, transparent 3px 9px);
    mix-blend-mode: screen;
}
@keyframes hk-rgb-split {
    0%   { transform: translate(-4px, 1px) skewX(-6deg); filter: drop-shadow(4px 0 var(--hk-red)) drop-shadow(-4px 0 var(--hk-cyan)); }
    50%  { transform: translate(5px, -2px) skewX(5deg);  filter: drop-shadow(-5px 0 var(--hk-red)) drop-shadow(5px 0 var(--hk-cyan)); }
    100% { transform: none; filter: none; }
}

/* section titles glitch on hover */
.section-title h2:hover { animation: hk-rgb-split .3s steps(2) 1; }

@media (prefers-reduced-motion: reduce) {
    #hk-boot { display: none !important; }
    .hk-alert-text, .hk-skull, .hk-skull i, .hk-alert-blink { animation: none !important; }
    .hk-hero.hk-glitching .hk-hero-inner { animation: none !important; }
}