:root {
    --bg: #ffffff;
    --bg-secondary: #f2f9ff;
    --text: #002244;
    --text-secondary: #003366;
    --accent: #3399ff;
    --accent-rgb: 51, 153, 255;
    --accent-glow: #3399ff66;
    --accent-glow-strong: #3399ffaa;
    --accent-glow-text: #003366;
    --accent-dark: #003366;
    --border: #3399ff44;
    --border-strong: #3399ff88;
    --shadow: #3399ff22;
    --scroll-track: #e0e0e0;
    --scroll-thumb: #3399ff;
    --header-bg: rgba(245, 252, 255, 0.9);
    --nav-bg: rgba(0, 51, 102, 0.05);
    --nav-hover-bg: rgba(0, 51, 102, 0.12);
    --nav-text: #003366;
    --line-light: #ffffff;
    --line-dark: #222222;
    --card-bg: rgba(240, 248, 255, 0.65);
    --footer-bg: rgba(245, 252, 255, 0.9);
}
[data-theme="Sunset Industrial"] {
    --bg: #2f3a3f;
    --bg-secondary: #39464c;
    --text: #ebebeb;
    --text-secondary: #ffc300;
    --accent: #ff8300;
    --accent-alt: #ffc300;
    --accent-dark: #cc6700;
    --accent-rgb: 255, 131, 0;
    --accent-glow: #ff830044;
    --accent-glow-strong: #ff830088;
    --accent-glow-text: #ff8300;
    --border: #424d54;
    --border-strong: #ff830066;
    --shadow: #ff830022;
    --scroll-track: #313e44;
    --scroll-thumb: #ff8300;
    --header-bg: #2f3a3f;
    --footer-bg: #39464c;
    --card-bg: #39464c;
    --nav-bg: #2f3a3f;
    --nav-hover-bg: #ff830011;
    --nav-text: #ffc300;
    --line-light: #ffc30099;
    --line-dark: #232b2e;
    --glow-box: 0 0 14px #ff830044;
    --glow-text: 0 0 6px #ffc30077;
}
[data-theme="Sunset Modern Dark"] {
    --bg: #2f3a3f;
    --bg-secondary: #38444a;
    --text: #ebebeb;
    --text-secondary: #ffc300;
    --accent: #ff8300;
    --accent-alt: #ffc300;
    --accent-dark: #cc6700;
    --accent-rgb: 255,131,0;
    --accent-glow: #ff830044;
    --accent-glow-strong: #ff830088;
    --accent-glow-text: #ffc300;
    --border: #424d54;
    --border-strong: #ff830066;
    --shadow: #ff830022;
    --scroll-track: #39464c;
    --scroll-thumb: #ff8300;
    --header-bg: #2f3a3f;
    --footer-bg: #38444a;
    --card-bg: #38444a;
    --nav-bg: #2f3a3f;
    --nav-hover-bg: #ff830012;
    --nav-text: #ffc300;
    --line-light: #ffc30099;
    --line-dark: #232b2e;
    --glow-box: 0 0 14px #ff830044;
    --glow-text: 0 0 8px #ffc30088;
}
[data-theme="Sunset Modern Light"] {
    --bg: #ebebeb;
    --bg-secondary: #ffc30022;
    --text: #2f3a3f;
    --text-secondary: #ff8300;
    --accent: #ff8300;
    --accent-alt: #ffc300;
    --accent-dark: #b95d00;
    --accent-rgb: 255,131,0;
    --accent-glow: #ff830066;
    --accent-glow-strong: #ff8300bb;
    --accent-glow-text: #ff8300;
    --border: #c1b099;
    --border-strong: #ff830066;
    --shadow: #ff830022;
    --scroll-track: #e3dfd4;
    --scroll-thumb: #ff8300;
    --header-bg: #ff830012;
    --footer-bg: #ffc30022;
    --card-bg: #fff4e3;
    --nav-bg: #ebebeb;
    --nav-hover-bg: #ff830010;
    --nav-text: #ff8300;
    --line-light: #ffc30099;
    --line-dark: #2f3a3f;
    --glow-box: 0 0 14px #ff830033;
    --glow-text: 0 0 8px #ff830099;
}
[data-theme="Ebook Paper"] {
    --bg: #fdf6e3;
    --bg-secondary: #f9eec3;
    --text: #2e2b23;
    --text-secondary: #655c41;
    --accent: #a46a00;
    --accent-dark: #825100;
    --accent-rgb: 164,106,0;
    --accent-glow: #a46a0033;
    --accent-glow-strong: #a46a0066;
    --accent-glow-text: #a46a00;
    --border: #e8d3a8;
    --border-strong: #ccb06c;
    --shadow: #f0e7ca;
    --header-bg: #f6ecd4;
    --footer-bg: #f3e3b9;
    --card-bg: #f9eec3;
    --nav-bg: #fdf6e3;
    --nav-hover-bg: #f5e5bc;
    --nav-text: #825100;
    --line-light: #e2d5b0;
    --line-dark: #c1a768;
    --scroll-track: #f3e3b9;
    --scroll-thumb: #a46a00;
}
[data-theme="Ebook Sepia"] {
    --bg: #f5e5bc;
    --bg-secondary: #efe2c6;
    --text: #2e2b23;
    --text-secondary: #6b624a;
    --accent: #b47e16;
    --accent-dark: #7a570a;
    --accent-rgb: 180,126,22;
    --accent-glow: #b47e1633;
    --accent-glow-strong: #b47e1666;
    --accent-glow-text: #b47e16;
    --border: #e0ce99;
    --border-strong: #c5a95c;
    --shadow: #ebd9ab;
    --header-bg: #f3deb7;
    --footer-bg: #e7c97b;
    --card-bg: #efe2c6;
    --nav-bg: #f5e5bc;
    --nav-hover-bg: #e7c97b;
    --nav-text: #7a570a;
    --line-light: #dfc98a;
    --line-dark: #b49754;
    --scroll-track: #e7c97b;
    --scroll-thumb: #b47e16;
}
[data-theme="OLED"] {
    --bg: #000000;
    --bg-secondary: #161819;
    --text: #e6e6e6;
    --text-secondary: #a7a7a7;
    --text-dark: #161819;
    --accent: #30d9fa;
    --accent-dark: #1785b5;
    --accent-rgb: 48, 217, 250;
    --accent-glow: #30d9fa55;
    --accent-glow-strong: #30d9fabf;
    --accent-glow-text: #30d9fa;
    --border: #222b2e;
    --border-strong: #30d9fa99;
    --shadow: #30d9fa1a;
    --scroll-track: #101014;
    --scroll-thumb: #30d9fa;
    --header-bg: #070808;
    --footer-bg: #090909;
    --card-bg: #161819;
    --nav-bg: #000000;
    --nav-hover-bg: #1b2730;
    --nav-text: #30d9fa;
    --line-light: #30d9fa44;
    --line-dark: #191e21;
    --glow-box: 0 0 20px #30d9fa80;
    --glow-text: 0 0 10px #30d9fa80;
}
[data-theme="Executive Dark"] {
    --bg: #0d1117;
    --bg-secondary: #161b22;
    --text: #f0f0f0;
    --text-secondary: #d0d0d0;
    --accent: #1f6feb;
    --accent-dark: #1749a0;
    --accent-rgb: 31, 111, 235;
    --accent-glow: #1f6feb33;
    --accent-glow-strong: #1f6feb77;
    --accent-glow-text: #1f6feb;
    --border: #2b313c;
    --border-strong: #3a3f4b;
    --shadow: rgba(0, 0, 0, 0.3);
    --nav-bg: #0d1117;
    --nav-hover-bg: #1a1f29;
    --nav-text: #f0f0f0;
    --card-bg: #161b22;
    --header-bg: #0d1117;
    --footer-bg: #0d1117;
    --scroll-track: #1a1f29;
    --scroll-thumb: #2d384a;
    --line-light: #f0f0f055;
    --line-dark: #0d1117;
    --glow-box: 0 0 12px rgba(31, 111, 235, 0.3);
    --glow-text: 0 0 6px rgba(31, 111, 235, 0.4);
}
[data-theme="Executive Light"] {
    --bg: #ffffff;
    --bg-secondary: #f2f4f8;
    --text: #0d1117;
    --text-secondary: #4a4a4a;
    --accent: #1f6feb;
    --accent-dark: #1749a0;
    --accent-rgb: 31, 111, 235;
    --accent-glow: #1f6feb22;
    --accent-glow-strong: #1f6feb55;
    --accent-glow-text: #1f6feb;
    --border: #d8dee9;
    --border-strong: #c5ccd6;
    --shadow: rgba(0, 0, 0, 0.08);
    --nav-bg: #ffffff;
    --nav-hover-bg: #f0f4ff;
    --nav-text: #0d1117;
    --card-bg: #f9fafa;
    --header-bg: #ffffff;
    --footer-bg: #f2f4f8;
    --scroll-track: #f5f5f5;
    --scroll-thumb: #cfd8e0;
    --line-light: #dddddd;
    --line-dark: #ffffff;
    --glow-box: 0 0 6px rgba(31, 111, 235, 0.2);
    --glow-text: 0 0 4px rgba(31, 111, 235, 0.3);
}
[data-theme="dark"] {
    --bg: #0a0a1a;
    --bg-secondary: #11182a;
    --text: #cce7ff;
    --text-secondary: #99bbcc;
    --accent: #66b2ff;
    --accent-rgb: 102, 178, 255;
    --accent-glow: #66b2ff66;
    --accent-glow-strong: #66b2ffaa;
    --accent-glow-text: #66b2ff;
    --accent-dark: #66b2ff;
    --border: #66b2ff33;
    --border-strong: #66b2ff99;
    --shadow: #66b2ff22;
    --scroll-track: #0a0a0a;
    --scroll-thumb: #66b2ff;
    --header-bg: rgba(10, 20, 40, 0.7);
    --nav-bg: rgba(51, 102, 153, 0.05);
    --nav-hover-bg: rgba(51, 102, 153, 0.15);
    --nav-text: #cceeff;
    --line-light: #cccccc;
    --line-dark: #111111;
    --card-bg: rgba(20, 30, 45, 0.8);
    --footer-bg: rgba(15, 20, 35, 0.8);
}
[data-theme="Cyber"] {
    --bg: #0a0a0a;
    --bg-secondary: #111;
    --text: #00f0ff;
    --text-secondary: #ccf;
    --accent: #00f0ff;
    --accent-rgb: 0, 240, 255;
    --accent-glow: #00f0ff88;
    --accent-glow-strong: #00f0ff66;
    --accent-glow-text: #00f0ff;
    --accent-dark: #00f0ff;
    --border: #00f0ff55;
    --border-strong: #00f0ff88;
    --shadow: #00f0ff22;
    --scroll-track: #0a0a0a;
    --scroll-thumb: #00f0ff;
    --header-bg: #0a0a0a;
    --line-light: #cccccc;
    --line-dark: #111111;
    --nav-bg: #0a0a0a;
    --nav-hover-bg: rgba(0, 240, 255, 0.12);
    --nav-text: #00f0ff;
    --card-bg: #111111;
    --footer-bg: #0a0a0a;
    --glow-box: 0 0 18px #00f0ff88;
    --glow-text: 0 0 6px #00f0ffaa;
}
[data-theme="Black Red"] {
    --bg: #000000;
    --bg-secondary: #121212;
    --text: #ff4444;
    --text-secondary: #ff6666;
    --accent: #ff1a1a;
    --accent-rgb: 255, 26, 26;
    --accent-glow: #ff1a1a77;
    --accent-glow-strong: #ff1a1a99;
    --accent-glow-text: #ff4d4d;
    --accent-dark: #cc0000;
    --border: #ff1a1a44;
    --border-strong: #ff1a1a99;
    --shadow: #ff1a1a22;
    --scroll-track: #1a1a1a;
    --scroll-thumb: #ff1a1a;
    --header-bg: #050505;
    --nav-bg: #000000;
    --nav-hover-bg: rgba(255, 26, 26, 0.15);
    --nav-text: #ff4d4d;
    --line-light: #ff6666;
    --line-dark: #0f0f0f;
    --card-bg: #1b1b1b;
    --footer-bg: #0a0a0a;
    --glow-box: 0 0 18px #ff1a1a88;
    --glow-text: 0 0 6px #ff1a1acc;
}
[data-theme="LimeBlue"] {
    --bg: #0f1b2c;
    --bg-secondary: #192b40;
    --text: #aaff00;
    --text-secondary: #d6ff66;
    --accent: #aaff00;
    --accent-rgb: 170, 255, 0;
    --accent-glow: #aaff0088;
    --accent-glow-strong: #aaff0066;
    --accent-glow-text: #aaff00;
    --accent-dark: #88cc00;
    --border: #aaff0055;
    --border-strong: #aaff0088;
    --shadow: #aaff0022;
    --scroll-track: #102030;
    --scroll-thumb: #aaff00;
    --header-bg: #0f1b2c;
    --line-light: #eaffaa;
    --line-dark: #101010;
    --nav-bg: #0f1b2c;
    --nav-hover-bg: rgba(170, 255, 0, 0.12);
    --nav-text: #aaff00;
    --card-bg: #111d2b;
    --footer-bg: #0f1b2c;
    --glow-box: 0 0 18px #aaff0088;
    --glow-text: 0 0 6px #aaff00aa;
}
[data-theme="Charcoal Gold"] {
    --bg: #121212;
    --bg-secondary: #1a1a1a;
    --text: #ffbf00;
    --text-secondary: #ffe066;
    --accent: #ffbf00;
    --accent-rgb: 255, 191, 0;
    --accent-glow: #ffbf0088;
    --accent-glow-strong: #ffbf0066;
    --accent-glow-text: #ffbf00;
    --accent-dark: #cc9900;
    --border: #ffbf0055;
    --border-strong: #ffbf0088;
    --shadow: #ffbf0022;
    --scroll-track: #1a1a1a;
    --scroll-thumb: #ffbf00;
    --header-bg: #121212;
    --line-light: #ffeeaa;
    --line-dark: #1a1a1a;
    --nav-bg: #121212;
    --nav-hover-bg: rgba(255, 191, 0, 0.12);
    --nav-text: #ffbf00;
    --card-bg: #1e1e1e;
    --footer-bg: #121212;
    --glow-box: 0 0 18px #ffbf0088;
    --glow-text: 0 0 6px #ffbf00aa;
}
[data-theme="Slate Purple"] {
    --bg: #1e1f2f;
    --bg-secondary: #27283d;
    --text: #cc66ff;
    --text-secondary: #e0b3ff;
    --accent: #cc66ff;
    --accent-rgb: 204, 102, 255;
    --accent-glow: #cc66ff88;
    --accent-glow-strong: #cc66ff66;
    --accent-glow-text: #cc66ff;
    --accent-dark: #e0b3ff;
    --border: #cc66ff55;
    --border-strong: #cc66ff88;
    --shadow: #cc66ff22;
    --scroll-track: #222234;
    --scroll-thumb: #cc66ff;
    --header-bg: #1e1f2f;
    --line-light: #f5d6ff;
    --line-dark: #1a1a2a;
    --nav-bg: #1e1f2f;
    --nav-hover-bg: rgba(204, 102, 255, 0.12);
    --nav-text: #cc66ff;
    --card-bg: #2a2b3f;
    --footer-bg: #1e1f2f;
    --glow-box: 0 0 18px #cc66ff99;
    --glow-text: 0 0 6px #cc66ffcc;
}
[data-theme="Sky Blue"] {
    --bg: #ffffff;
    --bg-secondary: #f0f8ff;
    --text: #004080;
    --text-secondary: #336699;
    --accent: #3399ff;
    --accent-rgb: 51, 153, 255;
    --accent-glow: #3399ff88;
    --accent-glow-strong: #3399ff66;
    --accent-glow-text: #004080;
    --accent-dark: #003366;
    --border: #3399ff55;
    --border-strong: #3399ff88;
    --shadow: #3399ff22;
    --scroll-track: #e0e0e0;
    --scroll-thumb: #3399ff;
    --header-bg: rgba(240, 255, 255, 0.8);
    --line-light: #ffffff;
    --line-dark: #222222;
    --nav-bg: rgba(51, 153, 255, 0.05);
    --nav-hover-bg: rgba(51, 153, 255, 0.12);
    --nav-text: #004080;
    --card-bg: rgba(230, 245, 255, 0.6);
    --footer-bg: #e0f2ff;
    --glow-box: 0 0 15px #3399ff88;
    --glow-text: 0 0 5px #3399ffcc;
}
[data-theme="Acid Carbon"] {
    --bg: #1c1c1c;
    --bg-secondary: #222222;
    --text: #baff29;
    --text-secondary: #d7ff5e;
    --accent: #baff29;
    --accent-rgb: 186, 255, 41;
    --accent-glow: #baff2988;
    --accent-glow-strong: #baff2966;
    --accent-glow-text: #baff29;
    --accent-dark: #99dd00;
    --border: #baff2955;
    --border-strong: #baff2988;
    --shadow: #baff2922;
    --scroll-track: #1a1a1a;
    --scroll-thumb: #baff29;
    --header-bg: rgba(20, 20, 20, 0.6);
    --line-light: #dddddd;
    --line-dark: #0a0a0a;
    --nav-bg: rgba(186, 255, 41, 0.05);
    --nav-hover-bg: rgba(186, 255, 41, 0.12);
    --nav-text: #baff29;
    --card-bg: #242424;
    --footer-bg: #1c1c1c;
    --glow-box: 0 0 15px #baff29aa;
    --glow-text: 0 0 8px #baff29cc;
}
[data-theme="Oceanic Midnight"] {
    --bg: #011627;
    --bg-secondary: #022B3A;
    --text: #E0F7FA;
    --text-secondary: #B2DFDB;
    --accent: #2EC4B6;
    --accent-rgb: 46, 196, 182;
    --accent-glow: #2EC4B688;
    --accent-glow-strong: #2EC4B666;
    --accent-glow-text: #2EC4B6;
    --accent-dark: #1CA89C;
    --border: #2EC4B655;
    --border-strong: #2EC4B688;
    --shadow: #2EC4B622;
    --scroll-track: #011627;
    --scroll-thumb: #2EC4B6;
    --header-bg: rgba(1, 22, 39, 0.8);
    --line-light: #BFDDE0;
    --line-dark: #0A2233;
    --nav-bg: rgba(46, 196, 182, 0.06);
    --nav-hover-bg: rgba(46, 196, 182, 0.15);
    --nav-text: #2EC4B6;
    --card-bg: rgba(3, 28, 42, 0.85);
    --footer-bg: rgba(1, 22, 39, 0.85);
}
[data-theme="Graphite Royal Violet"] {
    --bg: #1A1A1A;
    --bg-secondary: #222;
    --text: #EAEAEA;
    --text-secondary: #CFCFCF;
    --accent: #8E44AD;
    --accent-rgb: 142, 68, 173;
    --accent-glow: #8E44AD88;
    --accent-glow-strong: #8E44AD66;
    --accent-glow-text: #CBA2D8;
    --accent-dark: #732D91;
    --border: #8E44AD55;
    --border-strong: #8E44AD88;
    --shadow: #8E44AD22;
    --scroll-track: #1A1A1A;
    --scroll-thumb: #8E44AD;
    --header-bg: rgba(26, 26, 26, 0.9);
    --line-light: #CCCCCC;
    --line-dark: #101010;
    --nav-bg: rgba(142, 68, 173, 0.05);
    --nav-hover-bg: rgba(142, 68, 173, 0.12);
    --nav-text: #8E44AD;
    --card-bg: rgba(30, 30, 30, 0.9);
    --footer-bg: rgba(20, 20, 20, 0.9);
}
[data-theme="Aurora Gray"] {
    --bg: #2e2e3a;
    --bg-secondary: #3b3b4c;
    --text: #ff4d88;
    --text-secondary: #ff99bb;
    --accent: #ff4d88;
    --accent-rgb: 255, 77, 136;
    --accent-glow: #ff4d8888;
    --accent-glow-strong: #ff4d8866;
    --accent-glow-text: #ff4d88;
    --accent-dark: #ff99bb;
    --border: #ff4d8855;
    --border-strong: #ff4d8888;
    --shadow: #ff4d8822;
    --scroll-track: #2b2b35;
    --scroll-thumb: #ff4d88;
    --header-bg: rgba(46, 46, 58, 0.8);
    --line-light: #f0c5d5;
    --line-dark: #1f1f2c;
    --nav-bg: rgba(255, 77, 136, 0.05);
    --nav-hover-bg: rgba(255, 77, 136, 0.12);
    --nav-text: #ff4d88;
    --card-bg: rgba(50, 50, 65, 0.9);
    --footer-bg: rgba(40, 40, 50, 0.9);
}
[data-theme="Forest Night"] {
    --bg: #0b2e26;
    --bg-secondary: #144035;
    --text: #a8ff60;
    --text-secondary: #cfff90;
    --accent: #a8ff60;
    --accent-rgb: 168, 255, 96;
    --accent-glow: #a8ff6088;
    --accent-glow-strong: #a8ff6066;
    --accent-glow-text: #a8ff60;
    --accent-dark: #7fbf40;
    --border: #a8ff6055;
    --border-strong: #a8ff6088;
    --shadow: #a8ff6022;
    --scroll-track: #103b30;
    --scroll-thumb: #a8ff60;
    --header-bg: rgba(11, 46, 38, 0.8);
    --line-light: #dbffc4;
    --line-dark: #0a1f19;
    --nav-bg: rgba(168, 255, 96, 0.05);
    --nav-hover-bg: rgba(168, 255, 96, 0.12);
    --nav-text: #a8ff60;
    --card-bg: rgba(20, 55, 40, 0.9);
    --footer-bg: rgba(15, 40, 30, 0.9);
}
[data-theme="Coral Reef"] {
    --bg: #f4f1de;
    --bg-secondary: #eae6d9;
    --text: #2a9d8f;
    --text-secondary: #ff6f61;
    --accent: #ff6f61;
    --accent-rgb: 255, 111, 97;
    --accent-glow: #ff6f6188;
    --accent-glow-strong: #ff6f6166;
    --accent-glow-text: #2a9d8f;
    --accent-dark: #cc564d;
    --border: #ff6f6155;
    --border-strong: #ff6f6188;
    --shadow: #ff6f6122;
    --scroll-track: #eee8dd;
    --scroll-thumb: #ff6f61;
    --header-bg: rgba(255, 255, 255, 0.8);
    --line-light: #fffaf0;
    --line-dark: #ddd2c5;
    --nav-bg: rgba(255, 111, 97, 0.05);
    --nav-hover-bg: rgba(255, 111, 97, 0.12);
    --nav-text: #2a9d8f;
    --card-bg: rgba(255, 255, 255, 0.7);
    --footer-bg: rgba(244, 241, 222, 0.9);
}
[data-theme="Tundra Teal"] {
    --bg: #ffffff;
    --bg-secondary: #f2f9f9;
    --text: #003b5c;
    --text-secondary: #00697c;
    --accent: #00bfa6;
    --accent-rgb: 0, 191, 166;
    --accent-glow: #00bfa688;
    --accent-glow-strong: #00bfa666;
    --accent-glow-text: #006f63;
    --accent-dark: #007b6c;
    --border: #00bfa655;
    --border-strong: #00bfa688;
    --shadow: #00bfa622;
    --scroll-track: #e6f0f0;
    --scroll-thumb: #00bfa6;
    --header-bg: rgba(255, 255, 255, 0.85);
    --line-light: #cccccc;
    --line-dark: #004c5c;
    --nav-bg: rgba(0, 191, 166, 0.04);
    --nav-hover-bg: rgba(0, 191, 166, 0.1);
    --nav-text: #006c61;
    --card-bg: rgba(240, 255, 255, 0.6);
    --footer-bg: rgba(245, 255, 255, 0.9);
}
[data-theme="Arctic Ice"] {
    --bg: #f8fafc;
    --bg-secondary: #e2e8f0;
    --text: #1e293b;
    --text-secondary: #475569;
    --accent: #3b82f6;
    --accent-rgb: 59, 130, 246;
    --accent-glow: #3b82f688;
    --accent-glow-strong: #3b82f666;
    --accent-glow-text: #1e3a8a;
    --accent-dark: #1d4ed8;
    --border: #3b82f655;
    --border-strong: #3b82f688;
    --shadow: #3b82f622;
    --scroll-track: #e0e7ef;
    --scroll-thumb: #3b82f6;
    --header-bg: rgba(255, 255, 255, 0.85);
    --line-light: #ffffff;
    --line-dark: #cbd5e1;
    --nav-bg: rgba(59, 130, 246, 0.05);
    --nav-hover-bg: rgba(59, 130, 246, 0.12);
    --nav-text: #1e293b;
    --card-bg: rgba(255, 255, 255, 0.75);
    --footer-bg: rgba(248, 250, 252, 0.9);
}
[data-theme="Espresso Rose"] {
    --bg: #3e2723;
    --bg-secondary: #4e342e;
    --text: #f48fb1;
    --text-secondary: #f8bbd0;
    --accent: #f48fb1;
    --accent-rgb: 244, 143, 177;
    --accent-glow: #f48fb188;
    --accent-glow-strong: #f48fb166;
    --accent-glow-text: #ad1457;
    --accent-dark: #f8bbd0;
    --border: #f48fb155;
    --border-strong: #f48fb188;
    --shadow: #f48fb122;
    --scroll-track: #4e342e;
    --scroll-thumb: #f48fb1;
    --header-bg: rgba(62, 39, 35, 0.85);
    --line-light: #ffe4ec;
    --line-dark: #2e1a18;
    --nav-bg: rgba(244, 143, 177, 0.05);
    --nav-hover-bg: rgba(244, 143, 177, 0.12);
    --nav-text: #f48fb1;
    --card-bg: rgba(50, 30, 28, 0.9);
    --footer-bg: rgba(62, 39, 35, 0.95);
}
[data-theme="Tech Mint"] {
    --bg: #212121;
    --bg-secondary: #2c2c2c;
    --text: #a8ffce;
    --text-secondary: #d0ffe5;
    --accent: #a8ffce;
    --accent-rgb: 168, 255, 206;
    --accent-glow: #a8ffce88;
    --accent-glow-strong: #a8ffce66;
    --accent-glow-text: #a8ffce;
    --accent-dark: #3ddc97;
    --border: #a8ffce55;
    --border-strong: #a8ffce88;
    --shadow: #a8ffce22;
    --scroll-track: #2c2c2c;
    --scroll-thumb: #a8ffce;
    --header-bg: rgba(33, 33, 33, 0.85);
    --line-light: #d0ffe5;
    --line-dark: #1b1b1b;
    --nav-bg: rgba(168, 255, 206, 0.05);
    --nav-hover-bg: rgba(168, 255, 206, 0.12);
    --nav-text: #a8ffce;
    --card-bg: rgba(30, 30, 30, 0.9);
    --footer-bg: rgba(33, 33, 33, 0.95);
}
[data-theme="Solar Storm"] {
    --bg: #000000;
    --bg-secondary: #111111;
    --text: #ffee00;
    --text-secondary: #ffbb00;
    --accent: #ff8800;
    --accent-rgb: 255, 136, 0;
    --accent-glow: #ff880088;
    --accent-glow-strong: #ff880066;
    --accent-glow-text: #ff8800;
    --accent-dark: #ffbb00;
    --border: #ff880055;
    --border-strong: #ff880088;
    --shadow: #ff880022;
    --scroll-track: #1a1a1a;
    --scroll-thumb: #ffaa00;
    --header-bg: rgba(20, 10, 0, 0.6);
    --line-light: #ffdd99;
    --line-dark: #1a1a1a;
    --nav-bg: rgba(255, 136, 0, 0.05);
    --nav-hover-bg: rgba(255, 136, 0, 0.12);
    --nav-text: #ffaa00;
    --card-bg: rgba(25, 10, 5, 0.85);
    --footer-bg: rgba(10, 5, 0, 0.85);
}
[data-theme="Ice Terminal"] {
    --bg: #fefefe;
    --bg-secondary: #f2f9ff;
    --text: #404040;
    --text-secondary: #333;
    --accent: #80dfff;
    --accent-rgb: 128, 223, 255;
    --accent-glow: #80dfff88;
    --accent-glow-strong: #80dfff66;
    --accent-glow-text: #0077aa;
    --accent-dark: #005577;
    --border: #80dfff55;
    --border-strong: #80dfff88;
    --shadow: #80dfff22;
    --scroll-track: #e0e0e0;
    --scroll-thumb: #66cce6;
    --header-bg: rgba(255, 255, 255, 0.8);
    --line-light: #ffffff;
    --line-dark: #cccccc;
    --nav-bg: rgba(0, 120, 170, 0.05);
    --nav-hover-bg: rgba(0, 120, 170, 0.12);
    --nav-text: #005577;
    --card-bg: rgba(240, 250, 255, 0.8);
    --footer-bg: rgba(230, 240, 255, 0.9);
}
[data-theme="Infra Night"] {
    --bg: #0b0b0f;
    --bg-secondary: #1a0e1e;
    --text: #ff0033;
    --text-secondary: #ff3366;
    --accent: #9900ff;
    --accent-rgb: 153, 0, 255;
    --accent-glow: #9900ff88;
    --accent-glow-strong: #9900ff66;
    --accent-glow-text: #cc33ff;
    --accent-dark: #ff3366;
    --border: #9900ff55;
    --border-strong: #9900ffaa;
    --shadow: #9900ff33;
    --scroll-track: #1a1a1a;
    --scroll-thumb: #9900ff;
    --header-bg: rgba(11, 11, 20, 0.8);
    --line-light: #cccccc;
    --line-dark: #101010;
    --nav-bg: rgba(255, 0, 51, 0.06);
    --nav-hover-bg: rgba(255, 0, 51, 0.15);
    --nav-text: #ff0033;
    --card-bg: rgba(20, 10, 30, 0.85);
    --footer-bg: rgba(10, 5, 15, 0.85);
}
[data-theme="Solarized Terminal"] {
    --bg: #002b36;
    --bg-secondary: #073642;
    --text: #b58900;
    --text-secondary: #93a1a1;
    --accent: #2aa198;
    --accent-rgb: 42, 161, 152;
    --accent-glow: #2aa19888;
    --accent-glow-strong: #2aa19866;
    --accent-glow-text: #2aa198;
    --accent-dark: #93a1a1;
    --border: #2aa19855;
    --border-strong: #2aa198aa;
    --shadow: #2aa19822;
    --scroll-track: #003845;
    --scroll-thumb: #2aa198;
    --header-bg: rgba(0, 43, 54, 0.85);
    --line-light: #eee8d5;
    --line-dark: #002b36;
    --nav-bg: rgba(42, 161, 152, 0.05);
    --nav-hover-bg: rgba(42, 161, 152, 0.12);
    --nav-text: #2aa198;
    --card-bg: rgba(7, 54, 66, 0.8);
    --footer-bg: rgba(0, 43, 54, 0.85);
}
[data-theme="Sunset Blaze"] {
    --bg: #290001;
    --bg-secondary: #40020a;
    --text: #ff6f00;
    --text-secondary: #ffb380;
    --accent: #ff3e3e;
    --accent-rgb: 255, 62, 62;
    --accent-glow: #ff3e3e88;
    --accent-glow-strong: #ff3e3e66;
    --accent-glow-text: #ff3e3e;
    --accent-dark: #cc3300;
    --border: #ff3e3e55;
    --border-strong: #ff3e3eaa;
    --shadow: #ff3e3e22;
    --scroll-track: #3a0003;
    --scroll-thumb: #ff3e3e;
    --header-bg: rgba(41, 0, 1, 0.85);
    --line-light: #ff9f80;
    --line-dark: #1a0001;
    --nav-bg: rgba(255, 62, 62, 0.05);
    --nav-hover-bg: rgba(255, 62, 62, 0.12);
    --nav-text: #ff6f00;
    --card-bg: rgba(64, 2, 10, 0.85);
    --footer-bg: rgba(41, 0, 1, 0.85);
}
[data-theme="Arctic Breeze"] {
    --bg: #f7fafd;
    --bg-secondary: #e0e5ec;
    --text: #1a3c57;
    --text-secondary: #4f7b9f;
    --accent: #a6d4f2;
    --accent-rgb: 166, 212, 242;
    --accent-glow: #a6d4f288;
    --accent-glow-strong: #a6d4f266;
    --accent-glow-text: #1a3c57;
    --accent-dark: #7cb6da;
    --border: #a6d4f255;
    --border-strong: #a6d4f288;
    --shadow: #a6d4f222;
    --scroll-track: #eaf3fa;
    --scroll-thumb: #a6d4f2;
    --header-bg: rgba(255, 255, 255, 0.7);
    --line-light: #c9d8e5;
    --line-dark: #e0e5ec;
    --nav-bg: rgba(166, 212, 242, 0.1);
    --nav-hover-bg: rgba(166, 212, 242, 0.2);
    --nav-text: #1a3c57;
    --card-bg: rgba(255, 255, 255, 0.85);
    --footer-bg: #f0f4f9;
}
[data-theme="Eclipse Void"] {
    --bg: #000000;
    --bg-secondary: #111111;
    --text: #e6e6e6;
    --text-secondary: #aaa;
    --accent: #5A4FCF;
    --accent-rgb: 90, 79, 207;
    --accent-glow: #5a4fcf88;
    --accent-glow-strong: #5a4fcf66;
    --accent-glow-text: #5a4fcf;
    --accent-dark: #3a2fa0;
    --border: #5a4fcf55;
    --border-strong: #5a4fcf88;
    --shadow: #5a4fcf22;
    --scroll-track: #101010;
    --scroll-thumb: #5a4fcf;
    --header-bg: rgba(0, 0, 0, 0.6);
    --line-light: #444;
    --line-dark: #000;
    --nav-bg: rgba(90, 79, 207, 0.08);
    --nav-hover-bg: rgba(90, 79, 207, 0.2);
    --nav-text: #d72638;
    --card-bg: #141414;
    --footer-bg: #0a0a0a;
}
[data-theme="Quantum Emerald"] {
    --bg: #1b1b1b;
    --bg-secondary: #222;
    --text: #e0f8ec;
    --text-secondary: #a3e4d7;
    --accent: #2ecc71;
    --accent-rgb: 46, 204, 113;
    --accent-glow: #2ecc7188;
    --accent-glow-strong: #2ecc7166;
    --accent-glow-text: #2ecc71;
    --accent-dark: #27ae60;
    --border: #2ecc7155;
    --border-strong: #2ecc7188;
    --shadow: #2ecc7122;
    --scroll-track: #1b1b1b;
    --scroll-thumb: #2ecc71;
    --header-bg: rgba(27, 27, 27, 0.6);
    --line-light: #4f4f4f;
    --line-dark: #121212;
    --nav-bg: rgba(46, 204, 113, 0.05);
    --nav-hover-bg: rgba(46, 204, 113, 0.15);
    --nav-text: #00b894;
    --card-bg: #252525;
    --footer-bg: #1b1b1b;
}
[data-theme="Noir Rose"] {
    --bg: #2e2e2e;
    --bg-secondary: #3a3a3a;
    --text: #f2f2f2;
    --text-secondary: #ffe6eb;
    --accent: #ffb6c1;
    --accent-rgb: 255, 182, 193;
    --accent-glow: #ffb6c188;
    --accent-glow-strong: #ffb6c166;
    --accent-glow-text: #ffb6c1;
    --accent-dark: #cc99aa;
    --border: #ffb6c155;
    --border-strong: #ffb6c188;
    --shadow: #ffb6c122;
    --scroll-track: #2e2e2e;
    --scroll-thumb: #ffb6c1;
    --header-bg: rgba(46, 46, 46, 0.6);
    --line-light: #cccccc;
    --line-dark: #1e1e1e;
    --nav-bg: rgba(255, 182, 193, 0.05);
    --nav-hover-bg: rgba(255, 182, 193, 0.12);
    --nav-text: #ffb6c1;
    --card-bg: #383838;
    --footer-bg: #2e2e2e;
}
[data-theme="Night Ice"] {
    --bg: #0b132b;
    --bg-secondary: #1c2541;
    --text: #b0c4de;
    --text-secondary: #dbe9f4;
    --accent: #b0c4de;
    --accent-rgb: 176, 196, 222;
    --accent-glow: #b0c4de88;
    --accent-glow-strong: #b0c4de66;
    --accent-glow-text: #b0c4de;
    --accent-dark: #7f9bad;
    --border: #b0c4de55;
    --border-strong: #b0c4deaa;
    --shadow: #b0c4de22;
    --scroll-track: #0b132b;
    --scroll-thumb: #b0c4de;
    --header-bg: rgba(11, 19, 43, 0.7);
    --line-light: #cccccc;
    --line-dark: #0b132b;
    --nav-bg: rgba(176, 196, 222, 0.05);
    --nav-hover-bg: rgba(176, 196, 222, 0.12);
    --nav-text: #b0c4de;
    --card-bg: #1a2238;
    --footer-bg: #0b132b;
}
[data-theme="Inkbyte"] {
    --bg: #000000;
    --bg-secondary: #111111;
    --text: #f8f8f8;
    --text-secondary: #cccccc;
    --accent: #f8f8f8;
    --accent-rgb: 248, 248, 248;
    --accent-glow: #ffffff22;
    --accent-glow-strong: #ffffff44;
    --accent-glow-text: #ffffff;
    --accent-dark: #cccccc;
    --border: #ffffff33;
    --border-strong: #ffffff88;
    --shadow: #ffffff11;
    --scroll-track: #0f0f0f;
    --scroll-thumb: #f8f8f8;
    --header-bg: rgba(0, 0, 0, 0.7);
    --line-light: #f0f0f0;
    --line-dark: #000000;
    --nav-bg: rgba(255, 255, 255, 0.05);
    --nav-hover-bg: rgba(255, 255, 255, 0.12);
    --nav-text: #f8f8f8;
    --card-bg: #111111;
    --footer-bg: #000000;
}
[data-theme="Metal Pulse"] {
    --bg: #2c2f36;
    --bg-secondary: #383b42;
    --text: #ff6f61;
    --text-secondary: #ff958b;
    --accent: #ff6f61;
    --accent-rgb: 255, 111, 97;
    --accent-glow: #ff6f6188;
    --accent-glow-strong: #ff6f6166;
    --accent-glow-text: #ff6f61;
    --accent-dark: #cc564d;
    --border: #ff6f6155;
    --border-strong: #ff6f6188;
    --shadow: #ff6f6122;
    --scroll-track: #2c2f36;
    --scroll-thumb: #ff6f61;
    --header-bg: rgba(44, 47, 54, 0.7);
    --line-light: #ffb3a8;
    --line-dark: #1e1f22;
    --nav-bg: rgba(255, 111, 97, 0.05);
    --nav-hover-bg: rgba(255, 111, 97, 0.12);
    --nav-text: #ff6f61;
    --card-bg: rgba(50, 53, 60, 0.9);
    --footer-bg: #2c2f36;
}
[data-theme="Obsidian Green"] {
    --bg: #0b0c10;
    --bg-secondary: #121417;
    --text: #c5ff00;
    --text-secondary: #e2ff66;
    --accent: #c5ff00;
    --accent-rgb: 197, 255, 0;
    --accent-glow: #c5ff0088;
    --accent-glow-strong: #c5ff0066;
    --accent-glow-text: #c5ff00;
    --accent-dark: #a3dd00;
    --border: #c5ff0055;
    --border-strong: #c5ff0088;
    --shadow: #c5ff0022;
    --scroll-track: #0b0c10;
    --scroll-thumb: #c5ff00;
    --header-bg: rgba(11, 12, 16, 0.7);
    --line-light: #f6ffcc;
    --line-dark: #080a0d;
    --nav-bg: rgba(197, 255, 0, 0.05);
    --nav-hover-bg: rgba(197, 255, 0, 0.12);
    --nav-text: #c5ff00;
    --card-bg: rgba(20, 22, 28, 0.9);
    --footer-bg: #0b0c10;
}
[data-theme="Retro Terminal"] {
    --bg: #000000;
    --bg-secondary: #0a0a0a;
    --text: #33ff33;
    --text-secondary: #66ff66;
    --accent: #33ff33;
    --accent-rgb: 51, 255, 51;
    --accent-glow: #33ff3388;
    --accent-glow-strong: #33ff3366;
    --accent-glow-text: #33ff33;
    --accent-dark: #00cc00;
    --border: #33ff3355;
    --border-strong: #33ff3388;
    --shadow: #33ff3322;
    --scroll-track: #000000;
    --scroll-thumb: #33ff33;
    --header-bg: rgba(0, 0, 0, 0.8);
    --line-light: #66ff66;
    --line-dark: #000000;
    --nav-bg: rgba(51, 255, 51, 0.05);
    --nav-hover-bg: rgba(51, 255, 51, 0.12);
    --nav-text: #33ff33;
    --card-bg: rgba(10, 10, 10, 0.9);
    --footer-bg: #000000;
}
[data-theme="Arctic Snow"] {
    --bg: #ffffff;
    --bg-secondary: #f4f4f4;
    --text: #1c1c1c;
    --text-secondary: #444;
    --accent: #80d8ff;
    --accent-rgb: 128, 216, 255;
    --accent-glow: #80d8ff55;
    --accent-glow-strong: #80d8ff88;
    --accent-glow-text: #80d8ff;
    --accent-dark: #33bbff;
    --border: #80d8ff33;
    --border-strong: #80d8ff88;
    --shadow: #80d8ff22;
    --scroll-track: #f0f0f0;
    --scroll-thumb: #80d8ff;
    --header-bg: rgba(255, 255, 255, 0.95);
    --line-light: #cccccc;
    --line-dark: #eeeeee;
    --nav-bg: rgba(128, 216, 255, 0.05);
    --nav-hover-bg: rgba(128, 216, 255, 0.12);
    --nav-text: #1c1c1c;
    --card-bg: rgba(250, 250, 250, 0.85);
    --footer-bg: rgba(245, 245, 245, 0.9);
}
[data-theme="Sandstone Glow"] {
    --bg: #faf3e0;
    --bg-secondary: #f0e8d0;
    --text: #3e2f1c;
    --text-secondary: #6b5842;
    --accent: #ff9900;
    --accent-rgb: 255, 153, 0;
    --accent-glow: #ff990055;
    --accent-glow-strong: #ff990088;
    --accent-glow-text: #ff9900;
    --accent-dark: #cc7a00;
    --border: #ff990033;
    --border-strong: #ff990088;
    --shadow: #ff990022;
    --scroll-track: #f5e9d6;
    --scroll-thumb: #ff9900;
    --header-bg: rgba(250, 243, 224, 0.95);
    --line-light: #ddd0b8;
    --line-dark: #f0e0c8;
    --nav-bg: rgba(255, 153, 0, 0.05);
    --nav-hover-bg: rgba(255, 153, 0, 0.12);
    --nav-text: #3e2f1c;
    --card-bg: rgba(255, 250, 240, 0.85);
    --footer-bg: rgba(245, 230, 210, 0.9);
}
[data-theme="Lavender Haze"] {
    --bg: #f5f0fa;
    --bg-secondary: #ece2f6;
    --text: #4b375d;
    --text-secondary: #7e6990;
    --accent: #b388eb;
    --accent-rgb: 179, 136, 235;
    --accent-glow: #b388eb55;
    --accent-glow-strong: #b388eb88;
    --accent-glow-text: #b388eb;
    --accent-dark: #9a6fd8;
    --border: #b388eb33;
    --border-strong: #b388eb88;
    --shadow: #b388eb22;
    --scroll-track: #f0e6f8;
    --scroll-thumb: #b388eb;
    --header-bg: rgba(245, 240, 250, 0.95);
    --line-light: #d8cfe5;
    --line-dark: #e6d8f0;
    --nav-bg: rgba(179, 136, 235, 0.05);
    --nav-hover-bg: rgba(179, 136, 235, 0.12);
    --nav-text: #4b375d;
    --card-bg: rgba(250, 245, 255, 0.85);
    --footer-bg: rgba(240, 230, 250, 0.9);
}
[data-theme="Mint Cloud"] {
    --bg: #f6fffb;
    --bg-secondary: #e3faf2;
    --text: #005344;
    --text-secondary: #338c7a;
    --accent: #44d7b6;
    --accent-rgb: 68, 215, 182;
    --accent-glow: #44d7b655;
    --accent-glow-strong: #44d7b688;
    --accent-glow-text: #44d7b6;
    --accent-dark: #2cb499;
    --border: #44d7b633;
    --border-strong: #44d7b688;
    --shadow: #44d7b622;
    --scroll-track: #ecfdf8;
    --scroll-thumb: #44d7b6;
    --header-bg: rgba(246, 255, 251, 0.95);
    --line-light: #d1f1e9;
    --line-dark: #e0f9f3;
    --nav-bg: rgba(68, 215, 182, 0.05);
    --nav-hover-bg: rgba(68, 215, 182, 0.12);
    --nav-text: #005344;
    --card-bg: rgba(240, 255, 250, 0.85);
    --footer-bg: rgba(224, 252, 246, 0.9);
}
[data-theme="Sunrise Shell"] {
    --bg: #fff9f0;
    --bg-secondary: #fff2e0;
    --text: #7b3e19;
    --text-secondary: #aa6841;
    --accent: #ffb347;
    --accent-rgb: 255, 179, 71;
    --accent-glow: #ffb34755;
    --accent-glow-strong: #ffb34788;
    --accent-glow-text: #ff8c42;
    --accent-dark: #e68a00;
    --border: #ffb34733;
    --border-strong: #ffb34788;
    --shadow: #ffb34722;
    --scroll-track: #fff0e0;
    --scroll-thumb: #ffb347;
    --header-bg: rgba(255, 249, 240, 0.95);
    --line-light: #ffddb3;
    --line-dark: #ffe5cc;
    --nav-bg: rgba(255, 179, 71, 0.05);
    --nav-hover-bg: rgba(255, 179, 71, 0.12);
    --nav-text: #7b3e19;
    --card-bg: rgba(255, 239, 219, 0.9);
    --footer-bg: rgba(255, 245, 232, 0.95);
}
[data-theme="Pearl Mist"] {
    --bg: #fdfdfd;
    --bg-secondary: #f6f6f6;
    --text: #4c4c4c;
    --text-secondary: #7a7a7a;
    --accent: #b2bec3;
    --accent-rgb: 178, 190, 195;
    --accent-glow: #b2bec355;
    --accent-glow-strong: #b2bec388;
    --accent-glow-text: #7f8c8d;
    --accent-dark: #95a5a6;
    --border: #b2bec333;
    --border-strong: #b2bec388;
    --shadow: #b2bec322;
    --scroll-track: #f0f0f0;
    --scroll-thumb: #b2bec3;
    --header-bg: rgba(253, 253, 253, 0.95);
    --line-light: #dedede;
    --line-dark: #eaeaea;
    --nav-bg: rgba(178, 190, 195, 0.05);
    --nav-hover-bg: rgba(178, 190, 195, 0.12);
    --nav-text: #4c4c4c;
    --card-bg: rgba(250, 250, 250, 0.9);
    --footer-bg: rgba(248, 248, 248, 0.95);
}
[data-theme="Mango Cream"] {
    --bg: #fff9f0;
    --bg-secondary: #fff3e0;
    --text: #6e3b0d;
    --text-secondary: #a65c24;
    --accent: #ffb347;
    --accent-rgb: 255, 179, 71;
    --accent-glow: #ffb34766;
    --accent-glow-strong: #ffb347aa;
    --accent-glow-text: #e67e22;
    --accent-dark: #cc7722;
    --border: #ffb34744;
    --border-strong: #ffb34788;
    --shadow: #ffb34733;
    --scroll-track: #f5e5d4;
    --scroll-thumb: #ffb347;
    --header-bg: rgba(255, 249, 240, 0.95);
    --line-light: #ffe6c7;
    --line-dark: #fbe0b8;
    --nav-bg: rgba(255, 179, 71, 0.05);
    --nav-hover-bg: rgba(255, 179, 71, 0.15);
    --nav-text: #6e3b0d;
    --card-bg: rgba(255, 243, 221, 0.9);
    --footer-bg: rgba(255, 239, 210, 0.95);
}
[data-theme="Mint Snow"] {
    --bg: #f4fffa;
    --bg-secondary: #e9fcf5;
    --text: #1a3c34;
    --text-secondary: #3a6b5a;
    --accent: #3ed598;
    --accent-rgb: 62, 213, 152;
    --accent-glow: #3ed59866;
    --accent-glow-strong: #3ed598aa;
    --accent-glow-text: #2ecc91;
    --accent-dark: #25a37a;
    --border: #3ed59844;
    --border-strong: #3ed59888;
    --shadow: #3ed59833;
    --scroll-track: #e0f5ed;
    --scroll-thumb: #3ed598;
    --header-bg: rgba(244, 255, 250, 0.95);
    --line-light: #d1f7e9;
    --line-dark: #c4ebdd;
    --nav-bg: rgba(62, 213, 152, 0.05);
    --nav-hover-bg: rgba(62, 213, 152, 0.15);
    --nav-text: #1a3c34;
    --card-bg: rgba(230, 255, 246, 0.9);
    --footer-bg: rgba(220, 250, 240, 0.95);
}
html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    scrollbar-color: var(--accent) var(--bg-secondary);
    scrollbar-width: thin;
}
body {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(160deg, var(--bg), var(--bg-secondary));
    color: var(--text);
    overflow-x: clip;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--accent) var(--bg-secondary);
    scrollbar-width: thin;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, var(--accent-glow), #000000 80%);
    z-index: -1;
    pointer-events: none;
}
#particles-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-color: var(--bg);
    transition: background 0.3s ease-in-out;
}
header {
    background: var(--header-bg);
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 0 30px var(--accent-glow-strong);
    position: sticky;
    top: 0;
    z-index: 999;
}
header h1 {
    font-size: 2rem;
    color: var(--accent-glow-text);
    text-shadow: 0 0 15px var(--accent);
    letter-spacing: 3px;
    margin: 0;
}
header div {
    margin: 0;
}
body > * {
    max-width: 100%;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 6px;
    box-shadow: 0 0 10px var(--accent-glow);
    border: 2px solid var(--bg-secondary);
    animation: glow-pulse 2s infinite ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-glow-text);
    box-shadow: 0 0 14px var(--accent-glow-strong);
}
@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 6px var(--accent-glow);
    }
    50% {
        box-shadow: 0 0 12px var(--accent);
    }
    100% {
        box-shadow: 0 0 6px var(--accent-glow);
    }
}
[style*="clip-path"],
[style*="box-shadow"] {
    max-width: 100%;
    overflow-x: clip;
}
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 36px;
    height: 36px;
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    z-index: 1001;
    transition: background 0.3s ease;
}
.bar {
    display: none;
    width: 22px;
    height: 3px;
    background-color: var(--accent);
    border-radius: 3px;
    transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu-toggle.active .bar1 {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active .bar2 {
    opacity: 0;
    transform: translateX(-20px);
}
.menu-toggle.active .bar3 {
    transform: rotate(-45deg) translate(6px, -6px);
}
header nav {
    display: flex;
    align-items: center;
    background-color: transparent;
}
header nav a {
    margin-left: 2rem;
    color: var(--nav-text);
    text-decoration: none;
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
    position: relative;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: var(--nav-bg);
    transition: all 0.3s ease-in-out;
}
header nav a:hover {
    background-color: var(--nav-hover-bg);
    border-color: var(--accent-glow);
    box-shadow: 0 0 15px var(--accent-glow);
}
#themeToggle {
    font-family: 'Orbitron', sans-serif;
    margin-left: 2rem;
    background: var(--nav-bg);
    color: var(--nav-text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    appearance: none;
}
#themeToggle:hover {
    background: var(--nav-hover-bg);
    border-color: var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow);
}
#themeToggle option {
    background: var(--bg);
    color: var(--text);
    font-family: 'Orbitron', sans-serif;
}
label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}
@media (max-width: 950px) {
    .menu-toggle {
        display: flex;
    }
    .bar {
        display: block;
    }
    header nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0.5rem;
        border-top: 1px solid var(--border);
        box-shadow: 0 8px 12px var(--shadow);
        width: 100%;
        position: absolute;
        top: 55px;
        left: 0;
        background: var(--bg);
        display: none;
    }
    header nav.active {
        display: flex;
    }
    header nav a {
        width: 90%;
        margin-left: 0;
        margin-bottom: 0.7rem;
        font-size: 1.13rem;
    }
}
.hero {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text);
    position: relative;
}
.hero::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
.hero h2 {
    font-size: 3.2rem;
    text-shadow: 0 0 20px var(--accent);
    color: var(--accent-glow-text);
    margin-bottom: 1rem;
}
.hero p {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}
.btn {
    background: rgba(0, 240, 255, 0.15);
    border: 2px solid var(--accent);
    color: var(--accent-dark);
    padding: 1rem 2.2rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.4s ease;
    box-shadow: 0 0 25px var(--accent-glow);
}
.btn:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 35px var(--accent), 0 0 60px var(--accent-glow);
    transform: scale(1.05);
}
.section {
    padding: 6rem 1rem;
    max-width: 80%;
    margin: auto;
}
.section h3 {
    margin: 0.1rem;
    color: var(--accent-glow-text);
    min-height: 50px;
}
h2 {
    font-size: 2.6rem;
}
.section p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0.7em 0;
}
.services-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.flip-card {
    margin: 0;
    height: 270px;
    cursor: pointer;
    user-select: none;
    position: relative;
    perspective: 80%;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
    transform-style: preserve-3d;
    box-shadow: 0 0 12px 2px var(--shadow, #0006);
}
.flip-card-inner:focus-within,
.flip-card-inner:hover {
    border-color: var(--accent, #23ffe6);
    box-shadow: 0 0 12px 2px var(--accent);
}
.flip-card.flipped .flip-card-inner {
    transform: rotateY(-180deg);
}
.card-back,
.card-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.2rem;
    box-sizing: border-box;
    background: var(--card-bg);
    box-shadow: 0 0 12px 2px var(--shadow);
    backface-visibility: hidden;
}
.card-front {
    color: var(--text-secondary);
    transform: rotateY(0deg);
    background: var(--card-bg);
}
.card-back {
    background: var(--accent-rgb);
    transform: rotateY(-180deg);
    font-size: 0.9rem;
}
.text-center {
    text-align: center !important;
}
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}
.text-justify {
    text-align: justify !important;
}
#hero-title {
    font-size: 3rem;
    color: var(--accent-glow-text);
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid var(--accent-glow);
    animation: type-glow 2s infinite, cursor-blink 0.8s step-end infinite;
    transition: all 0.5s ease;
}
#hero-sub {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    transition: opacity 1s ease;
}
#hero-sub,
#hero-title,
.btn {
    transition: all 0.5s ease;
}
#hero-sub span {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.btn-pulse {
    animation: glow-pulse 2s infinite ease-in-out;
}
#hero-title.implode {
    animation: blackhole-implode 0.9s ease-in forwards;
    color: #ff4444;
    text-shadow: 0 0 20px red, 0 0 40px #880000;
}
.hero-content {
    position: relative;
    z-index: 1;
}
.service-card i {
    color: var(--accent-dark);
    margin-bottom: 0.5rem;
}
.fullbody {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem;
    box-sizing: border-box;
}
.services-scroll-container {
    overflow-x: auto;
    padding-bottom: 1rem;
}
.glow-tooltip {
    position: relative;
    cursor: help;
    display: inline-block;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}
