@font-face {
    font-family: 'ConwinIcons';
    src: url('fonts/ConwinIcons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.cw-icon {
    font-family: 'ConwinIcons', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

/* Icon Mappings based on ConwinIcons.ttf analysis */
.cw-icon-telematik:before {
    content: "\007a";
    /* Truck Icon */
}

.cw-icon-truck:before {
    content: "\007a";
}

.cw-icon-gravel:before {
    content: "\00d9";
}

.cw-icon-software:before {
    content: "$";
    /* Monitor/Screen Icon */
}

.cw-icon-consulting:before {
    content: ")";
    /* Box with dots/People Icon */
}

.cw-icon-menu:before {
    content: "=";
    /* Hamburger Menu */
}

.cw-icon-close:before {
    content: "=";
    /* Reusing Hamburger as placeholder or need finding Close. Using = for now. */
}

/* Generalized mappings for replaced FontAwesome icons */
.cw-icon-erp:before {
    content: "$";
    /* Same as Software */
}

.cw-icon-handel:before {
    content: "$";
    /* Same as Software */
}

.cw-icon-check:before {
    content: ")";
    /* Using the 'Box with dots' as a stylistic bullet/check */
}

.cw-icon-step:before {
    content: ")";
    /* Using 'Box with dots' for roadmap steps */
}

.cw-icon-plus:before {
    content: "\00c8";
}
/* ══════════════════════════════════════════
   FONTS
══════════════════════════════════════════ */
@font-face {
    font-family: 'Moderat';
    src: url('fonts/Moderat-Light.woff2') format('woff2');
    font-weight: 300;
}
@font-face {
    font-family: 'Moderat';
    src: url('fonts/Moderat-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Moderat';
    src: url('fonts/Moderat-Medium.woff2') format('woff2');
    font-weight: 500;
}

/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
.theme-conwin-website {
    --cwweb-bg-base: #0e1512;
    --cwweb-bg-raised: #141c17;
    --cwweb-bg-overlay: #1a2421;
    --cwweb-bg-hover: rgba(255, 255, 255, 0.03);
    --cwweb-border: rgba(255, 255, 255, 0.07);
    --cwweb-border-bright: rgba(205, 226, 186, 0.18);
    --cwweb-neon: #e0fd0a;
    --cwweb-neon-dim: rgba(224, 253, 10, 0.12);
    --cwweb-neon-glow: rgba(224, 253, 10, 0.25);
    --cwweb-text: rgba(255, 255, 255, 0.85);
    --cwweb-text-muted: rgba(255, 255, 255, 0.45);
    --cwweb-text-faint: rgba(255, 255, 255, 0.22);
    --cwweb-green-soft: #cde2ba;
    --cwweb-radius-sm: 8px;
    --cwweb-radius-md: 14px;
    --cwweb-radius-lg: 22px;
    --cwweb-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
html { scroll-behavior: smooth }
body {
    background-color: var(--cwweb-bg-base);
    color: var(--cwweb-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
}
a { text-decoration: none; color: inherit }
img { display: block }
ul { list-style: none }

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes blobIn { to { opacity: 1 } }
@keyframes gridPulse { 0% { opacity: 0.5 } 100% { opacity: 1 } }
@keyframes glowPulse { 0% { opacity: 0.6; transform: translateX(-50%) scale(0.95) } 100% { opacity: 1; transform: translateX(-50%) scale(1.05) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }