.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* * ACTEMEN STUDIO - GLOBAL CSS ENGINE
 * Paste this into Elementor > Site Settings > Custom CSS
 */

/* =========================================
   1. FONT IMPORTS & BASE RESETS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Bonheur+Royale&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,700&display=swap');

:root {
    --actemen-bg: #0A0A0A;
    --actemen-surface: #141517;
    --actemen-text: #F2F4F7;
    --actemen-accent: #FF4F18;
    --font-primary: 'Poppins', sans-serif;
    --font-script: 'Bonheur Royale', cursive;
}

body {
    background-color: var(--actemen-bg);
    color: var(--actemen-text);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar for immersive feel */
::-webkit-scrollbar { width: 0px; background: transparent; }

/* =========================================
   2. EDITORIAL SCRIPT TYPOGRAPHY (i, em)
   ========================================= */
i, em, .editorial-highlight {
    font-family: var(--font-script);
    font-size: 1.85em;
    line-height: 0.6;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    display: inline-block;
    transform: translateY(0.12em);
    color: var(--actemen-accent);
    text-shadow: 0 0 15px rgba(255, 79, 24, 0.4);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
}

i:hover, em:hover, .editorial-highlight:hover {
    text-shadow: 0 0 25px rgba(255, 79, 24, 0.8);
    transform: translateY(0.12em) scale(1.05) rotate(-2deg);
    color: #FFFFFF;
}

/* Script Highlight Underline effect */
.editorial-highlight::before {
    content: '';
    position: absolute;
    bottom: 0.15em;
    left: -2%;
    width: 104%;
    height: 35%;
    background: currentColor;
    opacity: 0.1;
    z-index: -1;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}
.editorial-highlight:hover::before {
    transform: scaleX(1);
}

/* =========================================
   3. ANIMATED GRADIENT TYPOGRAPHY
   ========================================= */
.sys-gradient-dynamic, 
.sys-gradient-dynamic .elementor-heading-title {
    background: linear-gradient(135deg, #FF2E93 0%, #FF8A00 25%, #00F0FF 50%, #7000FF 75%, #FF2E93 100%);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0px 4px 12px rgba(255, 79, 24, 0.2));
    padding-bottom: 0.25rem; /* Prevents descender clipping */
    display: inline-block;
}

@keyframes gradientShift { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

/* =========================================
   4. BRUTALIST SHADOWS & BORDERS
   ========================================= */
/* Structural Inset Borders (No Muddy Drop Shadows) */
.shadow-structural { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.shadow-border-b { box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.1) !important; }
.shadow-border-all { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; }

/* Physics-based Hover Elevations */
.shadow-resting { 
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6) !important; 
    transition: box-shadow 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1) !important; 
}
.shadow-hover-lift {
    transition: box-shadow 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.shadow-hover-lift:hover { 
    box-shadow: 0 16px 32px -10px rgba(0,0,0,0.9) !important; 
    transform: translateY(-6px) !important; 
    z-index: 50;
}
.shadow-floating { box-shadow: 0 32px 64px -16px rgba(0,0,0,0.9) !important; }

/* =========================================
   5. BACKGROUND TEXTURES & EFFECTS
   ========================================= */
.bg-grid { 
    background-size: 60px 60px; 
    background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), 
                      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); 
}

.bg-noise { 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); 
}

/* X-Ray / Diagnostic Mode Overrides */
.diagnostic-mode img { 
    filter: grayscale(100%) contrast(150%) brightness(0.8) sepia(1) hue-rotate(320deg) saturate(5) !important; 
    transition: filter 0.5s ease; 
}
.diagnostic-mode .elementor-container { box-shadow: inset 0 0 0 1px rgba(255, 79, 24, 0.5) !important; }

.scanline { 
    width: 100%; height: 100px; 
    background: linear-gradient(to bottom, transparent, rgba(255,79,24,0.2), transparent); 
    position: absolute; top: -100px; left: 0;
    animation: scan 4s linear infinite; 
    pointer-events: none; z-index: 10; 
}

@keyframes scan { 
    0% { top: -100px; } 
    100% { top: 100%; } 
}

/* =========================================
   6. SVG ANIMATIONS (SNAKE BORDERS)
   ========================================= */
.snake-edge-rect { 
    stroke-dasharray: 40 100; 
    stroke-dashoffset: 0; 
    animation: snakeRect 12s linear infinite; 
}
@keyframes snakeRect { 
    0% { stroke-dashoffset: 140; } 
    100% { stroke-dashoffset: 0; } 
}

.snake-text-path { 
    stroke-dasharray: 100 100; 
    stroke-dashoffset: 100; 
    animation: snakeText 8s ease-in-out infinite alternate; 
}
@keyframes snakeText { 
    0% { stroke-dashoffset: 100; } 
    100% { stroke-dashoffset: 0; } 
}

/* =========================================
   7. FLUID SPACING CLASSES (Use in Advanced CSS Classes)
   ========================================= */
.fluid-px {
    padding-left: clamp(1.25rem, 5vw, 6rem) !important;
    padding-right: clamp(1.25rem, 5vw, 6rem) !important;
}

.fluid-py {
    padding-top: clamp(4rem, 10vh, 8rem) !important;
    padding-bottom: clamp(4rem, 10vh, 8rem) !important;
}

/* Auto-marquee for horizontal lists */
@keyframes marquee { 
    0% { transform: translateX(0%); } 
    100% { transform: translateX(-50%); } 
}
.animate-marquee { animation: marquee 60s linear infinite; }/* End custom CSS */