.glow-tooltip:hover {
    box-shadow: 0 0 12px var(--accent);
    border: 1px solid var(--accent-glow);
    padding: 1px 5px;
}
.glow-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--bg-secondary);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85em;
    white-space: normal;
    word-break: break-word;
    min-width: 320px;
    max-width: 420px;
    opacity: 0;
    pointer-events: none;
    border: 1px solid var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 999;
}
.glow-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-12px);
}
.glow-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 998;
}
.glow-tooltip:hover::before {
    opacity: 1;
}
a {
    color: var(--text-secondary);
}
.card {
    border-radius: 12px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 100%;
}
.card-header {
    color: var(--accent-dark);
    text-align: center;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 0.75rem;
}
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.1em;
}
.icon-text i {
    font-size: 1.1em;
    color: var(--accent, #3399ff);
}
.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    color: var(--text);
}
.card-footer {
    margin-top: auto;
    padding-top: 1rem;
    text-align: center;
}
.pricing-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    padding: 1rem 0;
}
.pricing-row .card {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 0 10px var(--shadow);
    text-align: left;
}
.pricing-row .card-header {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    color: var(--accent-dark);
    border-bottom: 1px solid var(--border);
    min-height: 80px;
}
.pricing-row .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.5rem;
}
.pricing-row .card-body .price {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
    min-height: 2rem;
}
.pricing-row .card-body .price span {
    font-size: 0.75em;
    font-weight: normal;
    color: var(--text-light);
    margin-left: 0.2rem;
}
.pricing-row .card-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}
.pricing-row .card-body ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.4;
}
.pricing-row .card-body ul li i {
    margin-top: 0.2rem;
    color: var(--accent-dark);
    flex-shrink: 0;
}
.pricing-row .card-footer {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.rss-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem 0.5rem;
    scroll-snap-type: x mandatory;
    align-self: center;
}
.rss-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.rss-scroll-container::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}
.rss-card {
    flex: 0 0 auto;
    min-width: 320px;
    max-width: 320px;
    scroll-snap-align: start;
    background: var(--card-bg, #222b33);
    border: 1px solid var(--border, #2d3748);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow, #1117);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.rss-card:focus-within,
.rss-card:hover {
    border-color: var(--accent, #23ffe6);
    box-shadow: 0 4px 22px var(--accent, #23ffe6a1);
}
.rss-card .card-body {
    padding: 1.2rem 1.1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.rss-card h4 {
    font-size: 1.1rem;
    margin: 0 0 0.2rem;
    color: var(--accent-dark, #13d6c5);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.rss-card p {
    font-size: 0.96rem;
    color: var(--text-secondary, #c3c8d1);
    margin: 0;
    line-height: 1.5;
}
.rss-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding: 0.7em 1.1em 1.1em;
    gap: 1em;
    background: none;
}
.rss-card-footer time {
    font-size: 0.89rem;
    color: var(--text-secondary, #adb5bd);
    white-space: nowrap;
    opacity: 0.85;
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0;
}
.rss-card-footer a {
    color: var(--accent, #22efcf);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.01rem;
    transition: color 0.2s, text-decoration 0.2s;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 1em;
    display: inline-block;
}
.rss-card-footer a:focus,
.rss-card-footer a:hover {
    color: var(--accent-glow, #15ffe4);
    text-decoration: underline;
}
.container {
    display: flex;
    flex-direction: row;
    max-width: 1100px;
    margin: 3em auto;
    gap: 1em;
    min-height: 80vh;
}
.main-content {
    flex: 2.5;
    min-width: 0;
}
.sidebar {
    flex: 1;
    background: var(--bg);
    border-radius: 15px;
    box-shadow: 0 0 24px var(--shadow);
    padding: 1.5em 1em 1.2em;
    margin-top: 0.5em;
    margin-bottom: 1em;
    max-width: 340px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 1.3em;
    height: fit-content;
    border: 1px solid var(--border);
}
.sidebar h2 {
    margin: 0 0 0.9em;
    color: var(--accent);
    font-size: 1.28em;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 0.3em;
}
.sidebar-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65em;
    max-height: 50vh;
    overflow-y: auto;
}
.sidebar-article {
    background: var(--bg-secondary);
    border-radius: 9px;
    padding: 0.7em 0.8em;
    font-size: 1em;
    box-shadow: 0 0 6px var(--shadow);
    transition: background 0.18s, box-shadow 0.18s;
    cursor: pointer;
    margin-bottom: 0;
    border: 2px solid transparent;
}
.sidebar-article.active,
.sidebar-article:active,
.sidebar-article:focus {
    background: var(--accent-glow);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow-strong);
}
.sidebar-article:hover {
    background: var(--nav-hover-bg);
}
.sidebar-title {
    color: var(--accent);
    font-size: 1em;
    font-weight: 600;
    display: block;
    margin-bottom: 0.09em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-date {
    color: var(--text-secondary);
    font-size: 0.95em;
}
.sidebar-summary {
    color: var(--nav-text);
    font-size: 0.8em;
    font-style: italic;
    margin-top: 0.15em;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.4em;
}
.sidebar-nav {
    margin-top: 1.3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7em;
    font-size: 1.02em;
}
.sidebar-nav button {
    background: var(--accent-dark);
    color: var(--line-light);
    border: none;
    border-radius: 6px;
    padding: 0.4em 1.2em;
    font-weight: 500;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.16s;
}
.sidebar-nav button:disabled {
    background: var(--border);
    color: var(--text-secondary);
    cursor: default;
}
.news-article {
    padding: 2em;
    border-radius: 12px;
    margin-top: 0.6em;
    margin-bottom: 2em;
    border: 1px solid var(--border);
}
.news-article h2 {
    font-size: 1.5em !important;
    color: var(--text-secondary);
}
.news-article p {
    line-height: 1.7 !important;
    text-align: justify;
}
.headline {
    font-size: 2em;
    margin-bottom: 0.2em;
    color: var(--accent);
}
.summary {
    font-style: italic;
    margin-bottom: 1em;
    color: var(--text-secondary);
}
#loader {
    color: var(--text);
    background: var(--bg-secondary);
    padding: 0.5em 1em;
    border-radius: 7px;
    display: inline-block;
}
pre {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 1em;
}
.news-source {
    margin-top: 1em;
    font-size: 0.98em;
    color: var(--accent-dark);
}
.news-date {
    float: right;
    color: var(--text-secondary);
    font-size: 0.95em;
    margin-left: 1em;
}
.news-header,
.sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin-bottom: 0.2em;
    position: relative !important;
}
.news-meta-row {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    margin-bottom: 1.1em;
}
.news-meta-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7em;
    color: var(--text-secondary);
    gap: 1em;
}
.news-meta-author {
    min-width: 60px;
    text-align: right;
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.7em;
}
.news-header-bottomline {
    border-bottom: 1px solid var(--border-strong);
}
.sidebar-header-bottomline {
    border-bottom: 1px solid var(--border-strong);
}
@media (max-width: 900px) {
    .container {
        flex-direction: column;
        gap: 0.8em;
        max-width: 100vw;
    }
    .sidebar {
        max-width: 100vw;
        min-width: unset;
        margin: 2em 0 1em;
    }
    .main-content {
        margin-right: 0;
    }
}
@media (max-width: 600px) {
    .news-article {
        padding: 1em;
        margin: 1em;
    }
    .sidebar {
        padding: 1em 0.6em;
        margin: 1em;
    }
    body {
        margin: 0;
    }
    .container {
        margin: 1em 0 0;
    }
}
.news-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem 0.5rem;
    scroll-snap-type: x mandatory;
    align-self: center;
    width: 100%;
}
.news-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.news-scroll-container::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}
.news-card {
    flex: 0 0 auto;
    width: 355px;
    scroll-snap-align: start;
    background: var(--card-bg, #222b33);
    border: 1px solid var(--border, #2d3748);
    border-radius: 12px;
    box-shadow: 0 0 12px 2px var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.news-card:focus-within,
.news-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px 2px var(--accent);
}
.news-card-body {
    padding: 1.2rem 1.1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.news-card-title {
    font-size: 1.1rem;
    color: var(--accent-dark, #13d6c5);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.2rem;
    letter-spacing: 0.01em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
.news-date {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--text-secondary, #adb5bd);
    opacity: 0.85;
    margin-left: 10px;
    white-space: nowrap;
}
.news-card-summary {
    font-size: 0.96rem;
    color: var(--text-secondary, #c3c8d1);
    margin: 0;
    line-height: 1.5;
}
.news-card-article {
    font-size: 0.98rem;
    color: var(--text);
    margin: 0.2em 0 0.7em;
    line-height: 1.6;
    word-break: break-word;
}
.news-card-source {
    font-size: 0.91rem;
    color: var(--accent, #22efcf);
    margin-top: 0.2em;
}
.news-card-source a {
    color: var(--accent, #22efcf);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.news-card-source a:focus,
.news-card-source a:hover {
    color: var(--accent-glow, #15ffe4);
    text-decoration: underline;
}
.news-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding: 0.7em 1.1em 1.1em;
    gap: 1em;
    background: none;
}
.news-date {
    font-size: 0.89rem;
    color: var(--text-secondary, #adb5bd);
    white-space: nowrap;
    opacity: 0.85;
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0;
}
.news-card-footer a {
    color: var(--accent, #22efcf);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.01rem;
    transition: color 0.2s, text-decoration 0.2s;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 1em;
    display: inline-block;
}
.news-card-footer a:focus,
.news-card-footer a:hover {
    color: var(--accent-glow, #15ffe4);
    text-decoration: underline;
}
#about .card-body {
    padding: 2rem;
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: var(--card-bg, #222b33);
    border: 1px solid var(--border, #2d3748);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow, #1117);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s, border-color 0.2s;
}
			
			
#contact .card-body {
    padding: 2rem;
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: var(--card-bg, #222b33);
    border: 1px solid var(--border, #2d3748);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow, #1117);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s, border-color 0.2s;
}

/* Main 2-column grid */
.contact-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem 2.5rem;
    width: 100%;
    margin-bottom: 0;
}
.contact-form .form-col {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}
.contact-form .form-group {
    display: flex;
    flex-direction: column;
}
.contact-form .form-group.full-height {
    flex: 1 1 100%;
}
.contact-form label {
    color: var(--text-secondary, #b0b0b0);
    margin-bottom: 0.4rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    border: 1px solid var(--border, #2d3748);
    padding: 0.9rem 1rem;
    font-size: 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: var(--bg, #232b33);
    color: var(--text-secondary, #c8d2e1);
    font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    box-shadow: 0 0 12px 2px var(--accent, #00d4ff);
    border: 1px solid var(--border, #00d4ff);
    outline: none;
}
.contact-form select {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2388e7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1.3em 1.3em;
    padding-right: 2.5em;
    appearance: none;
    cursor: pointer;
    min-width: 160px;
}
.contact-form button.form-submit {
    margin-top: 1.2em;
    background: linear-gradient(90deg, #19affc, #2be0c7);
    color: #182430;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.07rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 18px rgba(25, 175, 252, 0.1);
}
.contact-form button.form-submit:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 28px 0 #19affc1f;
}
#form-result {
    font-size: 1.07em;
    min-height: 32px;
}
/* Responsive: stack columns on mobile */
@media (max-width: 900px) {
    .contact-form .form-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem 0;
    }
    .contact-form .form-col {
        gap: 1.1rem;
    }
    .contact-form button.form-submit {
        width: 100%;
    }
}
#form-modal.modal,
#form-modal.modal.active {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto;
  background: var(--accent-glow-strong);
  z-index: 9999;
}
.modal-content {
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  z-index: 2;
  background: var(--card-bg, #f2f9ff);
  border-radius: 16px;
  padding: 2em 2.2em;
  box-shadow: 0 18px 42px var(--shadow, #3399ff22);
  border: 2px solid var(--accent, #3399ff);
  max-width: 30vw; min-width: 320px;
  animation: popUp 0.22s cubic-bezier(.23,1.02,.44,1.19);
}
@keyframes popUp {
  from { opacity:0; transform:translateY(44px) scale(0.97);}
  to { opacity:1; transform:translateY(0) scale(1);}
}
.modal-close {
  position: absolute; top: 15px; right: 15px;
  cursor: pointer;
  font-size: 2em;
  color: var(--accent, #3399ff);
  opacity: .7;
  z-index: 2;
  user-select: none;
  transition: color 0.13s;
}
.modal-close:hover { opacity:1; color: var(--accent-dark);}
.modal-message { 
  font-size: 1.15em; 
  color: var(--text-secondary); 
  margin:0 0 1em 0; 
}
.form-error {
  color: var(--accent-dark);
  background: #ffe7ee;
  border-left: 5px solid #dc3545;
  padding: 0.8em 1em; border-radius: 7px; margin: 1em 0;
  font-weight: 500;
}
.form-success {
  color: var(--accent);
  background: var(--bg-secondary);
  border-left: 5px solid var(--accent);
  padding: 0.8em 1em; border-radius: 7px; margin: 1em 0;
  font-weight: 500;
}


footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: var(--footer-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 0 20px var(--shadow);
    color: var(--text-secondary);
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    z-index: 1001;
    font-family: 'Orbitron', sans-serif;
}
.footer {
    background: var(--footer-bg, #f5fcff);
    color: var(--text, #002244);
    border-top: 2px solid var(--border, #3399ff44);
    font-size: 1rem;
    margin-top: 2.5em;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4em 2.2em;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.2em 1.8em 0.5em 1.8em;
    background: transparent;
}

.footer-section {
    min-width: 180px;
    text-align: left;
}
.footer-section h3 {
    margin-bottom: 0.7em;
    color: var(--accent, #3399ff);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.footer-section a, .footer-section p {
    color: var(--text-secondary, #003366);
    text-decoration: none;
    display: block;
    margin-bottom: 0.38em;
    font-size: 1rem;
    line-height: 1.6;
    transition: color 0.19s;
}
.footer-section a:hover {
    color: var(--accent-dark, #003366);
    text-decoration: underline;
}

.footer-bottom-bar {
    width: 100%;
    background: transparent;
    padding: 0;
}
.footer-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.98rem;
    color: var(--text-secondary, #003366);
    /* border-top removed — .footer-bottom-bar already draws the divider,
       having both produced a double hr line above the copyright. */
    padding: 1.1em 1.8em 1.4em 1.8em;
    text-align: center;
    gap: 0;
    background: transparent;
}
.footer-col {
    font-size: 1rem;
    color: var(--text-secondary, #003366);
    padding: 0.5em 0.6em;
    font-weight: 400;
}
.footer-col b, .footer-col strong {
    color: var(--accent, #3399ff);
    font-weight: 700;
}

@media (max-width: 900px) {
    .footer-main-grid, .footer-bottom-grid {
        grid-template-columns: 1fr;
        text-align: left;
        padding-left: 1.2em;
        padding-right: 1.2em;
        gap: 0.7em 0;
    }
    .footer-col {
        text-align: left;
        padding-left: 0;
    }
}

@keyframes blackhole-implode {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
        filter: blur(0px);
    }
    30% {
        transform: scale(0.8) translate(0, 0);
        opacity: 0.9;
        filter: blur(1px);
    }
    60% {
        transform: scale(0.4) translate(0, 0);
        opacity: 0.5;
        filter: blur(3px);
    }
    100% {
        transform: scale(0) translate(0, 0);
        opacity: 0;
        filter: blur(6px);
    }
}
@keyframes cursor-blink {
    0%,
    100% {
        border-color: var(--accent-glow);
    }
    50% {
        border-color: transparent;
    }
}
@keyframes glow {
    0% {
        text-shadow: 0 0 5px var(--accent);
    }
    50% {
        text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent-glow);
    }
    100% {
        text-shadow: 0 0 5px var(--accent);
    }
}
@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 6px var(--accent-glow);
    }
    50% {
        box-shadow: 0 0 25px var(--accent), 0 0 50px var(--accent-glow);
    }
    100% {
        box-shadow: 0 0 6px var(--accent-glow);
    }
}
@keyframes type-glow {
    0%,
    100% {
        text-shadow: 0 0 5px var(--accent-glow);
    }
    50% {
        text-shadow: 0 0 15px var(--accent), 0 0 30px var(--accent-glow-strong);
    }
}
.tab-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    border-radius: 14px 14px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px;
}
.tab-buttons::-webkit-scrollbar {
    display: none;
}
.tab-btn {
    flex: 1 0 auto;
    min-width: 90px;
    max-width: 180px;
    border: 1.5px solid var(--accent, #2af7c9);
    border-radius: 9px 9px 0 0;
    padding: 0.45rem 0.7rem;
    font-size: 0.97rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    outline: none;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px 0 var(--accent-glow, #41ffe822);
    white-space: nowrap;
    margin: 0 3px;
}
.tab-btn:focus-visible {
    outline: 2px solid var(--accent, #2af7c9);
    z-index: 3;
}
.tab-btn.active,
.tab-btn:hover {
    box-shadow: 0 0 12px 2px var(--accent);
    color: var(--accent-alt);
    border-bottom: 1.5px solid transparent;
    transform: scale(1.03);
    z-index: 5;
    background: var(--accent-rgb);
}
.tab-content {
    opacity: 0;
    pointer-events: none;
    display: none;
    transition: opacity 0.35s cubic-bezier(.4,.2,.2,1);
    align-self: center;
}
.tab-content.showing {
    display: block;
}
.tab-content.active {
    opacity: 1;
    pointer-events: auto;
}
.card.recommended {
    border: 2px solid var(--accent, #2af7c9);
    box-shadow: 0 0 12px var(--accent-glow, #41ffe8aa);
    transform: scale(1.025);
    z-index: 2;
}
.price {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--accent-glow-text, #00ffe1);
}
.card-footer {
	text-align: center;
  font-size: .97em;
  opacity: .80;
  border-top: 1px solid var(--border);
  padding-top: .7em;
  margin-top: .6em;
}
.btn.btn-pulse {
    padding: 0.7em 2em;
    font-weight: 700;
    border-radius: 8px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 0 15px var(--accent-glow);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    max-width: 400px;
    align-self: center;
}
.btn.btn-pulse:hover {
    background: var(--accent-glow);
    color: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow-strong);
}
@media (max-width: 900px) {
    .pricing-row {
        flex-direction: column;
        gap: 1.4rem;
    }
}
#themeSidebarToggle {
    color: var(--nav-text);
    text-decoration: none;
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
    position: relative;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: var(--nav-bg);
    transition: all 0.3s ease-in-out;
    margin-left: 2rem;
}
#themeSidebar {
    position: fixed;
    top: 110px;
    right: 0;
    width: 300px;
    height: calc(100% - 110px);
    background: var(--bg-secondary, #eee);
    border-left: 2px solid var(--border, #ccc);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 2.5rem;
    scroll-padding-bottom: 2.5rem;
}
#themeSidebar.active {
    transform: translateX(0);
}
#themeDescription {
    font-size: 0.9em;
    margin-bottom: 1em;
    padding: 0.5em;
    background: var(--card-bg, #f9f9f9);
    border-left: 4px solid var(--accent, #888);
}
.theme-item {
    padding: 0.3em;
    margin: 0.5em;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #ccc);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}
.theme-item:hover {
    background: var(--nav-hover-bg, #eee);
}
.color-preview {
    display: flex;
    gap: 4px;
}
.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #999;
}
.hidden {
    display: none;
}
.svg-logo {
    width: 150px !important;
}
.theme-item.selected {
    outline: 2px solid var(--accent, #00f0ff);
    background: rgba(0,0,0,0.08);
    border-radius: 8px;
}
.layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
.feature-nav-side {
    position: sticky;
    top: 100px;
    padding: 1rem;
    border-right: 1px solid var(--border);
    min-width: 350px;
    font-size: 0.9rem;
}
.feature-nav-side ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-nav-side li {
    margin-bottom: 0.75rem;
}
.feature-nav-side a {
    text-decoration: none;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.feature-nav-side a.active {
    color: var(--accent-dark);
    font-weight: bold;
}
.feature-nav-side a:hover {
    color: var(--accent);
}
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
        margin: 1rem;
    }
    .feature-nav-side {
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: 100%;
        overflow-x: auto;
    }
    .feature-nav-side ul {
        display: flex;
        gap: 1rem;
        padding-bottom: 0.5rem;
    }
    .feature-nav-side li {
        margin-bottom: 0;
    }
}
.accordion-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px var(--shadow);
    position: relative;
    overflow: hidden;
}
.accordion-button {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 1rem;
    transition: background-color 0.3s ease;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-weight: bold;
}
.accordion-button.active,
.accordion-button:hover {
    background-color: var(--bg-secondary);
    color: var(--accent-dark);
    box-shadow: inset 0 -1px 0 var(--accent);
}
.accordion-header {
    position: sticky;
    z-index: 1;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.accordion-collapse {
    display: block;
    transition: max-height 0.3s ease;
}
.accordion-collapse.show {
    display: block;
}
.accordion-body {
    background-color: var(--card-bg);
    color: var(--text);
    padding: 0.6rem;
    overflow-x: auto;
}
.accordion-item:last-child .accordion-header {
    border-bottom: none;
}
.feature-header {
    position: sticky;
    top: 105px;
    z-index: 9;
    background: var(--bg);
    font-weight: bold;
    font-size: 0.95rem;
    border-bottom: 2px solid var(--border);
    text-align: center;
    gap: 10px;
    padding-bottom: 0.2rem;
}
#aboutH1 {
    font-size: 1.5rem;
}
.feature-header span {
    font-weight: 600;
    color: var(--accent-dark);
    white-space: nowrap;
}
.feature-header span:first-child {
    text-align: left;
    color: var(--text);
}
.feature-header span.sticky-col {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 9;
    padding: 0.5rem;
}
.feature-header,
.feature-list {
    display: grid;
    grid-template-columns: minmax(310px, 1fr) repeat(5, 1fr);
    gap: 0.5rem;
}


.feature-list-optional {
    display: grid;
    grid-template-columns: minmax(310px, 1fr) repeat(1, 1fr);
    gap: 0.5rem;
    font-size: 0.75rem;
}
.feature-list {
    font-size: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.feature-row {
    display: contents;
}
.feature-row span {
    border-bottom: 1px solid var(--border);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
.feature-row span.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    background: var(--card-bg);
    color: var(--text-secondary);
}
.feature-list li span[data-value="✅"],
.feature-row span[data-value="✅"] {
    color: green;
}
.feature-list li span[data-value="❌"],
.feature-row span[data-value="❌"] {
    color: red;
}
.feature-list li span[data-value="➕"],
.feature-row span[data-value="➕"] {
    color: dodgerblue;
}
@media (max-width: 900px) {
    .layout {
        gap: 1rem;
    }
    .feature-nav-side {
        min-width: 150px;
        padding: 0.6rem 0.3rem;
    }
    .feature-header,
    .feature-list {
        grid-template-columns: minmax(120px, 2fr) repeat(5, minmax(80px, 1fr));
    }
    .layout {
        flex-direction: column;
        gap: 0.5rem;
        margin: 1rem;
    }
    .feature-nav-side {
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--border);
        min-width: unset;
        max-width: unset;
        width: 100%;
        background: var(--bg-secondary);
        padding: 0.2rem 0.2rem 0.6rem;
        overflow-x: auto;
        z-index: 5;
        font-size: 0.97rem;
    }
    .feature-header {
        top: 60px;
    }
    .feature-list-optional {
        grid-template-columns: minmax(140px, 0fr) repeat(1, minmax(60px, 1fr));
    }
}
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
        gap: 0.5rem;
        margin: 1rem;
    }
    .feature-nav-side {
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--border);
        min-width: unset;
        max-width: unset;
        width: 100%;
        background: var(--bg-secondary);
        padding: 0.2rem 0.2rem 0.6rem;
        overflow-x: auto;
        z-index: 5;
    }
    .feature-header {
        top: 60px;
    }
    .feature-nav-side ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.7rem;
        padding-bottom: 0.5rem;
        overflow-x: auto;
        margin: 0 -0.4rem;
    }
    .feature-nav-side li {
        margin-bottom: 0;
    }
    .feature-nav-side a {
        white-space: nowrap;
        padding: 7px 9px;
        font-size: 1em;
        min-width: 90px;
    }
}
@media (max-width: 650px) {
    .accordion-item {
        margin-bottom: 0.75rem;
        border-radius: 5px;
    }
    .accordion-button {
        font-size: 0.99rem;
        padding: 0.7rem 0.75rem;
    }
    .accordion-body {
        padding: 0.75rem 0.4rem;
        font-size: 0.96em;
    }
    .feature-header,
    .feature-list {
        grid-template-columns: minmax(80px, 2.5fr) repeat(5, minmax(60px, 1fr));
        min-width: 420px;
    }
    .feature-header {
        top: 60px;
    }
    .feature-list-optional {
        grid-template-columns: minmax(140px, 0fr) repeat(1, minmax(60px, 1fr));
    }
    .feature-header span,
    .feature-row span {
        padding: 0.36rem 0.16rem;
        font-size: 0.78em;
    }
    .feature-header span.sticky-col,
    .feature-row span.sticky-col {
        min-width: 80px;
        max-width: 110px;
        white-space: wrap;
    }
}
@media (max-width: 500px) {
    .accordion-button,
    .accordion-header {
        font-size: 1rem;
        padding: 0.4rem 0.2rem;
        font-weight: bold;
    }
    .accordion-body {
        padding: 0.48rem 0.05rem;
        font-size: 0.94em;
    }
    .feature-header,
    .feature-list {
        grid-template-columns: minmax(70px, 3fr) repeat(5, minmax(48px, 1fr));
    }
    .feature-header {
        top: 60px;
    }
    .feature-list-optional {
        grid-template-columns: minmax(140px, 0fr) repeat(1, minmax(60px, 1fr));
    }
    .feature-header span,
    .feature-row span {
        padding: 0.28rem 0.10rem;
        font-size: 0.92em;
    }
}
@media (max-width: 400px) {
    .feature-header,
    .feature-list,
    .feature-list-optional {
        overflow-x: auto;
    }
    .feature-header {
        top: 60px;
    }
}
.glow {
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}
.glow:hover {
    box-shadow: 0 0 12px var(--accent);
    border: 1px solid var(--accent-glow);
    padding: 1px 5px;
}
.glow::after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--bg-secondary);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85em;
    white-space: normal;
    word-break: break-word;
    min-width: 320px;
    max-width: 420px;
    opacity: 0;
    pointer-events: none;
    border: 1px solid var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 999;
}
.glow:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-12px);
}
.glow::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 998;
}
.glow:hover::before {
    opacity: 1;
}
@media (max-width: 950px) {
    .tab-buttons {
        gap: 0.1rem;
        padding: 0.06rem 0.1rem;
        border-radius: 5px 5px 0 0;
        justify-content: flex-start;
        align-self: center;
    }
    .tab-btn {
        min-width: 68px;
        font-size: 0.79rem;
        padding: 0.33rem 0.18rem;
        border-radius: 5px 5px 0 0;
    }
    .services-grid {
        grid-template-columns: 1fr;
        margin-top: 0.2rem;
    }
    .flip-card {
        min-height: 180px;
    }
    .section {
        padding: 0;
        max-width: 100%;
    }
    .card-header {
        padding-bottom: 0.2rem;
        margin-top: 3rem;
    }
    h2 {
        font-size: 2rem;
        margin-bottom: 5px;
    }
    #themeSidebar {
        width: 100%;
        top: 55px;
        left: 0;
        right: 0;
        height: calc(100% - 55px);
        border-left: none;
        border-top: 2px solid var(--border, #ccc);
        transform: translateY(100%);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #themeSidebar.active {
        transform: translateY(0);
    }
    #themeSidebarToggle {
        top: 10px;
        right: 10px;
        left: auto;
        padding: 0.5em 1em;
        font-size: 1rem;
    }
    .theme-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25em;
    }
    .color-preview {
        margin-top: 0.25em;
    }
    .svg-logo {
        width: 70px !important;
    }
    #hero-title {
        font-size: 7vw;
        white-space: normal;
        text-align: center;
        border-right: 1px solid var(--accent-glow);
        padding: 0 1rem;
    }
    #hero-sub {
        font-size: 4.5vw;
        text-align: center;
        padding: 0 1.5rem;
        margin-top: 1.2rem;
    }
    .hero-content {
        padding: 2rem 1rem;
        max-width: 95vw;
    }
    .hero h2 {
        font-size: 2rem;
    }
    .btn {
        font-size: 4.5vw;
        padding: 0.7em 1.5em;
        text-align: center;
        display: inline-block;
    }
    .menu-toggle {
        display: flex;
    }
    .bar {
        display: block;
    }
    header nav {
        position: absolute;
        top: 55px;
        left: 0;
        width: 100%;
        background: var(--bg);
        flex-direction: column;
        align-items: flex-start;
        display: none;
        padding: 1rem;
        border-top: 1px solid var(--border);
        box-shadow: 0 8px 12px var(--shadow);
    }
    header nav.active {
        display: flex;
    }
    header nav a {
        margin: 0.8rem 0;
        color: var(--nav-text);
        text-decoration: none;
        padding: 0 1rem;
        font-size: 1.1rem;
        position: relative;
        border: 1px solid transparent;
        border-radius: 10px;
        background-color: var(--nav-bg);
        transition: all 0.3s ease-in-out;
        width: 80% !important;
    }
    .footer-col {
        flex: 100%;
        text-align: center;
        padding: 0.2rem 0;
    }
    footer {
        flex-direction: column;
        font-size: 0.75rem;
    }

}
/* ↑ closes the original unclosed @media(max-width:950px) so the redesign below is TOP-LEVEL */
/* =====================================================================
   AEU-I REDESIGN v2 - clean corporate (strong, comprehensive override)
   Kills the cyber glow (radial vignette, gradient bg, Orbitron, neon
   shadows, animated scrollbar) and imposes a calm professional system,
   built on the existing 47 theme tokens. Layout/mechanics untouched.
   ===================================================================== */
:root{
  --r-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --r-maxw:1180px; --r-radius:16px;
  --r-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 30px rgba(15,23,42,.08);
  --r-shadow-lg:0 24px 60px rgba(15,23,42,.16);
}

/* ---- 1. Kill the cyber atmosphere ---- */
body::before{ display:none !important; }                 /* radial glow → gone */
#particles-bg{ opacity:.35 !important; }                  /* keep, but whisper-quiet */
html body{
  font-family:var(--r-font) !important;
  background:var(--bg) !important;                        /* flat, clean ground */
  color:var(--text) !important; line-height:1.65 !important;
}
*{ text-shadow:none !important; }
::-webkit-scrollbar-thumb{ animation:none !important; box-shadow:none !important; background:var(--border-strong) !important; }

/* ---- 2. Typography ---- */
body, p, li, a, span, div, td, th, label, input, textarea, select, button,
h1, h2, h3, h4, h5, .btn, .tab-btn, nav a{ font-family:var(--r-font) !important; }
h1,h2,h3,h4,h5{ letter-spacing:-.025em !important; font-weight:800 !important; line-height:1.14 !important; color:var(--text) !important; }
p, li{ color:var(--text-secondary) !important; }

/* ---- 3. Container + section rhythm ---- */
.section{ max-width:var(--r-maxw) !important; margin:0 auto !important; padding:80px 24px !important; }
.section > h1, #aboutH1{ font-size:clamp(1.9rem,3.4vw,2.7rem) !important; margin-bottom:26px !important; text-align:center; }

/* ---- 4. Header / nav ---- */
header{
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:none !important;
  position:sticky !important; top:0 !important; z-index:1000 !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
}
header nav a{
  margin-left:.35rem !important; background:transparent !important; border:1px solid transparent !important;
  border-radius:10px !important; font-size:.95rem !important; font-weight:600 !important; color:var(--nav-text) !important;
  box-shadow:none !important; transition:background .15s, color .15s !important;
}
header nav a:hover{ background:var(--nav-hover-bg) !important; border-color:transparent !important; box-shadow:none !important; }
#themeSidebarToggle{
  border-radius:10px !important; font-weight:700 !important; border:1px solid var(--border-strong) !important;
  background:var(--nav-bg) !important; box-shadow:none !important;
}

/* ---- 5. Buttons ---- */
.btn, #cta-btn{
  font-weight:700 !important; font-size:.95rem !important;
  background:var(--accent) !important; color:#fff !important; border:1px solid var(--accent) !important;
  border-radius:12px !important; padding:13px 26px !important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 32%,transparent) !important;
  animation:none !important; letter-spacing:0 !important;
  transition:transform .16s, filter .16s !important;
}
.btn:hover, #cta-btn:hover{ transform:translateY(-2px) !important; filter:brightness(1.07) !important; }
.btn-pulse{ animation:none !important; }

/* ---- 6. Hero ---- */
.hero{ min-height:auto !important; padding:100px 24px 72px !important; background:transparent !important; box-shadow:none !important; }
.hero-content{ max-width:var(--r-maxw) !important; margin:0 auto !important; text-align:center; }
#hero-title{ font-size:clamp(2.4rem,5.4vw,3.8rem) !important; font-weight:800 !important; color:var(--text) !important; }
#hero-sub{ font-size:1.18rem !important; color:var(--text-secondary) !important; max-width:56ch; margin:16px auto 0 !important; }

/* ---- 7. Cards (incl. flip cards & service cards) ---- */
.card, .card-front, .card-back{
  background:var(--card-bg) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-radius) !important; box-shadow:var(--r-shadow) !important;
  backdrop-filter:blur(4px);
}
.card-header{ border-bottom:1px solid var(--border) !important; background:transparent !important; }
.services-grid{ gap:20px !important; }
.flip-card{ box-shadow:none !important; }
.flip-card:hover{ transform:translateY(-4px) !important; }
.flip-card .card-front:hover, .card:hover{ box-shadow:var(--r-shadow-lg) !important; }
.card-front h3, .card-back h3, .card-header h2, .card-header h3{ color:var(--text) !important; }

/* ---- 8. Pricing ---- */
.tab-btn{ border-radius:10px !important; font-weight:700 !important; box-shadow:none !important; border:1px solid transparent !important; }
.tab-btn.active{ background:var(--accent) !important; color:#fff !important; box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent) !important; }
.glow-tooltip{ text-shadow:none !important; }

/* ---- 9. Contact form ---- */
#contact-form input, #contact-form textarea, #contact-form select{
  border-radius:11px !important; border:1px solid var(--border-strong) !important;
  background:var(--bg-secondary) !important; box-shadow:none !important; font-size:.95rem !important;
}
#contact-form input:focus, #contact-form textarea:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent) !important; outline:none !important;
}

/* ---- 10. Footer + misc ---- */
footer{ background:var(--footer-bg) !important; border-top:1px solid var(--border) !important; box-shadow:none !important; }
.svg-logo{ filter:none !important; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }

/* ===== REDESIGN v2.1 - fix double borders + mobile ===== */
/* Services & Pricing wrap their inner cards in an outer .card - drop that outer
   box so borders don't nest/stack (About stays a single bordered card). */
#services > .card, #pricing > .card{
  background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;
}
#services > .card > .card-header, #pricing > .card > .card-header{
  border-bottom:none !important; background:transparent !important;
}
/* Flip card: only the visible face carries the border - not the container. */
.card.flip-card, .flip-card, .flip-card-inner{
  background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;
}
.card-front, .card-back{ border:1px solid var(--border) !important; box-shadow:var(--r-shadow) !important; }
.card-back{ overflow:auto !important; }
/* Pricing plan cards keep ONE border (they're the content cards now). */
.pricing-row > .card{ border:1px solid var(--border) !important; }

/* ---- Mobile ---- */
@media (max-width:640px){
  .section{ padding:54px 16px !important; }
  #hero-title{ font-size:clamp(2rem,8.5vw,2.7rem) !important; }
  #hero-sub{ font-size:1.02rem !important; }
  .services-grid{ grid-template-columns:1fr !important; gap:16px !important; }
  .flip-card{ height:340px !important; }          /* taller so back content fits */
  .card-back{ overflow:auto !important; }
  .pricing-row{ flex-direction:column !important; gap:16px !important; }
  .pricing-row > .card{ flex:1 1 100% !important; width:100% !important; }
  /* kill any sideways scroll */
  .card, .card-body, .pricing-row, .tab-content, .services-grid{ max-width:100% !important; }
}

/* ===== REDESIGN v2.2 - theme picker stays a right-side drawer on mobile ===== */
@media (max-width:950px){
  #themeSidebar{
    width:min(320px,86vw) !important;
    left:auto !important; right:0 !important;
    top:56px !important; height:calc(100% - 56px) !important;
    border-left:2px solid var(--border) !important; border-top:none !important;
    transform:translateX(100%) !important;
  }
  #themeSidebar.active{ transform:translateX(0) !important; }
}

/* ===== REDESIGN v2.3 - feature comparison table responsive on mobile ===== */
@media (max-width:900px){
  /* Contain the wide grid inside a horizontal scroller so the PAGE never
     overflows; the feature-name column stays pinned while plans swipe. */
  #features, .features-content{ max-width:100% !important; }
  .features-content{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  .feature-header, .feature-list{
    grid-template-columns: minmax(150px,44vw) repeat(5, minmax(62px,1fr)) !important;
    min-width:600px !important;
  }
  .feature-list-optional{
    grid-template-columns: minmax(150px,44vw) repeat(1,1fr) !important;
    min-width:auto !important;
  }
  .feature-row span{ font-size:.72rem !important; padding:.45rem .3rem !important; white-space:normal !important; }
  .feature-header span.sticky-col, .feature-row span.sticky-col{ min-width:150px !important; text-align:left !important; }
}
@media (max-width:480px){
  .feature-header, .feature-list{ min-width:520px !important; }
  .feature-row span{ font-size:.68rem !important; }
}

/* ===== REDESIGN v3 — hero proportion + professional polish ===== */
.hero{ height:auto !important; min-height:clamp(500px,74vh,720px) !important; padding:92px 24px 60px !important; }
.hero-content{ min-height:0 !important; height:auto !important; }

/* ===== REDESIGN v3.1 — professional polish ===== */
/* Particles: whisper-quiet so the page reads corporate, not "techy/empty" */
#particles-bg{ opacity:.10 !important; }
/* About: ONE clean card (kill the nested bordered box) */
#about .card-body{ border:none !important; background:transparent !important; box-shadow:none !important; padding-top:.25rem !important; }
#aboutH1{ font-size:clamp(1.55rem,4.4vw,2.15rem) !important; margin:0 auto 10px !important; max-width:22ch; }
#contact .card-body{ border:none !important; background:transparent !important; box-shadow:none !important; }
/* Reserve hero title height so the typing animation never collapses the layout */
#hero-title{ min-height:2.3em !important; display:flex; align-items:center; justify-content:center; }
/* Denser, more confident spacing */
.section{ padding:62px 22px !important; }
.card{ border-radius:18px !important; }
.card-body{ padding:1.5rem !important; }
@media (max-width:640px){
  .section{ padding:40px 14px !important; }
  .card-body{ padding:1.15rem !important; }
  #about .card-body{ padding:.25rem !important; }
  .hero{ min-height:clamp(420px,72vh,560px) !important; padding:72px 16px 44px !important; }
}

/* ===== REDESIGN v3.2 — professional hero composition ===== */
.hero-eyebrow{
  display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.hero-actions a{ text-decoration:none; }
.hero-secondary{
  background:transparent !important; color:var(--accent) !important;
  border:1px solid var(--border-strong) !important; box-shadow:none !important; font-weight:700 !important;
}
.hero-secondary:hover{ border-color:var(--accent) !important; transform:translateY(-2px); }
.hero-trust{
  list-style:none; display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  margin:32px 0 0 !important; padding:0 !important;
}
.hero-trust li{
  font-size:.85rem; font-weight:600; color:var(--text-secondary);
  display:flex; align-items:center; gap:7px;
}
.hero-trust li::before{ content:"✓"; color:#16a34a; font-weight:900; font-size:.9em; }
@media (max-width:640px){
  .hero-trust{ gap:8px 18px !important; margin-top:24px !important; }
  .hero-trust li{ font-size:.8rem; }
}

/* ===== REDESIGN v4 — premium dark tech (boa-concept direction) ===== */
/* Geometric display font for all headings + eyebrows */
h1,h2,h3,h4,h5,#hero-title,#aboutH1,.head h2,.hero-eyebrow,.eyebrow,
.card-header h2,.card-header h3,.card-front h3,.card-back h3,.plan h3,.pricing-row .card-header{
  font-family:'Sora',var(--r-font) !important; letter-spacing:-.02em !important;
}
#hero-title{ font-weight:800 !important; line-height:1.08 !important; }
.head h2, #aboutH1{ font-weight:700 !important; }

/* Eyebrow with a short accent line — the boa "— label" motif */
.hero-eyebrow{ position:relative; color:var(--accent) !important; letter-spacing:.14em !important; }
.hero-eyebrow::before{
  content:""; display:inline-block; width:26px; height:2px; background:var(--accent);
  vertical-align:middle; margin-right:11px; border-radius:2px;
}

/* Premium dark cards: hairline border + deep soft shadow */
.card, .card-front, .card-back, .plan, #about .card{
  border:1px solid var(--border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 22px 55px rgba(0,0,0,.38) !important;
}
.card:hover, .plan:hover, .flip-card:hover .card-front{
  border-color:var(--accent) !important;
}

/* Pill CTAs with an arrow (boa "CONTACT ›") */
.btn, #cta-btn, .hero-secondary, .tab-btn{ border-radius:999px !important; }
#cta-btn::after, .hero-secondary::after{ content:" \203A"; font-weight:800; }

/* Particles: subtle premium circuit glow on the dark ground */
#particles-bg{ opacity:.30 !important; }
body::before{ display:none !important; }

/* (removed two conflicting header-background rules — the authoritative
   transparent-top / white-on-scroll behaviour lives in the v10 block below) */

/* ===== REDESIGN v5 — structural layout (boa direction) ===== */
.hero{ min-height:auto !important; padding:66px 24px 52px !important; }
.hero-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero-text{ text-align:left !important; }
.hero-text .hero-eyebrow{ margin-bottom:16px; }
.hero-text #hero-title{ text-align:left !important; justify-content:flex-start !important; margin:0 0 4px !important; font-size:clamp(2.4rem,4vw,3.4rem) !important; }
.hero-text #hero-sub{ margin:14px 0 0 !important; max-width:46ch; }
.hero-text .hero-actions{ justify-content:flex-start !important; }
.hero-text .hero-trust{ justify-content:flex-start !important; }

.hero-panel{ background:linear-gradient(180deg, var(--bg-secondary), var(--bg)); border:1px solid var(--border);
  border-radius:18px; padding:22px; box-shadow:0 30px 70px rgba(0,0,0,.45); position:relative; overflow:hidden; }
.hero-panel::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--accent),transparent); }
.hp-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid var(--border); }
.hp-title{ font-weight:800; color:var(--text) !important; display:flex; align-items:center; gap:9px; font-family:'Sora',sans-serif !important; font-size:1rem; }
.hp-title i{ color:var(--accent); }
.hp-status{ font-size:.72rem; font-weight:800; color:#16a34a; display:inline-flex; align-items:center; gap:7px; background:rgba(22,163,74,.14); padding:5px 11px; border-radius:999px; }
.hp-dot{ width:7px; height:7px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.2); }
.hp-rows{ display:flex; flex-direction:column; margin-top:4px; }
.hp-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--border); }
.hp-row:last-child{ border-bottom:0; }
.hp-k{ color:var(--text-secondary) !important; font-size:.88rem; }
.hp-v{ color:var(--text) !important; font-weight:700; font-size:.88rem; }
.hp-v.ok{ color:#16a34a !important; }
.hp-foot{ margin-top:13px; padding-top:13px; border-top:1px solid var(--border); font-size:.8rem; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.hp-foot i{ color:var(--accent); }

.logo-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.logo-strip .ls-label{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); font-weight:700; }
.logo-strip-inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; }
.logo-strip-inner span{ font-family:'Sora',sans-serif; font-weight:700; font-size:1rem; color:var(--text); opacity:.55; transition:opacity .2s,color .2s; }
.logo-strip-inner span:hover{ opacity:1; color:var(--accent); }

@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; gap:32px; }
  .hero-text{ text-align:center !important; }
  .hero-text #hero-title{ text-align:center !important; justify-content:center !important; }
  .hero-text #hero-sub{ margin-left:auto !important; margin-right:auto !important; }
  .hero-text .hero-actions, .hero-text .hero-trust{ justify-content:center !important; }
  .hero-visual{ max-width:440px; margin:0 auto; width:100%; }
}

/* ===== Scroll-reveal motion (boa-style enter on scroll) ===== */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .75s cubic-bezier(.16,.7,.2,1), transform .75s cubic-bezier(.16,.7,.2,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.14s } .reveal.d3{ transition-delay:.22s } .reveal.d4{ transition-delay:.30s }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important } }

/* ===== Numbered section eyebrows (boa "01 · LABEL —") ===== */
body{ counter-reset: aeusec; }
.sec-eyebrow{
  counter-increment: aeusec;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:'Sora',sans-serif; font-size:.74rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent) !important; margin:0 auto 12px; width:fit-content;
}
.sec-eyebrow::before{ content: counter(aeusec, decimal-leading-zero); font-size:1rem; opacity:.95; }
.sec-eyebrow::after{ content:""; width:26px; height:2px; background:var(--accent); opacity:.55; border-radius:2px; }
/* news card-header is inline text; let the eyebrow sit on its own line */
#news-feed .card-header{ display:flex; flex-direction:column; align-items:center; gap:8px; }

/* ===== REDESIGN v6 — cinematic hero + scroll header + fewer borders ===== */
/* Full-viewport cinematic hero with an accent glow (matches the active theme) */
.hero{ min-height:94vh !important; display:flex !important; align-items:center !important; position:relative !important; padding:120px 24px 64px !important; }
.hero::after{ content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; z-index:0 !important;
  background:radial-gradient(760px 520px at 78% 26%, var(--accent), transparent 62%) !important; opacity:.13 !important; width:100% !important; height:100% !important; }
.hero-inner{ position:relative; z-index:1; width:100%; }
#particles-bg{ opacity:.45 !important; }

/* Header: transparent over the hero, solidifies + blurs on scroll */
header{ background:transparent !important; border-bottom:1px solid transparent !important; box-shadow:none !important;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease !important; padding:1rem 2rem !important; }
header.scrolled{ background:var(--header-bg) !important; border-bottom:1px solid var(--border) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.4) !important; backdrop-filter:blur(12px); padding:.55rem 2rem !important; }

/* ---- Kill the "many borders / AI" look: elevation over hairlines ---- */
/* Section wrapper cards: no box at all (just heading + content) */
#about > .card, #services > .card, #pricing > .card{ background:transparent !important; border:none !important; box-shadow:none !important; }
/* Content cards: subtle raised surface, border only appears on hover */
.card, .card-front, .card-back, .plan, #about .card-body, .hero-panel, .pricing-row > .card{
  border:1px solid transparent !important;
  background:var(--bg-secondary) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.34) !important;
}
.card:hover, .plan:hover, .flip-card:hover .card-front, .pricing-row > .card:hover{
  border-color:var(--accent) !important;
}
.card-header{ border-bottom:1px solid var(--border) !important; }
#about .card-body{ border:1px solid transparent !important; }

