/* =========================================================
   StoryKo.de | Final Polished Edition
   Crafted for KrubiK / Krubot global launch presence
========================================================= */

:root {
    /* StoryKo.de Native Dark Variables */
    --sk-bg-core: #121212;
    --sk-text-core: #e0e0e0;
    
    /* FA Duotone Variables Baseline */
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.6;

    --primary-magic: #7F00FF;
    --primary-magic-soft: rgba(127, 0, 255, 0.20);
    --secondary-wisdom: #2ECC71;
    --secondary-wisdom-soft: rgba(46, 204, 113, 0.18);
    --rebel-crimson: #E63946;
    --rebel-crimson-soft: rgba(230, 57, 70, 0.18);
    
    /* PrimeAgent: The Absolute Proxy, Precision Executioner */
    --primary-kdrivers: #00E0FF; /* Vibrant, electric, digital precision */
    --primary-kdrivers-soft: rgba(0, 224, 255, 0.20);

    /* KrubiK Drivers: The Foundational Connectors, Underpinning Protocol */
    --primary-primeagent: #002B7A; /* Deep, robust, foundational, systemic bedrock */
    --primary-primeagent-soft: rgba(0, 43, 122, 0.18);

    /* PhantomShell: The Grand Hypnotist, Memory Manipulator & Bypass Architect */
    --primary-phantomshell: #400040; /* Deep, mysterious, hypnotic, accessing hidden layers */
    --primary-phantomshell-soft:  rgba(64, 0, 64, 0.30);

    --text-color: #E0E0E0;
    --text-soft: #B6B6C9;
    --text-dim: #8E8EA3;

    --dark-background: linear-gradient(135deg, #0d0d0d 0%, #121221 35%, #1a1a2e 100%);
    --section-dark: rgba(8, 8, 16, 0.82);
    --card-background: #1f1f3f;
    --mac-header: #1a1a2e;

    --surface-1: rgba(18, 18, 30, 0.82);
    --surface-2: rgba(24, 24, 42, 0.88);
    --surface-3: rgba(10, 10, 18, 0.94);

    --border-soft: rgba(255,255,255,0.08);
    --border-magic: rgba(127, 0, 255, 0.22);

    --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
    --shadow-hard: 0 25px 60px rgba(0,0,0,0.60);
    --shadow-magic: 0 0 30px rgba(127, 0, 255, 0.22);
    --shadow-sage: 0 0 30px rgba(46, 204, 113, 0.18);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --container: 1200px;

    /* HyperBTN Start */
    /* Root Variables for System-Wide Coherence and Thematic Consistency */

    /* The primary magical color, echoing the depths of PhantomShell's domain. */
    --btn-hyper-color-rgb: 64, 0, 64; /* User-defined: 64,0,64 for phantomshell */

    --btn-border-radius: 0.75rem; /* For that perfectly rounded square look */
    --btn-shadow-spread: 15px; /* Spread of the magical shadow */

    /* Neutral tones for the button itself, ensuring it 'cuts' from the background. */
    --btn-background-light: #ffffff; /* Pure white for stark contrast */
    --btn-background-dark: #f0f0f0;  /* Slightly off-white for subtle depth */
    --btn-border-color: rgba(0, 0, 0, 0.1); /* Minimalist border for definition */
    --icon-color-dark: #333333; /* Dark gray for icon clarity and authority */
    --icon-color-light: #555555; /* Slightly lighter gray for secondary icons or hover states */

    /* NEW: Icon color on hover for enhanced personalization and feedback. */
    --btn-icon-color-hover: #cccccc; /* A subtle, lighter gray for icons on hover */
    /* You can change this to any color, e.g., rgba(127, 0, 255, 0.7) for a magical tint */

    --black-bg-on-hover: rgba(5, 5, 8, 1);
    --red-bg-on-hover: rgba(255, 0, 85, 0.9);
    /* HyperBTN END */
}

/* =========================
   RESET & BASE
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
}

body {
    background: var(--dark-background);
    /*color: var(--sk-text-core);*/
    color: var(--text-color);
    min-height: 100vh;
    line-height: 1.75;
    font-family: 'Poppins', sans-serif;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(127, 0, 255, 0.10), transparent 25%),
        radial-gradient(circle at 85% 10%, rgba(46, 204, 113, 0.08), transparent 22%),
        radial-gradient(circle at 50% 85%, rgba(230, 57, 70, 0.08), transparent 20%);
    z-index: -2;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,0.65), transparent 88%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,0.65), transparent 88%);
    z-index: -1;
    opacity: 0.25;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--primary-magic);
    text-decoration: none;
    transition: 0.3s ease;
}

a:hover {
    color: #9e35ff;
    text-shadow: 0 0 10px rgba(127, 0, 255, 0.55);
}

