/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #323338;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* MODERN ANIMATIONS */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
        transform: translateX(-5px);
    }
    25% {
        opacity: 1;
        transform: translateX(0px);
    }
    50% {
        opacity: 0.3;
        transform: translateX(6px);
    }
    75% {
        opacity: 1;
        transform: translateX(12px);
    }
    100% {
        opacity: 0.2;
        transform: translateX(18px);
    }
}

@keyframes shootingStar {
    0% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    30% {
        opacity: 1;
        transform: translate(200px, 200px) rotate(-45deg);
    }
    31% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translate(200px, 200px) rotate(-45deg);
    }
}

@keyframes orbGlow {
    0% {
        box-shadow: 0 10px 30px rgba(90, 175, 188, 0.2);
    }
    50% {
        box-shadow: 0 20px 60px rgba(90, 175, 188, 0.6);
    }
    100% {
        box-shadow: 0 10px 30px rgba(90, 175, 188, 0.2);
    }
}

@keyframes orbPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes orbFloatUp {
    0% {
        transform: translate(-50%, -50%) translateY(0);
    }
    100% {
        transform: translate(-50%, -50%) translateY(-12px);
    }
}

.fade-in-element {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

/* GRADIENT BORDERS */
.gradient-border {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary-pink), var(--blue), var(--purple));
    z-index: -1;
    border-radius: 18px;
    animation: rotate 4s linear infinite;
}

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

/* COLORS */
:root {
    --primary-pink: #1a3361;
    --orange: #2B70B3;
    --green: #5AAFBC;
    --purple: #0068ce;
    --blue: #2854A8;
    --white: #FFFFFF;
    --light-gray: #F6F7FB;
    --medium-gray: #676879;
    --dark-gray: #323338;
}

/* BUTTONS */
.btn {
    padding: 10px 20px;
    border-radius: 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn:hover::before {
    opacity: 0;
}

.btn-primary {
    background-color: var(--primary-pink);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 61, 87, 0.15);
    border: none;
}

.btn-primary:hover {
    background-color: #2B70B3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(43, 112, 179, 0.25);
    color: white;
}

.btn-outline {
    background-color: #ffffff;
    color: #374151;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-outline:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* NAVBAR */
.navbar {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    height: 90px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.nav-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 16px;
}

.nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 100%;
}

.roket-logo {
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

.nav-logo .roket-logo {
    height: 110px !important;
    width: auto !important;
    max-width: 110px !important;
    object-fit: contain !important;
}

.nav-logo h2 {
    color: var(--primary-pink);
    font-size: 13px;
    margin: 0;
    display: block;
    font-weight: 700;
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: center;
}

.nav-menu a {
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 500;
    font-size: 13.5px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.nav-menu a:hover {
    color: var(--primary-pink);
}

/* Products dropdown */
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dark-gray);
    font: inherit;
    font-weight: 500;
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease;
}

.nav-dropdown-toggle i {
    font-size: 10px;
    transition: transform 0.25s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.is-open .nav-dropdown-toggle {
    color: var(--primary-pink);
}

.nav-dropdown.is-open .nav-dropdown-toggle i {
    transform: rotate(180deg);
}

.products-menu {
    position: absolute;
    top: calc(100% - 8px);
    left: 50%;
    transform: translateX(-50%);
    width: min(820px, calc(100vw - 32px));
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5eaf3;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(26, 51, 97, 0.16);
    z-index: 1002;
    animation: productsMenuIn 0.2s ease;
}

.products-menu[hidden] {
    display: none;
}

@keyframes productsMenuIn {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.products-menu-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef1f7;
}

.products-menu-header strong {
    display: block;
    color: var(--primary-pink);
    font-size: 17px;
    font-weight: 700;
}

.products-menu-header p {
    margin: 4px 0 0;
    color: var(--medium-gray);
    font-size: 13px;
}

.products-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.nav-menu .products-menu-item,
.products-menu-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: none;
    color: var(--dark-gray);
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.products-menu-item:hover {
    background: var(--light-gray);
    border-color: #e5eaf3;
}

.products-menu-item > i {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #ffffff;
    font-size: 15px;
}

.products-menu-item.coming-soon > i {
    background: #e8edf5;
    color: var(--blue);
}

.products-menu-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-right: 76px;
}

.products-menu-text strong {
    font-size: 14px;
    font-weight: 600;
}

.products-menu-text small {
    color: var(--medium-gray);
    font-size: 12px;
    line-height: 1.4;
}

.products-menu-item .badge {
    top: 12px;
    right: 12px;
    font-size: 10px;
}

.products-menu-note {
    margin: 16px 0 0;
    color: #6B7280;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.nav-menu .products-menu-note a {
    display: inline;
    min-height: 0;
    font-size: 12px;
    color: var(--blue);
}

.language-selector {
    display: flex;
    gap: 6px;
    align-items: center;
    border-left: 1px solid #e5e7eb;
    padding-left: 14px;
    margin-left: 6px;
}

.lang-btn {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.lang-btn:hover {
    background: #f3f4f6;
    color: var(--primary-pink);
}

.lang-btn.active {
    background: var(--primary-pink);
    color: white;
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-buttons .btn {
    padding: 8px 16px;
    font-size: 13px;
}

@media (max-width: 1300px) {
    .nav-container {
        gap: 12px;
    }
    
    .nav-menu {
        gap: 10px;
    }
    
    .nav-menu a {
        font-size: 12.5px;
    }
    
    .nav-logo .roket-logo {
        height: 100px !important;
        max-width: 100px !important;
    }
    
    .nav-buttons {
        gap: 10px;
    }
    
    .nav-buttons .btn {
        padding: 7px 14px;
        font-size: 12px;
    }
}

/* SECTIONS */
section {
    padding: 80px 0;
}

/* ROKET PRODUCTS */
.roket-products {
    background: linear-gradient(180deg, #f8faff 0%, #f0f5ff 100%);
    padding: 60px 20px 50px 20px;
}

.roket-products-content {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
}

.roket-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55%;
    max-width: 700px;
    height: auto;
    min-width: 0;
    position: relative;
}

/* The animated diagram has a fixed internal coordinate system. Its host
   reserves the scaled bounds, including the expanding orbit animation. */
.roket-image:has(> .ecosystem-diagram) {
    height: var(--ecosystem-height, 640px);
    /* Nested rotating transforms retain their pre-transform scroll bounds.
       All module labels fit the scaled host; contain only that decorative
       overflow, without making the page itself a clipping container. */
    overflow: clip;
}

.roket-image > .ecosystem-diagram {
    flex: 0 0 500px;
    transform: scale(var(--ecosystem-scale, .4));
}

/* Keep module labels readable on phones instead of shrinking the entire map. */
@media (max-width: 768px) {
    .roket-image:has(> .ecosystem-diagram) { height: auto; overflow: visible; }
    .roket-image > .ecosystem-diagram {
        flex: 0 1 100%;
        width: 100%;
        max-width: 360px;
        height: auto;
        transform: none;
        flex-direction: column;
        gap: 24px;
    }
    .roket-image .ecosystem-connections,
    .roket-image .center-corona,
    .roket-image .signal-ring { display: none; }
    .roket-image .orbit-pulse-wrap,
    .roket-image .orbit-ring {
        position: static;
        width: 100%;
        height: auto;
        animation: none;
        transform: none;
    }
    .roket-image .orbit-ring {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        justify-items: center;
    }
    .roket-image .ecosystem-diagram .orb {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 112px;
        height: 112px;
        max-width: 100%;
    }
    .roket-image .ecosystem-diagram .orb-center { width: 190px; height: 190px; }
    .roket-image .orbit-ring .orb-inner { animation: none; transform: none; }
}

.roket-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: contain;
}

.ecosystem-diagram-wrapper {
    overflow: hidden;
    width: 100%;
    max-width: 700px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.ecosystem-diagram {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.08);
    transform-origin: center;
}

.orb {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.orb-center {
    width: 190px;
    height: 190px;
    background: radial-gradient(circle at 38% 32%, #0d1f42 0%, #050d1c 45%, #000308 100%);
    z-index: 10;
    box-shadow: 0 20px 50px rgba(10, 40, 100, 0.6),
                0 0 40px rgba(0, 162, 251, 0.18),
                inset  7px  7px 18px rgba(0, 162, 251, 0.30),
                inset  3px  3px  6px rgba(180, 240, 255, 0.20),
                inset -9px -9px 22px rgba(0, 0, 0, 0.85);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

/* Plasma surface */
.plasma-surface {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 25% 35%, rgba(0, 162, 251, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 45% 65% at 72% 62%, rgba(40,  84, 168, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 55% 40% at 55% 82%, rgba(10,  60, 140, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 35% 45% at 80% 25%, rgba(80, 180, 255, 0.14) 0%, transparent 50%);
    filter: blur(10px);
    animation: plasmaFlow 9s ease-in-out infinite;
}

.plasma-surface::before {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 70% 50% at 60% 40%, rgba(0, 162, 251, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 40% 60% at 30% 70%, rgba(60, 120, 220, 0.20) 0%, transparent 50%);
    filter: blur(8px);
    animation: plasmaFlow 12s ease-in-out infinite reverse;
}

.plasma-surface::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: 38%;
    left: 40%;
    background: radial-gradient(circle, rgba(150, 230, 255, 0.35) 0%, transparent 70%);
    filter: blur(6px);
    animation: plasmaCore 6s ease-in-out infinite;
}

@keyframes plasmaFlow {
    0%   { transform: rotate(0deg)   scale(1);    }
    33%  { transform: rotate(120deg) scale(1.06); }
    66%  { transform: rotate(240deg) scale(0.96); }
    100% { transform: rotate(360deg) scale(1);    }
}

@keyframes plasmaCore {
    0%, 100% { opacity: 0.5; transform: translate(0,    0)    scale(1);   }
    30%       { opacity: 1;   transform: translate(8px,  -6px) scale(1.4); }
    65%       { opacity: 0.6; transform: translate(-6px, 8px)  scale(0.8); }
}

/* Glass lens overlay */

.orb-center::before {
    content: '';
    position: absolute;
    bottom: -6%;
    left: 50%;
    transform: translateX(-50%);
    width: 160%;
    height: 70%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 82% 65% at 50% 100%, rgba(0, 162, 251,0.22) 0%, rgba(0, 162, 251,0.10) 45%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 26% 93%, rgba(180,240,255,0.25) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 74% 93%, rgba(180,240,255,0.25) 0%, transparent 55%),
        radial-gradient(ellipse 18% 18% at 50% 99%, rgba(255,255,255,0.18) 0%, transparent 50%);
    animation: centerShimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes centerShimmer {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) scaleX(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.12);
    }
}

.orb-center::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(1px 1px at 10% 15%, white, transparent),
        radial-gradient(0.8px 0.8px at 25% 8%, #b4f0ff, transparent),
        radial-gradient(1.2px 1.2px at 40% 22%, #00a2fb, transparent),
        radial-gradient(0.9px 0.9px at 58% 12%, white, transparent),
        radial-gradient(1px 1px at 72% 28%, #e8f8ff, transparent),
        radial-gradient(0.8px 0.8px at 85% 18%, #b4f0ff, transparent),
        radial-gradient(1.2px 1.2px at 15% 38%, white, transparent),
        radial-gradient(1px 1px at 30% 50%, #00a2fb, transparent),
        radial-gradient(0.8px 0.8px at 50% 42%, #e8f8ff, transparent),
        radial-gradient(1.1px 1.1px at 68% 48%, white, transparent),
        radial-gradient(0.9px 0.9px at 82% 55%, #b4f0ff, transparent),
        radial-gradient(1px 1px at 92% 38%, white, transparent),
        radial-gradient(0.8px 0.8px at 8% 62%, #00a2fb, transparent),
        radial-gradient(1.2px 1.2px at 22% 72%, white, transparent),
        radial-gradient(0.9px 0.9px at 38% 68%, #e8f8ff, transparent),
        radial-gradient(1px 1px at 55% 78%, white, transparent),
        radial-gradient(0.8px 0.8px at 70% 65%, #b4f0ff, transparent),
        radial-gradient(1.1px 1.1px at 85% 75%, #00a2fb, transparent),
        radial-gradient(0.9px 0.9px at 18% 85%, white, transparent),
        radial-gradient(1px 1px at 45% 88%, #e8f8ff, transparent),
        radial-gradient(0.8px 0.8px at 62% 92%, white, transparent),
        radial-gradient(1.2px 1.2px at 78% 85%, #b4f0ff, transparent),
        radial-gradient(0.9px 0.9px at 92% 78%, white, transparent),
        radial-gradient(1px 1px at 35% 32%, #00a2fb, transparent),
        radial-gradient(0.8px 0.8px at 75% 42%, white, transparent),
        radial-gradient(1.1px 1.1px at 48% 58%, #e8f8ff, transparent),
        radial-gradient(0.9px 0.9px at 88% 92%, white, transparent),
        radial-gradient(1px 1px at 5% 48%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 60% 30%, white, transparent),
        radial-gradient(1.2px 1.2px at 95% 55%, #00a2fb, transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(180,240,255,0.9)) drop-shadow(0 0 5px rgba(0, 162, 251,0.6));
    animation: twinkle 3s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.orb-content {
    text-align: center;
    color: white;
    position: relative;
    z-index: 2;
}

.orb:not(.orb-center) {
    color: white;
    top: 50%;
    left: 50%;
    overflow: hidden;
}

.orb:not(.orb-center)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(0.9px 0.9px at 15% 20%, #e8f8ff, transparent),
        radial-gradient(1.1px 1.1px at 70% 15%, white, transparent),
        radial-gradient(0.8px 0.8px at 40% 35%, #b4f0ff, transparent),
        radial-gradient(1.2px 1.2px at 80% 40%, #00a2fb, transparent),
        radial-gradient(0.9px 0.9px at 25% 60%, white, transparent),
        radial-gradient(1px 1px at 60% 55%, #e8f8ff, transparent),
        radial-gradient(0.8px 0.8px at 85% 70%, #b4f0ff, transparent),
        radial-gradient(1.1px 1.1px at 10% 75%, white, transparent),
        radial-gradient(0.9px 0.9px at 50% 80%, #00a2fb, transparent),
        radial-gradient(1px 1px at 35% 12%, white, transparent),
        radial-gradient(0.8px 0.8px at 90% 25%, #e8f8ff, transparent),
        radial-gradient(1.2px 1.2px at 55% 90%, white, transparent),
        radial-gradient(0.9px 0.9px at 20% 45%, #b4f0ff, transparent),
        radial-gradient(1px 1px at 75% 82%, #00a2fb, transparent),
        radial-gradient(0.8px 0.8px at 45% 65%, white, transparent),
        radial-gradient(1.1px 1.1px at 30% 88%, #e8f8ff, transparent),
        radial-gradient(0.9px 0.9px at 65% 30%, white, transparent),
        radial-gradient(1px 1px at 88% 55%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 12% 92%, #00a2fb, transparent),
        radial-gradient(1.2px 1.2px at 52% 48%, white, transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(180, 240, 255, 0.9)) drop-shadow(0 0 4px rgba(0, 162, 251, 0.5));
    animation: twinkle 2.4s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* 8 ecosystem modules positioned evenly around the central platform */
.orb-1 { transform: translate(-50%, -50%) translate(0, -190px); background: linear-gradient(135deg, #00a2fb 0%, #1E9CC9 100%); }
.orb-2 { transform: translate(-50%, -50%) rotate(45deg) translateY(-190px) rotate(-45deg); background: linear-gradient(135deg, #1a3361 0%, #2854A8 100%); }
.orb-3 { transform: translate(-50%, -50%) rotate(90deg) translateY(-190px) rotate(-90deg); background: linear-gradient(135deg, #2854A8 0%, #5BA3D9 100%); }
.orb-4 { transform: translate(-50%, -50%) rotate(135deg) translateY(-190px) rotate(-135deg); background: linear-gradient(135deg, #00a2fb 0%, #5BA3D9 100%); }
.orb-5 { transform: translate(-50%, -50%) rotate(180deg) translateY(-190px) rotate(-180deg); background: linear-gradient(135deg, #1E9CC9 0%, #2854A8 100%); }
.orb-6 { transform: translate(-50%, -50%) rotate(225deg) translateY(-190px) rotate(-225deg); background: linear-gradient(135deg, #1a3361 0%, #1E9CC9 100%); }
.orb-7 { transform: translate(-50%, -50%) rotate(270deg) translateY(-190px) rotate(-270deg); background: linear-gradient(135deg, #5BA3D9 0%, #00a2fb 100%); }
.orb-8 { transform: translate(-50%, -50%) rotate(315deg) translateY(-190px) rotate(-315deg); background: linear-gradient(135deg, #2854A8 0%, #1E9CC9 100%); }

.orb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 5px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.orb:not(.orb-center):hover {
    filter: brightness(1.15);
    box-shadow: 0 12px 32px rgba(40, 84, 168, 0.4);
}

.ecosystem-connections {
    opacity: 1;
    transform-origin: 250px 250px;
    animation: svgRingZoom 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes svgRingZoom {
    0%   { transform: scale(1);    }
    26%  { transform: scale(1.22); }
    58%  { transform: scale(1.22); }
    86%  { transform: scale(1);    }
    100% { transform: scale(1);    }
}

.ecosystem-diagram {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.08);
    transform-origin: center;
}

.orbit-pulse-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    animation: orbitZoomCycle 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes orbitZoomCycle {
    0%   { transform: translate(-50%, -50%) scale(1);    }
    26%  { transform: translate(-50%, -50%) scale(1.22); }
    58%  { transform: translate(-50%, -50%) scale(1.22); }
    86%  { transform: translate(-50%, -50%) scale(1);    }
    100% { transform: translate(-50%, -50%) scale(1);    }
}

.orbit-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    animation: orbitRingSpin 35s linear infinite;
}

@keyframes orbitRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.orbit-ring .orb-inner {
    animation: counterSpinContent 35s linear infinite;
}

@keyframes counterSpinContent {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Center corona — flares in sync with orbit zoom cycle */
.center-corona {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9;
    animation: centerFlare 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes centerFlare {
    0%,  25% {
        opacity: 0;
        box-shadow: none;
    }
    30% {
        opacity: 0.5;
        box-shadow:
            0 0  25px 5px  rgba(255, 200,  50, 0.30),
            0 0  50px 15px rgba(255, 100,  20, 0.18);
    }
    42% {
        opacity: 1;
        box-shadow:
            0 0  40px 12px rgba(255, 220,  80, 0.55),
            0 0  80px 25px rgba(255, 130,  30, 0.38),
            0 0 140px 35px rgba(255, 180,  40, 0.22),
            0 0 220px 50px rgba(255,  80,   0, 0.10);
    }
    55% {
        opacity: 0.3;
        box-shadow:
            0 0  60px 30px rgba(255, 200,  50, 0.15),
            0 0 120px 50px rgba(255, 100,  20, 0.08);
    }
    58%, 100% {
        opacity: 0;
        box-shadow: none;
    }
}

/* === Gravity pull lines === */
.gravity-line {
    fill: none;
    stroke: rgba(0, 162, 251, 0.28);
    stroke-width: 1;
    stroke-dasharray: 3 11;
    stroke-linecap: round;
    animation: gravityPull 2s linear infinite;
}

@keyframes gravityPull {
    from { stroke-dashoffset: 14; }
    to   { stroke-dashoffset: 0; }
}

/* === Signal rings — fire when orbits are at max width === */
.signal-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    border: 1px solid rgba(0, 162, 251, 0.32);
    box-shadow: 0 0 5px rgba(0, 162, 251,0.14);
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    animation: signalRipple 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.signal-ring.s2 { animation-delay: -0.55s; }
.signal-ring.s3 { animation-delay: -1.1s; }

@keyframes signalRipple {
    0%,  25%  { transform: translate(-50%,-50%) scale(0.22); opacity: 0;    }
    27%        { transform: translate(-50%,-50%) scale(0.22); opacity: 0.42;  }
    54%        { transform: translate(-50%,-50%) scale(3.4);  opacity: 0;    }
    55%, 100%  { transform: translate(-50%,-50%) scale(0);    opacity: 0;    }
}

.orbit-pulse-wrap:hover {
    animation-play-state: paused;
}

.orbit-pulse-wrap:hover .orbit-ring {
    animation-play-state: paused;
}

.orbit-pulse-wrap:hover .orb-inner {
    animation-play-state: paused;
}

.roket-text {
    padding: 0;
    width: 45%;
    max-width: 500px;
    text-align: left;
}

.roket-text .section-title {
    text-align: left;
    margin-bottom: 16px;
}

.roket-text p {
    font-size: 15px;
    color: var(--medium-gray);
    line-height: 1.7;
    margin: 0;
}

.roket-text .roket-intro {
    font-size: 18px;
    color: #2854A8;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 20px;
}

.roket-text .roket-subtitle {
    font-size: 16px;
    color: #111827;
    font-weight: 600;
    margin: 24px 0 16px 0;
}

.roket-text .modules-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.roket-text .modules-list li {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.roket-text .modules-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    background: linear-gradient(135deg, #1a3361 0%, #2854A8 40%, #0ca8c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 18px;
    font-weight: bold;
}

.roket-text .modules-list li strong {
    font-weight: 700;
    background: linear-gradient(135deg, #091629 0%, #1a3361 25%, #2854A8 55%, #0e6f90 80%, #0ca8c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.roket-text .roket-description {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.7;
}

.roket-desc-full {
    max-width: 820px;
    margin: 40px auto 0 auto;
    padding: 24px 32px;
    background: rgba(40, 84, 168, 0.05);
    border-radius: 12px;
    border-left: 3px solid rgba(40, 84, 168, 0.25);
    text-align: center;
}

.roket-desc-full p {
    font-size: 15px;
    line-height: 1.8;
    color: #4b5878;
    margin: 0;
    font-style: italic;
}

@media (max-width: 968px) {
    .navbar {
        height: auto;
        position: relative;
    }

    .nav-container {
        flex-wrap: wrap;
        padding: 12px 20px;
    }

    .nav-logo {
        height: 48px;
    }

    .nav-logo .roket-logo {
        height: 48px !important;
    }

    .nav-menu {
        order: 3;
        flex: 1 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        max-width: 100%;
        overscroll-behavior-x: contain;
    }

    .nav-menu > * { flex-shrink: 0; }
    .nav-menu a, .lang-btn { min-height: 44px; display: inline-flex; align-items: center; }

    .roket-products-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .roket-image {
        width: 100%;
    }
    
    .roket-text {
        text-align: left;
        max-width: 100%;
        padding: 0 20px;
        width: 100%;
    }
    
    .roket-text .section-title {
        text-align: center;
    }
    
    .roket-text .roket-intro {
        text-align: center;
        font-size: 16px;
    }
    
    .roket-text .modules-list li {
        font-size: 14px;
    }
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: var(--dark-gray);
}

/* ABOUT US SECTION */
.about-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 24px;
    font-weight: 400;
}

.about-content p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: #2854A8;
}

@media (max-width: 768px) {
    .about-section {
        padding: 60px 0;
    }
    
    .about-content p {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

/* WHAT WE SOLVE SECTION */
.what-we-solve {
    padding: 100px 0;
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}

.what-we-solve .section-title {
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 30px;
}

.highlight-text {
    font-weight: 800;
    background: linear-gradient(135deg, #1a3361 0%, #2854A8 40%, #0ca8c8 80%, #00a2fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.solution-intro {
    font-size: 20px;
    line-height: 1.7;
    color: #374151;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 60px;
    font-weight: 500;
}

.solution-subtitle {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #1a3361 0%, #2854A8 45%, #0e6f90 75%, #00a2fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-bottom: 50px;
}

.solution-list {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

.solution-item {
    padding: 24px 0;
    border-left: 2px solid transparent;
    border-image: linear-gradient(180deg, #1a3361 0%, #2854A8 45%, #0ca8c8 80%, #00a2fb 100%) 1;
    padding-left: 20px;
    transition: all 0.2s ease;
}

.solution-item:hover {
    border-image: linear-gradient(180deg, #0ca8c8 0%, #00a2fb 50%, #00a2fb 100%) 1;
    padding-left: 24px;
}

.solution-item h4 {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #091629 0%, #1a3361 25%, #2854A8 55%, #0e6f90 80%, #0ca8c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.solution-item p {
    font-size: 16px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

@media (max-width: 768px) {
    .what-we-solve {
        padding: 60px 0;
    }
    
    .what-we-solve .section-title {
        font-size: 28px;
    }
    
    .solution-intro {
        font-size: 17px;
        margin-bottom: 40px;
        padding: 0 20px;
    }
    
    .solution-subtitle {
        font-size: 24px;
        margin-bottom: 30px;
        background: linear-gradient(135deg, #1a3361 0%, #2854A8 45%, #0e6f90 75%, #00a2fb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .solution-item {
        padding: 20px 0;
        padding-left: 16px;
    }
    
    .solution-item h4 {
        font-size: 17px;
    }
    
    .solution-item p {
        font-size: 15px;
    }
}

/* HERO SECTION */
.hero {
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 70px;
    position: relative;
    z-index: 2;
}

.hero-pretitle {
    font-size: 56px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.hero-main-title {
    font-size: 64px;
    font-weight: 800;
    background: linear-gradient(135deg, #091629 0%, #1a3361 22%, #2854A8 44%, #0e6f90 66%, #0ca8c8 88%, #00a2fb 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 2px 10px rgba(12, 168, 200, 0.25));
    animation: gradientShift 8s ease infinite;
    position: relative;
    overflow: hidden;
    display: inline-block;
    clip-path: inset(0%);
    padding: 0 4px 4px;
}

.hero-title-wrapper {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 100%;
}

.hero-roket-emoji {
    height: 80px;
    width: auto;
    object-fit: contain;
    position: absolute;
    right: calc(50% - 420px);
    top: -20px;
    animation: roketFlyIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform: translateX(-700px) rotate(-45deg);
    opacity: 0;
}

@keyframes roketFlyIn {
    0% {
        transform: translateX(-700px) rotate(-45deg);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    70% {
        transform: translateX(20px) rotate(8deg);
        opacity: 1;
    }
    85% {
        transform: translateX(-8px) rotate(-3deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

.hero-main-title::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        radial-gradient(0.8px 0.8px at 12% 22%, #e8f8ff, transparent),
        radial-gradient(1px 1px at 28% 18%, white, transparent),
        radial-gradient(1.2px 1.2px at 45% 32%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 18% 48%, white, transparent),
        radial-gradient(1px 1px at 58% 28%, #00a2fb, transparent),
        radial-gradient(1.2px 1.2px at 72% 42%, white, transparent),
        radial-gradient(0.8px 0.8px at 38% 58%, #b4f0ff, transparent),
        radial-gradient(1px 1px at 82% 25%, white, transparent),
        radial-gradient(1.2px 1.2px at 62% 52%, #e8f8ff, transparent),
        radial-gradient(0.8px 0.8px at 48% 68%, white, transparent),
        radial-gradient(1px 1px at 88% 48%, #00a2fb, transparent),
        radial-gradient(1.2px 1.2px at 22% 72%, white, transparent),
        radial-gradient(0.8px 0.8px at 75% 62%, #b4f0ff, transparent),
        radial-gradient(1px 1px at 52% 78%, white, transparent),
        radial-gradient(1.2px 1.2px at 85% 72%, #e8f8ff, transparent),
        radial-gradient(0.8px 0.8px at 32% 82%, white, transparent),
        radial-gradient(1px 1px at 68% 88%, #00a2fb, transparent),
        radial-gradient(0.8px 0.8px at 92% 82%, white, transparent),
        radial-gradient(1.2px 1.2px at 20% 38%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 35% 45%, white, transparent),
        radial-gradient(1px 1px at 50% 25%, #e8f8ff, transparent),
        radial-gradient(1.2px 1.2px at 65% 38%, white, transparent),
        radial-gradient(0.8px 0.8px at 78% 55%, #00a2fb, transparent),
        radial-gradient(1px 1px at 85% 35%, white, transparent),
        radial-gradient(1.2px 1.2px at 15% 65%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 40% 78%, white, transparent),
        radial-gradient(1px 1px at 55% 15%, #e8f8ff, transparent),
        radial-gradient(1.2px 1.2px at 70% 75%, white, transparent),
        radial-gradient(0.8px 0.8px at 80% 85%, #00a2fb, transparent),
        radial-gradient(1px 1px at 8% 42%, white, transparent),
        radial-gradient(1.2px 1.2px at 30% 30%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 42% 50%, white, transparent),
        radial-gradient(1px 1px at 60% 65%, #e8f8ff, transparent),
        radial-gradient(1.2px 1.2px at 72% 18%, white, transparent),
        radial-gradient(0.8px 0.8px at 90% 45%, #00a2fb, transparent),
        radial-gradient(1px 1px at 25% 88%, white, transparent),
        radial-gradient(1.2px 1.2px at 10% 55%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 93% 30%, white, transparent),
        radial-gradient(1px 1px at 38% 12%, #e8f8ff, transparent),
        radial-gradient(1.2px 1.2px at 67% 45%, white, transparent),
        radial-gradient(0.8px 0.8px at 15% 28%, #00a2fb, transparent),
        radial-gradient(1px 1px at 18% 45%, white, transparent),
        radial-gradient(1.2px 1.2px at 30% 62%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 45% 82%, white, transparent),
        radial-gradient(1px 1px at 58% 35%, #e8f8ff, transparent),
        radial-gradient(1.2px 1.2px at 73% 50%, white, transparent),
        radial-gradient(0.8px 0.8px at 87% 65%, #00a2fb, transparent),
        radial-gradient(1px 1px at 95% 42%, white, transparent),
        radial-gradient(1.2px 1.2px at 20% 85%, #b4f0ff, transparent),
        radial-gradient(0.8px 0.8px at 35% 20%, white, transparent),
        radial-gradient(1px 1px at 50% 55%, #e8f8ff, transparent),
        radial-gradient(1.2px 1.2px at 65% 75%, white, transparent),
        radial-gradient(0.8px 0.8px at 78% 30%, #00a2fb, transparent),
        radial-gradient(1px 1px at 90% 60%, white, transparent),
        radial-gradient(0.8px 0.8px at 8% 68%, #b4f0ff, transparent),
        radial-gradient(1.2px 1.2px at 25% 12%, white, transparent),
        radial-gradient(0.8px 0.8px at 55% 42%, #e8f8ff, transparent),
        radial-gradient(1px 1px at 82% 78%, white, transparent),
        radial-gradient(1.2px 1.2px at 70% 15%, #00a2fb, transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(180, 240, 255, 1)) drop-shadow(0 0 4px rgba(100, 220, 255, 0.9)) drop-shadow(0 0 6px rgba(0, 162, 251, 0.6));
    animation: twinkle 1.8s linear infinite;
    pointer-events: none;
    clip-path: inset(0);
}

.hero-main-title::before {
    content: none;
}

.hero-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 28px;
    line-height: 1.3;
    color: #2854A8;
    letter-spacing: -0.01em;
}

.hero-highlight {
    font-size: 24px;
    font-weight: 700;
    margin: 28px 0;
    color: #111827;
}

.mvp-highlight {
    color: #2854A8;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #091629, #1a3361, #2854A8, #0e6f90, #0ca8c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 20px;
    color: #111827;
    margin-bottom: 24px;
    font-weight: 500;
    line-height: 1.6;
}

.hero-explanation {
    max-width: 900px;
    margin: 0 auto;
}

.hero-explanation p {
    font-size: 17px;
    color: #4b5563;
    line-height: 1.7;
    font-weight: 400;
}

.section-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--medium-gray);
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
.hero-image {
    position: relative;
    z-index: 2;
}

}

/* DASHBOARD MOCKUP */
.dashboard-mockup {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
}

.dashboard-tabs {
    display: flex;
    gap: 8px;
}

.tab {
    padding: 8px 16px;
    border-radius: 6px;
    background: #f9fafb;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
}

.tab:hover {
    background: #f3f4f6;
}

.tab.active {
    background: #0068ce;
    color: white;
}

.avatar-group {
    display: flex;
    gap: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0068ce, #5AAFBC);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.kanban-board {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.kanban-column {
    min-width: 240px;
    background: #fafbfc;
    border-radius: 8px;
    padding: 16px;
}

.kanban-column h3 {
    margin-bottom: 16px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-card {
    background: white;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.task-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border-color: #e5e7eb;
}

.task-card.completed {
    opacity: 0.6;
}

.task-card h4 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

.task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.priority {
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10px;
}

.priority.high { background: #fee2e2; color: #dc2626; }
.priority.medium { background: #fef3c7; color: #f59e0b; }
.priority.low { background: #dbeafe; color: #2563eb; }

.avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0086C0, #00CA72);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

.progress-section {
    background: #fafbfc;
    padding: 16px;
    border-radius: 8px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0068ce, #5AAFBC);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* SOCIAL PROOF */
.social-proof {
    background-color: var(--light-gray);
}

.testimonial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    position: relative;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--green), var(--purple));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.testimonial-card:hover::before {
    transform: scaleX(1);
}

.testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 60px;
    color: var(--primary-pink);
    opacity: 0.1;
    font-family: serif;
    line-height: 1;
}

.testimonial-content p {
    margin-bottom: 20px;
    font-style: italic;
    color: var(--dark-gray);
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* FEATURES */
.features {
    background-color: #ffffff;
    padding: 100px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 100px;
    margin-top: 60px;
}

.feature-card {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 32px 24px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 3px solid var(--orange);
}

.feature-card:hover {
    transform: translateX(8px);
    border-left-color: var(--purple);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.feature-card:hover .feature-number {
    color: #1a3361;
    font-size: 40px;
    background: rgba(26, 51, 97, 0.35);
    border-color: #1a3361;
    transform: scale(1.1) rotate(-5deg);
}

.feature-number {
    font-size: 32px;
    font-weight: 400;
    color: #1a3361;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: rgba(26, 51, 97, 0.2);
    border-radius: 14px;
    border: 2px solid rgba(26, 51, 97, 0.3);
}

.feature-content {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.feature-content h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--dark-gray);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.feature-content p {
    color: var(--medium-gray);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

/* İŞ BİRLİKLERİMİZ MARQUEE */
/* ── İŞ BİRLİKÇİLERİMİZ ──────────────────────────────────── */
.partners-marquee-section {
    padding: 80px 0;
    background: linear-gradient(160deg, #f0f5ff 0%, #ffffff 60%, #f0f5ff 100%);
    overflow: hidden;
    position: relative;
}

.partners-marquee-header {
    text-align: center;
    margin-bottom: 56px;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.partners-marquee-header::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #1a3361, #2854A8, #0ca8c8, #00a2fb);
    border-radius: 2px;
    margin: 16px auto 0 auto;
}

.partners-marquee-title {
    font-size: 44px;
    font-weight: 800;
    background: linear-gradient(135deg, #091629 0%, #1a3361 30%, #2854A8 60%, #0ca8c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Inter', sans-serif;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Two-row marquee layout */
.marquee-rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Row 1 scrolls left, Row 2 scrolls right */
.marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: marquee-left 45s linear infinite;
}

.marquee-track.reverse {
    animation: marquee-right 50s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(40, 84, 168, 0.16);
    border-radius: 14px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(40, 84, 168, 0.09), 0 1px 3px rgba(0,0,0,0.05);
    cursor: default;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.marquee-item:hover {
    background: #ffffff;
    border-color: #0ca8c8;
    box-shadow: 0 8px 28px rgba(0, 162, 251, 0.18), 0 2px 8px rgba(40, 84, 168, 0.12);
    transform: translateY(-2px) scale(1.01);
}

.marquee-item i {
    font-size: 17px;
    background: linear-gradient(135deg, #2854A8 0%, #0e6f90 50%, #00a2fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.marquee-item span {
    font-size: 14.5px;
    font-weight: 600;
    background: linear-gradient(135deg, #1a3361 0%, #2854A8 55%, #0ca8c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.01em;
}

/* SECTORS SECTION */
.sectors-section {
    padding: 100px 0;
    background: #f8faff;
}

.sectors-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.sectors-heading {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, #091629 0%, #1a3361 30%, #2854A8 60%, #0ca8c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
}

.sectors-list {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
}

.sectors-list li {
    font-size: 16px;
    color: #374151;
    margin-bottom: 12px;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(40, 84, 168, 0.18), 0 2px 12px rgba(0, 162, 251, 0.12);
}

.sector-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 32px;
    transition: transform 0.2s ease;
    cursor: default;
}

.sector-cell:hover:not(.faded) {
    transform: scale(1.08);
    filter: brightness(1.12);
}

.sector-cell.active {
    background: linear-gradient(135deg, #1a3361 0%, #2854A8 55%, #0e6f90 100%);
    color: #ffffff;
}

.sector-cell.light {
    background: linear-gradient(135deg, #eaf4fb 0%, #dceef8 100%);
    color: #0e6f90;
}

.sector-cell.semi {
    background: #c5d8ef;
    color: #1a3361;
}

.sector-cell.faded {
    background: #e2ecf8;
    color: #2854A8;
    opacity: 0.3;
}

@media (max-width: 968px) {
    .sectors-content {
        grid-template-columns: 1fr;
    }
    .sectors-grid {
        max-width: 360px;
        margin: 0 auto;
    }
    .sector-cell {
        font-size: 24px;
    }
}

/* PMS SECTION */
.pms-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(43, 112, 179, 0.05) 0%, rgba(90, 175, 188, 0.03) 100%);
    position: relative;
}

.pms-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(43, 112, 179, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.roket-modules-intro {
    max-width: 760px;
    margin: 24px auto 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.roket-modules-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: #4b5878;
    margin: 0;
    font-weight: 400;
    text-align: center;
}

.pms-quote {
    max-width: 800px;
    margin: 32px auto 0 auto;
    padding: 0 20px;
    text-align: center;
}

.pms-quote p {
    font-size: 15px;
    line-height: 1.9;
    color: #6b7a99;
    margin: 0;
    font-style: italic;
}

.pms-visual {
    margin: 48px 0 0 0;
    position: relative;
    z-index: 1;
}

    .video-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        aspect-ratio: 16 / 9;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(26, 51, 97, 0.15);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .pms-visual:hover .video-container {
        box-shadow: 0 30px 70px rgba(26, 51, 97, 0.2);
        transform: translateY(-4px);
    }

    .pms-video {
        width: 100%;
        height: 100%;
        display: block;
        border: none;
    }

    .video-thumb-link {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }

    .video-thumb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: filter 0.3s ease;
    }

    .video-thumb-link:hover .video-thumb-img {
        filter: brightness(0.75);
    }

    .video-play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 18px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.5);
        pointer-events: none;
    }

    .video-play-btn .fa-youtube {
        font-size: 64px;
        color: #FF0000;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
        transition: transform 0.2s ease;
    }

    .video-thumb-link:hover .video-play-btn .fa-youtube {
        transform: scale(1.15);
    }

    .pms-grid {
        display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 48px;
    position: relative;
    z-index: 1;
}

.pms-card {
    padding: 32px 24px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pms-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(43, 112, 179, 0.15);
}

.pms-card:nth-child(1),
.pms-card:nth-child(4) {
    background: linear-gradient(135deg, rgba(43, 112, 179, 0.08) 0%, rgba(43, 112, 179, 0.04) 100%);
}

.pms-card:nth-child(2),
.pms-card:nth-child(5) {
    background: linear-gradient(135deg, rgba(90, 175, 188, 0.08) 0%, rgba(90, 175, 188, 0.04) 100%);
}

.pms-card:nth-child(3),
.pms-card:nth-child(6) {
    background: linear-gradient(135deg, rgba(155, 139, 200, 0.08) 0%, rgba(155, 139, 200, 0.04) 100%);
}

.pms-icon {
    font-size: 40px;
    color: #1a3361;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.pms-icon i {
    font-size: 40px;
    color: #1a3361;
}

.pms-card:hover .pms-icon {
    transform: scale(1.15);
    filter: brightness(1.2);
}

.card-text {
    flex: 1;
    width: 100%;
}

.card-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-gray);
    margin: 0 0 10px 0;
    letter-spacing: -0.2px;
}

.card-text p {
    font-size: 13px;
    line-height: 1.5;
    }

/* VERSION COMPARISON */
.version-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 48px;
    padding: 0;
}

.version-column {
    background: white;
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.version-column h3 {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.version-column h4 {
    font-size: 18px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 24px 0;
    text-decoration: underline;
}

.version-1 {
    border: 2px solid #2854A8;
}

.version-2 {
    border: 2px solid #5AAFBC;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 12px 12px 12px 32px;
    margin-bottom: 8px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    position: relative;
    transition: all 0.2s ease;
}

.feature-list li::before {
    content: "•";
    position: absolute;
    left: 14px;
    color: #2854A8;
    font-size: 20px;
    font-weight: bold;
}

.version-2 .feature-list li::before {
    color: #5AAFBC;
}

.feature-list li:hover {
    background: #e5e7eb;
    transform: translateX(4px);
}

.feature-list li.highlight {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    font-weight: 600;
    border-left: 3px solid #5AAFBC;
}

.feature-list li.highlight.special {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    font-weight: 700;
    border-left: 3px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.feature-list li.highlight.special::before {
    content: "★";
    color: #f59e0b;
    font-size: 18px;
}

    @media (max-width: 968px) {
        .pms-section {
            padding: 60px 0;
        }

        .core-features-section {
            padding: 50px 0;
        }

        .roket-modules-intro {
            padding: 20px 24px;
            margin: 30px 20px 20px 20px;
        }

        .roket-modules-intro p {
            font-size: 15px;
        }

        .pms-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .pms-card {
            padding: 24px;
            flex-direction: column;
        }

        .pms-icon {
            width: 70px;
            height: 70px;
            min-width: 70px;
            font-size: 36px;
        }
        
        .version-comparison {
            grid-template-columns: 1fr;
            gap: 30px;
            margin-top: 40px;
            padding: 0 20px;
        }
        
        .version-column {
            padding: 28px 24px;
        }
        
        .version-column h3 {
            font-size: 24px;
        }
        
        .version-column h4 {
            font-size: 16px;
            margin-bottom: 20px;
        }
        
        .feature-list li {
            padding: 10px 10px 10px 28px;
            font-size: 13px;
        }
        
        .pms-icon {
            width: 80px;
            height: 80px;
            font-size: 38px;
        }
    }

/* HOW IT WORKS */
.how-it-works {
    background-color: var(--light-gray);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.step {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
}

.step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--orange), var(--green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.step:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.step:hover::before {
    transform: scaleX(1);
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--primary-pink);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
    font-weight: 700;
}

.step h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--dark-gray);
}

.step p {
    color: var(--medium-gray);
}

/* PRODUCT PREVIEW */
.preview-mockup {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--light-gray);
    overflow: hidden;
}

.preview-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.preview-tabs .tab {
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--light-gray);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.preview-tabs .tab.active {
    background: var(--primary-pink);
    color: white;
}

.preview-boards {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
}

.board-column {
    min-width: 200px;
    background: var(--light-gray);
    border-radius: 8px;
    padding: 16px;
}

.board-column h4 {
    margin-bottom: 16px;
    color: var(--medium-gray);
    font-size: 14px;
    font-weight: 600;
}

.preview-task {
    background: white;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* FUTURE PRODUCTS */
.future-products {
    background-color: white;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 60px;
    align-items: stretch;
}

.products-grid-ready {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 60px;
    align-items: stretch;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.products-grid-coming {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
    align-items: stretch;
}

@media (max-width: 968px) and (min-width: 769px) {
    .products-grid-coming {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.product-card {
    text-align: center;
    padding: 40px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-card:focus-visible {
    outline: 3px solid rgba(43, 112, 179, 0.35);
    outline-offset: 4px;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--purple), var(--primary-pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.product-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.product-card:hover::before {
    transform: scaleX(1);
}

.products-grid-ready .product-card {
    background: rgba(225, 245, 254, 0.85);
    border: 1px solid rgba(90, 175, 188, 0.35);
}

.product-card.coming-soon {
    border: 2px dashed #e0e0e0;
}

.badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--orange);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.badge.ready {
    background: var(--green);
}

.product-card h3 {
    font-size: 22px;
    margin-bottom: 16px;
    color: var(--dark-gray);
    font-weight: 600;
}

.product-card p {
    color: var(--medium-gray);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* PRICING */
.pricing {
    background: #ffffff;
    padding: 100px 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    align-items: stretch;
}

@media (max-width: 968px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-card.enterprise-card { grid-column: 1 / -1; }
}

.pricing-card {
    background: white;
    border-radius: 20px;
    padding: 32px 28px;
    text-align: left;
    position: relative;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #dbe5f1;
}

.pricing-card:hover {
    border-color: #c7d8ea;
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.13);
    transform: translateY(-4px);
}

.pricing-card.popular {
    background: white;
    border: 1px solid #2B70B3;
    box-shadow: 0 26px 60px rgba(43, 112, 179, 0.18);
}

.pricing-card.popular:hover {
    box-shadow: 0 6px 20px rgba(162, 93, 220, 0.2);
}

.pricing-card.popular .pricing-title {
    color: #1a3361;
}

.enterprise-card {
    background: linear-gradient(160deg, #fafaff 0%, #f0ecff 100%);
    border: 1.5px solid #0068ce;
    box-shadow: 0 20px 60px rgba(109, 40, 217, 0.1), 0 0 0 1px rgba(167, 139, 250, 0.15);
}

.enterprise-card:hover {
    border-color: #0068ce;
    box-shadow: 0 28px 72px rgba(109, 40, 217, 0.18), 0 0 0 1px rgba(124, 58, 237, 0.28);
    transform: translateY(-6px);
}

.popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #5AAFBC;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trial-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: #e8f2ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.enterprise-chip {
    background: linear-gradient(135deg, #00a2fb 0%, #4f46e5 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
    border: none;
}

.pricing-title {
    font-size: 24px;
    margin-bottom: 8px;
    color: #111827;
    font-weight: 700;
}

.pricing-subtitle-card {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

.price-card-block {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    margin-bottom: 14px;
}

/* Clean price display: big number + /month unit */
.price-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}

.price-amount {
    font-size: 52px;
    line-height: 1;
    font-weight: 800;
    color: #111827;
    letter-spacing: -1px;
}

.price-unit {
    font-size: 17px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 2px;
}

/* Small italic trial note below price */
.trial-note {
    font-size: 13px;
    color: #16a34a;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trial-note::before {
    content: "✓";
    font-size: 12px;
    font-weight: 700;
}

.price-preline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
}

.list-price {
    font-weight: 700;
    text-decoration: line-through;
}

.trial-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.trial-zero {
    font-size: 56px;
    line-height: 0.9;
    font-weight: 800;
    color: #111827;
}

.trial-period-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    color: #475569;
    font-size: 13px;
}

.trial-period-copy strong {
    font-size: 18px;
    color: #111827;
}

.price-after {
    margin-top: 12px;
    font-size: 15px;
    color: #111827;
}

.annual-line {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #475569;
    font-size: 13px;
}

.annual-save-badge {
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
}

.pricing-microcopy {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.microcopy-line {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

.enterprise-price-block {
    background: linear-gradient(135deg, #f3f0ff 0%, #ede9fe 100%);
    border-color: #0068ce;
    text-align: center;
    padding: 22px 18px;
}

.enterprise-price-block .price {
    font-size: 56px;
    font-weight: 800;
    color: #0068ce;
    text-align: center;
    margin-bottom: 0;
    letter-spacing: -1px;
    justify-content: center;
}

.price {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #111827;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price span {
    font-size: 40px;
}

.price .period {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
}

.features-list {
    list-style: none;
    margin-top: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.features-list li {
    color: #374151;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}

.check-icon {
    width: 18px;
    height: 18px;
    background: transparent;
    color: #00CA72;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.pricing-card .btn {
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
}

.btn-gradient {
    background: #0068ce;
    color: white;
    border: 2px solid #0068ce;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: #68d4fd;
    border-color: #68d4fd;
}

.btn-white {
    background: #0068ce;
    color: white;
    border: 2px solid #0068ce;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-white:hover {
    background: #68d4fd;
    border-color: #68d4fd;
}

.btn-enterprise {
    background: #0068ce;
    color: white;
    border: 2px solid #0068ce;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-enterprise:hover {
  background: #68d4fd;
    border-color: #68d4fd;
}

.enterprise-trust-signals {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 12px;
}

.enterprise-trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: #0068ce;
    font-weight: 500;
    line-height: 1.4;
}

.trust-check {
    color: #0068ce;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.pricing-trust-line {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    margin-top: -8px;
    margin-bottom: 36px;
    letter-spacing: 0.01em;
}

.pricing-note {
    text-align: center;
    color: var(--medium-gray);
    font-style: italic;
    font-size: 14px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* CTA SECTION */
.cta {
    background: linear-gradient(135deg, #091629 0%, #1a3361 30%, #2854A8 60%, #0e6f90 80%, #0ca8c8 100%);
    color: white;
    text-align: center;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.cta::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 1px 1px at 5% 20%, #e8f8ff 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 12% 75%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 18% 40%, white 0%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 24% 88%, #b4f0ff 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 31% 15%, #e8f8ff 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 38% 60%, white 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 44% 33%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 50% 80%, #e8f8ff 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 56% 10%, white 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 63% 50%, #b4f0ff 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 69% 25%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 75% 70%, white 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 82% 42%, #e8f8ff 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 88% 85%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 93% 18%, white 0%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 97% 55%, #b4f0ff 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 8% 55%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 47% 92%, white 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 72% 8%, #e8f8ff 0%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 85% 30%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 15% 92%, #b4f0ff 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 58% 45%, white 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 35% 68%, #e8f8ff 0%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 91% 72%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 3% 38%, white 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 77% 95%, #b4f0ff 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 42% 5%, #00a2fb 0%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 20% 28%, white 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 65% 82%, #e8f8ff 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 53% 62%, #00a2fb 0%, transparent 100%);
    filter: drop-shadow(0 0 2px rgba(180,240,255,0.9)) drop-shadow(0 0 5px rgba(0, 162, 251,0.6));
    animation: twinkle 2.8s linear infinite;
}

.cta .container {
    position: relative;
    z-index: 1;
}

.cta .section-title {
    color: white;
    margin-bottom: 40px;
}

.cta .btn {
    background-color: white;
    color: var(--primary-pink);
    font-weight: 700;
    border: 2px solid white;
}

.cta .btn:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    color: var(--primary-pink);
    border-color: white;
}

/* FOOTER */
.footer {
    background-color: var(--dark-gray);
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: nowrap;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 170px;
    width: 170px !important;
    max-width: 170px !important;
    height: 170px !important;
    max-height: 170px !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-logo img {
    height: 170px !important;
    max-height: 170px !important;
    width: auto !important;
    max-width: 170px !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-logo .roket-logo {
    height: 170px !important;
    max-height: 170px !important;
    width: auto !important;
    max-width: 170px !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-logo-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer-logo-header img,
.footer-logo-header svg {
    height: 44px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    margin-bottom: 8px !important;
    object-fit: contain !important;
}

.footer-logo-header h3 {
    color: white;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1;
}

.footer-logo-header p {
    color: var(--medium-gray);
    margin: 0;
    font-size: 13px;
}

.footer-logo h3 {
    color: white;
    margin-bottom: 8px;
    font-size: 24px;
}

.footer-links {
    display: flex;
    gap: 60px;
    flex: 1;
    flex-wrap: nowrap;
    margin-left: 40px;
    align-items: flex-start;
    min-width: 0;
}

.footer-column {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-column h4 {
    color: var(--light-gray);
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    font-size: 16px;
}

.footer-column a {
    display: block;
    color: var(--medium-gray);
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #4a4b52;
    color: var(--medium-gray);
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .feature-card {
        gap: 16px;
        padding: 24px 16px;
    }

    .footer-content {
        flex-direction: column;
        gap: 24px;
    }

    .footer-links {
        margin-left: 0;
        width: 100%;
    }

    .footer-column {
        flex: 1 1 160px;
    }

    .nav-container {
        gap: 12px;
        padding: 12px 16px;
    }
    
    .nav-menu {
        gap: 15px;
    }
    
    .hero-pretitle {
        font-size: 32px;
    }
    
    .hero-main-title {
        font-size: 40px;
    }
    
    .hero-title {
        font-size: 22px;
    }
    
    .hero-highlight {
        font-size: 18px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .kanban-board {
        flex-direction: column;
    }
    
    .kanban-column {
        min-width: 100%;
    }
    
    .preview-boards {
        flex-direction: column;
    }
    
    .board-column {
        min-width: 100%;
    }
    
    .footer-links {
        gap: 30px;
        flex-wrap: wrap;
    }
    
    .pricing-card.popular {
        transform: scale(1);
    }

    .pricing-card.popular:hover {
        transform: translateY(-10px);
    }

    /* ── Pricing section responsive (tablet/mobile) ── */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* On tablets the enterprise card spans full width so it looks intentional */
    .pricing-card.enterprise-card {
        grid-column: 1 / -1;
    }

    .pricing-card {
        padding: 24px 20px;
    }

    .price-amount {
        font-size: 44px;
    }

    .popular-tag {
        top: -10px;
        font-size: 11px;
        padding: 4px 14px;
    }

    .trial-chip {
        font-size: 12px;
        padding: 4px 12px;
    }

    .annual-line {
        flex-wrap: wrap;
        gap: 6px;
    }

    .features-list {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    section {
        padding: 60px 0;
    }
    
    .hero-pretitle {
        font-size: 26px;
    }
    
    .hero-main-title {
        font-size: 34px;
    }
    
    .hero-title {
        font-size: 20px;
    }
    
    .hero-subtitle {
        font-size: 15px;
    }
    
    .hero-highlight {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .nav-menu {
        display: flex;
    }

    .nav-container { justify-content: center; }
    .nav-buttons { margin-inline: auto; }

    /* ── Pricing section responsive (small phones) ── */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pricing-card.enterprise-card {
        grid-column: auto;
    }

    .pricing-card {
        padding: 22px 18px;
    }

    .price-amount {
        font-size: 40px;
    }

    .price-unit {
        font-size: 15px;
    }

    .pricing-microcopy {
        font-size: 12px;
    }

    .microcopy-line {
        font-size: 12px;
    }
}

/* ─── MODALS ──────────────────────────────────────────── */

/* Overlay */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    --modal-edge-gap: 16px;
    padding: max(var(--modal-edge-gap), env(safe-area-inset-top, 0px))
        max(var(--modal-edge-gap), env(safe-area-inset-right, 0px))
        max(var(--modal-edge-gap), env(safe-area-inset-bottom, 0px))
        max(var(--modal-edge-gap), env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

/* Safari-safe backdrop blur: separate fixed layer so children don't clip */
.modal::before {
    content: '';
    position: fixed;
    inset: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 0;
}

/* Card */
.modal-content {
    position: relative;
    z-index: 1;
    background: #ffffff;
    width: min(100%, 800px);
    max-width: 800px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 52px 56px;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(155, 139, 200, 0.12);
    /* Scroll inside card if viewport is short */
    max-height: calc(100vh - 2 * var(--modal-edge-gap, 16px));
    max-height: calc(100dvh - max(var(--modal-edge-gap, 16px), env(safe-area-inset-top, 0px)) - max(var(--modal-edge-gap, 16px), env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Close button — z-index above all form content */
.close-modal {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;
    font-size: 24px;
    font-weight: 300;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, background 0.2s ease;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: transparent;
    padding: 0;
    flex-shrink: 0;
}

.close-modal:hover {
    color: #111827;
    background: #f3f4f6;
}

.modal-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    padding-right: 40px; /* never overlap close button */
}

.modal-subtitle {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* ── Contact form ── */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Form grid — minmax(0,1fr) is the Safari overflow fix ── */
.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* required: Safari grid overflow */
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.required {
    color: #5AAFBC;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #ffffff;
    color: #111827;
    -webkit-text-size-adjust: 100%; /* prevent iOS auto-zoom */
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #0068ce;
    box-shadow: 0 0 0 3px rgba(155, 139, 200, 0.15);
}

.form-group select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.privacy-notice {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
    margin-top: 6px;
}

.privacy-notice a {
    color: #0068ce;
    text-decoration: none;
    font-weight: 500;
}

.privacy-notice a:hover {
    text-decoration: underline;
}

.btn-contact {
    background: #0068ce;
    color: white;
    padding: 13px 28px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.btn-contact:hover {
    background: #8e4ac4;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(162, 93, 220, 0.3);
}

/* ── Auth modals (login & signup) ── */
.auth-modal {
    max-width: 540px;
    width: min(100%, 540px);
    padding: 44px 44px 36px;
    box-sizing: border-box;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -6px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #0068ce;
}

.checkbox-label span {
    line-height: 1.4;
}

.terms-label {
    margin-top: -6px;
}

.terms-label span {
    font-size: 13px;
    color: #0068ce;
    line-height: 1.5;
}

.terms-label a {
    color: #0068ce;
    text-decoration: none;
    font-weight: 500;
}

.terms-label a:hover {
    text-decoration: underline;
}

.forgot-password {
    font-size: 13px;
    color: #0068ce;
    text-decoration: none;
    font-weight: 500;
}

.forgot-password:hover {
    text-decoration: underline;
}

.btn-auth {
    background: linear-gradient(135deg, #0068ce 0%, #0068ce 100%);
    color: white;
    padding: 13px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    box-shadow: 0 4px 14px rgba(155, 139, 200, 0.35);
}

.btn-auth:hover {
    background: linear-gradient(135deg, #00a2fb 0%, #0068ce 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(155, 139, 200, 0.45);
}

.auth-footer {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    margin-top: 12px;
}

.auth-footer a {
    color: #0068ce;
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* ── Plan preview badge (signup modal) ── */
.signup-plan-summary {
    border: 1px solid rgba(155, 139, 200, 0.22);
    background: linear-gradient(160deg, rgba(243, 240, 255, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    gap: 8px;
    box-sizing: border-box;
}

.summary-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    background: #e8f2ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.summary-plan-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.summary-plan-row > div:first-child {
    min-width: 0;
    flex: 1;
}

.summary-plan-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.summary-plan-caption {
    margin-top: 4px;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}

.summary-price-stack {
    text-align: right;
    flex-shrink: 0;
}

.summary-zero {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #111827;
}

.summary-period {
    margin-top: 2px;
    font-size: 11px;
    color: #64748b;
}

.summary-after {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.summary-vat {
    font-size: 11px;
    color: #64748b;
}

/* Mobile navigation and narrow-screen layout */
.mobile-nav-toggle,
.mobile-nav-drawer {
    display: none;
}

@media (max-width: 768px) {
    .navbar {
        height: 68px;
    }

    .nav-container {
        flex-direction: row;
        padding: 0 16px;
        gap: 12px;
    }

    .nav-logo .roket-logo {
        height: 58px !important;
        max-width: 86px !important;
    }

    .nav-menu,
    .nav-buttons {
        display: none;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-left: auto;
        border: 1px solid #dbe3f0;
        border-radius: 6px;
        background: #ffffff;
        color: #1a3361;
        font-size: 18px;
        cursor: pointer;
    }

    .mobile-nav-drawer {
        position: absolute;
        top: 68px;
        right: 12px;
        left: 12px;
        z-index: 1001;
        padding: 12px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #dbe3f0;
        border-radius: 8px;
        box-shadow: 0 16px 32px rgba(26, 51, 97, 0.16);
    }

    .mobile-nav-drawer.is-open {
        display: block;
    }

    .mobile-nav-links {
        display: grid;
        border-bottom: 1px solid #e8edf5;
    }

    .mobile-nav-links a {
        padding: 12px 8px;
        color: #24344f;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-products summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 8px;
        color: #24344f;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }

    .mobile-products summary::-webkit-details-marker {
        display: none;
    }

    .mobile-products summary i {
        font-size: 12px;
        transition: transform 0.25s ease;
    }

    .mobile-products[open] summary i {
        transform: rotate(180deg);
    }

    .mobile-products-list {
        margin: 0 0 8px;
        padding: 4px 0;
        list-style: none;
        background: #f6f7fb;
        border-radius: 8px;
    }

    .mobile-products-list li,
    .mobile-nav-links .mobile-products-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 12px;
        color: #24344f;
        font-size: 14px;
        font-weight: 500;
    }

    .mobile-products-list li {
        padding: 0;
    }

    .mobile-products-list button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 9px 12px;
        border: 0;
        background: none;
        color: #24344f;
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

    .mobile-products-list .badge {
        position: static;
        flex-shrink: 0;
        font-size: 10px;
    }

    .mobile-nav-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding-top: 12px;
    }

    .mobile-nav-footer .btn-primary {
        grid-column: 1 / -1;
    }

    .mobile-nav-footer .btn {
        min-height: 40px;
        padding: 8px;
        font-size: 12px;
    }

    .mobile-language-selector {
        grid-column: 1 / -1;
        justify-content: center;
        border-left: 0;
        margin: 0;
        padding: 0 0 6px;
    }

    .hero,
    .roket-products,
    .features,
    .core-features-section {
        overflow: hidden;
    }

    .hero-pretitle span {
        white-space: normal !important;
    }

    .hero-title-wrapper {
        flex-wrap: wrap;
    }

    .hero-main-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .roket-products {
        padding-right: 0;
        padding-left: 0;
    }

    .roket-text {
        padding-right: 16px;
        padding-left: 16px;
    }

    /* The desktop zoom-and-spin sequence exceeds a phone viewport. Keep the
       ecosystem readable on touch devices while retaining its visual hierarchy. */
    .ecosystem-connections,
    .orbit-pulse-wrap,
    .orbit-ring,
    .orbit-ring .orb-inner,
    .center-corona,
    .signal-ring,
    .gravity-line,
    .plasma-surface,
    .plasma-surface::before,
    .plasma-surface::after,
    .orb-center::before,
    .orb-center::after,
    .orb:not(.orb-center)::after {
        animation: none;
    }

    .orbit-pulse-wrap {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .orbit-ring .orb-inner {
        transform: none;
    }

    .feature-grid,
    .steps,
    .version-comparison {
        grid-template-columns: 1fr;
    }

    .feature-card {
        gap: 18px;
        padding: 24px 16px;
    }

    .products-grid-ready,
    .products-grid-coming {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 100%;
        margin-top: 28px;
    }

    .product-card {
        min-height: 0;
        padding: 20px 24px 28px;
        border-radius: 8px;
    }

    .product-card .badge {
        position: static;
        align-self: flex-end;
        order: -1;
        margin: 0 0 14px;
        white-space: nowrap;
    }

    .product-card h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .footer-content,
    .footer-links {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }

    .footer-content {
        gap: 28px;
    }

    .footer-links {
        gap: 24px;
        text-align: center;
    }

    .footer-logo,
    .footer-logo img,
    .footer-logo .roket-logo {
        width: 110px !important;
        max-width: 110px !important;
        height: 110px !important;
        max-height: 110px !important;
        flex-basis: 110px;
    }

    .carousel-container {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .marquee-wrapper {
        overflow: hidden;
    }
}

@media (max-width: 390px) {
    .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .hero-main-title {
        font-size: 30px;
    }

    .hero-pretitle {
        font-size: 20px;
    }


}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ── Modal responsive ── */
@media (max-width: 768px) {
    .modal {
        --modal-edge-gap: 12px;
    }

    .modal-content {
        padding: 40px 28px 32px;
    }

    .modal-title {
        font-size: 22px;
        padding-right: 36px;
    }

    .modal-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .auth-modal {
        padding: 36px 24px 28px;
    }
}

@media (max-width: 480px) {
    .modal {
        --modal-edge-gap: 8px;
    }

    .modal-content {
        padding: 32px 18px 24px;
        border-radius: 16px;
    }

    .auth-modal {
        padding: 32px 18px 24px;
    }

    .summary-plan-row {
        flex-direction: column;
    }

    .summary-price-stack {
        text-align: left;
    }
}

/* CAROUSEL */
.carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 600px;
    background: #f5f5f5;
}

.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
    border-radius: 20px;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 51, 97, 0.7);
    color: white;
    border: none;
    padding: 12px 16px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    z-index: 10;
}

.carousel-btn:hover {
    background: rgba(26, 51, 97, 0.9);
}

.carousel-btn.prev {
    left: 20px;
}

.carousel-btn.next {
    right: 20px;
}

.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(26, 51, 97, 0.5);
    padding: 0;
    appearance: none;
}

.dot.active {
    background: var(--orange);
    border-color: var(--orange);
    transform: scale(1.2);
}

.dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .carousel-container {
        height: 400px;
    }
    
    .carousel-btn {
        padding: 8px 12px;
        font-size: 18px;
    }
    
    .carousel-btn.prev {
        left: 10px;
    }
    
    .carousel-btn.next {
        right: 10px;
    }
}


/* ── Contact Sales (Enterprise) geri bildirimi — V2 ── */
.contact-feedback { border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; line-height: 1.45; }
.contact-feedback--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.contact-feedback--error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.contact-feedback a { color: inherit; font-weight: 600; text-decoration: underline; }
.contact-direct-line { margin: 12px 0 0; font-size: 13px; color: #64748b; text-align: center; }
.contact-direct-line a { color: #4f46e5; font-weight: 600; text-decoration: none; }
.contact-direct-line a:hover { text-decoration: underline; }

/* ── Plan kartı: backend limitleri (plan_limits) — V2 ── */
.plan-limits-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.plan-limit-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.10); color: #3730a3; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pricing-card.popular .plan-limit-chip { background: rgba(255,255,255,0.18); color: #fff; }

/* Product detail modal (opened from the Products menu) */
.product-modal .modal-content {
    width: min(100%, 1200px);
    max-width: 1200px;
    padding: 40px 32px;
}

.product-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 140px;
    margin-bottom: 24px;
}

.product-modal-header .modal-title,
.product-modal-header .modal-subtitle {
    margin: 0;
    text-align: left;
}

.product-modal-header .modal-subtitle {
    margin-top: 4px;
}

.product-modal-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #ffffff;
    font-size: 22px;
}

.product-modal-header .badge {
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}

.product-modal .pms-section {
    border-radius: 16px;
    padding: 48px 0;
}

.product-detail-coming {
    padding: 40px 24px;
    border: 2px dashed #e0e0e0;
    border-radius: 16px;
    text-align: center;
}

.product-detail-coming > p:first-child {
    color: var(--primary-pink);
    font-size: 20px;
    font-weight: 600;
}

.product-detail-coming .coming-soon-note {
    margin: 12px 0 24px;
    color: #6B7280;
    font-size: 14px;
}

.product-packages {
    margin-top: 32px;
}

.product-packages .container {
    padding: 0;
}

@media (max-width: 768px) {
    .product-modal .modal-content {
        padding: 48px 16px 24px;
    }

    .product-modal-header {
        flex-wrap: wrap;
        padding-right: 0;
    }

    .product-modal-header .badge {
        position: static;
        transform: none;
    }

    .product-modal .pms-section {
        padding: 32px 0;
    }
}

/* =====================================================================
   KOÇ DIGITAL STYLE LAYER
   Dark ink surfaces, Hanken Grotesk, pill buttons and alternating light /
   dark bands. Brand colors (--primary-pink, --blue, turquoise) are kept;
   only the black/ink tones below are new. Delete this block to revert.
   ===================================================================== */
:root {
    --ink: #09090b;
    --ink-900: #1e1f2b;
    --ink-800: #2a2b38;
    --ink-line: rgba(255, 255, 255, 0.08);
    --ink-text-muted: #a1a1aa;
    --band-gray: #f3f3f3;
    --accent-turquoise: #00a2fb;
    --grid-lines:
        linear-gradient(var(--ink-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
}

body,
button,
input,
select,
textarea,
.partners-marquee-title,
.marquee-item,
.sectors-heading,
.sectors-list li,
.video-play-btn,
.form-group textarea {
    font-family: 'Inter', 'Inter', sans-serif;
}

body {
    color: var(--ink);
}

.section-title {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Buttons: pill shape */
.btn,
.btn-large {
    border-radius: 999px;
}

.btn-primary {
    background-color: var(--ink);
    box-shadow: none;
}

.btn-primary:hover {
    background-color: var(--primary-pink);
}

/* Navbar: dark ink bar */
.navbar {
    background-color: var(--ink-900);
    border-bottom: 1px solid var(--ink-line);
    box-shadow: none;
}

.nav-menu a,
.nav-dropdown-toggle {
    color: #ffffff;
    font-weight: 600;
}

.nav-menu a:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown.is-open .nav-dropdown-toggle {
    color: var(--accent-turquoise);
}

.language-selector {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.lang-btn {
    color: rgba(255, 255, 255, 0.7);
}

.lang-btn:hover {
    background: var(--ink-800);
    color: #ffffff;
}

.lang-btn.active {
    background: #ffffff;
    color: var(--ink);
}

.navbar .btn-outline {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.navbar .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
    color: #ffffff;
}

.navbar .btn-primary {
    background-color: var(--orange);
    color: #ffffff;
}

.navbar .btn-primary:hover {
    background-color: var(--accent-turquoise);
    color: var(--ink);
}

/* Products dropdown on the dark bar */
.products-menu {
    background: var(--ink-900);
    border-color: var(--ink-line);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.products-menu-header {
    border-bottom-color: var(--ink-line);
}

.products-menu-header strong,
.nav-menu .products-menu-item,
.products-menu-item {
    color: #ffffff;
}

.products-menu-header p,
.products-menu-text small,
.products-menu-note {
    color: var(--ink-text-muted);
}

.products-menu-item:hover {
    background: var(--ink-800);
    border-color: var(--ink-line);
}

.products-menu-item.coming-soon > i {
    background: var(--ink-800);
    color: var(--accent-turquoise);
}

.nav-menu .products-menu-note a {
    color: var(--accent-turquoise);
}

/* Hero: dark with grid lines */
.hero {
    background-color: var(--ink-900);
    background-image:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 162, 251, 0.12), transparent 70%),
        var(--grid-lines);
    background-size: auto, 100px 100px, 100px 100px;
}

.hero-pretitle,
.hero-subtitle,
.hero-highlight {
    color: #ffffff;
}

.hero-pretitle {
    font-weight: 600;
}

.hero-main-title {
    background-image: linear-gradient(135deg, #ffffff 0%, #00a2fb 50%, var(--accent-turquoise) 100%);
}

.hero-title {
    color: var(--accent-turquoise);
}

.mvp-highlight {
    background-image: linear-gradient(135deg, #00a2fb, var(--accent-turquoise));
}

.hero-explanation p {
    color: var(--ink-text-muted);
}

/* Light gray band */
.roket-products,
.sectors-section,
.how-it-works {
    background: var(--band-gray);
}

.about-section,
.what-we-solve,
.partners-marquee-section,
.product-preview,
.pricing {
    background: #ffffff;
}

/* What we solve: dark rounded panel */
.solution-list {
    background: var(--ink-900);
    border-radius: 16px;
    padding: 40px 48px;
    gap: 8px;
}

.solution-item h4 {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

.solution-item p {
    color: var(--ink-text-muted);
}

/* Core features: dark band */
.features {
    background-color: var(--ink);
}

.features .section-title,
.feature-content h3 {
    color: #ffffff;
}

.feature-content p {
    color: var(--ink-text-muted);
}

.feature-card {
    border-left-color: var(--accent-turquoise);
}

.feature-card:hover {
    background: var(--ink-900);
}

.feature-number,
.feature-card:hover .feature-number {
    background: var(--ink-800);
    border-color: var(--ink-line);
    color: var(--accent-turquoise);
}

/* How it works: dark cards on gray */
.step {
    background: var(--ink-900);
    border-color: var(--ink-line);
    border-radius: 16px;
}

.step h3 {
    color: #ffffff;
}

.step p {
    color: var(--ink-text-muted);
}

.step-number {
    background: var(--accent-turquoise);
    color: var(--ink);
}

/* Cards: Koç-style 16px radius */
.pricing-card,
.pms-card,
.product-card {
    border-radius: 16px;
}

/* CTA: black with grid lines, stars kept */
.cta {
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse 70% 80% at 85% 100%, rgba(40, 84, 168, 0.45), transparent 70%),
        var(--grid-lines);
    background-size: auto, 100px 100px, 100px 100px;
}

/* Footer: ink with a turquoise top line */
.footer {
    background-color: var(--ink-900);
    border-top: 2px solid var(--accent-turquoise);
}

/* Mobile navigation on the dark bar */
@media (max-width: 768px) {
    .mobile-nav-toggle {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.3);
        color: #ffffff;
    }

    .mobile-nav-drawer {
        background: var(--ink-900);
        border-color: var(--ink-line);
    }

    .mobile-nav-links {
        border-bottom-color: var(--ink-line);
    }

    .mobile-nav-links a,
    .mobile-products summary,
    .mobile-products-list button {
        color: #ffffff;
    }

    .mobile-products-list {
        background: var(--ink-800);
    }

    .solution-list {
        padding: 24px 20px;
    }
}

/* Sections moved into the PMS product window */
.product-modal .product-detail > section {
    border-radius: 16px;
    padding: 56px 0;
    overflow: hidden;
}

.product-modal .product-detail > section + section {
    margin-top: 16px;
}

@media (max-width: 768px) {
    .product-modal .product-detail > section {
        padding: 36px 0;
    }
}

/* =====================================================================
   CORPORATE LAYOUT
   Split hero with product visual and facts strip, section eyebrows,
   transformation approach, contact CTA and multi-column footer.
   ===================================================================== */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--accent-turquoise);
}

.section-title .accent {
    color: var(--blue);
}

/* Center the eyebrow above centered titles */
.about-section .container,
.what-we-solve .container {
    text-align: center;
}

.what-we-solve .solution-list {
    text-align: left;
}

.what-we-solve + .approach-section {
    padding-top: 0;
}

.cta .section-title {
    line-height: 1.25;
}

.partners-marquee-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero */
.hero.hero-corporate {
    padding: 96px 0 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.hero-corporate .hero-content {
    text-align: left;
    max-width: none;
    margin: 0;
}

.hero-corporate .section-eyebrow {
    color: var(--accent-turquoise);
}

.hero-corporate .hero-pretitle {
    font-size: 48px;
    line-height: 1.12;
    margin: 0 0 16px;
    max-width: none;
}

.hero-corporate .hero-title-wrapper {
    display: block;
    text-align: left;
}

.hero-corporate .hero-main-title {
    font-size: 52px;
    margin-bottom: 16px;
    padding-left: 0;
}

.hero-corporate .hero-title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 16px;
}

.hero-corporate .hero-subtitle {
    color: var(--ink-text-muted);
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-ghost-light {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn-ghost-light:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.hero-corporate .btn-primary,
.cta .btn-primary {
    background-color: var(--orange);
    color: #ffffff;
    border: 0;
}

.hero-corporate .btn-primary:hover,
.cta .btn-primary:hover {
    background-color: var(--accent-turquoise);
    color: var(--ink);
}

.browser-frame {
    border-radius: 14px;
    overflow: hidden;
    background: var(--ink-800);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.03);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
}

.browser-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3f3f46;
}

.browser-bar em {
    margin-left: 12px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--ink-800);
    color: var(--ink-text-muted);
    font-size: 11px;
    font-style: normal;
}

.browser-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    background: var(--ink-800);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 72px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink-line);
}

.hero-stats li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px 36px;
    border-left: 1px solid var(--ink-line);
    color: var(--ink-text-muted);
    font-size: 14px;
}

.hero-stats li:first-child {
    border-left: 0;
    padding-left: 0;
}

.hero-stats strong {
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

/* About: two-column corporate intro */
.about-section .about-content {
    text-align: left;
    max-width: 960px;
    columns: 2;
    column-gap: 56px;
}

.about-section .about-content p {
    font-size: 16px;
    break-inside: avoid;
}

.about-section .about-content p:last-child {
    column-span: all;
    margin-top: 16px;
    padding: 20px 24px;
    border-left: 3px solid var(--accent-turquoise);
    background: var(--band-gray);
    border-radius: 0 12px 12px 0;
    color: var(--ink);
}

/* Transformation approach */
.approach-section {
    padding: 100px 0;
    background: #ffffff;
}

.approach-header {
    max-width: 760px;
    margin-bottom: 48px;
}

.approach-header .section-title {
    text-align: left;
    margin-bottom: 16px;
}

.approach-lead {
    color: var(--medium-gray);
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.approach-card {
    position: relative;
    padding: 32px 24px;
    border-radius: 16px;
    background: var(--ink-900);
    color: #ffffff;
    overflow: hidden;
    transition: transform 0.25s ease;
}

.approach-card:hover {
    transform: translateY(-4px);
}

.approach-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--accent-turquoise));
}

.approach-index {
    position: absolute;
    top: 20px;
    right: 24px;
    color: rgba(255, 255, 255, 0.12);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

.approach-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: var(--ink-800);
    color: var(--accent-turquoise);
    font-size: 20px;
}

.approach-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
}

.approach-card p {
    margin: 0;
    color: var(--ink-text-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* Contact CTA */
.cta {
    text-align: left;
}

.cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.cta .section-eyebrow {
    color: var(--accent-turquoise);
}

.cta .section-title {
    text-align: left;
    margin-bottom: 16px;
    font-size: 36px;
}

.cta-lead {
    margin: 0;
    color: var(--ink-text-muted);
    font-size: 17px;
    line-height: 1.7;
}

.cta-lead .mvp-highlight {
    -webkit-text-fill-color: currentColor;
    color: var(--accent-turquoise);
}

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cta .cta-actions .btn {
    width: 100%;
}

.cta .btn-ghost-light {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.cta-contact-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
}

.cta-contact-line i {
    color: var(--accent-turquoise);
}

.cta-contact-line:first-of-type {
    margin-top: 8px;
}

/* Footer */
.footer {
    padding: 72px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--ink-line);
}

.footer-brand-logo {
    height: 64px;
    width: auto;
    margin-bottom: 20px;
}

.footer-brand p {
    max-width: 360px;
    color: var(--ink-text-muted);
    font-size: 14px;
    line-height: 1.7;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
    background: var(--accent-turquoise);
    border-color: var(--accent-turquoise);
    color: var(--ink);
}

.footer-grid .footer-column h4 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.footer-grid .footer-column a,
.footer-grid .footer-column p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--ink-text-muted);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}

.footer-grid .footer-column a:hover {
    color: #ffffff;
}

.footer-contact i {
    margin-top: 3px;
    color: var(--accent-turquoise);
}

.footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 0;
}

.footer .footer-bottom p {
    margin: 0;
    color: var(--ink-text-muted);
    font-size: 13px;
}

.footer-legal {
    display: flex;
    gap: 24px;
}

.footer-legal a {
    color: var(--ink-text-muted);
    font-size: 13px;
    text-decoration: none;
}

.footer-legal a:hover {
    color: #ffffff;
}

@media (max-width: 1024px) {
    .hero-grid,
    .cta-grid {
        grid-template-columns: 1fr;
    }

    .approach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .hero.hero-corporate {
        padding-top: 56px;
    }

    .hero-corporate .hero-pretitle {
        font-size: 32px;
    }

    .hero-corporate .hero-main-title {
        font-size: 34px;
    }

    .hero-corporate .hero-title {
        font-size: 18px;
    }

    .hero-actions .btn {
        flex: 1 1 100%;
    }

    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 48px;
    }

    .hero-stats li,
    .hero-stats li:first-child {
        padding: 20px 16px;
        border-left: 0;
        border-bottom: 1px solid var(--ink-line);
    }

    .hero-stats strong {
        font-size: 26px;
    }

    .about-section .about-content {
        columns: 1;
    }

    .approach-section {
        padding: 64px 0;
    }

    .approach-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .cta .section-title {
        font-size: 28px;
    }

    .footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Products & Solutions mega menu */
.products-menu {
    width: min(1080px, calc(100vw - 32px));
}

.products-menu-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
}

.products-menu-label {
    display: block;
    margin: 0 0 10px 14px;
    color: var(--accent-turquoise);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.solutions-menu-col {
    padding-left: 24px;
    border-left: 1px solid var(--ink-line);
}

.nav-menu .solutions-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
    white-space: normal;
    transition: background 0.2s ease;
}

.nav-menu .solutions-menu-item:hover {
    background: var(--ink-800);
    color: #ffffff;
}

.solutions-menu-item i {
    flex-shrink: 0;
    width: 18px;
    color: var(--accent-turquoise);
    text-align: center;
}

.nav-menu .solutions-menu-all {
    display: inline-block;
    margin: 10px 0 0 14px;
    color: var(--accent-turquoise);
    font-size: 13px;
    font-weight: 600;
}

.mobile-products-label {
    display: block;
    margin: 12px 0 6px 8px;
    color: var(--accent-turquoise);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .products-menu-body {
        grid-template-columns: 1fr;
    }

    .solutions-menu-col {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--ink-line);
        padding-top: 16px;
    }
}

/* Demo card used where products have no video yet (same slot as the PMS video) */
.product-demo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 320px;
    padding: 48px 24px;
    border-radius: 16px;
    background-color: var(--ink-900);
    background-image: var(--grid-lines);
    background-size: 60px 60px;
    color: #ffffff;
    text-align: center;
}

.product-demo-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--blue), var(--accent-turquoise));
    font-size: 30px;
}

.product-demo-card h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.product-demo-card p {
    max-width: 440px;
    margin: 0 0 8px;
    color: var(--ink-text-muted);
}

.product-demo-card .btn-primary {
    background-color: var(--orange);
}

.product-demo-card .btn-primary:hover {
    background-color: var(--accent-turquoise);
    color: var(--ink);
}

/* Koç Digital style mega menu: full-width dark panel, column headings with arrow */
.products-menu.mega-menu {
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    transform: none;
    padding: 36px 0 24px;
    border-radius: 0 0 20px 20px;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--ink-line);
    animation: megaMenuIn 0.2s ease;
}

@keyframes megaMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.mega-menu-inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

.mega-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu .mega-col-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 18px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    background: none;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}

.mega-col-title i {
    margin-top: 3px;
    font-size: 15px;
    transition: transform 0.2s ease;
}

.nav-menu .mega-col-title:hover {
    color: var(--accent-turquoise);
    border-bottom-color: var(--accent-turquoise);
}

.mega-col-title:hover i {
    transform: translateX(4px);
}

.nav-menu .mega-link {
    display: block;
    width: 100%;
    padding: 7px 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: color 0.2s ease;
}

.nav-menu .mega-link:hover {
    color: #ffffff;
}

.mega-soon {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid rgba(0, 162, 251, 0.4);
    border-radius: 999px;
    color: var(--accent-turquoise);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    vertical-align: 1px;
}

.mega-menu .products-menu-note {
    max-width: 1400px;
    margin: 28px auto 0;
    padding: 18px 32px 0;
    border-top: 1px solid var(--ink-line);
    text-align: left;
}

/* Active toggle: turquoise text and underline, as on the reference */
.nav-dropdown-toggle {
    position: relative;
}

.nav-dropdown.is-open .nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: var(--accent-turquoise);
}

@media (max-width: 1200px) {
    .mega-menu-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 32px;
    }
}

@media (max-width: 968px) {
    .mega-menu-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Module name + short description in the Products & Solutions menu */
.nav-menu .mega-product {
    padding: 8px 0;
}

.mega-link-name {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.mega-link-desc {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
}

.nav-menu .mega-product:hover .mega-link-name {
    color: var(--accent-turquoise);
}

.nav-menu .mega-product:hover .mega-link-desc {
    color: rgba(255, 255, 255, 0.85);
}

.mobile-product-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mobile-product-text small {
    color: var(--ink-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .mobile-nav-links .mobile-products-list a {
        color: #ffffff;
    }
}

/* =====================================================================
   DIGITAL TRANSFORMATION PRODUCT PAGES
   Listing page (#/dijital-donusum-urunleri) and one page per product.
   ===================================================================== */
.site-view[hidden] {
    display: none;
}

/* Anchored sections stop below the sticky navbar */
.site-view [id] {
    scroll-margin-top: 100px;
}

/* Page hero shared by the listing and product pages */
.page-hero {
    padding: 72px 0 80px;
    background-color: var(--ink-900);
    background-image:
        radial-gradient(ellipse 60% 70% at 85% 0%, rgba(0, 162, 251, 0.14), transparent 70%),
        var(--grid-lines);
    background-size: auto, 100px 100px, 100px 100px;
    color: #ffffff;
}

.page-hero .section-eyebrow {
    color: var(--accent-turquoise);
}

.page-hero h1 {
    margin: 0 0 20px;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.page-hero h1::after {
    content: "";
    display: block;
    width: 96px;
    height: 3px;
    margin-top: 24px;
    background: var(--accent-turquoise);
}

.page-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--ink-text-muted);
    font-size: 19px;
    line-height: 1.6;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    color: var(--ink-text-muted);
    font-size: 13px;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--accent-turquoise);
}

.breadcrumb > span:last-child {
    color: #ffffff;
}

/* Listing rows */
.dx-products {
    padding: 40px 0 100px;
    background: #ffffff;
}

.dx-product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid #e5e7eb;
}

.dx-product-row.is-reversed .dx-product-visual {
    order: 2;
}

.dx-product-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--ink-900);
    background-image:
        radial-gradient(circle at 70% 20%, rgba(0, 162, 251, 0.22), transparent 55%),
        radial-gradient(circle at 20% 90%, rgba(40, 84, 168, 0.35), transparent 60%),
        var(--grid-lines);
    background-size: auto, auto, 56px 56px, 56px 56px;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.dx-product-visual:hover {
    transform: translateY(-4px);
}

.dx-product-visual i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--blue), var(--accent-turquoise));
    font-size: 36px;
    box-shadow: 0 20px 40px rgba(0, 162, 251, 0.25);
}

.dx-product-visual span {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dx-product-text .badge {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
}

.dx-product-text h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 34px;
    font-weight: 600;
}

.dx-product-text h3 {
    margin: 0 0 16px;
    color: var(--blue);
    font-size: 18px;
    font-weight: 500;
}

.dx-product-text p {
    margin: 0 0 20px;
    color: var(--medium-gray);
    font-size: 16px;
    line-height: 1.7;
}

.dx-product-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.dx-product-link i {
    transition: transform 0.2s ease;
}

.dx-product-link:hover i {
    transform: translateX(4px);
}

.roket-products-cta {
    margin-top: 24px;
}

/* Product page hero */
.product-hero-grid {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.product-hero-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--blue), var(--accent-turquoise));
    color: #ffffff;
    font-size: 40px;
}

.product-hero-text .badge {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
}

.product-hero h1::after {
    display: none;
}

.product-hero h1 {
    margin-bottom: 10px;
}

.product-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.product-hero .btn-primary {
    background-color: var(--orange);
    color: #ffffff;
}

.product-hero .btn-primary:hover {
    background-color: var(--accent-turquoise);
    color: var(--ink);
}

.product-view .product-detail-coming {
    max-width: 1200px;
    margin: 56px auto;
}

.product-view .product-packages {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Other products */
.other-products {
    padding: 80px 0;
    background: var(--band-gray);
}

.other-products .section-title {
    text-align: left;
    margin-bottom: 32px;
}

.other-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.other-product-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-radius: 16px;
    background: var(--ink-900);
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.other-product-card[hidden] {
    display: none;
}

.other-product-card:hover {
    transform: translateY(-4px);
}

.other-product-card i {
    margin-bottom: 10px;
    color: var(--accent-turquoise);
    font-size: 22px;
}

.other-product-card strong {
    font-size: 17px;
}

.other-product-card small {
    color: var(--ink-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.other-products-all {
    margin-top: 28px;
}

/* Mega menu footer link */
.mega-menu-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 1400px;
    margin: 28px auto 0;
    padding: 18px 32px 0;
    border-top: 1px solid var(--ink-line);
}

.mega-menu .mega-menu-footer .products-menu-note {
    margin: 0;
    padding: 0;
    border: 0;
}

.nav-menu .mega-all-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-turquoise);
    font-size: 14px;
    font-weight: 700;
}

.nav-menu .mega-all-link:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    .mobile-nav-links .mobile-products-list a.mobile-all-products {
        color: var(--accent-turquoise);
        font-weight: 700;
    }

    .page-hero {
        padding: 40px 0 56px;
    }

    .page-hero h1 {
        font-size: 34px;
    }

    .page-hero p {
        font-size: 16px;
    }

    .dx-product-row {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 0;
    }

    .dx-product-row.is-reversed .dx-product-visual {
        order: 0;
    }

    .dx-product-text h2 {
        font-size: 28px;
    }

    .product-hero-grid {
        flex-direction: column;
        gap: 20px;
    }

    .product-hero-icon {
        width: 72px;
        height: 72px;
        font-size: 30px;
    }

    .product-hero-actions .btn {
        flex: 1 1 100%;
    }
}

/* Button and layout display rules must not override [hidden] on the product pages */
.site-view [hidden] {
    display: none !important;
}

/* =====================================================================
   CORPORATE PRODUCT PAGES (typographic, no icon tiles)
   ===================================================================== */
/* Hero: text left, product facts right */
.product-hero .product-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 64px;
    align-items: end;
}

.product-hero h1 {
    font-size: 56px;
}

.product-hero [data-product-desc] {
    font-size: 20px;
}

.product-facts {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.product-facts > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ink-line);
}

.product-facts dt {
    color: var(--ink-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-facts dd {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
}

.product-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.product-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5a524;
}

.product-status.ready::before {
    background: var(--accent-turquoise);
}

/* Feature cards: numbered, left-aligned, no icons */
.product-view .pms-grid {
    counter-reset: feature;
}

.product-view .pms-card,
.product-view .pms-card:nth-child(n) {
    position: relative;
    align-items: flex-start;
    text-align: left;
    padding: 28px 24px 32px;
    background: #ffffff;
    border: 0;
    border-top: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}

.product-view .pms-card:hover {
    transform: none;
    box-shadow: none;
    border-top-color: var(--accent-turquoise);
}

.product-view .pms-card::before {
    counter-increment: feature;
    content: counter(feature, decimal-leading-zero);
    margin-bottom: 18px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.product-view .pms-icon {
    display: none;
}

.product-view .card-text h3 {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
}

.product-view .card-text p {
    color: var(--medium-gray);
    font-size: 14.5px;
    line-height: 1.65;
}

/* Core features (PMS page): numbers instead of icon boxes */
.product-view .feature-grid {
    counter-reset: core;
}

.product-view .feature-number,
.product-view .feature-card:hover .feature-number {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    transform: none;
    font-size: 0;
}

.product-view .feature-number i {
    display: none;
}

.product-view .feature-number::before {
    counter-increment: core;
    content: counter(core, decimal-leading-zero);
    color: var(--accent-turquoise);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.product-view .feature-card:hover {
    transform: none;
}

/* How it works: plain step numbers */
.product-view .step-number {
    width: auto;
    height: auto;
    margin: 0 0 16px;
    background: none;
    border-radius: 0;
    color: var(--accent-turquoise);
    font-size: 32px;
    font-weight: 700;
    justify-content: flex-start;
}

.product-view .step {
    text-align: left;
}

.product-view .step:hover {
    transform: none;
}

/* Version lists: no decorative star */
.product-view .feature-list li.highlight.special::before {
    content: "";
}

/* Demo slot: text band */
.product-view .product-demo-card {
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: 48px;
    text-align: left;
    background-image: none;
    border-left: 3px solid var(--accent-turquoise);
}

.product-view .product-demo-card h3 {
    font-size: 26px;
}

.product-view .product-demo-card p {
    max-width: 640px;
}

/* Listing page: numbered corporate list */
.dx-product-row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 48px 0;
}

.dx-product-index {
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding-top: 10px;
}

.dx-product-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 56px;
    align-items: start;
}

.dx-product-text .badge,
.dx-product-text h2,
.dx-product-text h3 {
    grid-column: 1;
}

.dx-product-text p,
.dx-product-text .dx-product-link {
    grid-column: 2;
}

.dx-product-text p {
    grid-row: 1 / span 3;
    margin-top: 6px;
}

.dx-product-text .dx-product-link {
    grid-row: 4;
    justify-self: start;
}

.dx-product-row:hover h2 {
    color: var(--blue);
}

/* Other products: text cards */
.other-product-card {
    gap: 8px;
    min-height: 168px;
    border-top: 2px solid var(--accent-turquoise);
    border-radius: 0 0 12px 12px;
}

.other-product-more {
    margin-top: auto;
    padding-top: 12px;
    color: var(--accent-turquoise);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 968px) {
    .product-hero .product-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dx-product-text {
        grid-template-columns: 1fr;
    }

    .dx-product-text p,
    .dx-product-text .dx-product-link {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    .product-hero h1 {
        font-size: 36px;
    }

    .dx-product-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 36px 0;
    }

    .product-view .product-demo-card {
        padding: 32px 24px;
    }
}

.dx-product-text .badge {
    justify-self: start;
}

/* Hero: corporate photo behind a dark overlay (photo: Unsplash, served from /images/) */
.hero.hero-corporate {
    background-color: var(--ink-900);
    background-image:
        var(--grid-lines),
        linear-gradient(90deg, rgba(14, 15, 22, 0.96) 0%, rgba(20, 21, 31, 0.86) 45%, rgba(20, 21, 31, 0.62) 100%),
        linear-gradient(180deg, rgba(14, 15, 22, 0) 55%, rgba(14, 15, 22, 0.92) 100%),
        url("/images/hero-corporate.jpg");
    background-size: 100px 100px, 100px 100px, auto, auto, cover;
    background-position: 0 0, 0 0, 0 0, 0 0, center 30%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}

@media (max-width: 768px) {
    .hero.hero-corporate {
        background-image:
            linear-gradient(180deg, rgba(14, 15, 22, 0.88) 0%, rgba(14, 15, 22, 0.94) 100%),
            url("/images/hero-corporate.jpg");
        background-size: auto, cover;
        background-position: 0 0, center;
        background-repeat: no-repeat;
    }
}

/* Hero: photo only, no grid lines */
.hero.hero-corporate {
    background-image:
        linear-gradient(90deg, rgba(14, 15, 22, 0.95) 0%, rgba(20, 21, 31, 0.84) 45%, rgba(20, 21, 31, 0.55) 100%),
        linear-gradient(180deg, rgba(14, 15, 22, 0) 55%, rgba(14, 15, 22, 0.92) 100%),
        url("/images/hero-corporate.jpg");
    background-size: auto, auto, cover;
    background-position: 0 0, 0 0, center 40%;
    background-repeat: no-repeat;
}

/* Page heroes without grid lines */
.page-hero {
    background-image: radial-gradient(ellipse 60% 70% at 85% 0%, rgba(0, 162, 251, 0.14), transparent 70%);
    background-size: auto;
}

/* Shorter hero copy */
.hero-corporate .hero-pretitle {
    max-width: 620px;
}

/* Solution center pillars (homepage) */
.center-pillars {
    padding: 88px 0;
    background: #ffffff;
}

.center-pillars-head {
    margin-bottom: 40px;
}

.center-pillars-head .section-title {
    text-align: left;
    margin-bottom: 0;
}

.center-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.center-pillar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px;
    border-top: 2px solid var(--ink);
    background: var(--band-gray);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.center-pillar:hover {
    border-top-color: var(--accent-turquoise);
    background: #ececec;
}

.center-pillar-index {
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.center-pillar h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
}

.center-pillar p {
    margin: 0;
    color: var(--medium-gray);
    font-size: 16px;
    line-height: 1.65;
}

.center-pillar-link {
    margin-top: 8px;
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
}

/* Academy page */
.academy-section {
    padding: 88px 0;
    background: #ffffff;
}

.academy-section-alt {
    background: var(--band-gray);
}

.academy-section .section-title {
    text-align: left;
    margin-bottom: 40px;
}

.academy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.academy-card,
.academy-step {
    padding: 28px 24px 32px;
    border-top: 2px solid var(--ink);
}

.academy-index {
    display: block;
    margin-bottom: 18px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.academy-card h3,
.academy-step h3 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 600;
}

.academy-card p,
.academy-step p {
    margin: 0;
    color: var(--medium-gray);
    font-size: 15px;
    line-height: 1.65;
}

.academy-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 56px;
    align-items: start;
}

.academy-skills {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #d4d4d8;
}

.academy-skills li {
    padding: 18px 0;
    border-bottom: 1px solid #d4d4d8;
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
}

.academy-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.academy-cta {
    padding: 72px 0;
    background: var(--ink-900);
    color: #ffffff;
}

.academy-cta .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.academy-cta h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

/* "Randevu Al" spotlight CTA: gradient card with soft glow accents */
.academy-cta-spotlight {
    background: transparent;
}

.academy-cta-spotlight .container {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 56px 64px;
    background: linear-gradient(135deg, #091629 0%, #1a3361 30%, #2854A8 60%, #0e6f90 80%, #0ca8c8 100%);
    box-shadow: 0 24px 60px -20px rgba(9, 22, 41, 0.55);
}

.academy-cta-spotlight .container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 15%, rgba(0, 162, 251, 0.35), transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(255, 255, 255, 0.12), transparent 50%);
}

.academy-cta-spotlight .academy-cta-copy {
    position: relative;
    z-index: 1;
}

.academy-cta-spotlight .section-eyebrow {
    position: relative;
    z-index: 1;
    color: var(--accent-turquoise);
}

.academy-cta-spotlight .academy-cta-text {
    color: rgba(255, 255, 255, 0.82);
}

.academy-cta-spotlight .btn {
    position: relative;
    z-index: 1;
}

.academy-cta-spotlight .btn-primary i {
    margin-left: 8px;
    transition: transform 0.25s ease;
}

.academy-cta-spotlight .btn-primary:hover i {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .academy-cta-spotlight .container {
        padding: 40px 28px;
        border-radius: 22px;
        text-align: center;
        flex-direction: column;
    }
}

.academy-view .btn-primary,
.academy-cta .btn-primary {
    background-color: var(--orange);
    color: #ffffff;
}

.academy-view .btn-primary:hover {
    background-color: var(--accent-turquoise);
    color: var(--ink);
}

@media (max-width: 968px) {
    .academy-grid,
    .academy-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .academy-split {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .hero.hero-corporate {
        background-image:
            linear-gradient(180deg, rgba(14, 15, 22, 0.88) 0%, rgba(14, 15, 22, 0.94) 100%),
            url("/images/hero-corporate.jpg");
        background-size: auto, cover;
        background-position: 0 0, center;
    }

    .center-pillars,
    .academy-section {
        padding: 56px 0;
    }

    .center-pillars-grid,
    .academy-grid,
    .academy-steps {
        grid-template-columns: 1fr;
    }

    .center-pillar {
        padding: 28px 24px;
    }
}

/* =====================================================================
   ELEGANT LAYER
   Site-wide: no decorative icons, no glow or gradient text, hairlines and
   numbers instead of badges and tiles, left-aligned homepage headings.
   ===================================================================== */
:root {
    --hairline: #d9d9de;
    --hairline-dark: rgba(255, 255, 255, 0.12);
}

/* ---------- Typography: solid colours instead of gradient / glow text ---------- */
.hero-main-title {
    background: none;
    color: var(--accent-turquoise);
    -webkit-text-fill-color: currentColor;
    filter: none;
    animation: none;
}

.hero-main-title::before,
.hero-main-title::after {
    display: none;
}

.highlight-text,
.mvp-highlight,
.solution-subtitle,
.partners-marquee-title,
.section-title .accent {
    background: none;
    -webkit-text-fill-color: currentColor;
}

.highlight-text,
.section-title .accent {
    color: var(--blue);
}

.partners-marquee-header::after {
    display: none;
}

/* ---------- Homepage: left-aligned section headings ---------- */
#homeView .section-title,
#homeView .sectors-heading,
#homeView .partners-marquee-title {
    text-align: left;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

#homeView .cta .section-title {
    color: #ffffff;
}

.about-section .container,
.what-we-solve .container {
    text-align: left;
}

.about-section .about-content {
    max-width: none;
    margin: 0;
    column-gap: 72px;
}

.about-section .about-content p:last-child {
    border-radius: 0;
    background: none;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--accent-turquoise);
}

/* ---------- Product ecosystem: numbered module index instead of the orbit diagram ---------- */
.roket-image {
    display: none;
}

.roket-products-content {
    display: block;
}

.roket-text {
    max-width: none;
}

.roket-intro {
    max-width: 760px;
    color: var(--ink);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
}

.roket-subtitle {
    margin-top: 24px;
    color: var(--medium-gray);
    font-weight: 400;
}

.modules-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    margin: 24px 0 8px;
    padding: 0;
    list-style: none;
    counter-reset: module;
}

.modules-list li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid var(--hairline);
    counter-increment: module;
}

.modules-list li::before {
    content: counter(module, decimal-leading-zero);
    grid-row: 1 / span 2;
    position: static;
    width: auto;
    height: auto;
    background: none;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding-top: 4px;
}

.modules-list li strong {
    grid-column: 2;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
}

.modules-list li strong * {
    color: inherit;
}

.modules-list li > span {
    grid-column: 2;
    margin-top: 4px;
    color: var(--medium-gray);
    font-size: 14.5px;
}

.roket-desc-full {
    max-width: 900px;
    margin: 32px 0 0;
    padding: 4px 0 4px 24px;
    background: none;
    border: 0;
    border-left: 2px solid var(--accent-turquoise);
    border-radius: 0;
    box-shadow: none;
}

.roket-desc-full p {
    margin: 0;
    color: var(--medium-gray);
    font-style: normal;
    text-align: left;
}

/* ---------- What we solve: numbered two-column index ---------- */
.solution-intro {
    max-width: 860px;
    margin: 0 0 56px;
    color: var(--medium-gray);
    font-size: 18px;
    font-weight: 400;
    text-align: left;
}

.solution-subtitle {
    margin-bottom: 24px;
    color: var(--ink);
    font-size: 22px;
    font-weight: 600;
    text-align: left;
}

.solution-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
    padding: 24px 48px 40px;
    border-radius: 12px;
    counter-reset: solution;
}

.solution-item,
.solution-item:hover {
    padding: 28px 0 8px;
    border-left: 0;
    border-image: none;
    border-top: 1px solid var(--hairline-dark);
    counter-increment: solution;
}

.solution-item::before {
    content: counter(solution, decimal-leading-zero);
    display: block;
    margin-bottom: 12px;
    color: var(--accent-turquoise);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.solution-item h4 {
    font-size: 18px;
    font-weight: 600;
}

/* ---------- Transformation approach: light numbered columns ---------- */
.approach-card {
    padding: 28px 0 0;
    border-radius: 0;
    background: none;
    border-top: 2px solid var(--ink);
    color: var(--ink);
}

.approach-card:hover {
    transform: none;
    border-top-color: var(--accent-turquoise);
}

.approach-card::after,
.approach-card > i {
    display: none;
}

.approach-index {
    position: static;
    display: block;
    margin-bottom: 18px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.approach-card h3 {
    color: var(--ink);
}

.approach-card p {
    color: var(--medium-gray);
    font-size: 15px;
}

.approach-grid {
    gap: 40px;
}

/* ---------- Sectors: typographic list instead of the icon tile grid ---------- */
.sectors-grid {
    display: none;
}

.sectors-content {
    display: block;
}

.sectors-heading {
    margin-bottom: 32px;
}

.sectors-list {
    columns: 3;
    column-gap: 56px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hairline);
}

.sectors-list li {
    break-inside: avoid;
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    list-style: none;
}

.sectors-list li::before,
.sectors-list li::marker {
    content: none;
}

/* ---------- Partners: quiet text marquee ---------- */
.partners-marquee-header {
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.marquee-item {
    position: relative;
    padding: 6px 32px 6px 0;
    margin-right: 28px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    font-size: 18px;
    font-weight: 500;
}

.marquee-item:hover {
    transform: none;
    background: none;
    box-shadow: none;
}

.marquee-item i {
    display: none;
}

.marquee-item span {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
}

.marquee-item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--accent-turquoise);
}

/* ---------- Contact band and footer: text only ---------- */
.cta-contact-line i,
.footer-contact i {
    display: none;
}

.cta-contact-line {
    font-size: 16px;
}

/* ---------- Product pages: neutral version lists ---------- */
.version-column,
.version-1,
.version-2 {
    background: #ffffff;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: none;
}

.version-column h3 {
    color: var(--ink);
    font-weight: 600;
}

.version-column h4 {
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.feature-list li,
.feature-list li:hover,
.feature-list li.highlight,
.feature-list li.highlight.special {
    margin: 0;
    padding: 14px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid #ececf0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    color: var(--ink);
    font-weight: 400;
}

.feature-list li::before,
.feature-list li.highlight.special::before {
    content: none;
}

.feature-list li.highlight,
.feature-list li.highlight.special {
    color: var(--blue);
    font-weight: 600;
}

/* ---------- Pricing: neutral cards ---------- */
.pricing-card,
.pricing-card.popular,
.pricing-card.enterprise-card {
    background: #ffffff;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: none;
}

.pricing-card:hover,
.pricing-card.popular:hover,
.pricing-card.enterprise-card:hover {
    transform: none;
    border-color: var(--ink);
    box-shadow: 0 16px 40px rgba(9, 9, 11, 0.06);
}

.pricing-card.popular {
    border: 1.5px solid var(--ink);
}

.popular-tag {
    background: var(--ink);
    color: #ffffff;
    border-radius: 999px;
    box-shadow: none;
}

.trial-chip,
.enterprise-chip {
    background: none;
    color: var(--blue);
    border: 1px solid var(--hairline);
    box-shadow: none;
}

.price-card-block,
.enterprise-price-block {
    background: #fafafa;
    border: 1px solid #ececf0;
    box-shadow: none;
}

.enterprise-price-block .price,
.price-custom {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
}

.enterprise-trust-signals {
    background: none;
    border: 0;
    border-top: 1px solid #ececf0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.enterprise-trust-item {
    color: var(--ink);
}

.plan-limit-chip,
.pricing-card.popular .plan-limit-chip {
    background: #f4f4f5;
    color: var(--ink);
}

.annual-save-badge {
    background: none;
    border: 1px solid var(--hairline);
    color: var(--ink);
}

.btn-gradient,
.btn-white,
.btn-enterprise {
    background: var(--ink);
    color: #ffffff;
    border: 0;
    box-shadow: none;
}

.btn-gradient:hover,
.btn-white:hover,
.btn-enterprise:hover {
    background: var(--blue);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 968px) {
    .modules-list,
    .solution-list {
        grid-template-columns: 1fr;
    }

    .sectors-list {
        columns: 2;
    }
}

@media (max-width: 768px) {
    .solution-list {
        padding: 8px 24px 24px;
    }

    .sectors-list {
        columns: 1;
    }

    .roket-intro {
        font-size: 18px;
    }
}

/* Elegant layer: overrides for the more specific .roket-text rules */
.roket-products .roket-text {
    width: 100%;
    max-width: none;
    padding: 0;
}

.roket-products .roket-text .roket-intro {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--ink);
    font-size: 22px;
    font-weight: 500;
    text-align: left;
}

.roket-products .roket-text .roket-subtitle {
    color: var(--medium-gray);
    font-weight: 400;
}

.roket-products .roket-text .modules-list {
    margin: 24px 0 8px;
}

.roket-products .roket-text .modules-list li {
    position: static;
    margin: 0;
    padding: 20px 0;
    color: inherit;
    font-size: inherit;
    line-height: 1.5;
}

.roket-products .roket-text .modules-list li::before {
    content: counter(module, decimal-leading-zero);
    position: static;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--blue);
    font-size: 13px;
}

.roket-products .roket-text .modules-list li strong {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ink);
}

/* Contact band: no grid lines or twinkling stars */
.cta {
    background-image: radial-gradient(ellipse 70% 80% at 85% 100%, rgba(40, 84, 168, 0.35), transparent 70%);
    background-size: auto;
}

.cta::after {
    display: none;
}

@media (max-width: 968px) {
    .roket-products .roket-text .roket-intro {
        font-size: 18px;
    }
}

/* =====================================================================
   NAVIGATION v2: Çözümler · Ürünler · Akademi (mega) + Sektörler · Kurumsal
   ===================================================================== */
.nav-logo {
    text-decoration: none;
}

/* Text wordmark shown only when the logo image cannot be loaded */
.nav-wordmark {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.24em;
}

.footer-wordmark {
    display: inline-block;
    margin-bottom: 20px;
}

.nav-menu {
    gap: 26px;
}

/* Mega menu layouts */
.mega-solutions .mega-menu-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(260px, 0.95fr);
}

.mega-products .mega-menu-inner {
    grid-template-columns: minmax(320px, 1.4fr) repeat(2, minmax(0, 1fr));
}

.mega-academy .mega-menu-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav-menu .mega-col-title.is-static {
    cursor: default;
}

.nav-menu .mega-col-title.is-static:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.mega-col-note {
    color: var(--accent-turquoise);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Featured card (solutions) and platform card (products) */
.mega-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px;
    border-radius: 12px;
    background: var(--ink-800);
    border: 1px solid var(--ink-line);
}

.mega-feature-eyebrow {
    color: var(--accent-turquoise);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mega-feature strong {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.mega-feature p {
    margin: 0;
    color: var(--ink-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.mega-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-turquoise);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mega-feature-cta:hover {
    color: #ffffff;
}

.mega-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.nav-menu .mega-card-actions .btn {
    min-height: 0;
    padding: 9px 16px;
    font-size: 13px;
}

.mega-card-links {
    display: flex;
    gap: 20px;
    margin-top: 4px;
}

.nav-menu .mega-card-links a {
    color: var(--ink-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.nav-menu .mega-card-links a:hover {
    color: #ffffff;
}

/* Menu footer strip */
.mega-journey {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    color: var(--ink-text-muted);
    font-size: 13px;
}

.mega-journey-step {
    color: #ffffff;
    font-weight: 600;
}

.nav-menu .mega-infra-link {
    color: var(--ink-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.nav-menu .mega-infra-link:hover {
    color: var(--accent-turquoise);
}

/* Simple dropdowns (Sectors, Company) */
.nav-dropdown-simple {
    position: relative;
}

.products-menu.simple-menu {
    top: calc(100% + 33px);
    left: -20px;
    right: auto;
    width: auto;
    min-width: 280px;
    padding: 12px 0;
    transform: none;
    border-radius: 0 0 12px 12px;
    animation: megaMenuIn 0.2s ease;
}

.simple-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu .simple-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.nav-menu .simple-link:hover {
    background: var(--ink-800);
    color: #ffffff;
}

.nav-menu .simple-link.is-disabled,
.nav-menu .simple-link.is-disabled:hover {
    background: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}

.simple-link em {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-style: normal;
}

/* Single CTA in the bar */
.nav-buttons .btn-primary {
    padding: 11px 22px;
}

/* Mobile drawer */
.mobile-disabled {
    display: block;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

/* Solutions page */
.solutions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journey-band {
    padding: 72px 0;
    background: var(--ink);
    color: #ffffff;
}

.journey-band .section-eyebrow {
    color: var(--accent-turquoise);
}

.journey-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.journey-steps li {
    padding-top: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.journey-steps li:hover {
    border-top-color: var(--accent-turquoise);
}

.journey-steps strong {
    display: block;
    font-size: 24px;
    font-weight: 600;
}

.journey-steps .academy-index {
    color: var(--accent-turquoise);
}

.academy-cta-text {
    margin: 8px 0 0;
    color: var(--ink-text-muted);
    font-size: 16px;
}

/* Academy page: programmes by audience */
.academy-audiences {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.academy-audience h3 {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    font-size: 20px;
    font-weight: 600;
}

.academy-audience ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.academy-audience li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline);
}

.academy-audience strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
}

.academy-audience li > span {
    color: var(--medium-gray);
    font-size: 14.5px;
    line-height: 1.55;
}

.academy-infra-link {
    margin-top: 32px;
}

@media (max-width: 1200px) {
    .mega-solutions .mega-menu-inner,
    .mega-products .mega-menu-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-menu {
        gap: 18px;
    }
}

@media (max-width: 968px) {
    /* The nav row scrolls horizontally here, so anchor simple menus to the bar */
    .nav-dropdown-simple {
        position: static;
    }

    .products-menu.simple-menu {
        top: 100%;
        left: auto;
        right: 16px;
    }

    .solutions-grid,
    .journey-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .academy-audiences {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .solutions-grid,
    .journey-steps {
        grid-template-columns: 1fr;
    }
}

.solutions-view .btn-primary {
    background-color: var(--orange);
    color: #ffffff;
}

.solutions-view .btn-primary:hover {
    background-color: var(--accent-turquoise);
    color: var(--ink);
}

/* =====================================================================
   DIGITAL MATURITY ASSESSMENT FORM
   ===================================================================== */
.maturity-modal .modal-content {
    width: min(100%, 860px);
    max-width: 860px;
}

.maturity-modal .section-eyebrow {
    margin-bottom: 10px;
}

.maturity-modal .modal-title,
.maturity-modal .modal-subtitle {
    text-align: left;
}

.maturity-step {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
}

.maturity-step h3 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
}

.maturity-step-index {
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.maturity-question {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.maturity-question legend {
    margin-bottom: 10px;
    padding: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
}

.maturity-hint {
    margin: -8px 0 12px;
    color: var(--medium-gray);
    font-size: 13px;
}

.choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice {
    position: relative;
    cursor: pointer;
}

.choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice > span {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.3;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.choice:hover > span {
    border-color: var(--ink);
}

.choice input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
}

.choice input:focus-visible + span {
    outline: 2px solid var(--accent-turquoise);
    outline-offset: 2px;
}

.maturity-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    color: var(--medium-gray);
    font-size: 13.5px;
    line-height: 1.5;
    cursor: pointer;
}

.maturity-consent input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--ink);
}

.maturity-consent a {
    color: var(--blue);
}

.maturity-form .contact-feedback {
    margin-top: 20px;
}

.maturity-form .btn-contact {
    margin-top: 24px;
    background: var(--ink);
}

.maturity-form .btn-contact:hover {
    background: var(--blue);
}

/* Solution card call to action */
.card-cta {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.card-cta:hover {
    color: var(--ink);
}

@media (max-width: 768px) {
    .choice > span {
        font-size: 13px;
    }
}

/* Form steps are <section>s: cancel the site-wide section padding */
.maturity-form .maturity-step {
    padding: 24px 0 0;
    margin: 28px 0 0;
}

.maturity-form .form-row {
    margin-bottom: 14px;
}

/* =====================================================================
   HERO v3: company-level statement + "What we do" glass panel
   ===================================================================== */
.hero.hero-corporate {
    padding-top: 112px;
}

.hero-corporate .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
    gap: 72px;
    align-items: center;
}

.hero-corporate .hero-pretitle {
    max-width: 680px;
    margin: 0 0 28px;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

/* Sabancı DX style accent line under the headline */
.hero-corporate .hero-pretitle::after {
    content: "";
    display: block;
    width: 96px;
    height: 3px;
    margin-top: 28px;
    background: var(--accent-turquoise);
}

.hero-corporate .hero-subtitle {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1.7;
}

/* What we do panel */
.hero-panel {
    padding: 28px 32px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(14, 15, 22, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hero-panel-label {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-turquoise);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-panel-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
}

.hero-panel-index {
    color: var(--accent-turquoise);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hero-panel-text strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.hero-panel-text small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13.5px;
    line-height: 1.45;
}

.hero-panel-item i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.hero-panel-item:hover strong {
    color: var(--accent-turquoise);
}

.hero-panel-item:hover i {
    color: var(--accent-turquoise);
    transform: translateX(4px);
}

.hero-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-turquoise);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.hero-panel-cta:hover {
    color: #ffffff;
}

/* Facts strip */
.hero-corporate .hero-stats {
    margin-top: 88px;
}

@media (max-width: 1024px) {
    .hero-corporate .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 768px) {
    .hero.hero-corporate {
        padding-top: 56px;
    }

    .hero-corporate .hero-pretitle {
        font-size: 32px;
    }

    .hero-corporate .hero-pretitle::after {
        margin-top: 20px;
    }

    .hero-corporate .hero-subtitle {
        font-size: 16px;
    }

    .hero-panel {
        padding: 20px 20px 16px;
    }

    .hero-corporate .hero-stats {
        margin-top: 48px;
    }
}

/* =====================================================================
   HERO BACKGROUND v4: earth at night + brand light, slow drift
   Photo layer and light layer are pseudo elements so they can move
   independently of the content.
   ===================================================================== */
.hero.hero-corporate {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #05070d;
}

.hero.hero-corporate::before {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: -2;
    background: url("/images/hero-corporate.jpg") center 70% / cover no-repeat;
    filter: saturate(1.15) contrast(1.05);
    animation: heroDrift 40s ease-in-out infinite alternate;
}

.hero.hero-corporate::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 55% 60% at 88% 18%, rgba(0, 162, 251, 0.20), transparent 70%),
        radial-gradient(ellipse 60% 70% at 10% 95%, rgba(40, 84, 168, 0.35), transparent 70%),
        linear-gradient(90deg, rgba(5, 7, 13, 0.92) 0%, rgba(5, 7, 13, 0.70) 45%, rgba(5, 7, 13, 0.25) 100%),
        linear-gradient(180deg, rgba(5, 7, 13, 0.55) 0%, rgba(5, 7, 13, 0) 30%, rgba(5, 7, 13, 0) 65%, rgba(5, 7, 13, 0.95) 100%);
    pointer-events: none;
}

@keyframes heroDrift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero-corporate::before {
        animation: none;
    }
}

.hero-corporate .hero-panel {
    background: rgba(5, 7, 13, 0.45);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-corporate .hero-stats {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.hero-corporate .hero-stats li {
    border-left-color: rgba(255, 255, 255, 0.10);
}

@media (max-width: 768px) {
    .hero.hero-corporate::before {
        background-position: 30% 70%;
    }

    .hero.hero-corporate::after {
        background:
            radial-gradient(ellipse 80% 40% at 80% 0%, rgba(0, 162, 251, 0.18), transparent 70%),
            linear-gradient(180deg, rgba(5, 7, 13, 0.82) 0%, rgba(5, 7, 13, 0.70) 50%, rgba(5, 7, 13, 0.95) 100%);
    }
}

/* Products listing hero: longer headline, product name highlighted */
.products-view .page-hero h1.products-hero-title {
    max-width: 980px;
    font-size: 46px;
    line-height: 1.15;
}

.products-view .page-hero .highlight-text {
    color: var(--accent-turquoise);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.products-view .page-hero p {
    max-width: 820px;
}

@media (max-width: 768px) {
    .products-view .page-hero h1.products-hero-title {
        font-size: 30px;
    }
}

/* Sectors mega menu: informational lists + call to action */
.mega-sectors .mega-menu-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(260px, 1fr);
}

.mega-text {
    display: block;
    padding: 7px 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.mobile-text {
    display: block;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

@media (max-width: 1200px) {
    .mega-sectors .mega-menu-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =====================================================================
   HERO SLIDESHOW: five transformation images cross-fading (7s each)
   ===================================================================== */
.hero.hero-corporate::before {
    display: none;
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    filter: saturate(1.1) contrast(1.05);
    animation: heroSlide 35s linear infinite;
    animation-delay: calc(var(--i) * 7s - 1s);
    will-change: opacity, transform;
}

/* 35s cycle: fade in 1s, hold ~6s, fade out 1s while the next one fades in */
@keyframes heroSlide {
    0% { opacity: 0; transform: scale(1.1); }
    3% { opacity: 1; }
    20% { opacity: 1; }
    23% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        animation: none;
    }

    .hero-slide:first-child {
        opacity: 1;
    }
}

/* Slides v2: crisper, higher-contrast photos with a lighter overlay */
.hero-slide {
    filter: contrast(1.12) saturate(1.08);
}

.hero.hero-corporate::after {
    background:
        radial-gradient(ellipse 55% 60% at 88% 15%, rgba(0, 162, 251, 0.14), transparent 70%),
        linear-gradient(90deg, rgba(5, 7, 13, 0.88) 0%, rgba(5, 7, 13, 0.62) 42%, rgba(5, 7, 13, 0.18) 100%),
        linear-gradient(180deg, rgba(5, 7, 13, 0.45) 0%, rgba(5, 7, 13, 0) 28%, rgba(5, 7, 13, 0) 68%, rgba(5, 7, 13, 0.92) 100%);
}

@media (max-width: 768px) {
    .hero.hero-corporate::after {
        background: linear-gradient(180deg, rgba(5, 7, 13, 0.78) 0%, rgba(5, 7, 13, 0.66) 50%, rgba(5, 7, 13, 0.94) 100%);
    }
}

/* Slides v3: six images, 7s each (42s cycle) */
.hero-slide {
    animation-name: heroSlide6;
    animation-duration: 42s;
}

@keyframes heroSlide6 {
    0% { opacity: 0; transform: scale(1.1); }
    2.5% { opacity: 1; }
    16.7% { opacity: 1; }
    19.2% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* Earth at night: keep the lit continent in view */
.hero-slide:nth-child(4) {
    background-position: center 75%;
}

/* Wind turbines at sunset: keep the sun and turbines on the right */
.hero-slide:nth-child(5) {
    background-position: 70% center;
}

/* Slides v4: seven images, 7s each (49s cycle) */
.hero-slide {
    animation-name: heroSlide7;
    animation-duration: 49s;
}

@keyframes heroSlide7 {
    0% { opacity: 0; transform: scale(1.1); }
    2.1% { opacity: 1; }
    14.3% { opacity: 1; }
    16.4% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* Solar farm: the rows of panels read best from the centre */
.hero-slide:nth-child(6) {
    background-position: center 40%;
}

/* Hero v5: single text column, no side panel or eyebrow */
.hero-corporate .hero-grid {
    grid-template-columns: minmax(0, 1fr);
}

.hero.hero-corporate {
    padding-top: 150px;
}

.hero-corporate .hero-content {
    max-width: 760px;
}

.hero-corporate .hero-pretitle {
    max-width: 760px;
    font-size: 58px;
    line-height: 1.08;
}

.hero-corporate .hero-subtitle {
    max-width: 620px;
    font-size: 19px;
}

.hero-corporate .hero-stats {
    margin-top: 120px;
}

@media (max-width: 768px) {
    .hero.hero-corporate {
        padding-top: 72px;
    }

    .hero-corporate .hero-pretitle {
        font-size: 36px;
    }

    .hero-corporate .hero-subtitle {
        font-size: 16px;
    }

    .hero-corporate .hero-stats {
        margin-top: 64px;
    }
}

/* =====================================================================
   HERO v6: accent word, entrance motion, slide themes + progress bars
   Theme captions and bars share the slides' timing (7 x 7s = 49s).
   ===================================================================== */
.hero-corporate .hero-pretitle {
    font-size: 64px;
    letter-spacing: -0.025em;
}

.hero-corporate .accent-word {
    color: var(--accent-turquoise);
}

/* Entrance: headline, rule and paragraph rise in sequence */
.hero-corporate .hero-pretitle,
.hero-corporate .hero-subtitle,
.hero-corporate .hero-stats,
.hero-themes {
    animation: heroRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-corporate .hero-subtitle { animation-delay: 0.25s; }
.hero-themes { animation-delay: 0.45s; }
.hero-corporate .hero-stats { animation-delay: 0.6s; }

.hero-corporate .hero-pretitle::after {
    transform-origin: left;
    animation: heroRule 0.8s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes heroRule {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Slide themes */
.hero-corporate .hero-grid {
    position: relative;
}

.hero-themes {
    position: absolute;
    right: 20px;
    bottom: 0;
    width: 280px;
}

.hero-theme-captions {
    position: relative;
    height: 24px;
    margin-bottom: 14px;
}

.hero-theme {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    animation: heroThemeCaption 49s linear infinite;
    animation-delay: calc(var(--i) * 7s - 1s);
}

.hero-theme em {
    color: var(--accent-turquoise);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.1em;
}

@keyframes heroThemeCaption {
    0% { opacity: 0; transform: translateY(8px); }
    3% { opacity: 1; transform: none; }
    14.3% { opacity: 1; transform: none; }
    16.4% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 0; }
}

.hero-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.hero-bar {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
}

.hero-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent-turquoise);
    transform: scaleX(0);
    transform-origin: left;
    animation: heroBarFill 49s linear infinite;
    animation-delay: calc(var(--i) * 7s - 1s);
}

@keyframes heroBarFill {
    0% { transform: scaleX(0); }
    16.4% { transform: scaleX(1); }
    16.41% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-corporate .hero-pretitle,
    .hero-corporate .hero-subtitle,
    .hero-corporate .hero-stats,
    .hero-themes,
    .hero-corporate .hero-pretitle::after {
        animation: none;
    }

    .hero-theme,
    .hero-bar::after {
        animation: none;
    }

    .hero-theme:first-child {
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .hero-corporate .hero-pretitle {
        font-size: 52px;
    }

    .hero-themes {
        position: static;
        width: auto;
        max-width: 320px;
        margin-top: 48px;
    }
}

@media (max-width: 768px) {
    .hero-corporate .hero-pretitle {
        font-size: 38px;
    }

    .hero-themes {
        margin-top: 36px;
    }
}

/* Keep the headline on two lines on desktop */
.hero-corporate .hero-content,
.hero-corporate .hero-pretitle {
    max-width: 940px;
}

/* Hero headline is now a full statement: smaller, wider, calmer */
.hero-corporate .hero-content,
.hero-corporate .hero-pretitle {
    max-width: 980px;
}

.hero-corporate .hero-pretitle {
    font-size: 42px;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.015em;
}

.hero-corporate .accent-word {
    font-weight: 600;
}

@media (max-width: 1024px) {
    .hero-corporate .hero-pretitle {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .hero-corporate .hero-pretitle {
        font-size: 26px;
    }
}

/* Slides v5: sharper, higher-contrast digital-transformation imagery */
.hero-slide {
    filter: contrast(1.1) saturate(1.1) brightness(1.04);
}

.hero.hero-corporate::after {
    background:
        radial-gradient(ellipse 55% 60% at 88% 15%, rgba(0, 162, 251, 0.16), transparent 70%),
        linear-gradient(90deg, rgba(5, 7, 13, 0.82) 0%, rgba(5, 7, 13, 0.5) 42%, rgba(5, 7, 13, 0.08) 100%),
        linear-gradient(180deg, rgba(5, 7, 13, 0.4) 0%, rgba(5, 7, 13, 0) 28%, rgba(5, 7, 13, 0) 70%, rgba(5, 7, 13, 0.9) 100%);
}

/* Homepage solution center: five cards in one grid (3 + 2) */
.center-pillars-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.center-pillar {
    grid-column: span 2;
}

.center-pillar:nth-child(-n+2) {
    grid-column: span 3;
}

@media (max-width: 900px) {
    .center-pillars-grid {
        grid-template-columns: 1fr;
    }

    .center-pillar,
    .center-pillar:nth-child(-n+2) {
        grid-column: auto;
    }
}

/* ---------- Approach v2: dark journey timeline (icon nodes, no numerals) ---------- */
.approach-section {
    background:
        radial-gradient(ellipse 60% 70% at 90% 0%, rgba(0, 162, 251, 0.14), transparent 70%),
        linear-gradient(180deg, #0a1224 0%, #0d1a33 100%);
    color: #ffffff;
}

.approach-section .section-eyebrow {
    color: #00a2fb;
}

.approach-section .section-title {
    color: #ffffff;
}

.approach-section .section-title .accent {
    color: #00a2fb;
}

.approach-section .approach-lead {
    color: rgba(255, 255, 255, 0.72);
}

.approach-grid {
    gap: 28px;
    counter-reset: none;
}

.approach-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-top: 0;
    color: #ffffff;
}

.approach-index {
    display: none;
}

/* icon node on a connecting line */
.approach-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    margin-bottom: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 162, 251, 0.55);
    background: #0d1a33;
    color: #00a2fb;
    font-size: 22px;
    box-shadow: 0 0 0 6px rgba(0, 162, 251, 0.08);
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.approach-card::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 60px;
    right: -28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 162, 251, 0.55), rgba(0, 162, 251, 0.12));
}

.approach-card:last-child::before {
    display: none;
}

.approach-card:hover {
    border-top-color: transparent;
}

.approach-card:hover > i {
    background: #00a2fb;
    color: #0a1224;
    box-shadow: 0 0 0 8px rgba(0, 162, 251, 0.16);
}

.approach-card h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 600;
}

.approach-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .approach-card::before {
        display: none;
    }

    .approach-card {
        padding-left: 80px;
    }

    .approach-card > i {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }

    .approach-card:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        left: 30px;
        top: 66px;
        bottom: -22px;
        width: 1px;
        background: rgba(0, 162, 251, 0.3);
    }
}

/* Approach v3: fix title contrast, refine cards */
#homeView .approach-section .section-title {
    color: #ffffff;
}

#homeView .approach-section .section-title .accent {
    color: #00a2fb;
}

.approach-section {
    padding: 110px 0;
}

.approach-grid {
    gap: 24px;
    align-items: stretch;
}

.approach-card {
    padding: 28px 26px 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-top: 2px solid rgba(0, 162, 251, 0.7);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.approach-card:hover {
    background: rgba(0, 162, 251, 0.07);
    border-color: rgba(0, 162, 251, 0.35);
    border-top-color: #00a2fb;
    transform: translateY(-3px);
}

/* the connector now sits between cards, not across them */
.approach-card::before {
    display: none;
}

.approach-card > i {
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    font-size: 20px;
    box-shadow: none;
    background: rgba(0, 162, 251, 0.1);
}

.approach-card h3 {
    min-height: 2.6em;
    font-size: 18px;
    line-height: 1.3;
}

@media (max-width: 900px) {
    .approach-card {
        padding: 24px 22px 24px 86px;
    }

    .approach-card > i {
        left: 22px;
        top: 24px;
    }

    .approach-card h3 {
        min-height: 0;
    }

    .approach-card:not(:last-child)::after {
        display: none;
    }
}

/* ---------- Partners v2: corporate ecosystem band with card chips ---------- */
.partners-marquee-section {
    padding: 96px 0 104px;
    background: #f4f6fa;
    border-top: 1px solid #e3e8f0;
    border-bottom: 1px solid #e3e8f0;
}

.partners-marquee-header::after {
    display: none;
}

.partners-marquee-header {
    margin-bottom: 48px;
}

#homeView .partners-marquee-title {
    font-size: 36px;
    font-weight: 600;
    margin: 6px 0 0;
}

.marquee-rows {
    gap: 16px;
}

.marquee-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
    gap: 14px;
    padding: 4px 0;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 24px 14px 16px;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-left: 3px solid #00a2fb;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(10, 18, 36, 0.04);
    color: #0d1a33;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.marquee-item::after {
    display: none;
}

.marquee-item:hover {
    background: #ffffff;
    border-color: #c4cfe0;
    border-left-color: #2854A8;
    box-shadow: 0 6px 18px rgba(10, 18, 36, 0.08);
}

.marquee-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0d1a33;
    color: #00a2fb;
    font-size: 14px;
}

.marquee-item span {
    color: #0d1a33;
}

@media (max-width: 768px) {
    .partners-marquee-section {
        padding: 60px 0 68px;
    }

    #homeView .partners-marquee-title {
        font-size: 28px;
    }

    .marquee-item {
        padding: 12px 18px 12px 12px;
        font-size: 15px;
    }
}

/* ---------- Partners v3: static ecosystem grid on navy ---------- */
.partners-marquee-section {
    background:
        radial-gradient(ellipse 50% 60% at 100% 0%, rgba(0, 162, 251, 0.12), transparent 70%),
        linear-gradient(180deg, #0a1224 0%, #0d1a33 100%);
    border: 0;
}

.partners-marquee-header {
    max-width: 1200px;
}

.partners-marquee-section .section-eyebrow {
    color: #00a2fb;
}

#homeView .partners-marquee-title {
    color: #ffffff;
}

.partners-marquee-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.partners-grid li {
    position: relative;
    padding: 26px 24px 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.partners-grid li::before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    margin-bottom: 14px;
    background: #00a2fb;
    transition: width 0.25s ease;
}

.partners-grid li:hover {
    color: #ffffff;
}

.partners-grid li:hover::before {
    width: 44px;
}

@media (max-width: 1000px) {
    .partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .partners-grid {
        grid-template-columns: 1fr;
    }

    .partners-grid li {
        padding: 18px 0;
    }
}

/* ---------- Partners v4: grouped editorial columns on white ---------- */
.partners-marquee-section {
    padding: 100px 0 110px;
    background: #ffffff;
    border: 0;
}

.partners-marquee-section .section-eyebrow {
    color: var(--blue);
}

#homeView .partners-marquee-title {
    color: var(--ink);
}

.partners-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
}

.partners-group h3 {
    margin: 0 0 20px;
    padding-top: 18px;
    border-top: 2px solid var(--ink);
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
}

.partners-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.partners-group li {
    padding: 11px 0;
    border-bottom: 1px solid #e6eaf0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.45;
}

.partners-group li:last-child {
    border-bottom: 0;
}

@media (max-width: 1000px) {
    .partners-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 32px;
    }
}

@media (max-width: 560px) {
    .partners-marquee-section {
        padding: 60px 0 68px;
    }

    .partners-groups {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   LINEAR-INSPIRED LAYER (homepage + navbar)
   Near-black canvas, Inter with tight tracking, hairline borders,
   muted body copy, gradient-faded headings, soft hover glows.
   ===================================================================== */
:root {
    --lin-bg: #08090a;
    --lin-panel: rgba(255, 255, 255, 0.025);
    --lin-panel-hover: rgba(255, 255, 255, 0.05);
    --lin-line: rgba(255, 255, 255, 0.08);
    --lin-line-strong: rgba(255, 255, 255, 0.16);
    --lin-text: #f7f8f8;
    --lin-muted: #8a8f98;
    --lin-accent: #00a2fb;
}

body,
.navbar,
#homeView {
    font-family: 'Inter', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

#homeView {
    background: var(--lin-bg);
    color: var(--lin-text);
}

/* ---- Navbar ---- */
.navbar {
    background: rgba(8, 9, 10, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--lin-line);
}

.navbar .nav-dropdown-toggle,
.navbar .nav-top-link {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #d0d6e0;
}

.navbar .nav-dropdown-toggle:hover,
.navbar .nav-top-link:hover {
    color: #ffffff;
}

.navbar .btn-primary {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ---- Typography ---- */
#homeView .section-eyebrow {
    color: var(--lin-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#homeView .section-eyebrow::before {
    display: none;
}

#homeView .section-title,
#homeView .partners-marquee-title {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #ffffff 0%, #b4bcd0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#homeView .section-title .accent {
    background: none;
    -webkit-text-fill-color: var(--lin-accent);
    color: var(--lin-accent);
}

.hero-corporate .hero-pretitle {
    letter-spacing: -0.03em;
}

.hero-corporate .hero-stats {
    border-top: 1px solid var(--lin-line);
}

/* ---- Sections share one canvas, divided by hairlines ---- */
.center-pillars,
.approach-section,
.partners-marquee-section {
    background: var(--lin-bg);
    border: 0;
    border-top: 1px solid var(--lin-line);
    padding: 120px 0;
    position: relative;
}

.approach-section {
    background:
        radial-gradient(ellipse 50% 40% at 50% 0%, rgba(0, 162, 251, 0.07), transparent 70%),
        var(--lin-bg);
}

.center-pillars-head,
.approach-header {
    max-width: 720px;
    margin-bottom: 56px;
}

.approach-section .approach-lead {
    color: var(--lin-muted);
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* ---- Solution center: bento cards ---- */
.center-pillars-grid {
    gap: 16px;
}

.center-pillar {
    position: relative;
    padding: 32px;
    border: 1px solid var(--lin-line);
    border-top: 1px solid var(--lin-line);
    border-radius: 14px;
    background: var(--lin-panel);
    color: var(--lin-text);
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.center-pillar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at 0% 0%, rgba(0, 162, 251, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.center-pillar:hover {
    border-color: var(--lin-line-strong);
    background: var(--lin-panel-hover);
}

.center-pillar:hover::before {
    opacity: 1;
}

.center-pillar-index {
    color: var(--lin-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.center-pillar h3 {
    color: var(--lin-text);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.center-pillar p {
    color: var(--lin-muted);
    font-size: 15px;
    line-height: 1.6;
}

.center-pillar-link {
    color: var(--lin-accent);
    font-size: 14px;
    font-weight: 500;
}

/* ---- Approach: bento cards ---- */
.approach-grid {
    gap: 16px;
}

.approach-card,
.approach-card:hover {
    border-radius: 14px;
    border: 1px solid var(--lin-line);
    background: var(--lin-panel);
    transform: none;
}

.approach-card {
    padding: 28px 26px 30px;
}

.approach-card:hover {
    border-color: var(--lin-line-strong);
    background: var(--lin-panel-hover);
}

.approach-card > i,
.approach-card:hover > i {
    width: 40px;
    height: 40px;
    margin-bottom: 40px;
    border-radius: 10px;
    border: 1px solid var(--lin-line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--lin-text);
    font-size: 16px;
    box-shadow: none;
}

.approach-card h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    min-height: 2.6em;
}

.approach-card p {
    color: var(--lin-muted);
    font-size: 14.5px;
}

/* ---- Partners ---- */
.partners-marquee-header {
    max-width: 1200px;
}

.partners-marquee-section .section-eyebrow {
    color: var(--lin-muted);
}

.partners-group h3 {
    border-top: 1px solid var(--lin-line-strong);
    color: var(--lin-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.partners-group li {
    border-bottom: 1px solid var(--lin-line);
    color: var(--lin-muted);
    font-size: 14.5px;
    transition: color 0.2s ease;
}

.partners-group li:hover {
    color: var(--lin-text);
}

/* ---- Footer sits on the same canvas ---- */
.footer {
    border-top: 1px solid var(--lin-line);
}

@media (max-width: 768px) {
    .center-pillars,
    .approach-section,
    .partners-marquee-section {
        padding: 72px 0;
    }
}

/* ---- Navbar, Linear style: 64px bar, links beside the logo, actions on the right ---- */
.navbar {
    height: 64px;
    background: rgba(8, 9, 10, 0.8);
    box-shadow: none;
}

.nav-container {
    max-width: 1200px;
    gap: 36px;
}

.nav-logo .roket-logo {
    height: 30px !important;
    max-width: 120px !important;
}

.nav-menu {
    flex: 1;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
}

.navbar .nav-dropdown-toggle,
.navbar .nav-menu > a {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #b4bcd0;
    transition: color 0.15s ease, background 0.15s ease;
}

.navbar .nav-dropdown-toggle:hover,
.navbar .nav-dropdown.is-open .nav-dropdown-toggle {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.navbar .nav-dropdown-toggle i {
    font-size: 8px;
    opacity: 0.6;
}

.navbar .language-selector {
    margin-left: auto;
    border-left: 0;
    padding-left: 0;
    gap: 2px;
}

.navbar .lang-btn {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #8a8f98;
}

.navbar .lang-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.navbar .nav-buttons .btn-primary {
    padding: 7px 14px;
    border-radius: 8px;
    border: 0;
    background: #f7f8f8;
    color: #08090a;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

.navbar .nav-buttons .btn-primary:hover {
    background: #ffffff;
    color: #08090a;
}

.products-menu.simple-menu {
    top: calc(100% + 20px);
}

/* =====================================================================
   LINEAR-INSPIRED LAYER: inner pages (products, product, solutions, academy, about)
   ===================================================================== */
/* canvas + variable remap: text-on-light tokens become text-on-dark */
.site-view:not(#homeView) {
    --ink: #f7f8f8;
    --dark-gray: #d0d6e0;
    --medium-gray: #8a8f98;
    --blue: #00a2fb;
    --band-gray: #0c0d0f;
    --light-gray: #0c0d0f;
    --hairline: rgba(255, 255, 255, 0.08);
    background: #08090a;
    color: #f7f8f8;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* page hero */
.site-view:not(#homeView) .page-hero {
    background:
        radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0, 162, 251, 0.10), transparent 70%),
        #08090a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 72px;
    padding-bottom: 72px;
}

.site-view:not(#homeView) .page-hero h1,
.site-view:not(#homeView) .products-hero-title {
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    background: linear-gradient(180deg, #ffffff 0%, #aeb6c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.site-view:not(#homeView) .page-hero p,
.site-view:not(#homeView) .page-hero .product-status {
    color: #8a8f98;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.site-view:not(#homeView) .breadcrumb,
.site-view:not(#homeView) .breadcrumb a {
    color: #8a8f98;
    font-size: 13px;
}

.site-view:not(#homeView) .breadcrumb a:hover {
    color: #ffffff;
}

/* shared section canvas */
.site-view:not(#homeView) .dx-products,
.site-view:not(#homeView) .product-preview,
.site-view:not(#homeView) .pricing,
.site-view:not(#homeView) .features,
.site-view:not(#homeView) .how-it-works,
.site-view:not(#homeView) .pms-section,
.site-view:not(#homeView) .other-products,
.site-view:not(#homeView) .academy-section,
.site-view:not(#homeView) .academy-section-alt,
.site-view:not(#homeView) .about-section,
.site-view:not(#homeView) .journey-band {
    background: #08090a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7f8f8;
}

.site-view:not(#homeView) .academy-section-alt,
.site-view:not(#homeView) .other-products,
.site-view:not(#homeView) .how-it-works {
    background: #0a0b0d;
}

/* headings and copy */
.site-view:not(#homeView) .section-title,
.site-view:not(#homeView) .pricing-title,
.site-view:not(#homeView) h2 {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #f7f8f8;
}

.site-view:not(#homeView) .section-eyebrow {
    color: #8a8f98;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.site-view:not(#homeView) .section-eyebrow::before {
    display: none;
}

.site-view:not(#homeView) h3,
.site-view:not(#homeView) h4 {
    color: #f7f8f8;
    letter-spacing: -0.015em;
}

.site-view:not(#homeView) p,
.site-view:not(#homeView) li {
    color: #8a8f98;
}

.site-view:not(#homeView) .section-subtitle,
.site-view:not(#homeView) .roket-modules-intro,
.site-view:not(#homeView) .pms-quote {
    color: #8a8f98;
}

/* cards: hairline panels */
.site-view:not(#homeView) .pms-card,
.site-view:not(#homeView) .version-column,
.site-view:not(#homeView) .version-1,
.site-view:not(#homeView) .version-2,
.site-view:not(#homeView) .feature-card,
.site-view:not(#homeView) .step,
.site-view:not(#homeView) .pricing-card,
.site-view:not(#homeView) .academy-card,
.site-view:not(#homeView) .academy-step,
.site-view:not(#homeView) .academy-audience,
.site-view:not(#homeView) .other-product-card,
.site-view:not(#homeView) .product-demo-card,
.site-view:not(#homeView) .about-content,
.site-view:not(#homeView) .enterprise-trust-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: none;
    color: #f7f8f8;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.site-view:not(#homeView) .pms-card:hover,
.site-view:not(#homeView) .version-column:hover,
.site-view:not(#homeView) .feature-card:hover,
.site-view:not(#homeView) .step:hover,
.site-view:not(#homeView) .academy-card:hover,
.site-view:not(#homeView) .academy-step:hover,
.site-view:not(#homeView) .other-product-card:hover,
.site-view:not(#homeView) .pricing-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

.site-view:not(#homeView) .pms-card h3,
.site-view:not(#homeView) .pms-card h4,
.site-view:not(#homeView) .version-column h3,
.site-view:not(#homeView) .version-column h4,
.site-view:not(#homeView) .feature-card h3,
.site-view:not(#homeView) .step h3,
.site-view:not(#homeView) .pricing-card h3,
.site-view:not(#homeView) .pricing-card .price-amount,
.site-view:not(#homeView) .pricing-card .price-main,
.site-view:not(#homeView) .academy-card h3,
.site-view:not(#homeView) .academy-step h3,
.site-view:not(#homeView) .other-product-card h3 {
    color: #f7f8f8;
}

.site-view:not(#homeView) .pms-card p,
.site-view:not(#homeView) .pms-card span,
.site-view:not(#homeView) .version-column li,
.site-view:not(#homeView) .feature-card p,
.site-view:not(#homeView) .step p,
.site-view:not(#homeView) .pricing-card li,
.site-view:not(#homeView) .pricing-card p,
.site-view:not(#homeView) .academy-card p,
.site-view:not(#homeView) .academy-step p,
.site-view:not(#homeView) .other-product-card p {
    color: #8a8f98;
}

.site-view:not(#homeView) .academy-index,
.site-view:not(#homeView) .dx-product-index,
.site-view:not(#homeView) .feature-number,
.site-view:not(#homeView) .step-number,
.site-view:not(#homeView) .badge {
    color: #8a8f98;
    background: none;
    border-color: rgba(255, 255, 255, 0.16);
    font-weight: 500;
}

.site-view:not(#homeView) .pms-icon,
.site-view:not(#homeView) .check-icon {
    color: #00a2fb;
}

/* product directory rows */
.site-view:not(#homeView) .dx-product-row {
    border-color: rgba(255, 255, 255, 0.08);
}

.site-view:not(#homeView) .dx-product-text h2 {
    color: #f7f8f8;
}

.site-view:not(#homeView) .dx-product-text p {
    color: #8a8f98;
}

.site-view:not(#homeView) .dx-product-link,
.site-view:not(#homeView) .other-product-more,
.site-view:not(#homeView) .other-products-all,
.site-view:not(#homeView) .academy-infra-link {
    color: #00a2fb;
    font-weight: 500;
}

/* pricing chips and badges */
.site-view:not(#homeView) .plan-limit-chip,
.site-view:not(#homeView) .trial-chip,
.site-view:not(#homeView) .enterprise-chip {
    background: rgba(255, 255, 255, 0.06);
    color: #d0d6e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.site-view:not(#homeView) .pricing-card.popular,
.site-view:not(#homeView) .pricing-card.enterprise-card {
    border-color: rgba(0, 162, 251, 0.4);
    background: rgba(0, 162, 251, 0.05);
}

/* journey band + CTAs */
.site-view:not(#homeView) .journey-band,
.site-view:not(#homeView) .academy-cta,
.site-view:not(#homeView) .academy-cta-spotlight {
    background:
        radial-gradient(ellipse 50% 100% at 50% 100%, rgba(0, 162, 251, 0.10), transparent 70%),
        #08090a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7f8f8;
}

/* buttons: light pill-ish, Linear weight */
.site-view:not(#homeView) .btn,
.site-view:not(#homeView) .btn-large {
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.site-view:not(#homeView) .btn-primary,
.site-view:not(#homeView) .btn-white,
.site-view:not(#homeView) .btn-gradient {
    background: #f7f8f8;
    color: #08090a;
    border: 0;
    box-shadow: none;
}

.site-view:not(#homeView) .btn-primary:hover,
.site-view:not(#homeView) .btn-white:hover,
.site-view:not(#homeView) .btn-gradient:hover {
    background: #ffffff;
    color: #08090a;
}

.site-view:not(#homeView) .btn-ghost-light,
.site-view:not(#homeView) .btn-outline {
    background: rgba(255, 255, 255, 0.04);
    color: #f7f8f8;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.site-view:not(#homeView) .btn-ghost-light:hover,
.site-view:not(#homeView) .btn-outline:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

/* media */
.site-view:not(#homeView) .carousel-container,
.site-view:not(#homeView) .preview-mockup,
.site-view:not(#homeView) .video-container {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
}

.site-view:not(#homeView) .carousel-btn {
    background: rgba(8, 9, 10, 0.7);
    color: #f7f8f8;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.site-view:not(#homeView) a:not(.btn) {
    transition: color 0.15s ease;
}

@media (max-width: 768px) {
    .site-view:not(#homeView) .page-hero {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}
/* ---------- Partners v5: Linear-style moving rows ---------- */
.lin-marquee-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}

.lin-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.lin-marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: linMarqueeLeft 60s linear infinite;
}

.lin-marquee-track.reverse {
    animation-name: linMarqueeRight;
    animation-duration: 70s;
}

.lin-marquee:hover .lin-marquee-track {
    animation-play-state: paused;
}

@keyframes linMarqueeLeft {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 7px)); }
}

@keyframes linMarqueeRight {
    from { transform: translateX(calc(-50% - 7px)); }
    to { transform: translateX(0); }
}

.lin-chip {
    flex: 0 0 auto;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: #b4bcd0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.lin-chip:hover {
    color: #ffffff;
    border-color: rgba(0, 162, 251, 0.5);
    background: rgba(0, 162, 251, 0.07);
}

@media (prefers-reduced-motion: reduce) {
    .lin-marquee-track {
        animation: none;
        flex-wrap: wrap;
        width: auto;
    }
}

/* =====================================================================
   TYPE SYSTEM, Linear: big regular-weight Inter, solid white, very tight
   ===================================================================== */
#homeView .section-title,
#homeView .partners-marquee-title,
.site-view:not(#homeView) .page-hero h1,
.site-view:not(#homeView) .products-hero-title,
.site-view:not(#homeView) .section-title,
.site-view:not(#homeView) .pricing-title {
    background: none;
    -webkit-text-fill-color: #f7f8f8;
    color: #f7f8f8;
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

#homeView .section-title,
#homeView .partners-marquee-title,
.site-view:not(#homeView) .section-title {
    font-size: clamp(34px, 4.6vw, 56px);
}

.site-view:not(#homeView) .page-hero h1,
.site-view:not(#homeView) .products-hero-title {
    font-size: clamp(40px, 6vw, 72px);
}

#homeView .section-title .accent {
    -webkit-text-fill-color: #8a8f98;
    color: #8a8f98;
}

.hero-corporate .hero-pretitle {
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #f7f8f8;
}

.hero-corporate .hero-pretitle .accent-word {
    color: #8a8f98;
    font-weight: 500;
}

.hero-corporate .hero-subtitle,
.approach-section .approach-lead,
.site-view:not(#homeView) .page-hero p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: #8a8f98;
}

#homeView .center-pillar h3,
#homeView .approach-card h3,
.site-view:not(#homeView) h3 {
    font-weight: 500;
    letter-spacing: -0.025em;
}

#homeView .center-pillar h3,
#homeView .approach-card h3 {
    font-size: 20px;
}

/* ---------- Solution center: minimal animated line figures (FIG 0.x) ---------- */
.center-pillar-index {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #5f646d;
    text-transform: uppercase;
}

.fig-wrap {
    display: block;
    margin: 8px 0 20px;
    height: 150px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

.center-pillar:hover .fig-wrap {
    color: #00a2fb;
}

.fig {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fig polygon,
.fig line,
.fig circle {
    vector-effect: non-scaling-stroke;
}

/* 01 layers breathe apart and back */
.fig-l, .fig-b, .fig-p, .fig-st {
    transform-box: view-box;
}

.fig-l {
    animation: figLayer 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.5s);
}

@keyframes figLayer {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(var(--i) * -3px)); }
}

/* 02 cubes bob out of phase */
.fig-b {
    animation: figBob 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.1s);
}

@keyframes figBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* 03 plates ripple */
.fig-p {
    animation: figPlate 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.3s);
}

@keyframes figPlate {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(6px); opacity: 0.55; }
}

/* 04 nodes pulse */
.fig-n {
    transform-box: fill-box;
    transform-origin: center;
    animation: figNode 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.6s);
}

@keyframes figNode {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

/* 05 steps rise in turn */
.fig-st {
    animation: figStep 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.4s);
}

@keyframes figStep {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.fig-dot {
    color: #00a2fb;
}

@media (prefers-reduced-motion: reduce) {
    .fig *,
    .fig {
        animation: none !important;
    }
}

@media (max-width: 900px) {
    .fig-wrap {
        height: 120px;
    }
}

/* Figures: large, centred, no FIG numbers */
.fig-wrap {
    height: 280px;
    margin: 0 0 28px;
}

.center-pillar {
    padding: 36px 32px 32px;
}

.center-pillar h3 {
    margin-top: 4px;
}

@media (max-width: 900px) {
    .fig-wrap {
        height: 220px;
    }
}

/* =====================================================================
   Solution center v3: no cards. Figures sit on the flat black canvas,
   columns divided by hairlines (Linear reference).
   ===================================================================== */
.center-pillars,
.approach-section,
.partners-marquee-section {
    background: #08090a;
}

.approach-section {
    background: #08090a;
}

.center-pillars-grid {
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.center-pillar,
.center-pillar:hover {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 44px 36px 40px;
}

.center-pillar::before {
    display: none;
}

.center-pillar:nth-child(2),
.center-pillar:nth-child(4),
.center-pillar:nth-child(5) {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.center-pillar:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.center-pillar:nth-child(1),
.center-pillar:nth-child(3) {
    padding-left: 0;
}

/* figures tuned to their titles */
.fig-plate polygon {
    stroke-opacity: 0.55;
}

/* 02 talent: people rise in turn, one is highlighted */
.fig-person {
    animation: figRise 4.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.7s);
}

.fig-person path,
.fig-person circle {
    fill: #08090a;
}

.fig-hl {
    color: #00a2fb;
}

@keyframes figRise {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.fig-ring {
    transform-box: fill-box;
    transform-origin: center;
    stroke: #00a2fb;
    animation: figRing 3s ease-out infinite;
}

@keyframes figRing {
    0% { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* 03 consulting: route draws itself, flags appear along it */
.fig-route {
    stroke-dasharray: 4 5;
    animation: figDash 2.4s linear infinite;
}

@keyframes figDash {
    to { stroke-dashoffset: -18; }
}

.fig-flag {
    animation: figFlag 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.4s);
}

@keyframes figFlag {
    0%, 100% { opacity: 0.35; }
    30% { opacity: 1; }
}

/* 04 digital solutions: wires carry data into the core */
.fig-wire {
    stroke-dasharray: 2 4;
    stroke-opacity: 0.6;
}

.center-pillar:hover .fig-person,
.center-pillar:hover .fig-flag {
    color: #00a2fb;
}

@media (max-width: 900px) {
    .center-pillar:nth-child(n),
    .center-pillar:nth-child(n):hover {
        border-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .center-pillar:nth-child(n+2) {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Hero: slogan first, long statement as supporting copy */
.hero-corporate .hero-slogan {
    max-width: 900px;
    margin: 0 0 28px;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: clamp(42px, 6.4vw, 84px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #f7f8f8;
    opacity: 0;
    animation: heroRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero-corporate .hero-pretitle.hero-lead {
    max-width: 760px;
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #b4bcd0;
}

.hero-corporate .hero-pretitle.hero-lead .accent-word {
    color: #f7f8f8;
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-corporate .hero-slogan {
        animation: none;
        opacity: 1;
    }
}

/* Hero stats: three figures with a "+" suffix */
.hero-stats strong[data-suffix]::after {
    content: attr(data-suffix);
    color: #00a2fb;
}

.hero-corporate .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-stats strong {
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 500;
    letter-spacing: -0.04em;
}

@media (max-width: 768px) {
    .hero-corporate .hero-stats {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   TRANSFORMATION CALL SCHEDULER (contactModal), dark, calendar-first
   ===================================================================== */
#contactModal {
    background: rgba(0, 0, 0, 0.7);
}

#contactModal .modal-content {
    width: min(100%, 1040px);
    max-width: 1040px;
    padding: 0;
    background: #0c0d0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    color: #f7f8f8;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
}

#contactModal .close-modal {
    color: #8a8f98;
}

#contactModal .close-modal:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.sched {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 560px;
}

.sched-info {
    padding: 44px 36px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(ellipse 120% 60% at 0% 0%, rgba(0, 162, 251, 0.09), transparent 70%);
}

.sched-brand {
    display: inline-block;
    margin-bottom: 36px;
    color: #f7f8f8;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.26em;
}

#contactModal .modal-title {
    padding-right: 0;
    margin-bottom: 14px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #f7f8f8;
}

#contactModal .modal-subtitle {
    margin-bottom: 28px;
    color: #8a8f98;
    font-size: 14.5px;
    line-height: 1.6;
}

.sched-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sched-meta li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b4bcd0;
    font-size: 14px;
}

.sched-meta i {
    width: 18px;
    color: #00a2fb;
    text-align: center;
}

.sched-chosen {
    margin-top: 32px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 162, 251, 0.35);
    border-radius: 12px;
    background: rgba(0, 162, 251, 0.06);
}

.sched-chosen[hidden],
.sched-pick[hidden],
.sched-details[hidden] {
    display: none;
}

.sched-chosen-label {
    display: block;
    margin-bottom: 4px;
    color: #8a8f98;
    font-size: 12px;
}

.sched-chosen strong {
    color: #f7f8f8;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.sched-main {
    padding: 44px 40px;
    min-width: 0;
}

.sched-pick {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 40px;
}

.sched-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.sched-cal-head strong {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: #f7f8f8;
}

.sched-cal-nav {
    display: inline-flex;
    gap: 6px;
}

.sched-cal-nav button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: #b4bcd0;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sched-cal-nav button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.sched-cal-nav button:disabled {
    opacity: 0.3;
    cursor: default;
}

.sched-weekdays,
.sched-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.sched-weekdays {
    margin-bottom: 10px;
}

.sched-weekdays span {
    color: #5f646d;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
}

.sched-day {
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #4a4f57;
    font-size: 14px;
    font-family: inherit;
    cursor: default;
}

.sched-day.is-open {
    background: rgba(255, 255, 255, 0.04);
    color: #f7f8f8;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sched-day.is-open:hover {
    border-color: rgba(0, 162, 251, 0.5);
    background: rgba(0, 162, 251, 0.08);
}

.sched-day.is-today {
    box-shadow: inset 0 -2px 0 #00a2fb;
}

.sched-day.is-selected,
.sched-day.is-selected:hover {
    background: #f7f8f8;
    border-color: #f7f8f8;
    color: #08090a;
    font-weight: 600;
}

.sched-slots {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sched-slots-title {
    margin-bottom: 20px;
    padding-top: 6px;
    color: #f7f8f8;
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
}

.sched-slot-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.sched-slot {
    padding: 11px 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: transparent;
    color: #f7f8f8;
    font-size: 14px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sched-slot:hover {
    border-color: #00a2fb;
    background: rgba(0, 162, 251, 0.1);
}

.sched-skip {
    margin-top: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: #8a8f98;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sched-skip:hover {
    color: #ffffff;
}

.sched-back {
    margin-bottom: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: #8a8f98;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.sched-back:hover {
    color: #ffffff;
}

#contactModal .form-group label {
    color: #b4bcd0;
    font-size: 13px;
}

#contactModal .required {
    color: #00a2fb;
}

#contactModal .form-group input,
#contactModal .form-group select,
#contactModal .form-group textarea {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #f7f8f8;
    font-family: inherit;
}

#contactModal .form-group input::placeholder,
#contactModal .form-group textarea::placeholder {
    color: #5f646d;
}

#contactModal .form-group input:focus,
#contactModal .form-group select:focus,
#contactModal .form-group textarea:focus {
    border-color: #00a2fb;
    box-shadow: 0 0 0 3px rgba(0, 162, 251, 0.15);
}

#contactModal .form-group select option {
    background: #0c0d0f;
    color: #f7f8f8;
}

#contactModal .privacy-notice {
    color: #8a8f98;
}

#contactModal .privacy-notice a {
    color: #00a2fb;
}

#contactModal .btn-contact {
    background: #f7f8f8;
    color: #08090a;
    border-radius: 10px;
    font-weight: 500;
}

#contactModal .btn-contact:hover {
    background: #ffffff;
}

#contactModal .contact-direct-line {
    color: #8a8f98;
}

#contactModal .contact-direct-line a {
    color: #00a2fb;
}

#contactModal .contact-feedback--ok {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

#contactModal .contact-feedback--error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

@media (max-width: 900px) {
    .sched {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .sched-info {
        padding: 32px 24px 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .sched-brand {
        margin-bottom: 20px;
    }

    .sched-main {
        padding: 28px 24px 32px;
    }

    .sched-pick {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .sched-slot-list {
        max-height: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =====================================================================
   LINEAR LAYOUT SYSTEM: one wide container, 40px gutters, left-aligned
   statement headings (white lead + gray continuation), nav links right.
   ===================================================================== */
.container,
.nav-container,
.partners-marquee-header,
.partners-marquee-section .container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.partners-marquee-header {
    width: 100%;
    text-align: left;
    align-items: flex-start;
}

/* statement headings */
#homeView .section-title,
#homeView .partners-marquee-title,
.site-view:not(#homeView) .section-title {
    max-width: none;
    font-size: clamp(28px, 3.3vw, 42px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-align: left;
}

.title-soft,
#homeView .section-title .accent {
    color: #8a8f98;
    -webkit-text-fill-color: #8a8f98;
}

.center-pillars-head,
.approach-header,
.partners-marquee-header {
    max-width: none;
    margin-bottom: 72px;
}

.approach-header {
    padding: 0;
}

.approach-section .approach-lead {
    max-width: 640px;
    margin-top: 20px;
}

#homeView .section-eyebrow {
    margin-bottom: 20px;
}

/* sections: generous, even vertical rhythm */
.center-pillars,
.approach-section,
.partners-marquee-section {
    padding: 112px 0;
}

/* navbar: links gather on the right beside the actions */
.nav-menu {
    justify-content: flex-end;
}

.navbar .language-selector {
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.navbar .nav-buttons .btn-primary {
    padding: 8px 18px;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .container,
    .nav-container,
    .partners-marquee-header,
    .partners-marquee-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .center-pillars,
    .approach-section,
    .partners-marquee-section {
        padding: 72px 0;
    }
}

/* =====================================================================
   APPROACH v4: step list + live stage (auto-advancing, click to jump)
   ===================================================================== */
.flow {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
    align-items: stretch;
}

.flow-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flow-step {
    position: relative;
    padding: 28px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.flow-step:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.flow-bar {
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 0;
    background: #00a2fb;
}

.flow-step.is-active .flow-bar {
    animation: flowFill 7s linear forwards;
}

.flow:hover .flow-step.is-active .flow-bar {
    animation-play-state: paused;
}

@keyframes flowFill {
    to { width: 100%; }
}

.flow-title {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #5f646d;
    font-family: inherit;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-align: left;
    cursor: pointer;
    transition: color 0.25s ease;
}

.flow-step:hover .flow-title {
    color: #b4bcd0;
}

.flow-step.is-active .flow-title {
    color: #f7f8f8;
}

.flow-desc {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    color: #8a8f98;
    font-size: 15.5px;
    line-height: 1.6;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

.flow-step.is-active .flow-desc {
    max-height: 120px;
    margin-top: 12px;
    opacity: 1;
}

.flow-stage {
    position: relative;
    min-height: 420px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0) 0 0 / 22px 22px,
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 162, 251, 0.07), transparent 70%),
        #0a0b0d;
    overflow: hidden;
}

.flow-fig {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: rgba(255, 255, 255, 0.62);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.flow-fig.is-active {
    opacity: 1;
    transform: none;
}

.flow-svg {
    width: 100%;
    height: 100%;
    max-height: 360px;
    overflow: visible;
}

.flow-svg polygon,
.flow-svg line,
.flow-svg circle,
.flow-svg path {
    vector-effect: non-scaling-stroke;
}

/* 1 discovery */
.flow-pt {
    fill: #0a0b0d;
    stroke: #00a2fb;
    animation: flowPt 3.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.4s);
}

@keyframes flowPt {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

.flow-lens {
    color: #00a2fb;
    animation: flowLens 7s ease-in-out infinite;
}

.flow-lens-in {
    stroke-opacity: 0.4;
}

@keyframes flowLens {
    0%, 100% { transform: translate(78px, 52px); }
    25% { transform: translate(140px, 58px); }
    50% { transform: translate(168px, 82px); }
    75% { transform: translate(112px, 92px); }
}

/* 2 digital twin */
.flow-twin polygon,
.flow-twin {
    color: #00a2fb;
}

.flow-link {
    stroke: #00a2fb;
    stroke-dasharray: 2 4;
    animation: flowLink 1.6s linear infinite;
}

@keyframes flowLink {
    to { stroke-dashoffset: -12; }
}

.flow-cube-twin {
    color: #00a2fb;
    animation: flowTwin 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.5s);
}

@keyframes flowTwin {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 3 implementation */
.flow-slot {
    stroke-dasharray: 2 3;
    stroke-opacity: 0.5;
}

.flow-drop {
    animation: flowDrop 6s cubic-bezier(0.3, 0.7, 0.2, 1) infinite;
    animation-delay: calc(var(--i) * 0.7s);
}

@keyframes flowDrop {
    0% { transform: translateY(-46px); opacity: 0; }
    14% { transform: translateY(0); opacity: 1; }
    80% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(0); opacity: 0; }
}

/* 4 scale */
.flow-bar-3d {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: flowGrow 5.5s cubic-bezier(0.3, 0.7, 0.2, 1) infinite;
    animation-delay: calc(var(--i) * 0.25s);
}

@keyframes flowGrow {
    0% { transform: scaleY(0.15); }
    35%, 85% { transform: scaleY(1); }
    100% { transform: scaleY(0.15); }
}

.flow-trend {
    color: #00a2fb;
    stroke: #00a2fb;
    stroke-dasharray: 3 5;
    stroke-opacity: 0.8;
}

@media (max-width: 900px) {
    .flow {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .flow-stage {
        order: -1;
        min-height: 280px;
    }

    .flow-title {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flow-svg *,
    .flow-step.is-active .flow-bar {
        animation: none !important;
    }

    .flow-step.is-active .flow-bar {
        width: 100%;
    }
}

/* ---------- Approach: white theme ---------- */
#homeView .approach-section {
    background: #ffffff;
    border-top: 1px solid #e6e8ec;
}

#homeView .approach-section .section-title {
    color: #0b0c0e;
    -webkit-text-fill-color: #0b0c0e;
}

#homeView .approach-section .section-title .accent {
    color: #8a8f98;
    -webkit-text-fill-color: #8a8f98;
}

#homeView .approach-section .section-eyebrow,
#homeView .approach-section .approach-lead {
    color: #6b7280;
}

#homeView .approach-section .flow-step {
    border-top-color: rgba(11, 12, 14, 0.1);
}

#homeView .approach-section .flow-step:last-child {
    border-bottom-color: rgba(11, 12, 14, 0.1);
}

#homeView .approach-section .flow-bar {
    background: #2854A8;
}

#homeView .approach-section .flow-title {
    color: #9aa0ab;
}

#homeView .approach-section .flow-step:hover .flow-title {
    color: #4b5563;
}

#homeView .approach-section .flow-step.is-active .flow-title {
    color: #0b0c0e;
}

#homeView .approach-section .flow-desc {
    color: #6b7280;
}

#homeView .approach-section .flow-stage {
    border-color: rgba(11, 12, 14, 0.1);
    background:
        radial-gradient(circle at 1px 1px, rgba(11, 12, 14, 0.09) 1px, transparent 0) 0 0 / 22px 22px,
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(40, 84, 168, 0.07), transparent 70%),
        #f6f7f9;
}

#homeView .approach-section .flow-fig {
    color: rgba(11, 12, 14, 0.6);
}

#homeView .approach-section .flow-pt {
    fill: #f6f7f9;
    stroke: #2854A8;
}

#homeView .approach-section .flow-lens,
#homeView .approach-section .flow-twin,
#homeView .approach-section .flow-cube-twin,
#homeView .approach-section .flow-trend,
#homeView .approach-section .fig-dot {
    color: #2854A8;
}

#homeView .approach-section .flow-link,
#homeView .approach-section .flow-trend {
    stroke: #2854A8;
}
/* Solutions mega menu: footer holds only the journey line */
.mega-solutions .mega-menu-footer {
    justify-content: flex-start;
}
/* =====================================================================
   COLOR CARDS: bright statement cards on the dark canvas (Linear quotes)
   ===================================================================== */
.color-band {
    padding: 24px 0 96px;
    background: #08090a;
}

.color-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 16px;
}

.color-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 440px;
    padding: 36px 40px 32px;
    border-radius: 10px;
    overflow: hidden;
    color: #0b0c0e;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.color-card:hover {
    transform: translateY(-3px);
}

.color-card-blue {
    background: linear-gradient(160deg, #d3e6ff 0%, #e4ecff 45%, #f4ecff 100%);
}

.color-card-lime {
    background: #00a2fb;
}

.color-card-deco {
    position: absolute;
    right: -60px;
    top: -30px;
    width: 440px;
    height: 440px;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    transition: transform 0.8s ease;
}

.color-card:hover .color-card-deco {
    transform: rotate(6deg) scale(1.03);
}

.color-card-quote {
    position: relative;
    max-width: 560px;
    margin: 0;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.035em;
    color: #0b0c0e;
}

.color-card-by {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.color-card-by > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding-right: 16px;
    border-right: 1px solid rgba(11, 12, 14, 0.2);
    font-size: 24px;
    box-sizing: content-box;
}

.color-card-by strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.color-card-by small {
    display: block;
    margin-top: 2px;
    color: rgba(11, 12, 14, 0.62);
    font-size: 15px;
}

.color-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
    color: #8a8f98;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.color-foot p {
    margin: 0;
}

.color-foot strong {
    color: #f7f8f8;
    font-weight: 600;
}

.color-foot a {
    flex: 0 0 auto;
    color: #8a8f98;
    text-decoration: none;
    transition: color 0.2s ease;
}

.color-foot a:hover {
    color: #ffffff;
}

@media (max-width: 900px) {
    .color-grid {
        grid-template-columns: 1fr;
    }

    .color-card {
        min-height: 320px;
        padding: 28px 24px;
    }

    .color-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =====================================================================
   HERO v6: black canvas first, photography sits quietly behind on the right
   ===================================================================== */
.hero.hero-corporate {
    background: #08090a;
}

.hero-slides {
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(ellipse 62% 85% at 88% 38%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
    mask-image: radial-gradient(ellipse 62% 85% at 88% 38%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
}

.hero-slide {
    filter: saturate(0.85) contrast(1.05) brightness(0.9);
}

.hero.hero-corporate::after {
    background:
        linear-gradient(180deg, rgba(8, 9, 10, 0) 55%, #08090a 100%),
        linear-gradient(90deg, rgba(8, 9, 10, 0.55) 0%, rgba(8, 9, 10, 0) 55%);
}

@media (max-width: 768px) {
    .hero-slides {
        opacity: 0.35;
        -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 75%, #000 0%, transparent 75%);
        mask-image: radial-gradient(ellipse 90% 60% at 50% 75%, #000 0%, transparent 75%);
    }

    .hero.hero-corporate::after {
        background: linear-gradient(180deg, rgba(8, 9, 10, 0.2) 0%, #08090a 100%);
    }
}
/* =====================================================================
   PRODUCTS LISTING: bright statement cards (same language as the home band)
   ===================================================================== */
#productsView .dx-products {
    padding: 56px 0 110px;
    background: #08090a;
    border-top: 0;
}

#productsView .dx-products > .container {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

#productsView .dx-product-row {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: span 3;
    min-height: 400px;
    padding: 36px 40px 32px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    color: #0b0c0e;
    transition: transform 0.3s ease;
}

#productsView .dx-product-row:hover {
    transform: translateY(-3px);
}

#productsView .dx-product-row:nth-child(1) { grid-column: span 4; }
#productsView .dx-product-row:nth-child(2) { grid-column: span 2; }
#productsView .dx-product-row:nth-child(3) { grid-column: span 2; }
#productsView .dx-product-row:nth-child(4) { grid-column: span 4; }

#productsView .dx-product-row:nth-child(4n+1) {
    background: linear-gradient(160deg, #d3e6ff 0%, #e4ecff 45%, #f4ecff 100%);
}

#productsView .dx-product-row:nth-child(4n+2) {
    background: #00a2fb;
}

#productsView .dx-product-row:nth-child(4n+3) {
    background: linear-gradient(160deg, #e6dcff 0%, #efe6ff 60%, #f8f2ff 100%);
}

#productsView .dx-product-row:nth-child(4n) {
    background: linear-gradient(160deg, #c9f1e1 0%, #dff6ec 60%, #effaf4 100%);
}

/* ghost hexagon, as on the home cards */
#productsView .dx-product-row::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -50px;
    width: 360px;
    height: 360px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='white' stroke-opacity='0.55' stroke-width='28' stroke-linejoin='round'%3E%3Cpath d='M200 40 L340 120 L340 280 L200 360 L60 280 L60 120 Z'/%3E%3Cpath d='M200 110 L280 156 L280 244 L200 290 L120 244 L120 156 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    transition: transform 0.8s ease;
}

#productsView .dx-product-row:hover::after {
    transform: rotate(6deg) scale(1.03);
}

#productsView .dx-product-index {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    color: rgba(11, 12, 14, 0.5);
    font-size: 13px;
    font-weight: 500;
}

#productsView .dx-product-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
}

#productsView .dx-product-row .dx-product-text .badge {
    position: absolute;
    top: -52px;
    right: 0;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid rgba(11, 12, 14, 0.25);
    border-radius: 999px;
    background: transparent;
    color: #0b0c0e;
    font-size: 12px;
    font-weight: 500;
}

#productsView .dx-product-row .dx-product-text .badge.ready {
    background: #0b0c0e;
    border-color: #0b0c0e;
    color: #ffffff;
}

#productsView .dx-product-row .dx-product-text h2 {
    max-width: 560px;
    margin: 0 0 10px;
    color: #0b0c0e;
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

#productsView .dx-product-row .dx-product-text h3 {
    margin: 0 0 18px;
    color: rgba(11, 12, 14, 0.78);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.015em;
}

#productsView .dx-product-row .dx-product-text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 560px;
    margin: 0 0 24px;
    overflow: hidden;
    color: rgba(11, 12, 14, 0.62);
    font-size: 15px;
    line-height: 1.6;
}

#productsView .dx-product-row .dx-product-link {
    margin-top: auto;
    color: #0b0c0e;
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 900px) {
    #productsView .dx-products > .container {
        grid-template-columns: 1fr;
    }

    #productsView .dx-product-row,
    #productsView .dx-product-row:nth-child(n) {
        grid-column: auto;
        min-height: 320px;
        padding: 28px 24px;
    }

    #productsView .dx-product-row .dx-product-text .badge {
        top: -48px;
    }
}
/* Products menu: second column continues the first, heading line only */
.mega-col-title.is-continued > span {
    visibility: hidden;
}
/* Slides v6: eight images, 7s each (56s cycle) */
.hero-slide {
    animation-name: heroSlide8;
    animation-duration: 56s;
}

@keyframes heroSlide8 {
    0% { opacity: 0; transform: scale(1.1); }
    1.8% { opacity: 1; }
    12.5% { opacity: 1; }
    14.3% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* Group photo: keep the faces in view */
.hero-slide:nth-child(8) {
    background-position: center 55%;
}

/* Captions and progress bars follow the 8-slide, 56s cycle */
.hero-theme {
    animation-duration: 56s;
}

@keyframes heroThemeCaption {
    0% { opacity: 0; transform: translateY(8px); }
    2.1% { opacity: 1; transform: none; }
    12.5% { opacity: 1; transform: none; }
    14.3% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 0; }
}

.hero-bars {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.hero-bar::after {
    animation-duration: 56s;
}

@keyframes heroBarFill {
    0% { transform: scaleX(0); }
    14.3% { transform: scaleX(1); }
    14.31% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}

/* Slides v7: make the background photos clearly visible behind the text */
.hero-slides {
    opacity: 0.9;
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 80% 40%, #000 0%, rgba(0, 0, 0, 0.75) 50%, transparent 90%);
    mask-image: radial-gradient(ellipse 80% 100% at 80% 40%, #000 0%, rgba(0, 0, 0, 0.75) 50%, transparent 90%);
}

.hero-slide {
    filter: saturate(1) contrast(1.05) brightness(1);
}

.hero.hero-corporate::after {
    background:
        linear-gradient(180deg, rgba(8, 9, 10, 0) 65%, #08090a 100%),
        linear-gradient(90deg, rgba(8, 9, 10, 0.75) 0%, rgba(8, 9, 10, 0.35) 45%, rgba(8, 9, 10, 0) 80%);
}

@media (max-width: 768px) {
    .hero-slides {
        opacity: 0.6;
        -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 75%, #000 0%, transparent 85%);
        mask-image: radial-gradient(ellipse 100% 70% at 50% 75%, #000 0%, transparent 85%);
    }
}

/* Solution center on a white canvas */
.center-pillars {
    background: #ffffff;
    border-top: 0;
}

.center-pillars .section-eyebrow {
    color: #5b616b;
}

.center-pillars .section-title {
    color: #0b0d10;
}

.center-pillars .title-soft {
    color: #7b818b;
    -webkit-text-fill-color: #7b818b;
}

.center-pillars-grid {
    border-top-color: rgba(8, 9, 10, 0.1);
}

.center-pillar:nth-child(2),
.center-pillar:nth-child(4),
.center-pillar:nth-child(5) {
    border-left-color: rgba(8, 9, 10, 0.1);
}

.center-pillar:nth-child(n+3) {
    border-top-color: rgba(8, 9, 10, 0.1);
}

.center-pillar h3 {
    color: #0b0d10;
}

.center-pillar p,
.center-pillar-index {
    color: #5b616b;
}

.center-pillar-link {
    color: #0068ce;
}

.fig-wrap {
    color: rgba(8, 9, 10, 0.5);
}

.center-pillar:hover .fig-wrap,
.center-pillar:hover .fig-person,
.center-pillar:hover .fig-flag {
    color: #0068ce;
}

.center-pillars .fig-hl,
.center-pillars .fig-dot {
    color: #0068ce;
}

.center-pillars .fig-ring {
    stroke: #0068ce;
}

.center-pillars .fig-person path,
.center-pillars .fig-person circle {
    fill: #ffffff;
}

/* Footer mirrors the navbar: Solutions, Products, Academy, Company + Contact */
.footer-grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
    gap: 32px;
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Text colours: dark text on the white solution center, readable text over the hero photos */
#homeView .center-pillars .section-title {
    color: #0b0d10;
    -webkit-text-fill-color: #0b0d10;
}

#homeView .center-pillars .section-title .title-soft {
    color: #7b818b;
    -webkit-text-fill-color: #7b818b;
}

#homeView .center-pillars .section-eyebrow {
    color: #5b616b;
}

.hero.hero-corporate::after {
    background:
        linear-gradient(180deg, rgba(8, 9, 10, 0) 65%, #08090a 100%),
        linear-gradient(90deg, rgba(8, 9, 10, 0.88) 0%, rgba(8, 9, 10, 0.7) 45%, rgba(8, 9, 10, 0.1) 85%);
}

.hero-corporate .hero-main-title,
.hero-corporate .hero-subtitle,
.hero-theme {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.hero-corporate .hero-subtitle {
    color: rgba(255, 255, 255, 0.88);
}

.hero-slide {
    filter: saturate(1) contrast(1.05) brightness(0.8);
}

.hero-themes {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(8, 9, 10, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hero-bar {
    background: rgba(255, 255, 255, 0.35);
}

/* Slides v8: dark artwork fills the whole hero, visible from the first frame */
.hero-slides {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
}

.hero-slide {
    background-size: cover;
    background-position: center;
    filter: none;
}

.hero-slide:nth-child(n) {
    background-position: center;
}

.hero-slide:nth-child(8) {
    filter: brightness(0.7) saturate(0.9);
    background-position: center 55%;
}

.hero.hero-corporate::after {
    background:
        linear-gradient(180deg, rgba(8, 9, 10, 0) 70%, #08090a 100%),
        linear-gradient(90deg, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0.4) 45%, rgba(8, 9, 10, 0) 80%);
}

@media (max-width: 768px) {
    .hero-slides {
        opacity: 0.9;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Corporate opening: night-earth photo first; keep the horizon on the right, text on the dark sky */
.hero-slide:nth-child(1) {
    background-position: center 60%;
}

.hero-slide:nth-child(n+2):nth-child(-n+7) {
    background-position: center;
}

.hero-slide:nth-child(8) {
    filter: brightness(0.7) saturate(0.9);
    background-position: center 55%;
}

/* Soft black veil over the slides so the photos sit quieter behind the text */
.hero-slides {
    opacity: 0.55;
}

@media (max-width: 768px) {
    .hero-slides {
        opacity: 0.45;
    }
}

/* Sectors menu: one plain list, no group headings */
.mega-sectors .mega-col-wide {
    grid-column: span 4;
}

.mega-sectors .mega-col-wide ul {
    columns: 4;
    column-gap: 32px;
}

.mega-sectors .mega-col-wide li {
    break-inside: avoid;
}

@media (max-width: 1200px) {
    .mega-sectors .mega-col-wide {
        grid-column: 1 / -1;
    }

    .mega-sectors .mega-col-wide ul {
        columns: 3;
    }
}

/* Hero slide caption and progress bars are removed */
.hero-themes {
    display: none !important;
}

/* Internship programme page */
.staj-lead {
    max-width: 760px;
    margin: 0 0 32px;
    color: var(--lin-muted, #8a8f98);
    font-size: 17px;
    line-height: 1.65;
}

.staj-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.staj-stat {
    padding: 28px 16px;
}

.staj-stat + .staj-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.staj-stat strong {
    display: block;
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.staj-stat span {
    display: block;
    margin-top: 8px;
    color: var(--lin-muted, #8a8f98);
    font-size: 13px;
}

.staj-note {
    margin: 20px 0 40px;
    color: var(--lin-muted, #8a8f98);
    font-size: 14px;
}

.staj-list {
    margin-top: 24px;
}

@media (max-width: 900px) {
    .staj-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staj-stat:nth-child(odd) {
        border-left: 0;
    }

    .staj-stat:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Academy menu: two audience columns (organisations, young talent) */
.mega-academy .mega-menu-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Internship page, lower half: redesigned sections */
.stj-venture,
.stj-duo,
.stj-orgs,
.stj-skills,
.stj-flow,
.stj-cta {
    padding: 96px 0 0;
    background: #08090a;
}

.stj-cta {
    padding-bottom: 120px;
}

.stj-kicker {
    display: inline-block;
    margin-bottom: 16px;
    color: #00a2fb;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stj-head {
    max-width: 760px;
    margin-bottom: 48px;
}

.stj-head-center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.stj-head h2,
.stj-panel h2,
.stj-orgs-copy h2,
.stj-cta-card h2 {
    margin: 0 0 16px;
    color: #f7f8f8;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.stj-head p,
.stj-orgs-copy p {
    margin: 0;
    color: #8a8f98;
    font-size: 17px;
    line-height: 1.65;
}

/* venture figures */
.stj-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stj-stat {
    position: relative;
    padding: 28px 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 162, 251, 0.07), rgba(255, 255, 255, 0.02));
    overflow: hidden;
}

.stj-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    width: 36px;
    height: 2px;
    background: #00a2fb;
}

.stj-stat strong {
    display: block;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #ffffff, #00a2fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.stj-stat span {
    color: #b4b8c0;
    font-size: 14px;
    line-height: 1.5;
}

/* focus areas and gains */
.stj-duo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.stj-panel {
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
}

.stj-panel h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    margin-bottom: 28px;
}

.stj-chips,
.stj-checks,
.stj-pills,
.stj-eco ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stj-chips li,
.stj-pills li,
.stj-eco li {
    padding: 10px 18px;
    border: 1px solid rgba(0, 162, 251, 0.28);
    border-radius: 999px;
    background: rgba(0, 162, 251, 0.07);
    color: #e6f9fc;
    font-size: 14px;
    font-weight: 500;
}

.stj-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.stj-checks li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d3d6db;
    font-size: 15px;
}

.stj-checks i {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 162, 251, 0.14);
    color: #00a2fb;
    font-size: 11px;
}

/* organisations */
.stj-orgs-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    padding: 48px;
    border: 1px solid rgba(0, 162, 251, 0.25);
    border-radius: 24px;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(0, 162, 251, 0.14), transparent 70%),
        rgba(255, 255, 255, 0.025);
}

.stj-orgs-copy p {
    margin-bottom: 28px;
}

.stj-orgs-side {
    display: grid;
    align-content: center;
    gap: 14px;
}

.stj-offer {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(8, 9, 10, 0.5);
}

.stj-offer i {
    grid-row: span 2;
    align-self: center;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 162, 251, 0.12);
    color: #00a2fb;
}

.stj-offer strong {
    color: #f7f8f8;
    font-size: 16px;
    font-weight: 600;
}

.stj-offer span {
    color: #8a8f98;
    font-size: 14px;
}

.stj-eco > span {
    display: block;
    margin: 6px 0 10px;
    color: #8a8f98;
    font-size: 13px;
}

.stj-eco ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stj-eco li {
    padding: 7px 14px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #d3d6db;
    font-size: 13px;
}

/* skills */
.stj-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.stj-pills li {
    padding: 14px 24px;
    font-size: 15px;
}

/* steps */
.stj-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stj-steps::before {
    content: "";
    position: absolute;
    top: 27px;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 162, 251, 0.6), rgba(0, 162, 251, 0.1));
}

.stj-step {
    position: relative;
    text-align: center;
}

.stj-step-no {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    border: 1px solid rgba(0, 162, 251, 0.5);
    border-radius: 50%;
    background: #08090a;
    color: #00a2fb;
    font-size: 15px;
    font-weight: 600;
}

.stj-step h3 {
    margin: 0 0 8px;
    color: #f7f8f8;
    font-size: 18px;
    font-weight: 600;
}

.stj-step p {
    margin: 0 auto;
    max-width: 240px;
    color: #8a8f98;
    font-size: 14px;
    line-height: 1.6;
}

/* closing call to action */
.stj-cta-card {
    padding: 64px 32px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 70% 90% at 50% 0%, rgba(0, 162, 251, 0.22), transparent 70%),
        #0d1114;
    border: 1px solid rgba(0, 162, 251, 0.2);
    text-align: center;
}

.stj-cta-card h2 {
    max-width: 720px;
    margin: 0 auto 28px;
}

@media (max-width: 1100px) {
    .stj-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stj-orgs-card {
        grid-template-columns: 1fr;
        padding: 36px;
    }
}

@media (max-width: 900px) {
    .stj-duo-grid {
        grid-template-columns: 1fr;
    }

    .stj-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }

    .stj-steps::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .stj-stats,
    .stj-checks,
    .stj-steps {
        grid-template-columns: 1fr;
    }

    .stj-panel {
        padding: 28px 22px;
    }

    .stj-orgs-card {
        padding: 28px 22px;
    }
}

/* About page: location with map */
.about-location {
    padding: 0 0 96px;
    background: #08090a;
}

.about-location-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
}

.about-location-info {
    padding: 44px;
}

.about-location-info h2 {
    margin: 0 0 24px;
    color: #f7f8f8;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.about-location-info ul {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.about-location-info li {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    color: #b4b8c0;
    font-size: 15px;
    line-height: 1.55;
}

.about-location-info li i {
    flex: none;
    width: 18px;
    margin-top: 3px;
    color: #00a2fb;
}

.about-location-info li a {
    color: inherit;
    text-decoration: none;
}

.about-location-info li a:hover {
    color: #ffffff;
}

.about-location-map {
    min-height: 380px;
}

.about-location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    filter: grayscale(0.4) invert(0.92) hue-rotate(180deg) contrast(0.9);
}

@media (max-width: 900px) {
    .about-location-card {
        grid-template-columns: 1fr;
    }

    .about-location-info {
        padding: 32px 24px;
    }
}

/* Solutions > Talent & Ventures: our ventures */
.venture-showcase {
    margin-top: 72px;
}

.venture-title {
    margin: 0 0 8px;
    color: #f7f8f8;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.venture-sub {
    margin: 0 0 32px;
    color: #8a8f98;
    font-size: 16px;
}

.venture-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.venture-card {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.venture-card:hover {
    border-color: rgba(0, 162, 251, 0.4);
    background: rgba(0, 162, 251, 0.05);
}

.venture-logo {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 162, 251, 0.25), rgba(53, 115, 253, 0.25));
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}

.venture-card h4 {
    margin: 0 0 8px;
    color: #f7f8f8;
    font-size: 18px;
    font-weight: 600;
}

.venture-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border: 1px solid rgba(0, 162, 251, 0.28);
    border-radius: 999px;
    background: rgba(0, 162, 251, 0.07);
    color: #68d4fd;
    font-size: 12px;
    font-weight: 500;
}

.venture-card p {
    margin: 0;
    color: #8a8f98;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .venture-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .venture-grid {
        grid-template-columns: 1fr;
    }
}

/* About page */
.about-intro {
    padding: 72px 0 0;
    background: #08090a;
}

.about-lead {
    max-width: 900px;
    margin: 0 0 48px;
    color: #f7f8f8;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.about-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.about-facts li {
    padding: 28px 20px;
}

.about-facts li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.about-facts strong {
    display: block;
    background: linear-gradient(135deg, #ffffff, #00a2fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.about-facts span {
    display: block;
    margin-top: 8px;
    color: #8a8f98;
    font-size: 14px;
}

.about-story {
    padding: 56px 0 72px;
    background: #08090a;
}

.about-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.about-story-card {
    padding: 32px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(0, 162, 251, 0.06), rgba(255, 255, 255, 0.02));
}

.about-story-no {
    display: block;
    margin-bottom: 18px;
    color: #00a2fb;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.about-story-card p {
    margin: 0;
    color: #b4b8c0;
    font-size: 16px;
    line-height: 1.7;
}

.about-closing {
    margin: 40px 0 0;
    padding-left: 20px;
    border-left: 2px solid #00a2fb;
    color: #f7f8f8;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}

.about-location-map iframe {
    filter: none;
}

@media (max-width: 900px) {
    .about-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-facts li:nth-child(odd) {
        border-left: 0;
    }

    .about-facts li:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .about-story-grid {
        grid-template-columns: 1fr;
    }
}

.about-view .about-intro .about-lead {
    color: #f7f8f8;
}

.about-view .about-closing {
    color: #f7f8f8;
}

#aboutView .about-lead,
#aboutView .about-closing {
    color: #f7f8f8 !important;
}

/* Live location map */
.roket-map {
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: #12161a;
}

.roket-map .leaflet-control-attribution {
    font-size: 10px;
}

.roket-pin span {
    display: block;
    width: 34px;
    height: 34px;
    border: 3px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    background: #00a2fb;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    transform: rotate(-45deg);
}

.roket-pin span::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #08090a;
}

.about-location-map {
    position: relative;
}

/* Internship programme video */
.staj-video {
    max-width: 960px;
    margin: 0 0 40px;
}

.staj-video video {
    display: block;
    width: 100%;
    max-height: 560px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: #000000;
}

.staj-video figcaption {
    margin-top: 12px;
    color: #8a8f98;
    font-size: 13px;
}

/* Slides v9: nine slides, 7s each (63s cycle); the last one is the programme video */
.hero-slide {
    animation-name: heroSlide9;
    animation-duration: 63s;
}

@keyframes heroSlide9 {
    0% { opacity: 0; transform: scale(1.1); }
    1.6% { opacity: 1; }
    11.1% { opacity: 1; }
    12.7% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.hero-slide-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.9) brightness(0.8);
}

@media (max-width: 768px) {
    .hero-slide-video {
        display: none;
    }
}

/* Slides v10: eight 7s slides + a 20s lively clip of the programme video (76s cycle) */
.hero-slide {
    animation-name: heroSlide76;
    animation-duration: 76s;
}

@keyframes heroSlide76 {
    0% { opacity: 0; transform: scale(1.1); }
    1.3% { opacity: 1; }
    9.2% { opacity: 1; }
    10.5% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.hero-slide-video {
    animation-name: heroSlideVideo;
}

@keyframes heroSlideVideo {
    0% { opacity: 0; }
    1.3% { opacity: 1; }
    26.3% { opacity: 1; }
    27.6% { opacity: 0; }
    100% { opacity: 0; }
}

/* Slides v11: five dotted artworks + group photo (7s each) + 20s video clip (62s cycle) */
.hero-slide {
    animation-name: heroSlide62;
    animation-duration: 62s;
}

@keyframes heroSlide62 {
    0% { opacity: 0; transform: scale(1.1); }
    1.6% { opacity: 1; }
    11.3% { opacity: 1; }
    12.9% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.hero-slide-video {
    animation-name: heroSlideVideo62;
}

@keyframes heroSlideVideo62 {
    0% { opacity: 0; }
    1.6% { opacity: 1; }
    32.3% { opacity: 1; }
    33.9% { opacity: 0; }
    100% { opacity: 0; }
}

.hero-slide:nth-child(n) {
    background-position: center;
    filter: none;
}

.hero-slide:nth-child(6) {
    background-position: center 55%;
    filter: brightness(0.7) saturate(0.9);
}

.hero-slide-video:nth-child(n) {
    filter: saturate(0.9) brightness(0.8);
}

/* Hero background: the programme video only (a still artwork stands in on phones and reduced motion) */
.hero-still,
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-still {
    background-position: center;
    background-size: cover;
}

.hero-video {
    object-fit: cover;
    object-position: center;
    filter: saturate(0.9) brightness(0.85);
    opacity: 1;
    transition: opacity 0.7s ease;
}

.hero-video.is-fading {
    opacity: 0;
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

.hero-video {
    transition-duration: 0.35s;
}

/* Darker video so the text stays calm over it */
.hero-video {
    filter: saturate(0.85) brightness(0.55);
}

.hero.hero-corporate::after {
    background:
        linear-gradient(180deg, rgba(8, 9, 10, 0.25) 0%, rgba(8, 9, 10, 0) 30%, rgba(8, 9, 10, 0) 65%, #08090a 100%),
        linear-gradient(90deg, rgba(8, 9, 10, 0.8) 0%, rgba(8, 9, 10, 0.5) 50%, rgba(8, 9, 10, 0.25) 100%);
}

/* Hero scenes: product and digital-transformation interludes between the video clips */
.hero-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-scene > * {
    position: absolute;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.scene-bg {
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 75% 40%, rgba(110, 80, 255, 0.45), transparent 65%),
        radial-gradient(ellipse 50% 60% at 92% 85%, rgba(0, 162, 251, 0.3), transparent 60%),
        #08090a;
}

.hero-scene.is-on .scene-bg {
    opacity: 1;
}

.scene-net {
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-scene.is-net .scene-net,
.hero-scene.is-modules .scene-modules,
.hero-scene.is-dash .scene-dash {
    opacity: 1;
}

/* modules */
.scene-modules {
    top: 50%;
    right: 6%;
    width: min(46%, 620px);
    transform: translateY(-50%);
}

.scene-title {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scene-modules ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scene-modules li {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(20, 22, 40, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(14px);
}

.hero-scene.is-modules li {
    animation: sceneRise 0.5s ease forwards;
    animation-delay: calc(var(--n) * 0.18s);
}

.scene-modules li b {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.scene-modules li span {
    color: #b9c4ff;
    font-size: 13px;
}

@keyframes sceneRise {
    to { opacity: 1; transform: none; }
}

/* dashboard */
.scene-dash {
    top: 50%;
    right: 6%;
    width: min(46%, 600px);
    padding: 22px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(20, 22, 40, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.scene-dash-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
}

.scene-dash-head b {
    color: #ffffff;
    font-size: 16px;
}

.scene-dash-head span {
    color: #b9c4ff;
    font-size: 12px;
}

.scene-dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.scene-dash-kpis div span {
    display: block;
    margin-bottom: 8px;
    color: #d3d9ff;
    font-size: 12px;
}

.scene-dash-kpis i {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.14);
    position: relative;
    overflow: hidden;
}

.scene-dash-kpis i::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #3573fd, #00a2fb);
}

.hero-scene.is-dash .scene-dash-kpis i::after {
    animation: sceneFill 1.4s ease 0.3s forwards;
}

@keyframes sceneFill {
    to { width: var(--w); }
}

.scene-chart {
    display: block;
    width: 100%;
    height: 150px;
}

.chart-area {
    fill: rgba(53, 115, 253, 0.22);
    opacity: 0;
}

.chart-line {
    fill: none;
    stroke: #00a2fb;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
}

.chart-bars rect {
    fill: rgba(255, 255, 255, 0.16);
    transform-box: fill-box;
    transform-origin: bottom;
    transform: scaleY(0);
}

.hero-scene.is-dash .chart-line {
    animation: sceneDraw 1.6s ease 0.4s forwards;
}

.hero-scene.is-dash .chart-area {
    animation: sceneRise 0.8s ease 1.4s forwards;
}

.hero-scene.is-dash .chart-bars rect {
    animation: sceneBar 0.7s ease forwards;
}

.hero-scene.is-dash .chart-bars rect:nth-child(2) { animation-delay: 0.1s; }
.hero-scene.is-dash .chart-bars rect:nth-child(3) { animation-delay: 0.2s; }
.hero-scene.is-dash .chart-bars rect:nth-child(4) { animation-delay: 0.3s; }
.hero-scene.is-dash .chart-bars rect:nth-child(5) { animation-delay: 0.4s; }
.hero-scene.is-dash .chart-bars rect:nth-child(6) { animation-delay: 0.5s; }

@keyframes sceneDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes sceneBar {
    to { transform: scaleY(1); }
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .hero-scene {
        display: none;
    }
}

/* Let the scenes shine at full strength; the video itself carries the darkening */
.hero-slides {
    opacity: 1;
}

.hero-video {
    filter: saturate(0.85) brightness(0.4);
}

@media (max-width: 768px) {
    .hero-slides {
        opacity: 0.45;
    }
}

/* Scenes live in the free right-hand column, clear of the headline */
.scene-modules,
.scene-dash {
    right: 3%;
    width: clamp(300px, 26%, 380px);
}

.scene-modules ul {
    grid-template-columns: 1fr;
    gap: 8px;
}

.scene-modules li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 14px;
}

.scene-modules li b {
    font-size: 14px;
}

.scene-modules li span {
    font-size: 12px;
}

.scene-title {
    margin-bottom: 12px;
    font-size: 12px;
}

.scene-dash {
    padding: 18px;
}

.scene-chart {
    height: 120px;
}

@media (max-width: 1100px) {
    .scene-modules,
    .scene-dash {
        display: none;
    }
}

/* More scenes: journey, solutions, talent (all in the right-hand column) */
.scene-card {
    top: 50%;
    right: 3%;
    width: clamp(300px, 26%, 380px);
    transform: translateY(-50%);
}

.hero-scene.is-journey .scene-journey,
.hero-scene.is-solutions .scene-solutions,
.hero-scene.is-talent .scene-talent {
    opacity: 1;
}

.scene-card ol,
.scene-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* journey */
.scene-journey ol {
    position: relative;
    display: grid;
    gap: 14px;
    padding-left: 6px;
}

.scene-journey ol::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 21px;
    width: 2px;
    background: rgba(255, 255, 255, 0.14);
}

.scene-journey ol::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 21px;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, #3573fd, #00a2fb);
}

.hero-scene.is-journey .scene-journey ol::after {
    animation: sceneLine 2.6s ease 0.2s forwards;
}

@keyframes sceneLine {
    to { height: calc(100% - 28px); }
}

.scene-journey li {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: center;
    opacity: 0;
    transform: translateX(14px);
}

.hero-scene.is-journey .scene-journey li {
    animation: sceneSlide 0.5s ease forwards;
    animation-delay: calc(var(--n) * 0.45s);
}

@keyframes sceneSlide {
    to { opacity: 1; transform: none; }
}

.scene-journey em {
    position: relative;
    z-index: 1;
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0, 162, 251, 0.7);
    border-radius: 50%;
    background: #0d1020;
    color: #00a2fb;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.scene-journey b {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.scene-journey span {
    color: #b9c4ff;
    font-size: 12px;
}

/* solutions */
.scene-solutions ul {
    display: grid;
    gap: 10px;
}

.scene-solutions li {
    display: flex;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(20, 22, 40, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(14px);
}

.hero-scene.is-solutions .scene-solutions li {
    animation: sceneRise 0.5s ease forwards;
    animation-delay: calc(var(--n) * 0.4s);
}

.scene-solutions li > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 162, 251, 0.14);
    color: #00a2fb;
    font-size: 15px;
}

.scene-solutions b {
    display: block;
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.scene-solutions p {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
}

.scene-solutions p span {
    padding: 2px 8px;
    border: 1px solid rgba(185, 196, 255, 0.3);
    border-radius: 99px;
    color: #d3d9ff;
    font-size: 11px;
}

/* talent */
.scene-talent ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.scene-talent li {
    padding: 16px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(20, 22, 40, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.92);
}

.hero-scene.is-talent .scene-talent li {
    animation: sceneZoom 0.5s ease forwards;
    animation-delay: calc(var(--n) * 0.25s);
}

@keyframes sceneZoom {
    to { opacity: 1; transform: none; }
}

.scene-talent strong {
    display: block;
    background: linear-gradient(135deg, #ffffff, #00a2fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.scene-talent li span {
    color: #b9c4ff;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .scene-card {
        display: none;
    }
}

/* Logo in the navbar (replaces the ROKET wordmark) */
.nav-logo .roket-logo {
    height: 46px !important;
    width: auto !important;
    max-width: none !important;
    margin: -6px 0;
}

/* More visible page scrollbar (dark track, light thumb, teal on hover) */
html::-webkit-scrollbar {
    width: 14px;
}

html::-webkit-scrollbar-track {
    background: #101216;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

html::-webkit-scrollbar-thumb {
    min-height: 56px;
    border: 3px solid #101216;
    border-radius: 999px;
    background: #6b7280;
}

html::-webkit-scrollbar-thumb:hover {
    background: #00a2fb;
}

@supports (-moz-appearance: none) {
    html {
        scrollbar-width: auto;
        scrollbar-color: #6b7280 #101216;
    }
}

/* Ventures page: one venture under the other */
.ventures-list-section {
    padding: 64px 0 96px;
    background: #08090a;
}

.ventures-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.venture-row {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 28px 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.venture-row:hover {
    border-color: rgba(0, 162, 251, 0.4);
    background: rgba(0, 162, 251, 0.05);
}

.venture-row .venture-logo {
    flex: none;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 16px;
    font-size: 26px;
}

.venture-row-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.venture-row-head h2 {
    margin: 0;
    color: #f7f8f8;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.venture-row-head .venture-tag {
    margin: 0;
}

.venture-row-body p {
    margin: 0;
    color: #8a8f98;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .venture-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }
}

/* Solutions without a detail page: shown as plain text, not clickable */
.mega-link.is-static,
.mega-link.is-static:hover {
    cursor: default;
    background: none;
    pointer-events: none;
}

/* Footer brand column: logo and social icons only */
.footer-brand-logo {
    margin-bottom: 16px !important;
}

.footer-brand .footer-social {
    margin-top: 0 !important;
}

/* Legal pages (privacy policy, KVKK) */
.legal-section {
    padding: 56px 0 96px;
    background: #08090a;
}

.legal-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.legal-toc {
    position: sticky;
    top: 96px;
    padding: 22px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.legal-toc strong {
    display: block;
    margin-bottom: 14px;
    color: #f7f8f8;
    font-size: 14px;
}

.legal-toc ol {
    max-height: 60vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.legal-toc li + li {
    margin-top: 2px;
}

.legal-toc a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: #8a8f98;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

.legal-toc a:hover {
    background: rgba(0, 162, 251, 0.08);
    color: #ffffff;
}

.legal-article {
    max-width: 820px;
    color: #b4b8c0;
    font-size: 16px;
    line-height: 1.8;
}

.legal-article h2 {
    margin: 48px 0 16px;
    padding-top: 8px;
    color: #f7f8f8;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    scroll-margin-top: 96px;
}

.legal-article h2:first-child {
    margin-top: 0;
}

.legal-article p {
    margin: 0 0 16px;
}

.legal-article a {
    color: #00a2fb;
}

.legal-article ul,
.legal-article ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.legal-article li {
    margin-bottom: 6px;
}

.legal-table {
    margin: 0 0 24px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.legal-article table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-article th,
.legal-article td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #d3d6db;
    text-align: left;
    vertical-align: top;
    background: none;
}

.legal-article th {
    background: rgba(255, 255, 255, 0.05);
    color: #f7f8f8;
    font-weight: 600;
}

.legal-article tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 900px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .legal-toc {
        position: static;
    }

    .legal-toc ol {
        max-height: 220px;
    }
}

/* Hero: darker backdrop and a more corporate typeface (Manrope) */
.hero-video {
    filter: grayscale(1) brightness(0.36);
}

.hero.hero-corporate::after {
    background:
        linear-gradient(180deg, rgba(8, 9, 10, 0.35) 0%, rgba(8, 9, 10, 0.1) 30%, rgba(8, 9, 10, 0.1) 62%, #08090a 100%),
        linear-gradient(90deg, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.72) 48%, rgba(8, 9, 10, 0.4) 100%);
}

.hero-corporate .hero-slogan {
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: clamp(38px, 5.6vw, 76px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.hero-corporate .hero-pretitle.hero-lead {
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: clamp(16px, 1.55vw, 20px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: #e3e8f4;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.hero-corporate .hero-pretitle.hero-lead .accent-word {
    color: #ffffff;
    font-weight: 700;
}

.hero-stats strong {
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-weight: 600;
}

/* Careers page */
.career-section {
    padding: 56px 0 96px;
    background: #08090a;
}

.career-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: 56px;
    align-items: start;
}

.career-intro h2 {
    margin: 0 0 20px;
    color: #f7f8f8;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.career-types {
    display: grid;
    gap: 12px;
}

.career-type {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    color: #8a8f98;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.career-type i {
    grid-row: span 2;
    align-self: center;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 162, 251, 0.12);
    color: #00a2fb;
}

.career-type strong {
    color: #f7f8f8;
    font-size: 16px;
    font-weight: 600;
}

.career-type span {
    font-size: 13px;
}

.career-type:hover,
.career-type.is-active {
    border-color: rgba(0, 162, 251, 0.55);
    background: rgba(0, 162, 251, 0.07);
}

.career-note {
    margin: 20px 0 0;
    color: #8a8f98;
    font-size: 14px;
    line-height: 1.6;
}

.career-form {
    display: grid;
    gap: 16px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
}

.career-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.career-row[hidden] {
    display: none;
}

.career-form label > span {
    display: block;
    margin-bottom: 6px;
    color: #b4b8c0;
    font-size: 13px;
    font-weight: 500;
}

.career-form input[type="text"],
.career-form input[type="email"],
.career-form input[type="tel"],
.career-form input[type="url"],
.career-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(8, 9, 10, 0.6);
    color: #f7f8f8;
    font: inherit;
    font-size: 15px;
}

.career-form input:focus,
.career-form textarea:focus {
    outline: none;
    border-color: #00a2fb;
    box-shadow: 0 0 0 3px rgba(0, 162, 251, 0.18);
}

.career-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #8a8f98;
    font-size: 13px;
    line-height: 1.5;
}

.career-consent input {
    margin-top: 3px;
}

.career-consent a {
    color: #00a2fb;
}

.career-form .btn {
    justify-self: start;
}

@media (max-width: 900px) {
    .career-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .career-row {
        grid-template-columns: 1fr;
    }

    .career-form {
        padding: 22px;
    }
}

/* =====================================================================
   PRODUCT PAGES: same language as the rest of the site
   (flat dark canvas, hairline panels, Manrope headings, teal accent)
   ===================================================================== */

/* ---- listing: #productsView ---- */
#productsView .products-hero-title,
#productView .product-hero h1,
#productView .section-title,
#productView .other-products .section-title {
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.03em;
}

#productsView .dx-products {
    padding: 64px 0 112px;
    background: #08090a !important;
}

#productsView .dx-products .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

#productsView .dx-product-row {
    position: relative;
    display: block;
    min-height: 0;
    padding: 32px 32px 28px;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: #f7f8f8;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

#productsView .dx-product-row::before,
#productsView .dx-product-row::after {
    display: none !important;
}

#productsView .dx-product-row:hover {
    border-color: rgba(0, 162, 251, 0.45) !important;
    background: rgba(0, 162, 251, 0.045) !important;
    transform: translateY(-2px);
}

/* the two modules that are on sale get a teal edge */
#productsView .dx-product-row:nth-child(-n+2) {
    border-color: rgba(0, 162, 251, 0.3) !important;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(0, 162, 251, 0.12), transparent 70%),
        rgba(255, 255, 255, 0.03) !important;
}

#productsView .dx-product-index {
    position: absolute;
    top: 30px;
    right: 32px;
    color: rgba(255, 255, 255, 0.28) !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

#productsView .dx-product-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
}

#productsView .dx-product-text .badge {
    align-self: flex-start;
    margin: 0 0 20px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: transparent !important;
    color: #b4b8c0 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#productsView .dx-product-text .badge.ready {
    border-color: rgba(0, 162, 251, 0.5);
    background: rgba(0, 162, 251, 0.12) !important;
    color: #68d4fd !important;
}

#productsView .dx-product-text h2 {
    margin: 0 0 6px;
    color: #ffffff !important;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

#productsView .dx-product-text h3 {
    margin: 0 0 16px;
    color: #9aa0ab !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
}

#productsView .dx-product-text p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin: 0 0 22px;
    overflow: hidden;
    color: #8a8f98 !important;
    font-size: 15px;
    line-height: 1.65;
}

#productsView .dx-product-link {
    margin-top: auto;
    color: #00a2fb !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

#productsView .dx-product-link i {
    transition: transform 0.2s ease;
}

#productsView .dx-product-row:hover .dx-product-link i {
    transform: translateX(4px);
}

/* ---- detail: #productView ---- */
#productView {
    background: #08090a;
}

#productView .product-hero h1 {
    font-weight: 700;
}

#productView .product-facts {
    padding: 8px 24px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

#productView .pms-section,
#productView .features,
#productView .how-it-works,
#productView .product-preview,
#productView .pricing,
#productView .other-products {
    padding: 88px 0 0;
    background: #08090a !important;
    border: 0;
}

#productView .pricing,
#productView .other-products {
    padding-bottom: 96px;
}

#productView .section-title {
    max-width: 820px;
    margin: 0 0 20px;
    color: #f7f8f8 !important;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
}

#productView .section-title .highlight {
    color: #00a2fb !important;
    -webkit-text-fill-color: #00a2fb;
}

#productView .roket-modules-intro,
#productView .section-subtitle {
    max-width: 780px;
    margin: 0 0 24px !important;
    color: #9aa0ab !important;
    font-size: 17px;
    line-height: 1.7;
    text-align: left !important;
}

#productView .pms-quote {
    max-width: 780px;
    margin: 0 0 40px !important;
    padding: 4px 0 4px 20px;
    border-left: 2px solid #00a2fb;
    color: #b4b8c0 !important;
    font-size: 16px;
    font-style: normal !important;
    line-height: 1.7;
    text-align: left !important;
}

#productView .pms-visual,
#productView .video-container {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: #0d0f12;
}

#productView .pms-grid,
#productView .features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

#productView .pms-card,
#productView .feature-card,
#productView .step {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease;
}

#productView .pms-card:hover,
#productView .feature-card:hover,
#productView .step:hover {
    border-color: rgba(0, 162, 251, 0.4) !important;
}

#productView .pms-icon,
#productView .feature-number,
#productView .step-number {
    color: #00a2fb !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

#productView .pms-card h3,
#productView .feature-card h3,
#productView .step h3 {
    margin: 10px 0 8px;
    color: #f7f8f8 !important;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#productView .pms-card p,
#productView .feature-card p,
#productView .step p,
#productView .card-text {
    color: #8a8f98 !important;
    font-size: 14px;
    line-height: 1.65;
}

#productView .version-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

#productView .version-column {
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    box-shadow: none !important;
}

#productView .version-column.version-1 {
    border-color: rgba(0, 162, 251, 0.3) !important;
}

#productView .version-column h3 {
    margin: 0 0 8px;
    color: #ffffff !important;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

#productView .feature-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

#productView .feature-list li {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #b4b8c0 !important;
    font-size: 14px;
    line-height: 1.5;
}

#productView .feature-list li:last-child {
    border-bottom: 0 !important;
}

#productView .feature-list li.highlight {
    color: #00a2fb !important;
    font-weight: 600;
}

#productView .steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

#productView .preview-mockup,
#productView .carousel {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    background: #0d0f12 !important;
    box-shadow: none !important;
}

#productView .carousel-slide img {
    border-radius: 12px;
}

#productView .other-product-card {
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: #f7f8f8 !important;
    box-shadow: none !important;
}

#productView .other-product-card strong {
    font-family: 'Inter', system-ui, sans-serif;
    color: #ffffff !important;
}

#productView .other-product-card small {
    color: #8a8f98 !important;
}

@media (max-width: 1000px) {
    #productView .pms-grid,
    #productView .features-grid,
    #productView .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    #productsView .dx-products .container,
    #productView .version-comparison,
    #productView .pms-grid,
    #productView .features-grid,
    #productView .steps {
        grid-template-columns: 1fr;
    }
}

/* ---- listing v2: even two-column grid of dark cards (overrides the old bento) ---- */
#productsView .dx-products > .container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

#productsView .dx-product-row:nth-child(n) {
    grid-column: auto !important;
    min-height: 0 !important;
    padding: 32px 32px 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: #f7f8f8 !important;
}

#productsView .dx-product-row:nth-child(-n+2) {
    border-color: rgba(0, 162, 251, 0.3) !important;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(0, 162, 251, 0.12), transparent 70%),
        rgba(255, 255, 255, 0.03) !important;
}

#productsView .dx-product-row:nth-child(n):hover {
    border-color: rgba(0, 162, 251, 0.45) !important;
    background: rgba(0, 162, 251, 0.045) !important;
}

#productsView .dx-product-row::after {
    display: none !important;
}

#productsView .dx-product-row .dx-product-index {
    position: absolute !important;
    top: 30px;
    right: 32px;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.28) !important;
}

#productsView .dx-product-row .dx-product-text .badge {
    position: static !important;
    align-self: flex-start;
    margin: 0 0 20px !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: transparent !important;
    color: #b4b8c0 !important;
}

#productsView .dx-product-row .dx-product-text .badge.ready {
    border-color: rgba(0, 162, 251, 0.5) !important;
    background: rgba(0, 162, 251, 0.12) !important;
    color: #68d4fd !important;
}

#productsView .dx-product-row .dx-product-text h2 {
    max-width: none !important;
    margin: 0 0 6px !important;
    color: #ffffff !important;
    font-family: 'Inter', 'Inter', system-ui, sans-serif !important;
    font-size: clamp(26px, 2.6vw, 34px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
}

#productsView .dx-product-row .dx-product-text h3 {
    margin: 0 0 16px !important;
    color: #9aa0ab !important;
    font-size: 14px !important;
}

#productsView .dx-product-row .dx-product-text p {
    -webkit-line-clamp: 4;
    max-width: none !important;
    color: #8a8f98 !important;
}

#productsView .dx-product-row .dx-product-link {
    color: #00a2fb !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

@media (max-width: 900px) {
    #productsView .dx-products > .container {
        grid-template-columns: 1fr !important;
    }
}

/* product detail: last touches */
#productView .product-hero h1 {
    font-family: 'Inter', 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

#productView .roket-modules-intro,
#productView .section-subtitle,
#productView .pms-quote {
    padding-left: 0 !important;
    text-indent: 0 !important;
}

#productView .pms-quote {
    padding-left: 20px !important;
}

#productView .carousel-slide,
#productView .carousel-container {
    background: #0d0f12 !important;
}

#productView .roket-modules-intro,
#productView .roket-modules-intro p {
    max-width: 780px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    color: #9aa0ab !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}

/* ---- pricing: dark hairline cards, content and prices untouched ---- */
#productView .pricing-trust-line,
#productView .pricing-note {
    max-width: 780px;
    margin: 0 0 12px !important;
    color: #8a8f98 !important;
    font-size: 14px;
    text-align: left !important;
}

#productView .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 32px;
}

#productView .pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px 28px;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: #f7f8f8 !important;
    box-shadow: none !important;
    transform: none !important;
}

#productView .pricing-card:hover {
    border-color: rgba(0, 162, 251, 0.45) !important;
}

#productView .pricing-card.popular {
    border-color: rgba(0, 162, 251, 0.55) !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 162, 251, 0.16), transparent 70%),
        rgba(255, 255, 255, 0.035) !important;
}

#productView .pricing-card.enterprise-card {
    grid-column: auto !important;
}

#productView .popular-tag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 999px;
    background: #00a2fb !important;
    color: #08090a !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

#productView .trial-chip {
    align-self: flex-start;
    margin: 0 0 18px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 162, 251, 0.4);
    border-radius: 999px;
    background: rgba(0, 162, 251, 0.1) !important;
    color: #68d4fd !important;
    font-size: 12px;
    font-weight: 600;
}

#productView .trial-chip.enterprise-chip {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06) !important;
    color: #d3d6db !important;
}

#productView .pricing-title {
    margin: 0 0 8px;
    color: #ffffff !important;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#productView .pricing-subtitle-card {
    min-height: 42px;
    margin: 0 0 20px;
    color: #8a8f98 !important;
    font-size: 14px;
    line-height: 1.5;
}

#productView .price-card-block {
    margin: 0 0 16px;
    padding: 18px 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    background: rgba(8, 9, 10, 0.5) !important;
    box-shadow: none !important;
}

#productView .price-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

#productView .price-amount,
#productView .price.price-custom {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

#productView .price-unit {
    color: #8a8f98 !important;
    font-size: 15px;
}

#productView .trial-note {
    margin: 10px 0 0;
    color: #7ae6a8 !important;
    font-size: 13px;
    line-height: 1.45;
}

#productView .annual-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #8a8f98 !important;
    font-size: 13px;
}

#productView .annual-line strong {
    color: #f7f8f8 !important;
}

#productView .annual-save-badge {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(122, 230, 168, 0.14) !important;
    color: #7ae6a8 !important;
    font-size: 12px;
    font-weight: 600;
}

#productView .pricing-microcopy {
    margin: 0 0 16px;
}

#productView .microcopy-line {
    color: #8a8f98 !important;
    font-size: 12px;
    line-height: 1.6;
}

#productView .pricing-card .btn {
    width: 100%;
    margin-bottom: 16px;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

#productView .pricing-card .btn-gradient,
#productView .pricing-card .btn-white {
    background: #ffffff !important;
    color: #08090a !important;
}

#productView .pricing-card.popular .btn-white {
    background: #00a2fb !important;
    color: #08090a !important;
}

#productView .pricing-card .btn-enterprise {
    border-color: rgba(255, 255, 255, 0.25);
    background: transparent !important;
    color: #ffffff !important;
}

#productView .pricing-card .btn:hover {
    opacity: 0.9;
}

#productView .enterprise-trust-signals {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03) !important;
}

#productView .enterprise-trust-item {
    color: #d3d6db !important;
    font-size: 13px;
}

#productView .trust-check,
#productView .check-icon {
    color: #00a2fb !important;
}

#productView .plan-limits-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
}

#productView .plan-limit-chip,
#productView .pricing-card.popular .plan-limit-chip {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #c4c8d0 !important;
    font-size: 12px;
}

#productView .pricing-card .features-list {
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    list-style: none;
}

#productView .pricing-card .features-list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    color: #b4b8c0 !important;
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 1000px) {
    #productView .pricing-grid {
        grid-template-columns: 1fr;
    }
}

#productView .enterprise-trust-item {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#productView .preview-mockup .carousel-slide,
#productView .carousel-slide img {
    background: #0d0f12 !important;
}

#productView .features .feature-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

#productView .features .feature-content h3 {
    margin-top: 0;
}

/* Product detail hero: no info box on the right */
#productView .product-facts {
    display: none !important;
}

#productView .product-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* No sale-status labels ("Satışa Hazır" / "Yakında") on the product pages */
#productsView .dx-product-text .badge,
#productView .badge,
.product-status {
    display: none !important;
}

/* PMS plan comparison table (white band) */
.plan-compare {
    margin-top: 56px;
}

.plan-compare-title {
    margin: 0 0 20px;
    color: #0b0d10;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.plan-compare-scroll {
    overflow-x: auto;
    border: 1px solid rgba(8, 9, 10, 0.12);
    border-radius: 16px;
    background: #ffffff;
}

.plan-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}

.plan-compare-table th,
.plan-compare-table td {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(8, 9, 10, 0.08);
    color: #3a3f47;
    text-align: center;
    vertical-align: middle;
}

.plan-compare-table thead th {
    background: #f1f4f7;
    color: #0b0d10;
    font-weight: 700;
}

.plan-compare-table thead th small {
    color: #5b616b;
    font-weight: 500;
}

.plan-compare-table tbody th {
    color: #0b0d10;
    font-weight: 500;
    text-align: left;
}

.plan-compare-table tbody tr:last-child th,
.plan-compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.plan-compare-table tbody tr:hover {
    background: #f8fafb;
}

.plan-compare-table td:nth-child(3) {
    background: rgba(0, 104, 206, 0.05);
}

.plan-compare-table .cmp-yes {
    color: #0068ce;
    font-size: 17px;
    font-weight: 700;
}

.plan-compare-table .cmp-no {
    color: #a6acb5;
}

#productView .plan-compare .plan-compare-title {
    color: #0b0d10 !important;
    -webkit-text-fill-color: #0b0d10 !important;
}

#productView .pricing .plan-compare-table thead th:first-child {
    text-align: left;
}

/* Plan features live in the comparison table: cards stay compact */
#productView .pricing .pricing-card .features-list,
#productView .pricing .pricing-card .plan-limits-line {
    display: none !important;
}

#productView .pricing .pricing-card {
    justify-content: flex-start;
}

/* HR packages: static cards, feature lists stay visible */
#productView .hr-pricing .pricing-card .features-list {
    display: block !important;
}

#productView .hr-pricing .pricing-card .btn {
    margin-bottom: 20px;
}

#productView .hr-pricing .stj-kicker {
    color: #0068ce;
}

#productView .hr-pricing .pricing-card .features-list li {
    flex-wrap: nowrap;
}

/* Sales e-mail modal */
.sales-modal {
    max-width: 640px;
}

.sales-modal .modal-subtitle {
    margin-bottom: 20px;
}

.sales-alt {
    margin: 14px 0 0;
    color: #8a8f98;
    font-size: 13px;
}

.sales-alt a {
    color: #00a2fb;
}

/* Hero: futuristic headline (Space Grotesk) and a glowing signal line between title and text */
.hero-corporate .hero-slogan {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: clamp(38px, 5.4vw, 74px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-shadow: 0 0 40px rgba(0, 162, 251, 0.22), 0 2px 24px rgba(0, 0, 0, 0.55);
    margin-bottom: 0;
}

.hero-corporate .hero-slogan::after {
    content: "";
    display: block;
    width: min(340px, 60%);
    height: 2px;
    margin: 28px 0 30px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%) 0 0 / 80px 100% no-repeat,
        linear-gradient(90deg, #00a2fb 0%, #3573fd 55%, rgba(53, 115, 253, 0) 100%);
    box-shadow: 0 0 14px rgba(0, 162, 251, 0.65);
    animation: heroSignal 3.2s linear infinite;
}

@keyframes heroSignal {
    0% { background-position: -80px 0, 0 0; }
    100% { background-position: 360px 0, 0 0; }
}

.hero-corporate .hero-pretitle.hero-lead {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hero-corporate .hero-slogan::after {
        animation: none;
    }
}

/* the old teal rule under the paragraph is replaced by the signal line above it */
.hero-corporate .hero-pretitle::after {
    display: none !important;
}

/* Hero v3: three-line headline, serif accent for the closing sentence */
.hero-corporate .hero-slogan {
    font-size: clamp(42px, 6.4vw, 92px);
    line-height: 1.02;
}

.hero-corporate .hero-pretitle.hero-lead .accent-word {
    display: block;
    margin-top: 18px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(30px, 3.2vw, 44px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    background: linear-gradient(100deg, #ffffff 0%, #68d4fd 60%, #00a2fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Corporate accent line between headline and text: short, solid, no glow */
.hero-corporate .hero-slogan::after {
    width: 72px;
    height: 3px;
    margin: 30px 0 30px;
    border-radius: 0;
    background: #00a2fb;
    box-shadow: none;
    animation: none;
}

/* Hero text: clean corporate sans (Inter) for both the paragraph and the closing sentence */
.hero-corporate .hero-pretitle.hero-lead {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.01em;
    color: #d3d9e6;
}

.hero-corporate .hero-pretitle.hero-lead .accent-word {
    display: block;
    margin-top: 16px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(19px, 1.8vw, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

/* Mobile safety: grid children may shrink, long words wrap */
.legal-layout > *,
.career-layout > *,
.about-location-card > *,
.stj-duo-grid > *,
.stj-orgs-card > * {
    min-width: 0;
}

.legal-article {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 900px) {
    .legal-toc ol {
        max-height: 200px;
    }
}

/* ===== Mobile polish ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, svg, canvas, iframe {
    max-width: 100%;
}

@media (max-width: 768px) {
    /* mobile drawer: language selector and call-to-action stack cleanly */
    .mobile-nav-footer {
        display: grid;
        gap: 12px;
    }

    .mobile-nav-footer .language-selector,
    .navbar .mobile-language-selector {
        margin: 0;
        padding: 0;
        border-left: 0;
        justify-content: flex-start;
    }

    .mobile-nav-footer .btn {
        width: 100%;
    }

    /* tap targets */
    .btn,
    .lang-btn,
    .mobile-nav-toggle,
    .career-type,
    .sched-day,
    .sched-slot {
        min-height: 44px;
    }

    /* headlines never overflow */
    h1, h2, h3, .section-title {
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .hero-corporate .hero-slogan {
        font-size: clamp(34px, 10.5vw, 48px);
    }

    /* forms: one column, big fields (and 16px so iOS does not zoom) */
    input, select, textarea {
        font-size: 16px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .modal-content {
        width: calc(100% - 24px);
        max-width: none;
        margin: 12px auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* map and video keep a sensible height */
    .roket-map {
        min-height: 300px;
    }

    .staj-video video {
        max-height: 260px;
    }

    .venture-row {
        gap: 16px;
    }

    .plan-compare-table {
        min-width: 560px;
    }

    .hero-stats {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 380px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-corporate .hero-slogan {
        font-size: 32px;
    }

    .staj-stat strong,
    .about-facts strong {
        font-size: 30px;
    }

    .pricing-card {
        padding: 22px 18px !important;
    }
}

/* Product pages: fully dark. The plan comparison table follows the same dark panels. */
#productView .features,
#productView .pricing {
    background: #08090a !important;
}

#productView .plan-compare .plan-compare-title {
    color: #f7f8f8 !important;
    -webkit-text-fill-color: #f7f8f8 !important;
}

#productView .plan-compare-scroll {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
}

#productView .plan-compare-table th,
#productView .plan-compare-table td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #b4b8c0;
}

#productView .plan-compare-table thead th {
    background: rgba(255, 255, 255, 0.05);
    color: #f7f8f8;
}

#productView .plan-compare-table thead th small {
    color: #8a8f98;
}

#productView .plan-compare-table tbody th {
    color: #e6e8ec;
}

#productView .plan-compare-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

#productView .plan-compare-table td:nth-child(3) {
    background: rgba(0, 162, 251, 0.08);
}

#productView .plan-compare-table .cmp-yes {
    color: #00a2fb;
}

#productView .plan-compare-table .cmp-no {
    color: #5b616b;
}

/* Roket-LMS (on-premise) page */
.lms-personas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.lms-persona {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.25s ease;
}

.lms-persona:hover {
    border-color: rgba(0, 162, 251, 0.45);
}

.lms-persona-no {
    color: #00a2fb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.lms-persona h3 {
    margin: 10px 0 14px;
    color: #f7f8f8;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lms-persona p {
    margin: 0 0 10px;
    color: #8a8f98;
    font-size: 14px;
    line-height: 1.6;
}

.lms-persona p strong {
    display: block;
    color: #d3d6db;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lms-onprem {
    padding: 48px;
    border: 1px solid rgba(0, 162, 251, 0.3);
    border-radius: 24px;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(0, 162, 251, 0.16), transparent 70%),
        rgba(255, 255, 255, 0.025);
}

.lms-onprem-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
    margin-top: 32px;
}

.lms-onprem-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.lms-onprem-item > i {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 162, 251, 0.14);
    color: #00a2fb;
}

.lms-onprem-item h3 {
    margin: 0 0 6px;
    color: #f7f8f8;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.lms-onprem-item p {
    margin: 0;
    color: #9aa0ab;
    font-size: 14px;
    line-height: 1.65;
}

.lms-cta {
    padding: 64px 32px;
    border: 1px solid rgba(0, 162, 251, 0.25);
    border-radius: 24px;
    background:
        radial-gradient(ellipse 70% 90% at 50% 0%, rgba(0, 162, 251, 0.22), transparent 70%),
        #0d1114;
    text-align: center;
}

.lms-cta .section-title {
    max-width: 720px;
    margin: 0 auto 16px;
    text-align: center;
}

.lms-cta > p {
    max-width: 640px;
    margin: 0 auto 28px;
    color: #9aa0ab;
    font-size: 16px;
    line-height: 1.7;
}

.lms-cta .lms-cta-mail {
    margin: 20px 0 0;
}

.lms-cta-mail a {
    color: #00a2fb;
}

#productView .lms-personas-section,
#productView .lms-onprem-section,
#productView .lms-cta-section {
    padding-top: 72px;
}

@media (max-width: 1100px) {
    .lms-personas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .lms-personas,
    .lms-onprem-grid {
        grid-template-columns: 1fr;
    }

    .lms-onprem {
        padding: 28px 22px;
    }

    .lms-cta {
        padding: 40px 22px;
    }
}

/* LMS page: illustrations from the home page language, plus a stat strip */
.lms-fig {
    display: block;
    color: rgba(255, 255, 255, 0.5);
}

.lms-fig .fig-hl,
.lms-fig .fig-dot,
.lms-fig .fig-ring {
    color: #00a2fb;
    stroke: #00a2fb;
}

.lms-fig .fig-dot {
    fill: #00a2fb;
    stroke: none;
}

.lms-fig .fig-person path,
.lms-fig .fig-person circle {
    fill: #08090a;
}

.lms-fig .fig-plate polygon {
    stroke-opacity: 0.7;
}

.lms-fig-xl {
    height: auto;
    margin: 0;
}

.lms-fig-xl .fig {
    width: 100%;
    height: auto;
    max-height: 320px;
    overflow: visible;
}

.lms-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.lms-split-text .roket-modules-intro,
.lms-split-text .pms-quote {
    max-width: none !important;
}

.lms-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.lms-head-split .lms-fig {
    height: 190px;
    margin: 0;
}

.lms-head-split .fig {
    width: 100%;
    height: 100%;
}

.lms-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 48px 0 8px;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lms-stats li {
    padding: 26px 20px;
}

.lms-stats li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.lms-stats strong {
    display: block;
    color: #ffffff;
    font-family: 'Inter', 'Inter', system-ui, sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.lms-stats li:nth-child(odd) strong {
    color: #00a2fb;
}

.lms-stats span {
    display: block;
    margin-top: 8px;
    color: #8a8f98;
    font-size: 13px;
}

.lms-onprem-split {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
    gap: 40px;
    align-items: center;
    margin-top: 32px;
}

.lms-onprem-split .lms-onprem-grid {
    margin-top: 0;
}

@media (max-width: 1000px) {
    .lms-split,
    .lms-head-split,
    .lms-onprem-split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .lms-fig-xl .fig {
        max-height: 240px;
    }

    .lms-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lms-stats li:nth-child(odd) {
        border-left: 0;
    }

    .lms-stats li:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* =====================================================================
   Roket-LMS: typography and layout follow the home page
   (Inter, light weights, soft grey second sentence, flat hairline columns)
   ===================================================================== */
#productView [data-product-detail="lms"] .section-title {
    max-width: 900px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #f7f8f8 !important;
    -webkit-text-fill-color: #f7f8f8;
    margin: 0 0 24px;
}

#productView [data-product-detail="lms"] .section-title .title-soft {
    color: #8a8f98;
    -webkit-text-fill-color: #8a8f98;
}

#productView [data-product-detail="lms"] .roket-modules-intro p,
#productView [data-product-detail="lms"] .roket-modules-intro {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(17px, 1.7vw, 21px) !important;
    font-weight: 400;
    line-height: 1.55 !important;
    letter-spacing: -0.015em;
    color: #b4bcd0 !important;
}

#productView [data-product-detail="lms"] .pms-quote {
    border-left-color: #00a2fb;
}

#productView [data-product-detail="lms"] .pms-quote p {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    letter-spacing: -0.01em;
}

/* flat hairline columns instead of boxed cards */
#productView [data-product-detail="lms"] .pms-grid,
#productView .lms-personas {
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#productView [data-product-detail="lms"] .pms-card,
#productView .lms-persona {
    padding: 40px 36px 36px;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#productView [data-product-detail="lms"] .pms-card:nth-child(n+4) {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#productView [data-product-detail="lms"] .pms-card:not(:nth-child(3n+1)),
#productView .lms-persona + .lms-persona {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#productView [data-product-detail="lms"] .pms-card:nth-child(3n+1),
#productView .lms-persona:first-child {
    padding-left: 0;
}

#productView [data-product-detail="lms"] .pms-icon,
#productView .lms-persona-no {
    color: #8a8f98 !important;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

#productView [data-product-detail="lms"] .pms-card h3,
.lms-persona h3,
.lms-onprem-item h3 {
    margin: 12px 0 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #f7f8f8 !important;
}

#productView [data-product-detail="lms"] .pms-card p,
.lms-persona p,
.lms-onprem-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #8a8f98 !important;
}

.lms-persona p strong {
    color: #b4bcd0;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* stat strip: the home hero numbers */
.lms-stats strong {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 500;
    letter-spacing: -0.04em;
}

/* on-premise block: flat, hairline top and bottom */
.lms-onprem {
    padding: 56px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: none;
}

.lms-onprem-item > i {
    border-radius: 8px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #00a2fb;
}

/* versions: flat hairline columns */
#productView [data-product-detail="lms"] .version-comparison {
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#productView [data-product-detail="lms"] .version-column {
    padding: 40px 36px;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}

#productView [data-product-detail="lms"] .version-column.version-1 {
    padding-left: 0;
}

#productView [data-product-detail="lms"] .version-column.version-2 {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#productView [data-product-detail="lms"] .version-column h3 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.03em;
}

#productView [data-product-detail="lms"] .version-column h4 {
    color: #8a8f98;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* closing call to action: flat, like the home CTA band */
.lms-cta {
    padding: 72px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: none;
    text-align: left;
}

.lms-cta .section-title,
.lms-cta > p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

@media (max-width: 1000px) {
    #productView [data-product-detail="lms"] .pms-grid,
    .lms-personas {
        grid-template-columns: 1fr;
    }

    #productView [data-product-detail="lms"] .pms-card,
    .lms-persona {
        padding: 28px 0 !important;
        border-left: 0 !important;
    }

    #productView [data-product-detail="lms"] .pms-card + .pms-card,
    #productView .lms-persona + .lms-persona {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    #productView [data-product-detail="lms"] .version-comparison {
        grid-template-columns: 1fr;
    }

    #productView [data-product-detail="lms"] .version-column {
        padding: 28px 0;
    }

    #productView [data-product-detail="lms"] .version-column.version-2 {
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

#productView [data-product-detail="lms"] .pms-icon,
#productView [data-product-detail="lms"] .pms-icon::before,
#productView [data-product-detail="lms"] .pms-icon::after {
    color: #8a8f98 !important;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

#productView [data-product-detail="lms"] .pms-card::before {
    color: #8a8f98 !important;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

#productView [data-product-detail="lms"] .pms-card .card-text h3,
#productView [data-product-detail="lms"] .pms-card h3 {
    color: #f7f8f8 !important;
    -webkit-text-fill-color: #f7f8f8 !important;
}

/* =====================================================================
   Product banners: a grainy grayscale photo (stills from our own film) with a
   real-looking product screen in front, like linear.app/mobile.
   All sizes in em so the scene scales with the viewport.
   ===================================================================== */
.pbanner {
    position: relative;
    box-sizing: border-box;
    height: calc(36em + 64px);
    padding-top: 64px;
    overflow: hidden;
    font-size: min(13px, 1.45vw);
    background: #050607;
}

.pbanner-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.62) contrast(1.08);
    animation: pbPhoto 28s ease-in-out infinite alternate;
}

@keyframes pbPhoto {
    0% { transform: scale(1.03); }
    100% { transform: scale(1.12); }
}

.pbanner[data-product="pms"] .pbanner-photo { background-image: url('/images/banner/pms.jpg'); }
.pbanner[data-product="tm"] .pbanner-photo { background-image: url('/images/banner/tm.jpg'); }
.pbanner[data-product="prod"] .pbanner-photo { background-image: url('/images/banner/prod.jpg'); }
.pbanner[data-product="crm"] .pbanner-photo { background-image: url('/images/banner/crm.jpg'); }
.pbanner[data-product="lms"] .pbanner-photo { background-image: url('/images/banner/lms.jpg'); }
.pbanner[data-product="hr"] .pbanner-photo { background-image: url('/images/banner/hr.jpg'); }
.pbanner[data-product="proc"] .pbanner-photo { background-image: url('/images/banner/proc.jpg'); }
.pbanner[data-product="dt"] .pbanner-photo { background-image: url('/images/banner/dt.jpg'); }

.pbanner-grain {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pbanner-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 6, 7, 0.55) 0%, rgba(5, 6, 7, 0) 22%, rgba(5, 6, 7, 0) 50%, #08090a 100%),
        radial-gradient(ellipse 80% 90% at 50% 40%, transparent 55%, rgba(5, 6, 7, 0.55) 100%);
}

.pbanner-scene {
    position: absolute;
    inset: 64px 0 0 0;
}

.pbanner-scene[hidden] {
    display: none;
}

#productView .product-hero {
    padding-top: 48px;
}

/* the app window, angled like the phone on the Linear page */
.ui-win {
    position: absolute;
    top: 3.4em;
    left: 50%;
    display: flex;
    width: 66em;
    margin-left: -21em;
    min-height: 40em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2em;
    background: #0c0f13;
    color: #c9ced8;
    font-size: 1em;
    line-height: 1.35;
    box-shadow: 0 4em 9em rgba(0, 0, 0, 0.7);
    transform: perspective(110em) rotateX(14deg) rotateY(-15deg) rotateZ(3.5deg);
    transform-origin: 50% 0;
}

.ui-side {
    flex: none;
    width: 12em;
    padding: 1.4em 1em;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: #090b0e;
}

.ui-ws {
    display: flex;
    gap: 0.7em;
    align-items: center;
    margin-bottom: 1.6em;
    color: #eef1f6;
    font-size: 1.05em;
    font-weight: 600;
}

.ui-ws i {
    width: 1.3em;
    height: 1.3em;
    border-radius: 0.35em;
    background: #00a2fb;
}

.ui-side ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-side li {
    padding: 0.55em 0.8em;
    border-radius: 0.5em;
    color: #8a93a3;
    font-size: 1em;
}

.ui-side li.on {
    background: rgba(255, 255, 255, 0.07);
    color: #eef1f6;
}

.ui-main {
    flex: 1;
    min-width: 0;
    padding: 1.4em 1.6em;
}

.ui-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.3em;
}

.ui-head h5 {
    margin: 0;
    color: #eef1f6;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ui-tabs {
    display: flex;
    gap: 0.3em;
}

.ui-tabs i {
    padding: 0.35em 0.9em;
    border-radius: 0.5em;
    color: #8a93a3;
    font-size: 0.95em;
    font-style: normal;
}

.ui-tabs i.on {
    background: rgba(255, 255, 255, 0.08);
    color: #eef1f6;
}

.ui-av {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: #2a313c;
    color: #c9ced8;
    font-size: 0.78em;
    font-style: normal;
    font-weight: 600;
}

/* columns / cards */
.ui-cols {
    display: grid;
    gap: 1.1em;
}

.ui-cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-cols.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ui-col h6 {
    margin: 0 0 0.8em;
    color: #8a93a3;
    font-size: 1em;
    font-weight: 600;
}

.ui-col h6 small {
    margin-left: 0.4em;
    color: #5b6472;
}

.ui-card {
    margin-bottom: 0.8em;
    padding: 0.95em 1em;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.8em;
    background: #11151b;
}

.ui-card small {
    display: block;
    color: #5b6472;
    font-size: 0.9em;
}

.ui-card p {
    margin: 0.25em 0 0;
    color: #e3e7ee;
    font-size: 1.02em;
    font-weight: 500;
}

.ui-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8em;
}

.ui-foot em {
    padding: 0.15em 0.7em;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 99px;
    color: #9aa3b3;
    font-size: 0.88em;
    font-style: normal;
}

.ui-prog {
    display: block;
    height: 0.35em;
    margin-top: 0.8em;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.ui-prog i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 99px;
    background: #00a2fb;
    transform-origin: left;
    animation: pbFill 6s ease-in-out infinite alternate;
}

@keyframes pbFill {
    0% { transform: scaleX(0.7); }
    100% { transform: scaleX(1); }
}

/* rows (tasks, candidates) */
.ui-rows .ui-row,
.ui-rows .ui-trow {
    display: grid;
    align-items: center;
    gap: 1em;
    padding: 0.85em 0.3em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ui-row {
    grid-template-columns: 1.4em 5.2em 1fr 2em 8em;
}

.ui-row small {
    color: #5b6472;
}

.ui-row span {
    color: #e3e7ee;
}

.ui-row em {
    color: #8a93a3;
    font-style: normal;
    text-align: right;
}

.ui-box {
    width: 1.3em;
    height: 1.3em;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.35em;
}

.ui-box.ok {
    position: relative;
    border-color: #00a2fb;
    background: #00a2fb;
}

.ui-box.ok::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #04121c;
    font-size: 0.85em;
    font-weight: 800;
}

.ui-thead,
.ui-trow {
    grid-template-columns: 2em 8em 1fr 11em 7.5em;
}

.ui-thead {
    display: grid;
    gap: 1em;
    padding: 0 0.3em 0.6em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #5b6472;
    font-size: 0.92em;
}

.ui-trow span {
    color: #e3e7ee;
}

.ui-trow em {
    color: #9aa3b3;
    font-style: normal;
}

.ui-match {
    display: flex;
    gap: 0.7em;
    align-items: center;
}

.ui-match i {
    display: block;
    width: 5em;
    height: 0.35em;
    border-radius: 99px;
    background: linear-gradient(90deg, #00a2fb var(--w), rgba(255, 255, 255, 0.1) 0);
}

.ui-match b {
    color: #c9ced8;
    font-weight: 500;
}

/* roadmap */
.ui-q,
.ui-lane {
    display: grid;
    grid-template-columns: 11em 1fr;
    align-items: center;
}

.ui-q {
    margin-bottom: 0.4em;
    color: #5b6472;
    font-size: 0.95em;
}

.ui-q i {
    display: inline-block;
    width: 25%;
    font-style: normal;
}

.ui-q {
    grid-template-columns: 11em repeat(4, 1fr);
}

.ui-lane {
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ui-lane > span {
    color: #8a93a3;
}

.ui-lane > div {
    position: relative;
    height: 1.9em;
}

.ui-lane b {
    position: absolute;
    top: 0;
    left: var(--l);
    width: var(--w);
    padding: 0.3em 0.8em;
    overflow: hidden;
    border-radius: 0.5em;
    color: #04121c;
    font-size: 0.92em;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform-origin: left;
    animation: pbGrow 7s ease-in-out infinite alternate;
}

.ui-lane b.c0 { background: #00a2fb; }
.ui-lane b.c1 { background: #68d4fd; }
.ui-lane b.c2 { background: #8fa8ff; }

@keyframes pbGrow {
    0% { transform: scaleX(0.86); }
    100% { transform: scaleX(1); }
}

/* two-column bodies */
.ui-two {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.6em;
}

.ui-two.twin {
    grid-template-columns: 11em 1fr;
}

.ui-course {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 0.8em;
    padding: 0.95em 1.1em;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.8em;
    background: #11151b;
}

.ui-course > div {
    flex: 1;
}

.ui-course p {
    margin: 0;
    color: #e3e7ee;
    font-weight: 500;
}

.ui-course b {
    color: #9aa3b3;
    font-weight: 500;
}

.ui-tiers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-tiers li {
    display: flex;
    gap: 0.9em;
    align-items: center;
    margin-bottom: 1.1em;
    color: #8a93a3;
}

.ui-tiers i {
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.9em;
    font-style: normal;
}

.ui-tiers li.done {
    color: #e3e7ee;
}

.ui-tiers li.done i {
    border-color: #00a2fb;
    background: #00a2fb;
    color: #04121c;
    font-weight: 700;
}

.ui-flowwrap {
    padding: 0.5em 0;
}

.ui-flow,
.ui-chart {
    display: block;
    width: 100%;
    height: auto;
}

.ui-steps h6,
.ui-chartwrap h6 {
    margin: 0 0 0.9em;
    color: #8a93a3;
    font-size: 1em;
    font-weight: 600;
}

.ui-step {
    display: flex;
    gap: 0.9em;
    align-items: center;
    margin-bottom: 0.8em;
}

.ui-step span {
    flex: none;
    width: 6em;
    color: #c9ced8;
}

.ui-step b {
    flex: 1;
    height: 0.5em;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.ui-step b i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 99px;
    background: #8fa8ff;
}

.ui-step b.hot i {
    background: #ffb04d;
}

.ui-note {
    margin: 1.2em 0 0;
    color: #ffb04d;
    font-size: 0.98em;
}

.ui-tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-tree li {
    padding: 0.55em 0.8em;
    border-radius: 0.5em;
    color: #8a93a3;
}

.ui-tree li.on {
    background: rgba(255, 255, 255, 0.07);
    color: #eef1f6;
}

.ui-chart .a {
    fill: rgba(0, 162, 251, 0.14);
}

@media (max-width: 700px) {
    .pbanner {
        font-size: 1.55vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pbanner-photo,
    .ui-prog i,
    .ui-lane b {
        animation: none;
    }
}

/* the small label above the title, like "Introducing Linear Mobile" */
#productView .product-hero .section-eyebrow {
    color: #00a2fb;
    font-size: 14px;
    font-weight: 500;
}

/* banner: the window runs off the bottom, the page background takes over smoothly */
.pbanner {
    background: #08090a;
}

.pbanner-fade {
    background:
        linear-gradient(180deg, rgba(8, 9, 10, 0.55) 0%, rgba(8, 9, 10, 0) 22%, rgba(8, 9, 10, 0) 46%, #08090a 96%),
        radial-gradient(ellipse 80% 90% at 50% 40%, transparent 55%, rgba(8, 9, 10, 0.5) 100%);
}

.ui-win {
    min-height: 46em;
}

/* =====================================================================
   TYPE SYSTEM: one scale for every page (the home page is the reference)
   Family  : Inter everywhere; Space Grotesk only for the home hero headline;
             JetBrains Mono for small index labels
   H1      : 72 / 500 / -0.045em        H2 section : 56 / 500 / -0.045em
   Sub-title: 28 / 500 / -0.03em        H3 card    : 20 / 500 / -0.02em
   Lead    : 18 / 400                   Body       : 15 / 400
   Eyebrow : 13 / 500 caps, accent blue Button     : 15 / 500
   ===================================================================== */
body,
button,
input,
select,
textarea,
.leaflet-container,
.leaflet-popup-content {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

#homeView.site-view.site-view.site-view h1:not(.hero-slogan),
#productsView.site-view.site-view.site-view h1:not(.hero-slogan),
#productView.site-view.site-view.site-view h1:not(.hero-slogan),
#academyView.site-view.site-view.site-view h1:not(.hero-slogan),
#solutionsView.site-view.site-view.site-view h1:not(.hero-slogan),
#aboutView.site-view.site-view.site-view h1:not(.hero-slogan),
#venturesView.site-view.site-view.site-view h1:not(.hero-slogan),
#privacyView.site-view.site-view.site-view h1:not(.hero-slogan),
#kvkkView.site-view.site-view.site-view h1:not(.hero-slogan),
#careerView.site-view.site-view.site-view h1:not(.hero-slogan) {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(40px, 6vw, 72px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    color: #f7f8f8;
}

#homeView.site-view.site-view.site-view .section-title,
#homeView.site-view.site-view.site-view .partners-marquee-title,
#homeView.site-view.site-view.site-view .stj-head h2,
#homeView.site-view.site-view.site-view .stj-cta-card h2,
#homeView.site-view.site-view.site-view .lms-cta .section-title,
#productsView.site-view.site-view.site-view .section-title,
#productsView.site-view.site-view.site-view .partners-marquee-title,
#productsView.site-view.site-view.site-view .stj-head h2,
#productsView.site-view.site-view.site-view .stj-cta-card h2,
#productsView.site-view.site-view.site-view .lms-cta .section-title,
#productView.site-view.site-view.site-view .section-title,
#productView.site-view.site-view.site-view .partners-marquee-title,
#productView.site-view.site-view.site-view .stj-head h2,
#productView.site-view.site-view.site-view .stj-cta-card h2,
#productView.site-view.site-view.site-view .lms-cta .section-title,
#academyView.site-view.site-view.site-view .section-title,
#academyView.site-view.site-view.site-view .partners-marquee-title,
#academyView.site-view.site-view.site-view .stj-head h2,
#academyView.site-view.site-view.site-view .stj-cta-card h2,
#academyView.site-view.site-view.site-view .lms-cta .section-title,
#solutionsView.site-view.site-view.site-view .section-title,
#solutionsView.site-view.site-view.site-view .partners-marquee-title,
#solutionsView.site-view.site-view.site-view .stj-head h2,
#solutionsView.site-view.site-view.site-view .stj-cta-card h2,
#solutionsView.site-view.site-view.site-view .lms-cta .section-title,
#aboutView.site-view.site-view.site-view .section-title,
#aboutView.site-view.site-view.site-view .partners-marquee-title,
#aboutView.site-view.site-view.site-view .stj-head h2,
#aboutView.site-view.site-view.site-view .stj-cta-card h2,
#aboutView.site-view.site-view.site-view .lms-cta .section-title,
#venturesView.site-view.site-view.site-view .section-title,
#venturesView.site-view.site-view.site-view .partners-marquee-title,
#venturesView.site-view.site-view.site-view .stj-head h2,
#venturesView.site-view.site-view.site-view .stj-cta-card h2,
#venturesView.site-view.site-view.site-view .lms-cta .section-title,
#privacyView.site-view.site-view.site-view .section-title,
#privacyView.site-view.site-view.site-view .partners-marquee-title,
#privacyView.site-view.site-view.site-view .stj-head h2,
#privacyView.site-view.site-view.site-view .stj-cta-card h2,
#privacyView.site-view.site-view.site-view .lms-cta .section-title,
#kvkkView.site-view.site-view.site-view .section-title,
#kvkkView.site-view.site-view.site-view .partners-marquee-title,
#kvkkView.site-view.site-view.site-view .stj-head h2,
#kvkkView.site-view.site-view.site-view .stj-cta-card h2,
#kvkkView.site-view.site-view.site-view .lms-cta .section-title,
#careerView.site-view.site-view.site-view .section-title,
#careerView.site-view.site-view.site-view .partners-marquee-title,
#careerView.site-view.site-view.site-view .stj-head h2,
#careerView.site-view.site-view.site-view .stj-cta-card h2,
#careerView.site-view.site-view.site-view .lms-cta .section-title {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(34px, 4.6vw, 56px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
}

#homeView.site-view.site-view.site-view .stj-panel h2,
#homeView.site-view.site-view.site-view .stj-orgs-copy h2,
#homeView.site-view.site-view.site-view .about-location-info h2,
#homeView.site-view.site-view.site-view .venture-row-head h2,
#homeView.site-view.site-view.site-view .career-intro h2,
#homeView.site-view.site-view.site-view .venture-title,
#homeView.site-view.site-view.site-view .pricing-title,
#homeView.site-view.site-view.site-view .plan-compare-title,
#homeView.site-view.site-view.site-view .version-column h3,
#homeView.site-view.site-view.site-view .lms-onprem .section-title,
#productsView.site-view.site-view.site-view .stj-panel h2,
#productsView.site-view.site-view.site-view .stj-orgs-copy h2,
#productsView.site-view.site-view.site-view .about-location-info h2,
#productsView.site-view.site-view.site-view .venture-row-head h2,
#productsView.site-view.site-view.site-view .career-intro h2,
#productsView.site-view.site-view.site-view .venture-title,
#productsView.site-view.site-view.site-view .pricing-title,
#productsView.site-view.site-view.site-view .plan-compare-title,
#productsView.site-view.site-view.site-view .version-column h3,
#productsView.site-view.site-view.site-view .lms-onprem .section-title,
#productView.site-view.site-view.site-view .stj-panel h2,
#productView.site-view.site-view.site-view .stj-orgs-copy h2,
#productView.site-view.site-view.site-view .about-location-info h2,
#productView.site-view.site-view.site-view .venture-row-head h2,
#productView.site-view.site-view.site-view .career-intro h2,
#productView.site-view.site-view.site-view .venture-title,
#productView.site-view.site-view.site-view .pricing-title,
#productView.site-view.site-view.site-view .plan-compare-title,
#productView.site-view.site-view.site-view .version-column h3,
#productView.site-view.site-view.site-view .lms-onprem .section-title,
#academyView.site-view.site-view.site-view .stj-panel h2,
#academyView.site-view.site-view.site-view .stj-orgs-copy h2,
#academyView.site-view.site-view.site-view .about-location-info h2,
#academyView.site-view.site-view.site-view .venture-row-head h2,
#academyView.site-view.site-view.site-view .career-intro h2,
#academyView.site-view.site-view.site-view .venture-title,
#academyView.site-view.site-view.site-view .pricing-title,
#academyView.site-view.site-view.site-view .plan-compare-title,
#academyView.site-view.site-view.site-view .version-column h3,
#academyView.site-view.site-view.site-view .lms-onprem .section-title,
#solutionsView.site-view.site-view.site-view .stj-panel h2,
#solutionsView.site-view.site-view.site-view .stj-orgs-copy h2,
#solutionsView.site-view.site-view.site-view .about-location-info h2,
#solutionsView.site-view.site-view.site-view .venture-row-head h2,
#solutionsView.site-view.site-view.site-view .career-intro h2,
#solutionsView.site-view.site-view.site-view .venture-title,
#solutionsView.site-view.site-view.site-view .pricing-title,
#solutionsView.site-view.site-view.site-view .plan-compare-title,
#solutionsView.site-view.site-view.site-view .version-column h3,
#solutionsView.site-view.site-view.site-view .lms-onprem .section-title,
#aboutView.site-view.site-view.site-view .stj-panel h2,
#aboutView.site-view.site-view.site-view .stj-orgs-copy h2,
#aboutView.site-view.site-view.site-view .about-location-info h2,
#aboutView.site-view.site-view.site-view .venture-row-head h2,
#aboutView.site-view.site-view.site-view .career-intro h2,
#aboutView.site-view.site-view.site-view .venture-title,
#aboutView.site-view.site-view.site-view .pricing-title,
#aboutView.site-view.site-view.site-view .plan-compare-title,
#aboutView.site-view.site-view.site-view .version-column h3,
#aboutView.site-view.site-view.site-view .lms-onprem .section-title,
#venturesView.site-view.site-view.site-view .stj-panel h2,
#venturesView.site-view.site-view.site-view .stj-orgs-copy h2,
#venturesView.site-view.site-view.site-view .about-location-info h2,
#venturesView.site-view.site-view.site-view .venture-row-head h2,
#venturesView.site-view.site-view.site-view .career-intro h2,
#venturesView.site-view.site-view.site-view .venture-title,
#venturesView.site-view.site-view.site-view .pricing-title,
#venturesView.site-view.site-view.site-view .plan-compare-title,
#venturesView.site-view.site-view.site-view .version-column h3,
#venturesView.site-view.site-view.site-view .lms-onprem .section-title,
#privacyView.site-view.site-view.site-view .stj-panel h2,
#privacyView.site-view.site-view.site-view .stj-orgs-copy h2,
#privacyView.site-view.site-view.site-view .about-location-info h2,
#privacyView.site-view.site-view.site-view .venture-row-head h2,
#privacyView.site-view.site-view.site-view .career-intro h2,
#privacyView.site-view.site-view.site-view .venture-title,
#privacyView.site-view.site-view.site-view .pricing-title,
#privacyView.site-view.site-view.site-view .plan-compare-title,
#privacyView.site-view.site-view.site-view .version-column h3,
#privacyView.site-view.site-view.site-view .lms-onprem .section-title,
#kvkkView.site-view.site-view.site-view .stj-panel h2,
#kvkkView.site-view.site-view.site-view .stj-orgs-copy h2,
#kvkkView.site-view.site-view.site-view .about-location-info h2,
#kvkkView.site-view.site-view.site-view .venture-row-head h2,
#kvkkView.site-view.site-view.site-view .career-intro h2,
#kvkkView.site-view.site-view.site-view .venture-title,
#kvkkView.site-view.site-view.site-view .pricing-title,
#kvkkView.site-view.site-view.site-view .plan-compare-title,
#kvkkView.site-view.site-view.site-view .version-column h3,
#kvkkView.site-view.site-view.site-view .lms-onprem .section-title,
#careerView.site-view.site-view.site-view .stj-panel h2,
#careerView.site-view.site-view.site-view .stj-orgs-copy h2,
#careerView.site-view.site-view.site-view .about-location-info h2,
#careerView.site-view.site-view.site-view .venture-row-head h2,
#careerView.site-view.site-view.site-view .career-intro h2,
#careerView.site-view.site-view.site-view .venture-title,
#careerView.site-view.site-view.site-view .pricing-title,
#careerView.site-view.site-view.site-view .plan-compare-title,
#careerView.site-view.site-view.site-view .version-column h3,
#careerView.site-view.site-view.site-view .lms-onprem .section-title {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(24px, 2.6vw, 32px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
}

#homeView.site-view.site-view.site-view .legal-article h2,
#productsView.site-view.site-view.site-view .legal-article h2,
#productView.site-view.site-view.site-view .legal-article h2,
#academyView.site-view.site-view.site-view .legal-article h2,
#solutionsView.site-view.site-view.site-view .legal-article h2,
#aboutView.site-view.site-view.site-view .legal-article h2,
#venturesView.site-view.site-view.site-view .legal-article h2,
#privacyView.site-view.site-view.site-view .legal-article h2,
#kvkkView.site-view.site-view.site-view .legal-article h2,
#careerView.site-view.site-view.site-view .legal-article h2 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

#homeView.site-view.site-view.site-view .center-pillar h3,
#homeView.site-view.site-view.site-view .pms-card h3,
#homeView.site-view.site-view.site-view .feature-card h3,
#homeView.site-view.site-view.site-view .step h3,
#homeView.site-view.site-view.site-view .academy-card h3,
#homeView.site-view.site-view.site-view .lms-persona h3,
#homeView.site-view.site-view.site-view .lms-onprem-item h3,
#homeView.site-view.site-view.site-view .stj-step h3,
#homeView.site-view.site-view.site-view .product-demo-card h3,
#homeView.site-view.site-view.site-view .venture-card h4,
#homeView.site-view.site-view.site-view .other-product-card strong,
#homeView.site-view.site-view.site-view .about-story-card h3,
#productsView.site-view.site-view.site-view .center-pillar h3,
#productsView.site-view.site-view.site-view .pms-card h3,
#productsView.site-view.site-view.site-view .feature-card h3,
#productsView.site-view.site-view.site-view .step h3,
#productsView.site-view.site-view.site-view .academy-card h3,
#productsView.site-view.site-view.site-view .lms-persona h3,
#productsView.site-view.site-view.site-view .lms-onprem-item h3,
#productsView.site-view.site-view.site-view .stj-step h3,
#productsView.site-view.site-view.site-view .product-demo-card h3,
#productsView.site-view.site-view.site-view .venture-card h4,
#productsView.site-view.site-view.site-view .other-product-card strong,
#productsView.site-view.site-view.site-view .about-story-card h3,
#productView.site-view.site-view.site-view .center-pillar h3,
#productView.site-view.site-view.site-view .pms-card h3,
#productView.site-view.site-view.site-view .feature-card h3,
#productView.site-view.site-view.site-view .step h3,
#productView.site-view.site-view.site-view .academy-card h3,
#productView.site-view.site-view.site-view .lms-persona h3,
#productView.site-view.site-view.site-view .lms-onprem-item h3,
#productView.site-view.site-view.site-view .stj-step h3,
#productView.site-view.site-view.site-view .product-demo-card h3,
#productView.site-view.site-view.site-view .venture-card h4,
#productView.site-view.site-view.site-view .other-product-card strong,
#productView.site-view.site-view.site-view .about-story-card h3,
#academyView.site-view.site-view.site-view .center-pillar h3,
#academyView.site-view.site-view.site-view .pms-card h3,
#academyView.site-view.site-view.site-view .feature-card h3,
#academyView.site-view.site-view.site-view .step h3,
#academyView.site-view.site-view.site-view .academy-card h3,
#academyView.site-view.site-view.site-view .lms-persona h3,
#academyView.site-view.site-view.site-view .lms-onprem-item h3,
#academyView.site-view.site-view.site-view .stj-step h3,
#academyView.site-view.site-view.site-view .product-demo-card h3,
#academyView.site-view.site-view.site-view .venture-card h4,
#academyView.site-view.site-view.site-view .other-product-card strong,
#academyView.site-view.site-view.site-view .about-story-card h3,
#solutionsView.site-view.site-view.site-view .center-pillar h3,
#solutionsView.site-view.site-view.site-view .pms-card h3,
#solutionsView.site-view.site-view.site-view .feature-card h3,
#solutionsView.site-view.site-view.site-view .step h3,
#solutionsView.site-view.site-view.site-view .academy-card h3,
#solutionsView.site-view.site-view.site-view .lms-persona h3,
#solutionsView.site-view.site-view.site-view .lms-onprem-item h3,
#solutionsView.site-view.site-view.site-view .stj-step h3,
#solutionsView.site-view.site-view.site-view .product-demo-card h3,
#solutionsView.site-view.site-view.site-view .venture-card h4,
#solutionsView.site-view.site-view.site-view .other-product-card strong,
#solutionsView.site-view.site-view.site-view .about-story-card h3,
#aboutView.site-view.site-view.site-view .center-pillar h3,
#aboutView.site-view.site-view.site-view .pms-card h3,
#aboutView.site-view.site-view.site-view .feature-card h3,
#aboutView.site-view.site-view.site-view .step h3,
#aboutView.site-view.site-view.site-view .academy-card h3,
#aboutView.site-view.site-view.site-view .lms-persona h3,
#aboutView.site-view.site-view.site-view .lms-onprem-item h3,
#aboutView.site-view.site-view.site-view .stj-step h3,
#aboutView.site-view.site-view.site-view .product-demo-card h3,
#aboutView.site-view.site-view.site-view .venture-card h4,
#aboutView.site-view.site-view.site-view .other-product-card strong,
#aboutView.site-view.site-view.site-view .about-story-card h3,
#venturesView.site-view.site-view.site-view .center-pillar h3,
#venturesView.site-view.site-view.site-view .pms-card h3,
#venturesView.site-view.site-view.site-view .feature-card h3,
#venturesView.site-view.site-view.site-view .step h3,
#venturesView.site-view.site-view.site-view .academy-card h3,
#venturesView.site-view.site-view.site-view .lms-persona h3,
#venturesView.site-view.site-view.site-view .lms-onprem-item h3,
#venturesView.site-view.site-view.site-view .stj-step h3,
#venturesView.site-view.site-view.site-view .product-demo-card h3,
#venturesView.site-view.site-view.site-view .venture-card h4,
#venturesView.site-view.site-view.site-view .other-product-card strong,
#venturesView.site-view.site-view.site-view .about-story-card h3,
#privacyView.site-view.site-view.site-view .center-pillar h3,
#privacyView.site-view.site-view.site-view .pms-card h3,
#privacyView.site-view.site-view.site-view .feature-card h3,
#privacyView.site-view.site-view.site-view .step h3,
#privacyView.site-view.site-view.site-view .academy-card h3,
#privacyView.site-view.site-view.site-view .lms-persona h3,
#privacyView.site-view.site-view.site-view .lms-onprem-item h3,
#privacyView.site-view.site-view.site-view .stj-step h3,
#privacyView.site-view.site-view.site-view .product-demo-card h3,
#privacyView.site-view.site-view.site-view .venture-card h4,
#privacyView.site-view.site-view.site-view .other-product-card strong,
#privacyView.site-view.site-view.site-view .about-story-card h3,
#kvkkView.site-view.site-view.site-view .center-pillar h3,
#kvkkView.site-view.site-view.site-view .pms-card h3,
#kvkkView.site-view.site-view.site-view .feature-card h3,
#kvkkView.site-view.site-view.site-view .step h3,
#kvkkView.site-view.site-view.site-view .academy-card h3,
#kvkkView.site-view.site-view.site-view .lms-persona h3,
#kvkkView.site-view.site-view.site-view .lms-onprem-item h3,
#kvkkView.site-view.site-view.site-view .stj-step h3,
#kvkkView.site-view.site-view.site-view .product-demo-card h3,
#kvkkView.site-view.site-view.site-view .venture-card h4,
#kvkkView.site-view.site-view.site-view .other-product-card strong,
#kvkkView.site-view.site-view.site-view .about-story-card h3,
#careerView.site-view.site-view.site-view .center-pillar h3,
#careerView.site-view.site-view.site-view .pms-card h3,
#careerView.site-view.site-view.site-view .feature-card h3,
#careerView.site-view.site-view.site-view .step h3,
#careerView.site-view.site-view.site-view .academy-card h3,
#careerView.site-view.site-view.site-view .lms-persona h3,
#careerView.site-view.site-view.site-view .lms-onprem-item h3,
#careerView.site-view.site-view.site-view .stj-step h3,
#careerView.site-view.site-view.site-view .product-demo-card h3,
#careerView.site-view.site-view.site-view .venture-card h4,
#careerView.site-view.site-view.site-view .other-product-card strong,
#careerView.site-view.site-view.site-view .about-story-card h3 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
}

#homeView.site-view.site-view.site-view .page-hero p,
#homeView.site-view.site-view.site-view .staj-lead,
#homeView.site-view.site-view.site-view .roket-modules-intro p,
#homeView.site-view.site-view.site-view .approach-lead,
#homeView.site-view.site-view.site-view .venture-sub,
#homeView.site-view.site-view.site-view .about-location-info p,
#productsView.site-view.site-view.site-view .page-hero p,
#productsView.site-view.site-view.site-view .staj-lead,
#productsView.site-view.site-view.site-view .roket-modules-intro p,
#productsView.site-view.site-view.site-view .approach-lead,
#productsView.site-view.site-view.site-view .venture-sub,
#productsView.site-view.site-view.site-view .about-location-info p,
#productView.site-view.site-view.site-view .page-hero p,
#productView.site-view.site-view.site-view .staj-lead,
#productView.site-view.site-view.site-view .roket-modules-intro p,
#productView.site-view.site-view.site-view .approach-lead,
#productView.site-view.site-view.site-view .venture-sub,
#productView.site-view.site-view.site-view .about-location-info p,
#academyView.site-view.site-view.site-view .page-hero p,
#academyView.site-view.site-view.site-view .staj-lead,
#academyView.site-view.site-view.site-view .roket-modules-intro p,
#academyView.site-view.site-view.site-view .approach-lead,
#academyView.site-view.site-view.site-view .venture-sub,
#academyView.site-view.site-view.site-view .about-location-info p,
#solutionsView.site-view.site-view.site-view .page-hero p,
#solutionsView.site-view.site-view.site-view .staj-lead,
#solutionsView.site-view.site-view.site-view .roket-modules-intro p,
#solutionsView.site-view.site-view.site-view .approach-lead,
#solutionsView.site-view.site-view.site-view .venture-sub,
#solutionsView.site-view.site-view.site-view .about-location-info p,
#aboutView.site-view.site-view.site-view .page-hero p,
#aboutView.site-view.site-view.site-view .staj-lead,
#aboutView.site-view.site-view.site-view .roket-modules-intro p,
#aboutView.site-view.site-view.site-view .approach-lead,
#aboutView.site-view.site-view.site-view .venture-sub,
#aboutView.site-view.site-view.site-view .about-location-info p,
#venturesView.site-view.site-view.site-view .page-hero p,
#venturesView.site-view.site-view.site-view .staj-lead,
#venturesView.site-view.site-view.site-view .roket-modules-intro p,
#venturesView.site-view.site-view.site-view .approach-lead,
#venturesView.site-view.site-view.site-view .venture-sub,
#venturesView.site-view.site-view.site-view .about-location-info p,
#privacyView.site-view.site-view.site-view .page-hero p,
#privacyView.site-view.site-view.site-view .staj-lead,
#privacyView.site-view.site-view.site-view .roket-modules-intro p,
#privacyView.site-view.site-view.site-view .approach-lead,
#privacyView.site-view.site-view.site-view .venture-sub,
#privacyView.site-view.site-view.site-view .about-location-info p,
#kvkkView.site-view.site-view.site-view .page-hero p,
#kvkkView.site-view.site-view.site-view .staj-lead,
#kvkkView.site-view.site-view.site-view .roket-modules-intro p,
#kvkkView.site-view.site-view.site-view .approach-lead,
#kvkkView.site-view.site-view.site-view .venture-sub,
#kvkkView.site-view.site-view.site-view .about-location-info p,
#careerView.site-view.site-view.site-view .page-hero p,
#careerView.site-view.site-view.site-view .staj-lead,
#careerView.site-view.site-view.site-view .roket-modules-intro p,
#careerView.site-view.site-view.site-view .approach-lead,
#careerView.site-view.site-view.site-view .venture-sub,
#careerView.site-view.site-view.site-view .about-location-info p {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(16px, 1.45vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: -0.01em !important;
}

#homeView.site-view.site-view.site-view .card-text p,
#homeView.site-view.site-view.site-view .pms-card p,
#homeView.site-view.site-view.site-view .feature-card p,
#homeView.site-view.site-view.site-view .step p,
#homeView.site-view.site-view.site-view .academy-card p,
#homeView.site-view.site-view.site-view .center-pillar p,
#homeView.site-view.site-view.site-view .lms-persona p,
#homeView.site-view.site-view.site-view .lms-onprem-item p,
#homeView.site-view.site-view.site-view .stj-step p,
#homeView.site-view.site-view.site-view .venture-card p,
#homeView.site-view.site-view.site-view .venture-row-body p,
#homeView.site-view.site-view.site-view .about-story-card p,
#homeView.site-view.site-view.site-view .dx-product-text p,
#productsView.site-view.site-view.site-view .card-text p,
#productsView.site-view.site-view.site-view .pms-card p,
#productsView.site-view.site-view.site-view .feature-card p,
#productsView.site-view.site-view.site-view .step p,
#productsView.site-view.site-view.site-view .academy-card p,
#productsView.site-view.site-view.site-view .center-pillar p,
#productsView.site-view.site-view.site-view .lms-persona p,
#productsView.site-view.site-view.site-view .lms-onprem-item p,
#productsView.site-view.site-view.site-view .stj-step p,
#productsView.site-view.site-view.site-view .venture-card p,
#productsView.site-view.site-view.site-view .venture-row-body p,
#productsView.site-view.site-view.site-view .about-story-card p,
#productsView.site-view.site-view.site-view .dx-product-text p,
#productView.site-view.site-view.site-view .card-text p,
#productView.site-view.site-view.site-view .pms-card p,
#productView.site-view.site-view.site-view .feature-card p,
#productView.site-view.site-view.site-view .step p,
#productView.site-view.site-view.site-view .academy-card p,
#productView.site-view.site-view.site-view .center-pillar p,
#productView.site-view.site-view.site-view .lms-persona p,
#productView.site-view.site-view.site-view .lms-onprem-item p,
#productView.site-view.site-view.site-view .stj-step p,
#productView.site-view.site-view.site-view .venture-card p,
#productView.site-view.site-view.site-view .venture-row-body p,
#productView.site-view.site-view.site-view .about-story-card p,
#productView.site-view.site-view.site-view .dx-product-text p,
#academyView.site-view.site-view.site-view .card-text p,
#academyView.site-view.site-view.site-view .pms-card p,
#academyView.site-view.site-view.site-view .feature-card p,
#academyView.site-view.site-view.site-view .step p,
#academyView.site-view.site-view.site-view .academy-card p,
#academyView.site-view.site-view.site-view .center-pillar p,
#academyView.site-view.site-view.site-view .lms-persona p,
#academyView.site-view.site-view.site-view .lms-onprem-item p,
#academyView.site-view.site-view.site-view .stj-step p,
#academyView.site-view.site-view.site-view .venture-card p,
#academyView.site-view.site-view.site-view .venture-row-body p,
#academyView.site-view.site-view.site-view .about-story-card p,
#academyView.site-view.site-view.site-view .dx-product-text p,
#solutionsView.site-view.site-view.site-view .card-text p,
#solutionsView.site-view.site-view.site-view .pms-card p,
#solutionsView.site-view.site-view.site-view .feature-card p,
#solutionsView.site-view.site-view.site-view .step p,
#solutionsView.site-view.site-view.site-view .academy-card p,
#solutionsView.site-view.site-view.site-view .center-pillar p,
#solutionsView.site-view.site-view.site-view .lms-persona p,
#solutionsView.site-view.site-view.site-view .lms-onprem-item p,
#solutionsView.site-view.site-view.site-view .stj-step p,
#solutionsView.site-view.site-view.site-view .venture-card p,
#solutionsView.site-view.site-view.site-view .venture-row-body p,
#solutionsView.site-view.site-view.site-view .about-story-card p,
#solutionsView.site-view.site-view.site-view .dx-product-text p,
#aboutView.site-view.site-view.site-view .card-text p,
#aboutView.site-view.site-view.site-view .pms-card p,
#aboutView.site-view.site-view.site-view .feature-card p,
#aboutView.site-view.site-view.site-view .step p,
#aboutView.site-view.site-view.site-view .academy-card p,
#aboutView.site-view.site-view.site-view .center-pillar p,
#aboutView.site-view.site-view.site-view .lms-persona p,
#aboutView.site-view.site-view.site-view .lms-onprem-item p,
#aboutView.site-view.site-view.site-view .stj-step p,
#aboutView.site-view.site-view.site-view .venture-card p,
#aboutView.site-view.site-view.site-view .venture-row-body p,
#aboutView.site-view.site-view.site-view .about-story-card p,
#aboutView.site-view.site-view.site-view .dx-product-text p,
#venturesView.site-view.site-view.site-view .card-text p,
#venturesView.site-view.site-view.site-view .pms-card p,
#venturesView.site-view.site-view.site-view .feature-card p,
#venturesView.site-view.site-view.site-view .step p,
#venturesView.site-view.site-view.site-view .academy-card p,
#venturesView.site-view.site-view.site-view .center-pillar p,
#venturesView.site-view.site-view.site-view .lms-persona p,
#venturesView.site-view.site-view.site-view .lms-onprem-item p,
#venturesView.site-view.site-view.site-view .stj-step p,
#venturesView.site-view.site-view.site-view .venture-card p,
#venturesView.site-view.site-view.site-view .venture-row-body p,
#venturesView.site-view.site-view.site-view .about-story-card p,
#venturesView.site-view.site-view.site-view .dx-product-text p,
#privacyView.site-view.site-view.site-view .card-text p,
#privacyView.site-view.site-view.site-view .pms-card p,
#privacyView.site-view.site-view.site-view .feature-card p,
#privacyView.site-view.site-view.site-view .step p,
#privacyView.site-view.site-view.site-view .academy-card p,
#privacyView.site-view.site-view.site-view .center-pillar p,
#privacyView.site-view.site-view.site-view .lms-persona p,
#privacyView.site-view.site-view.site-view .lms-onprem-item p,
#privacyView.site-view.site-view.site-view .stj-step p,
#privacyView.site-view.site-view.site-view .venture-card p,
#privacyView.site-view.site-view.site-view .venture-row-body p,
#privacyView.site-view.site-view.site-view .about-story-card p,
#privacyView.site-view.site-view.site-view .dx-product-text p,
#kvkkView.site-view.site-view.site-view .card-text p,
#kvkkView.site-view.site-view.site-view .pms-card p,
#kvkkView.site-view.site-view.site-view .feature-card p,
#kvkkView.site-view.site-view.site-view .step p,
#kvkkView.site-view.site-view.site-view .academy-card p,
#kvkkView.site-view.site-view.site-view .center-pillar p,
#kvkkView.site-view.site-view.site-view .lms-persona p,
#kvkkView.site-view.site-view.site-view .lms-onprem-item p,
#kvkkView.site-view.site-view.site-view .stj-step p,
#kvkkView.site-view.site-view.site-view .venture-card p,
#kvkkView.site-view.site-view.site-view .venture-row-body p,
#kvkkView.site-view.site-view.site-view .about-story-card p,
#kvkkView.site-view.site-view.site-view .dx-product-text p,
#careerView.site-view.site-view.site-view .card-text p,
#careerView.site-view.site-view.site-view .pms-card p,
#careerView.site-view.site-view.site-view .feature-card p,
#careerView.site-view.site-view.site-view .step p,
#careerView.site-view.site-view.site-view .academy-card p,
#careerView.site-view.site-view.site-view .center-pillar p,
#careerView.site-view.site-view.site-view .lms-persona p,
#careerView.site-view.site-view.site-view .lms-onprem-item p,
#careerView.site-view.site-view.site-view .stj-step p,
#careerView.site-view.site-view.site-view .venture-card p,
#careerView.site-view.site-view.site-view .venture-row-body p,
#careerView.site-view.site-view.site-view .about-story-card p,
#careerView.site-view.site-view.site-view .dx-product-text p {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

#homeView.site-view.site-view.site-view .section-eyebrow,
#homeView.site-view.site-view.site-view .stj-kicker,
#productsView.site-view.site-view.site-view .section-eyebrow,
#productsView.site-view.site-view.site-view .stj-kicker,
#productView.site-view.site-view.site-view .section-eyebrow,
#productView.site-view.site-view.site-view .stj-kicker,
#academyView.site-view.site-view.site-view .section-eyebrow,
#academyView.site-view.site-view.site-view .stj-kicker,
#solutionsView.site-view.site-view.site-view .section-eyebrow,
#solutionsView.site-view.site-view.site-view .stj-kicker,
#aboutView.site-view.site-view.site-view .section-eyebrow,
#aboutView.site-view.site-view.site-view .stj-kicker,
#venturesView.site-view.site-view.site-view .section-eyebrow,
#venturesView.site-view.site-view.site-view .stj-kicker,
#privacyView.site-view.site-view.site-view .section-eyebrow,
#privacyView.site-view.site-view.site-view .stj-kicker,
#kvkkView.site-view.site-view.site-view .section-eyebrow,
#kvkkView.site-view.site-view.site-view .stj-kicker,
#careerView.site-view.site-view.site-view .section-eyebrow,
#careerView.site-view.site-view.site-view .stj-kicker {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #00a2fb !important;
}

#homeView .center-pillars .section-eyebrow,
#productView .pricing .section-eyebrow {
    color: #0068ce !important;
}

#homeView.site-view.site-view.site-view .academy-index,
#homeView.site-view.site-view.site-view .feature-number,
#homeView.site-view.site-view.site-view .step-number,
#homeView.site-view.site-view.site-view .center-pillar-index,
#homeView.site-view.site-view.site-view .lms-persona-no,
#homeView.site-view.site-view.site-view .pms-icon,
#homeView.site-view.site-view.site-view .pms-card::before,
#productsView.site-view.site-view.site-view .academy-index,
#productsView.site-view.site-view.site-view .feature-number,
#productsView.site-view.site-view.site-view .step-number,
#productsView.site-view.site-view.site-view .center-pillar-index,
#productsView.site-view.site-view.site-view .lms-persona-no,
#productsView.site-view.site-view.site-view .pms-icon,
#productsView.site-view.site-view.site-view .pms-card::before,
#productView.site-view.site-view.site-view .academy-index,
#productView.site-view.site-view.site-view .feature-number,
#productView.site-view.site-view.site-view .step-number,
#productView.site-view.site-view.site-view .center-pillar-index,
#productView.site-view.site-view.site-view .lms-persona-no,
#productView.site-view.site-view.site-view .pms-icon,
#productView.site-view.site-view.site-view .pms-card::before,
#academyView.site-view.site-view.site-view .academy-index,
#academyView.site-view.site-view.site-view .feature-number,
#academyView.site-view.site-view.site-view .step-number,
#academyView.site-view.site-view.site-view .center-pillar-index,
#academyView.site-view.site-view.site-view .lms-persona-no,
#academyView.site-view.site-view.site-view .pms-icon,
#academyView.site-view.site-view.site-view .pms-card::before,
#solutionsView.site-view.site-view.site-view .academy-index,
#solutionsView.site-view.site-view.site-view .feature-number,
#solutionsView.site-view.site-view.site-view .step-number,
#solutionsView.site-view.site-view.site-view .center-pillar-index,
#solutionsView.site-view.site-view.site-view .lms-persona-no,
#solutionsView.site-view.site-view.site-view .pms-icon,
#solutionsView.site-view.site-view.site-view .pms-card::before,
#aboutView.site-view.site-view.site-view .academy-index,
#aboutView.site-view.site-view.site-view .feature-number,
#aboutView.site-view.site-view.site-view .step-number,
#aboutView.site-view.site-view.site-view .center-pillar-index,
#aboutView.site-view.site-view.site-view .lms-persona-no,
#aboutView.site-view.site-view.site-view .pms-icon,
#aboutView.site-view.site-view.site-view .pms-card::before,
#venturesView.site-view.site-view.site-view .academy-index,
#venturesView.site-view.site-view.site-view .feature-number,
#venturesView.site-view.site-view.site-view .step-number,
#venturesView.site-view.site-view.site-view .center-pillar-index,
#venturesView.site-view.site-view.site-view .lms-persona-no,
#venturesView.site-view.site-view.site-view .pms-icon,
#venturesView.site-view.site-view.site-view .pms-card::before,
#privacyView.site-view.site-view.site-view .academy-index,
#privacyView.site-view.site-view.site-view .feature-number,
#privacyView.site-view.site-view.site-view .step-number,
#privacyView.site-view.site-view.site-view .center-pillar-index,
#privacyView.site-view.site-view.site-view .lms-persona-no,
#privacyView.site-view.site-view.site-view .pms-icon,
#privacyView.site-view.site-view.site-view .pms-card::before,
#kvkkView.site-view.site-view.site-view .academy-index,
#kvkkView.site-view.site-view.site-view .feature-number,
#kvkkView.site-view.site-view.site-view .step-number,
#kvkkView.site-view.site-view.site-view .center-pillar-index,
#kvkkView.site-view.site-view.site-view .lms-persona-no,
#kvkkView.site-view.site-view.site-view .pms-icon,
#kvkkView.site-view.site-view.site-view .pms-card::before,
#careerView.site-view.site-view.site-view .academy-index,
#careerView.site-view.site-view.site-view .feature-number,
#careerView.site-view.site-view.site-view .step-number,
#careerView.site-view.site-view.site-view .center-pillar-index,
#careerView.site-view.site-view.site-view .lms-persona-no,
#careerView.site-view.site-view.site-view .pms-icon,
#careerView.site-view.site-view.site-view .pms-card::before {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: #8a8f98 !important;
}

#homeView.site-view.site-view.site-view .stj-stat strong,
#homeView.site-view.site-view.site-view .about-facts strong,
#homeView.site-view.site-view.site-view .lms-stats strong,
#homeView.site-view.site-view.site-view .stj-step-no,
#productsView.site-view.site-view.site-view .stj-stat strong,
#productsView.site-view.site-view.site-view .about-facts strong,
#productsView.site-view.site-view.site-view .lms-stats strong,
#productsView.site-view.site-view.site-view .stj-step-no,
#productView.site-view.site-view.site-view .stj-stat strong,
#productView.site-view.site-view.site-view .about-facts strong,
#productView.site-view.site-view.site-view .lms-stats strong,
#productView.site-view.site-view.site-view .stj-step-no,
#academyView.site-view.site-view.site-view .stj-stat strong,
#academyView.site-view.site-view.site-view .about-facts strong,
#academyView.site-view.site-view.site-view .lms-stats strong,
#academyView.site-view.site-view.site-view .stj-step-no,
#solutionsView.site-view.site-view.site-view .stj-stat strong,
#solutionsView.site-view.site-view.site-view .about-facts strong,
#solutionsView.site-view.site-view.site-view .lms-stats strong,
#solutionsView.site-view.site-view.site-view .stj-step-no,
#aboutView.site-view.site-view.site-view .stj-stat strong,
#aboutView.site-view.site-view.site-view .about-facts strong,
#aboutView.site-view.site-view.site-view .lms-stats strong,
#aboutView.site-view.site-view.site-view .stj-step-no,
#venturesView.site-view.site-view.site-view .stj-stat strong,
#venturesView.site-view.site-view.site-view .about-facts strong,
#venturesView.site-view.site-view.site-view .lms-stats strong,
#venturesView.site-view.site-view.site-view .stj-step-no,
#privacyView.site-view.site-view.site-view .stj-stat strong,
#privacyView.site-view.site-view.site-view .about-facts strong,
#privacyView.site-view.site-view.site-view .lms-stats strong,
#privacyView.site-view.site-view.site-view .stj-step-no,
#kvkkView.site-view.site-view.site-view .stj-stat strong,
#kvkkView.site-view.site-view.site-view .about-facts strong,
#kvkkView.site-view.site-view.site-view .lms-stats strong,
#kvkkView.site-view.site-view.site-view .stj-step-no,
#careerView.site-view.site-view.site-view .stj-stat strong,
#careerView.site-view.site-view.site-view .about-facts strong,
#careerView.site-view.site-view.site-view .lms-stats strong,
#careerView.site-view.site-view.site-view .stj-step-no {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.04em !important;
}

.btn,
.btn-primary,
.btn-ghost-light,
.btn-gradient,
.btn-white,
.btn-enterprise,
.btn-contact,
.lang-btn,
.card-cta {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.btn-large {
    font-size: 16px !important;
}

.navbar .btn,
.nav-buttons .btn {
    font-size: 14px !important;
}

.lang-btn {
    font-size: 12px !important;
}

/* type system: last stragglers */
#homeView.site-view.site-view.site-view .dx-product-text h2,
#productsView.site-view.site-view.site-view .dx-product-text h2,
#productView.site-view.site-view.site-view .dx-product-text h2,
#academyView.site-view.site-view.site-view .dx-product-text h2,
#solutionsView.site-view.site-view.site-view .dx-product-text h2,
#aboutView.site-view.site-view.site-view .dx-product-text h2,
#venturesView.site-view.site-view.site-view .dx-product-text h2,
#privacyView.site-view.site-view.site-view .dx-product-text h2,
#kvkkView.site-view.site-view.site-view .dx-product-text h2,
#careerView.site-view.site-view.site-view .dx-product-text h2 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(24px, 2.6vw, 32px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
}

#homeView.site-view.site-view.site-view .academy-cta-copy h2,
#productsView.site-view.site-view.site-view .academy-cta-copy h2,
#productView.site-view.site-view.site-view .academy-cta-copy h2,
#academyView.site-view.site-view.site-view .academy-cta-copy h2,
#solutionsView.site-view.site-view.site-view .academy-cta-copy h2,
#aboutView.site-view.site-view.site-view .academy-cta-copy h2,
#venturesView.site-view.site-view.site-view .academy-cta-copy h2,
#privacyView.site-view.site-view.site-view .academy-cta-copy h2,
#kvkkView.site-view.site-view.site-view .academy-cta-copy h2,
#careerView.site-view.site-view.site-view .academy-cta-copy h2 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(34px, 4.6vw, 56px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
}

.btn,
.btn-primary,
.btn-ghost-light,
.btn-gradient,
.btn-white,
.btn-enterprise,
.btn-contact {
    font-weight: 500 !important;
}

/* Internship programme banner */
.pbanner[data-product="staj"] .pbanner-photo { background-image: url('/images/banner/staj.jpg'); }

#academyView .page-hero {
    padding-top: 48px;
}

/* =====================================================================
   Internship page: one design language (flat hairline layout like the home page)
   ===================================================================== */
#academyView .staj-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#academyView .stj-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#academyView .stj-stat {
    padding: 28px 20px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
}

#academyView .stj-stat + .stj-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#academyView .stj-stat::before {
    display: none;
}

#academyView .stj-stat strong {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    font-size: clamp(28px, 3.4vw, 44px);
}

/* the six facts: hairline columns instead of boxed cards */
#academyView .staj-grid {
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#academyView .staj-grid .academy-card {
    padding: 32px 32px 30px;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#academyView .staj-grid .academy-card:nth-child(n+4) {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#academyView .staj-grid .academy-card:not(:nth-child(3n+1)) {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#academyView .staj-grid .academy-card:nth-child(3n+1) {
    padding-left: 0;
}

/* panels, organisations card and closing call to action: flat, left-aligned */
#academyView .stj-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

#academyView .stj-orgs-card {
    padding: 56px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: none;
}

#academyView .stj-offer {
    border-radius: 8px;
    background: none;
}

#academyView .stj-cta-card {
    padding: 72px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: none;
    text-align: left;
}

#academyView .stj-cta-card h2 {
    margin-left: 0;
    margin-right: 0;
}

#academyView .stj-head-center {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

#academyView .stj-pills {
    justify-content: flex-start;
    max-width: none;
    margin: 0;
}

#academyView .stj-steps {
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#academyView .stj-steps::before {
    display: none;
}

#academyView .stj-step {
    padding: 32px 28px 0 0;
    text-align: left;
}

#academyView .stj-step + .stj-step {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

#academyView .stj-step-no {
    width: auto;
    height: auto;
    margin: 0 0 14px;
    border: 0;
    border-radius: 0;
    background: none;
    display: block;
    color: #8a8f98;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
}

#academyView .stj-step p {
    margin: 0;
    max-width: none;
}

#academyView .stj-venture,
#academyView .stj-duo,
#academyView .stj-orgs,
#academyView .stj-skills,
#academyView .stj-flow,
#academyView .stj-cta {
    padding-top: 80px;
}

@media (max-width: 1000px) {
    #academyView .stj-stats,
    #academyView .staj-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #academyView .stj-stat + .stj-stat {
        border-left: 0;
    }

    #academyView .staj-grid .academy-card,
    #academyView .stj-step,
    #academyView .stj-step + .stj-step {
        padding: 24px 0;
        border-left: 0 !important;
    }

    #academyView .stj-steps {
        grid-template-columns: 1fr;
    }
}

/* Internship page banner: the photograph only */
.pbanner[data-product="staj"] {
    height: calc(22em + 64px);
}

/* six figures on the internship page */
#academyView .staj-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1000px) {
    #academyView .staj-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Internship page: consecutive sections use different layouts */
#academyView .stj-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
}

#academyView .stj-split .stj-head {
    margin-bottom: 0;
}

.stj-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stj-timeline li {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    gap: 20px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stj-timeline b {
    color: #00a2fb;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.stj-timeline span {
    color: #b4b8c0;
    font-size: 16px;
    line-height: 1.5;
}

.stj-rows {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stj-rows li {
    position: relative;
    padding: 16px 28px 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #d3d6db;
    font-size: 16px;
}

.stj-rows li::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 0;
    color: #00a2fb;
    transform: translateY(-50%);
}

.stj-subhead {
    margin: 36px 0 14px;
    color: #8a8f98;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    #academyView .stj-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .stj-timeline li {
        grid-template-columns: 5.5em 1fr;
    }
}

/* Sectors: a prominent icon grid */
#academyView .stj-head .title-soft {
    color: #8a8f98;
    -webkit-text-fill-color: #8a8f98;
}

.stj-sectors {
    padding: 80px 0 0;
    background: #08090a;
}

.stj-sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.stj-sectors-grid li {
    display: flex;
    gap: 22px;
    align-items: center;
    min-height: 132px;
    padding: 28px 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.25s ease;
}

.stj-sectors-grid li:hover {
    background: rgba(0, 162, 251, 0.06);
}

.stj-sectors-grid i {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: #00a2fb;
    font-size: 21px;
}

.stj-sectors-grid span {
    color: #f7f8f8;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    letter-spacing: -0.025em;
}

/* Focus areas: large numbered rows */
.stj-rows {
    counter-reset: focus;
    margin-top: 32px;
}

.stj-rows li {
    display: grid;
    grid-template-columns: 3em 1fr;
    align-items: baseline;
    padding: 22px 32px 22px 0;
    color: #f7f8f8;
    font-size: clamp(18px, 1.7vw, 22px);
    letter-spacing: -0.02em;
}

.stj-rows li::before {
    counter-increment: focus;
    content: "0" counter(focus);
    color: #8a8f98;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
}

/* skills: a calm two-column list instead of pills */
.stj-panel .stj-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stj-panel .stj-chips li {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: none;
    color: #b4b8c0;
    font-size: 15px;
    font-weight: 400;
}

.stj-panel .stj-checks {
    margin-bottom: 8px;
}

#academyView .stj-duo-grid {
    gap: 80px;
}

@media (max-width: 1000px) {
    .stj-sectors-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #academyView .stj-duo-grid {
        gap: 48px;
    }
}

@media (max-width: 600px) {
    .stj-sectors-grid {
        grid-template-columns: 1fr;
    }

    .stj-sectors-grid li {
        min-height: 96px;
        padding: 20px;
    }

    .stj-panel .stj-chips {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Internship page: hero like the home page (photo behind the title) and a
   centred video on an animated stage in the site's own line-art language
   ===================================================================== */
#academyView .academy-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 148px 0 104px;
    background: #08090a;
}

#academyView .academy-hero .pbanner {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: auto;
    padding: 0;
}

#academyView .academy-hero .pbanner-photo {
    filter: brightness(0.7) contrast(1.05);
}

#academyView .academy-hero .pbanner-fade {
    background:
        linear-gradient(90deg, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.78) 42%, rgba(8, 9, 10, 0.3) 100%),
        linear-gradient(180deg, rgba(8, 9, 10, 0.4) 0%, rgba(8, 9, 10, 0) 28%, rgba(8, 9, 10, 0) 72%, #08090a 100%);
}

#academyView .academy-hero .container {
    position: relative;
    z-index: 1;
}

#academyView .academy-hero h1 {
    max-width: 900px;
}

#academyView .academy-hero p {
    max-width: 680px;
}

/* video stage */
.staj-stage {
    position: relative;
    padding: 72px 0 40px;
}

.staj-stage-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 52% at 50% 46%, rgba(0, 162, 251, 0.2), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0) 0 0 / 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 40%, transparent 100%);
}

.stj-stage-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.stj-slab polygon {
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.stj-slab polygon.hl {
    stroke: #00a2fb;
    stroke-width: 1.5;
}

.stj-slab {
    animation: stjFloat 7s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.9s);
}

@keyframes stjFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

.stj-links path {
    stroke: rgba(0, 162, 251, 0.65);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
    vector-effect: non-scaling-stroke;
    animation: stjDash 2.6s linear infinite;
}

@keyframes stjDash {
    to { stroke-dashoffset: -20; }
}

.staj-stage .staj-video {
    position: relative;
    z-index: 1;
    width: min(100%, 980px);
    max-width: none;
    margin: 0 auto;
}

.staj-stage .staj-video video {
    max-height: 560px;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 1px rgba(0, 162, 251, 0.18), 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 120px rgba(0, 162, 251, 0.14);
}

.staj-stage .staj-video figcaption {
    text-align: center;
}

@media (max-width: 768px) {
    #academyView .academy-hero {
        padding: 96px 0 64px;
    }

    .staj-stage {
        padding: 40px 0 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stj-slab,
    .stj-links path {
        animation: none;
    }
}

/* Stage v2: orbiting rings with the stages of the programme (ecosystem idea) */
.staj-stage-bg {
    background:
        radial-gradient(ellipse 44% 50% at 50% 46%, rgba(0, 162, 251, 0.22), transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 45%, transparent 100%);
}

.stj-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    animation: stjOrbit var(--d) linear infinite;
    animation-direction: var(--dir);
}

.stj-orbit:nth-child(2) {
    border-style: dashed;
    border-color: rgba(0, 162, 251, 0.3);
}

@keyframes stjOrbit {
    to { transform: rotate(360deg); }
}

.stj-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--a)) translateX(calc(var(--s) / 2));
}

.stj-node b {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 7px 14px 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(12, 16, 22, 0.88);
    color: #d3d6db;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(calc(var(--a) * -1));
    animation: stjNodeBack var(--d) linear infinite;
    animation-direction: var(--dir);
}

.stj-node b::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00a2fb;
    box-shadow: 0 0 10px rgba(0, 162, 251, 0.8);
}

@keyframes stjNodeBack {
    from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); }
    to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 - 360deg)); }
}

@media (max-width: 768px) {
    .stj-orbit:nth-child(3) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stj-orbit,
    .stj-node b {
        animation: none;
    }
}

/* Stage v2: larger and clearer */
.staj-stage {
    padding: 120px 0 90px;
}

.staj-stage-bg {
    -webkit-mask-image: radial-gradient(ellipse 92% 86% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 92% 86% at 50% 50%, #000 55%, transparent 100%);
}

.stj-orbit {
    border-color: rgba(255, 255, 255, 0.22);
}

.stj-orbit:nth-child(2) {
    border-color: rgba(0, 162, 251, 0.5);
}

.stj-node b {
    padding: 9px 18px 9px 14px;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(14, 19, 27, 0.95);
    color: #eef1f6;
    font-size: 13px;
}

.stj-node b::before {
    width: 8px;
    height: 8px;
}

@media (max-width: 768px) {
    .staj-stage {
        padding: 56px 0 40px;
    }

    .stj-orbit {
        --s: 600px !important;
    }

    .stj-orbit:nth-child(n+2) {
        display: none;
    }
}

#academyView .academy-hero h1 {
    max-width: 1000px;
    font-size: clamp(36px, 5.4vw, 68px) !important;
}

#academyView .academy-hero h1 .title-soft {
    color: #b4b8c0;
    -webkit-text-fill-color: #b4b8c0;
}

/* =====================================================================
   COLOUR RESTRAINT: like the home page, text is white and grey.
   Blue stays on interactive marks (arrows, dots, bars, the "+" of the figures).
   ===================================================================== */
#homeView.site-view.site-view.site-view .section-eyebrow,
#homeView.site-view.site-view.site-view .stj-kicker,
#homeView.site-view.site-view.site-view .product-hero .section-eyebrow,
#productsView.site-view.site-view.site-view .section-eyebrow,
#productsView.site-view.site-view.site-view .stj-kicker,
#productsView.site-view.site-view.site-view .product-hero .section-eyebrow,
#productView.site-view.site-view.site-view .section-eyebrow,
#productView.site-view.site-view.site-view .stj-kicker,
#productView.site-view.site-view.site-view .product-hero .section-eyebrow,
#academyView.site-view.site-view.site-view .section-eyebrow,
#academyView.site-view.site-view.site-view .stj-kicker,
#academyView.site-view.site-view.site-view .product-hero .section-eyebrow,
#solutionsView.site-view.site-view.site-view .section-eyebrow,
#solutionsView.site-view.site-view.site-view .stj-kicker,
#solutionsView.site-view.site-view.site-view .product-hero .section-eyebrow,
#aboutView.site-view.site-view.site-view .section-eyebrow,
#aboutView.site-view.site-view.site-view .stj-kicker,
#aboutView.site-view.site-view.site-view .product-hero .section-eyebrow,
#venturesView.site-view.site-view.site-view .section-eyebrow,
#venturesView.site-view.site-view.site-view .stj-kicker,
#venturesView.site-view.site-view.site-view .product-hero .section-eyebrow,
#privacyView.site-view.site-view.site-view .section-eyebrow,
#privacyView.site-view.site-view.site-view .stj-kicker,
#privacyView.site-view.site-view.site-view .product-hero .section-eyebrow,
#kvkkView.site-view.site-view.site-view .section-eyebrow,
#kvkkView.site-view.site-view.site-view .stj-kicker,
#kvkkView.site-view.site-view.site-view .product-hero .section-eyebrow,
#careerView.site-view.site-view.site-view .section-eyebrow,
#careerView.site-view.site-view.site-view .stj-kicker,
#careerView.site-view.site-view.site-view .product-hero .section-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    color: #8a8f98 !important;
}

#homeView.site-view.site-view.site-view .center-pillars .section-eyebrow,
#productView.site-view.site-view.site-view .pricing .section-eyebrow {
    color: #5b616b !important;
}

#homeView.site-view.site-view.site-view .dx-product-link,
#homeView.site-view.site-view.site-view .other-product-more,
#homeView.site-view.site-view.site-view .other-products-all,
#homeView.site-view.site-view.site-view .card-cta,
#productsView.site-view.site-view.site-view .dx-product-link,
#productsView.site-view.site-view.site-view .other-product-more,
#productsView.site-view.site-view.site-view .other-products-all,
#productsView.site-view.site-view.site-view .card-cta,
#productView.site-view.site-view.site-view .dx-product-link,
#productView.site-view.site-view.site-view .other-product-more,
#productView.site-view.site-view.site-view .other-products-all,
#productView.site-view.site-view.site-view .card-cta,
#academyView.site-view.site-view.site-view .dx-product-link,
#academyView.site-view.site-view.site-view .other-product-more,
#academyView.site-view.site-view.site-view .other-products-all,
#academyView.site-view.site-view.site-view .card-cta,
#solutionsView.site-view.site-view.site-view .dx-product-link,
#solutionsView.site-view.site-view.site-view .other-product-more,
#solutionsView.site-view.site-view.site-view .other-products-all,
#solutionsView.site-view.site-view.site-view .card-cta,
#aboutView.site-view.site-view.site-view .dx-product-link,
#aboutView.site-view.site-view.site-view .other-product-more,
#aboutView.site-view.site-view.site-view .other-products-all,
#aboutView.site-view.site-view.site-view .card-cta,
#venturesView.site-view.site-view.site-view .dx-product-link,
#venturesView.site-view.site-view.site-view .other-product-more,
#venturesView.site-view.site-view.site-view .other-products-all,
#venturesView.site-view.site-view.site-view .card-cta,
#privacyView.site-view.site-view.site-view .dx-product-link,
#privacyView.site-view.site-view.site-view .other-product-more,
#privacyView.site-view.site-view.site-view .other-products-all,
#privacyView.site-view.site-view.site-view .card-cta,
#kvkkView.site-view.site-view.site-view .dx-product-link,
#kvkkView.site-view.site-view.site-view .other-product-more,
#kvkkView.site-view.site-view.site-view .other-products-all,
#kvkkView.site-view.site-view.site-view .card-cta,
#careerView.site-view.site-view.site-view .dx-product-link,
#careerView.site-view.site-view.site-view .other-product-more,
#careerView.site-view.site-view.site-view .other-products-all,
#careerView.site-view.site-view.site-view .card-cta {
    color: #e6e8ec !important;
}

#homeView.site-view.site-view.site-view .dx-product-link i,
#productsView.site-view.site-view.site-view .dx-product-link i,
#productView.site-view.site-view.site-view .dx-product-link i,
#academyView.site-view.site-view.site-view .dx-product-link i,
#solutionsView.site-view.site-view.site-view .dx-product-link i,
#aboutView.site-view.site-view.site-view .dx-product-link i,
#venturesView.site-view.site-view.site-view .dx-product-link i,
#privacyView.site-view.site-view.site-view .dx-product-link i,
#kvkkView.site-view.site-view.site-view .dx-product-link i,
#careerView.site-view.site-view.site-view .dx-product-link i {
    color: #00a2fb !important;
}

#homeView.site-view.site-view.site-view .stj-timeline b,
#homeView.site-view.site-view.site-view .about-story-no,
#homeView.site-view.site-view.site-view .academy-index,
#productsView.site-view.site-view.site-view .stj-timeline b,
#productsView.site-view.site-view.site-view .about-story-no,
#productsView.site-view.site-view.site-view .academy-index,
#productView.site-view.site-view.site-view .stj-timeline b,
#productView.site-view.site-view.site-view .about-story-no,
#productView.site-view.site-view.site-view .academy-index,
#academyView.site-view.site-view.site-view .stj-timeline b,
#academyView.site-view.site-view.site-view .about-story-no,
#academyView.site-view.site-view.site-view .academy-index,
#solutionsView.site-view.site-view.site-view .stj-timeline b,
#solutionsView.site-view.site-view.site-view .about-story-no,
#solutionsView.site-view.site-view.site-view .academy-index,
#aboutView.site-view.site-view.site-view .stj-timeline b,
#aboutView.site-view.site-view.site-view .about-story-no,
#aboutView.site-view.site-view.site-view .academy-index,
#venturesView.site-view.site-view.site-view .stj-timeline b,
#venturesView.site-view.site-view.site-view .about-story-no,
#venturesView.site-view.site-view.site-view .academy-index,
#privacyView.site-view.site-view.site-view .stj-timeline b,
#privacyView.site-view.site-view.site-view .about-story-no,
#privacyView.site-view.site-view.site-view .academy-index,
#kvkkView.site-view.site-view.site-view .stj-timeline b,
#kvkkView.site-view.site-view.site-view .about-story-no,
#kvkkView.site-view.site-view.site-view .academy-index,
#careerView.site-view.site-view.site-view .stj-timeline b,
#careerView.site-view.site-view.site-view .about-story-no,
#careerView.site-view.site-view.site-view .academy-index {
    color: #f7f8f8 !important;
}

#homeView.site-view.site-view.site-view .about-story-no,
#productsView.site-view.site-view.site-view .about-story-no,
#productView.site-view.site-view.site-view .about-story-no,
#academyView.site-view.site-view.site-view .about-story-no,
#solutionsView.site-view.site-view.site-view .about-story-no,
#aboutView.site-view.site-view.site-view .about-story-no,
#venturesView.site-view.site-view.site-view .about-story-no,
#privacyView.site-view.site-view.site-view .about-story-no,
#kvkkView.site-view.site-view.site-view .about-story-no,
#careerView.site-view.site-view.site-view .about-story-no {
    color: #8a8f98 !important;
}

#homeView.site-view.site-view.site-view .venture-tag,
#homeView.site-view.site-view.site-view .trial-chip,
#homeView.site-view.site-view.site-view .stj-chips li,
#productsView.site-view.site-view.site-view .venture-tag,
#productsView.site-view.site-view.site-view .trial-chip,
#productsView.site-view.site-view.site-view .stj-chips li,
#productView.site-view.site-view.site-view .venture-tag,
#productView.site-view.site-view.site-view .trial-chip,
#productView.site-view.site-view.site-view .stj-chips li,
#academyView.site-view.site-view.site-view .venture-tag,
#academyView.site-view.site-view.site-view .trial-chip,
#academyView.site-view.site-view.site-view .stj-chips li,
#solutionsView.site-view.site-view.site-view .venture-tag,
#solutionsView.site-view.site-view.site-view .trial-chip,
#solutionsView.site-view.site-view.site-view .stj-chips li,
#aboutView.site-view.site-view.site-view .venture-tag,
#aboutView.site-view.site-view.site-view .trial-chip,
#aboutView.site-view.site-view.site-view .stj-chips li,
#venturesView.site-view.site-view.site-view .venture-tag,
#venturesView.site-view.site-view.site-view .trial-chip,
#venturesView.site-view.site-view.site-view .stj-chips li,
#privacyView.site-view.site-view.site-view .venture-tag,
#privacyView.site-view.site-view.site-view .trial-chip,
#privacyView.site-view.site-view.site-view .stj-chips li,
#kvkkView.site-view.site-view.site-view .venture-tag,
#kvkkView.site-view.site-view.site-view .trial-chip,
#kvkkView.site-view.site-view.site-view .stj-chips li,
#careerView.site-view.site-view.site-view .venture-tag,
#careerView.site-view.site-view.site-view .trial-chip,
#careerView.site-view.site-view.site-view .stj-chips li {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #b4bcd0 !important;
}

#homeView.site-view.site-view.site-view .feature-list li.highlight,
#homeView.site-view.site-view.site-view .feature-list li.highlight.special,
#homeView.site-view.site-view.site-view .feature-list li.highlight span,
#productsView.site-view.site-view.site-view .feature-list li.highlight,
#productsView.site-view.site-view.site-view .feature-list li.highlight.special,
#productsView.site-view.site-view.site-view .feature-list li.highlight span,
#productView.site-view.site-view.site-view .feature-list li.highlight,
#productView.site-view.site-view.site-view .feature-list li.highlight.special,
#productView.site-view.site-view.site-view .feature-list li.highlight span,
#academyView.site-view.site-view.site-view .feature-list li.highlight,
#academyView.site-view.site-view.site-view .feature-list li.highlight.special,
#academyView.site-view.site-view.site-view .feature-list li.highlight span,
#solutionsView.site-view.site-view.site-view .feature-list li.highlight,
#solutionsView.site-view.site-view.site-view .feature-list li.highlight.special,
#solutionsView.site-view.site-view.site-view .feature-list li.highlight span,
#aboutView.site-view.site-view.site-view .feature-list li.highlight,
#aboutView.site-view.site-view.site-view .feature-list li.highlight.special,
#aboutView.site-view.site-view.site-view .feature-list li.highlight span,
#venturesView.site-view.site-view.site-view .feature-list li.highlight,
#venturesView.site-view.site-view.site-view .feature-list li.highlight.special,
#venturesView.site-view.site-view.site-view .feature-list li.highlight span,
#privacyView.site-view.site-view.site-view .feature-list li.highlight,
#privacyView.site-view.site-view.site-view .feature-list li.highlight.special,
#privacyView.site-view.site-view.site-view .feature-list li.highlight span,
#kvkkView.site-view.site-view.site-view .feature-list li.highlight,
#kvkkView.site-view.site-view.site-view .feature-list li.highlight.special,
#kvkkView.site-view.site-view.site-view .feature-list li.highlight span,
#careerView.site-view.site-view.site-view .feature-list li.highlight,
#careerView.site-view.site-view.site-view .feature-list li.highlight.special,
#careerView.site-view.site-view.site-view .feature-list li.highlight span {
    color: #f7f8f8 !important;
    font-weight: 500 !important;
}

#homeView.site-view.site-view.site-view .products-hero-title .highlight-text,
#productsView.site-view.site-view.site-view .products-hero-title .highlight-text,
#productView.site-view.site-view.site-view .products-hero-title .highlight-text,
#academyView.site-view.site-view.site-view .products-hero-title .highlight-text,
#solutionsView.site-view.site-view.site-view .products-hero-title .highlight-text,
#aboutView.site-view.site-view.site-view .products-hero-title .highlight-text,
#venturesView.site-view.site-view.site-view .products-hero-title .highlight-text,
#privacyView.site-view.site-view.site-view .products-hero-title .highlight-text,
#kvkkView.site-view.site-view.site-view .products-hero-title .highlight-text,
#careerView.site-view.site-view.site-view .products-hero-title .highlight-text {
    color: #8a8f98 !important;
    -webkit-text-fill-color: #8a8f98 !important;
}

#homeView.site-view.site-view.site-view .stj-sectors-grid i,
#homeView.site-view.site-view.site-view .lms-onprem-item > i,
#homeView.site-view.site-view.site-view .stj-offer i,
#productsView.site-view.site-view.site-view .stj-sectors-grid i,
#productsView.site-view.site-view.site-view .lms-onprem-item > i,
#productsView.site-view.site-view.site-view .stj-offer i,
#productView.site-view.site-view.site-view .stj-sectors-grid i,
#productView.site-view.site-view.site-view .lms-onprem-item > i,
#productView.site-view.site-view.site-view .stj-offer i,
#academyView.site-view.site-view.site-view .stj-sectors-grid i,
#academyView.site-view.site-view.site-view .lms-onprem-item > i,
#academyView.site-view.site-view.site-view .stj-offer i,
#solutionsView.site-view.site-view.site-view .stj-sectors-grid i,
#solutionsView.site-view.site-view.site-view .lms-onprem-item > i,
#solutionsView.site-view.site-view.site-view .stj-offer i,
#aboutView.site-view.site-view.site-view .stj-sectors-grid i,
#aboutView.site-view.site-view.site-view .lms-onprem-item > i,
#aboutView.site-view.site-view.site-view .stj-offer i,
#venturesView.site-view.site-view.site-view .stj-sectors-grid i,
#venturesView.site-view.site-view.site-view .lms-onprem-item > i,
#venturesView.site-view.site-view.site-view .stj-offer i,
#privacyView.site-view.site-view.site-view .stj-sectors-grid i,
#privacyView.site-view.site-view.site-view .lms-onprem-item > i,
#privacyView.site-view.site-view.site-view .stj-offer i,
#kvkkView.site-view.site-view.site-view .stj-sectors-grid i,
#kvkkView.site-view.site-view.site-view .lms-onprem-item > i,
#kvkkView.site-view.site-view.site-view .stj-offer i,
#careerView.site-view.site-view.site-view .stj-sectors-grid i,
#careerView.site-view.site-view.site-view .lms-onprem-item > i,
#careerView.site-view.site-view.site-view .stj-offer i {
    color: #d3d6db !important;
}

#homeView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#homeView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#productsView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#productsView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#productView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#productView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#academyView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#academyView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#solutionsView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#solutionsView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#aboutView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#aboutView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#venturesView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#venturesView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#privacyView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#privacyView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#kvkkView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#kvkkView.site-view.site-view.site-view .lms-onprem-item:hover > i,
#careerView.site-view.site-view.site-view .stj-sectors-grid li:hover i,
#careerView.site-view.site-view.site-view .lms-onprem-item:hover > i {
    color: #00a2fb !important;
}

#homeView.site-view.site-view.site-view .stj-rows li::after,
#productsView.site-view.site-view.site-view .stj-rows li::after,
#productView.site-view.site-view.site-view .stj-rows li::after,
#academyView.site-view.site-view.site-view .stj-rows li::after,
#solutionsView.site-view.site-view.site-view .stj-rows li::after,
#aboutView.site-view.site-view.site-view .stj-rows li::after,
#venturesView.site-view.site-view.site-view .stj-rows li::after,
#privacyView.site-view.site-view.site-view .stj-rows li::after,
#kvkkView.site-view.site-view.site-view .stj-rows li::after,
#careerView.site-view.site-view.site-view .stj-rows li::after {
    color: #5b616b !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

#homeView.site-view.site-view.site-view .stj-rows li:hover::after,
#productsView.site-view.site-view.site-view .stj-rows li:hover::after,
#productView.site-view.site-view.site-view .stj-rows li:hover::after,
#academyView.site-view.site-view.site-view .stj-rows li:hover::after,
#solutionsView.site-view.site-view.site-view .stj-rows li:hover::after,
#aboutView.site-view.site-view.site-view .stj-rows li:hover::after,
#venturesView.site-view.site-view.site-view .stj-rows li:hover::after,
#privacyView.site-view.site-view.site-view .stj-rows li:hover::after,
#kvkkView.site-view.site-view.site-view .stj-rows li:hover::after,
#careerView.site-view.site-view.site-view .stj-rows li:hover::after {
    color: #00a2fb !important;
}

#homeView.site-view.site-view.site-view .stj-checks i,
#productsView.site-view.site-view.site-view .stj-checks i,
#productView.site-view.site-view.site-view .stj-checks i,
#academyView.site-view.site-view.site-view .stj-checks i,
#solutionsView.site-view.site-view.site-view .stj-checks i,
#aboutView.site-view.site-view.site-view .stj-checks i,
#venturesView.site-view.site-view.site-view .stj-checks i,
#privacyView.site-view.site-view.site-view .stj-checks i,
#kvkkView.site-view.site-view.site-view .stj-checks i,
#careerView.site-view.site-view.site-view .stj-checks i {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #d3d6db !important;
}


/* e-mail and document links: light text, underlined */
.lms-cta-mail a,
.coming-soon-note a,
.career-consent a,
.legal-article a,
.about-location-info a:not(.btn) {
    color: #d3d6db !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
}

/* four facts in one row */
#academyView .staj-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#academyView .staj-grid .academy-card:nth-child(n) {
    padding: 32px 28px 30px;
    border-top: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#academyView .staj-grid .academy-card:first-child {
    padding-left: 0;
    border-left: 0 !important;
}

@media (max-width: 1000px) {
    #academyView .staj-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #academyView .staj-grid .academy-card:nth-child(n) {
        padding: 24px 0;
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}

/* Mentors */
.stj-mentors {
    margin-top: 72px;
}

.stj-mentors-head {
    margin-bottom: 28px;
}

.stj-mentors-head h3 {
    margin: 10px 0 0;
    color: #f7f8f8;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.mentor-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    align-items: start;
}

.mentor {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.25s ease;
}

.mentor:hover,
.mentor.is-open {
    background: rgba(255, 255, 255, 0.03);
}

.mentor-head {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 24px 26px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mentor-av {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a414c, #1b2028);
    color: #e6e8ec;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mentor-id {
    flex: 1;
    min-width: 0;
}

.mentor-id b {
    display: block;
    color: #f7f8f8;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.mentor-id small {
    display: block;
    margin-top: 3px;
    color: #8a8f98;
    font-size: 14px;
}

.mentor-plus {
    color: #8a8f98;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

.mentor.is-open .mentor-plus {
    color: #00a2fb;
    transform: rotate(45deg);
}

.mentor-body {
    padding: 0 26px 26px;
}

.mentor-body p {
    margin: 0 0 16px;
    color: #9aa0ab;
    font-size: 15px;
    line-height: 1.6;
}

.mentor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.mentor-tags em {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #b4bcd0;
    font-size: 12px;
    font-style: normal;
}

.mentor-body .btn {
    padding: 10px 16px;
    font-size: 14px !important;
}

@media (max-width: 1000px) {
    .mentor-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .mentor-list {
        grid-template-columns: 1fr;
    }
}

.mentor-list {
    align-items: stretch;
}

.mentor-head {
    align-items: center;
}

/* Roket-PMS banner: the real "Projects" screen of the app, with anonymous data */
.app-win {
    position: absolute;
    top: 3em;
    left: 50%;
    display: flex;
    width: 72em;
    margin-left: -24em;
    min-height: 50em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.1em;
    background: #0c0d10;
    color: #d3d6db;
    font-size: 1em;
    line-height: 1.3;
    box-shadow: 0 4em 9em rgba(0, 0, 0, 0.7);
    transform: perspective(110em) rotateX(14deg) rotateY(-15deg) rotateZ(3.5deg);
    transform-origin: 50% 0;
}

.app-side {
    flex: none;
    width: 13.5em;
    padding: 1.3em 0.9em;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: #0f1013;
}

.app-brand {
    display: flex;
    gap: 0.7em;
    align-items: center;
    margin: 0 0.4em 1.4em;
    color: #f3f4f6;
    font-size: 1.05em;
}

.app-brand i {
    color: #5fa8ff;
}

.app-side ul {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.app-side li {
    display: flex;
    gap: 0.8em;
    align-items: center;
    padding: 0.55em 0.7em;
    border-radius: 0.5em;
    color: #c5c9d1;
    font-size: 0.92em;
    font-weight: 500;
}

.app-side li i {
    width: 1.2em;
    color: #aeb4bf;
    font-size: 0.95em;
    text-align: center;
}

.app-side li.on {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.app-side h6 {
    margin: 1.2em 0 0.5em 0.7em;
    color: #8a8f98;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.app-main {
    flex: 1;
    min-width: 0;
    background: #0e0f12;
}

.app-top {
    display: flex;
    gap: 0.9em;
    align-items: center;
    padding: 0.9em 1.3em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-menu {
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 0.6em;
    background: #f1f3f6;
    color: #1d4ed8;
}

.app-top h5 {
    flex: 1;
    margin: 0;
    color: #f3f4f6;
    font-size: 1.1em;
    font-weight: 600;
}

.app-search {
    display: flex;
    gap: 0.6em;
    align-items: center;
    padding: 0.55em 1em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.7em;
    color: #9aa0ab;
    font-size: 0.9em;
}

.app-search kbd {
    padding: 0.1em 0.5em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.35em;
    font: inherit;
    font-size: 0.85em;
}

.app-ic {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #c5c9d1;
    font-size: 0.9em;
}

.app-ic b {
    position: absolute;
    top: -0.5em;
    right: -0.4em;
    padding: 0.05em 0.4em;
    border-radius: 99px;
    background: #e5383b;
    color: #fff;
    font-size: 0.72em;
}

.app-user {
    display: flex;
    gap: 0.7em;
    align-items: center;
    text-align: right;
}

.app-user b,
.app-user small {
    display: block;
}

.app-user b {
    color: #f3f4f6;
    font-size: 0.9em;
}

.app-user small {
    color: #9aa0ab;
    font-size: 0.8em;
}

.app-user i {
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a5160, #1f232b);
}

.app-body {
    padding: 1.1em 1.3em;
}

.app-filter {
    display: flex;
    gap: 0.7em;
    align-items: center;
    padding: 0.8em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8em;
    margin-bottom: 1.1em;
    font-size: 0.86em;
}

.app-input {
    flex: 1;
    display: flex;
    gap: 0.6em;
    align-items: center;
    padding: 0.7em 1em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6em;
    color: #8a8f98;
}

.app-sel,
.app-ghost,
.app-btn {
    padding: 0.7em 1em;
    border-radius: 0.6em;
    white-space: nowrap;
}

.app-sel {
    background: #2a2d34;
    color: #d3d6db;
}

.app-ghost {
    color: #c5c9d1;
}

.app-btn.grey {
    background: #3b3e45;
    color: #f3f4f6;
    font-weight: 500;
}

.app-toggle {
    display: flex;
    padding: 0.2em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6em;
}

.app-toggle i {
    padding: 0.6em 0.7em;
    border-radius: 0.4em;
    color: #8a8f98;
}

.app-toggle i.on {
    background: #3b3e45;
    color: #fff;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1em;
}

.app-card {
    padding: 1.1em;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.8em;
    background: #131418;
}

.app-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.8em;
}

.app-folder {
    display: grid;
    place-items: center;
    width: 2.8em;
    height: 2.8em;
    border-radius: 0.6em;
    color: #fff;
    font-size: 1em;
}

.app-dots {
    padding: 0.2em 0.7em;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.4em;
    color: #aeb4bf;
}

.app-card h4 {
    min-height: 2.5em;
    margin: 0 0 0.6em;
    color: #f3f4f6;
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.25;
}

.app-by,
.app-meta {
    margin: 0 0 0.45em;
    color: #aeb4bf;
    font-size: 0.82em;
}

.app-meta {
    display: flex;
    gap: 1.1em;
}

.app-card i.fas {
    margin-right: 0.3em;
}

.app-prog {
    display: flex;
    gap: 0.8em;
    align-items: center;
    margin: 0.7em 0 0.9em;
}

.app-prog > span {
    flex: 1;
    height: 0.4em;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.app-prog > span i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 99px;
    transform-origin: left;
    animation: pbFill 7s ease-in-out infinite alternate;
}

.app-prog b {
    color: #d3d6db;
    font-size: 0.82em;
    font-weight: 600;
}

.app-chips {
    display: flex;
    justify-content: space-between;
    padding-top: 0.8em;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.app-chips em {
    padding: 0.3em 0.8em;
    border-radius: 0.4em;
    font-size: 0.82em;
    font-style: normal;
    font-weight: 600;
}

.app-chips .plan { background: #5b616b; color: #fff; }
.app-chips .go { background: #1e6bff; color: #fff; }
.app-chips .mid { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.app-chips .high { background: rgba(245, 158, 11, 0.16); color: #f5a524; }

@media (prefers-reduced-motion: reduce) {
    .app-prog > span i {
        animation: none;
    }
}

.app-win {
    width: 66em;
    margin-left: -29em;
}

.app-filter {
    font-size: 0.76em;
    gap: 0.5em;
}

.app-input {
    min-width: 8em;
    white-space: nowrap;
}

.app-card h4 {
    font-size: 1.05em;
}

.app-toggle {
    display: none;
}

.app-chips em {
    padding: 0.3em 0.6em;
    font-size: 0.74em;
    white-space: nowrap;
}

/* Roket-PMS banner, live tour: list > project board > overview, with a clicking cursor */
.app-titles {
    position: relative;
    flex: 1;
    height: 1.5em;
}

.app-top .app-title {
    position: absolute;
    top: 0;
    left: 0;
    flex: none;
    margin: 0;
    white-space: nowrap;
}

.app-stage {
    position: relative;
    height: 38em;
    overflow: hidden;
}

.app-screen {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.app-screen.s1 { opacity: 1; }

.app-win.live .app-screen.s1 { animation: pmsS1 16s linear infinite; }
.app-win.live .app-screen.s2 { animation: pmsS2 16s linear infinite; }
.app-win.live .app-screen.s3 { animation: pmsS3 16s linear infinite; }
.app-win.live .app-title.t1 { animation: pmsS1 16s linear infinite; }
.app-win.live .app-title.t2 { animation: pmsT2 16s linear infinite; }
.app-title.t2 { opacity: 0; }

@keyframes pmsS1 { 0% { opacity: 1; } 24% { opacity: 1; } 26% { opacity: 0; } 91% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
@keyframes pmsS2 { 0% { opacity: 0; } 24% { opacity: 0; } 26% { opacity: 1; } 58% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pmsS3 { 0% { opacity: 0; } 58% { opacity: 0; } 60% { opacity: 1; } 90% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pmsT2 { 0% { opacity: 0; } 24% { opacity: 0; } 26% { opacity: 1; } 90% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }

/* cursor */
.app-cursor {
    position: absolute;
    z-index: 6;
    left: 56em;
    top: 44em;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0;
    animation: pmsCursor 16s ease-in-out infinite;
}

.app-cursor i {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    animation: pmsClick 16s linear infinite;
}

.app-cursor svg {
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

@keyframes pmsCursor {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 18.5em; top: 18.8em; }
    21% { left: 18.5em; top: 18.8em; }
    34% { left: 38em; top: 26em; }
    48% { left: 21em; top: 11.6em; }
    54% { left: 21em; top: 11.6em; }
    70% { left: 40em; top: 30em; }
    84% { left: 4.6em; top: 7.6em; }
    88% { left: 4.6em; top: 7.6em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}

@keyframes pmsClick {
    0%, 19.5% { opacity: 0; transform: scale(0.3); }
    20% { opacity: 0.95; transform: scale(0.3); }
    23% { opacity: 0; transform: scale(1.5); }
    51.5% { opacity: 0; transform: scale(0.3); }
    52% { opacity: 0.95; transform: scale(0.3); }
    55% { opacity: 0; transform: scale(1.5); }
    85.5% { opacity: 0; transform: scale(0.3); }
    86% { opacity: 0.95; transform: scale(0.3); }
    89%, 100% { opacity: 0; transform: scale(1.5); }
}

/* project header, tabs, toolbar */
.app-crumb {
    margin: 0 0 0.4em;
    color: #aeb4bf;
    font-size: 0.82em;
}

.app-ptitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9em;
}

.app-ptitle h3 {
    margin: 0;
    color: #f3f4f6;
    font-size: 1.5em;
    font-weight: 600;
}

.app-pbtns {
    display: flex;
    gap: 0.6em;
    font-size: 0.82em;
}

.app-btn.dark {
    background: #1b1d22;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f3f4f6;
    font-weight: 500;
}

.app-tabs {
    display: flex;
    gap: 1.4em;
    margin: 0 0 1em;
    padding: 0 0.4em;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82em;
}

.app-tabs li {
    display: flex;
    gap: 0.5em;
    align-items: center;
    padding: 0.7em 0.2em;
    color: #8a8f98;
    white-space: nowrap;
}

.app-tabs li.on {
    border-bottom: 2px solid #8a8f98;
    color: #e6e8ec;
}

.app-tabs u {
    padding: 0.05em 0.6em;
    border-radius: 99px;
    background: #2a2d34;
    color: #c5c9d1;
    font-size: 0.9em;
    text-decoration: none;
}

.app-tools {
    display: flex;
    gap: 0.7em;
    align-items: center;
    margin-bottom: 1em;
    font-size: 0.82em;
}

.app-tools .app-input {
    flex: 1;
    padding: 0.7em 1em;
    background: #2a2d34;
}

.app-kanban {
    display: grid;
    grid-template-columns: repeat(5, 13em);
    gap: 1em;
}

.app-kcol {
    min-height: 22em;
    padding: 0.9em;
    border-radius: 0.8em;
    background: #1a1c21;
}

.app-kcol h6 {
    display: flex;
    gap: 0.6em;
    align-items: center;
    margin: 0 0 0.9em;
    padding-bottom: 0.7em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #aeb4bf;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.app-kcol h6 i {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
}

.app-kcol h6 b {
    margin-left: auto;
    padding: 0.05em 0.7em;
    border-radius: 99px;
    background: #0e0f12;
    color: #f3f4f6;
}

.app-tcard {
    margin-bottom: 0.8em;
    padding: 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.6em;
    background: #0f1013;
}

.app-tcard.is-done {
    border-color: #e6e8ec;
}

.app-tcard h6 {
    margin: 0 0 0.7em;
    color: #f3f4f6;
    font-size: 0.86em;
    font-weight: 600;
    line-height: 1.3;
}

.app-who p {
    margin: 0 0 0.3em;
    color: #aeb4bf;
    font-size: 0.74em;
}

.app-tcard .sp {
    display: inline-block;
    margin: 0.5em 0;
    padding: 0.25em 0.7em;
    border-radius: 0.35em;
    background: rgba(47, 107, 255, 0.2);
    color: #8fb0ff;
    font-size: 0.72em;
    font-style: normal;
    font-weight: 600;
}

.app-tcard .sp.done {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.app-tfoot {
    display: flex;
    gap: 0.6em;
    align-items: center;
    margin-top: 0.4em;
}

.app-tfoot code {
    padding: 0.2em 0.6em;
    border-radius: 0.3em;
    background: #2a2d34;
    color: #c5c9d1;
    font-size: 0.72em;
}

.app-prio {
    color: #8a8f98;
    font-size: 0.8em;
}

.app-prio.hi {
    padding: 0.05em 0.35em;
    background: rgba(245, 158, 11, 0.25);
    color: #f5a524;
}

.app-tav {
    margin-left: auto;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a5160, #1f232b);
}

.app-add {
    display: block;
    margin-top: 1em;
    padding: 0.7em;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 0.5em;
    color: #aeb4bf;
    font-size: 0.8em;
    text-align: center;
}

/* overview */
.app-health {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
    padding: 1.1em 1.4em;
    border-radius: 0.8em;
    background: linear-gradient(90deg, #0f1f45, #0d1730);
}

.app-health h4 {
    margin: 0 0 0.3em;
    color: #f3f4f6;
    font-size: 1.15em;
    font-weight: 700;
}

.app-health small {
    color: #aeb4bf;
    font-size: 0.78em;
}

.app-hnum {
    display: flex;
    gap: 2em;
    text-align: right;
}

.app-hnum b {
    display: block;
    color: #fff;
    font-size: 1.5em;
}

.app-hnum em {
    color: #8a8f98;
    font-size: 0.6em;
    font-style: normal;
}

.app-hnum small {
    font-size: 0.7em;
    letter-spacing: 0.06em;
}

.app-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    margin-bottom: 1em;
}

.app-stat {
    display: flex;
    gap: 0.8em;
    align-items: center;
    padding: 0.9em 1em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.7em;
    background: #121317;
}

.app-stat > i {
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 0.6em;
    font-size: 0.9em;
}

.app-stat > i i {
    margin: 0;
}

.app-stat small {
    display: block;
    color: #aeb4bf;
    font-size: 0.74em;
    font-weight: 600;
}

.app-stat b {
    color: #fff;
    font-size: 1.5em;
}

.app-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.app-panel {
    padding: 1em 1.2em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8em;
    background: #121317;
}

.app-panel h6 {
    margin: 0 0 1em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #e6e8ec;
    font-size: 0.9em;
    font-weight: 600;
}

.app-trend {
    display: block;
    width: 100%;
}

.app-trend .l {
    stroke: #2f6bff;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.app-trend .a {
    fill: rgba(47, 107, 255, 0.14);
}

.app-donut {
    display: block;
    width: 62%;
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .app-win.live .app-screen,
    .app-win.live .app-title,
    .app-cursor,
    .app-cursor i {
        animation: none;
    }

    .app-cursor {
        display: none;
    }
}

/* Roket-LMS banner: same platform shell and tour as Roket-PMS, with learning content */
.app-win.lms .app-cursor {
    animation-name: lmsCursor;
}

.lms-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

.lms-steps li {
    position: relative;
    display: flex;
    gap: 0.7em;
    align-items: center;
    color: #8a8f98;
    font-size: 0.8em;
}

.lms-steps li::after {
    content: "";
    flex: 1;
    height: 1px;
    margin: 0 0.8em;
    background: rgba(255, 255, 255, 0.14);
}

.lms-steps li:last-child::after {
    display: none;
}

.lms-steps i {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.9em;
    font-style: normal;
}

.lms-steps li.done,
.lms-steps li.cur {
    color: #e6e8ec;
}

.lms-steps li.done i {
    border-color: #2f6bff;
    background: #2f6bff;
    color: #fff;
}

.lms-steps li.cur i {
    border-color: #2f6bff;
    color: #8fb0ff;
}

.lms-trow {
    display: grid;
    grid-template-columns: 1.9em 1fr 2.2em auto;
    gap: 0.8em;
    align-items: center;
    padding: 0.65em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #e3e7ee;
    font-size: 0.82em;
}

.lms-trow b {
    color: #8a8f98;
    font-weight: 500;
}

.lms-trow em {
    padding: 0.25em 0.7em;
    border-radius: 0.35em;
    font-size: 0.86em;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.lms-trow .ok { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.lms-trow .go { background: rgba(47, 107, 255, 0.2); color: #8fb0ff; }
.lms-trow .wait { background: #2a2d34; color: #aeb4bf; }

.lms-bar {
    display: grid;
    grid-template-columns: 7em 1fr 3em;
    gap: 0.8em;
    align-items: center;
    margin-bottom: 0.9em;
    color: #c5c9d1;
    font-size: 0.82em;
}

.lms-bar b {
    color: #e6e8ec;
    text-align: right;
}

.lms-bar .app-prog {
    margin: 0;
}

.lms-note {
    margin: 1.4em 0 0;
    color: #8a8f98;
    font-size: 0.78em;
}

.lms-skill {
    display: grid;
    grid-template-columns: 8em 1fr 2.5em;
    gap: 0.8em;
    align-items: center;
    margin-bottom: 1em;
    color: #c5c9d1;
    font-size: 0.82em;
}

.lms-skill b {
    color: #e6e8ec;
    text-align: right;
}

.lms-dots {
    display: flex;
    gap: 0.4em;
}

.lms-dots i {
    flex: 1;
    height: 0.6em;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
}

.lms-dots i.on {
    background: #2f6bff;
}

.lms-cert {
    display: flex;
    gap: 1em;
    align-items: center;
    padding: 1em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7em;
    background: #0e0f12;
}

.lms-cert > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 3em;
    height: 3em;
    border-radius: 0.7em;
    background: rgba(47, 107, 255, 0.18);
    color: #8fb0ff;
    font-size: 1.3em;
}

.lms-cert div {
    flex: 1;
}

.lms-cert b,
.lms-cert small,
.lms-cert em {
    display: block;
}

.lms-cert b {
    color: #f3f4f6;
    font-size: 0.9em;
}

.lms-cert small {
    margin: 0.2em 0 0.5em;
    color: #aeb4bf;
    font-size: 0.78em;
}

.lms-cert em {
    color: #8a8f98;
    font-size: 0.72em;
    font-style: normal;
}

.lms-cert .app-btn {
    font-size: 0.74em;
}

.app-win.lms .app-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@keyframes lmsCursor {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 43.7em; top: 20.8em; }
    21% { left: 43.7em; top: 20.8em; }
    34% { left: 46em; top: 28em; }
    48% { left: 36.8em; top: 11.4em; }
    54% { left: 36.8em; top: 11.4em; }
    70% { left: 40em; top: 30em; }
    84% { left: 4.4em; top: 11.9em; }
    88% { left: 4.4em; top: 11.9em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}

@keyframes lmsCursor {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 43.7em; top: 20.8em; }
    21% { left: 43.7em; top: 20.8em; }
    34% { left: 46em; top: 28em; }
    48% { left: 36.8em; top: 11.4em; }
    54% { left: 36.8em; top: 11.4em; }
    70% { left: 40em; top: 30em; }
    84% { left: 4.4em; top: 9.7em; }
    88% { left: 4.4em; top: 9.7em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}

/* =====================================================================
   Roket-HR banner: the HR app on a neutral black; the cursor clicks through the menu
   Employees > Recruitment > Shifts > Employees
   ===================================================================== */
.app-win.hr {
    background: #0c0d10;
    border-color: rgba(255, 255, 255, 0.2);
    color: #d3d6db;
    box-shadow: 0 4em 9em rgba(0, 0, 0, 0.7);
}

.app-win.hr .app-side {
    background: #0f1013;
    border-right-color: rgba(255, 255, 255, 0.12);
}

.app-win.hr .app-side li {
    position: relative;
    color: #e3e6ec;
}

.app-win.hr .app-side li > * {
    position: relative;
    z-index: 1;
}

.app-win.hr .app-side li i {
    color: #e3e6ec;
}

.app-win.hr .app-side li::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.5em;
    background: #2a2d34;
    opacity: 0;
}

.app-win.hr .app-side li.n1::before { opacity: 1; }
.app-win.live.hr .app-side li.n1::before { animation: pmsS1 16s linear infinite; }
.app-win.live.hr .app-side li.n2::before { animation: pmsS2 16s linear infinite; }
.app-win.live.hr .app-side li.n3::before { animation: pmsS3 16s linear infinite; }

.app-win.hr .app-side h6 {
    color: #8a8f98;
}

.app-win.hr .app-brand i {
    color: #5aa9f5;
}

.app-win.hr .app-main {
    background: #0e0f12;
}

.app-win.hr .app-top {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.app-win.hr .app-menu {
    background: #17181c;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #e3e6ec;
}

.app-win.hr .app-search,
.app-win.hr .app-ic {
    border-color: rgba(255, 255, 255, 0.25);
    background: #17181c;
    color: #d3d6db;
}

.app-win.hr .app-ic b.dot {
    top: 0.1em;
    right: 0.05em;
    width: 0.7em;
    height: 0.7em;
    padding: 0;
    background: #f0708a;
}

.app-win.hr .app-user i.pink {
    display: grid;
    place-items: center;
    background: #f43f5e;
    color: #fff;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 700;
}

.app-win.live.hr .app-title.t2 { animation: pmsS2 16s linear infinite; }
.app-win.live.hr .app-title.t3 { animation: pmsS3 16s linear infinite; }
.app-title.t3 { opacity: 0; }

.app-win.hr .app-screen .hr-body {
    padding: 1.1em 1.3em;
}

.app-win.hr .app-cursor {
    animation-name: hrCursor;
}

.hr-bar,
.hr-nav,
.hr-top2,
.hr-top3,
.hr-filter {
    margin-bottom: 0.9em;
}

.hr-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84em;
}

.hr-tabs {
    display: flex;
    gap: 0.2em;
    padding: 0.3em;
    border-radius: 0.7em;
    background: #17181c;
}

.hr-tabs span {
    display: flex;
    gap: 0.5em;
    align-items: center;
    padding: 0.55em 0.9em;
    border-radius: 0.5em;
    color: #9aa0ab;
    white-space: nowrap;
}

.hr-tabs span.on {
    background: #2f3137;
    color: #8fc2ff;
    box-shadow: inset 0 0 0 1px rgba(143, 194, 255, 0.4);
}

.hr-tabs u {
    padding: 0 0.6em;
    border-radius: 99px;
    background: #5aa9f5;
    color: #06142e;
    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none;
}

.hr-btns {
    display: flex;
    gap: 0.6em;
}

.hr-btn {
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
    padding: 0.6em 1em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5em;
    background: #14151a;
    color: #eef0f4;
    font-size: 0.9em;
    white-space: nowrap;
}

.hr-btn.pri {
    border-color: #5aa9f5;
    background: #5aa9f5;
    color: #06142e;
    font-weight: 600;
}

.hr-btn.pri2 {
    border-color: #3b3e45;
    background: #3b3e45;
    color: #fff;
}

.hr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9em;
    margin-bottom: 0.9em;
}

.hr-stat {
    display: flex;
    gap: 0.9em;
    align-items: center;
    padding: 0.9em 1em;
    border-radius: 0.9em;
    background: #131418;
}

.hr-stat > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 0.6em;
    background: #26282e;
    color: #8fc2ff;
    font-size: 0.9em;
}

.hr-stat small {
    display: block;
    color: #aeb4bf;
    font-size: 0.72em;
}

.hr-stat b {
    color: #fff;
    font-size: 1.5em;
}

.hr-stat em {
    margin-left: 0.4em;
    color: #8fc2ff;
    font-size: 0.5em;
    font-style: normal;
    font-weight: 600;
}

.hr-filter {
    display: flex;
    gap: 0.6em;
    padding: 0.9em;
    border-radius: 0.9em 0.9em 0 0;
    background: #131418;
    font-size: 0.78em;
}

.hr-in {
    display: flex;
    flex: 1;
    gap: 0.6em;
    align-items: center;
    padding: 0.7em 1em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.5em;
    color: #8a8f98;
}

.hr-sel {
    padding: 0.7em 1em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.5em;
    color: #e3e6ec;
    white-space: nowrap;
}

.hr-thead,
.hr-row {
    display: grid;
    grid-template-columns: 2.6em 1.5fr 1.2fr 1.4fr 0.9fr 1fr 0.7fr;
    gap: 0.9em;
    align-items: center;
    padding: 0.7em 1.3em;
    font-size: 0.78em;
}

.hr-thead {
    margin: 0;
    background: #1a1b20;
    color: #8a8f98;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.hr-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #131418;
    color: #eef0f4;
}

.hr-av {
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    border: 1px solid rgba(143, 194, 255, 0.4);
    border-radius: 50%;
    background: #26282e;
    color: #e3e6ec;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 700;
}

.hr-name b,
.hr-name small,
.hr-dept em,
.hr-dept small,
.hr-cand b,
.hr-cand small {
    display: block;
}

.hr-name b {
    color: #fff;
    font-weight: 600;
}

.hr-name small,
.hr-dept small,
.hr-cand small {
    margin-top: 0.15em;
    color: #8a8f98;
    font-size: 0.86em;
}

.hr-dept em {
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
    padding: 0.15em 0.7em;
    border-radius: 99px;
    background: #26282e;
    font-style: normal;
    font-weight: 600;
}

.hr-dept em i {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
}

.hr-chip {
    justify-self: start;
    padding: 0.25em 0.8em;
    border-radius: 99px;
    background: #26282e;
    color: #e3e6ec;
    font-weight: 600;
}

.hr-ok {
    justify-self: start;
    padding: 0.2em 0.8em;
    border-radius: 99px;
    background: rgba(79, 179, 168, 0.22);
    color: #7fe0d2;
    font-weight: 600;
}

/* recruitment */
.hr-top2 {
    display: grid;
    grid-template-columns: 1.9fr 1fr;
    gap: 0.9em;
}

.hr-top3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9em;
}

.hr-panel {
    padding: 1.1em 1.3em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9em;
    background: #131418;
}

.hr-panel h4 {
    margin: 0 0 0.2em;
    color: #fff;
    font-size: 1.05em;
    font-weight: 700;
}

.hr-panel > small {
    display: block;
    margin-bottom: 0.9em;
    color: #8a8f98;
    font-size: 0.74em;
}

.hr-fun {
    display: grid;
    grid-template-columns: 8em 1fr 4em;
    gap: 0.8em;
    align-items: center;
    margin-bottom: 0.55em;
    color: #e3e6ec;
    font-size: 0.78em;
}

.hr-fbar {
    height: 1.5em;
    border-radius: 0.4em;
    background: #1c1d22;
    overflow: hidden;
}

.hr-fbar i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 0.4em;
    transform-origin: left;
    animation: pbFill 7s ease-in-out infinite alternate;
}

.hr-fun b {
    color: #fff;
    text-align: right;
}

.hr-fun em {
    color: #8a8f98;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 500;
}

.hr-donut {
    display: block;
    width: 46%;
    margin: 0 auto 0.6em;
}

.hr-legend p {
    display: flex;
    gap: 0.6em;
    align-items: center;
    margin: 0 0 0.4em;
    color: #e3e6ec;
    font-size: 0.72em;
}

.hr-legend i {
    width: 0.8em;
    height: 0.8em;
    border-radius: 0.2em;
}

.hr-legend b {
    margin-left: auto;
    color: #9aa0ab;
    font-weight: 500;
}

.hr-cand {
    display: flex;
    gap: 0.9em;
    align-items: center;
    padding: 0.5em 0;
    font-size: 0.8em;
}

.hr-cand > span {
    flex: 1;
}

.hr-cand b {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.hr-cand em {
    color: #8a8f98;
    font-size: 0.85em;
    font-style: normal;
}

/* shifts */
.hr-nav {
    display: flex;
    gap: 0.7em;
    align-items: center;
    font-size: 0.82em;
}

.hr-nav > b {
    color: #fff;
    font-size: 1.15em;
    font-weight: 700;
}

.hr-arrow {
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5em;
    background: #14151a;
    color: #e3e6ec;
}

.hr-seg {
    display: flex;
    border-radius: 0.5em;
    background: #17181c;
}

.hr-seg i {
    padding: 0.55em 0.9em;
    border-radius: 0.5em;
    color: #9aa0ab;
    font-style: normal;
}

.hr-seg i.on {
    background: #2f3137;
    color: #8fc2ff;
}

.hr-nav .hr-btns {
    margin-left: auto;
}

.hr-pub {
    margin: 0 0 0.8em;
    color: #8a8f98;
    font-size: 0.74em;
}

.hr-pub em {
    padding: 0.25em 0.8em;
    border-radius: 99px;
    background: #2f3137;
    color: #8fc2ff;
    font-style: normal;
}

.hr-grid {
    padding: 0.9em 1em;
    border-radius: 0.9em;
    background: #131418;
    font-size: 0.78em;
}

.hr-dh,
.hr-shift {
    display: grid;
    grid-template-columns: 9em repeat(7, 1fr) 3em;
    gap: 0.5em;
    align-items: center;
}

.hr-dh {
    margin-bottom: 0.6em;
    color: #8a8f98;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
}

.hr-dh span:first-child {
    text-align: left;
}

.hr-dh span small,
.hr-dh span b {
    display: block;
}

.hr-dh span b {
    color: #fff;
    font-size: 1.2em;
}

.hr-dh span.we {
    padding: 0.4em 0;
    border-radius: 0.5em;
    background: #1a1b20;
}

.hr-dh span.sun {
    background: #5aa9f5;
    color: #06142e;
}

.hr-dh span.sun b {
    color: #06142e;
}

.hr-team {
    margin: 0.5em 0 0.6em;
    color: #aeb4bf;
    font-size: 0.9em;
}

.hr-shift {
    margin-bottom: 0.45em;
}

.hr-shift > b {
    display: block;
    color: #fff;
    font-weight: 600;
}

.hr-shift .hr-av {
    display: none;
}

.hr-shift .cell {
    display: block;
    padding: 0.55em 0;
    border-radius: 0.5em;
    text-align: center;
}

.hr-shift .cell b,
.hr-shift .cell small {
    display: block;
}

.hr-shift .cell small {
    color: #aeb4bf;
    font-size: 0.8em;
}

.hr-shift .cell.on {
    background: #2f3137;
    color: #fff;
}

.hr-shift .cell.off {
    background: #111216;
    color: #8a8f98;
}

.hr-shift em {
    color: #e3e6ec;
    font-style: normal;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .app-win.live.hr .app-side li::before,
    .app-win.live.hr .app-title,
    .hr-fbar i {
        animation: none;
    }

    .app-win.hr .app-title.t2,
    .app-win.hr .app-title.t3 {
        opacity: 0;
    }
}

@keyframes hrCursor {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 4.4em; top: 9.7em; }
    21% { left: 4.4em; top: 9.7em; }
    34% { left: 30em; top: 24em; }
    48% { left: 4.4em; top: 14em; }
    54% { left: 4.4em; top: 14em; }
    70% { left: 34em; top: 28em; }
    84% { left: 4.4em; top: 7.4em; }
    88% { left: 4.4em; top: 7.4em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}

.hr-bar {
    font-size: 0.74em;
    gap: 0.6em;
}

.hr-tabs span {
    padding: 0.5em 0.7em;
}

.hr-btns {
    gap: 0.4em;
}

.hr-btn {
    padding: 0.55em 0.8em;
}

/* Product banners (TMS, PROD, CRM, PROCESS, TWIN): same live tour as HR, product specific content */
.g-head,
.g-row {
    display: grid;
    grid-template-columns: var(--c);
    gap: 0.9em;
    align-items: center;
    padding: 0.7em 1.3em;
    font-size: 0.78em;
}

.g-head {
    margin-top: 0.4em;
    background: #1a1b20;
    border-radius: 0.6em 0.6em 0 0;
    color: #8a8f98;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.g-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #131418;
    color: #eef0f4;
}

.g-t {
    color: #fff;
    font-weight: 500;
}

.g-t small {
    display: block;
    margin-top: 0.15em;
    color: #8a8f98;
    font-size: 0.86em;
    font-weight: 400;
}

.g-id,
.g-d {
    color: #9aa0ab;
}

.g-box {
    width: 1.3em;
    height: 1.3em;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.35em;
}

.g-box.ok {
    position: relative;
    border-color: #3f8cf0;
    background: #3f8cf0;
}

.g-box.ok::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #06142e;
    font-size: 0.85em;
    font-weight: 800;
}

.g-chip {
    justify-self: start;
    padding: 0.25em 0.8em;
    border-radius: 99px;
    background: #26282e;
    color: #e3e6ec;
    font-size: 0.92em;
    font-weight: 600;
    white-space: nowrap;
}

.g-chip.hi { background: rgba(240, 112, 138, 0.2); color: #ff9db0; }
.g-chip.mid { background: rgba(245, 165, 36, 0.18); color: #f5b955; }
.g-chip.lo { background: #26282e; color: #aeb4bf; }
.g-chip.ok { background: rgba(79, 179, 168, 0.22); color: #7fe0d2; }
.g-chip.go { background: rgba(63, 140, 240, 0.22); color: #8fc2ff; }

.g-pb {
    display: block;
    height: 0.5em;
    border-radius: 99px;
    background: #1c1d22;
    overflow: hidden;
}

.g-pb i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 99px;
    transform-origin: left;
    animation: pbFill 7s ease-in-out infinite alternate;
}

.g-vote {
    display: flex;
    gap: 0.5em;
    align-items: center;
    color: #8fc2ff;
}

.g-week {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9em;
}

.g-day {
    min-height: 20em;
    padding: 0.9em;
    border-radius: 0.8em;
    background: #131418;
}

.g-day h6 {
    margin: 0 0 0.8em;
    padding-bottom: 0.6em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #aeb4bf;
    font-size: 0.8em;
    font-weight: 600;
}

.g-task {
    margin-bottom: 0.6em;
    padding: 0.7em 0.8em;
    border-left: 3px solid var(--c);
    border-radius: 0.4em;
    background: #1a1b20;
    color: #eef0f4;
    font-size: 0.8em;
}

.g-bars {
    display: block;
    width: 100%;
    margin-top: 0.8em;
}

.g-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.8em;
    color: #8a8f98;
    font-size: 0.82em;
}

.g-kv b {
    color: #fff;
    font-weight: 600;
}

.g-warn {
    margin: 0.9em 0 0;
    color: #f5a524;
    font-size: 0.8em;
}

.g-flowwrap {
    padding: 0.4em 0;
}

.g-sugs {
    display: grid;
    gap: 0.8em;
}

.g-sug {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1em;
    align-items: center;
    padding: 1em 1.2em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8em;
    background: #131418;
    font-size: 0.86em;
}

.g-sug b {
    display: block;
    color: #fff;
    font-weight: 600;
}

.g-sug small {
    display: block;
    margin-top: 0.3em;
    color: #8a8f98;
}

.hr-stats.three {
    grid-template-columns: repeat(3, 1fr);
}

.g-twin {
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 0.9em;
    align-items: start;
}

.g-graph {
    display: block;
    width: 100%;
    max-height: 17em;
}

.g-sl {
    display: grid;
    grid-template-columns: 8em 1fr 3.5em;
    gap: 0.8em;
    align-items: center;
    margin-bottom: 1em;
    color: #c5c9d1;
    font-size: 0.8em;
}

.g-sl b {
    color: #fff;
    text-align: right;
}

.app-win.hr .ui-card {
    background: #131418;
    border-color: rgba(255, 255, 255, 0.08);
}

.app-win.hr .ui-road {
    color: #c5c9d1;
}

.app-win.hr .ui-tree {
    padding: 0.4em;
    border-radius: 0.8em;
    background: #131418;
}

@media (prefers-reduced-motion: reduce) {
    .g-pb i {
        animation: none;
    }
}

/* per-product cursor paths: menu item 2, menu item 3, back to menu item 1 */
.app-win.hr.p-tm .app-cursor { animation-name: cur-tm; }
@keyframes cur-tm {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 4.4em; top: 9.7em; }
    21% { left: 4.4em; top: 9.7em; }
    34% { left: 30em; top: 24em; }
    48% { left: 4.4em; top: 16.3em; }
    54% { left: 4.4em; top: 16.3em; }
    70% { left: 34em; top: 28em; }
    84% { left: 4.4em; top: 7.4em; }
    88% { left: 4.4em; top: 7.4em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}
.app-win.hr.p-prod .app-cursor { animation-name: cur-prod; }
@keyframes cur-prod {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 4.4em; top: 9.7em; }
    21% { left: 4.4em; top: 9.7em; }
    34% { left: 30em; top: 24em; }
    48% { left: 4.4em; top: 11.9em; }
    54% { left: 4.4em; top: 11.9em; }
    70% { left: 34em; top: 28em; }
    84% { left: 4.4em; top: 7.4em; }
    88% { left: 4.4em; top: 7.4em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}
.app-win.hr.p-crm .app-cursor { animation-name: cur-crm; }
@keyframes cur-crm {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 4.4em; top: 9.7em; }
    21% { left: 4.4em; top: 9.7em; }
    34% { left: 30em; top: 24em; }
    48% { left: 4.4em; top: 16.3em; }
    54% { left: 4.4em; top: 16.3em; }
    70% { left: 34em; top: 28em; }
    84% { left: 4.4em; top: 7.4em; }
    88% { left: 4.4em; top: 7.4em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}
.app-win.hr.p-proc .app-cursor { animation-name: cur-proc; }
@keyframes cur-proc {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 4.4em; top: 9.7em; }
    21% { left: 4.4em; top: 9.7em; }
    34% { left: 30em; top: 24em; }
    48% { left: 4.4em; top: 11.9em; }
    54% { left: 4.4em; top: 11.9em; }
    70% { left: 34em; top: 28em; }
    84% { left: 4.4em; top: 7.4em; }
    88% { left: 4.4em; top: 7.4em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}
.app-win.hr.p-dt .app-cursor { animation-name: cur-dt; }
@keyframes cur-dt {
    0% { left: 56em; top: 44em; opacity: 0; }
    4% { opacity: 1; }
    18% { left: 4.4em; top: 9.7em; }
    21% { left: 4.4em; top: 9.7em; }
    34% { left: 30em; top: 24em; }
    48% { left: 4.4em; top: 11.9em; }
    54% { left: 4.4em; top: 11.9em; }
    70% { left: 34em; top: 28em; }
    84% { left: 4.4em; top: 7.4em; }
    88% { left: 4.4em; top: 7.4em; }
    96% { opacity: 1; }
    100% { left: 56em; top: 44em; opacity: 0; }
}



/* Hero v4: large Inter headline, no accent line, small muted supporting copy beneath */
.hero-corporate .hero-slogan {
    max-width: 980px;
    margin: 0 0 32px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(42px, 6.2vw, 80px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.05em;
    color: #f7f8f8;
    text-shadow: none;
}

.hero-corporate .hero-slogan::after {
    display: none;
}

.hero-corporate .hero-pretitle.hero-lead {
    max-width: 620px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(16px, 1.35vw, 18px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: #8a8f98;
}

.hero-corporate .hero-pretitle.hero-lead .accent-word {
    display: block;
    margin-top: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: inherit;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: inherit;
    background: none;
    -webkit-text-fill-color: #f7f8f8;
    color: #f7f8f8;
}

@media (max-width: 768px) {
    .hero-corporate .hero-slogan {
        font-size: clamp(34px, 10.5vw, 48px);
        margin-bottom: 24px;
    }
}


/* Hero interludes: the live app screens of the products (same markup as the product page banners) */
.hero-scene .scene-app {
    display: none;
    inset: 0;
    overflow: hidden;
    font-size: min(12px, 1.12vw);
    opacity: 1;
}

#homeView .hero-scene .scene-app-label {
    display: none;
}

.hero-scene.is-pms .scene-app[data-app="pms"],
.hero-scene.is-tm .scene-app[data-app="tm"],
.hero-scene.is-crm .scene-app[data-app="crm"],
.hero-scene.is-lms .scene-app[data-app="lms"] {
    display: block;
    animation: sceneAppIn 0.5s ease both;
}

@keyframes sceneAppIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

.scene-app .app-win {
    top: 50%;
    left: auto;
    right: -9em;
    margin: -25em 0 0;
    width: 66em;
}

.scene-app-label {
    position: absolute;
    top: 14%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin: 0;
    text-align: right;
    z-index: 2;
}

.scene-app-label b {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scene-app-label span {
    color: #8a8f98;
    font-size: 14px;
    font-weight: 400;
}