/* ===== REDESIGN v7 — real imagery ===== */
/* Hero background photo with a left-dark gradient so text stays readable */
.hero{
  background-image:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb,var(--bg) 82%,transparent) 46%, color-mix(in srgb,var(--bg) 42%,transparent) 100%),
    url('/assets/img/hero-bg.jpg') !important;
  background-size:cover !important; background-position:center right !important; background-repeat:no-repeat !important;
}
/* fallback if color-mix unsupported: solid-ish dark overlay */
@supports not (color: color-mix(in srgb, red, blue)){
  .hero{ background-image: linear-gradient(90deg, rgba(13,17,23,.96), rgba(13,17,23,.55)), url('/assets/img/hero-bg.jpg') !important; }
}
.hero::after{ opacity:.10 !important; }

/* ===== v7 — image + text split sections ===== */
.split{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media img{ width:100%; height:100%; max-height:440px; min-height:300px; object-fit:cover; border-radius:16px; box-shadow:0 26px 60px rgba(0,0,0,.5); border:1px solid var(--border); display:block; }
.split-text{ text-align:left !important; }
.split-text h2, .split-text h3{ font-family:'Sora',sans-serif !important; text-align:left !important; margin:0 0 14px !important; font-size:clamp(1.5rem,2.6vw,2.1rem) !important; }
.split-text p{ text-align:left !important; margin:0 0 14px !important; color:var(--text-secondary) !important; }
.feature-rows{ padding-top:24px !important; }
.feat-row{ margin:0 auto 70px; } .feat-row:last-child{ margin-bottom:0; }
.feat-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.feat-eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent); }
.feat-list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.feat-list li{ display:flex; gap:10px; align-items:flex-start; color:var(--text-secondary); font-size:.92rem; }
.feat-list li::before{ content:"\2713"; color:#16a34a; font-weight:900; }
@media(max-width:820px){
  .split{ grid-template-columns:1fr; gap:22px; }
  .split.reverse .split-media{ order:0; }
  .split-media img{ max-height:260px; min-height:190px; }
  .split-text, .split-text h2, .split-text h3, .split-text p{ text-align:center !important; }
  .feat-eyebrow{ justify-content:center; } .feat-list li{ text-align:left; }
}

/* ==================================================================== */
/* ===== REDESIGN v8 — white sticky header, unified icons, sales cards = */
/* ==================================================================== */

/* ---- Header: TRANSPARENT over hero → SOLID (themed) on scroll ------- */
header.scrolled{
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 6px 26px rgba(0,0,0,.14) !important;
  backdrop-filter:saturate(140%) blur(8px) !important;
  padding:.5rem 2rem !important;
}
/* themed nav text on the scrolled bar */
header.scrolled #mainNav a{ color:var(--text) !important; }
header.scrolled #mainNav a:hover{ color:var(--accent) !important; }
header.scrolled #themeSidebarToggle{
  color:var(--text) !important; background:transparent !important;
  border:1px solid color-mix(in srgb,var(--text) 22%,transparent) !important;
}
header.scrolled #themeSidebarToggle:hover{ color:var(--accent) !important; border-color:var(--accent) !important; }
header.scrolled .menu-toggle .bar{ background:var(--text) !important; }