button,
input,
textarea {
    font: inherit;
}

.container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

.font-orbitron {
    font-family: 'Orbitron', sans-serif;
}

.font-oxanium {
    font-family: 'Oxanium', sans-serif !important;
}

.fad-base-colors {
    /* FA Duotone Variables Baseline */
    --fa-primary-color: #00ffcc;
    --fa-secondary-color: #8a2be2;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin-bottom: 1rem;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-shadow: 0 0 18px rgba(127, 0, 255, 0.25);
}

.section-kicker {
    text-align: center;
    color: var(--text-dim);
    font-family: 'Fira Code', monospace;
    font-size: 0.95rem;
    margin-bottom: 3rem;
}

.section-lead {
    max-width: 920px;
    margin: 0 auto 3rem;
    text-align: center;
    color: var(--text-soft);
    font-size: 1.08rem;
}

/* =========================
   HEADER
========================= */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1rem 5%;
    background: rgba(10, 10, 16, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(127, 0, 255, 0.18);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.9rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    row-gap: 0.65rem;
    column-gap: 0.2rem;
    white-space: nowrap;
}

.logo i {
    color: var(--primary-magic);
    text-shadow: 0 0 18px rgba(127, 0, 255, 0.6);
}

.logo span {
    color: var(--primary-magic);
    text-shadow: 0 0 18px rgba(127, 0, 255, 0.55);
}

nav {
    display: flex;
    gap: 1.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

nav a {
    color: #d2d2dd;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

nav a:hover {
    color: var(--primary-magic);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-magic), #5e00c9);
    border: 1px solid transparent;
    color: #fff;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    box-shadow: 0 0 24px rgba(127, 0, 255, 0.35);
}

.btn-primary:hover {
    transform: translateY(-3px);
    border-color: rgba(127, 0, 255, 0.45);
    background: linear-gradient(135deg, #8f2fff, #6200d1);
    box-shadow: 0 0 35px rgba(127, 0, 255, 0.5);
}

.btn-primary.btn-ghost {
    background: transparent;
    border: 1px solid rgba(127, 0, 255, 0.35);
    box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 18px rgba(127, 0, 255, 0.15);
}

.btn-primary.btn-ghost:hover {
    background: rgba(127, 0, 255, 0.10);
}

/* =========================
   HERO
========================= */
#hero {
    position: relative;
    padding: 8rem 1rem 6rem;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(70, 30, 120, 0.35) 0%, rgba(0, 0, 0, 0) 62%),
        linear-gradient(180deg, rgba(10,10,15,0.15), rgba(10,10,15,0));
}

.hero-shell {
    width: min(100%, 1100px);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

.hero-icon-wrapper {
    font-size: clamp(4.6rem, 12vw, 7rem);
    color: var(--primary-magic);
    text-shadow: 0 0 35px rgba(127, 0, 255, 0.7);
    margin-bottom: 1.8rem;
    animation: float-icon 4s ease-in-out infinite alternate;
}

@keyframes float-icon {
    0% { transform: translateY(0); filter: hue-rotate(0deg); }
    100% { transform: translateY(-14px); filter: hue-rotate(12deg); }
}

#hero h1 {
    font-size: clamp(2.4rem, 7vw, 4.9rem);
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 0 25px rgba(127, 0, 255, 0.35);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.04em;
    line-height: 1.06;
}

#hero h1 .glow {
    color: var(--primary-magic);
}

#hero h2 {
    font-size: clamp(1.05rem, 3vw, 1.7rem);
    color: var(--secondary-wisdom);
    margin-bottom: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-shadow: 0 0 14px rgba(46, 204, 113, 0.25);
}

#hero p {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--text-soft);
    margin: 0 auto 2.5rem;
    max-width: 900px;
    line-height: 1.95;
}

.hero-badges {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.4rem;
    flex-wrap: wrap;
}

