:root {
    --texture-anodized: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    --font-heading: "Exo 2 Thin", "Manrope", sans-serif;
    --font-body: "Manrope", sans-serif;
    --font-accent: "Alata", "Manrope", sans-serif;
    --font-mono: "Roboto Mono", monospace;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --particle-density: 1;
    --holographic-intensity: 0;
    --border-angle: 0deg;
    --angle: 0deg;
    --base-dark-1: #1a1d24;
    --base-dark-2: #12151b;
    --primary-cyan: #00fff5;
    --glow-cyan: 0 0 8px rgba(0, 255, 245, 0.5), 0 0 16px rgba(0, 255, 245, 0.25);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --core-glow: rgba(0, 255, 245, 0.15);
    --shadow-glow-cyan-md: 0 0 20px rgba(0, 255, 245, 0.25), 0 0 40px rgba(0, 255, 245, 0.12);
    /* Calculator gold system */
    --accent-luxury: #d4a574;
    --accent-luxury-glow: rgba(212, 165, 116, 0.4);
    /* Texture alias */
    --noise: var(--noise-texture);
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #08080a;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: #f0f4f8;
    /*background: radial-gradient( ellipse 160% 120% at -5% 40%, rgba(255, 255, 255, 0.025) 0, rgba(14, 165, 233, 0.015) 30%, rgba(18, 19, 23, 0.9) 60%, #08080a 80% ), radial-gradient( ellipse 140% 160% at 105% 60%, rgba(14, 165, 233, 0.06) 0, rgba(255, 255, 255, 0.02) 25%, rgba(25, 27, 34, 0.7) 60%, #08080a 85% ), linear-gradient( 90deg, #030307 0, #070a10 20%, #0b0e16 40%, #0f121c 60%, #0b0e16 80%, #030307 100% );*/
}

    body.pre-boot {
        overflow: hidden;
        height: 100vh;
    }

}

.flash-overlay,
.noise-overlay,
.overlay {
    inset: 0;
    position: fixed;
}

.layer-new,
body.pre-boot .logo-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 8px 16px -4px rgba(0, 0, 0, 0.8), 0 16px 32px -8px rgba(0, 0, 0, 0.7), 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 60px -15px rgba(0, 255, 245, 0.3), inset 0 2px 1px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

.noise-overlay {
    pointer-events: none;
    z-index: 60;
    opacity: 0.04;
    will-change: opacity;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#fx-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    mix-blend-mode: screen;
}

.overlay {
    z-index: 20;
    background: radial-gradient(circle at 50% 50%, transparent 20%, #000 130%), repeating-linear-gradient( 0deg, transparent 0, transparent 1px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 3px );
    background-size: 100% 100%, 100% 4px;
    transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

    .overlay.faded {
        opacity: 0;
        pointer-events: none;
    }

.flash-overlay {
    z-index: 100;
    background: #fff;
    opacity: 0;
    transform: scale(0);
}

    .flash-overlay.active {
        animation: 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards flash-explode;
    }

.logo-container {
    position: absolute;
    width: 140px;
    height: 140px;
    z-index: 30;
    border-radius: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: 0 0;
    transform: scale(1);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s;
    will-change: transform, filter;
    touch-action: none;
    outline: 0;
    --lx: -12px;
    --ly: -12px;
    --rx: 6px;
    --ry: 6px;
}

.style-layer,
.tech-ring {
    pointer-events: none;
    transition: opacity 0.5s;
}

body.pre-boot .logo-container {
    position: fixed;
    /*top: 50%;
    left: 50%;*/
    transform: translate(-59%, 101%) scale(1);
    margin: 0;
    mix-blend-mode: normal;
    opacity: 0.85;
}

body:not(.pre-boot) .logo-container {
    position: relative;
    margin: 0 auto 2rem;
    transform: scale(1);
}

.tech-ring {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    opacity: 0.15;
    will-change: transform;
    z-index: -1;
    mix-blend-mode: overlay;
}

.logo-container.calibrating .layer-new,
.ring-2 {
    opacity: 0.1;
}

.ring-1 {
    inset: -42px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: conic-gradient( from 0deg, #fff 0deg 40deg, transparent 40deg 70deg, #fff 70deg 120deg, transparent 120deg 200deg, #fff 200deg 240deg, transparent 240deg 360deg );
    -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px) );
    mask: radial-gradient( farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px) );
}

.ring-2 {
    inset: -28px;
    background: conic-gradient( from 90deg, #fff 0deg 10deg, transparent 10deg 30deg, #fff 30deg 50deg, transparent 50deg 150deg, #fff 150deg 190deg, transparent 190deg 360deg );
    -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px) );
    mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px) );
}

.ring-3 {
    inset: -5px;
    background: conic-gradient( from 180deg, #fff 0deg 60deg, transparent 60deg 90deg, #fff 90deg 100deg, transparent 100deg 360deg );
    -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px) );
    mask: radial-gradient( farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px) );
}

.ring-4 {
    inset: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
}

.layer-holographic::before,
.style-layer {
    inset: 0;
    border-radius: 42px;
    position: absolute;
}