/* ---- Nav polish: even spacing + animated underline on hover -------- */
#mainNav{ display:flex; align-items:center; gap:6px; }
#mainNav a{
  position:relative; font-family:'Sora',sans-serif !important;
  font-weight:600 !important; font-size:.94rem !important;
  letter-spacing:.01em; padding:.5rem .85rem !important; border-radius:8px;
  transition:color .2s ease !important;
}
#mainNav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem;
  height:2px; background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
#mainNav a:hover::after{ transform:scaleX(1); }
#themeSidebarToggle{
  font-family:'Sora',sans-serif !important; font-weight:600 !important;
  font-size:.88rem !important; letter-spacing:.02em;
  padding:.5rem 1.05rem !important; border-radius:999px !important;
  border:1px solid rgba(255,255,255,.30) !important;
  background:transparent !important; color:#fff !important; cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease !important;
}
#themeSidebarToggle:hover{ border-color:var(--accent) !important; color:var(--accent) !important; }

/* ---- Hero: right panel keeps a FIXED width (headline typing no longer
        steals space from it, so the card never shrinks) --------------- */
.hero-inner{ grid-template-columns:minmax(0,1fr) 400px !important; align-items:center !important; }
.hero-text{ min-width:0 !important; }
.hero-visual{ min-width:0 !important; width:400px !important; justify-self:end !important; }
.hero-panel{ width:100% !important; }
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr !important; }
  .hero-visual{ width:100% !important; justify-self:stretch !important; }
}