.badge {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-family: 'Fira Code', monospace;
    font-size: 0.92rem;
    color: #e1e1ea;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01);
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.krubot-icon {

    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 
    * CRITICAL: Cybernetic Power Surge (mix-blend-mode: lighten;) is now ALWAYS active.
    * This ensures the plasma effect is present from the start by choosing the brighter pixel.
    */
    mix-blend-mode: lighten;

    /* Primary Layer: Hyper Cyber Green (The Core Processing Will) */
    --fa-primary-color: #00ff66;
    --fa-primary-opacity: 1.0;

    /* Secondary Layer: Electric Ice Cyan (Holographic Depth) */
    --fa-secondary-color: #00f3ff;
    --fa-secondary-opacity: 0.4; /* Slightly increased from 0.4 for richer violet presence */            

    /* 
     * Dual-stage filtering:
     * 1. A deep, non-saturated dark drop shadow to create a spatial 'gap' from the background.
     * 2. A high-frequency cyan blur to simulate light dispersion.
     */
    filter: drop-shadow(0 8px 12px rgba(5, 2, 15, 0.95)) drop-shadow(0 0 16px rgba(0, 243, 255, 0.85));

    /* Hardware acceleration hints to eliminate layout thrashing during transitions */
    /* GPU rendering optimizations */
    will-change: filter, transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
}

/* 
 * Cybernetic Power Surge on Interaction 
 * Simulates an energy overflow from the Warlord's core.
*/
.go-meet-krubot:hover .krubot-icon {
    /* 
     * The Blending Engine:
     * 'color-dodge' treats the background as a backing light source.
     * It creates an ultra-bright, self-illuminated plasma effect that is physically 
     * impossible to achieve with flat static colors.
     */
    mix-blend-mode: color-dodge;
    /*transform: scale(1.08);*/
    
    /* Layered drop-shadows to prevent muddy color mixing and maximize glowing fidelity */
    /*filter: drop-shadow(0 0 6px rgba(0, 255, 102, 0.65)) drop-shadow(0 0 12px rgba(189, 0, 255, 0.4));*/

    transform: scale(1.1) translateY(-2px);
    filter: drop-shadow(0 8px 12px rgba(5, 2, 15, 0.95)) drop-shadow(0 0 16px rgba(0, 243, 255, 0.85));

    --fa-secondary-opacity: 0.7; /* Increased from 0.4 for richer violet presence */
}

/* =========================
   MONOLITH
========================= */
#monolith {
    padding: 6rem 1rem;
    text-align: center;
    background: radial-gradient(circle at center, rgba(46, 204, 113, 0.08) 0%, transparent 75%);
}

.monolith-container {
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(46, 204, 113, 0.32);
    box-shadow:
        0 0 60px rgba(46, 204, 113, 0.16),
        0 0 28px rgba(127, 0, 255, 0.12),
        0 22px 50px rgba(0,0,0,0.35);
    background: rgba(4, 8, 12, 0.96);
}

.monolith-img {
    width: 100%;
    display: block;
    filter: brightness(0.95) contrast(1.05);
    transition: transform 0.6s ease, filter 0.6s ease;
    object-fit: cover;
}

.monolith-container:hover .monolith-img {
    filter: brightness(1.06) contrast(1.12);
    transform: scale(1.015);
}

.monolith-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3rem 2rem 2.2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.10) 100%);
    text-align: left;
}

.monolith-overlay h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.85rem;
    color: #fff;
    margin-bottom: 0.65rem;
    text-shadow: 0 0 14px rgba(46, 204, 113, 0.25);
}

.monolith-overlay p {
    color: #d0d0da;
    max-width: 920px;
    font-size: 1rem;
    line-height: 1.8;
}

/* =========================
   MANIFESTO
========================= */
#manifesto {
    padding: 6rem 1rem;
    background: rgba(0,0,0,0.38);
    border-top: 1px solid rgba(127,0,255,0.10);
    text-align: center;
}

.manifesto-content {
    max-width: 1080px;
    margin: auto;
}

.dev-brand-container {
    margin-bottom: 2.8rem;
    display: inline-block;
    position: relative;
    width: min(100%, 500px);
}

.dev-brand-logo {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(230, 57, 70, 0.28));
    animation: dev-pulse 3.2s infinite ease-in-out;
}

@keyframes dev-pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 28px rgba(230, 57, 70, 0.25));
    }
    50% {
        transform: scale(1.03);
        filter:
            drop-shadow(0 0 42px rgba(127, 0, 255, 0.42))
            drop-shadow(0 0 18px rgba(46, 204, 113, 0.26));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 28px rgba(230, 57, 70, 0.25));
    }
}

/*.dev-hx-mark {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    color: var(--rebel-crimson);
    text-shadow: 0 0 15px rgba(230, 57, 70, 0.45);
    display: inline-block;
    margin: 1.6rem 0 2rem;
}*/

.dev-hx-mark {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: var(--rebel-crimson);
    text-shadow: 0 0 15px var(--rebel-crimson);
    display: inline-block;
    margin: 2rem 0;
}
.dev-hx-mark.plus {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: rgba(10, 255, 100, 0.95);
    text-shadow: none;
    display: inline-block;
    margin: 0;
}

/* =========================
   ARCHETYPES
   Requires:
   .arch-card > .arch-media > .arch-img
========================= */
.archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 4rem auto 0;
    align-items: stretch;
}

.arch-card {
    background: linear-gradient(180deg, rgba(16, 16, 28, 0.82) 0%, rgba(10, 10, 20, 0.96) 100%);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}

.arch-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 2;
}

.arch-card.nemesis::before {
    background: var(--rebel-crimson);
    box-shadow: 0 0 18px var(--rebel-crimson);
}