.layer-new {
    opacity: 1;
    background: rgba(255, 255, 255, 0.01);
}

.layer-holographic {
    opacity: 0;
    --holographic-intensity: 0;
    background: conic-gradient( from 0deg, rgba(0, 255, 255, calc(var(--holographic-intensity) * 0.03)) 0, rgba(74, 95, 227, calc(var(--holographic-intensity) * 0.02)) 90deg, rgba(255, 255, 255, calc(var(--holographic-intensity) * 0.015)) 180deg, rgba(0, 255, 255, calc(var(--holographic-intensity) * 0.03)) 270deg ), radial-gradient( circle at 25% 15%, rgba(0, 255, 255, 0.15) 0, transparent 30% );
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 calc(8px + var(--holographic-intensity) * 4px) rgba(0, 255, 255, calc(var(--holographic-intensity) * 0.06));
    background-blend-mode: overlay, normal;
}

    .layer-holographic::before {
        content: "";
        background: radial-gradient( ellipse at 20% 20%, rgba(255, 255, 255, 0.15) 0, transparent 40% );
        opacity: 0.6;
    }

.layer-cybernetic {
    opacity: 0;
    background: linear-gradient(135deg, #101318 0, #1a1f28 50%, #0a0d12 100%), radial-gradient(circle at 25% 25%, rgba(0, 255, 255, 0.12), transparent 50%), repeating-linear-gradient( 45deg, transparent 0, rgba(0, 255, 255, 0.05) 1px, transparent 2px, rgba(0, 255, 255, 0.05) 3px, transparent 4px );
    box-shadow: inset -8px -8px 16px rgba(80, 90, 100, 0.25), inset 12px 12px 24px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
    border: 0.5px solid rgba(0, 255, 255, 0.15);
    mix-blend-mode: screen;
}

    .layer-cybernetic::after {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 36px;
        background: radial-gradient( circle at 60% 70%, rgba(255, 255, 255, 0.04) 0, transparent 60% );
        box-shadow: inset 0 2px 4px rgba(0, 255, 255, 0.1);
    }

.layer-depressed {
    opacity: 0;
    background: linear-gradient(145deg, #2d3138 0, #1a1c22 50%, #0f1116 100%), radial-gradient( circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent 50% );
    box-shadow: inset var(--lx) var(--ly) 24px -8px rgba(80, 85, 95, 0.2), inset calc(var(--lx) * 0.3) calc(var(--ly) * 0.3) 8px rgba(90, 95, 105, 0.3), inset 18px 18px 36px -12px rgba(0, 0, 0, 0.7), inset var(--rx) var(--ry) 12px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(60, 65, 75, 0.6);
}

    .layer-depressed::before {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 39px;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.08) 0, transparent 30%, rgba(0, 255, 255, 0.03) 70%, transparent 100% );
        border: 0.25px solid rgba(255, 255, 255, 0.12);
    }

    .layer-depressed::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 34px;
        background: radial-gradient( circle at 35% 35%, rgba(255, 255, 255, 0.06) 0, transparent 60% );
        border: 0.25px solid rgba(0, 255, 255, 0.1);
    }

.logo {
    width: 60%;
    height: auto;
    position: relative;
    z-index: 10;
    filter: brightness(0.68) blur(0.4px);
    opacity: 0.78;
    pointer-events: none;
    transition: filter 0.5s, opacity 0.5s;
    will-change: filter, transform;
}

.hint,
.logo-container::after {
    position: absolute;
    pointer-events: none;
}

.hint {
    bottom: -70px;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: 2s infinite pulse;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
}

.logo-container::after {
    content: "";
    inset: -60px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 30%, rgba(0, 255, 255, 0.15) 0, transparent 40% ), radial-gradient( circle at 70% 70%, rgba(139, 92, 246, 0.12) 0, transparent 40% ), radial-gradient( ellipse at 50% 50%, transparent 30%, rgba(0, 255, 255, 0.03) 50%, transparent 70% );
    opacity: 0;
    z-index: -1;
    filter: blur(20px);
    animation: 8s ease-in-out infinite caustic-pulse;
}

/* 📱 Mobile */
@media (max-width: 768px) {

    body {
        font-size: 14px;
    }

    .hero {
        padding: 1.5rem 1rem;
    }

    .hero-heading {
        padding: 3rem 1.2rem 2rem;
        border-radius: 16px;
    }

    .headline-tech {
        white-space: normal; /* مهم جدا */
        font-size: 2rem;
        text-align: center;
    }

    .headline-primary {
        font-size: 1.5rem;
    }

    .carousel-wrapper {
        margin-top: 2rem;
    }

    .carousel-housing {
        height: 380px;
    }

    .service-card {
        width: 200px;
        height: 300px;
    }

    .card-interface {
        padding: 16px;
    }

    .service-label {
        font-size: 1.2rem;
    }

    .hero-cta {
        margin-top: 2rem;
    }

    .hero-cta-inner {
        padding: 1.5rem;
    }

    .cta-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .trust-bar {
        flex-direction: column;
        padding: 1rem;
    }
}