/* ---- Kill the "AI rainbow": decorative auto-icons use ONE accent hue.
        (Pricing ✔ / ✖ / ➕ status cells keep their green/red/amber
        semantic colours — those encode included / excluded / optional.) */
.accordion-button svg *, .sticky-col svg *{ stroke:var(--accent) !important; }
.accordion-button svg, .sticky-col svg{ stroke:var(--accent) !important; }

/* ==================================================================== */
/* ---- SERVICE CARDS: no flip — the value proposition sells up-front -- */
/* ==================================================================== */
.services-grid{ align-items:stretch !important; }
.services-grid .flip-card{
  height:auto !important; perspective:none !important;
  background:var(--bg-secondary) !important;
  border:1px solid var(--border) !important; border-top:0 !important;
  border-radius:16px !important; overflow:hidden !important;
  box-shadow:0 18px 46px rgba(0,0,0,.28) !important;
  display:flex !important; flex-direction:column !important;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}
.services-grid .flip-card::before{
  content:"" !important; display:block !important; height:3px !important; flex:0 0 auto !important;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent)) !important;
}
.services-grid .flip-card:hover{
  transform:translateY(-6px) !important; border-color:var(--accent) !important;
  box-shadow:0 32px 74px rgba(0,0,0,.42) !important;
}
/* un-flip: show front AND back stacked, always visible */
.services-grid .flip-card-inner{
  transform:none !important; transform-style:flat !important;
  position:static !important; height:auto !important; width:auto !important; transition:none !important;
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
}
.services-grid .card-front, .services-grid .card-back{
  position:static !important; transform:none !important;
  -webkit-backface-visibility:visible !important; backface-visibility:visible !important;
  opacity:1 !important; height:auto !important; width:auto !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.services-grid .card-front{ padding:22px 24px 6px !important; }
.services-grid .card-back{ padding:6px 24px 22px !important; flex:1 1 auto !important; }
.services-grid .card-front .card-header{ border:0 !important; padding:0 !important; text-align:left !important; }
.services-grid .card-front h3{
  font-family:'Sora',sans-serif !important; font-size:1.1rem !important; font-weight:700 !important;
  text-align:left !important; display:flex !important; align-items:center !important; gap:13px !important;
  margin:0 0 4px !important; line-height:1.3 !important;
}
.services-grid .card-front h3 i{
  color:var(--accent) !important; font-size:1.05rem !important;
  background:color-mix(in srgb,var(--accent) 15%,transparent) !important;
  width:46px !important; height:46px !important; border-radius:12px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important;
}
.services-grid .card-front .card-body{
  text-align:left !important; padding:10px 0 0 !important; color:var(--text-secondary) !important;
  font-size:.94rem !important; line-height:1.55 !important;
}
.services-grid .card-back .card-body{ padding:0 !important; }
.services-grid .card-back ul{
  list-style:none !important; margin:0 !important; padding:16px 0 0 !important;
  border-top:1px solid var(--border) !important; display:flex !important; flex-direction:column !important; gap:10px !important;
}
.services-grid .card-back li{
  position:relative !important; padding-left:26px !important; text-align:left !important;
  color:var(--text-secondary) !important; font-size:.9rem !important; line-height:1.45 !important;
}
.services-grid .card-back li::before{
  content:"\2713" !important; position:absolute !important; left:2px !important; top:1px !important;
  color:var(--accent) !important; font-weight:900 !important;
}
@supports not (color: color-mix(in srgb, red, blue)){
  .services-grid .card-front h3 i{ background:rgba(31,111,235,.15) !important; }
}

/* ---- v8 fix: hero headline must WRAP inside its column (was nowrap →
        it overflowed under the right panel while typing) --------------- */
.hero-inner #hero-title{ white-space:normal !important; overflow-wrap:break-word !important; word-break:normal !important; }
.hero-inner .hero-text{ max-width:640px !important; }
.hero-inner #hero-title, .hero-inner #hero-sub{ max-width:100% !important; }

/* ==================================================================== */
/* ===== REDESIGN v9 — full-bleed bands + image cards + puzzle reveal == */
/* ==================================================================== */

/* ---- Un-box: sections span the full viewport; content re-centred ---- */
.section{ max-width:none !important; width:100% !important; box-sizing:border-box !important; }
.section > *{ max-width:var(--r-maxw,1180px) !important; margin-left:auto !important; margin-right:auto !important; }
/* alternating full-width background bands so sections read as distinct */
#about{ background:var(--bg-secondary) !important; }
.feature-rows{ background:var(--bg) !important; }
#services{ background:var(--bg-secondary) !important; }
#pricing{ background:var(--bg) !important; }
#features{ background:var(--bg-secondary) !important; }
#news-feed{ background:var(--bg) !important; }
#contact{ background:var(--bg-secondary) !important; }

/* ---- Service cards get a themed photo banner (image, per request) --- */
.services-grid .flip-card::before{
  content:"" !important; display:block !important; height:150px !important; flex:0 0 auto !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  border-bottom:3px solid var(--accent) !important;
}
.services-grid .flip-card:nth-child(1)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/infrastructure.jpg') !important; }
.services-grid .flip-card:nth-child(2)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/security.jpg') !important; }
.services-grid .flip-card:nth-child(3)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/ai.jpg') !important; }
.services-grid .flip-card:nth-child(4)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/infrastructure.jpg') !important; }
.services-grid .flip-card:nth-child(5)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/about.jpg') !important; }
.services-grid .flip-card:nth-child(6)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/cloud.jpg') !important; }
.services-grid .flip-card:nth-child(7)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/ai.jpg') !important; }
.services-grid .flip-card:nth-child(8)::before{ background-image:linear-gradient(180deg,rgba(13,17,23,.10),rgba(13,17,23,.55)),url('/assets/img/about.jpg') !important; }
/* photo zooms slightly on hover for life */
.services-grid .flip-card::before{ transition:transform .5s ease !important; transform-origin:center !important; }
.services-grid .flip-card:hover::before{ transform:scale(1.05) !important; }

/* ---- "Puzzle" assembly: odd cards enter from the left, even from the
        right — they interlock into place (stagger delays already set) -- */
.services-grid > .reveal{ transform:translateY(42px) scale(.96) !important; }
.services-grid > .reveal:nth-child(odd){ transform:translate(-34px,26px) scale(.96) !important; }
.services-grid > .reveal:nth-child(even){ transform:translate(34px,26px) scale(.96) !important; }
.services-grid > .reveal.in{ transform:none !important; }
@media (prefers-reduced-motion:reduce){ .services-grid > .reveal{ transform:none !important; } }




/* (Removed the dead v8.1 "force white nav" block — it was already superseded
   by the v8.2 theme-following correction immediately below.) */

/* ---- v8.2: CORRECTION — top (transparent) header follows the THEME
   text colour, so it's readable on BOTH dark heroes (light nav) and
   light heroes (dark nav). v8.1 forced white which broke light themes. */
header:not(.scrolled) #mainNav a{ color:var(--text) !important; }
header:not(.scrolled) #mainNav a:hover{ color:var(--accent) !important; }
header:not(.scrolled) #themeSidebarToggle{
  color:var(--text) !important;
  border-color:color-mix(in srgb,var(--text) 32%,transparent) !important;
}
header:not(.scrolled) #themeSidebarToggle:hover{ color:var(--accent) !important; border-color:var(--accent) !important; }
header:not(.scrolled) .menu-toggle .bar{ background:var(--text) !important; }
@supports not (color: color-mix(in srgb, red, blue)){
  header:not(.scrolled) #themeSidebarToggle{ border-color:rgba(128,128,128,.4) !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v10 — ONE authoritative header (all 47 themes) ======= */
/* ==================================================================== */
/* TOP of page: fully transparent (no bg/border/shadow). The hero behind it is
   ALWAYS dark on every theme (dark image slides + a dark rgba(8,11,16,.9) scrim),
   so the desktop nav text + hamburger bars are WHITE regardless of theme — on
   Executive Light, --text is dark and would vanish on the dark hero.
   (The mobile OPEN drawer is a solid --bg surface and is handled separately in
   the max-width:950 block, where the links use --text.) */
:root[data-theme] header:not(.scrolled){
  background:transparent !important;
  border-bottom:1px solid transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
/* Default = WHITE nav (the hero is dark by default, and this is the safe state
   before the JS luminance inverter runs / if JS is off). */
:root[data-theme] header:not(.scrolled) #mainNav a,
:root[data-theme] header:not(.scrolled) #themeSidebarToggle{ color:#ffffff !important; }
:root[data-theme] header:not(.scrolled) #themeSidebarToggle{ border-color:rgba(255,255,255,.34) !important; }
:root[data-theme] header:not(.scrolled) .menu-toggle .bar{ background:#ffffff !important; }
/* Luminance inverter (assets/js): it samples the hero region behind the bar and
   adds header.nav-dark when that region is LIGHT → flip the nav to dark for
   contrast. (Mobile OPEN drawer keeps --text via the max-width:950 block, so the
   #mainNav-a flip is desktop-only; the hamburger bars flip at all widths.) */
:root[data-theme] header:not(.scrolled).nav-dark .menu-toggle .bar{ background:#111827 !important; }
@media(min-width:951px){
  :root[data-theme] header:not(.scrolled).nav-dark #mainNav a,
  :root[data-theme] header:not(.scrolled).nav-dark #themeSidebarToggle{ color:#111827 !important; }
  :root[data-theme] header:not(.scrolled).nav-dark #themeSidebarToggle{ border-color:rgba(15,23,42,.30) !important; }
}

/* SCROLLED: solid bar that FOLLOWS THE THEME (was forced white) */
:root[data-theme] header.scrolled{
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 6px 26px rgba(0,0,0,.14) !important;
  backdrop-filter:saturate(140%) blur(8px) !important;
}
:root[data-theme] header.scrolled #mainNav a,
:root[data-theme] header.scrolled #themeSidebarToggle{ color:var(--text) !important; }
:root[data-theme] header.scrolled #mainNav a:hover,
:root[data-theme] header.scrolled #themeSidebarToggle:hover{ color:var(--accent) !important; }
:root[data-theme] header.scrolled .menu-toggle .bar{ background:var(--text) !important; }

/* ==================================================================== */
/* ===== REDESIGN v11 — varied scroll effects + hover interactions ===== */
/* ==================================================================== */
/* Reveals now toggle both directions (JS), so these transforms play IN
   on enter and OUT on leave. Different sections get different motion. */

/* --- SPLIT sections: image SLIDES in from its side, text from the other,
       and they slide back OUT when scrolling away ("in and out") ------- */
.split-media.reveal{ opacity:0; transform:translateX(-7%) scale(.96) !important; }
.split-text.reveal{ opacity:0; transform:translateX(7%) !important; }
.split.reverse .split-media.reveal{ transform:translateX(7%) scale(.96) !important; }
.split.reverse .split-text.reveal{ transform:translateX(-7%) !important; }
.split-media.reveal.in, .split-text.reveal.in{ opacity:1; transform:none !important; }

/* --- FEATURE ROWS lift up as a unit --- */
.feat-row.reveal{ opacity:0; transform:translateY(48px) !important; }
.feat-row.reveal.in{ opacity:1; transform:none !important; }

/* --- PRICING rows scale up into place --- */
.pricing-row > .reveal{ opacity:0; transform:translateY(30px) scale(.94) !important; }
.pricing-row > .reveal.in{ opacity:1; transform:none !important; }

/* --- HOVER: images zoom softly inside their frame ------------------- */
.split-media{ overflow:hidden !important; border-radius:16px !important; }
.split-media img{ transition:transform .6s cubic-bezier(.2,.7,.2,1) !important; }
.split-media:hover img{ transform:scale(1.05) !important; }

/* HOVER: whole service card image banner already zooms; add a gentle
   accent glow to the card on hover for a tactile feel */
.services-grid .flip-card{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; }
.services-grid .flip-card:hover{ box-shadow:0 34px 80px rgba(0,0,0,.5), 0 0 0 1px var(--accent) !important; }

/* Respect reduced motion for every variant above */
@media (prefers-reduced-motion:reduce){
  .split-media.reveal, .split-text.reveal, .feat-row.reveal, .pricing-row > .reveal{ opacity:1 !important; transform:none !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v12 — header OVERLAYS the hero (image goes behind) === */
/* ==================================================================== */
/* Header was position:sticky, so it reserved flow space at the top and
   the hero image began BELOW it. Make it fixed so it floats over the
   hero and the background image fills from y=0 behind the transparent
   bar. The hero's top padding already keeps content clear of the bar. */
:root[data-theme] header{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; width:100% !important;
  z-index:1000 !important;
}
/* hero starts at the very top, image behind the header */
#home.hero{ margin-top:0 !important; }

/* ==================================================================== */
/* ===== REDESIGN v13 — hero background crossfade slideshow ============ */
/* ==================================================================== */
.hero{ background-image:none !important; background-color:var(--bg) !important; }
.hero-slides{ position:absolute !important; inset:0 !important; z-index:0 !important; overflow:hidden !important; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; animation:heroFade 21s infinite; }
.hero-slide:nth-child(1){ background-image:url('/assets/img/hero-bg.jpg'); animation-delay:0s; }
.hero-slide:nth-child(2){ background-image:url('/assets/img/hero-2.jpg'); animation-delay:7s; }
.hero-slide:nth-child(3){ background-image:url('/assets/img/hero-3.jpg'); animation-delay:14s; }
/* Auto-hero (DB-driven) video/poster/credit. Inline background-image on .hero-slide
   overrides the nth-child fallbacks above when auto-hero images are active. */
.hero-slide.hero-poster{ opacity:1 !important; animation:none !important; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
@media (max-width:768px){ .hero-video{ display:none !important; } }
.hero-credit{ position:absolute; right:14px; bottom:10px; z-index:3; font-size:.66rem; letter-spacing:.02em; color:rgba(255,255,255,.55); }
.hero-credit a{ color:inherit; text-decoration:underline; }
.hero-credit a:hover{ color:#fff; }
@keyframes heroFade{ 0%{opacity:0} 4%{opacity:1} 28%{opacity:1} 36%{opacity:0} 100%{opacity:0} }
/* readability scrim ABOVE the slide images, BELOW the content */
.hero-slides::after{ content:""; position:absolute; inset:0; z-index:5;
  background:linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb,var(--bg) 80%,transparent) 46%, color-mix(in srgb,var(--bg) 40%,transparent) 100%); }
@supports not (color: color-mix(in srgb, red, blue)){ .hero-slides::after{ background:linear-gradient(90deg, var(--bg), rgba(13,17,23,.45)); } }
.hero-inner{ z-index:6 !important; }
@media (prefers-reduced-motion:reduce){ .hero-slide{ animation:none !important; } .hero-slide:nth-child(1){ opacity:1 !important; } }

/* ==================================================================== */
/* ===== REDESIGN v14 — geisora-style service cards (tags + link) ===== */
/* ==================================================================== */
.services-grid .card-back ul{ display:none !important; }   /* (defensive) */
.svc-tags{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin:14px 0 0 !important; padding:14px 0 0 !important; border-top:1px solid var(--border) !important; }
.svc-tag{
  font-family:'Sora',sans-serif !important; font-size:.72rem !important; font-weight:600 !important; letter-spacing:.015em !important;
  padding:5px 11px !important; border-radius:999px !important; color:var(--text-secondary) !important; white-space:nowrap !important;
  background:color-mix(in srgb,var(--accent) 10%,transparent) !important;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent) !important;
}
.svc-more{
  display:inline-flex !important; align-items:center !important; gap:7px !important; margin-top:16px !important;
  font-family:'Sora',sans-serif !important; font-weight:700 !important; font-size:.85rem !important;
  color:var(--accent) !important; text-decoration:none !important;
}
.svc-more span{ transition:transform .25s ease !important; }
.services-grid .flip-card:hover .svc-more span{ transform:translateX(5px) !important; }
@supports not (color: color-mix(in srgb, red, blue)){
  .svc-tag{ background:rgba(31,111,235,.10) !important; border-color:rgba(31,111,235,.28) !important; }
}





/* ==================================================================== */
/* ===== REDESIGN v15 — mobile drawer, header fit, dark hero + nav ===== */
/* ==================================================================== */

/* (4) FIX: header no longer overflows → Themes button not cut on right */
:root[data-theme] header{ box-sizing:border-box !important; width:100% !important; padding-left:2rem !important; padding-right:2rem !important; }

/* (3) Hero is ALWAYS dark (dark scrim on every theme) so the header/menu
       inverts to WHITE over the dark image — identical on all 47 themes */
.hero-slides::after{ background:linear-gradient(90deg, rgba(8,11,16,.93) 0%, rgba(8,11,16,.66) 45%, rgba(8,11,16,.30) 100%) !important; }
/* keep the hero foreground light regardless of the active theme */
:root[data-theme] .hero #hero-title{ color:#ffffff !important; }
:root[data-theme] .hero #hero-sub{ color:rgba(255,255,255,.84) !important; }
:root[data-theme] .hero .hero-trust li{ color:rgba(255,255,255,.72) !important; }
:root[data-theme] .hero .hero-secondary{ color:#ffffff !important; border-color:rgba(255,255,255,.42) !important; }
/* (removed the forced-WHITE transparent-header nav block — the header now
   follows the theme via the consolidated block at the end of this file.) */

/* (2) FIX: MOBILE nav is a drawer — hidden until the hamburger toggles it.
       (The stray top-level #mainNav{display:flex} was forcing it open.) */
@media(max-width:950px){
  :root[data-theme] header{ padding-left:1.1rem !important; padding-right:1.1rem !important; }
  #mainNav{
    display:none !important; position:absolute !important; top:100% !important; left:0 !important; right:0 !important; width:100% !important;
    flex-direction:column !important; align-items:stretch !important; gap:0 !important;
    background:var(--bg) !important; padding:6px 10px 10px !important;
    border-top:1px solid var(--border) !important; box-shadow:0 22px 44px rgba(0,0,0,.5) !important;
  }
  #mainNav.active{ display:flex !important; }
  /* tight menu items — no inherited nav-a margin, minimal padding */
  #mainNav a{ width:auto !important; margin:0 !important; padding:.35rem .5rem !important; font-size:1rem !important; border-radius:8px !important; text-align:center !important; }
  #mainNav a::after{ display:none !important; }
  /* Themes button: its own row, centred in the nav container, in normal flow */
  #mainNav > div{ margin:6px 0 0 !important; padding:0 !important; display:flex !important; justify-content:center !important; width:100% !important; }
  #mainNav #themeSidebarToggle{ position:static !important; top:auto !important; right:auto !important; left:auto !important;
    width:auto !important; min-width:150px !important; margin:0 auto !important; justify-content:center !important;
    text-align:center !important; display:inline-flex !important; align-items:center !important; padding:.5rem 1.4rem !important; }
  /* The open drawer is a solid --bg surface, so its text MUST be --text at
     every header state (transparent/scrolled) — overrides the "transparent
     header → white text" rules that otherwise leave white-on-light. */
  :root[data-theme] header #mainNav{ background:var(--bg) !important; }
  :root[data-theme] header #mainNav a,
  :root[data-theme] header:not(.scrolled) #mainNav a,
  :root[data-theme] header.scrolled #mainNav a{ color:var(--text) !important; }
  :root[data-theme] header #mainNav #themeSidebarToggle,
  :root[data-theme] header:not(.scrolled) #mainNav #themeSidebarToggle,
  :root[data-theme] header.scrolled #mainNav #themeSidebarToggle{
    color:var(--text) !important; border-color:color-mix(in srgb,var(--text) 30%,transparent) !important; }
}

/* ---- CTA band (call-to-action) ---- */
.cta-band{ background:linear-gradient(120deg, var(--accent), color-mix(in srgb,var(--accent) 55%, #0b0f17)) !important; text-align:center !important; }
@supports not (color: color-mix(in srgb, red, blue)){ .cta-band{ background:linear-gradient(120deg,#1f6feb,#123a78) !important; } }
.cta-band > *{ max-width:820px !important; }
.cta-band .sec-eyebrow{ color:rgba(255,255,255,.9) !important; justify-content:center !important; }
.cta-band .sec-eyebrow::before, .cta-band .sec-eyebrow::after{ background:rgba(255,255,255,.6) !important; }
.cta-band h2{ color:#ffffff !important; font-family:'Sora',sans-serif !important; font-size:clamp(1.7rem,3.4vw,2.6rem) !important; margin:0 0 12px !important; }
.cta-band p{ color:rgba(255,255,255,.9) !important; font-size:1.05rem !important; margin:0 auto 26px !important; }
.cta-actions{ display:flex !important; flex-wrap:wrap !important; gap:14px !important; justify-content:center !important; }
.cta-band .btn{ background:#ffffff !important; color:var(--accent) !important; border:none !important; }
.cta-band .btn.btn-secondary{ background:transparent !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.6) !important; }

/* ==================================================================== */
/* ===== REDESIGN v16 — header aligns to page column + de-box sections = */
/* ==================================================================== */

/* (A) Header BAR stays full-width, but the logo + nav now align to the
       same content column (~1180px) as every section — they were hugging
       the screen edge while the content sat centered. */
@media(min-width:951px){
  :root[data-theme] header{
    padding-left:max(2rem, calc((100% - var(--r-maxw,1180px)) / 2)) !important;
    padding-right:max(2rem, calc((100% - var(--r-maxw,1180px)) / 2)) !important;
  }
}

/* (B) De-box the leftover section-wrapper cards. About has no wrapper and
       fills the band cleanly; Contact, Insights (news) and the pricing /
       feature table were each wrapped in a .card panel that floated oddly.
       Strip the box so they fill the band like About. */
#contact > .card, #news-feed > .card, #features > .card, #pricing > .card{
  background:transparent !important; border:none !important; box-shadow:none !important;
}

/* ==================================================================== */
/* ===== REDESIGN v17 — new AEU IT logo image (A-mark) ================= */
/* ==================================================================== */
.logo-link{ display:inline-flex !important; align-items:center !important; text-decoration:none !important; }
.site-logo{ height:48px !important; width:auto !important; display:block !important; }
header.scrolled .site-logo{ height:40px !important; }
@media(max-width:950px){ .site-logo{ height:42px !important; } }

/* ==================================================================== */
/* ===== REDESIGN v18 — visible hero slideshow, particles removed ====== */
/* ==================================================================== */
/* Lighter scrim so the crossfading images actually read (left stays dark
   enough for the headline; right reveals the photo behind the panel) */
.hero-slides::after{ background:linear-gradient(90deg, rgba(8,11,16,.84) 0%, rgba(8,11,16,.46) 46%, rgba(8,11,16,.16) 100%) !important; }
/* gentle Ken-Burns zoom so there is continuous motion between crossfades */
.hero-slide{ transform-origin:center !important; will-change:opacity, transform !important; }
@keyframes heroFade{
  0%{ opacity:0; transform:scale(1.09) }
  4%{ opacity:1 }
  30%{ opacity:1 }
  38%{ opacity:0 }
  100%{ opacity:0; transform:scale(1.0) }
}
/* particle canvas fully gone — hide any stray reference */
#particles-bg{ display:none !important; }

/* ==================================================================== */
/* ===== REDESIGN v19 — modern plan-tabs feature presentation ========= */
/* ==================================================================== */
#features .sec-eyebrow{ justify-content:center !important; }
#features .features-h2{ text-align:center !important; font-family:'Sora',sans-serif !important; }
#features .section-subtitle{ text-align:center !important; max-width:620px !important; margin:8px auto 0 !important; color:var(--text-secondary) !important; }

/* Tabs */
.plan-tabs{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px auto 0 !important; }
.plan-tab{ display:inline-flex; align-items:center; gap:9px; padding:.7rem 1.25rem; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-secondary);
  font-family:'Sora',sans-serif; font-weight:700; font-size:.92rem; cursor:pointer; position:relative; transition:all .2s ease; }
.plan-tab i{ color:var(--accent); }
.plan-tab:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-1px); }
.plan-tab.active{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 40%,transparent); }
.plan-tab.active i{ color:#fff; }
.pop-dot{ width:8px; height:8px; border-radius:50%; background:#f5a623; box-shadow:0 0 0 3px color-mix(in srgb,#f5a623 32%,transparent); }

/* Panels */
.plan-panels{ margin:28px auto 0 !important; }
.plan-panel{ display:none; }
.plan-panel.active{ display:block; animation:planFade .42s ease; }
@keyframes planFade{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.plan-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin-bottom:30px;
  padding:26px; border-radius:18px; background:var(--bg-secondary); border:1px solid var(--border); }
.plan-name{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.5rem; display:inline-flex; align-items:center; gap:12px; color:var(--text); }
.plan-name i{ color:var(--accent); }
.plan-pop{ font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#402a00; background:#f5a623; padding:4px 10px; border-radius:999px; }
.plan-tag{ color:var(--text-secondary); margin:0; }
.plan-cta{ margin-top:6px; }

/* Feature checklists (masonry columns of category groups) */
.fgroups{ column-count:2; column-gap:36px; }
@media(max-width:760px){ .fgroups{ column-count:1; } }
.fgroup{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 26px; }
.fgroup h3{ font-family:'Sora',sans-serif; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.fchecklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.fchecklist li{ display:flex; align-items:flex-start; gap:10px; color:var(--text-secondary); font-size:.93rem; line-height:1.4; }
.fchecklist li > span{ flex:1; }
.fchecklist li i{ margin-top:3px; font-size:.82rem; flex:0 0 auto; }
.fchecklist li.inc i{ color:#16a34a; }
.fchecklist li.add i{ color:#f5a623; }
.fval{ font-family:'Sora',sans-serif; font-size:.71rem; font-weight:700; color:var(--text); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); padding:2px 9px; border-radius:999px; white-space:nowrap; flex:0 0 auto; }
.ftag{ font-style:normal; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#f5a623;
  border:1px solid color-mix(in srgb,#f5a623 42%,transparent); border-radius:999px; padding:1px 7px; white-space:nowrap; flex:0 0 auto; }

/* On-demand add-ons band */
.addons-band{ margin:42px auto 0 !important; padding:28px; border-radius:18px; background:var(--bg-secondary); border:1px solid var(--border); }
.addons-band h3{ font-family:'Sora',sans-serif; font-size:1.05rem; margin:0; color:var(--text); }
.addons-band h3 span{ font-weight:500; color:var(--text-secondary); font-size:.88rem; }
.addons-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:18px; }
.addon-item{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:12px; background:var(--bg); border:1px solid var(--border); }
.addon-name{ font-weight:700; font-size:.9rem; color:var(--text); }
.addon-desc{ font-size:.82rem; color:var(--text-secondary); }

@supports not (color: color-mix(in srgb, red, blue)){
  .plan-tab.active{ box-shadow:0 10px 26px rgba(31,111,235,.4); }
  .pop-dot{ box-shadow:0 0 0 3px rgba(245,166,35,.32); }
  .fval{ background:rgba(31,111,235,.12); border-color:rgba(31,111,235,.26); }
  .ftag{ border-color:rgba(245,166,35,.42); }
}

/* ==================================================================== */
/* ===== REDESIGN v20 — subtle CSS backgrounds (dot grid, lines, glow) = */
/* ==================================================================== */
/* No image files needed: layered gradients give texture + depth and stay
   crisp on every theme. Kept whisper-subtle so content always leads. */

/* Services: dot grid + a soft accent glow top-right */
#services{
  background-color:var(--bg-secondary) !important;
  background-image:
    radial-gradient(620px 320px at 88% 0%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 70%),
    radial-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px, transparent 1.5px) !important;
  background-size: auto, 24px 24px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center top, center !important;
}
/* Features: accent glow top-center + dot grid */
#features{
  background-color:var(--bg-secondary) !important;
  background-image:
    radial-gradient(760px 360px at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 68%),
    radial-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px, transparent 1.5px) !important;
  background-size: auto, 24px 24px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center top, center !important;
}
/* Contact: fine line grid */
#contact{
  background-color:var(--bg-secondary) !important;
  background-image:
    linear-gradient(color-mix(in srgb,var(--text) 4%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--text) 4%,transparent) 1px, transparent 1px) !important;
  background-size: 46px 46px, 46px 46px !important;
}
/* Feature-rows band: faint dot grid */
.feature-rows{
  background-image: radial-gradient(color-mix(in srgb,var(--text) 4%,transparent) 1px, transparent 1.5px) !important;
  background-size: 26px 26px !important;
}
/* CTA band: diagonal line texture over the accent gradient */
.cta-band{ position:relative !important; overflow:hidden !important; }
.cta-band::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px) !important; }
.cta-band .cta-inner{ position:relative !important; z-index:1 !important; }

/* graceful fallback where color-mix is unsupported */
@supports not (color: color-mix(in srgb, red, blue)){
  #services, #features{ background-image: radial-gradient(700px 340px at 50% 0%, rgba(31,111,235,.15), transparent 70%), radial-gradient(rgba(128,128,128,.06) 1px, transparent 1.5px) !important; }
  #contact{ background-image: linear-gradient(rgba(128,128,128,.05) 1px,transparent 1px), linear-gradient(90deg, rgba(128,128,128,.05) 1px,transparent 1px) !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v21 — mobile layout fixes =========================== */
/* ==================================================================== */

/* (4) Hero "Security Posture" panel overflowed the screen: it had width:100%
       + 22px padding but no border-box. Fix the box model + let rows wrap. */
.hero-panel, .hero-visual{ box-sizing:border-box !important; max-width:100% !important; }
.hp-row{ gap:12px !important; }
.hp-k{ min-width:0 !important; }
.hp-v{ text-align:right !important; }
@media(max-width:600px){
  .hero-panel{ padding:18px !important; }
  .hp-k, .hp-v, .hp-status, .hp-foot{ font-size:.82rem !important; }
  .hp-foot{ align-items:flex-start !important; }
}

/* (1) Split image/text sections STACK on mobile (image on top), so About AND
       every feature row ("Microsoft 365, set up right") center properly. */
@media(max-width:760px){
  .split{ grid-template-columns:1fr !important; gap:26px !important; }
  .split.reverse .split-media{ order:0 !important; }
  .split-media img{ min-height:200px !important; max-height:280px !important; }
}

/* (3) Pricing cards: centered, and a lone card no longer stretches full width */
.pricing-row{ justify-content:center !important; }
@media(max-width:760px){
  .pricing-row{ flex-direction:column !important; align-items:center !important; }
  .pricing-row .card{ flex:0 1 auto !important; width:100% !important; max-width:420px !important; margin:0 auto !important; }
}

/* (2) Services cards: trimmer horizontal padding (was 24px each side) */
.services-grid .card-front{ padding:20px 20px 6px !important; }
.services-grid .card-back{ padding:6px 20px 20px !important; }
@media(max-width:760px){
  .section{ padding-left:16px !important; padding-right:16px !important; }
  .services-grid .card-front{ padding:18px 16px 6px !important; }
  .services-grid .card-back{ padding:6px 16px 18px !important; }
}

/* AOS: suppress transitions while data-aos attributes are being applied (no load flash) */
html.aos-notrans [data-aos]{ transition:none !important; }

/* ==================================================================== */
/* ===== REDESIGN v22 — blue CTA box overlapping the footer =========== */
/* ==================================================================== */
/* (law-consulting-style seam overlap: a raised blue box straddles the
   body/footer boundary. Adjacent-sibling rule means only a footer that
   directly follows this box is pulled up — other pages stay untouched.) */
.footer-overlap-cta{ position:relative; z-index:2; max-width:1180px; margin:0 auto -72px; padding:0 24px; }
.foc-inner{
  background:linear-gradient(120deg, var(--accent), color-mix(in srgb,var(--accent) 55%, #0b0f17));
  border-radius:22px; padding:44px 48px; display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap; box-shadow:0 40px 90px rgba(0,0,0,.55);
}
@supports not (color: color-mix(in srgb,red,blue)){ .foc-inner{ background:linear-gradient(120deg,#1f6feb,#123a78); } }
.foc-text h2{ color:#fff !important; font-family:'Sora',sans-serif !important; font-size:clamp(1.4rem,2.8vw,2.05rem) !important; margin:0 0 8px !important; line-height:1.2 !important; }
.foc-text p{ color:rgba(255,255,255,.9) !important; margin:0 !important; }
.foc-btn{ background:#fff !important; color:var(--accent) !important; border:none !important; white-space:nowrap !important; }
.foc-btn:hover{ transform:translateY(-2px) !important; }
/* footer slides up under the box (only when the box precedes it) */
.footer-overlap-cta + .footer{ padding-top:118px !important; margin-top:0 !important; }
@media(max-width:700px){
  .footer-overlap-cta{ margin:0 auto -50px; padding:0 16px; }
  .foc-inner{ padding:30px 26px; flex-direction:column; align-items:flex-start; text-align:left; }
  .footer-overlap-cta + .footer{ padding-top:92px !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v23 — contact: form left + info panel right ========= */
/* ==================================================================== */
#contact .sec-eyebrow{ justify-content:center !important; }
#contact .contact-h2{ text-align:center !important; font-family:'Sora',sans-serif !important; }
#contact .section-subtitle{ text-align:center !important; max-width:620px !important; margin:8px auto 0 !important; }

.contact-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:34px; margin:34px auto 0 !important; align-items:stretch; }
@media(max-width:860px){ .contact-layout{ grid-template-columns:1fr; gap:24px; } }

/* form panel */
.contact-form{ background:var(--bg-secondary) !important; border:1px solid var(--border) !important; border-radius:18px !important; padding:30px !important; box-shadow:0 22px 54px rgba(0,0,0,.28) !important; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px){ .cf-row{ grid-template-columns:1fr; } }
.contact-form .form-group{ display:flex !important; flex-direction:column !important; gap:7px !important; margin-bottom:16px !important; }
.contact-form label{ font-family:'Sora',sans-serif !important; font-size:.8rem !important; font-weight:700 !important; color:var(--text) !important; }
/* inputs: distinct (darker) bg vs the form panel, real borders + focus glow */
.contact-form input, .contact-form select, .contact-form textarea{
  background:var(--bg) !important; border:1px solid var(--border) !important; border-radius:10px !important;
  padding:12px 14px !important; color:var(--text) !important; font-size:.95rem !important; font-family:inherit !important;
  width:100% !important; box-sizing:border-box !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--text-secondary) !important; opacity:.75; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none !important; border-color:var(--accent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent) !important;
}
.contact-form textarea{ resize:vertical !important; min-height:120px !important; }
.contact-form .form-submit{ width:100% !important; margin-top:6px !important; }

/* info panel (accent gradient so it reads as "contact us") */
.contact-info{ background:linear-gradient(160deg, var(--accent), color-mix(in srgb,var(--accent) 48%,#0b0f17)) !important; border-radius:18px !important; padding:32px !important; box-shadow:0 26px 60px rgba(0,0,0,.35) !important; }
@supports not (color: color-mix(in srgb,red,blue)){ .contact-info{ background:linear-gradient(160deg,#1f6feb,#123a78) !important; } .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ box-shadow:0 0 0 3px rgba(31,111,235,.22) !important; } }
.contact-info h3{ font-family:'Sora',sans-serif !important; font-size:1.4rem !important; margin:0 0 10px !important; color:#fff !important; }
.contact-info > p{ color:rgba(255,255,255,.9) !important; margin:0 0 24px !important; font-size:.95rem !important; }
.ci-list{ list-style:none !important; margin:0 0 24px !important; padding:0 !important; display:flex; flex-direction:column; gap:18px; }
.ci-list li{ display:flex; gap:14px; align-items:flex-start; }
.ci-list li i{ width:40px; height:40px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:rgba(255,255,255,.16); color:#fff; }
.ci-list li div{ display:flex; flex-direction:column; gap:2px; }
.ci-list li span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.72); font-weight:700; }
.ci-list li a{ color:#fff !important; text-decoration:none; font-weight:600; }
.ci-list li a:hover{ text-decoration:underline; }
.ci-list li div{ color:#fff; font-size:.95rem; }
.ci-badges{ display:flex; flex-wrap:wrap; gap:10px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); }
.ci-badges span{ font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:7px; color:#fff; background:rgba(255,255,255,.13); border-radius:999px; padding:6px 12px; }

/* ==================================================================== */
/* ===== REDESIGN v24 — Insights = blog cards (thumb + meta + title) == */
/* ==================================================================== */
#news-feed .card-header{ text-align:center !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; border:0 !important; }
#news-feed .news-h2{ font-family:'Sora',sans-serif !important; font-size:clamp(1.7rem,3vw,2.3rem) !important; font-weight:800 !important; margin:0 !important; }
#news-list, #news-list.news-scroll-container{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important; gap:26px !important; overflow:visible !important; padding:8px 0 0 !important; }
.news-card{ display:flex !important; flex-direction:column !important; background:var(--bg-secondary) !important; border:1px solid var(--border) !important; border-radius:16px !important; overflow:hidden !important; box-shadow:0 16px 40px rgba(0,0,0,.22) !important; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; }
.news-card:hover{ transform:translateY(-6px) !important; border-color:var(--accent) !important; box-shadow:0 28px 64px rgba(0,0,0,.4) !important; }
.news-thumb{ display:block !important; height:180px !important; background-size:cover !important; background-position:center !important; position:relative !important; transition:transform .5s ease !important; }
.news-thumb::after{ content:"" !important; position:absolute !important; inset:0 !important; background:linear-gradient(180deg,rgba(13,17,23,0) 45%,rgba(13,17,23,.45)) !important; }
.news-card:hover .news-thumb{ transform:scale(1.05) !important; }
.news-card-body{ padding:20px 22px 22px !important; display:flex !important; flex-direction:column !important; gap:10px !important; flex:1 1 auto !important; }
.news-meta{ display:flex !important; gap:14px !important; align-items:center !important; }
.news-date{ font-size:.78rem !important; color:var(--text-secondary) !important; display:inline-flex !important; align-items:center !important; gap:6px !important; }
.news-date i{ color:var(--accent) !important; }
.news-card-title{ font-family:'Sora',sans-serif !important; font-size:1.08rem !important; font-weight:700 !important; line-height:1.35 !important; margin:0 !important; }
.news-card-title a{ color:var(--text) !important; text-decoration:none !important; }
.news-card-title a:hover{ color:var(--accent) !important; }
.news-card-summary{ color:var(--text-secondary) !important; font-size:.9rem !important; line-height:1.5 !important; margin:0 !important; flex:1 1 auto !important;
  display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
.news-card .read-more-link{ color:var(--accent) !important; font-weight:700 !important; font-family:'Sora',sans-serif !important; font-size:.85rem !important; text-decoration:none !important; margin-top:2px !important; display:inline-flex !important; align-items:center !important; gap:6px !important; }
.news-card .read-more-link:hover{ gap:10px !important; }

/* ==================================================================== */
/* ===== REDESIGN v25 — "What's included" contrast (panels vs band) ==== */
/* ==================================================================== */
/* The checklists sat directly on the section band (same colour). Put the
   plan head + the feature groups on distinct raised panels for depth. */
.plan-head{ background:var(--bg) !important; box-shadow:0 16px 40px rgba(0,0,0,.24) !important; }
.plan-panel .fgroups{
  background:var(--bg) !important; border:1px solid var(--border) !important; border-radius:18px !important;
  padding:30px 34px !important; box-shadow:0 18px 46px rgba(0,0,0,.22) !important;
}
@media(max-width:760px){ .plan-panel .fgroups{ padding:22px 20px !important; } }
/* rows get a hairline divider so the list reads as structured, not flat */
.fchecklist li{ padding-bottom:11px !important; border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent) !important; }
.fchecklist li:last-child{ border-bottom:0 !important; padding-bottom:0 !important; }
.fgroup h3{ color:var(--text) !important; }
.fgroup h3::before{ content:"" !important; display:inline-block !important; width:16px !important; height:2px !important; background:var(--accent) !important; vertical-align:middle !important; margin-right:9px !important; }
@supports not (color: color-mix(in srgb,red,blue)){ .fchecklist li{ border-bottom:1px solid var(--border) !important; } }

/* ==================================================================== */
/* ===== REDESIGN v26 — Services = clean icon cards (Practice-Area) ==== */
/* ==================================================================== */
.services-grid .flip-card::before{ display:none !important; }   /* drop photo banner */
.services-grid .svc-tags{ display:none !important; }            /* drop tag chips */
.services-grid .flip-card{ text-align:center !important; }
.services-grid .card-front{ padding:36px 28px 8px !important; }
.services-grid .card-front .card-header{ text-align:center !important; }
.services-grid .card-front h3{ flex-direction:column !important; align-items:center !important; gap:18px !important; text-align:center !important; font-size:1.16rem !important; }
.services-grid .card-front h3 i{
  width:74px !important; height:74px !important; font-size:1.7rem !important; border-radius:50% !important;
  background:color-mix(in srgb,var(--accent) 14%,transparent) !important;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent) !important;
  color:var(--accent) !important; transition:background .25s ease, color .25s ease, border-color .25s ease !important;
}
.services-grid .card-front .card-body{ text-align:center !important; padding-top:12px !important; }
.services-grid .card-back{ padding:4px 28px 32px !important; text-align:center !important; }
.services-grid .card-back .svc-more{ justify-content:center !important; }
.services-grid .flip-card:hover .card-front h3 i{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
@supports not (color: color-mix(in srgb,red,blue)){
  .services-grid .card-front h3 i{ background:rgba(31,111,235,.14) !important; border-color:rgba(31,111,235,.3) !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v27 — news horizontal scroll + services BENTO tiles == */
/* ==================================================================== */

/* ---- Insights: horizontal in-line scrollable row (override the grid) ---- */
#news-list, #news-list.news-scroll-container{
  display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none !important;
  overflow-x:auto !important; overflow-y:hidden !important; gap:22px !important;
  padding:8px 4px 22px !important; scroll-snap-type:x mandatory !important; scrollbar-width:thin !important;
}
.news-card{ flex:0 0 clamp(280px,78vw,340px) !important; scroll-snap-align:start !important;
  background:var(--bg-secondary) !important; border:1px solid var(--border) !important; }
#news-list::-webkit-scrollbar{ height:8px; }
#news-list::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:8px; }
#news-list::-webkit-scrollbar-track{ background:color-mix(in srgb,var(--text) 8%,transparent); border-radius:8px; }

/* ---- Services: BENTO image tiles (photos back, most important biggest) ---- */
.services-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; grid-auto-rows:185px !important; gap:16px !important; grid-auto-flow:dense !important; align-items:stretch !important; }
.services-grid .flip-card{ position:relative !important; overflow:hidden !important; border-radius:16px !important; padding:0 !important; text-align:left !important;
  border:1px solid var(--border) !important; box-shadow:0 18px 44px rgba(0,0,0,.3) !important; background:var(--bg-secondary) !important;
  grid-column:span 1; grid-row:span 1; transition:box-shadow .3s ease, border-color .3s ease !important; }
/* image fills the whole tile (re-enable; was hidden in v26) */
.services-grid .flip-card::before{ display:block !important; content:"" !important; position:absolute !important; inset:0 !important;
  height:auto !important; width:auto !important; border:0 !important; z-index:0 !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; transition:transform .55s ease !important; }
.services-grid .flip-card:hover::before{ transform:scale(1.07) !important; }
/* legibility gradient */
.services-grid .flip-card::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
  background:linear-gradient(180deg, rgba(8,11,16,.10) 0%, rgba(8,11,16,.5) 52%, rgba(8,11,16,.92) 100%) !important; }
/* content overlaid at the bottom */
.services-grid .flip-card-inner{ position:absolute !important; inset:0 !important; z-index:2 !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; padding:20px 22px !important; height:auto !important; }
.services-grid .card-front, .services-grid .card-back{ padding:0 !important; background:transparent !important; }
.services-grid .card-front .card-header{ padding:0 !important; border:0 !important; }
.services-grid .card-front h3{ flex-direction:row !important; align-items:center !important; gap:11px !important; color:#fff !important; text-align:left !important; font-size:1.02rem !important; margin:0 0 6px !important; }
.services-grid .card-front h3 i{ width:auto !important; height:auto !important; background:none !important; border:0 !important; color:#fff !important; font-size:1.05rem !important; }
.services-grid .card-front .card-body{ display:none !important; }              /* small tiles: title only */
.services-grid .svc-tags{ display:none !important; }
.services-grid .svc-more{ color:#fff !important; margin-top:8px !important; justify-content:flex-start !important; font-size:.8rem !important; }
.services-grid .flip-card:hover{ border-color:var(--accent) !important; box-shadow:0 28px 66px rgba(0,0,0,.5) !important; }
/* BENTO varied sizes */
.services-grid .flip-card:nth-child(1){ grid-column:span 2 !important; grid-row:span 2 !important; }
.services-grid .flip-card:nth-child(4){ grid-row:span 2 !important; }
.services-grid .flip-card:nth-child(6){ grid-column:span 2 !important; }
.services-grid .flip-card:nth-child(7){ grid-row:span 2 !important; }
/* the big one shows its description */
.services-grid .flip-card:nth-child(1) h3{ font-size:1.55rem !important; }
.services-grid .flip-card:nth-child(1) .card-body{ display:-webkit-box !important; -webkit-line-clamp:4 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; color:rgba(255,255,255,.9) !important; text-align:left !important; font-size:.98rem !important; line-height:1.5 !important; margin-top:2px !important; }
.services-grid .flip-card:nth-child(1) .flip-card-inner{ padding:30px 32px !important; }
@media(max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:165px !important; }
  .services-grid .flip-card{ grid-column:span 1 !important; grid-row:span 1 !important; }
  .services-grid .flip-card:nth-child(1){ grid-column:span 2 !important; grid-row:span 1 !important; } }
@media(max-width:560px){ .services-grid{ grid-template-columns:1fr !important; grid-auto-rows:180px !important; }
  .services-grid .flip-card, .services-grid .flip-card:nth-child(1){ grid-column:span 1 !important; grid-row:span 1 !important; } }

/* ==================================================================== */
/* ===== REDESIGN v28 — single card hover + fix nav hover on white ===== */
/* ==================================================================== */
/* (1) kill the inner glow so tiles have ONE clean hover, not a double */
.services-grid .flip-card-inner{ box-shadow:none !important; border:0 !important; }
.services-grid .flip-card-inner:hover, .services-grid .flip-card-inner:focus-within{ box-shadow:none !important; border:0 !important; }

/* (2) nav hover: no background pill, text = accent — works on the white
   scrolled bar AND the transparent-over-hero state (no white-on-white) */
:root[data-theme] header #mainNav a:hover{ background:transparent !important; background-color:transparent !important; border-color:transparent !important; box-shadow:none !important; }
:root[data-theme] header.scrolled #mainNav a:hover{ color:var(--accent) !important; }
:root[data-theme] header:not(.scrolled) #mainNav a:hover{ color:var(--accent) !important; }

/* ==================================================================== */
/* ===== REDESIGN v29 — bento fills with NO gaps + read-more bottom-rt = */
/* ==================================================================== */
/* 8 tiles in a 4-col grid that tiles perfectly (12 cells = 3 full rows):
   #1 = 2x2 (cols1-2 rows1-2); #2-#5 fill cols3-4 rows1-2; #6 = 2-wide on
   row3; #7,#8 finish row3. No empty cells. */
.services-grid{ grid-auto-flow:row !important; grid-auto-rows:190px !important; }
.services-grid .flip-card:nth-child(1){ grid-column:span 2 !important; grid-row:span 2 !important; }
.services-grid .flip-card:nth-child(4){ grid-column:span 1 !important; grid-row:span 1 !important; }
.services-grid .flip-card:nth-child(6){ grid-column:span 2 !important; grid-row:span 1 !important; }
.services-grid .flip-card:nth-child(7){ grid-column:span 1 !important; grid-row:span 1 !important; }

/* "Learn more" -> bottom-right of each tile */
.services-grid .card-back{ display:flex !important; justify-content:flex-end !important; padding:0 !important; margin-top:8px !important; }
.services-grid .svc-more{ justify-content:flex-end !important; margin-top:0 !important; }

/* tablets/phones: uniform tiles that also fill cleanly */
@media(max-width:900px){
  .services-grid{ grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:170px !important; }
  .services-grid .flip-card:nth-child(n){ grid-column:span 1 !important; grid-row:span 1 !important; }
}
@media(max-width:560px){
  .services-grid{ grid-template-columns:1fr !important; grid-auto-rows:180px !important; }
  .services-grid .flip-card:nth-child(n){ grid-column:span 1 !important; grid-row:span 1 !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v30 — hero crossfade plays even with Reduce Motion === */
/* ==================================================================== */
/* A global *{animation:none} under prefers-reduced-motion was stopping the
   hero slideshow. Re-enable a FADE-ONLY crossfade (no movement) so it's
   still safe for motion-sensitive users but the images actually cycle. */
@media (prefers-reduced-motion:reduce){
  .hero-slide{ animation:heroFadeRM 21s infinite !important; transform:none !important; }
  .hero-slide:nth-child(1){ animation-delay:0s !important; }
  .hero-slide:nth-child(2){ animation-delay:7s !important; }
  .hero-slide:nth-child(3){ animation-delay:14s !important; }
}
@keyframes heroFadeRM{ 0%{opacity:0} 5%{opacity:1} 28%{opacity:1} 37%{opacity:0} 100%{opacity:0} }

/* ==================================================================== */
/* ===== REDESIGN v31 — Services: blue section + ripple background ===== */
/* ==================================================================== */
#services{ position:relative !important; overflow:hidden !important;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 82%,#0a1533), #0a1533) !important;
  background-image:linear-gradient(160deg, color-mix(in srgb,var(--accent) 82%,#0a1533), #0a1533) !important; }
@supports not (color: color-mix(in srgb,red,blue)){ #services{ background:linear-gradient(160deg,#1a4fb0,#0a1533) !important; background-image:linear-gradient(160deg,#1a4fb0,#0a1533) !important; } }
#services > *{ position:relative !important; z-index:1 !important; }
/* five white circles anchored bottom-left, layered by size + opacity */
#services .svc-ripples{ position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; overflow:hidden !important; }
#services .svc-ripples span{ position:absolute !important; left:0 !important; bottom:0 !important; border-radius:50% !important; background:#fff !important; transform-origin:bottom left !important; animation:svcRipple 15s ease-in-out infinite !important; }
#services .svc-ripples span:nth-child(1){ width:150px !important; height:150px !important; opacity:.22 !important; animation-delay:0s !important; }
#services .svc-ripples span:nth-child(2){ width:280px !important; height:280px !important; opacity:.15 !important; animation-delay:-3s !important; }
#services .svc-ripples span:nth-child(3){ width:430px !important; height:430px !important; opacity:.10 !important; animation-delay:-6s !important; }
#services .svc-ripples span:nth-child(4){ width:600px !important; height:600px !important; opacity:.06 !important; animation-delay:-9s !important; }
#services .svc-ripples span:nth-child(5){ width:800px !important; height:800px !important; opacity:.035 !important; animation-delay:-12s !important; }
@keyframes svcRipple{ 0%,100%{ transform:scale(.8); } 50%{ transform:scale(1.2); } }
/* white text on the blue section */
#services .sec-eyebrow{ color:#fff !important; }
#services .sec-eyebrow::before, #services .sec-eyebrow::after{ background:rgba(255,255,255,.6) !important; }
#services #servicesTitle, #services h2{ color:#fff !important; }
#services .section-subtitle{ color:rgba(255,255,255,.86) !important; }

/* v31b — keep the ripple animating even with Reduce Motion (matches hero) */
@media (prefers-reduced-motion:reduce){
  #services .svc-ripples span{ animation:svcRipple 15s ease-in-out infinite !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v32 — Insights carousel buttons (hide scrollbar) ==== */
/* ==================================================================== */
#news-list{ scrollbar-width:none !important; -ms-overflow-style:none !important; scroll-behavior:smooth !important; }
#news-list::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; }
.news-nav{ display:flex !important; justify-content:center !important; gap:14px !important; margin-top:24px !important; }
.news-arrow{ width:48px !important; height:48px !important; border-radius:50% !important; border:1px solid var(--border) !important; background:var(--bg-secondary) !important; color:var(--text) !important; cursor:pointer !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:1rem !important; box-shadow:0 8px 22px rgba(0,0,0,.2) !important; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important; }
.news-arrow:hover{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; transform:translateY(-2px) !important; }
.news-arrow:active{ transform:translateY(0) !important; }

/* ==================================================================== */
/* ===== REDESIGN v33 — sections fill viewport height + seamless news == */
/* ==================================================================== */
/* Main sections fill the page height (content vertically centred) */
/* (removed 100vh fill-height — it created huge gaps and broke the services grid) */
/* anchored section headings clear the fixed menu (no hiding under it) */
html{ scroll-padding-top:94px !important; }
section[id]{ scroll-margin-top:94px !important; }

/* News: SEAMLESS cards (no frame/box) + show exactly 3, then scroll */
.news-card{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important;
  flex:0 0 calc((100% - 44px)/3) !important; }
.news-thumb{ border-radius:14px !important; height:210px !important; overflow:hidden !important; }
.news-card:hover{ transform:none !important; border-color:transparent !important; box-shadow:none !important; }
.news-card:hover .news-thumb{ transform:scale(1.04) !important; }
.news-card-body{ padding:16px 2px 0 !important; background:transparent !important; }
@media(max-width:900px){ .news-card{ flex:0 0 calc((100% - 22px)/2) !important; } }   /* 2 on tablet */
@media(max-width:600px){ .news-card{ flex:0 0 86% !important; } }                       /* ~1 on phone */

/* ==================================================================== */
/* ===== REDESIGN v34 — bento read-more bottom-right + tighter anchor == */
/* ==================================================================== */
/* (1) "Learn more" pinned to the bottom-right corner of every tile */
.services-grid .flip-card-inner{ padding-bottom:52px !important; }
.services-grid .card-back{ position:static !important; display:block !important; margin:0 !important; }
.services-grid .svc-more{ position:absolute !important; right:22px !important; bottom:18px !important; margin:0 !important; z-index:3 !important; justify-content:flex-end !important; }
.services-grid .flip-card:nth-child(1) .flip-card-inner{ padding-bottom:56px !important; }

/* (2) anchor offset was doubling with the section's 80px top padding
   (94 + 80 = ~174px ≈ 3x the menu). Small offset; the padding already
   clears the menu. */
html{ scroll-padding-top:14px !important; }
section[id]{ scroll-margin-top:14px !important; }

/* ==================================================================== */
/* ===== REDESIGN v35 — btn fix + platform marquee + news slider ====== */
/* ==================================================================== */
/* (1) Talk-to-us button: was inline <a> (padding bled over the list) */
.split-text .btn, .why-aeu .btn{ display:inline-flex !important; align-items:center !important; gap:8px !important; width:auto !important; vertical-align:middle !important; }

/* (2) platform strip -> full-width seamless marquee */
.logo-marquee{ overflow:hidden !important; width:100% !important; position:relative !important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) !important;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) !important; }
.logo-track{ display:inline-flex !important; align-items:center !important; width:max-content !important; animation:logoScroll 48s linear infinite !important; }
.logo-track span{ white-space:nowrap !important; padding:0 34px !important; font-family:'Sora',sans-serif !important; font-weight:600 !important; font-size:1rem !important; color:var(--text-secondary) !important; position:relative !important; }
.logo-track span::after{ content:"" !important; position:absolute !important; right:0 !important; top:50% !important; transform:translateY(-50%) !important; width:5px !important; height:5px !important; border-radius:50% !important; background:var(--accent) !important; opacity:.55 !important; }
.logo-marquee:hover .logo-track{ animation-play-state:paused !important; }
@keyframes logoScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .logo-track{ animation:logoScroll 48s linear infinite !important; } }

/* (3) news = transform slider (no overflow scroll; buttons slide it) */
#news-top-container{ overflow:hidden !important; }
#news-list{ overflow:visible !important; transform:translateX(0); transition:transform .55s cubic-bezier(.2,.7,.2,1) !important; will-change:transform !important; scroll-snap-type:none !important; }
.news-arrow:disabled{ opacity:.35 !important; cursor:default !important; pointer-events:none !important; }

/* ==================================================================== */
/* ===== REDESIGN v36 — back-to-top + smoother pricing/tab transitions = */
/* ==================================================================== */
/* back-to-top button */
#toTop{ position:fixed !important; right:22px !important; bottom:22px !important; z-index:900 !important; width:48px !important; height:48px !important; border-radius:50% !important; border:none !important; background:var(--accent) !important; color:#fff !important; cursor:pointer !important; box-shadow:0 12px 30px rgba(0,0,0,.4) !important; opacity:0 !important; visibility:hidden !important; transform:translateY(12px) !important; transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease !important; font-size:1rem !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
#toTop.show{ opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; }
#toTop:hover{ transform:translateY(-3px) !important; filter:brightness(1.1) !important; }
@media(max-width:600px){ #toTop{ right:16px !important; bottom:16px !important; width:44px !important; height:44px !important; } }

/* pricing cards: smooth, single hover (no strange jump) */
.pricing-row > .card{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease !important; }
.pricing-row > .card:hover{ transform:translateY(-6px) !important; box-shadow:0 30px 66px rgba(0,0,0,.4) !important; border-color:var(--accent) !important; }
.pricing-row .card-body ul li{ transition:color .2s ease !important; }
.pricing-row .card-body ul li:hover{ color:var(--text) !important; }

/* plan-tabs ("What's included"): pure fade on switch — no translate jump */
.plan-panel.active{ animation:planFade .35s ease !important; }
@keyframes planFade{ from{opacity:0} to{opacity:1} }

/* ==================================================================== */
/* ===== REDESIGN v37 — footer (brand + correct links + clean bar) ==== */
/* ==================================================================== */
.footer{ display:block !important; background:var(--bg-secondary) !important; border-top:1px solid var(--border) !important; padding:72px 24px 0 !important; }
/* ^ display:block overrides the legacy bare `footer{display:flex}` (line ~2420) that
   made .footer-main-grid and .footer-bottom-bar sit side-by-side on wide screens. */
.footer-main-grid{ max-width:1180px !important; margin:0 auto !important; display:grid !important; grid-template-columns:1.7fr 1fr 1.5fr 1.5fr !important; gap:40px !important; }
@media(max-width:900px){ .footer-main-grid{ grid-template-columns:1fr 1fr !important; gap:32px 28px !important; } }
@media(max-width:560px){ .footer-main-grid{ grid-template-columns:1fr !important; } }
.footer-section{ display:flex !important; flex-direction:column !important; gap:12px !important; align-items:flex-start !important; }
.footer-section h3{ font-family:'Sora',sans-serif !important; font-size:.78rem !important; font-weight:800 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--text) !important; margin:0 0 6px !important; }
.footer-section a, .footer-section span{ color:var(--text-secondary) !important; text-decoration:none !important; font-size:.92rem !important; line-height:1.4 !important; transition:color .2s ease !important; display:inline-flex !important; align-items:center !important; gap:9px !important; }
.footer-section a:hover{ color:var(--accent) !important; }
.footer-section a i, .footer-section span i{ color:var(--accent) !important; width:16px !important; text-align:center !important; flex:0 0 auto !important; }
/* brand column */
.footer-logo img{ height:46px !important; width:auto !important; display:block !important; }
.footer-tagline{ color:var(--text-secondary) !important; font-size:.92rem !important; line-height:1.6 !important; margin:2px 0 8px !important; max-width:320px !important; }
.footer-social{ display:flex !important; gap:12px !important; }
.footer-social a{ width:40px !important; height:40px !important; border-radius:50% !important; border:1px solid var(--border) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:var(--text-secondary) !important; gap:0 !important; }
.footer-social a:hover{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; transform:translateY(-2px) !important; }
.footer-social a i{ color:inherit !important; width:auto !important; }
.footer-cta{ margin-top:6px !important; color:var(--accent) !important; font-weight:700 !important; font-family:'Sora',sans-serif !important; }
.footer-cta:hover{ gap:12px !important; }
/* bottom bar */
.footer-bottom-bar{ max-width:1180px !important; margin:54px auto 0 !important; border-top:1px solid var(--border) !important; padding:22px 0 !important; }
.footer-bottom-grid{ display:flex !important; justify-content:space-between !important; align-items:center !important; gap:16px !important; flex-wrap:wrap !important; }
.footer-col{ color:var(--text-secondary) !important; font-size:.82rem !important; flex:0 0 auto !important; text-align:left !important; padding:0 !important; }
.footer-col-mid{ opacity:.85 !important; }
@media(max-width:560px){ .footer-bottom-grid{ flex-direction:column !important; text-align:center !important; gap:8px !important; } .footer-col{ text-align:center !important; } }

/* ==================================================================== */
/* ===== REDESIGN v38 — pricing feature hover: left-to-right fill ===== */
/* ==================================================================== */
/* Was: border + box-shadow + padding appearing on hover (harsh + jump).
   Now: an accent colour wipes in from left to right, no layout shift,
   tooltip still shows. */
.pricing-row .glow-tooltip{
  background-image:linear-gradient(90deg, color-mix(in srgb,var(--accent) 16%,transparent), color-mix(in srgb,var(--accent) 16%,transparent)) !important;
  background-size:0% 100% !important; background-repeat:no-repeat !important; background-position:left center !important;
  border-radius:6px !important; padding:3px 8px !important; border:0 !important; box-shadow:none !important;
  transition:background-size .42s cubic-bezier(.4,.1,.2,1), color .25s ease !important;
}
.pricing-row .glow-tooltip:hover{
  background-size:100% 100% !important; color:var(--text) !important; border:0 !important; box-shadow:none !important; padding:3px 8px !important;
}
@supports not (color: color-mix(in srgb,red,blue)){
  .pricing-row .glow-tooltip{ background-image:linear-gradient(90deg, rgba(31,111,235,.16), rgba(31,111,235,.16)) !important; }
}

/* ==================================================================== */
/* ===== REDESIGN v39 — professional news / article view (news.php) === */
/* ==================================================================== */
.news-page{ padding-top:120px !important; min-height:70vh; }
.news-page .sec-eyebrow{ justify-content:center !important; }
.news-page-h1{ text-align:center !important; font-family:'Sora',sans-serif !important; font-size:clamp(1.9rem,4vw,2.6rem) !important; margin:6px auto 32px !important; }
/* ^ horizontal margins MUST stay auto: `.section > *` (line ~3807) centers section
   children with margin-left/right:auto; a `margin:6px 0 32px` shorthand reset them to
   0 and pinned the heading to the left on wide screens. */
.news-loader{ text-align:center; color:var(--text-secondary); margin-bottom:16px; }
.news-layout{ display:grid !important; grid-template-columns:minmax(0,1fr) 340px !important; gap:36px !important; max-width:1180px !important; margin:0 auto !important; align-items:start !important; }

/* --- News ticker (breaking-news style scrolling headline bar) --- */
.news-ticker{ max-width:1180px !important; margin:0 auto 30px !important; display:flex !important; align-items:stretch; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg-secondary); }
.news-ticker-label{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:0 16px; background:var(--accent); color:#fff; font-family:'Sora',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
.news-ticker-viewport{ position:relative; flex:1 1 auto; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.news-ticker-track{ display:inline-flex; align-items:center; white-space:nowrap; padding:11px 0; will-change:transform; animation:news-ticker-scroll 55s linear infinite; }
.news-ticker:hover .news-ticker-track{ animation-play-state:paused; }
.news-ticker-item{ color:var(--text); text-decoration:none; font-size:.9rem; transition:color .18s; }
.news-ticker-item:hover{ color:var(--accent); }
.news-ticker-sep{ color:var(--accent); padding:0 16px; opacity:.65; }
@keyframes news-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .news-ticker-track{ animation:none; } }

/* --- Bottom "Latest" / "Most read" portal blocks --- */
.news-more-grid{ max-width:1180px !important; margin:58px auto 0 !important; display:grid; grid-template-columns:1fr 1fr; gap:40px; border-top:1px solid var(--border); padding-top:34px; }
@media (max-width:760px){ .news-more-grid{ grid-template-columns:1fr; gap:30px; } }
.news-more-h{ font-family:'Sora',sans-serif; font-size:1rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text); margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.news-more-h i{ color:var(--accent); }
.news-more-item{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--border); text-decoration:none; transition:color .18s; }
.news-more-item:last-child{ border-bottom:0; }
.news-more-title{ flex:1 1 auto; font-size:.94rem; line-height:1.4; color:var(--text); transition:color .18s; }
.news-more-item:hover .news-more-title{ color:var(--accent); }
.news-more-date{ flex:0 0 auto; font-size:.76rem; color:var(--text-secondary); white-space:nowrap; }
.news-more-rank{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:.8rem; display:inline-flex; align-items:center; justify-content:center; }
@media(max-width:900px){ .news-layout{ grid-template-columns:1fr !important; } }

/* main article */
/* (v39 .news-article card styling removed per request — no fill/shadow) */
@media(max-width:600px){ .news-article{ padding:26px 20px; } }
.news-article-eyebrow{ font-family:'Sora',sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.news-article-title{ font-family:'Sora',sans-serif !important; font-weight:800 !important; font-size:clamp(1.6rem,3.4vw,2.4rem) !important; line-height:1.2 !important; margin:0 0 16px !important; color:var(--text) !important; text-align:left !important; }
.news-article-meta{ display:flex; flex-wrap:wrap; gap:18px; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--border); }
.news-article-meta span, .news-article-meta a{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; color:var(--text-secondary); text-decoration:none; }
.news-article-meta i{ color:var(--accent); }
.news-article-meta a:hover{ color:var(--accent); }
.news-article-lead{ font-size:1.12rem !important; line-height:1.6 !important; color:var(--text) !important; font-weight:500 !important; margin:0 0 24px !important; }
.news-article-body{ color:var(--text-secondary); font-size:1.02rem; line-height:1.78; }
.news-article-body p{ margin:0 0 18px; }
.news-article-body h2{ font-family:'Sora',sans-serif; font-size:1.4rem; font-weight:700; color:var(--text); margin:30px 0 12px; }
.news-article-body h3{ font-family:'Sora',sans-serif; font-size:1.15rem; font-weight:700; color:var(--text); margin:24px 0 10px; }
.news-article-body ul, .news-article-body ol{ margin:0 0 18px; padding-left:22px; }
.news-article-body li{ margin:0 0 8px; }
.news-article-body a{ color:var(--accent); text-decoration:underline; }
.news-article-body img{ max-width:100%; height:auto; border-radius:12px; margin:16px 0; }
.news-article-body blockquote{ border-left:3px solid var(--accent); margin:18px 0; padding:8px 18px; color:var(--text); background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:0 10px 10px 0; }
@supports not (color: color-mix(in srgb,red,blue)){ .news-article-body blockquote{ background:rgba(31,111,235,.08); } }
.news-article-foot{ margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }

/* sidebar */
.news-aside{ position:sticky; top:100px; }
@media(max-width:900px){ .news-aside{ position:static; } }
.news-aside-title{ font-family:'Sora',sans-serif; font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text); margin:0 0 16px; }
.news-aside-item{ display:block; text-decoration:none; background:var(--bg-secondary); border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:12px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.news-aside-item:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 16px 36px rgba(0,0,0,.3); }
.news-aside-item.active{ border-color:var(--accent) !important; box-shadow:0 0 0 1px var(--accent); }
.news-aside-item-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:.95rem; line-height:1.35; color:var(--text); margin-bottom:6px; }
.news-aside-item:hover .news-aside-item-title{ color:var(--accent); }
.news-aside-item-meta{ font-size:.75rem; color:var(--text-secondary); margin-bottom:6px; }
.news-aside-item-sum{ font-size:.85rem; color:var(--text-secondary); line-height:1.45; }
.news-aside-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.news-aside-nav span{ font-size:.82rem; color:var(--text-secondary); }
.news-aside-nav .btn{ padding:.5rem .9rem !important; font-size:.82rem !important; }
.news-empty{ color:var(--text-secondary); padding:20px; }

/* ==================================================================== */
/* ===== REDESIGN v40 — news page: solid header + featured image ====== */
/* ==================================================================== */
/* Transparency is HERO-ONLY. Subpages have no hero, so their header is a solid
   bar that FOLLOWS THE THEME (--header-bg) — dark header + light text on a dark
   theme, light header + dark text on a light theme — instead of forced white. */
:root[data-theme] body.subpage header,
:root[data-theme] body.subpage header:not(.scrolled){
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 6px 26px rgba(0,0,0,.14) !important;
  backdrop-filter:saturate(140%) blur(8px) !important;
}
:root[data-theme] body.subpage header #mainNav a,
:root[data-theme] body.subpage header:not(.scrolled) #mainNav a,
:root[data-theme] body.subpage header #themeSidebarToggle,
:root[data-theme] body.subpage header:not(.scrolled) #themeSidebarToggle{ color:var(--text) !important; }
:root[data-theme] body.subpage header #themeSidebarToggle,
:root[data-theme] body.subpage header:not(.scrolled) #themeSidebarToggle{ border-color:color-mix(in srgb,var(--text) 22%,transparent) !important; }
:root[data-theme] body.subpage header #mainNav a:hover{ color:var(--accent) !important; }
/* hamburger follows the theme too: subtle themed pill, bars = --text */
:root[data-theme] body.subpage header .menu-toggle,
:root[data-theme] body.subpage header:not(.scrolled) .menu-toggle{ background:var(--nav-bg) !important; border-color:var(--border) !important; }
:root[data-theme] body.subpage header .menu-toggle .bar,
:root[data-theme] body.subpage header:not(.scrolled) .menu-toggle .bar{ background:var(--text) !important; }

/* featured article image */
.news-article-hero{ margin:0 0 26px !important; border-radius:14px; overflow:hidden; border:1px solid var(--border); }
.news-article-hero img{ width:100%; height:auto; max-height:420px; object-fit:cover; display:block; }
.news-img-credit{ font-size:.74rem; color:var(--text-secondary); opacity:.75; padding:6px 10px; text-align:right; }
.news-img-credit a{ color:inherit; text-decoration:underline; }
.news-img-credit a:hover{ color:var(--accent); }
/* Consent banner */
.aeu-consent{ position:fixed; left:0; right:0; bottom:0; z-index:9999; background:var(--bg-secondary,#0d1117); border-top:1px solid var(--border,#30363d); box-shadow:0 -8px 30px rgba(0,0,0,.4); }
.aeu-consent-in{ max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.aeu-consent-txt{ flex:1 1 340px; margin:0; font-size:.85rem; line-height:1.55; color:var(--text-secondary,#8b949e); }
.aeu-consent-txt b{ color:var(--text,#e6edf3); }
.aeu-consent-btns{ display:flex; gap:10px; flex:0 0 auto; }
.aeu-consent .btn{ padding:9px 24px; }
@media(max-width:560px){ .aeu-consent-in{ padding:14px 16px; gap:12px; } .aeu-consent-btns{ width:100%; } .aeu-consent-btns .btn{ flex:1; } }

/* ==================================================================== */
/* ===== REDESIGN v41 — dynamic services (per-service image via var) == */
/* ==================================================================== */
/* :nth-child(n) matches every tile and (being later) overrides the old
   fixed per-position images with each service's own image. */
.services-grid .flip-card:nth-child(n)::before{ background-image:var(--svc-img) !important; }
.services-grid a.flip-card{ text-decoration:none !important; color:inherit !important; display:block !important; }
.services-grid a.flip-card:hover{ text-decoration:none !important; }

/* ==================================================================== */
/* ===== REDESIGN v42 — service detail page (service.php) ============= */
/* ==================================================================== */
.service-page{ padding-top:120px !important; min-height:70vh; }
.service-page #service-main{ max-width:1080px; margin:0 auto; }
.service-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; margin-bottom:40px; }
@media(max-width:820px){ .service-hero{ grid-template-columns:1fr; gap:28px; } }
.service-hero-text .news-article-eyebrow{ display:inline-flex; align-items:center; }
.service-hero-text .news-article-eyebrow i{ color:var(--accent); }
.service-title{ font-family:'Sora',sans-serif !important; font-weight:800 !important; font-size:clamp(1.5rem,6vw,2.9rem) !important; line-height:1.15 !important; margin:8px 0 16px !important; color:var(--text) !important; text-align:left !important; overflow-wrap:anywhere; }
.service-lead{ font-size:1.14rem !important; line-height:1.65 !important; color:var(--text-secondary) !important; margin:0 0 24px !important; }
.service-hero-media{ border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:0 30px 66px rgba(0,0,0,.45); }
.service-hero-media img{ width:100%; height:100%; max-height:420px; min-height:280px; object-fit:cover; display:block; }
.service-body{ max-width:760px; margin:0 auto; }
.service-body.news-article-body{ font-size:1.05rem; line-height:1.8; color:var(--text-secondary); }
.service-body h2{ font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:700; color:var(--text); margin:34px 0 14px; }
.service-body ul{ margin:0 0 20px; padding-left:22px; }
.service-body li{ margin:0 0 10px; }
.service-foot{ max-width:760px; margin:36px auto 0; padding-top:26px; border-top:1px solid var(--border); display:flex; gap:14px; flex-wrap:wrap; }

/* ==================================================================== */
/* ===== REDESIGN v43 — service detail: breadcrumb, sidebar, related == */
/* ==================================================================== */
.service-page{ padding-top:118px !important; padding-bottom:70px; }
/* NOTE: .svc-breadcrumb is a <nav>, so it must override the generic mobile
   `nav{ flex-direction:column; position:absolute; display:none }` menu rule and
   the `nav a{ padding/margin/background }` button styling. */
.svc-breadcrumb{ display:flex !important; flex-direction:row !important; justify-content:flex-start !important; position:static !important;
  top:auto !important; left:auto !important; width:auto !important;
  max-width:1180px; margin:0 auto 22px; font-size:.9rem; color:var(--text-secondary);
  gap:8px !important; align-items:center !important; flex-wrap:nowrap !important; white-space:nowrap; overflow:hidden;
  background:transparent !important; box-shadow:none !important; border:none !important; }
.svc-breadcrumb a{ margin:0 !important; padding:0 !important; width:auto !important; background:transparent !important; border:none !important;
  border-radius:0 !important; box-shadow:none !important; font-size:inherit !important; font-weight:400 !important;
  color:var(--text-secondary) !important; text-decoration:none; flex:0 0 auto; }
.svc-breadcrumb a:hover{ color:var(--accent) !important; background:transparent !important; }
.svc-breadcrumb span{ opacity:.5; flex:0 0 auto; }
.svc-breadcrumb b{ color:var(--text); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:600px){ .svc-breadcrumb{ font-size:.8rem; margin-bottom:14px; } }
.service-page #service-main{ max-width:1180px; margin:0 auto; }

/* hero */
.service-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; margin-bottom:52px; }
@media(max-width:880px){ .service-hero{ grid-template-columns:1fr; gap:28px; } }
.svc-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); padding:7px 14px; border-radius:100px; }
.svc-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.service-hero-media{ border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 34px 70px rgba(0,0,0,.5); }
.service-hero-media img{ width:100%; height:100%; max-height:440px; min-height:300px; object-fit:cover; display:block; }

/* 2-column body + sidebar */
.service-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:46px; align-items:start; }
@media(max-width:960px){ .service-layout{ grid-template-columns:1fr; gap:36px; } }
.service-layout .service-body{ max-width:none; margin:0; font-size:1.06rem; line-height:1.8; color:var(--text-secondary); }
.service-layout .service-body h2{ font-family:'Sora',sans-serif; font-size:1.55rem; font-weight:700; color:var(--text); margin:34px 0 14px; }
.service-layout .service-body h3{ font-family:'Sora',sans-serif; color:var(--text); margin:26px 0 12px; }
.service-layout .service-body ul{ margin:0 0 22px; padding-left:4px; list-style:none; }
.service-layout .service-body li{ position:relative; padding-left:30px; margin:0 0 12px; }
.service-layout .service-body li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:2px; color:var(--accent); font-size:.9em; }
.service-foot{ margin-top:38px; padding-top:26px; border-top:1px solid var(--border); display:flex; gap:14px; flex-wrap:wrap; }

/* sidebar */
.service-aside{ position:sticky; top:100px; display:flex; flex-direction:column; gap:20px; }
@media(max-width:960px){ .service-aside{ position:static; } }
.aside-card{ background:color-mix(in srgb, var(--text) 4%, transparent); border:1px solid var(--border); border-radius:16px; padding:22px; }
.aside-title{ font-family:'Sora',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin:0 0 14px; text-align:left; }
.other-svc-list{ display:flex; flex-direction:column; gap:6px; }
.other-svc{ display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:11px; text-decoration:none; transition:background .18s, transform .18s; }
.other-svc:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); transform:translateX(3px); }
.other-ic{ flex:0 0 38px; height:38px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-size:1rem; }
.other-tx{ display:flex; flex-direction:column; min-width:0; }
.other-tx b{ color:var(--text); font-size:.92rem; font-weight:600; line-height:1.25; }
.other-tx small{ color:var(--text-secondary); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
.other-go{ margin-left:auto; color:var(--text-secondary); font-size:.7rem; opacity:.6; }
.other-svc:hover .other-go{ color:var(--accent); opacity:1; }
.aside-cta{ background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)); }
.aside-cta h3{ font-family:'Sora',sans-serif; font-size:1.1rem; color:var(--text); margin:0 0 8px; }
.aside-cta p{ color:var(--text-secondary); font-size:.9rem; line-height:1.6; margin:0 0 16px; }

/* related strip */
.related-services{ margin-top:64px; }
.related-h2{ font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:800; color:var(--text); text-align:center; margin:0 0 28px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:820px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{ position:relative; min-height:210px; border-radius:16px; overflow:hidden; text-decoration:none; border:1px solid var(--border); display:flex; align-items:flex-end; }
.related-card::before{ content:""; position:absolute; inset:0; background-image:var(--rc-img); background-size:cover; background-position:center; transform:scale(1.02); transition:transform .5s; }
.related-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(3,7,15,.9) 12%, rgba(3,7,15,.35) 70%, rgba(3,7,15,.15)); }
.related-card:hover::before{ transform:scale(1.1); }
.related-ov{ position:relative; z-index:1; padding:20px; color:#fff; }
.related-ic{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.14); backdrop-filter:blur(4px); margin-bottom:10px; }
.related-ov h3{ font-family:'Sora',sans-serif; font-size:1.12rem; font-weight:700; margin:0 0 4px; color:#fff; }
.related-more{ font-size:.85rem; color:#cfe0ff; font-weight:600; }

/* empty state */
.svc-empty{ text-align:center; padding:80px 20px; }
.svc-empty i{ font-size:2.4rem; color:var(--accent); margin-bottom:14px; }
.svc-empty p{ color:var(--text-secondary); margin:0 0 20px; }

/* ==================================================================== */
/* ===== REDESIGN v44 — button system: no underline + 3 variants ====== */
/* ===== primary (solid) · secondary (outline) · cta (pulsing) ======== */
/* ==================================================================== */
.btn, a.btn { text-decoration: none !important; }
.btn:hover, a.btn:hover { text-decoration: none !important; }

/* PRIMARY — the main solid action */
.btn.btn-primary{
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 0 18px var(--accent-glow);
}
.btn.btn-primary:hover{
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 30px var(--accent-glow-strong);
}

/* SECONDARY — muted outline alternative (now global, not only .cta-band) */
.btn.btn-secondary{
  background: transparent !important;
  color: var(--text) !important;
  border: 2px solid var(--border) !important;
  box-shadow: none !important;
}
.btn.btn-secondary:hover{
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  box-shadow: none !important;
}

/* CTA — the prominent, pulsing conversion button (same look as .btn-pulse) */
.btn.btn-cta{
  /* darken the accent ~18% under white text so the label meets WCAG AA contrast
     across themes (was var(--bg) text on the raw accent → failed on blue). */
  background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 0 15px var(--accent-glow);
  animation: glow-pulse 2s infinite ease-in-out;
}
.btn.btn-cta:hover{
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 30px var(--accent-glow-strong) !important;
}

/* ==================================================================== */
/* ===== REDESIGN v45 — site-wide contact modal ====================== */
/* ==================================================================== */
.contact-modal{ position:fixed; inset:0; z-index:4000; display:none; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto; }
.contact-modal.open{ display:flex; }
.contact-modal__backdrop{ position:fixed; inset:0; background:rgba(3,7,15,.72); backdrop-filter:blur(5px); }
.contact-modal__dialog{ position:relative; z-index:1; width:100%; max-width:720px; margin:auto;
  background:var(--bg); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 40px 90px rgba(0,0,0,.6); padding:34px; animation:cmIn .28s ease; }
@keyframes cmIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.contact-modal__dialog .sec-eyebrow{ justify-content:flex-start; }
.contact-modal__dialog .contact-h2{ text-align:left; margin:6px 0 8px; }
.contact-modal__dialog .section-subtitle{ text-align:left; margin:0 0 22px; }
.contact-modal__close{ position:absolute; top:12px; right:16px; background:none; border:none;
  color:var(--text-secondary); font-size:1.9rem; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px; }
.contact-modal__close:hover{ color:var(--accent); }
@media(max-width:600px){ .contact-modal{ padding:2vh 10px; } .contact-modal__dialog{ padding:24px 18px; } }

/* ==================================================================== */
/* ===== REDESIGN v46 — footer mobile: single gutter, less padding ==== */
/* ==================================================================== */
@media(max-width:768px){
  /* footer was double-padded (.footer 24px + grid ~29px) → inset past the
     content. Collapse to one 16px gutter so it lines up with the rest. */
  .footer{ padding-left:0 !important; padding-right:0 !important; }
  .footer-main-grid{ padding:0 16px !important; gap:26px 22px !important; }
  .footer-bottom-grid{ padding-left:16px !important; padding-right:16px !important; }
  .footer-overlap-cta + .footer{ padding-top:66px !important; }
}

/* (v47 header-theme block removed — it duplicated the authoritative
   ":root[data-theme] header:not(.scrolled) / .scrolled" block earlier in the
   file; the hamburger button bg comes from the base .menu-toggle rule.) */


/* ==================================================================== */
/* ===== v49 — LCP fix: first hero slide is a STATIC base image ======= */
/* The infinite opacity animation on the hero background meant the largest
   paint never settled → Lighthouse reported NO_LCP. Pin slide 1 to a fixed,
   always-painted base (no animation, no will-change) so it's a stable LCP
   element; slides 2 & 3 still cross-fade on top for the slideshow. */
#home .hero-slide:nth-child(1){ opacity:1 !important; animation:none !important; will-change:auto !important; }
@media (prefers-reduced-motion:reduce){
  #home .hero-slide:nth-child(1){ opacity:1 !important; animation:none !important; }
}

/* ==================================================================== */
/* ===== v50 — a11y: 48px min tap targets for hero CTAs on mobile ===== */
@media(max-width:768px){
  .hero-actions a, .hero-actions button, .hero-actions #cta-btn{
    min-height:48px !important; display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
  }
}