.arch-card.amethyst::before {
    background: var(--primary-magic);
    box-shadow: 0 0 18px var(--primary-magic);
}

.arch-card.lazarus::before {
    background: var(--secondary-wisdom);
    box-shadow: 0 0 18px var(--secondary-wisdom);
}

.arch-card.prime::before {
    background: var(--primary-primeagent);
    box-shadow: 0 0 18px var(--primary-primeagent);
}

.arch-card.kdrivers::before {
    background: var(--primary-kdrivers);
    box-shadow: 0 0 18px var(--primary-kdrivers);
}

.arch-card.phantomshell::before {
    background: var(--primary-phantomshell);
    box-shadow: 0 0 18px var(--primary-phantomshell);
}

.arch-card:hover {
    transform: translateY(-10px);
    background: linear-gradient(180deg, rgba(26, 26, 42, 0.9) 0%, rgba(12, 12, 24, 1) 100%);
    box-shadow: 0 22px 46px rgba(0,0,0,0.38);
}

.arch-media {
    width: 100%;
    height: 300px;
    margin-bottom: 1.5rem;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    position: relative;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.02),
        0 0 0 1px rgba(127, 0, 255, 0.03);
}

.arch-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0;
    filter: brightness(0.90) contrast(1.08) saturate(1.03);
    transition: transform 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;
}

.arch-card:hover .arch-img {
    transform: scale(1.05);
    filter: brightness(1.03) contrast(1.14) saturate(1.06);
    box-shadow: 0 0 24px rgba(127, 0, 255, 0.16);
}

.arch-img-nemesis {
    object-position: center 16%;
}

.arch-img-amethyst {
    object-position: center 12%;
}

.arch-img-lazarus {
    object-position: center 18%;
}

.arch-img-prime {
    object-position: center 16%;
}

.arch-img-phantomshell {
    object-position: center 12%;
}

.arch-img-kdrivers {
    object-position: center 18%;
}

.arch-icon {
    /* font-size: 1.05rem; */
    font-size: 2em;
    /* 1.768em; */
    color: #f2f2f2;
    margin-bottom: 0.9rem;
    opacity: 0.96;
}

.arch-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.65rem;
    margin-bottom: 1rem;
    color: #fff;
    line-height: 1.2;
}

.arch-card p {
    font-size: 0.98rem;
    color: #b2b2c2;
    line-height: 1.78;
    max-width: 28ch;
    margin-inline: auto;
}

/* =========================
   ARSENAL / KRUBOT NEXUS
========================= */
#arsenal {
    padding: 6rem 1rem;
    background: linear-gradient(180deg, rgba(10,10,18,0.6), rgba(14,14,26,0.12)), var(--dark-background);
    text-align: center;
}

.nexus-banner {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 4rem;
    display: block;
    border-radius: 22px;
    box-shadow:
        0 0 40px rgba(46, 204, 113, 0.12),
        0 18px 40px rgba(0,0,0,0.32);
    border: 1px solid rgba(46, 204, 113, 0.25);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    object-fit: cover;
    background: rgba(8, 12, 18, 0.85);
}

.nexus-banner:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 0 54px rgba(46, 204, 113, 0.22),
        0 24px 50px rgba(0,0,0,0.36);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.8rem;
    max-width: 1200px;
    margin: auto;
    text-align: left;
}

.feature-item {
    background: linear-gradient(180deg, rgba(24, 24, 46, 0.9), rgba(16, 16, 32, 0.95));
    border: 1px solid rgba(127, 0, 255, 0.12);
    border-radius: 20px;
    padding: 2rem;
    transition: 0.4s ease;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.feature-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127,0,255,0.04), transparent 40%, rgba(46,204,113,0.03));
    pointer-events: none;
}

.feature-item:hover {
    transform: translateY(-6px);
    border-color: rgba(127, 0, 255, 0.28);
    box-shadow: 0 18px 40px rgba(127, 0, 255, 0.12);
}

.feature-item i {
    font-size: 2.2rem;
    color: var(--primary-magic);
    margin-bottom: 1.2rem;
    background: rgba(127,0,255,0.08);
    padding: 1rem;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(127,0,255,0.10);
}

.feature-item h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.8rem;
    font-family: 'Orbitron', sans-serif;
    line-height: 1.3;
}

.feature-item p {
    color: #b0b0c2;
    font-size: 0.98rem;
    line-height: 1.8;
}

/* =========================
   CODEX
========================= */
#codex {
    padding: 6rem 1rem;
    background: #0b0b14;
    border-top: 1px solid rgba(72, 61, 139, 0.25);
    text-align: center;
}

.code-container {
    max-width: 960px;
    margin: 0 auto 2.2rem;
    text-align: left;
    background: #1d1f21;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.8);
    border: 1px solid #333;
    overflow: hidden;
}

.mac-header {
    background: var(--mac-header);
    padding: 0.85rem 1.4rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
}

.mac-dots {
    display: flex;
    gap: 8px;
    margin-right: 15px;
}

.mac-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-r { background: #ff5f56; }
.dot-y { background: #ffbd2e; }
.dot-g { background: #27c93f; }

.code-title {
    color: #888;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
}

pre {
    margin: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: transparent !important;
}

code {
    font-family: 'Fira Code', monospace !important;
    font-size: 1rem !important;
}

.terminal-output {
    max-width: 960px;
    margin: 1.5rem auto 0;
    background: #000;
    border-radius: 12px;
    padding: 1.35rem;
    text-align: left;
    font-family: 'Fira Code', monospace;
    color: var(--secondary-wisdom);
    border: 1px solid #333;
    min-height: 100px;
    display: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* TESTIMONIALS */
#testimonials {
background: rgba(25, 25, 60, 0.4);
padding: 5rem 1rem;
text-align: center;
color: #ddd;
border-bottom: 1px solid rgba(72, 61, 139, 0.2);
}
#testimonials h2 {
font-size: 3rem;
color: #fff;
margin-bottom: 2.5rem;
text-shadow: 0 0 15px var(--primary-magic);
font-family: 'Orbitron', sans-serif;
}
.testimonial-card {
background: rgba(31, 31, 63, 0.7);
border-radius: 20px;
padding: 2rem 1.8rem;
margin: 0 auto 2rem auto;
max-width: 650px;
box-shadow: 0 0 25px rgba(127, 0, 255, 0.4);
position: relative;
font-style: normal;
color: var(--text-color);
border: 1px solid rgba(127, 0, 255, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 0 40px var(--primary-magic);
}
.testimonial-author {
margin-top: 1.5rem;
font-weight: 700;
color: var(--secondary-wisdom);
font-style: normal;
text-align: right;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.5px;
}

/* =========================
   LICENSE
========================= */
#license {
    padding: 6rem 1rem;
    background: radial-gradient(circle at bottom, rgba(46, 204, 113, 0.10) 0%, transparent 60%);
}

.license-box {
    max-width: 1040px;
    margin: auto;
    border: 1px solid rgba(46, 204, 113, 0.35);
    background: rgba(10, 15, 12, 0.72);
    padding: 4rem;
    border-radius: 22px;
    box-shadow: inset 0 0 40px rgba(46, 204, 113, 0.08), 0 18px 44px rgba(0,0,0,0.32);
    position: relative;
    overflow: hidden;
}

.license-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(46,204,113,0.04), transparent 45%, rgba(127,0,255,0.03));
    pointer-events: none;
}

.license-header {
    text-align: center;
    margin-bottom: 3rem;
}

.license-header i {
    font-size: 3.2rem;
    color: var(--secondary-wisdom);
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(46, 204, 113, 0.55);
}

.license-header h2 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.2;
}

.law-item {
    margin-bottom: 2.2rem;
    padding-left: 1.4rem;
    border-left: 3px solid var(--secondary-wisdom);
}

.law-item h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
    font-family: 'Orbitron', sans-serif;
    line-height: 1.35;
}

.law-item p {
    color: #c0c8c2;
    line-height: 1.85;
}

/* =========================
   CONTACT
========================= */
#contact {
    padding: 6rem 1rem;
    background: rgba(5, 5, 10, 0.88);
    border-top: 1px solid rgba(127, 0, 255, 0.18);
    text-align: center;
}

#contact-form {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(20, 20, 30, 0.72);
    padding: 2.5rem;
    border-radius: 18px;
    border: 1px solid rgba(127, 0, 255, 0.22);
    box-shadow: 0 18px 40px rgba(0,0,0,0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 1rem 1.1rem;
    background: rgba(10, 10, 15, 0.88);
    border: 1px solid rgba(127, 0, 255, 0.24);
    color: #fff;
    border-radius: 10px;
    font-size: 1rem;
    transition: 0.3s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-magic);
    box-shadow: 0 0 15px rgba(127, 0, 255, 0.35);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: #75758b;
}

#contact-form button {
    margin-top: 0.5rem;
    padding: 1rem;
    font-size: 1rem;
    justify-content: center;
}

/* =========================
   FOOTER
========================= */
footer {
    background: #050508;
    padding: 4rem 1.5rem 2rem;
    text-align: center;
    border-top: 1px solid #20202a;
}

.footer-brand {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.4rem;
}

.footer-brand span {
    color: var(--primary-magic);
}

.footer-tagline {
    color: #8d8da0;
    font-style: italic;
    margin-bottom: 2rem;
    display: block;
}

.footer-links {
    margin-bottom: 2.3rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: #b2b2c0;
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-links a:hover {
    color: var(--primary-magic);
}

.copyright {
    color: #5d5d70;
    font-size: 0.92rem;
    font-family: 'Fira Code', monospace;
    line-height: 1.9;
}

.copyright strong {
    color: var(--primary-magic);
}

/* The Hyper-DX Button: A Micro-Command-Center */

.phantomshell > .hyper-btn {
  --btn-hyper-color-hex: var(--primary-phantomshell);
    --fa-primary-color: #FFF; /* فیروزه‌ای سینماتیک هماهنگ با خط بالای کارت */
    --fa-secondary-color: var(--secondary-wisdom); /* ارغوانی تاریکِ KrubiK در هسته */
}
.phantomshell:hover > .hyper-btn .krubik-crew-symbol, .phantomshell > .hyper-btn:hover, .phantomshell .krubik-crew-symbol:hover {
    --fa-primary-color: #FFF; /* هسته به بالاترین حرارت می‌رسد */
    --fa-secondary-color: var(--rebel-crimson); 

    --fa-primary-color: var(--red-bg-on-hover); /* هسته به بالاترین حرارت می‌رسد */
    --fa-secondary-color: var(--black-bg-on-hover);
}

.kdrivers > .hyper-btn {
    --btn-hyper-color-hex: var(--primary-kdrivers);
    --fa-primary-color: var(--primary-primeagent); /* فیروزه‌ای سینماتیک هماهنگ با خط بالای کارت */
    --fa-secondary-color: rgb(181, 230, 29); /* ارغوانی تاریکِ KrubiK در هسته */
}
.kdrivers:hover > .hyper-btn .krubik-crew-symbol, .kdrivers > .hyper-btn:hover, .kdrivers .krubik-crew-symbol:hover {
    --fa-primary-color: var(--black-bg-on-hover); /* هسته به بالاترین حرارت می‌رسد */
    /*--fa-primary-color: var(--primary-phantomshell); /* هسته به بالاترین حرارت می‌رسد */*/
    --fa-secondary-color: #5BD6FF; 
    --fa-secondary-color: #cccccc;
}

.prime > .hyper-btn {
  --btn-hyper-color-hex: var(--primary-primeagent);
  --fa-primary-color: rgba(45, 55, 65, 1); /* بدنه‌ی وایزر: ارغوانی عمیق کروبیک */
    --fa-secondary-color: var(--primary-kdrivers); /* شیشه‌ی وایزر: بنفش هیپنوتیزم‌کننده */
}
.prime:hover > .hyper-btn .krubik-crew-symbol, .prime > .hyper-btn:hover, .prime .krubik-crew-symbol:hover {
    --fa-primary-color: var(--black-bg-on-hover); /* هسته به بالاترین حرارت می‌رسد */
    --fa-secondary-color: var(--red-bg-on-hover); 
}

.nemesis > .hyper-btn {
  --btn-hyper-color-hex: var(--rebel-crimson);
  --fa-primary-color: rgba(45, 55, 65, 1); /* بدنه‌ی وایزر: ارغوانی عمیق کروبیک */
    --fa-secondary-color: var(--primary-kdrivers); /* شیشه‌ی وایزر: بنفش هیپنوتیزم‌کننده */
}
.nemesis > .hyper-btn .krubik-crew-symbol {
    color: #f2f2f2;
}
.nemesis:hover > .hyper-btn .krubik-crew-symbol, .nemesis > .hyper-btn:hover, .nemesis .krubik-crew-symbol:hover {
    --fa-primary-color: var(--black-bg-on-hover); /* هسته به بالاترین حرارت می‌رسد */
    --fa-secondary-color: var(--red-bg-on-hover); 
    color: var(--black-bg-on-hover);
}

.nemesis:hover > .hyper-btn > i.fab.krubik-crew-symbol {
    filter: 
        drop-shadow(0 0 15px var(--rebel-crimson))
        drop-shadow(0 0 35px var(--rebel-crimson-soft))
        drop-shadow(0 0 60px var(--rebel-crimson));
        
    transform: scale(1.2) rotate(90deg); /* تغییر بُعد و آزادسازی انرژی */
}

.amethyst > .hyper-btn {
  --btn-hyper-color-hex: var(--primary-magic);
    --fa-primary-color: rgba(30, 25, 40, 1); /* بدنه‌ی وایزر: ارغوانی عمیق کروبیک */
  --fa-secondary-color: rgba(160, 32, 240, 0.9); /* شیشه‌ی وایزر: بنفش هیپنوتیزم‌کننده */

  --fa-primary-color: var(--black-bg-on-hover); /* بدنه‌ی وایزر: ارغوانی عمیق کروبیک */
    --fa-secondary-color: rgba(160, 32, 240, 0.9); /* شیشه‌ی وایزر: بنفش هیپنوتیزم‌کننده */
}
.amethyst:hover > .hyper-btn .krubik-crew-symbol, .amethyst > .hyper-btn:hover, .amethyst .krubik-crew-symbol:hover {
    --fa-primary-color: var(--black-bg-on-hover); /* هسته به بالاترین حرارت می‌رسد */
    --fa-secondary-color: var(--red-bg-on-hover); 
}

.lazarus > .hyper-btn {
  --btn-hyper-color-hex: var(--secondary-wisdom);
  --fa-primary-color: rgba(20, 25, 35, 1); /* بدنه‌ی وایزر: ارغوانی عمیق کروبیک */
    --fa-secondary-color: rgba(10, 255, 100, 0.95); /* شیشه‌ی وایزر: بنفش هیپنوتیزم‌کننده */
}
.lazarus:hover > .hyper-btn .krubik-crew-symbol, .lazarus > .hyper-btn:hover, .lazarus .krubik-crew-symbol:hover {
    --fa-primary-color: rgb(0, 180, 180); /* هسته به بالاترین حرارت می‌رسد */
    /*--fa-primary-color: var(--primary-kdrivers);*/
    --fa-secondary-color: rgb(10, 10, 15); 
}

.hyper-btn {
  /* Dimensional Integrity: Small, compact, and precisely engineered. */
  width: 38px; /* Commander's choice for a 'small and neat' button */
  height: 38px; /* Perfect square for structural elegance */
  border-radius: 18px; /* Softened corners: 4-corner-rounded, modern and precise */
  
  /* Visual Separation: Ensuring the button 'cuts' from the background. */
  background-color: transparent; /* var(--btn-background-light) --- Pure white to detach from the backdrop */
  border: 1px solid var(--btn-border-color); /* A subtle border for crisp definition */
  
  /* Shadow Manifestation: A glow in the hue of primary-magic, asserting presence. */
  /* Using RGB for the box-shadow for a smooth, professional glow effect. */
  /*box-shadow: 0 4px 15px var(--btn-hyper-color-hex);*/
  /*rgba(var(--btn-hyper-color-hex), 0.3); /* Initial, subtle glow */*/
  
  /* Icon Deployment: Strategic positioning for single or dual FA icons. */
  display: flex; /* Flexbox for superior icon alignment */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  gap: 5px; /* Minimal gap between two icons, maintaining unity */
  
  /* Interaction Dynamics: Responsive and engaging. */
  cursor: pointer; /* Indicating interactivity to the user */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth, professional transition */
  
  /* Font and Text Properties for overall aesthetic */
  font-weight: 600; /* Slightly bolder for presence */
  color: var(--icon-color-dark); /* Default text/icon color */
}

/* Focus State: Critical for keyboard navigation and accessibility */
.hyper-btn:focus, .hyper-btn:active {
  outline: 2px solid var(--btn-hyper-color-hex);
  /*rgba(var(--btn-hyper-color-hex), 0.7); /* Clear focus indicator */*/
  outline-offset: 2px; /* Space between button and outline */
}

/* Hyper-DX Hover State: Elevating the Command Experience */
.hyper-btn:hover {
  transform: translateY(-2px); /* A subtle lift, indicating readiness for command */
  /* Enhanced shadow, a deeper manifestation of primary-magic. */
  /*box-shadow: 0 8px 20px var(--btn-hyper-color-hex);*/
  /*rgba(var(--btn-hyper-color-hex), 0.5); /* More pronounced glow */*/
  background-color: var(--btn-background-dark); /* Slight background shift for feedback */
  color: #000;
}

/* Icon Styling: Ensuring clarity and presence within the command button. */
.hyper-btn i {
  color: var(--icon-color-dark); /* Dark gray for high readability and authority */
  /*font-size: 18px;  Optimal size for visibility within the 50px button */
  line-height: 1; /* Ensuring precise vertical alignment */
  /* Transition for icons on hover, if desired for future enhancements */
  transition: color 0.3s ease;
}

/* Optional: Icon color change on button hover for dynamic feedback */
.hyper-btn:hover i {
  color: var(--icon-color-light); /* Slightly lighter icons on hover for contrast */
}

.krubik-crew-symbol {
    font-size: 2.5rem; /* ابعاد دقیق برای نشستن در بالای تایتل */
    margin-bottom: 1rem;
    
    /* انسجام معماری با رنگ‌های کارت تو */
    --fa-secondary-opacity: 1;

    /* تبدیل نیت به انرژی جنبشی خام */
    filter: 
        drop-shadow(0 0 10px var(--btn-hyper-color-hex)) 
        drop-shadow(0 0 25px rgba(64, 0, 64, 0.9));
        
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* تنفسِ رآکتور در حالتِ Idle */
    animation: core-levitate 1s infinite alternate ease-in-out;
    transform: translateX(-6px);
}

/* لحظه‌ی Execution (Hover) */
.krubik-crew-symbol:hover, .hyper-btn:focus > i.fa-duotone.krubik-crew-symbol, .hyper-btn:active > i.fa-duotone.krubik-crew-symbol {
    filter: 
        drop-shadow(0 0 15px #FFFFFF)
        drop-shadow(0 0 35px #5BD6FF)
        drop-shadow(0 0 60px rgba(64, 0, 64, 1));
        
    transform: scale(1.2) rotate(90deg); /* تغییر بُعد و آزادسازی انرژی */
}

@keyframes core-levitate {
    0% { transform: translateX(-6px) translateY(-8px) scale(1); filter: drop-shadow(0 0 10px var(--btn-hyper-color-hex)); } 
    100% { transform: translateX(-6px) translateY(-18px) scale(1.05); filter: drop-shadow(0 5px 20px var(--btn-hyper-color-hex)); }/*rgba(91, 214, 255, 0.8)*/
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px) {
    .archetype-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    header {
        padding-inline: 1.25rem;
    }

    #hero h1 {
        font-size: clamp(2.4rem, 6vw, 3.6rem);
    }

    .monolith-overlay {
        padding: 2rem 1.5rem;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
    }

    .license-box {
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    .container {
        width: min(100% - 1.2rem, var(--container));
    }

    header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    nav {
        gap: 0.85rem 1rem;
    }

    .btn-primary {
        padding: 0.85rem 1.25rem;
        font-size: 0.9rem;
    }

    #hero {
        padding: 6.5rem 1rem 4.2rem;
    }

    #hero p {
        font-size: 1rem;
        line-height: 1.9;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 360px);
        margin-inline: auto;
    }

    .hero-actions .btn-primary {
        width: 100%;
    }

    .badge {
        border-radius: 14px;
    }

    /* Monolith */
    .monolith-container {
        border-radius: 16px;
    }

    .monolith-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .monolith-overlay {
        position: static;
        background: linear-gradient(to bottom, rgba(12,12,18,0.95), rgba(6,6,10,0.98));
        padding: 1.5rem 1.1rem 1.6rem;
        text-align: center;
    }

    .monolith-overlay h3 {
        font-size: 1.3rem;
    }

    .monolith-overlay p {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    /* Brand */
    .dev-brand-container {
        width: min(100%, 340px);
        margin-bottom: 2rem;
    }

    .dev-hx-mark {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Archetypes */
    .archetype-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2.5rem;
    }

    .arch-card {
        padding: 1.2rem;
        border-radius: 16px;
    }

    .arch-media {
        width: 100%;
        height: clamp(240px, 58vw, 340px);
        margin-bottom: 1.15rem;
        border-radius: 12px;
    }

    .arch-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .arch-img-nemesis {
        object-position: center 12%;
    }

    .arch-img-amethyst {
        object-position: center 10%;
    }

    .arch-img-lazarus {
        object-position: center 15%;
    }

    .arch-card h3 {
        font-size: 1.45rem;
    }

    .arch-card p {
        font-size: 0.95rem;
        line-height: 1.75;
        max-width: 100%;
    }

    /* Nexus */
    .nexus-banner {
        object-fit: contain;
        border-radius: 16px;
        margin-bottom: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-item {
        padding: 1.4rem;
        border-radius: 16px;
    }

    .feature-item i {
        font-size: 1.8rem;
        padding: 0.9rem;
        margin-bottom: 1rem;
    }

    /* Code */
    .code-container {
        border-radius: 14px;
    }

    .mac-header {
        padding: 0.75rem 1rem;
    }

    code {
        font-size: 0.88rem !important;
    }

    .license-box {
        padding: 1.6rem 1.2rem;
        border-radius: 18px;
    }

    .law-item {
        padding-left: 1rem;
    }

    #contact-form {
        padding: 1.5rem 1rem;
    }

    .footer-links {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    #hero h1 {
        font-size: 2rem;
    }

    .hero-icon-wrapper {
        font-size: 4.8rem;
    }

    .hero-badges {
        gap: 0.8rem;
    }

    .badge {
        width: 100%;
        justify-content: center;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .arch-card {
        padding: 1rem;
    }

    .arch-media {
        height: clamp(220px, 62vw, 290px);
        border-radius: 10px;
    }

    .arch-img {
        border-radius: 8px;
    }

    .arch-card h3 {
        font-size: 1.2rem;
    }

    .arch-card p {
        font-size: 0.88rem;
        line-height: 1.72;
    }

    .footer-brand {
        font-size: 1.7rem;
    }
}