/*cat > public/assets/css/app.css <<'CSS'*/
:root {
    --primary: #155eef;
    --primary-dark: #0b4bd4;
    --secondary: #12b8c4;
    --navy: #071b3a;
    --navy-light: #0d2b55;
    --text: #172033;
    --muted: #667085;
    --border: #e4e9f2;
    --background: #ffffff;
    --background-soft: #f5f8fd;
    --background-blue: #eef5ff;
    --white: #ffffff;
    --success: #12b76a;
    --shadow: 0 20px 60px rgba(16, 42, 85, 0.10);
    --shadow-small: 0 10px 30px rgba(16, 42, 85, 0.08);
    --radius: 20px;
    --container: 1240px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--text);
    background: var(--background);
    line-height: 1.6;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.section {
    padding: 110px 0;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-label::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 20px;
    background: var(--secondary);
}

.section-label-light {
    color: #b9dcff;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.section-heading.centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading h2,
.ecosystem-content h2 {
    color: var(--navy);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.section-heading h2 span,
.ecosystem-content h2 span {
    color: var(--primary);
}

.section-heading p,
.ecosystem-content > p {
    margin-top: 20px;
    color: var(--muted);
    font-size: 17px;
}

.section-heading-row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.button {
    min-height: 52px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    transition: 0.25s ease;
}

.button-primary {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), #3478ff);
    box-shadow: 0 12px 25px rgba(21, 94, 239, 0.25);
}

.button-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.button-secondary {
    color: var(--navy);
    background: var(--white);
    border-color: var(--border);
}

.button-secondary:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.button-light {
    color: var(--navy);
    background: var(--white);
}

.button-light:hover {
    transform: translateY(-2px);
    background: #eff7ff;
}

.text-link {
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
}

/* Header */

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(224, 231, 242, 0.8);
    backdrop-filter: blur(18px);
    transition: 0.25s ease;
}

.site-header.scrolled {
    box-shadow: 0 8px 30px rgba(18, 45, 86, 0.08);
}

.header-container {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    font-size: 21px;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(21, 94, 239, 0.22);
}

.brand-text {
    color: var(--navy);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.brand-text span {
    color: var(--primary);
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 28px;
}

.navigation-list {
    display: flex;
    align-items: center;
    gap: 5px;
}

.navigation-list > li {
    position: relative;
}

.navigation-link {
    padding: 14px 12px;
    border: 0;
    color: #344054;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
}

.navigation-link:hover {
    color: var(--primary);
}

.dropdown-button i {
    font-size: 10px;
}

.navigation-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    width: 420px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: 0.2s ease;
}

.has-dropdown:hover .navigation-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.navigation-dropdown::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 20px;
}

.navigation-dropdown a {
    padding: 13px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    transition: 0.2s ease;
}

.navigation-dropdown a:hover {
    background: var(--background-soft);
}

.dropdown-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--background-blue);
}

.navigation-dropdown strong,
.navigation-dropdown small {
    display: block;
}

.navigation-dropdown strong {
    color: var(--navy);
    font-size: 14px;
}

.navigation-dropdown small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.mobile-menu-button {
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.mobile-menu-button span {
    width: 21px;
    height: 2px;
    border-radius: 20px;
    background: var(--navy);
}

/* Hero */

.hero-section {
    position: relative;
    padding: 165px 0 90px;
    background:
        radial-gradient(circle at 85% 15%, rgba(18, 184, 196, 0.13), transparent 28%),
        radial-gradient(circle at 20% 20%, rgba(21, 94, 239, 0.10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    overflow: hidden;
}

.hero-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    opacity: 0.5;
}

.hero-decoration-one {
    width: 320px;
    height: 320px;
    right: -130px;
    top: 140px;
    border: 1px solid rgba(21, 94, 239, 0.20);
}

.hero-decoration-two {
    width: 190px;
    height: 190px;
    left: -80px;
    bottom: 40px;
    border: 1px solid rgba(18, 184, 196, 0.24);
}

.hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(550px, 1.12fr);
    align-items: center;
    gap: 65px;
}

.hero-badge {
    width: fit-content;
    margin-bottom: 24px;
    padding: 8px 13px;
    border: 1px solid #dbe8ff;
    border-radius: 100px;
    color: var(--primary);
    background: rgba(255, 255, 255, 0.84);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: var(--shadow-small);
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 5px rgba(18, 184, 196, 0.12);
}

.hero-content h1 {
    color: var(--navy);
    font-size: clamp(44px, 5.5vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.hero-content h1 span {
    color: var(--primary);
}

.hero-description {
    max-width: 650px;
    margin-top: 25px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.hero-buttons {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-trust {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.trust-avatars {
    display: flex;
    align-items: center;
}

.trust-avatars span {
    width: 34px;
    height: 34px;
    margin-left: -7px;
    border: 3px solid var(--white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--primary);
    font-size: 11px;
    font-weight: 800;
}

.trust-avatars span:first-child {
    margin-left: 0;
}

.trust-avatars span:nth-child(2) {
    background: var(--secondary);
}

.trust-avatars span:nth-child(3) {
    background: var(--navy-light);
}

.trust-avatars span:last-child {
    color: var(--primary);
    background: var(--white);
}

.hero-trust strong {
    color: var(--navy);
    font-size: 13px;
}

.hero-trust p {
    color: var(--muted);
    font-size: 11px;
}

.hero-visual {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-window {
    width: 100%;
    border: 1px solid rgba(198, 214, 236, 0.9);
    border-radius: 22px;
    background: var(--white);
    box-shadow: 0 40px 90px rgba(19, 58, 110, 0.18);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.platform-window-header {
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
}

.window-dots {
    display: flex;
    gap: 6px;
}

.window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97066;
}

.window-dots span:nth-child(2) {
    background: #fdb022;
}

.window-dots span:nth-child(3) {
    background: #12b76a;
}

.window-status {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
}

.window-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
}

.platform-window-body {
    min-height: 430px;
    display: grid;
    grid-template-columns: 62px 1fr;
}

.platform-sidebar {
    padding: 20px 11px;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.sidebar-brand,
.sidebar-item {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-brand {
    margin-bottom: 12px;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    font-weight: 800;
}

.sidebar-item {
    color: #8aa5c8;
    font-size: 13px;
}

.sidebar-item.active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
}

.platform-dashboard {
    padding: 25px;
    background: #f6f8fc;
}

.dashboard-heading,
.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-heading small,
.card-heading small,
.dashboard-games-card > small {
    color: #98a2b3;
    font-size: 10px;
}

.dashboard-heading h3 {
    margin-top: 2px;
    color: var(--navy);
    font-size: 18px;
}

.dashboard-heading button {
    padding: 7px 11px;
    border: 1px solid #dce5f2;
    border-radius: 8px;
    color: var(--primary);
    background: var(--white);
    font-size: 9px;
    font-weight: 800;
}

.dashboard-stat-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dashboard-stat-card {
    padding: 15px;
    border: 1px solid #e8edf5;
    border-radius: 13px;
    background: var(--white);
}

.stat-card-icon {
    width: 29px;
    height: 29px;
    margin-bottom: 12px;
    border-radius: 8px;
    color: var(--primary);
    background: var(--background-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.dashboard-stat-card small,
.dashboard-stat-card strong,
.dashboard-stat-card em {
    display: block;
}

.dashboard-stat-card small {
    color: #98a2b3;
    font-size: 9px;
}

.dashboard-stat-card strong {
    margin-top: 3px;
    color: var(--navy);
    font-size: 17px;
}

.dashboard-stat-card em {
    margin-top: 3px;
    color: var(--success);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.dashboard-main-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 12px;
}

.dashboard-chart-card,
.dashboard-games-card {
    min-height: 190px;
    padding: 16px;
    border: 1px solid #e8edf5;
    border-radius: 13px;
    background: var(--white);
}

.card-heading strong,
.dashboard-games-card > strong {
    display: block;
    color: var(--navy);
    font-size: 12px;
}

.card-heading > span {
    color: #98a2b3;
    font-size: 8px;
}

.fake-chart {
    height: 116px;
    margin-top: 18px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.fake-chart span {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--primary), #82aaff);
}

.game-progress {
    margin-top: 18px;
}

.game-progress div {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    color: #667085;
    font-size: 8px;
}

.game-progress progress {
    width: 100%;
    height: 5px;
    border: none;
}

.game-progress progress::-webkit-progress-bar {
    border-radius: 10px;
    background: #edf1f7;
}

.game-progress progress::-webkit-progress-value {
    border-radius: 10px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.floating-card {
    position: absolute;
    padding: 12px 15px;
    border: 1px solid rgba(219, 229, 242, 0.95);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-small);
    display: flex;
    align-items: center;
    gap: 11px;
}

.floating-card > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--primary);
    background: var(--background-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.floating-card strong,
.floating-card small {
    display: block;
}

.floating-card strong {
    color: var(--navy);
    font-size: 11px;
}

.floating-card small {
    color: var(--muted);
    font-size: 8px;
}

.floating-card-one {
    top: 20px;
    right: -30px;
}

.floating-card-two {
    left: -35px;
    bottom: 5px;
}

/* Trust strip */

.trust-strip-section {
    border-top: 1px solid #edf1f7;
    border-bottom: 1px solid #edf1f7;
    background: var(--white);
}

.trust-strip {
    min-height: 94px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.trust-strip-item {
    padding: 20px;
    border-right: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
}

.trust-strip-item:first-child {
    border-left: 1px solid #edf1f7;
}

.trust-strip-item i {
    color: var(--primary);
}

/* Solutions */

.solutions-section {
    background: var(--white);
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.solution-card {
    position: relative;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    transition: 0.3s ease;
    overflow: hidden;
}

.solution-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -45px;
    bottom: -50px;
    border-radius: 50%;
    background: var(--background-blue);
    transition: 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-8px);
    border-color: #c9dcff;
    box-shadow: var(--shadow);
}

.solution-card:hover::after {
    transform: scale(1.4);
}

.solution-card-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 25px;
    border-radius: 15px;
    color: var(--primary);
    background: var(--background-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.solution-number {
    position: absolute;
    top: 29px;
    right: 28px;
    color: #d3ddeb;
    font-size: 14px;
    font-weight: 800;
}

.solution-card h3 {
    color: var(--navy);
    font-size: 21px;
}

.solution-card p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
}

.solution-card a {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
}

/* Statistics */

.statistics-section {
    padding: 65px 0;
    color: var(--white);
    background:
        radial-gradient(circle at 20% 10%, rgba(46, 134, 255, 0.35), transparent 30%),
        linear-gradient(135deg, var(--navy), #0c3064);
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.statistic-item {
    padding: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
}

.statistic-item:last-child {
    border-right: none;
}

.statistic-item strong {
    display: block;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
}

.statistic-item strong span {
    color: var(--secondary);
}

.statistic-item p {
    margin-top: 11px;
    color: #b9cbe3;
    font-size: 13px;
}

.statistics-note {
    margin-top: 30px;
    color: #91a8c5;
    text-align: center;
    font-size: 11px;
}

/* Ecosystem */

.ecosystem-section {
    background: var(--background-soft);
}

.ecosystem-container {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 90px;
}

.ecosystem-content > .button {
    margin-top: 32px;
}

.ecosystem-feature-list {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ecosystem-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ecosystem-feature > span {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    margin-top: 2px;
    border-radius: 50%;
    color: var(--primary);
    background: #dceaff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.ecosystem-feature strong {
    color: var(--navy);
    font-size: 13px;
}

.ecosystem-feature p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.ecosystem-visual {
    position: relative;
    min-height: 500px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(21, 94, 239, 0.09) 0%, rgba(21, 94, 239, 0.03) 45%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecosystem-visual::before,
.ecosystem-visual::after {
    content: "";
    position: absolute;
    border: 1px dashed rgba(21, 94, 239, 0.25);
    border-radius: 50%;
}

.ecosystem-visual::before {
    width: 330px;
    height: 330px;
}

.ecosystem-visual::after {
    width: 470px;
    height: 470px;
}

.ecosystem-center {
    position: relative;
    z-index: 2;
    width: 210px;
    height: 210px;
    border: 12px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #0b3f9c);
    box-shadow: 0 30px 60px rgba(21, 94, 239, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.ecosystem-center > span {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 800;
}

.ecosystem-center strong {
    font-size: 15px;
}

.ecosystem-center small {
    margin-top: 3px;
    color: #b9d5ff;
    font-size: 9px;
}

.ecosystem-orbit {
    position: absolute;
    z-index: 3;
    padding: 11px 15px;
    border: 1px solid #d8e5f6;
    border-radius: 100px;
    background: var(--white);
    box-shadow: var(--shadow-small);
}

.ecosystem-orbit span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
}

.ecosystem-orbit i {
    color: var(--primary);
}

.ecosystem-orbit-one {
    top: 60px;
    left: 70px;
}

.ecosystem-orbit-two {
    top: 120px;
    right: 30px;
}

.ecosystem-orbit-three {
    bottom: 65px;
    right: 75px;
}

.ecosystem-orbit-four {
    bottom: 90px;
    left: 25px;
}

/* Process */

.launch-section {
    background: var(--white);
}

.process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.process-grid::before {
    content: "";
    position: absolute;
    top: 63px;
    left: 7%;
    right: 7%;
    height: 1px;
    background: #dbe6f4;
}

.process-card {
    position: relative;
    z-index: 2;
    padding: 25px 17px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    text-align: center;
    transition: 0.25s ease;
}

.process-card:hover {
    transform: translateY(-5px);
    border-color: #c9dcff;
    box-shadow: var(--shadow-small);
}

.process-card > span {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #ccd7e6;
    font-size: 10px;
    font-weight: 800;
}

.process-card > i {
    width: 47px;
    height: 47px;
    margin-bottom: 18px;
    border-radius: 13px;
    color: var(--primary);
    background: var(--background-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.process-card h3 {
    color: var(--navy);
    font-size: 15px;
}

.process-card p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
}

.launch-note {
    max-width: 760px;
    margin: 35px auto 0;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

/* Insights */

.insight-section {
    background: var(--background-soft);
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.insight-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
    transition: 0.25s ease;
}

.insight-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.insight-image {
    min-height: 220px;
    padding: 24px;
    display: flex;
    align-items: flex-end;
}

.insight-image span {
    padding: 7px 12px;
    border-radius: 100px;
    color: var(--white);
    background: rgba(7, 27, 58, 0.75);
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 800;
}

.insight-image-one {
    background:
        linear-gradient(145deg, rgba(21, 94, 239, 0.1), rgba(21, 94, 239, 0.8)),
        linear-gradient(135deg, #dbe9ff, #155eef);
}

.insight-image-two {
    background:
        linear-gradient(145deg, rgba(18, 184, 196, 0.1), rgba(7, 27, 58, 0.75)),
        linear-gradient(135deg, #d8fbff, #12b8c4);
}

.insight-image-three {
    background:
        linear-gradient(145deg, rgba(7, 27, 58, 0.1), rgba(7, 27, 58, 0.8)),
        linear-gradient(135deg, #d5e4f8, #071b3a);
}

.insight-content {
    padding: 25px;
}

.insight-content small {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.insight-content h3 {
    margin-top: 9px;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.45;
}

.insight-content a {
    margin-top: 20px;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

/* Footer */

.site-footer {
    color: var(--white);
    background:
        radial-gradient(circle at 80% 10%, rgba(21, 94, 239, 0.28), transparent 25%),
        var(--navy);
}

.footer-cta {
    padding: 70px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.footer-cta h2 {
    max-width: 690px;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.footer-cta p {
    max-width: 650px;
    margin-top: 14px;
    color: #a8bdd8;
    font-size: 14px;
}

.footer-grid {
    padding: 70px 0 55px;
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.9fr 1.1fr;
    gap: 55px;
}

.footer-logo .brand-text {
    color: var(--white);
}

.footer-brand > p {
    max-width: 390px;
    margin-top: 20px;
    color: #9fb4d0;
    font-size: 13px;
}

.social-links {
    margin-top: 22px;
    display: flex;
    gap: 9px;
}

.social-links a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #c6d6e9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.social-links a:hover {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
}

.footer-column h3 {
    margin-bottom: 20px;
    font-size: 14px;
}

.footer-column li + li {
    margin-top: 12px;
}

.footer-column a,
.footer-column span {
    color: #9fb4d0;
    font-size: 12px;
}

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

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-contact-list i {
    margin-top: 4px;
    color: var(--secondary);
    font-size: 12px;
}

.footer-bottom {
    min-height: 75px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    color: #7f97b5;
    font-size: 11px;
}

.footer-bottom div {
    display: flex;
    gap: 20px;
}

.footer-bottom a:hover {
    color: var(--white);
}

/* Responsive */

@media (max-width: 1100px) {
    .main-navigation {
        position: fixed;
        top: 84px;
        left: 20px;
        right: 20px;
        max-height: calc(100vh - 105px);
        padding: 22px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--white);
        box-shadow: var(--shadow);
        display: none;
        align-items: stretch;
        overflow-y: auto;
    }

    .main-navigation.active {
        display: block;
    }

    .navigation-list {
        display: block;
    }

    .navigation-link {
        width: 100%;
        padding: 14px 5px;
        justify-content: space-between;
        border-bottom: 1px solid #edf1f7;
    }

    .navigation-dropdown {
        position: static;
        width: auto;
        margin: 8px 0;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .has-dropdown.open .navigation-dropdown {
        display: block;
    }

    .has-dropdown:hover .navigation-dropdown {
        transform: none;
    }

    .header-cta {
        width: 100%;
        margin-top: 18px;
    }

    .mobile-menu-button {
        display: flex;
    }

    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-content {
        max-width: 780px;
        text-align: center;
        margin-inline: auto;
    }

    .hero-badge,
    .hero-trust {
        margin-inline: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-visual {
        max-width: 850px;
        width: 100%;
        margin-inline: auto;
    }

    .ecosystem-container {
        grid-template-columns: 1fr;
    }

    .ecosystem-content {
        max-width: 780px;
    }

    .ecosystem-visual {
        max-width: 650px;
        width: 100%;
        margin-inline: auto;
    }

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

    .process-grid::before {
        display: none;
    }
}

@media (max-width: 850px) {
    .section {
        padding: 80px 0;
    }

    .solutions-grid,
    .insight-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-strip-item,
    .trust-strip-item:first-child {
        border-left: 0;
        border-bottom: 1px solid #edf1f7;
    }

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

    .statistic-item:nth-child(2) {
        border-right: none;
    }

    .statistic-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

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

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

@media (max-width: 620px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .header-container {
        min-height: 74px;
    }

    .main-navigation {
        top: 74px;
        left: 14px;
        right: 14px;
    }

    .brand-icon {
        width: 38px;
        height: 38px;
    }

    .brand-text {
        font-size: 17px;
    }

    .hero-section {
        padding: 130px 0 65px;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-buttons .button {
        width: 100%;
    }

    .hero-visual {
        min-height: auto;
        margin-top: 15px;
    }

    .platform-window {
        transform: none;
    }

    .platform-window-body {
        min-height: auto;
        grid-template-columns: 44px 1fr;
    }

    .platform-sidebar {
        padding-inline: 5px;
    }

    .sidebar-brand,
    .sidebar-item {
        width: 32px;
        height: 32px;
    }

    .platform-dashboard {
        padding: 13px;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-games-card {
        display: none;
    }

    .floating-card {
        display: none;
    }

    .trust-strip {
        grid-template-columns: 1fr;
    }

    .solutions-grid,
    .insight-grid,
    .ecosystem-feature-list,
    .process-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .statistics-grid {
        grid-template-columns: 1fr;
    }

    .statistic-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .statistic-item:last-child {
        border-bottom: none;
    }

    .ecosystem-visual {
        min-height: 430px;
        transform: scale(0.84);
        margin-top: -30px;
        margin-bottom: -30px;
    }

    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-bottom {
        padding: 22px 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-bottom div {
        flex-wrap: wrap;
    }
}
/*CSS*/
/*cat >> public/assets/css/app.css <<'CSS'*/
/* Header space adjustment */
.hero-section {
    padding-top: 185px;
}

@media (max-width: 1080px) {
    .hero-section {
        padding-top: 145px;
    }
}


/* =========================================================
   PREMIUM OMNIIGAMING HEADER
========================================================= */

.premium-header {
    position: absolute;
    z-index: 2000;
    top: 24px;
    left: 0;
    right: 0;
    width: 100%;
    transition: all 0.3s ease;
}

.premium-header-wrapper {
    width: min(calc(100% - 80px), 1440px);
    min-height: 92px;
    margin-inline: auto;
    padding: 0 24px 0 28px;
    border: 1px solid rgba(221, 229, 240, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 22px 60px rgba(15, 35, 70, 0.13),
        0 4px 14px rgba(15, 35, 70, 0.05);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.premium-header.is-sticky {
    position: fixed;
    top: 10px;
}

.premium-header.is-sticky .premium-header-wrapper {
    min-height: 76px;
    box-shadow:
        0 18px 45px rgba(15, 35, 70, 0.16),
        0 3px 10px rgba(15, 35, 70, 0.05);
}

.premium-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 13px;
}

.premium-brand-symbol {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background:
        linear-gradient(145deg, #0c1c39, #172d55);
    box-shadow:
        0 10px 25px rgba(10, 30, 64, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.premium-brand-symbol::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border: 5px solid #ffffff;
    border-right-color: #2d6cff;
    border-radius: 50%;
}

.premium-brand-symbol span {
    position: relative;
    z-index: 2;
    color: transparent;
    font-size: 1px;
}

.premium-brand-name {
    color: #101828;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

.premium-brand-name span {
    color: #245ce8;
}

.premium-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
}

.premium-navigation-list {
    display: flex;
    align-items: center;
    gap: 2px;
}

.premium-navigation-list > li {
    position: relative;
}

.premium-nav-link {
    min-height: 54px;
    padding: 0 15px;
    border: none;
    border-radius: 10px;
    color: #26364f;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
    transition: all 0.22s ease;
}

.premium-nav-link i {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.premium-nav-link:hover,
.premium-nav-link.active {
    color: #245ce8;
    background: #f2f6ff;
}

.premium-has-mega-menu:hover .premium-dropdown-trigger i {
    transform: rotate(180deg);
}

.premium-contact-button {
    min-height: 54px;
    padding: 0 23px;
    border-radius: 11px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #173f9c, #2868f0);
    box-shadow:
        0 12px 26px rgba(36, 92, 232, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.25s ease;
}

.premium-contact-button:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 16px 30px rgba(36, 92, 232, 0.32);
}

.premium-mega-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    width: 760px;
    padding: 24px;
    border: 1px solid #e1e8f2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 30px 80px rgba(13, 34, 69, 0.18),
        0 8px 24px rgba(13, 34, 69, 0.07);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 14px);
    transition: all 0.22s ease;
}

.premium-mega-menu::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    height: 25px;
}

.premium-has-mega-menu:hover .premium-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.premium-mega-menu-heading {
    padding: 4px 6px 19px;
    border-bottom: 1px solid #edf1f7;
}

.premium-mega-menu-heading span {
    display: block;
    color: #245ce8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.premium-mega-menu-heading strong {
    display: block;
    margin-top: 4px;
    color: #10213f;
    font-size: 18px;
}

.premium-mega-menu-grid {
    padding: 18px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.premium-mega-item {
    padding: 14px;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    transition: all 0.2s ease;
}

.premium-mega-item:hover {
    background: #f4f7fc;
}

.premium-mega-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid #dae6fc;
    border-radius: 12px;
    color: #245ce8;
    background:
        linear-gradient(145deg, #f4f8ff, #e9f1ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.premium-mega-item strong,
.premium-mega-item small {
    display: block;
}

.premium-mega-item strong {
    color: #10213f;
    font-size: 13px;
}

.premium-mega-item small {
    margin-top: 3px;
    color: #718096;
    font-size: 11px;
    line-height: 1.5;
}

.premium-mega-footer {
    min-height: 58px;
    padding: 0 16px;
    border-radius: 13px;
    background:
        linear-gradient(135deg, #f3f7ff, #edf4ff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.premium-mega-footer span {
    color: #52617a;
    font-size: 12px;
}

.premium-mega-footer a {
    color: #245ce8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

.premium-menu-toggle {
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 1px solid #e0e7f0;
    border-radius: 11px;
    background: #ffffff;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.premium-menu-toggle span {
    width: 22px;
    height: 2px;
    border-radius: 10px;
    background: #10213f;
    transition: all 0.2s ease;
}

@media (max-width: 1260px) {
    .premium-header-wrapper {
        width: min(calc(100% - 40px), 1440px);
    }

    .premium-nav-link {
        padding-inline: 10px;
        font-size: 13px;
    }

    .premium-navigation {
        gap: 12px;
    }
}

@media (max-width: 1080px) {
    .premium-header {
        top: 14px;
    }

    .premium-header-wrapper {
        width: calc(100% - 28px);
        min-height: 74px;
        padding-inline: 18px;
    }

    .premium-menu-toggle {
        display: flex;
    }

    .premium-navigation {
        position: fixed;
        top: 100px;
        left: 14px;
        right: 14px;
        max-height: calc(100vh - 120px);
        padding: 20px;
        border: 1px solid #e1e8f2;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 30px 70px rgba(13, 34, 69, 0.20);
        display: none;
        align-items: stretch;
        overflow-y: auto;
    }

    .premium-navigation.open {
        display: block;
    }

    .premium-navigation-list {
        display: block;
    }

    .premium-navigation-list > li {
        width: 100%;
    }

    .premium-nav-link {
        width: 100%;
        min-height: 50px;
        padding-inline: 8px;
        border-bottom: 1px solid #edf1f7;
        border-radius: 0;
        justify-content: space-between;
    }

    .premium-contact-button {
        width: 100%;
        margin-top: 18px;
    }

    .premium-mega-menu {
        position: static;
        width: 100%;
        margin-top: 8px;
        padding: 12px;
        border-radius: 14px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .premium-has-mega-menu.open .premium-mega-menu {
        display: block;
    }

    .premium-mega-menu-grid {
        grid-template-columns: 1fr;
    }

    .premium-mega-menu-heading,
    .premium-mega-footer {
        display: none;
    }
}

@media (max-width: 560px) {
    .premium-header-wrapper {
        width: calc(100% - 20px);
        padding-inline: 14px;
    }

    .premium-brand-symbol {
        width: 43px;
        height: 43px;
    }

    .premium-brand-symbol::before {
        width: 26px;
        height: 26px;
        border-width: 4px;
    }

    .premium-brand-name {
        font-size: 17px;
    }

    .premium-navigation {
        left: 10px;
        right: 10px;
    }
}

/* =========================================================
   PREMIUM OMNIIGAMING HERO
========================================================= */

.premium-hero {
    position: relative;
    min-height: 900px;
    padding: 175px 0 92px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #06142f 0%, #0b2350 48%, #113c79 100%);
    overflow: hidden;
}

.premium-hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.hero-glow-left {
    width: 500px;
    height: 500px;
    top: 100px;
    left: -180px;
    background: rgba(33, 93, 238, 0.38);
}

.hero-glow-right {
    width: 650px;
    height: 650px;
    top: 20px;
    right: -180px;
    background: rgba(21, 202, 211, 0.24);
}

.hero-ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

.hero-ring-one {
    width: 620px;
    height: 620px;
    top: 110px;
    right: -180px;
}

.hero-ring-two {
    width: 420px;
    height: 420px;
    top: 210px;
    right: -80px;
}

.premium-hero-container {
    position: relative;
    z-index: 3;
    min-height: 630px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
}

.premium-hero-content {
    max-width: 650px;
}

.premium-hero-label {
    width: fit-content;
    margin-bottom: 28px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 100px;
    color: #caddff;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.premium-hero-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #31d4dc;
    box-shadow: 0 0 0 6px rgba(49, 212, 220, 0.12);
}

.premium-hero-content h1 {
    max-width: 690px;
    font-size: clamp(56px, 6vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.premium-hero-content h1 span {
    display: block;
    color: #5d8cff;
}

.premium-hero-content > p {
    max-width: 590px;
    margin-top: 30px;
    color: #b5c5df;
    font-size: 17px;
    line-height: 1.85;
}

.premium-hero-actions {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-primary-button,
.hero-secondary-button {
    min-height: 60px;
    padding: 0 25px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.25s ease;
}

.hero-primary-button {
    gap: 18px;
    color: #071a39;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.hero-primary-button span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #ffffff;
    background: #245ce8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-primary-button:hover {
    color: #071a39;
    transform: translateY(-3px);
}

.hero-secondary-button {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
}

.hero-secondary-button:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
}

.premium-hero-trust {
    margin-top: 43px;
    display: flex;
    align-items: center;
    gap: 23px;
}

.hero-trust-item strong,
.hero-trust-item span {
    display: block;
}

.hero-trust-item strong {
    color: #ffffff;
    font-size: 23px;
}

.hero-trust-item span {
    margin-top: 3px;
    color: #8fa5c7;
    font-size: 10px;
}

.hero-trust-divider {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.16);
}

/* Hero visual */

.premium-hero-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-main-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 680px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.06)
        );
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(22px);
    transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}

.hero-main-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    pointer-events: none;
}

.hero-main-card-top {
    position: relative;
    z-index: 2;
    margin-bottom: 27px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.hero-card-small-label {
    color: #7fa6ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.hero-main-card h2 {
    margin-top: 8px;
    color: #ffffff;
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.hero-live-status {
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(72, 224, 176, 0.28);
    border-radius: 100px;
    color: #62e4bb;
    background: rgba(29, 192, 139, 0.10);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
}

.hero-live-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #45dda9;
    box-shadow: 0 0 0 5px rgba(69, 221, 169, 0.11);
}

.hero-product-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
}

.hero-product-card {
    position: relative;
    min-height: 150px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background: rgba(4, 17, 43, 0.50);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: 0.25s ease;
}

.hero-product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(93, 140, 255, 0.50);
    background: rgba(8, 27, 66, 0.76);
}

.hero-product-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #245ce8, #25b8d2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-product-card small,
.hero-product-card strong,
.hero-product-card span {
    display: block;
}

.hero-product-card small {
    color: #7893bd;
    font-size: 8px;
    text-transform: uppercase;
}

.hero-product-card strong {
    margin-top: 4px;
    color: #ffffff;
    font-size: 14px;
}

.hero-product-card span {
    margin-top: 8px;
    color: #96a9c8;
    font-size: 10px;
    line-height: 1.55;
}

.product-arrow {
    position: absolute;
    top: 18px;
    right: 17px;
    color: #6683ad;
    font-size: 10px;
}

.hero-floating-card {
    position: absolute;
    z-index: 5;
    padding: 14px 17px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-floating-icon {
    width: 39px;
    height: 39px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #245ce8, #29c2cf);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-floating-card strong,
.hero-floating-card small {
    display: block;
}

.hero-floating-card strong {
    font-size: 11px;
}

.hero-floating-card small {
    margin-top: 2px;
    color: #9eb3d0;
    font-size: 8px;
}

.hero-floating-security {
    top: 40px;
    right: -32px;
}

.hero-floating-launch {
    bottom: 55px;
    left: -45px;
}

.hero-floating-growth {
    bottom: 3px;
    right: 40px;
}

/* Bottom service strip */

.premium-hero-bottom {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(3, 15, 37, 0.62);
    backdrop-filter: blur(15px);
}

.hero-bottom-container {
    min-height: 78px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.hero-bottom-container span {
    padding: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    color: #9eb2d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.hero-bottom-container span:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

/* Hero responsive */

@media (max-width: 1120px) {
    .premium-hero {
        min-height: auto;
        padding-top: 145px;
        padding-bottom: 130px;
    }

    .premium-hero-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .premium-hero-content {
        max-width: 850px;
        text-align: center;
        margin-inline: auto;
    }

    .premium-hero-label,
    .premium-hero-trust {
        margin-inline: auto;
    }

    .premium-hero-actions {
        justify-content: center;
    }

    .premium-hero-visual {
        max-width: 800px;
        width: 100%;
        margin-inline: auto;
    }

    .hero-main-card {
        transform: none;
    }

    .hero-bottom-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .premium-hero {
        padding-top: 125px;
        padding-bottom: 95px;
    }

    .premium-hero-content h1 {
        font-size: 50px;
    }

    .premium-hero-content > p {
        font-size: 15px;
    }

    .premium-hero-actions {
        flex-direction: column;
    }

    .hero-primary-button,
    .hero-secondary-button {
        width: 100%;
    }

    .premium-hero-trust {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .hero-trust-divider {
        height: 32px;
    }

    .premium-hero-visual {
        min-height: auto;
    }

    .hero-main-card {
        padding: 21px;
        border-radius: 20px;
    }

    .hero-main-card h2 {
        font-size: 27px;
    }

    .hero-product-grid {
        grid-template-columns: 1fr;
    }

    .hero-product-card {
        min-height: 125px;
    }

    .hero-floating-card {
        display: none;
    }

    .hero-bottom-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-bottom-container span {
        min-height: 58px;
    }
}
/* Hero contact strip */

.hero-contact-strip {
    min-height: 72px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hero-contact-strip-item {
    position: relative;
    color: #dbe7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 800;
    transition: 0.25s ease;
}

.hero-contact-strip-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-contact-strip-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
}

.hero-contact-strip-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #69a0ff;
    background: rgba(80, 135, 240, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

@media (max-width: 700px) {
    .hero-contact-strip {
        grid-template-columns: 1fr;
    }

    .hero-contact-strip-item {
        min-height: 58px;
    }

    .hero-contact-strip-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
}
.hero-main-card {
    max-width: 720px;
}

.hero-floating-security {
    top: 70px;
    right: -20px;
}

.hero-floating-launch {
    bottom: 75px;
    left: -30px;
}

.hero-floating-growth {
    display: none;
}

/* =========================================================
   CLEAN BRAND HERO
========================================================= */

.brand-hero {
    position: relative;
    min-height: 100vh;
    padding: 165px 0 90px;
    color: #ffffff;
    background: #4b1594;
    overflow: hidden;
}

.brand-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.brand-hero-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(94, 214, 255, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 255, 255, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #3b0d78 0%,
            #6b18c7 48%,
            #2566c9 100%
        );
}

.brand-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.11;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );
    background-size: 80px 80px;
}

.brand-shape {
    position: absolute;
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.03)
        );
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 30px 60px rgba(30, 4, 80, 0.18);
    transform: rotate(-24deg);
}

.brand-shape-one {
    width: 420px;
    height: 220px;
    top: 90px;
    left: -120px;
}

.brand-shape-two {
    width: 520px;
    height: 260px;
    top: 70px;
    right: -180px;
}

.brand-shape-three {
    width: 450px;
    height: 220px;
    bottom: 20px;
    left: 15%;
}

.brand-shape-four {
    width: 350px;
    height: 180px;
    right: 5%;
    bottom: -50px;
}

.brand-hero-container {
    position: relative;
    z-index: 3;
    min-height: calc(100vh - 255px);
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 70px;
}

.brand-hero-content {
    align-self: end;
    padding-bottom: 80px;
}

.brand-hero-content h1 {
    max-width: 750px;
    color: #ffffff;
    font-size: clamp(68px, 7vw, 112px);
    line-height: 0.88;
    letter-spacing: -0.065em;
    font-weight: 800;
}

.brand-hero-content h1 span {
    display: block;
}

.brand-hero-subtitle {
    margin-top: 30px;
    color: #ffffff;
    font-size: clamp(17px, 2vw, 24px);
    line-height: 1.4;
    font-weight: 700;
}

.brand-hero-subtitle strong {
    color: #f9dc2f;
    margin-right: 7px;
}

/* Visual */

.brand-hero-visual {
    position: relative;
    min-height: 650px;
}

.brand-symbol-scene {
    position: absolute;
    top: 40px;
    left: 50%;
    width: 620px;
    height: 500px;
    transform: translateX(-50%);
}

.brand-symbol-platform {
    position: absolute;
    z-index: 4;
    top: 100px;
    left: 120px;
    width: 390px;
    height: 310px;
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.06)
        );
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 45px 100px rgba(28, 2, 71, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    transform: perspective(900px) rotateX(58deg) rotateZ(-25deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-symbol-mark {
    position: relative;
    width: 170px;
    height: 170px;
    transform: rotate(25deg);
}

.brand-symbol-ring {
    position: absolute;
    inset: 0;
    border: 34px solid #ffffff;
    border-right-color: #1e2f4e;
    border-radius: 50%;
    filter: drop-shadow(0 15px 20px rgba(25, 4, 68, 0.28));
}

.brand-symbol-core {
    position: absolute;
    inset: 55px;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #63d8ff,
            #2468f1
        );
    box-shadow:
        0 10px 25px rgba(10, 45, 130, 0.35);
}

.brand-symbol-block {
    position: absolute;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.06)
        );
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 25px 50px rgba(36, 3, 88, 0.22);
    transform: rotate(-25deg);
}

.block-one {
    width: 170px;
    height: 105px;
    top: 5px;
    left: 0;
}

.block-two {
    width: 160px;
    height: 110px;
    top: 25px;
    right: 0;
}

.block-three {
    width: 150px;
    height: 100px;
    bottom: 30px;
    left: 10px;
}

.block-four {
    width: 180px;
    height: 115px;
    right: -20px;
    bottom: 10px;
}

.block-five {
    width: 110px;
    height: 85px;
    right: 60px;
    top: 210px;
}

/* Info card */

.brand-info-card {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 125px;
    width: 340px;
    min-height: 195px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background: rgba(38, 5, 84, 0.40);
    box-shadow: 0 30px 60px rgba(26, 2, 66, 0.25);
    backdrop-filter: blur(20px);
}

.brand-info-lines {
    margin-bottom: 22px;
    display: flex;
    gap: 13px;
}

.brand-info-lines span {
    width: 45px;
    height: 3px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.30);
}

.brand-info-lines span.active {
    background: #ffffff;
}

.brand-info-card small {
    color: #f9dc2f;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.brand-info-card h3 {
    margin-top: 8px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.25;
}

.brand-info-card p {
    margin-top: 10px;
    color: #d6c8e8;
    font-size: 13px;
    line-height: 1.6;
}

/* CTA */

.brand-hero-cta {
    position: absolute;
    z-index: 9;
    right: 0;
    bottom: 20px;
    width: 340px;
    min-height: 86px;
    padding: 0 28px;
    border-radius: 14px;
    color: #111827;
    background: #f9dc2f;
    box-shadow: 0 25px 45px rgba(39, 6, 79, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 23px;
    font-weight: 800;
    transition: 0.25s ease;
}

.brand-hero-cta i {
    width: 46px;
    height: 46px;
    border: 3px solid #111827;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.brand-hero-cta:hover {
    color: #111827;
    transform: translateY(-4px);
    background: #ffe643;
}

/* Fixed contact strip */

.fixed-contact-strip {
    position: fixed;
    z-index: 3000;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 58px;
    border-top: 1px solid #ded8eb;
    background: rgba(249, 247, 255, 0.97);
    box-shadow: 0 -10px 30px rgba(32, 11, 66, 0.08);
    backdrop-filter: blur(15px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.fixed-contact-item {
    color: #1d2638;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    transition: 0.2s ease;
}

.fixed-contact-item:not(:last-child) {
    border-right: 1px solid #e3deed;
}

.fixed-contact-item i {
    color: #6d21be;
    font-size: 20px;
}

.fixed-contact-item:hover {
    color: #6d21be;
    background: #f0e9fb;
}

body {
    padding-bottom: 58px;
}

/* Responsive */

@media (max-width: 1100px) {
    .brand-hero {
        min-height: auto;
        padding-top: 145px;
        padding-bottom: 100px;
    }

    .brand-hero-container {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .brand-hero-content {
        padding-bottom: 0;
        text-align: center;
    }

    .brand-hero-content h1 {
        margin-inline: auto;
    }

    .brand-hero-visual {
        max-width: 750px;
        width: 100%;
        min-height: 650px;
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .brand-hero {
        padding-top: 125px;
        padding-bottom: 80px;
    }

    .brand-hero-content h1 {
        font-size: 52px;
        line-height: 0.95;
    }

    .brand-hero-subtitle {
        font-size: 16px;
    }

    .brand-symbol-scene {
        width: 500px;
        transform: translateX(-50%) scale(0.75);
        transform-origin: top center;
    }

    .brand-hero-visual {
        min-height: 590px;
    }

    .brand-info-card {
        left: 50%;
        right: auto;
        bottom: 120px;
        width: min(100%, 330px);
        transform: translateX(-50%);
    }

    .brand-hero-cta {
        left: 50%;
        right: auto;
        bottom: 20px;
        width: min(100%, 330px);
        min-height: 72px;
        transform: translateX(-50%);
        font-size: 18px;
    }

    .brand-hero-cta:hover {
        transform: translateX(-50%) translateY(-3px);
    }

    .fixed-contact-strip {
        min-height: 55px;
    }

    .fixed-contact-item {
        gap: 7px;
        font-size: 11px;
    }

    .fixed-contact-item i {
        font-size: 16px;
    }

    body {
        padding-bottom: 55px;
    }
}

.premium-hero,
.premium-hero-bottom,
.hero-contact-strip {
    display: none !important;
}

/* Prevent hero content from going behind fixed contact strip */

.brand-hero {
    min-height: calc(100svh - 58px);
    padding-top: 165px;
    padding-bottom: 45px;
}

.brand-hero-container {
    min-height: calc(100svh - 268px);
}

.brand-hero-content {
    align-self: center;
    padding-bottom: 0;
}

.brand-hero-visual {
    min-height: 540px;
}

.brand-symbol-scene {
    top: 0;
    height: 460px;
}

.brand-info-card {
    bottom: 105px;
}

.brand-hero-cta {
    bottom: 5px;
}

/* Fixed strip always remains above page content */
.fixed-contact-strip {
    height: 58px;
}

/* Reserve space for fixed strip */
body {
    padding-bottom: 58px;
}

.brand-info-card {
    right: 0;
    bottom: 115px;
    min-height: 175px;
    padding: 22px;
}

.brand-hero-cta {
    right: 0;
    bottom: 15px;
    min-height: 75px;
}
.brand-hero-content {
    align-self: center;
    transform: translateY(30px);
}

@media (max-height: 850px) and (min-width: 1101px) {
    .brand-hero {
        min-height: calc(100vh - 58px);
        padding-top: 140px;
        padding-bottom: 30px;
    }

    .brand-hero-container {
        min-height: calc(100vh - 228px);
    }

    .brand-hero-content h1 {
        font-size: clamp(60px, 6.3vw, 92px);
    }

    .brand-hero-visual {
        min-height: 500px;
        transform: scale(0.9);
        transform-origin: center center;
    }

    .brand-info-card {
        bottom: 105px;
    }

    .brand-hero-cta {
        bottom: 12px;
    }
}

/* =========================================================
   FINAL MOBILE RESPONSIVE FIXES
========================================================= */

@media (max-width: 767px) {

    body {
        padding-bottom: 60px;
    }

    /* Header */

    .premium-header {
        top: 10px;
    }

    .premium-header-wrapper {
        width: calc(100% - 20px);
        min-height: 66px;
        padding: 0 12px;
        border-radius: 15px;
    }

    .premium-brand {
        gap: 8px;
    }

    .premium-brand-symbol {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

    .premium-brand-symbol::before {
        width: 25px;
        height: 25px;
        border-width: 4px;
    }

    .premium-brand-name {
        font-size: 15px;
    }

    .premium-menu-toggle {
        width: 42px;
        height: 42px;
        display: flex;
    }

    .premium-navigation {
        position: fixed;
        top: 86px;
        left: 10px;
        right: 10px;
        max-height: calc(100vh - 105px);
        padding: 16px;
        border-radius: 16px;
    }

    .premium-nav-link {
        min-height: 48px;
        font-size: 13px;
    }

    .premium-contact-button {
        min-height: 48px;
    }

    /* Hero */

    .brand-hero {
        min-height: auto;
        padding: 105px 0 55px;
    }

    .brand-hero-container {
        width: calc(100% - 30px);
        min-height: auto;
        display: block;
    }

    .brand-hero-content {
        padding: 55px 0 0;
        text-align: left;
        transform: none;
    }

    .brand-hero-content h1 {
        max-width: 100%;
        font-size: clamp(48px, 15vw, 70px);
        line-height: 0.91;
        letter-spacing: -0.065em;
    }

    .brand-hero-subtitle {
        max-width: 310px;
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.55;
    }

    .brand-hero-subtitle strong {
        display: block;
        margin: 0;
    }

    .brand-hero-visual {
        min-height: 520px;
        margin-top: 10px;
    }

    .brand-symbol-scene {
        top: 10px;
        left: 50%;
        width: 520px;
        height: 390px;
        transform: translateX(-50%) scale(0.67);
        transform-origin: top center;
    }

    .brand-info-card {
        left: 0;
        right: auto;
        bottom: 100px;
        width: 100%;
        min-height: auto;
        padding: 20px;
        transform: none;
        border-radius: 16px;
    }

    .brand-info-lines {
        margin-bottom: 15px;
    }

    .brand-info-lines span {
        flex: 1;
        width: auto;
    }

    .brand-info-card h3 {
        font-size: 20px;
    }

    .brand-info-card p {
        font-size: 12px;
    }

    .brand-hero-cta {
        left: 0;
        right: auto;
        bottom: 12px;
        width: 100%;
        min-height: 70px;
        padding: 0 20px;
        transform: none;
        font-size: 17px;
    }

    .brand-hero-cta:hover {
        transform: translateY(-2px);
    }

    .brand-hero-cta i {
        width: 40px;
        height: 40px;
        border-width: 2px;
    }

    /* Bottom fixed contact bar */

    .fixed-contact-strip {
        min-height: 60px;
    }

    .fixed-contact-item {
        min-width: 0;
        padding: 6px 4px;
        flex-direction: column;
        gap: 3px;
        font-size: 9px;
    }

    .fixed-contact-item i {
        font-size: 15px;
    }
}

/* =========================================================
   PREMIUM SOLUTIONS SECTION
========================================================= */

.premium-solutions-section {
    position: relative;
    padding: 125px 0;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(56, 104, 240, 0.07),
            transparent 25%
        ),
        #ffffff;
    overflow: hidden;
}

.premium-solutions-intro {
    max-width: 920px;
    margin: 0 auto 65px;
    text-align: center;
}

.premium-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #2863e8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.premium-section-label::before,
.premium-section-label::after {
    content: "";
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #26c2cf, #2863e8);
}

.premium-solutions-intro h2 {
    color: #071b3a;
    font-size: clamp(43px, 5vw, 70px);
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.premium-solutions-intro p {
    max-width: 760px;
    margin: 23px auto 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}

.premium-solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.premium-solution-card {
    position: relative;
    min-height: 340px;
    padding: 35px;
    border: 1px solid #dfe6f1;
    border-radius: 24px;
    color: inherit;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(18, 43, 82, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: 0.3s ease;
}

.premium-solution-card::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -130px;
    bottom: -140px;
    border-radius: 50%;
    background: #eff5ff;
    transition: 0.35s ease;
}

.premium-solution-card:hover {
    transform: translateY(-8px);
    border-color: #bcd1fb;
    box-shadow: 0 30px 75px rgba(18, 43, 82, 0.13);
}

.premium-solution-card:hover::before {
    transform: scale(1.3);
}

.premium-solution-featured {
    min-height: 470px;
    grid-column: span 2;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(54, 201, 213, 0.24),
            transparent 25%
        ),
        linear-gradient(135deg, #061a3b, #103f82);
    border-color: transparent;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 50px;
}

.premium-solution-featured::before {
    background: rgba(255, 255, 255, 0.06);
}

.premium-solution-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.premium-solution-icon {
    width: 60px;
    height: 60px;
    border-radius: 17px;
    color: #2863e8;
    background: #edf4ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.premium-solution-featured .premium-solution-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #2863e8, #26c2cf);
}

.premium-solution-number {
    color: #ccd7e7;
    font-size: 13px;
    font-weight: 800;
}

.premium-solution-featured .premium-solution-number {
    color: rgba(255, 255, 255, 0.45);
}

.premium-solution-content {
    position: relative;
    z-index: 2;
    margin-top: 45px;
}

.premium-solution-featured .premium-solution-content {
    margin-top: 0;
}

.premium-solution-content small {
    color: #2863e8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.premium-solution-featured .premium-solution-content small {
    color: #68dce2;
}

.premium-solution-content h3 {
    margin-top: 10px;
    color: #071b3a;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.premium-solution-featured .premium-solution-content h3 {
    color: #ffffff;
    font-size: clamp(38px, 4vw, 58px);
}

.premium-solution-content p {
    max-width: 540px;
    margin-top: 15px;
    color: #667085;
    font-size: 14px;
    line-height: 1.75;
}

.premium-solution-featured .premium-solution-content p {
    color: #afc2df;
    font-size: 16px;
}

.premium-card-link {
    margin-top: 27px;
    color: #2863e8;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
}

.premium-solution-featured .premium-card-link {
    color: #ffffff;
}

.premium-card-link i {
    transition: 0.25s ease;
}

.premium-solution-card:hover .premium-card-link i {
    transform: translateX(5px);
}

/* Featured visual */

.premium-solution-visual {
    position: relative;
    z-index: 2;
    padding: 25px;
}

.solution-ui-window {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
    overflow: hidden;
    transform: rotate(-3deg);
}

.solution-ui-header {
    height: 50px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 7px;
}

.solution-ui-header span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.48);
}

.solution-ui-body {
    min-height: 285px;
    display: grid;
    grid-template-columns: 65px 1fr;
}

.solution-ui-sidebar {
    background: rgba(2, 16, 42, 0.50);
}

.solution-ui-content {
    padding: 30px;
}

.solution-ui-content > span {
    display: block;
    height: 14px;
    margin-bottom: 13px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
}

.solution-ui-content > span:first-child {
    width: 45%;
}

.solution-ui-content > span:nth-child(2) {
    width: 70%;
}

.solution-ui-content > div {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.solution-ui-content i {
    height: 130px;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.07)
        );
}

/* Tablet */

@media (max-width: 900px) {
    .premium-solutions-section {
        padding: 90px 0;
    }

    .premium-solutions-grid {
        grid-template-columns: 1fr;
    }

    .premium-solution-featured {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .premium-solution-visual {
        padding: 0;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .premium-solutions-section {
        padding: 75px 0;
    }

    .premium-solutions-intro {
        margin-bottom: 38px;
        text-align: left;
    }

    .premium-section-label {
        font-size: 10px;
    }

    .premium-section-label::before {
        width: 22px;
    }

    .premium-section-label::after {
        display: none;
    }

    .premium-solutions-intro h2 {
        font-size: 38px;
        line-height: 1.08;
    }

    .premium-solutions-intro p {
        margin-top: 18px;
        font-size: 14px;
    }

    .premium-solutions-grid {
        gap: 16px;
    }

    .premium-solution-card {
        min-height: 315px;
        padding: 25px;
        border-radius: 19px;
    }

    .premium-solution-featured {
        min-height: auto;
        padding: 28px 24px;
        gap: 35px;
    }

    .premium-solution-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 19px;
    }

    .premium-solution-content {
        margin-top: 35px;
    }

    .premium-solution-featured .premium-solution-content {
        margin-top: 15px;
    }

    .premium-solution-content h3 {
        font-size: 26px;
    }

    .premium-solution-featured .premium-solution-content h3 {
        font-size: 37px;
    }

    .premium-solution-content p,
    .premium-solution-featured .premium-solution-content p {
        font-size: 13px;
    }

    .solution-ui-body {
        min-height: 220px;
        grid-template-columns: 45px 1fr;
    }

    .solution-ui-content {
        padding: 20px;
    }

    .solution-ui-content > div {
        margin-top: 25px;
        gap: 8px;
    }

    .solution-ui-content i {
        height: 90px;
    }
}

/* =========================================================
   BETFOC-STYLE OMNIIGAMING SOLUTIONS
========================================================= */

.ig-solutions-section {
    padding: 110px 0 125px;
    background: #faf8ff;
}

.ig-section-heading {
    max-width: 1080px;
    margin: 0 auto 70px;
    text-align: center;
}

.ig-section-heading h2 {
    color: #111111;
    font-size: clamp(45px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.ig-heading-line {
    width: 430px;
    max-width: 80%;
    height: 4px;
    margin: 30px auto 35px;
    border-radius: 100px;
    background: linear-gradient(
        90deg,
        transparent,
        #6825c9,
        #2868ed,
        transparent
    );
}

.ig-section-heading h3 {
    color: #222222;
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.3;
}

.ig-section-heading p {
    margin-top: 20px;
    color: #464646;
    font-size: 16px;
    line-height: 1.7;
}

.ig-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}

.ig-solution-card {
    position: relative;
    min-height: 500px;
    border: 1px solid rgba(20, 20, 20, 0.10);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 13px 32px rgba(47, 29, 82, 0.10);
    overflow: hidden;
}

.ig-solution-image {
    height: 285px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ig-card-purple .ig-solution-image {
    background: linear-gradient(145deg, #6823ad, #9c42e0);
}

.ig-card-blue .ig-solution-image {
    background: linear-gradient(145deg, #066083, #189bc0);
}

.ig-card-violet .ig-solution-image {
    background: linear-gradient(145deg, #4c0798, #862ad3);
}

.ig-card-sky .ig-solution-image {
    background: linear-gradient(145deg, #1669a4, #51a9e2);
}

.ig-card-gold .ig-solution-image {
    background: linear-gradient(145deg, #d58a00, #f4c31d);
}

.ig-card-cyan .ig-solution-image {
    background: linear-gradient(145deg, #087496, #43c4c3);
}

.ig-card-yellow .ig-solution-image {
    background: linear-gradient(145deg, #cf8800, #f7c612);
}

.ig-card-red .ig-solution-image {
    background: linear-gradient(145deg, #9d1425, #dc4b55);
}

.ig-card-green .ig-solution-image {
    background: linear-gradient(145deg, #087267, #42bca9);
}

.ig-visual {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.08)
        );
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 30px 45px rgba(31, 4, 69, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 86px;
    transform: rotate(-7deg);
}

.ig-solution-summary {
    min-height: 215px;
    padding: 28px 28px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.ig-card-purple .ig-solution-summary,
.ig-card-violet .ig-solution-summary {
    background: #f7eefe;
}

.ig-card-blue .ig-solution-summary,
.ig-card-sky .ig-solution-summary,
.ig-card-cyan .ig-solution-summary {
    background: #eaf8fd;
}

.ig-card-gold .ig-solution-summary,
.ig-card-yellow .ig-solution-summary {
    background: #fff6de;
}

.ig-card-red .ig-solution-summary {
    background: #fff0f1;
}

.ig-card-green .ig-solution-summary {
    background: #eafaf7;
}

.ig-solution-summary h3 {
    color: #202020;
    font-size: 24px;
    line-height: 1.25;
}

.ig-solution-summary p {
    margin-top: 16px;
    color: #404040;
    font-size: 14px;
    line-height: 1.6;
}

.ig-card-toggle,
.ig-card-close {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    color: #181818;
    background: rgba(255, 255, 255, 0.65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: 0.25s ease;
}

.ig-card-toggle:hover,
.ig-card-close:hover {
    transform: rotate(90deg);
    background: #ffffff;
}

/* Expanded details */

.ig-solution-details {
    position: absolute;
    z-index: 5;
    inset: auto 0 0;
    min-height: 315px;
    padding: 28px;
    background: #eaf8fd;
    transform: translateY(105%);
    transition: transform 0.35s ease;
}

.ig-solution-card.is-open .ig-solution-details {
    transform: translateY(0);
}

.ig-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ig-details-header h3 {
    color: #202020;
    font-size: 23px;
    line-height: 1.25;
}

.ig-solution-details > p {
    margin-top: 16px;
    color: #3f3f3f;
    font-size: 14px;
    line-height: 1.6;
}

.ig-solution-details ul {
    margin-top: 18px;
}

.ig-solution-details li {
    margin-top: 9px;
    color: #282828;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
}

.ig-solution-details li i {
    margin-top: 3px;
}

.ig-solution-details > a {
    min-height: 58px;
    margin-top: 24px;
    border-radius: 10px;
    color: #ffffff;
    background: #156ca2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
}

/* Tablet */

@media (max-width: 1050px) {
    .ig-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */

@media (max-width: 650px) {
    .ig-solutions-section {
        padding: 75px 0 90px;
    }

    .ig-section-heading {
        margin-bottom: 42px;
        text-align: left;
    }

    .ig-section-heading h2 {
        font-size: 40px;
    }

    .ig-heading-line {
        width: 170px;
        margin: 23px 0 28px;
    }

    .ig-section-heading h3 {
        font-size: 22px;
    }

    .ig-section-heading p {
        font-size: 14px;
    }

    .ig-solutions-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ig-solution-card {
        min-height: 455px;
        border-radius: 19px;
    }

    .ig-solution-image {
        height: 235px;
    }

    .ig-visual {
        width: 145px;
        height: 145px;
        font-size: 66px;
    }

    .ig-solution-summary {
        min-height: 220px;
        padding: 24px 21px;
    }

    .ig-solution-summary h3 {
        font-size: 22px;
    }

    .ig-card-toggle,
    .ig-card-close {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        font-size: 19px;
    }

    .ig-solution-details {
        min-height: 300px;
        padding: 23px 21px;
    }

    .ig-details-header h3 {
        font-size: 21px;
    }
}

@media (min-width: 651px) {
    .ig-solution-card {
        cursor: pointer;
    }

    .ig-card-toggle,
    .ig-card-close {
        pointer-events: none;
    }
}

@media (max-width: 650px) {
    .ig-card-toggle,
    .ig-card-close {
        pointer-events: auto;
    }
}

/* =========================================================
   ATTRACTIVE 3D-STYLE SOLUTION CARDS
========================================================= */

.ig-solutions-section {
    padding: 120px 0 135px;
    background:
        radial-gradient(circle at 10% 20%, rgba(114, 37, 202, 0.06), transparent 25%),
        radial-gradient(circle at 90% 75%, rgba(38, 104, 237, 0.07), transparent 25%),
        #faf8ff;
}

.ig-solutions-section .container {
    width: min(calc(100% - 70px), 1320px);
}

.ig-solutions-grid {
    gap: 38px;
}

.ig-solution-card {
    min-height: 520px;
    border: 0;
    border-radius: 26px;
    box-shadow:
        0 18px 45px rgba(43, 25, 82, 0.12),
        0 3px 10px rgba(43, 25, 82, 0.05);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.ig-solution-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 32px 70px rgba(43, 25, 82, 0.20),
        0 8px 20px rgba(43, 25, 82, 0.08);
}

/* Large visual area */

.ig-solution-image {
    position: relative;
    height: 305px;
    padding: 25px;
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background rings */

.ig-solution-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 250px;
    height: 250px;
    border: 2px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.ig-solution-image::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 170px;
    height: 50px;
    left: 50%;
    bottom: 25px;
    border-radius: 50%;
    background: rgba(20, 8, 58, 0.22);
    filter: blur(14px);
    transform: translateX(-50%);
}

/* More premium gradients */

.ig-card-purple .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.22), transparent 30%),
        linear-gradient(145deg, #4b087f, #9c3ce1);
}

.ig-card-blue .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.22), transparent 30%),
        linear-gradient(145deg, #005474, #1aa9cc);
}

.ig-card-violet .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.22), transparent 30%),
        linear-gradient(145deg, #480089, #8628d7);
}

.ig-card-sky .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.24), transparent 30%),
        linear-gradient(145deg, #12649d, #4fb8ec);
}

.ig-card-gold .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.28), transparent 30%),
        linear-gradient(145deg, #ca7900, #f3c515);
}

.ig-card-cyan .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.23), transparent 30%),
        linear-gradient(145deg, #087089, #45c8bd);
}

.ig-card-yellow .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.27), transparent 30%),
        linear-gradient(145deg, #c87c00, #f0be11);
}

.ig-card-red .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.22), transparent 30%),
        linear-gradient(145deg, #8e1023, #e04c58);
}

.ig-card-green .ig-solution-image {
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.23), transparent 30%),
        linear-gradient(145deg, #087264, #3dc4ac);
}

/* 3D glass icon object */

.ig-visual {
    position: relative;
    z-index: 2;
    width: 188px;
    height: 188px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.08)
        );
    box-shadow:
        0 32px 45px rgba(25, 4, 70, 0.30),
        inset 8px 8px 24px rgba(255, 255, 255, 0.16),
        inset -8px -8px 24px rgba(28, 7, 80, 0.16);
    backdrop-filter: blur(12px);
    font-size: 82px;
    transform:
        perspective(800px)
        rotateX(7deg)
        rotateY(-8deg)
        rotateZ(-5deg);
    transition: transform 0.4s ease;
}

.ig-visual::before {
    content: "";
    position: absolute;
    width: 72%;
    height: 34%;
    top: 9%;
    left: 14%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    filter: blur(5px);
}

.ig-visual i {
    position: relative;
    z-index: 2;
    filter:
        drop-shadow(0 8px 3px rgba(21, 5, 61, 0.20))
        drop-shadow(0 18px 12px rgba(21, 5, 61, 0.26));
}

.ig-solution-card:hover .ig-visual {
    transform:
        perspective(800px)
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(3deg)
        scale(1.09);
}

/* Content panel */

.ig-solution-summary {
    min-height: 215px;
    padding: 30px 28px 31px;
}

.ig-solution-summary h3 {
    max-width: 285px;
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.ig-solution-summary p {
    max-width: 290px;
    margin-top: 15px;
    color: #434343;
    font-size: 14px;
    line-height: 1.65;
}

.ig-card-toggle,
.ig-card-close {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    box-shadow:
        0 8px 18px rgba(33, 17, 70, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.7);
}

.ig-card-toggle i {
    transition: transform 0.3s ease;
}

.ig-solution-card:hover .ig-card-toggle i {
    transform: rotate(90deg);
}

/* Details overlay */

.ig-solution-details {
    min-height: 330px;
    padding: 30px;
    box-shadow: 0 -14px 35px rgba(28, 16, 58, 0.12);
}

.ig-card-purple .ig-solution-details,
.ig-card-violet .ig-solution-details {
    background: #f8ebff;
}

.ig-card-blue .ig-solution-details,
.ig-card-sky .ig-solution-details,
.ig-card-cyan .ig-solution-details {
    background: #e9f8fd;
}

.ig-card-gold .ig-solution-details,
.ig-card-yellow .ig-solution-details {
    background: #fff5d9;
}

.ig-card-red .ig-solution-details {
    background: #fff0f1;
}

.ig-card-green .ig-solution-details {
    background: #e9faf6;
}

.ig-details-header h3 {
    max-width: 290px;
    font-size: 25px;
}

.ig-solution-details > p {
    font-size: 14px;
    line-height: 1.65;
}

.ig-solution-details li {
    font-size: 14px;
}

.ig-solution-details li i {
    color: #172033;
    font-size: 16px;
}

.ig-solution-details > a {
    min-height: 62px;
    border-radius: 11px;
    font-size: 16px;
    transition: 0.25s ease;
}

.ig-solution-details > a:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* Matching action colors */

.ig-card-purple .ig-solution-details > a,
.ig-card-violet .ig-solution-details > a {
    background: linear-gradient(135deg, #6120aa, #8b35d1);
}

.ig-card-blue .ig-solution-details > a,
.ig-card-sky .ig-solution-details > a,
.ig-card-cyan .ig-solution-details > a {
    background: linear-gradient(135deg, #056d95, #1797bd);
}

.ig-card-gold .ig-solution-details > a,
.ig-card-yellow .ig-solution-details > a {
    color: #151515;
    background: linear-gradient(135deg, #df9400, #f5c820);
}

.ig-card-red .ig-solution-details > a {
    background: linear-gradient(135deg, #a51b2c, #d74651);
}

.ig-card-green .ig-solution-details > a {
    background: linear-gradient(135deg, #08796b, #32ad99);
}

/* Tablet */

@media (max-width: 1050px) {
    .ig-solutions-section .container {
        width: min(calc(100% - 40px), 1320px);
    }

    .ig-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

/* Mobile */

@media (max-width: 650px) {
    .ig-solutions-section {
        padding: 75px 0 90px;
    }

    .ig-solutions-section .container {
        width: calc(100% - 28px);
    }

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

    .ig-solution-card {
        min-height: 465px;
        border-radius: 21px;
    }

    .ig-solution-image {
        height: 250px;
    }

    .ig-solution-image::before {
        width: 205px;
        height: 205px;
        top: 22px;
    }

    .ig-solution-image::after {
        width: 135px;
        height: 38px;
    }

    .ig-visual {
        width: 155px;
        height: 155px;
        font-size: 65px;
    }

    .ig-solution-summary {
        min-height: 215px;
        padding: 24px 21px;
    }

    .ig-solution-summary h3 {
        max-width: 235px;
        font-size: 22px;
    }

    .ig-solution-details {
        min-height: 310px;
        padding: 23px 21px;
    }

    .ig-details-header h3 {
        font-size: 22px;
    }
}

/* =========================================================
   BETFOC-STYLE DETAILS OVERLAY
========================================================= */

.ig-solution-card {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
}

/* Details panel should replace the lower content area,
   not slide from outside the card */
.ig-solution-details {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;

    min-height: 215px;
    padding: 28px;

    border-radius: 24px 24px 0 0;
    box-shadow:
        0 -10px 30px rgba(34, 19, 68, 0.10);

    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.985);

    transition:
        opacity 0.24s ease,
        transform 0.28s ease,
        visibility 0.24s ease;
}

/* Open state */
.ig-solution-card.is-open .ig-solution-details {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Hide the normal summary when details are open */
.ig-solution-card.is-open .ig-solution-summary {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.ig-solution-summary {
    transition:
        opacity 0.2s ease,
        transform 0.25s ease,
        visibility 0.2s ease;
}

/* Rounded details top corners like the reference */
.ig-card-purple .ig-solution-details,
.ig-card-violet .ig-solution-details {
    background: #f7edff;
}

.ig-card-blue .ig-solution-details,
.ig-card-sky .ig-solution-details,
.ig-card-cyan .ig-solution-details {
    background: #eaf8fd;
}

.ig-card-gold .ig-solution-details,
.ig-card-yellow .ig-solution-details {
    background: #fff5dc;
}

.ig-card-red .ig-solution-details {
    background: #fff0f1;
}

.ig-card-green .ig-solution-details {
    background: #eaf9f6;
}

/* Keep the panel compact and visually attached */
.ig-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.ig-card-close {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Ensure the image area remains visible */
.ig-solution-card.is-open .ig-solution-image {
    filter: brightness(0.96);
}

/* Desktop hover */
@media (min-width: 651px) {
    .ig-solution-card:hover .ig-solution-details {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .ig-solution-card:hover .ig-solution-summary {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
    }
}

/* Mobile */
@media (max-width: 650px) {
    .ig-solution-details {
        min-height: 220px;
        padding: 23px 21px;
        border-radius: 20px 20px 0 0;
    }
}

/* =========================================================
   OMNIIGAMING TYPOGRAPHY SYSTEM
========================================================= */

body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.premium-brand-name,
.brand-hero-content h1,
.ig-section-heading h2,
.ig-section-heading h3,
.ig-solution-summary h3,
.ig-details-header h3 {
    font-family: "Sora", sans-serif;
}

.ig-section-heading {
    max-width: 980px;
    margin-bottom: 68px;
}

.ig-section-heading h2 {
    max-width: 940px;
    margin-inline: auto;
    color: #0b1733;
    font-family: "Sora", sans-serif;
    font-size: clamp(42px, 4.4vw, 64px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.ig-section-heading h3 {
    max-width: 900px;
    margin-inline: auto;
    color: #17233d;
    font-family: "Sora", sans-serif;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.ig-section-heading p {
    max-width: 950px;
    margin: 20px auto 0;
    color: #5c6679;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.01em;
}


.ig-solution-summary h3 {
    color: #101828;
    font-family: "Sora", sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.035em;
}

.ig-solution-summary p {
    color: #505b6d;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
}

.ig-details-header h3 {
    color: #101828;
    font-family: "Sora", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.ig-solution-details > p,
.ig-solution-details li {
    font-family: "Inter", sans-serif;
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
}

.premium-brand-name {
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.045em;
}

.premium-nav-link,
.premium-contact-button {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

@media (max-width: 650px) {
    .ig-section-heading h2 {
        font-size: 36px;
        line-height: 1.12;
    }

    .ig-section-heading h3 {
        font-size: 20px;
        line-height: 1.4;
    }

    .ig-section-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .ig-solution-summary h3,
    .ig-details-header h3 {
        font-size: 21px;
    }

    .brand-hero-content h1 {
        font-size: clamp(46px, 13vw, 64px);
        line-height: 0.95;
    }
}

/* =========================================================
   PREMIUM BUSINESS ECOSYSTEM
========================================================= */

.ecosystem-section {
    position: relative;
    padding: 125px 0;
    background:
        radial-gradient(circle at 85% 50%, rgba(37, 95, 232, 0.10), transparent 32%),
        linear-gradient(180deg, #f7faff 0%, #edf4ff 100%);
    overflow: hidden;
}

.ecosystem-section::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    left: -220px;
    top: 80px;
    border: 1px solid rgba(37, 95, 232, 0.10);
    border-radius: 50%;
}

.ecosystem-container {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 90px;
}

.ecosystem-content {
    position: relative;
    padding: 48px;
    border: 1px solid rgba(201, 215, 238, 0.95);
    border-radius: 28px;
    background: rgba(255,255,255,0.88);
    box-shadow:
        0 30px 80px rgba(26, 60, 110, 0.11),
        inset 0 1px 0 rgba(255,255,255,0.95);
    backdrop-filter: blur(18px);
}

.ecosystem-content h2 {
    font-size: clamp(40px, 4.5vw, 62px);
    font-weight: 600;
    line-height: 1.06;
}

.ecosystem-content > p {
    max-width: 650px;
    font-size: 16px;
    line-height: 1.8;
}

.ecosystem-feature-list {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.ecosystem-feature {
    padding: 16px 18px;
    border: 1px solid #e2eaf5;
    border-radius: 15px;
    background: #f8fbff;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: 0.25s ease;
}

.ecosystem-feature:hover {
    transform: translateX(6px);
    border-color: #bed2fb;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(28, 69, 126, 0.09);
}

.ecosystem-feature > span {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #2863e8, #24beca);
    box-shadow: 0 8px 18px rgba(37, 95, 232, 0.20);
}

.ecosystem-feature strong {
    color: #10213f;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.ecosystem-feature p {
    margin-top: 4px;
    color: #67748a;
    font-size: 12px;
    line-height: 1.6;
}

.ecosystem-content > .button {
    min-height: 58px;
    margin-top: 30px;
    padding-inline: 27px;
    border-radius: 12px;
}

/* Orbit visual */

.ecosystem-visual {
    position: relative;
    min-height: 620px;
    border-radius: 32px;
    background:
        radial-gradient(circle at center, rgba(44, 104, 234, 0.15), transparent 45%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecosystem-visual::before,
.ecosystem-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.ecosystem-visual::before {
    width: 420px;
    height: 420px;
    border: 1px solid rgba(38, 99, 232, 0.20);
    box-shadow:
        0 0 0 55px rgba(38, 99, 232, 0.035),
        0 0 0 110px rgba(38, 99, 232, 0.025);
}

.ecosystem-visual::after {
    width: 510px;
    height: 510px;
    border: 1px dashed rgba(38, 99, 232, 0.18);
    animation: ecosystemRotate 28s linear infinite;
}

@keyframes ecosystemRotate {
    to {
        transform: rotate(360deg);
    }
}

.ecosystem-center {
    position: relative;
    z-index: 4;
    width: 245px;
    height: 245px;
    border: 14px solid rgba(255,255,255,0.80);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 25%, #407cff, transparent 35%),
        linear-gradient(145deg, #154fbf, #092d77);
    box-shadow:
        0 35px 75px rgba(26, 78, 174, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.20);
}

.ecosystem-center > span {
    width: 64px;
    height: 64px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 18px;
    background: rgba(255,255,255,0.13);
    font-size: 28px;
}

.ecosystem-center strong {
    font-family: "Sora", sans-serif;
    font-size: 16px;
}

.ecosystem-center small {
    color: #b7d1ff;
    font-size: 10px;
}

.ecosystem-orbit {
    z-index: 6;
    padding: 14px 18px;
    border: 1px solid #d8e4f5;
    border-radius: 100px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 16px 38px rgba(31, 66, 115, 0.13);
    backdrop-filter: blur(12px);
    transition: 0.28s ease;
}

.ecosystem-orbit:hover {
    transform: translateY(-5px) scale(1.04);
    border-color: #b8cdf4;
}

.ecosystem-orbit span {
    font-size: 12px;
    gap: 9px;
}

.ecosystem-orbit i {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2863e8, #24beca);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.ecosystem-orbit-one {
    top: 78px;
    left: 68px;
}

.ecosystem-orbit-two {
    top: 150px;
    right: 22px;
}

.ecosystem-orbit-three {
    bottom: 92px;
    right: 58px;
}

.ecosystem-orbit-four {
    bottom: 125px;
    left: 20px;
}

@media (max-width: 1050px) {
    .ecosystem-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ecosystem-content {
        max-width: 850px;
        margin-inline: auto;
    }

    .ecosystem-visual {
        max-width: 720px;
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 650px) {
    .ecosystem-section {
        padding: 80px 0 95px;
    }

    .ecosystem-content {
        padding: 28px 22px;
        border-radius: 21px;
    }

    .ecosystem-content h2 {
        font-size: 38px;
    }

    .ecosystem-content > p {
        font-size: 14px;
    }

    .ecosystem-feature {
        padding: 14px;
    }

    .ecosystem-visual {
        min-height: 480px;
        transform: none;
        margin: 0;
    }

    .ecosystem-visual::before {
        width: 280px;
        height: 280px;
        box-shadow:
            0 0 0 35px rgba(38, 99, 232, 0.035),
            0 0 0 70px rgba(38, 99, 232, 0.025);
    }

    .ecosystem-visual::after {
        width: 350px;
        height: 350px;
    }

    .ecosystem-center {
        width: 180px;
        height: 180px;
        border-width: 10px;
    }

    .ecosystem-center > span {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .ecosystem-center strong {
        font-size: 12px;
    }

    .ecosystem-orbit {
        padding: 10px 13px;
    }

    .ecosystem-orbit span {
        font-size: 9px;
    }

    .ecosystem-orbit-one {
        top: 42px;
        left: 10px;
    }

    .ecosystem-orbit-two {
        top: 95px;
        right: 0;
    }

    .ecosystem-orbit-three {
        bottom: 55px;
        right: 10px;
    }

    .ecosystem-orbit-four {
        bottom: 90px;
        left: 0;
    }
}

/* Wider ecosystem content box */

.ecosystem-container {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
}

.ecosystem-content {
    width: 100%;
    max-width: 720px;
    padding: 52px 56px;
}

.ecosystem-content h2 {
    max-width: 620px;
}

.ecosystem-content > p {
    max-width: 620px;
}

@media (max-width: 1050px) {
    .ecosystem-container {
        grid-template-columns: 1fr;
    }

    .ecosystem-content {
        max-width: 850px;
        padding: 44px;
    }
}

@media (max-width: 650px) {
    .ecosystem-content {
        padding: 28px 22px;
    }
}

/* Colored premium launch-process cards */

.process-card {
    overflow: hidden;
}

.process-card:nth-child(1) {
    background:
        radial-gradient(circle at 85% 15%, rgba(67, 145, 255, 0.22), transparent 32%),
        linear-gradient(145deg, rgba(38, 99, 232, 0.24), rgba(255, 255, 255, 0.05));
    border-color: rgba(71, 140, 255, 0.35);
}

.process-card:nth-child(2) {
    background:
        radial-gradient(circle at 85% 15%, rgba(140, 92, 246, 0.22), transparent 32%),
        linear-gradient(145deg, rgba(105, 65, 198, 0.24), rgba(255, 255, 255, 0.05));
    border-color: rgba(150, 105, 245, 0.34);
}

.process-card:nth-child(3) {
    background:
        radial-gradient(circle at 85% 15%, rgba(37, 201, 174, 0.20), transparent 32%),
        linear-gradient(145deg, rgba(17, 146, 126, 0.22), rgba(255, 255, 255, 0.05));
    border-color: rgba(37, 201, 174, 0.32);
}

.process-card:nth-child(4) {
    background:
        radial-gradient(circle at 85% 15%, rgba(30, 188, 214, 0.22), transparent 32%),
        linear-gradient(145deg, rgba(15, 122, 153, 0.24), rgba(255, 255, 255, 0.05));
    border-color: rgba(30, 188, 214, 0.32);
}

.process-card:nth-child(5) {
    background:
        radial-gradient(circle at 85% 15%, rgba(247, 180, 45, 0.20), transparent 32%),
        linear-gradient(145deg, rgba(171, 110, 14, 0.20), rgba(255, 255, 255, 0.05));
    border-color: rgba(247, 180, 45, 0.30);
}

.process-card:nth-child(6) {
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 92, 125, 0.20), transparent 32%),
        linear-gradient(145deg, rgba(167, 34, 68, 0.22), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 92, 125, 0.30);
}

.process-card:nth-child(1) > i {
    background: linear-gradient(135deg, #2768ef, #5a9cff);
}

.process-card:nth-child(2) > i {
    background: linear-gradient(135deg, #6d42d8, #9b6cf4);
}

.process-card:nth-child(3) > i {
    background: linear-gradient(135deg, #0f9d86, #2bc5aa);
}

.process-card:nth-child(4) > i {
    background: linear-gradient(135deg, #0b86a8, #29c1d2);
}

.process-card:nth-child(5) > i {
    background: linear-gradient(135deg, #c47b0a, #f3b52d);
}

.process-card:nth-child(6) > i {
    background: linear-gradient(135deg, #b72d50, #f05b7b);
}

.process-card:nth-child(1)::before {
    background: rgba(67, 145, 255, 0.16);
}

.process-card:nth-child(2)::before {
    background: rgba(140, 92, 246, 0.16);
}

.process-card:nth-child(3)::before {
    background: rgba(37, 201, 174, 0.15);
}

.process-card:nth-child(4)::before {
    background: rgba(30, 188, 214, 0.15);
}

.process-card:nth-child(5)::before {
    background: rgba(247, 180, 45, 0.14);
}

.process-card:nth-child(6)::before {
    background: rgba(255, 92, 125, 0.14);
}

.process-card:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* =========================================================
   DARK PREMIUM LAUNCH PROCESS CARDS
========================================================= */

.launch-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.06), transparent 35%),
        #f7f9fd;
}

.process-grid {
    gap: 18px;
}

/* Base dark card */

.process-card {
    min-height: 220px;
    padding: 28px 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: #0d1f3d;
    box-shadow:
        0 18px 42px rgba(13, 31, 61, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    text-align: center;
    overflow: hidden;
}

/* Remove old light gradient effect */

.process-card:nth-child(1),
.process-card:nth-child(2),
.process-card:nth-child(3),
.process-card:nth-child(4),
.process-card:nth-child(5),
.process-card:nth-child(6) {
    background: #022a6e;
}

/* Subtle colored top glow */

.process-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 110px;
    top: -55px;
    left: 50%;
    border-radius: 50%;
    filter: blur(22px);
    transform: translateX(-50%);
    opacity: 0.35;
}

.process-card:nth-child(1)::before {
    background: #3478f6;
}

.process-card:nth-child(2)::before {
    background: #8b5cf6;
}

.process-card:nth-child(3)::before {
    background: #18b89a;
}

.process-card:nth-child(4)::before {
    background: #22b8cf;
}

.process-card:nth-child(5)::before {
    background: #f0a51a;
}

.process-card:nth-child(6)::before {
    background: #ef4c72;
}

/* Light icon box */

.process-card > i {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.10)
        );
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(10px);
    font-size: 21px;
}

/* Matching light icon tint */

.process-card:nth-child(1) > i {
    background: linear-gradient(145deg, #7db1ff, #3478f6);
}

.process-card:nth-child(2) > i {
    background: linear-gradient(145deg, #b89cff, #7c4ce5);
}

.process-card:nth-child(3) > i {
    background: linear-gradient(145deg, #63ddc4, #16a98e);
}

.process-card:nth-child(4) > i {
    background: linear-gradient(145deg, #72deeb, #18a9c0);
}

.process-card:nth-child(5) > i {
    background: linear-gradient(145deg, #ffd77f, #e69b12);
}

.process-card:nth-child(6) > i {
    background: linear-gradient(145deg, #ff9bb3, #df4167);
}

/* Text */

.process-card h3 {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.process-card p {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    color: #aebbd0;
    font-size: 12px;
    line-height: 1.65;
}

/* Step number */

.process-card > span {
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 700;
}

/* Hover */

.process-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.18);
    background: #10294f;
    box-shadow:
        0 28px 60px rgba(13, 31, 61, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Connector line softer */

.process-grid::before {
    background: rgba(50, 104, 220, 0.18);
}

/* Note */

.launch-note {
    color: #68758b;
    background: #ffffff;
    border: 1px solid #dde5f0;
    box-shadow: 0 8px 20px rgba(28, 54, 94, 0.05);
}

/* Mobile */

@media (max-width: 600px) {
    .process-card {
        min-height: 205px;
        padding: 25px 20px;
    }

    .process-card > i {
        width: 58px;
        height: 58px;
    }
}
/* Launch note clean style */

.launch-note {
    max-width: 900px;
    margin: 34px auto 0;
    padding: 0;

    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    color: #5f6f86;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

/* =========================================================
   SIMPLE 9-ITEM SOLUTIONS MEGA MENU
========================================================= */

.premium-simple-menu {
    width: 820px;
    padding: 18px;
    border: 1px solid #e2e8f2;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 30px 80px rgba(14, 34, 68, 0.18),
        0 8px 24px rgba(14, 34, 68, 0.08);
    backdrop-filter: blur(18px);
}

.simple-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.simple-menu-item {
    min-height: 74px;
    padding: 13px 14px;
    border: 1px solid #e5ebf3;
    border-radius: 14px;
    color: #101828;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.simple-menu-item:hover {
    color: #101828;
    transform: translateY(-3px);
    border-color: #bfd2fb;
    background: #f7faff;
    box-shadow: 0 12px 28px rgba(31, 69, 130, 0.10);
}

.simple-menu-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 8px 18px rgba(30, 64, 120, 0.09);
}

.simple-menu-item strong {
    color: #10213f;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* Icon colors */

.simple-menu-icon.icon-purple {
    color: #7037c8;
    background: #f3ebff;
}

.simple-menu-icon.icon-blue {
    color: #087fa6;
    background: #e6f7fc;
}

.simple-menu-icon.icon-violet {
    color: #6b25bf;
    background: #f4eaff;
}

.simple-menu-icon.icon-sky {
    color: #2389c7;
    background: #e8f6ff;
}

.simple-menu-icon.icon-gold {
    color: #c47a00;
    background: #fff4d8;
}

.simple-menu-icon.icon-cyan {
    color: #0a9b9d;
    background: #e5fbfb;
}

.simple-menu-icon.icon-yellow {
    color: #c88700;
    background: #fff6d8;
}

.simple-menu-icon.icon-red {
    color: #c7384b;
    background: #fff0f2;
}

.simple-menu-icon.icon-green {
    color: #0a917b;
    background: #e8faf6;
}

/* Footer */

.simple-menu-footer {
    min-height: 58px;
    margin-top: 14px;
    padding: 0 15px;
    border: 1px solid #e5ebf3;
    border-radius: 13px;
    background: linear-gradient(135deg, #f6f9ff, #edf4ff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.simple-menu-footer span {
    color: #667085;
    font-size: 12px;
}

.simple-menu-footer a {
    color: #2863e8;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
}

.simple-menu-footer a:hover {
    color: #174bbd;
}

/* Desktop dropdown position */

@media (min-width: 1081px) {
    .premium-simple-menu {
        left: 50%;
        transform: translate(-50%, 14px);
    }

    .premium-has-mega-menu:hover .premium-simple-menu {
        transform: translate(-50%, 0);
    }
}

/* Tablet/mobile menu */

@media (max-width: 1080px) {
    .premium-simple-menu {
        position: static;
        width: 100%;
        margin-top: 8px;
        padding: 10px;
        border-radius: 14px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .premium-has-mega-menu.open .premium-simple-menu {
        display: block;
    }

    .simple-menu-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .simple-menu-item {
        min-height: 58px;
        padding: 10px 11px;
    }

    .simple-menu-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 14px;
    }

    .simple-menu-item strong {
        font-size: 12px;
    }

    .simple-menu-footer {
        min-height: auto;
        padding: 13px;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 560px) {
    .premium-simple-menu {
        padding: 8px;
    }

    .simple-menu-item {
        min-height: 56px;
    }
}

/* =========================================================
   WHITE LABEL SPORTSBOOK PAGE
========================================================= */

.solution-detail-hero {
    position: relative;
    min-height: 880px;
    padding: 175px 0 95px;
    color: #ffffff;
    background: #071a3c;
    overflow: hidden;
}

.solution-detail-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.solution-detail-grid {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 65px 65px;
}

.solution-detail-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.solution-detail-glow-one {
    width: 520px;
    height: 520px;
    top: 120px;
    left: -190px;
    background: rgba(53, 102, 244, 0.35);
}

.solution-detail-glow-two {
    width: 650px;
    height: 650px;
    top: 0;
    right: -200px;
    background: rgba(25, 193, 204, 0.22);
}

.solution-detail-hero-container {
    position: relative;
    z-index: 3;
    min-height: 610px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
}

.solution-detail-content {
    max-width: 660px;
}

.solution-detail-breadcrumb {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #91a6c8;
    font-size: 12px;
}

.solution-detail-breadcrumb a:hover {
    color: #ffffff;
}

.solution-detail-breadcrumb i {
    font-size: 8px;
}

.solution-detail-label {
    display: inline-flex;
    margin-bottom: 20px;
    color: #6ce0e3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.solution-detail-content h1 {
    font-family: "Sora", sans-serif;
    font-size: clamp(56px, 6vw, 88px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.06em;
}

.solution-detail-content h1 span {
    display: block;
    color: #5d8cff;
}

.solution-detail-content > p {
    max-width: 620px;
    margin-top: 27px;
    color: #aec0dc;
    font-size: 17px;
    line-height: 1.8;
}

.solution-detail-actions {
    margin-top: 35px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.solution-detail-primary,
.solution-detail-secondary {
    min-height: 57px;
    padding: 0 24px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 700;
}

.solution-detail-primary {
    color: #071a3c;
    background: #ffffff;
}

.solution-detail-secondary {
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.07);
}

.solution-detail-points {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.solution-detail-points div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aec0dc;
    font-size: 12px;
}

.solution-detail-points i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #ffffff;
    background: #2863e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

/* Sportsbook screen */

.solution-detail-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sportsbook-screen {
    width: 100%;
    max-width: 690px;
    border: 1px solid rgba(255,255,255,0.17);
    border-radius: 25px;
    background: #f5f7fb;
    box-shadow: 0 45px 100px rgba(0,0,0,0.35);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}

.sportsbook-screen-header {
    min-height: 62px;
    padding: 0 18px;
    background: #ffffff;
    border-bottom: 1px solid #e4eaf2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.sportsbook-screen-logo,
.sportsbook-screen-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sportsbook-screen-logo {
    color: #ffffff;
    background: linear-gradient(135deg, #2863e8, #24bdca);
    font-weight: 800;
}

.sportsbook-screen-profile {
    color: #2863e8;
    background: #edf4ff;
}

.sportsbook-screen-search {
    max-width: 220px;
    padding: 9px 14px;
    border-radius: 9px;
    color: #98a2b3;
    background: #f3f5f8;
    font-size: 9px;
}

.sportsbook-screen-body {
    min-height: 440px;
    display: grid;
    grid-template-columns: 62px 1fr;
}

.sportsbook-screen-sidebar {
    padding: 18px 10px;
    background: #071a3c;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sportsbook-screen-sidebar span {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    color: #8298bb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.sportsbook-screen-sidebar span.active {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
}

.sportsbook-screen-content {
    padding: 22px;
}

.sportsbook-banner {
    min-height: 135px;
    padding: 24px;
    border-radius: 17px;
    color: #ffffff;
    background:
        radial-gradient(circle at 85% 20%, rgba(36, 189, 202, 0.34), transparent 30%),
        linear-gradient(135deg, #132f67, #2863e8);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sportsbook-banner small,
.sportsbook-banner strong,
.sportsbook-banner span {
    display: block;
}

.sportsbook-banner small {
    color: #70e0e3;
    font-size: 8px;
}

.sportsbook-banner strong {
    margin-top: 5px;
    font-size: 17px;
}

.sportsbook-banner span {
    margin-top: 5px;
    color: #c4d3eb;
    font-size: 9px;
}

.sportsbook-banner > i {
    font-size: 66px;
    opacity: 0.85;
}

.sportsbook-events {
    margin-top: 15px;
    display: grid;
    gap: 10px;
}

.sportsbook-event-row {
    padding: 14px;
    border: 1px solid #e4eaf2;
    border-radius: 12px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr repeat(3, 52px);
    align-items: center;
    gap: 8px;
}

.sportsbook-event-row small,
.sportsbook-event-row strong {
    display: block;
}

.sportsbook-event-row small {
    color: #98a2b3;
    font-size: 7px;
}

.sportsbook-event-row strong {
    margin-top: 3px;
    color: #10213f;
    font-size: 10px;
}

.sportsbook-event-row > span {
    padding: 8px;
    border-radius: 7px;
    color: #2863e8;
    background: #edf4ff;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
}

.sportsbook-floating-card {
    position: absolute;
    z-index: 4;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    background: rgba(255,255,255,0.11);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 11px;
}

.sportsbook-floating-card > span {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #2863e8, #24bdca);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sportsbook-floating-card strong,
.sportsbook-floating-card small {
    display: block;
}

.sportsbook-floating-card strong {
    font-size: 11px;
}

.sportsbook-floating-card small {
    color: #aebfda;
    font-size: 8px;
}

.sportsbook-live-card {
    top: 38px;
    right: -25px;
}

.sportsbook-risk-card {
    left: -35px;
    bottom: 45px;
}

/* Intro */

.sportsbook-intro-section {
    padding: 110px 0;
    background: #ffffff;
}

.sportsbook-intro-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;
}

.sportsbook-intro-grid h2 {
    color: #0b1935;
    font-family: "Sora", sans-serif;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.sportsbook-intro-grid p {
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}

.sportsbook-intro-grid p + p {
    margin-top: 18px;
}

/* Features */

.sportsbook-features-section {
    padding: 115px 0;
    background: #f6f9ff;
}

.sportsbook-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.sportsbook-feature-card {
    min-height: 250px;
    padding: 30px;
    border: 1px solid #dfe7f2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(22, 54, 103, 0.06);
    transition: 0.25s ease;
}

.sportsbook-feature-card:hover {
    transform: translateY(-7px);
    border-color: #bfd2fb;
    box-shadow: 0 25px 55px rgba(22, 54, 103, 0.12);
}

.sportsbook-feature-card > span {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #2863e8, #24bdca);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.sportsbook-feature-card h3 {
    margin-top: 24px;
    color: #10213f;
    font-family: "Sora", sans-serif;
    font-size: 19px;
    font-weight: 600;
}

.sportsbook-feature-card p {
    margin-top: 10px;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

/* Sports */

.sportsbook-sports-section {
    padding: 110px 0;
    background: #ffffff;
}

.sportsbook-sports-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sportsbook-sports-grid div {
    min-height: 125px;
    padding: 20px;
    border: 1px solid #e1e8f2;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(24, 54, 99, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    transition: 0.25s ease;
}

.sportsbook-sports-grid div:hover {
    transform: translateY(-5px);
    background: #f4f8ff;
}

.sportsbook-sports-grid i {
    color: #2863e8;
    font-size: 25px;
}

.sportsbook-sports-grid span {
    color: #10213f;
    font-family: "Sora", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

/* CTA */

.sportsbook-cta-section {
    padding: 40px 0 120px;
    background: #ffffff;
}

.sportsbook-cta-box {
    padding: 55px;
    border-radius: 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at 90% 10%, rgba(36,189,202,0.30), transparent 25%),
        linear-gradient(135deg, #071a3c, #174d9d);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.sportsbook-cta-box span {
    color: #6ce0e3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sportsbook-cta-box h2 {
    margin-top: 10px;
    font-family: "Sora", sans-serif;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 600;
}

.sportsbook-cta-box p {
    max-width: 680px;
    margin-top: 12px;
    color: #b5c5df;
    font-size: 14px;
    line-height: 1.7;
}

.sportsbook-cta-box > a {
    flex: 0 0 auto;
    min-height: 60px;
    padding: 0 25px;
    border-radius: 12px;
    color: #071a3c;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
}

/* Responsive */

@media (max-width: 1050px) {
    .solution-detail-hero-container,
    .sportsbook-intro-grid {
        grid-template-columns: 1fr;
    }

    .solution-detail-content {
        max-width: 850px;
        text-align: center;
        margin-inline: auto;
    }

    .solution-detail-breadcrumb,
    .solution-detail-actions,
    .solution-detail-points {
        justify-content: center;
    }

    .solution-detail-visual {
        max-width: 820px;
        width: 100%;
        margin-inline: auto;
    }

    .sportsbook-screen {
        transform: none;
    }

    .sportsbook-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .solution-detail-hero {
        min-height: auto;
        padding: 125px 0 75px;
    }

    .solution-detail-content h1 {
        font-size: 48px;
    }

    .solution-detail-content > p {
        font-size: 15px;
    }

    .solution-detail-actions {
        flex-direction: column;
    }

    .solution-detail-primary,
    .solution-detail-secondary {
        width: 100%;
    }

    .solution-detail-points {
        align-items: flex-start;
        flex-direction: column;
    }

    .solution-detail-visual {
        min-height: auto;
        margin-top: 30px;
    }

    .sportsbook-screen-body {
        grid-template-columns: 46px 1fr;
    }

    .sportsbook-screen-sidebar {
        padding-inline: 4px;
    }

    .sportsbook-screen-content {
        padding: 12px;
    }

    .sportsbook-banner {
        min-height: 110px;
        padding: 17px;
    }

    .sportsbook-banner > i {
        font-size: 44px;
    }

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

    .sportsbook-event-row > span {
        display: none;
    }

    .sportsbook-floating-card {
        display: none;
    }

    .sportsbook-intro-section,
    .sportsbook-features-section,
    .sportsbook-sports-section {
        padding: 80px 0;
    }

    .sportsbook-intro-grid {
        gap: 30px;
    }

    .sportsbook-features-grid,
    .sportsbook-sports-grid {
        grid-template-columns: 1fr;
    }

    .sportsbook-cta-section {
        padding-bottom: 90px;
    }

    .sportsbook-cta-box {
        padding: 32px 24px;
        align-items: flex-start;
        flex-direction: column;
    }

    .sportsbook-cta-box > a {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   HOMEPAGE PROJECT CTA
========================================================= */

.home-project-cta-section {
    padding: 95px 0 110px;
    background: #ffffff;
}

.home-project-cta-box {
    position: relative;
    min-height: 275px;
    padding: 55px 58px;
    border-radius: 28px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(47, 194, 220, 0.28),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071a3c 0%,
            #123f82 55%,
            #2367bb 100%
        );
    box-shadow:
        0 28px 70px rgba(12, 44, 94, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
    overflow: hidden;
}

.home-project-cta-box::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -240px;
    right: 80px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.home-project-cta-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.home-project-cta-content > span {
    color: #61dce2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.home-project-cta-content h2 {
    max-width: 700px;
    margin-top: 14px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: clamp(37px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.045em;
}

.home-project-cta-content p {
    max-width: 670px;
    margin-top: 18px;
    color: #b8c9e2;
    font-size: 14px;
    line-height: 1.75;
}

.home-project-cta-button {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 60px;
    padding: 0 25px;
    border-radius: 12px;
    color: #071a3c;
    background: #ffffff;
    box-shadow: 0 15px 32px rgba(2, 20, 50, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-size: 14px;
    font-weight: 700;
    transition: 0.25s ease;
}

.home-project-cta-button:hover {
    color: #071a3c;
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(2, 20, 50, 0.27);
}

@media (max-width: 850px) {
    .home-project-cta-box {
        padding: 45px 38px;
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .home-project-cta-section {
        padding: 70px 0 85px;
    }

    .home-project-cta-box {
        min-height: auto;
        padding: 34px 24px;
        border-radius: 21px;
    }

    .home-project-cta-content h2 {
        font-size: 36px;
    }

    .home-project-cta-content p {
        font-size: 13px;
    }

    .home-project-cta-button {
        width: 100%;
    }
}

/* =========================================================
   SPORTSBOOK STATISTICS
========================================================= */

.sportsbook-stats-section {
    position: relative;
    padding: 42px 0 50px;
    background: #f8f6ff;
    border-bottom: 1px solid #ebe5f5;
}

.sportsbook-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sportsbook-stat-card {
    min-height: 135px;
    padding: 26px 20px;
    border: 1px solid #dfe6f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(28, 54, 99, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transition: 0.25s ease;
}

.sportsbook-stat-card:hover {
    transform: translateY(-5px);
    border-color: #c4d4f5;
    box-shadow: 0 20px 45px rgba(28, 54, 99, 0.12);
}

.sportsbook-stat-card strong {
    color: #0b1935;
    font-family: "Sora", sans-serif;
    font-size: clamp(35px, 4vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
}

.sportsbook-stat-card strong span {
    color: #2863e8;
}

.sportsbook-stat-card p {
    margin-top: 11px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.sportsbook-stats-note {
    max-width: 760px;
    margin: 25px auto 0;
    color: #7a8598;
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
}

/* =========================================================
   WHY CHOOSE OMNIIGAMING SPORTSBOOK
========================================================= */

.sportsbook-why-section {
    position: relative;
    padding: 115px 0;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(107, 37, 191, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(35, 170, 202, 0.08),
            transparent 28%
        ),
        #ffffff;
    overflow: hidden;
}

.sportsbook-why-heading {
    max-width: 900px;
    margin-inline: auto;
}

.sportsbook-why-heading > p {
    max-width: 760px;
    margin: 22px auto 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.8;
}

.sportsbook-why-grid {
    margin-top: 58px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.sportsbook-why-card {
    position: relative;
    min-height: 245px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 23px;
    color: #ffffff;
    box-shadow:
        0 22px 55px rgba(28, 35, 72, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
    transition: 0.3s ease;
}

.sportsbook-why-card::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -110px;
    bottom: -130px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

.sportsbook-why-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -70px;
    bottom: -90px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.sportsbook-why-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 35px 75px rgba(28, 35, 72, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.sportsbook-why-blue {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(63, 202, 226, 0.22),
            transparent 30%
        ),
        linear-gradient(135deg, #071d46, #1456a4);
}

.sportsbook-why-purple {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(205, 119, 255, 0.24),
            transparent 30%
        ),
        linear-gradient(135deg, #341064, #7632b9);
}

.sportsbook-why-green {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(81, 231, 200, 0.20),
            transparent 30%
        ),
        linear-gradient(135deg, #073b43, #0c7e7b);
}

.sportsbook-why-gold {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255, 221, 101, 0.25),
            transparent 30%
        ),
        linear-gradient(135deg, #654000, #c68108);
}

.sportsbook-why-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
}

.sportsbook-why-icon {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 15px 30px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.sportsbook-why-card h3 {
    margin-top: 24px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.sportsbook-why-card p {
    max-width: 510px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.75;
}

.sportsbook-why-number {
    position: absolute;
    z-index: 1;
    top: 25px;
    right: 28px;
    color: rgba(255, 255, 255, 0.20);
    font-family: "Sora", sans-serif;
    font-size: 38px;
    font-weight: 700;
}

/* Tablet */

@media (max-width: 900px) {
    .sportsbook-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sportsbook-why-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .sportsbook-stats-section {
        padding: 35px 0 42px;
    }

    .sportsbook-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sportsbook-stat-card {
        min-height: 115px;
    }

    .sportsbook-stat-card strong {
        font-size: 40px;
    }

    .sportsbook-why-section {
        padding: 80px 0;
    }

    .sportsbook-why-heading {
        text-align: left;
    }

    .sportsbook-why-heading > p {
        margin-inline: 0;
        font-size: 14px;
    }

    .sportsbook-why-grid {
        margin-top: 38px;
        gap: 16px;
    }

    .sportsbook-why-card {
        min-height: 225px;
        padding: 26px 23px;
        border-radius: 19px;
    }

    .sportsbook-why-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 18px;
    }

    .sportsbook-why-card h3 {
        font-size: 20px;
    }

    .sportsbook-why-number {
        top: 22px;
        right: 22px;
        font-size: 30px;
    }
}

/* =========================================================
   SPORTSBOOK INSIGHTS
========================================================= */

.sportsbook-insights-section {
    position: relative;
    padding: 115px 0 120px;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(43, 99, 232, 0.07),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(31, 184, 200, 0.07),
            transparent 25%
        ),
        #f6f9ff;
    overflow: hidden;
}

.sportsbook-insights-heading {
    margin-bottom: 55px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.sportsbook-insights-heading h2 {
    max-width: 820px;
    margin-top: 15px;
    color: #0b1935;
    font-family: "Sora", sans-serif;
    font-size: clamp(38px, 4.5vw, 60px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.sportsbook-insights-heading h2 span {
    color: #2863e8;
}

.sportsbook-insights-view-all {
    flex: 0 0 auto;
    padding-bottom: 8px;
    color: #2863e8;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.sportsbook-insights-view-all i,
.sportsbook-insight-link i {
    transition: transform 0.25s ease;
}

.sportsbook-insights-view-all:hover i,
.sportsbook-insight-link:hover i {
    transform: translateX(5px);
}

.sportsbook-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sportsbook-insight-card {
    border: 1px solid #dfe7f2;
    border-radius: 23px;
    background: #ffffff;
    box-shadow:
        0 16px 42px rgba(23, 53, 99, 0.08);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.sportsbook-insight-card:hover {
    transform: translateY(-8px);
    border-color: #bfd1f6;
    box-shadow:
        0 30px 65px rgba(23, 53, 99, 0.14);
}

.sportsbook-insight-image {
    position: relative;
    height: 245px;
    padding: 22px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sportsbook-insight-image::before,
.sportsbook-insight-image::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.sportsbook-insight-image::before {
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.sportsbook-insight-image::after {
    width: 145px;
    height: 145px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.sportsbook-insight-image-one {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(92, 220, 235, 0.25),
            transparent 30%
        ),
        linear-gradient(135deg, #071d47, #2463bc);
}

.sportsbook-insight-image-two {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(205, 126, 255, 0.25),
            transparent 30%
        ),
        linear-gradient(135deg, #32105f, #7737b9);
}

.sportsbook-insight-image-three {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(73, 226, 200, 0.23),
            transparent 30%
        ),
        linear-gradient(135deg, #063b43, #0d817e);
}

.sportsbook-insight-category {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 18px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(10px);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sportsbook-insight-visual {
    position: relative;
    z-index: 2;
    width: 118px;
    height: 118px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 32px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0.07)
        );
    box-shadow:
        0 25px 45px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 43px;
    transform: rotate(-5deg);
    transition: transform 0.35s ease;
}

.sportsbook-insight-card:hover .sportsbook-insight-visual {
    transform: rotate(3deg) scale(1.06);
}

.sportsbook-insight-content {
    padding: 27px 27px 30px;
}

.sportsbook-insight-meta {
    margin-bottom: 15px;
    color: #8290a5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 10px;
    font-weight: 600;
}

.sportsbook-insight-content h3 {
    color: #101d38;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.sportsbook-insight-content p {
    margin-top: 13px;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

.sportsbook-insight-link {
    margin-top: 23px;
    color: #2863e8;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
}

/* Tablet */

@media (max-width: 950px) {
    .sportsbook-insights-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .sportsbook-insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sportsbook-insight-card:last-child {
        grid-column: span 2;
    }
}

/* Mobile */

@media (max-width: 650px) {
    .sportsbook-insights-section {
        padding: 80px 0 85px;
    }

    .sportsbook-insights-heading {
        margin-bottom: 38px;
        gap: 20px;
    }

    .sportsbook-insights-heading h2 {
        font-size: 36px;
    }

    .sportsbook-insights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sportsbook-insight-card:last-child {
        grid-column: auto;
    }

    .sportsbook-insight-image {
        height: 220px;
    }

    .sportsbook-insight-content {
        padding: 23px 21px 26px;
    }

    .sportsbook-insight-content h3 {
        font-size: 19px;
    }
}

/* =========================================================
   SPORTS BETTING EXCHANGE PAGE
========================================================= */

.exchange-detail-hero {
    background:
        radial-gradient(
            circle at 86% 22%,
            rgba(33, 193, 210, 0.15),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061a38 0%,
            #073d62 52%,
            #087a91 100%
        );
}

.exchange-detail-glow {
    width: 580px;
    height: 580px;
    top: 80px;
    right: -180px;
    background: rgba(50, 212, 220, 0.24);
}

.exchange-platform-screen {
    width: 100%;
    max-width: 680px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 25px;
    background: #f5f8fb;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.34);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.exchange-screen-topbar {
    min-height: 67px;
    padding: 0 20px;
    border-bottom: 1px solid #dce6ef;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.exchange-screen-brand {
    color: #10213f;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.exchange-screen-brand span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #147c9e, #29c4cc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exchange-screen-status {
    padding: 8px 11px;
    border-radius: 100px;
    color: #087e73;
    background: #e9faf7;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    font-weight: 700;
}

.exchange-screen-status i {
    color: #16b598;
    font-size: 7px;
}

.exchange-screen-body {
    min-height: 430px;
    padding: 22px;
}

.exchange-market-heading {
    min-height: 100px;
    padding: 20px;
    border-radius: 16px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(63, 224, 224, 0.30),
            transparent 28%
        ),
        linear-gradient(135deg, #073354, #087f96);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.exchange-market-heading small,
.exchange-market-heading strong {
    display: block;
}

.exchange-market-heading small {
    color: #7be7e9;
    font-size: 8px;
    font-weight: 700;
}

.exchange-market-heading strong {
    margin-top: 6px;
    font-size: 17px;
}

.exchange-market-heading > span {
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 9px;
}

.exchange-runner-row {
    margin-top: 10px;
    padding: 13px;
    border: 1px solid #e1e8f0;
    border-radius: 12px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr 90px 90px;
    align-items: center;
    gap: 9px;
}

.exchange-runner-header {
    min-height: 38px;
    color: #8290a3;
    background: transparent;
    border: none;
    font-size: 8px;
    text-align: center;
}

.exchange-runner-header strong {
    text-align: left;
}

.exchange-runner-row > div strong,
.exchange-runner-row > div small {
    display: block;
}

.exchange-runner-row > div strong {
    color: #10213f;
    font-size: 10px;
}

.exchange-runner-row > div small {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 7px;
}

.exchange-runner-row button {
    min-height: 45px;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.exchange-runner-row button small {
    display: block;
    margin-top: 2px;
    font-size: 7px;
    font-weight: 500;
}

.exchange-back-price {
    color: #065f78;
    background: #c8f0fa;
}

.exchange-lay-price {
    color: #842344;
    background: #ffd8e4;
}

.exchange-screen-bottom {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.exchange-screen-bottom div {
    min-height: 54px;
    padding: 8px;
    border: 1px solid #e1e8f0;
    border-radius: 10px;
    color: #58677c;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 600;
}

.exchange-screen-bottom i {
    color: #0a9bad;
}

.exchange-liquidity-card {
    top: 35px;
    right: -26px;
}

.exchange-risk-card {
    left: -34px;
    bottom: 40px;
}

/* Exchange capabilities */

.exchange-capabilities-section {
    padding: 110px 0;
    background: #ffffff;
}

.exchange-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.exchange-capabilities-grid div {
    min-height: 135px;
    padding: 20px;
    border: 1px solid #dfe7f0;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3fbfc
        );
    box-shadow: 0 13px 30px rgba(23, 67, 90, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    transition: 0.25s ease;
}

.exchange-capabilities-grid div:hover {
    transform: translateY(-6px);
    border-color: #a8dde3;
    box-shadow: 0 23px 48px rgba(23, 67, 90, 0.12);
}

.exchange-capabilities-grid i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #087d99, #24c1c7);
    box-shadow: 0 12px 22px rgba(11, 139, 160, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.exchange-capabilities-grid span {
    color: #10213f;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 950px) {
    .exchange-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .exchange-platform-screen {
        transform: none;
    }
}

@media (max-width: 650px) {
    .exchange-screen-body {
        padding: 13px;
    }

    .exchange-market-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .exchange-runner-row {
        grid-template-columns: 1fr 65px 65px;
        padding: 10px;
    }

    .exchange-screen-bottom {
        grid-template-columns: 1fr;
    }

    .exchange-liquidity-card,
    .exchange-risk-card {
        display: none;
    }

    .exchange-capabilities-section {
        padding: 80px 0;
    }

    .exchange-capabilities-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SOLUTION INTRO SECTION SPACING FIX
========================================================= */

.sportsbook-intro-section {
    padding: 72px 0 78px;
}

.sportsbook-intro-grid {
    align-items: center;
    gap: 65px;
}

.sportsbook-intro-grid > div:first-child {
    align-self: center;
}

.sportsbook-intro-grid h2 {
    max-width: 590px;
    margin-bottom: 0;
    font-size: clamp(38px, 3.7vw, 54px);
    line-height: 1.12;
}

.sportsbook-intro-grid > div:last-child {
    max-width: 650px;
}

.sportsbook-intro-grid p {
    font-size: 15px;
    line-height: 1.75;
}

.sportsbook-intro-grid p + p {
    margin-top: 14px;
}

/* =========================================================
   EXCHANGE FLOATING CARDS READABILITY
========================================================= */

.exchange-liquidity-card,
.exchange-risk-card {
    min-width: 190px;
    padding: 14px 16px;

    border: 1px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 20px 45px rgba(4, 28, 56, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    backdrop-filter: blur(14px);
}

.exchange-liquidity-card strong,
.exchange-risk-card strong {
    color: #0b1935;
    font-size: 11px;
    font-weight: 700;
}

.exchange-liquidity-card small,
.exchange-risk-card small {
    margin-top: 3px;
    color: #637188;
    font-size: 8px;
    font-weight: 500;
}

.exchange-liquidity-card > span,
.exchange-risk-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    background: linear-gradient(135deg, #087e9d, #27c1c8);
    box-shadow: 0 10px 22px rgba(8, 126, 157, 0.24);
}

.exchange-liquidity-card {
    top: 28px;
    right: -10px;
}

.exchange-risk-card {
    left: -12px;
    bottom: 34px;
}

@media (max-width: 1050px) {
    .sportsbook-intro-section {
        padding: 65px 0 70px;
    }

    .sportsbook-intro-grid {
        gap: 32px;
    }

    .sportsbook-intro-grid > div:last-child {
        max-width: 100%;
    }

    .exchange-liquidity-card {
        right: 10px;
    }

    .exchange-risk-card {
        left: 10px;
    }
}

@media (max-width: 700px) {
    .sportsbook-intro-section {
        padding: 58px 0 62px;
    }

    .sportsbook-intro-grid {
        gap: 22px;
    }

    .sportsbook-intro-grid h2 {
        font-size: 36px;
    }

    .sportsbook-intro-grid p {
        font-size: 14px;
    }
}

/* =========================================================
   WHITE LABEL ONLINE CASINO PAGE
========================================================= */

.casino-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(193, 78, 255, 0.20),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #16072f 0%,
            #321168 52%,
            #7426a7 100%
        );
}

.casino-glow-one {
    width: 560px;
    height: 560px;
    top: 90px;
    left: -180px;
    background: rgba(103, 72, 255, 0.28);
}

.casino-glow-two {
    width: 620px;
    height: 620px;
    top: 40px;
    right: -190px;
    background: rgba(213, 69, 255, 0.22);
}

.casino-platform-screen {
    width: 100%;
    max-width: 690px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 25px;
    background: #f7f5fa;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.36);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.casino-screen-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #e5dfeb;
    background: #ffffff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.casino-screen-brand {
    color: #241438;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.casino-screen-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #6d2ac5, #bd4ed6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.casino-screen-navigation {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.casino-screen-navigation span {
    padding: 8px 10px;
    border-radius: 8px;
    color: #8490a2;
    font-size: 8px;
    font-weight: 600;
}

.casino-screen-navigation span.active {
    color: #7131bd;
    background: #f3eaff;
}

.casino-screen-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #7d3bc4;
    background: #f3eaff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.casino-screen-body {
    min-height: 445px;
    padding: 20px;
}

.casino-screen-banner {
    min-height: 155px;
    padding: 24px;
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 120, 216, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #351064, #8831b5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.casino-screen-banner small,
.casino-screen-banner strong,
.casino-screen-banner span {
    display: block;
}

.casino-screen-banner small {
    color: #f0a9ff;
    font-size: 8px;
    font-weight: 700;
}

.casino-screen-banner strong {
    max-width: 290px;
    margin-top: 7px;
    font-size: 18px;
}

.casino-screen-banner span {
    margin-top: 7px;
    color: #dbc9ec;
    font-size: 9px;
}

.casino-screen-banner button {
    margin-top: 14px;
    padding: 9px 13px;
    border: none;
    border-radius: 8px;
    color: #3c115d;
    background: #ffffff;
    font-size: 8px;
    font-weight: 700;
}

.casino-banner-icon {
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 25px 40px rgba(24, 4, 45, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 43px;
    transform: rotate(-8deg);
}

.casino-category-row {
    margin: 14px 0;
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.casino-category-row span {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid #e5dfeb;
    border-radius: 9px;
    color: #677286;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    font-weight: 600;
}

.casino-category-row span.active {
    color: #7534c0;
    border-color: #d7c1f1;
    background: #f4edff;
}

.casino-game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.casino-game-card {
    min-height: 125px;
    padding: 13px;
    border-radius: 13px;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    overflow: hidden;
}

.casino-game-card i {
    margin-bottom: auto;
    font-size: 25px;
}

.casino-game-card strong,
.casino-game-card small {
    display: block;
}

.casino-game-card strong {
    font-size: 9px;
}

.casino-game-card small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 7px;
}

.casino-game-purple {
    background: linear-gradient(145deg, #54209d, #a84bd6);
}

.casino-game-red {
    background: linear-gradient(145deg, #801a43, #d74768);
}

.casino-game-blue {
    background: linear-gradient(145deg, #145292, #319bc7);
}

.casino-game-green {
    background: linear-gradient(145deg, #08735f, #30b494);
}

.casino-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 190px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 45px rgba(27, 8, 44, 0.25);
    display: flex;
    align-items: center;
    gap: 11px;
}

.casino-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #7232bd, #c24fd3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.casino-floating-card strong,
.casino-floating-card small {
    display: block;
}

.casino-floating-card strong {
    color: #211333;
    font-size: 11px;
    font-weight: 700;
}

.casino-floating-card small {
    margin-top: 3px;
    color: #6f627b;
    font-size: 8px;
}

.casino-content-card {
    top: 30px;
    right: -12px;
}

.casino-player-card {
    left: -14px;
    bottom: 35px;
}

/* Casino categories */

.casino-categories-section {
    padding: 110px 0;
    background: #ffffff;
}

.casino-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.casino-category-card {
    min-height: 205px;
    padding: 28px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(27, 26, 55, 0.13);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    transition: 0.28s ease;
}

.casino-category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(27, 26, 55, 0.20);
}

.casino-category-card i {
    width: 55px;
    height: 55px;
    margin-bottom: auto;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.casino-category-card strong {
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.casino-category-card small {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.6;
}

.casino-category-purple {
    background: linear-gradient(135deg, #351064, #8037b7);
}

.casino-category-red {
    background: linear-gradient(135deg, #71162e, #c8425b);
}

.casino-category-blue {
    background: linear-gradient(135deg, #0d3d78, #248cc0);
}

.casino-category-gold {
    background: linear-gradient(135deg, #6b4200, #c98308);
}

.casino-category-green {
    background: linear-gradient(135deg, #084b42, #16967e);
}

.casino-category-cyan {
    background: linear-gradient(135deg, #07516b, #1aa8b8);
}

.casino-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(211, 81, 255, 0.28),
            transparent 26%
        ),
        linear-gradient(135deg, #18072f, #4f167f 55%, #862bb2);
}

@media (max-width: 950px) {
    .casino-platform-screen {
        transform: none;
    }

    .casino-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .casino-screen-navigation {
        display: none;
    }

    .casino-screen-header {
        grid-template-columns: 1fr auto;
    }

    .casino-screen-body {
        padding: 13px;
    }

    .casino-screen-banner {
        min-height: 135px;
        padding: 18px;
    }

    .casino-banner-icon {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }

    .casino-game-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .casino-floating-card {
        display: none;
    }

    .casino-categories-section {
        padding: 80px 0;
    }

    .casino-categories-grid {
        grid-template-columns: 1fr;
    }

    .casino-category-card {
        min-height: 190px;
    }
}
/* =========================================================
   SOLUTION-SPECIFIC CTA THEMES
========================================================= */

/* White Label Sportsbook CTA */

.sportsbook-detail-hero +
.sportsbook-stats-section ~
.sportsbook-cta-section .sportsbook-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(54, 170, 255, 0.28),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071a3c 0%,
            #123f82 55%,
            #2367bb 100%
        );
}

/* Betting Exchange CTA */

.exchange-detail-hero +
.sportsbook-stats-section ~
.sportsbook-cta-section .sportsbook-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(67, 226, 229, 0.28),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061a38 0%,
            #07506f 55%,
            #0b93a6 100%
        );
}

/* =========================================================
   WHITE LABEL FAST GAMES PAGE
========================================================= */

.fast-games-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(83, 200, 255, 0.22),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #071a3c 0%,
            #123e78 52%,
            #2588c9 100%
        );
}

.fast-games-glow-one {
    width: 540px;
    height: 540px;
    top: 100px;
    left: -180px;
    background: rgba(53, 102, 244, 0.28);
}

.fast-games-glow-two {
    width: 620px;
    height: 620px;
    top: 30px;
    right: -190px;
    background: rgba(61, 202, 232, 0.22);
}

.fast-games-platform-screen {
    width: 100%;
    max-width: 690px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 25px;
    background: #f5f8fc;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.34);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.fast-games-screen-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #dfe7f0;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.fast-games-screen-brand {
    color: #10213f;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.fast-games-screen-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #2382d6, #29c3d0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fast-games-screen-balance {
    padding: 7px 11px;
    border-radius: 9px;
    background: #edf5ff;
}

.fast-games-screen-balance small,
.fast-games-screen-balance strong {
    display: block;
}

.fast-games-screen-balance small {
    color: #8290a5;
    font-size: 7px;
}

.fast-games-screen-balance strong {
    margin-top: 2px;
    color: #1c5eaf;
    font-size: 10px;
}

.fast-games-screen-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #237fce;
    background: #edf5ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fast-games-screen-body {
    min-height: 440px;
    padding: 20px;
}

.fast-games-hero-panel {
    min-height: 165px;
    padding: 24px;
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(74, 222, 235, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #0b386e, #2485c5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.fast-games-hero-panel small,
.fast-games-hero-panel strong {
    display: block;
}

.fast-games-hero-panel small {
    color: #77e6ed;
    font-size: 8px;
    font-weight: 700;
}

.fast-games-hero-panel strong {
    max-width: 300px;
    margin-top: 7px;
    font-size: 18px;
}

.fast-games-hero-panel p {
    max-width: 300px;
    margin-top: 7px;
    color: #c5d9ec;
    font-size: 9px;
}

.fast-games-hero-panel button {
    margin-top: 14px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    color: #0b386e;
    background: #ffffff;
    font-size: 8px;
    font-weight: 700;
}

.fast-games-rocket-visual {
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 24px 42px rgba(4, 26, 60, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    transform: rotate(-8deg);
}

.fast-games-category-tabs {
    margin: 14px 0;
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.fast-games-category-tabs span {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #dfe7f0;
    border-radius: 9px;
    color: #69778c;
    background: #ffffff;
    font-size: 8px;
    font-weight: 600;
}

.fast-games-category-tabs span.active {
    color: #1d6fbd;
    border-color: #bdd7f4;
    background: #edf6ff;
}

.fast-games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.fast-game-item {
    min-height: 125px;
    padding: 13px;
    border-radius: 13px;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}

.fast-game-item i {
    margin-bottom: auto;
    font-size: 25px;
}

.fast-game-item strong,
.fast-game-item small {
    display: block;
}

.fast-game-item strong {
    font-size: 9px;
}

.fast-game-item small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 7px;
}

.fast-game-item-purple {
    background: linear-gradient(145deg, #4e2399, #9f4dd7);
}

.fast-game-item-blue {
    background: linear-gradient(145deg, #124d8c, #2e95c4);
}

.fast-game-item-orange {
    background: linear-gradient(145deg, #954709, #e8971c);
}

.fast-game-item-green {
    background: linear-gradient(145deg, #08705f, #2db795);
}

.fast-games-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 190px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(6, 34, 69, 0.24);
    display: flex;
    align-items: center;
    gap: 11px;
}

.fast-games-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #2485d3, #28c1cd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fast-games-floating-card strong,
.fast-games-floating-card small {
    display: block;
}

.fast-games-floating-card strong {
    color: #10213f;
    font-size: 11px;
    font-weight: 700;
}

.fast-games-floating-card small {
    margin-top: 3px;
    color: #68768a;
    font-size: 8px;
}

.fast-games-speed-card {
    top: 30px;
    right: -12px;
}

.fast-games-mobile-card {
    left: -14px;
    bottom: 35px;
}

/* Fast game type cards */

.fast-games-types-section {
    padding: 110px 0;
    background: #ffffff;
}

.fast-games-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.fast-games-type-card {
    min-height: 220px;
    padding: 28px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(20, 37, 70, 0.14);
    transition: 0.28s ease;
}

.fast-games-type-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 62px rgba(20, 37, 70, 0.20);
}

.fast-games-type-card > span {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.fast-games-type-card h3 {
    margin-top: 38px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.fast-games-type-card p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.65;
}

.fast-games-type-blue {
    background: linear-gradient(135deg, #0b3d78, #268dc6);
}

.fast-games-type-purple {
    background: linear-gradient(135deg, #351064, #873bb8);
}

.fast-games-type-orange {
    background: linear-gradient(135deg, #713a05, #d98b16);
}

.fast-games-type-green {
    background: linear-gradient(135deg, #064c42, #17977e);
}

.fast-games-type-red {
    background: linear-gradient(135deg, #71192f, #cd455f);
}

.fast-games-type-cyan {
    background: linear-gradient(135deg, #075169, #1ba4b4);
}

/* Fast Games CTA */

.fast-games-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(66, 211, 235, 0.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071a3c 0%,
            #12467f 55%,
            #258cca 100%
        );
}

@media (max-width: 950px) {
    .fast-games-platform-screen {
        transform: none;
    }

    .fast-games-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .fast-games-screen-header {
        grid-template-columns: 1fr auto;
    }

    .fast-games-screen-balance {
        display: none;
    }

    .fast-games-screen-body {
        padding: 13px;
    }

    .fast-games-hero-panel {
        padding: 18px;
    }

    .fast-games-rocket-visual {
        width: 72px;
        height: 72px;
        font-size: 30px;
    }

    .fast-games-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fast-games-floating-card {
        display: none;
    }

    .fast-games-types-section {
        padding: 80px 0;
    }

    .fast-games-types-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   WHITE LABEL CRYPTO CASINO PAGE
========================================================= */

.crypto-casino-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(255, 191, 48, 0.21),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #19102d 0%,
            #402064 52%,
            #b4750b 100%
        );
}

.crypto-casino-glow-one {
    width: 550px;
    height: 550px;
    top: 90px;
    left: -180px;
    background: rgba(106, 53, 189, 0.28);
}

.crypto-casino-glow-two {
    width: 620px;
    height: 620px;
    top: 30px;
    right: -190px;
    background: rgba(255, 182, 40, 0.23);
}

.crypto-platform-screen {
    width: 100%;
    max-width: 690px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 25px;
    background: #f8f6fa;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.37);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.crypto-screen-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #e7e0ea;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.crypto-screen-brand {
    color: #26143b;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.crypto-screen-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #6530b0, #d28a12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crypto-screen-wallet {
    padding: 7px 11px;
    border-radius: 9px;
    background: #fff4d9;
}

.crypto-screen-wallet small,
.crypto-screen-wallet strong {
    display: block;
}

.crypto-screen-wallet small {
    color: #94763b;
    font-size: 7px;
}

.crypto-screen-wallet strong {
    margin-top: 2px;
    color: #a76a00;
    font-size: 10px;
}

.crypto-screen-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #874cb6;
    background: #f4ebfb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crypto-screen-body {
    min-height: 440px;
    padding: 20px;
}

.crypto-screen-banner {
    min-height: 165px;
    padding: 24px;
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 195, 57, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #331550, #8a5710);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.crypto-screen-banner small,
.crypto-screen-banner strong {
    display: block;
}

.crypto-screen-banner small {
    color: #ffd987;
    font-size: 8px;
    font-weight: 700;
}

.crypto-screen-banner strong {
    max-width: 315px;
    margin-top: 7px;
    font-size: 18px;
}

.crypto-screen-banner p {
    max-width: 300px;
    margin-top: 7px;
    color: #e4d2e8;
    font-size: 9px;
}

.crypto-screen-banner button {
    margin-top: 14px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    color: #4a285b;
    background: #ffffff;
    font-size: 8px;
    font-weight: 700;
}

.crypto-coin-visual {
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    color: #ffd168;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 24px 42px rgba(27, 8, 35, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    transform: rotate(-7deg);
}

.crypto-currency-row {
    margin: 14px 0;
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.crypto-currency-row span {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #e4dce9;
    border-radius: 9px;
    color: #74667f;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    font-weight: 600;
}

.crypto-currency-row span.active {
    color: #a46800;
    border-color: #ead29c;
    background: #fff5dc;
}

.crypto-game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.crypto-game-card {
    min-height: 125px;
    padding: 13px;
    border-radius: 13px;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}

.crypto-game-card i {
    margin-bottom: auto;
    font-size: 25px;
}

.crypto-game-card strong,
.crypto-game-card small {
    display: block;
}

.crypto-game-card strong {
    font-size: 9px;
}

.crypto-game-card small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 7px;
}

.crypto-game-purple {
    background: linear-gradient(145deg, #4b1f7e, #9946c5);
}

.crypto-game-gold {
    background: linear-gradient(145deg, #745005, #d89618);
}

.crypto-game-blue {
    background: linear-gradient(145deg, #153f78, #2a8cbc);
}

.crypto-game-green {
    background: linear-gradient(145deg, #075a4d, #24aa8d);
}

.crypto-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 205px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(29, 13, 42, 0.26);
    display: flex;
    align-items: center;
    gap: 11px;
}

.crypto-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #6732aa, #cf8916);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crypto-floating-card strong,
.crypto-floating-card small {
    display: block;
}

.crypto-floating-card strong {
    color: #281739;
    font-size: 11px;
    font-weight: 700;
}

.crypto-floating-card small {
    margin-top: 3px;
    color: #75677f;
    font-size: 8px;
}

.crypto-wallet-card {
    top: 30px;
    right: -12px;
}

.crypto-security-card {
    left: -14px;
    bottom: 35px;
}

.crypto-capabilities-section {
    padding: 110px 0;
    background: #ffffff;
}

.crypto-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.crypto-capabilities-grid div {
    min-height: 140px;
    padding: 20px;
    border: 1px solid #e4ddec;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #fbf7ff);
    box-shadow: 0 13px 30px rgba(59, 31, 84, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    transition: 0.25s ease;
}

.crypto-capabilities-grid div:hover {
    transform: translateY(-6px);
    border-color: #d3b7ea;
    box-shadow: 0 23px 48px rgba(59, 31, 84, 0.13);
}

.crypto-capabilities-grid i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #6935ae, #d58b13);
    box-shadow: 0 12px 22px rgba(92, 50, 132, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.crypto-capabilities-grid span {
    color: #28183c;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.crypto-casino-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 194, 55, 0.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #1b0c2e 0%,
            #4c266b 55%,
            #a36a0a 100%
        );
}

@media (max-width: 950px) {
    .crypto-platform-screen {
        transform: none;
    }

    .crypto-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .crypto-screen-header {
        grid-template-columns: 1fr auto;
    }

    .crypto-screen-wallet {
        display: none;
    }

    .crypto-screen-body {
        padding: 13px;
    }

    .crypto-screen-banner {
        padding: 18px;
    }

    .crypto-coin-visual {
        width: 72px;
        height: 72px;
        font-size: 36px;
    }

    .crypto-game-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .crypto-floating-card {
        display: none;
    }

    .crypto-capabilities-section {
        padding: 80px 0;
    }

    .crypto-capabilities-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   WHITE LABEL ONLINE LOTTERY PAGE
========================================================= */

.lottery-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(62, 224, 218, 0.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #062735 0%,
            #07586c 52%,
            #14a6a4 100%
        );
}

.lottery-glow-one {
    width: 550px;
    height: 550px;
    top: 90px;
    left: -180px;
    background: rgba(30, 137, 176, 0.28);
}

.lottery-glow-two {
    width: 620px;
    height: 620px;
    top: 30px;
    right: -190px;
    background: rgba(55, 222, 202, 0.24);
}

.lottery-platform-screen {
    width: 100%;
    max-width: 690px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 25px;
    background: #f5f9fa;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.lottery-screen-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #dfe9eb;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.lottery-screen-brand {
    color: #12323a;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.lottery-screen-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #0b7890, #26bbb2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lottery-screen-balance {
    padding: 7px 11px;
    border-radius: 9px;
    background: #eaf9f7;
}

.lottery-screen-balance small,
.lottery-screen-balance strong {
    display: block;
}

.lottery-screen-balance small {
    color: #688b8d;
    font-size: 7px;
}

.lottery-screen-balance strong {
    margin-top: 2px;
    color: #087e81;
    font-size: 10px;
}

.lottery-screen-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #087f88;
    background: #eaf9f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lottery-screen-body {
    min-height: 450px;
    padding: 20px;
}

.lottery-screen-banner {
    min-height: 160px;
    padding: 24px;
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(89, 235, 216, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #07516b, #0f9a99);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lottery-screen-banner small,
.lottery-screen-banner strong {
    display: block;
}

.lottery-screen-banner small {
    color: #8cf1e7;
    font-size: 8px;
    font-weight: 700;
}

.lottery-screen-banner strong {
    margin-top: 7px;
    font-size: 19px;
}

.lottery-screen-banner p {
    max-width: 300px;
    margin-top: 7px;
    color: #c7e4e5;
    font-size: 9px;
}

.lottery-screen-banner button {
    margin-top: 14px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    color: #07516b;
    background: #ffffff;
    font-size: 8px;
    font-weight: 700;
}

.lottery-ticket-visual {
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 24px 42px rgba(5, 35, 45, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    transform: rotate(-8deg);
}

.lottery-draw-row {
    margin-top: 13px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.lottery-draw-row div {
    padding: 12px;
    border: 1px solid #dfe9eb;
    border-radius: 11px;
    background: #ffffff;
    text-align: center;
}

.lottery-draw-row small,
.lottery-draw-row strong {
    display: block;
}

.lottery-draw-row small {
    color: #849396;
    font-size: 7px;
}

.lottery-draw-row strong {
    margin-top: 4px;
    color: #12383d;
    font-size: 10px;
}

.lottery-number-panel {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #dfe9eb;
    border-radius: 13px;
    background: #ffffff;
}

.lottery-number-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lottery-number-heading strong {
    color: #12383d;
    font-size: 10px;
}

.lottery-number-heading span {
    color: #7b8c90;
    font-size: 7px;
}

.lottery-number-grid {
    margin-top: 11px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}

.lottery-number-grid span {
    min-height: 28px;
    border-radius: 7px;
    color: #65777b;
    background: #edf4f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
}

.lottery-number-grid span.active {
    color: #ffffff;
    background: linear-gradient(135deg, #087f91, #26bbae);
}

.lottery-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 205px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(5, 42, 52, 0.25);
    display: flex;
    align-items: center;
    gap: 11px;
}

.lottery-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #087e95, #26bbb0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lottery-floating-card strong,
.lottery-floating-card small {
    display: block;
}

.lottery-floating-card strong {
    color: #12343c;
    font-size: 11px;
    font-weight: 700;
}

.lottery-floating-card small {
    margin-top: 3px;
    color: #688085;
    font-size: 8px;
}

.lottery-draw-card {
    top: 30px;
    right: -12px;
}

.lottery-ticket-card {
    left: -14px;
    bottom: 35px;
}

.lottery-capabilities-section {
    padding: 110px 0;
    background: #ffffff;
}

.lottery-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.lottery-capabilities-grid div {
    min-height: 140px;
    padding: 20px;
    border: 1px solid #dce9e9;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #f5fbfb);
    box-shadow: 0 13px 30px rgba(22, 75, 81, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    transition: 0.25s ease;
}

.lottery-capabilities-grid div:hover {
    transform: translateY(-6px);
    border-color: #aedddb;
    box-shadow: 0 23px 48px rgba(22, 75, 81, 0.13);
}

.lottery-capabilities-grid i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #087f95, #27bbae);
    box-shadow: 0 12px 22px rgba(11, 133, 145, 0.21);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.lottery-capabilities-grid span {
    color: #12343c;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.lottery-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(68, 231, 211, 0.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #062735 0%,
            #075f70 55%,
            #14a7a3 100%
        );
}

@media (max-width: 950px) {
    .lottery-platform-screen {
        transform: none;
    }

    .lottery-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .lottery-screen-header {
        grid-template-columns: 1fr auto;
    }

    .lottery-screen-balance {
        display: none;
    }

    .lottery-screen-body {
        padding: 13px;
    }

    .lottery-screen-banner {
        padding: 18px;
    }

    .lottery-ticket-visual {
        width: 72px;
        height: 72px;
        font-size: 32px;
    }

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

    .lottery-number-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lottery-floating-card {
        display: none;
    }

    .lottery-capabilities-section {
        padding: 80px 0;
    }

    .lottery-capabilities-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TURNKEY IGAMING PLATFORM PAGE
========================================================= */

.turnkey-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(93, 122, 255, 0.25),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #08152f 0%,
            #182f69 52%,
            #5b42b8 100%
        );
}

.turnkey-glow-one {
    width: 550px;
    height: 550px;
    top: 90px;
    left: -180px;
    background: rgba(48, 104, 224, 0.28);
}

.turnkey-glow-two {
    width: 620px;
    height: 620px;
    top: 30px;
    right: -190px;
    background: rgba(151, 79, 224, 0.24);
}

.turnkey-platform-screen {
    width: 100%;
    max-width: 700px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 25px;
    background: #f4f6fb;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.36);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.turnkey-screen-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #dfe5f0;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.turnkey-screen-brand {
    color: #152445;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.turnkey-screen-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #2b6ed4, #7849c4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-screen-status {
    padding: 8px 11px;
    border-radius: 100px;
    color: #147c67;
    background: #e9f8f4;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-screen-status i {
    color: #1caf91;
    font-size: 6px;
}

.turnkey-screen-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #4f57b5;
    background: #eef0ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-screen-body {
    min-height: 455px;
    display: grid;
    grid-template-columns: 58px 1fr;
}

.turnkey-sidebar {
    padding: 16px 10px;
    border-right: 1px solid #dfe5f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.turnkey-sidebar span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #8490a5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.turnkey-sidebar span.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2d6fd3, #744bc0);
}

.turnkey-dashboard {
    padding: 20px;
}

.turnkey-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.turnkey-dashboard-heading small,
.turnkey-dashboard-heading strong {
    display: block;
}

.turnkey-dashboard-heading small {
    color: #738096;
    font-size: 7px;
    font-weight: 700;
}

.turnkey-dashboard-heading strong {
    margin-top: 4px;
    color: #162543;
    font-size: 16px;
}

.turnkey-dashboard-heading button {
    padding: 8px 11px;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2f70d2, #714abc);
    font-size: 8px;
    font-weight: 700;
}

.turnkey-summary-grid {
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.turnkey-summary-grid > div {
    min-height: 105px;
    padding: 13px;
    border: 1px solid #dfe5f0;
    border-radius: 13px;
    background: #ffffff;
}

.turnkey-summary-grid span {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #3573d1, #7650bd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.turnkey-summary-grid small,
.turnkey-summary-grid strong {
    display: block;
}

.turnkey-summary-grid small {
    margin-top: 11px;
    color: #7c899c;
    font-size: 7px;
}

.turnkey-summary-grid strong {
    margin-top: 4px;
    color: #162543;
    font-size: 14px;
}

.turnkey-dashboard-lower {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 10px;
}

.turnkey-revenue-chart,
.turnkey-product-panel {
    min-height: 210px;
    padding: 14px;
    border: 1px solid #dfe5f0;
    border-radius: 13px;
    background: #ffffff;
}

.turnkey-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.turnkey-panel-heading strong {
    color: #162543;
    font-size: 9px;
}

.turnkey-panel-heading span {
    color: #8490a5;
    font-size: 7px;
}

.turnkey-chart-bars {
    height: 145px;
    margin-top: 17px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.turnkey-chart-bars span {
    flex: 1;
    min-height: 20px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #7650c1, #3272d2);
}

.turnkey-product-row {
    margin-top: 11px;
    padding: 10px;
    border-radius: 9px;
    background: #f4f6fb;
    display: flex;
    align-items: center;
    gap: 9px;
}

.turnkey-product-row > i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #3472d1, #7450bf);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.turnkey-product-row strong,
.turnkey-product-row small {
    display: block;
}

.turnkey-product-row strong {
    color: #182743;
    font-size: 8px;
}

.turnkey-product-row small {
    margin-top: 2px;
    color: #1b987e;
    font-size: 6px;
}

.turnkey-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 205px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(13, 28, 68, 0.26);
    display: flex;
    align-items: center;
    gap: 11px;
}

.turnkey-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #3271d1, #7650c1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-floating-card strong,
.turnkey-floating-card small {
    display: block;
}

.turnkey-floating-card strong {
    color: #182640;
    font-size: 11px;
    font-weight: 700;
}

.turnkey-floating-card small {
    margin-top: 3px;
    color: #6f7b8e;
    font-size: 8px;
}

.turnkey-products-card {
    top: 30px;
    right: -12px;
}

.turnkey-control-card {
    left: -14px;
    bottom: 35px;
}

.turnkey-products-section {
    padding: 110px 0;
    background: #ffffff;
}

.turnkey-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.turnkey-product-card {
    min-height: 220px;
    padding: 28px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(26, 38, 78, 0.14);
    transition: 0.28s ease;
}

.turnkey-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 62px rgba(26, 38, 78, 0.21);
}

.turnkey-product-card > span {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.turnkey-product-card h3 {
    margin-top: 37px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.turnkey-product-card p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.65;
}

.turnkey-product-blue {
    background: linear-gradient(135deg, #0d3c7a, #287fc1);
}

.turnkey-product-purple {
    background: linear-gradient(135deg, #351064, #8239b6);
}

.turnkey-product-cyan {
    background: linear-gradient(135deg, #07516a, #1ba5b5);
}

.turnkey-product-orange {
    background: linear-gradient(135deg, #713a05, #d98c17);
}

.turnkey-product-green {
    background: linear-gradient(135deg, #064c42, #17967e);
}

.turnkey-product-gold {
    background: linear-gradient(135deg, #5c3503, #bb7810);
}

.turnkey-process-section {
    padding: 110px 0;
    background: #f6f8fd;
}

.turnkey-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.turnkey-process-grid article {
    position: relative;
    min-height: 280px;
    padding: 28px 24px;
    border: 1px solid #dfe5f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(28, 47, 89, 0.07);
    overflow: hidden;
}

.turnkey-process-grid article > span {
    position: absolute;
    top: 16px;
    right: 18px;
    color: #e1e7f3;
    font-family: "Sora", sans-serif;
    font-size: 42px;
    font-weight: 700;
}

.turnkey-process-grid article i {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #3271d1, #7650c1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.turnkey-process-grid h3 {
    margin-top: 62px;
    color: #172642;
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.turnkey-process-grid p {
    margin-top: 10px;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.turnkey-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(162, 94, 232, 0.31),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #08152f 0%,
            #1e3b76 55%,
            #6744b8 100%
        );
}

@media (max-width: 950px) {
    .turnkey-platform-screen {
        transform: none;
    }

    .turnkey-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .turnkey-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .turnkey-screen-header {
        grid-template-columns: 1fr auto;
    }

    .turnkey-screen-status {
        display: none;
    }

    .turnkey-screen-body {
        grid-template-columns: 45px 1fr;
    }

    .turnkey-dashboard {
        padding: 12px;
    }

    .turnkey-summary-grid {
        grid-template-columns: 1fr;
    }

    .turnkey-dashboard-lower {
        grid-template-columns: 1fr;
    }

    .turnkey-product-panel {
        display: none;
    }

    .turnkey-floating-card {
        display: none;
    }

    .turnkey-products-section,
    .turnkey-process-section {
        padding: 80px 0;
    }

    .turnkey-products-grid,
    .turnkey-process-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TURNKEY SPORTSBOOK PAGE
========================================================= */

.turnkey-sportsbook-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(255, 185, 43, 0.24),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #151a2e 0%,
            #394268 52%,
            #d58b00 100%
        );
}

.turnkey-sportsbook-glow-one {
    width: 550px;
    height: 550px;
    top: 90px;
    left: -180px;
    background: rgba(47, 90, 185, 0.27);
}

.turnkey-sportsbook-glow-two {
    width: 620px;
    height: 620px;
    top: 30px;
    right: -190px;
    background: rgba(255, 184, 31, 0.24);
}

.turnkey-sportsbook-screen {
    width: 100%;
    max-width: 700px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 25px;
    background: #f4f6fa;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.37);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.turnkey-sportsbook-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #dfe4ed;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.turnkey-sportsbook-brand {
    color: #18233e;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.turnkey-sportsbook-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #243f84, #d58d06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-sportsbook-live {
    padding: 8px 11px;
    border-radius: 100px;
    color: #19765f;
    background: #e9f8f3;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-sportsbook-live i {
    color: #1db08d;
    font-size: 6px;
}

.turnkey-sportsbook-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #9b6703;
    background: #fff4d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-sportsbook-body {
    min-height: 455px;
    display: grid;
    grid-template-columns: 58px 1fr;
}

.turnkey-sportsbook-sidebar {
    padding: 16px 10px;
    border-right: 1px solid #dfe4ed;
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.turnkey-sportsbook-sidebar span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #8490a5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.turnkey-sportsbook-sidebar span.active {
    color: #ffffff;
    background: linear-gradient(135deg, #29498c, #d68d06);
}

.turnkey-sportsbook-content {
    padding: 20px;
}

.turnkey-sportsbook-banner {
    min-height: 155px;
    padding: 24px;
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 200, 73, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #172a59, #ad7005);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.turnkey-sportsbook-banner small,
.turnkey-sportsbook-banner strong {
    display: block;
}

.turnkey-sportsbook-banner small {
    color: #ffda82;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-sportsbook-banner strong {
    margin-top: 7px;
    font-size: 19px;
}

.turnkey-sportsbook-banner p {
    max-width: 310px;
    margin-top: 7px;
    color: #d5dce9;
    font-size: 9px;
}

.turnkey-sportsbook-banner button {
    margin-top: 14px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    color: #172a59;
    background: #ffffff;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-sportsbook-ball {
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 24px 42px rgba(17, 24, 43, 0.27);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    transform: rotate(-8deg);
}

.turnkey-sportsbook-tabs {
    margin: 14px 0;
    display: flex;
    gap: 8px;
}

.turnkey-sportsbook-tabs span {
    padding: 8px 11px;
    border: 1px solid #dfe4ed;
    border-radius: 9px;
    color: #6d788b;
    background: #ffffff;
    font-size: 8px;
    font-weight: 600;
}

.turnkey-sportsbook-tabs span.active {
    color: #9e6800;
    border-color: #ead09b;
    background: #fff5dc;
}

.turnkey-sportsbook-market {
    padding: 15px;
    border: 1px solid #dfe4ed;
    border-radius: 14px;
    background: #ffffff;
}

.turnkey-sportsbook-market-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.turnkey-sportsbook-market-heading small,
.turnkey-sportsbook-market-heading strong {
    display: block;
}

.turnkey-sportsbook-market-heading small {
    color: #9a6a0c;
    font-size: 7px;
    font-weight: 700;
}

.turnkey-sportsbook-market-heading strong {
    margin-top: 4px;
    color: #17233d;
    font-size: 11px;
}

.turnkey-sportsbook-market-heading > span {
    padding: 6px 8px;
    border-radius: 7px;
    color: #ffffff;
    background: #d99007;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-sportsbook-teams {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.turnkey-sportsbook-teams strong,
.turnkey-sportsbook-teams small {
    display: block;
}

.turnkey-sportsbook-teams strong {
    color: #17233d;
    font-size: 10px;
}

.turnkey-sportsbook-teams small {
    margin-top: 3px;
    color: #8994a6;
    font-size: 7px;
}

.turnkey-sportsbook-teams b {
    color: #273b68;
    font-size: 15px;
}

.turnkey-sportsbook-odds {
    margin-top: 13px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.turnkey-sportsbook-odds button {
    padding: 9px;
    border: none;
    border-radius: 8px;
    color: #223251;
    background: #edf1f7;
}

.turnkey-sportsbook-odds small,
.turnkey-sportsbook-odds strong {
    display: block;
}

.turnkey-sportsbook-odds small {
    font-size: 7px;
}

.turnkey-sportsbook-odds strong {
    margin-top: 3px;
    font-size: 10px;
}

.turnkey-sportsbook-floating {
    position: absolute;
    z-index: 4;
    min-width: 215px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(20, 27, 48, 0.27);
    display: flex;
    align-items: center;
    gap: 11px;
}

.turnkey-sportsbook-floating > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #29488a, #d68e07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-sportsbook-floating strong,
.turnkey-sportsbook-floating small {
    display: block;
}

.turnkey-sportsbook-floating strong {
    color: #18243d;
    font-size: 11px;
    font-weight: 700;
}

.turnkey-sportsbook-floating small {
    margin-top: 3px;
    color: #6f7b8e;
    font-size: 8px;
}

.turnkey-sportsbook-risk-card {
    top: 30px;
    right: -12px;
}

.turnkey-sportsbook-market-card {
    left: -14px;
    bottom: 35px;
}

.turnkey-sportsbook-capabilities-section {
    padding: 110px 0;
    background: #ffffff;
}

.turnkey-sportsbook-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.turnkey-sportsbook-capabilities-grid div {
    min-height: 140px;
    padding: 20px;
    border: 1px solid #e3e2dc;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #fffaf0);
    box-shadow: 0 13px 30px rgba(64, 48, 18, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    transition: 0.25s ease;
}

.turnkey-sportsbook-capabilities-grid div:hover {
    transform: translateY(-6px);
    border-color: #e5c989;
    box-shadow: 0 23px 48px rgba(64, 48, 18, 0.13);
}

.turnkey-sportsbook-capabilities-grid i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #29498c, #d68e07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.turnkey-sportsbook-capabilities-grid span {
    color: #19243c;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.turnkey-sportsbook-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 194, 55, 0.31),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #151a2e 0%,
            #3b456c 55%,
            #bd7b06 100%
        );
}

@media (max-width: 950px) {
    .turnkey-sportsbook-screen {
        transform: none;
    }

    .turnkey-sportsbook-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .turnkey-sportsbook-header {
        grid-template-columns: 1fr auto;
    }

    .turnkey-sportsbook-live {
        display: none;
    }

    .turnkey-sportsbook-body {
        grid-template-columns: 45px 1fr;
    }

    .turnkey-sportsbook-content {
        padding: 12px;
    }

    .turnkey-sportsbook-banner {
        padding: 18px;
    }

    .turnkey-sportsbook-ball {
        width: 70px;
        height: 70px;
        font-size: 31px;
    }

    .turnkey-sportsbook-floating {
        display: none;
    }

    .turnkey-sportsbook-capabilities-section {
        padding: 80px 0;
    }

    .turnkey-sportsbook-capabilities-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   TURNKEY CASINO PAGE
========================================================= */

.turnkey-casino-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(255, 91, 145, 0.23),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #21091c 0%,
            #5a1739 52%,
            #c93652 100%
        );
}

.turnkey-casino-glow-one {
    width: 550px;
    height: 550px;
    top: 90px;
    left: -180px;
    background: rgba(132, 44, 155, 0.28);
}

.turnkey-casino-glow-two {
    width: 620px;
    height: 620px;
    top: 30px;
    right: -190px;
    background: rgba(255, 72, 127, 0.24);
}

.turnkey-casino-screen {
    width: 100%;
    max-width: 700px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 25px;
    background: #f8f4f7;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.turnkey-casino-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #e7dfe5;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.turnkey-casino-brand {
    color: #32142b;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.turnkey-casino-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #7d246d, #db405e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-casino-status {
    padding: 8px 11px;
    border-radius: 100px;
    color: #16775f;
    background: #e9f8f3;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-casino-status i {
    color: #1db08d;
    font-size: 6px;
}

.turnkey-casino-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ad3153;
    background: #fdebf1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-casino-body {
    min-height: 455px;
    display: grid;
    grid-template-columns: 58px 1fr;
}

.turnkey-casino-sidebar {
    padding: 16px 10px;
    border-right: 1px solid #e7dfe5;
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.turnkey-casino-sidebar span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #8d8090;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.turnkey-casino-sidebar span.active {
    color: #ffffff;
    background: linear-gradient(135deg, #7f246d, #da405e);
}

.turnkey-casino-content {
    padding: 20px;
}

.turnkey-casino-banner {
    min-height: 155px;
    padding: 24px;
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 118, 157, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #4a1241, #b92f4d);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.turnkey-casino-banner small,
.turnkey-casino-banner strong {
    display: block;
}

.turnkey-casino-banner small {
    color: #ffabc2;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-casino-banner strong {
    margin-top: 7px;
    font-size: 19px;
}

.turnkey-casino-banner p {
    max-width: 310px;
    margin-top: 7px;
    color: #ead4df;
    font-size: 9px;
}

.turnkey-casino-banner button {
    margin-top: 14px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    color: #5a163f;
    background: #ffffff;
    font-size: 8px;
    font-weight: 700;
}

.turnkey-casino-dice {
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 24px 42px rgba(41, 8, 31, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    transform: rotate(-8deg);
}

.turnkey-casino-tabs {
    margin: 14px 0;
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.turnkey-casino-tabs span {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #e7dfe5;
    border-radius: 9px;
    color: #796c78;
    background: #ffffff;
    font-size: 8px;
    font-weight: 600;
}

.turnkey-casino-tabs span.active {
    color: #b12e51;
    border-color: #efb5c6;
    background: #fff0f5;
}

.turnkey-casino-games {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.turnkey-casino-game {
    min-height: 125px;
    padding: 13px;
    border-radius: 13px;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}

.turnkey-casino-game i {
    margin-bottom: auto;
    font-size: 25px;
}

.turnkey-casino-game strong,
.turnkey-casino-game small {
    display: block;
}

.turnkey-casino-game strong {
    font-size: 9px;
}

.turnkey-casino-game small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 7px;
}

.turnkey-casino-game-purple {
    background: linear-gradient(145deg, #54209d, #a84bd6);
}

.turnkey-casino-game-red {
    background: linear-gradient(145deg, #801a43, #d74768);
}

.turnkey-casino-game-blue {
    background: linear-gradient(145deg, #145292, #319bc7);
}

.turnkey-casino-game-green {
    background: linear-gradient(145deg, #08735f, #30b494);
}

.turnkey-casino-floating {
    position: absolute;
    z-index: 4;
    min-width: 215px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(50, 15, 41, 0.27);
    display: flex;
    align-items: center;
    gap: 11px;
}

.turnkey-casino-floating > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #81256e, #da405e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turnkey-casino-floating strong,
.turnkey-casino-floating small {
    display: block;
}

.turnkey-casino-floating strong {
    color: #35152d;
    font-size: 11px;
    font-weight: 700;
}

.turnkey-casino-floating small {
    margin-top: 3px;
    color: #7c6d79;
    font-size: 8px;
}

.turnkey-casino-content-card {
    top: 30px;
    right: -12px;
}

.turnkey-casino-control-card {
    left: -14px;
    bottom: 35px;
}

.turnkey-casino-categories-section,
.turnkey-casino-capabilities-section {
    padding: 110px 0;
    background: #ffffff;
}

.turnkey-casino-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.turnkey-casino-category {
    min-height: 220px;
    padding: 28px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(52, 22, 48, 0.14);
    transition: 0.28s ease;
}

.turnkey-casino-category:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 62px rgba(52, 22, 48, 0.21);
}

.turnkey-casino-category > span {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.turnkey-casino-category h3 {
    margin-top: 37px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.turnkey-casino-category p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.65;
}

.turnkey-casino-category-purple {
    background: linear-gradient(135deg, #351064, #8239b6);
}

.turnkey-casino-category-red {
    background: linear-gradient(135deg, #71162e, #c8425b);
}

.turnkey-casino-category-blue {
    background: linear-gradient(135deg, #0d3d78, #248cc0);
}

.turnkey-casino-category-gold {
    background: linear-gradient(135deg, #6b4200, #c98308);
}

.turnkey-casino-category-green {
    background: linear-gradient(135deg, #084b42, #16967e);
}

.turnkey-casino-category-cyan {
    background: linear-gradient(135deg, #07516b, #1aa8b8);
}

.turnkey-casino-capabilities-section {
    background: #f8f5f8;
}

.turnkey-casino-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.turnkey-casino-capabilities-grid div {
    min-height: 140px;
    padding: 20px;
    border: 1px solid #eadfe7;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 13px 30px rgba(67, 34, 59, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    transition: 0.25s ease;
}

.turnkey-casino-capabilities-grid div:hover {
    transform: translateY(-6px);
    border-color: #e7b6c7;
    box-shadow: 0 23px 48px rgba(67, 34, 59, 0.13);
}

.turnkey-casino-capabilities-grid i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #81256e, #da405e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.turnkey-casino-capabilities-grid span {
    color: #35152d;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.turnkey-casino-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 92, 143, 0.31),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #21091c 0%,
            #631a40 55%,
            #c93652 100%
        );
}

@media (max-width: 950px) {
    .turnkey-casino-screen {
        transform: none;
    }

    .turnkey-casino-categories-grid,
    .turnkey-casino-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .turnkey-casino-header {
        grid-template-columns: 1fr auto;
    }

    .turnkey-casino-status {
        display: none;
    }

    .turnkey-casino-body {
        grid-template-columns: 45px 1fr;
    }

    .turnkey-casino-content {
        padding: 12px;
    }

    .turnkey-casino-banner {
        padding: 18px;
    }

    .turnkey-casino-dice {
        width: 70px;
        height: 70px;
        font-size: 31px;
    }

    .turnkey-casino-games {
        grid-template-columns: repeat(2, 1fr);
    }

    .turnkey-casino-floating {
        display: none;
    }

    .turnkey-casino-categories-section,
    .turnkey-casino-capabilities-section {
        padding: 80px 0;
    }

    .turnkey-casino-categories-grid,
    .turnkey-casino-capabilities-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   API INTEGRATION SERVICES PAGE
========================================================= */

.api-integration-detail-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(61, 222, 195, 0.24),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #052b30 0%,
            #087568 52%,
            #27b99b 100%
        );
}

.api-integration-glow-one {
    width: 550px;
    height: 550px;
    top: 90px;
    left: -180px;
    background: rgba(21, 153, 167, 0.28);
}

.api-integration-glow-two {
    width: 620px;
    height: 620px;
    top: 30px;
    right: -190px;
    background: rgba(61, 224, 187, 0.24);
}

.api-platform-screen {
    width: 100%;
    max-width: 700px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 25px;
    background: #f4faf9;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.36);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.api-screen-header {
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid #dce9e7;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.api-screen-brand {
    color: #123a38;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.api-screen-brand > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #07877f, #2fc3a2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.api-screen-status {
    padding: 8px 11px;
    border-radius: 100px;
    color: #16765f;
    background: #e8f8f3;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.api-screen-status i {
    color: #1cae8d;
    font-size: 6px;
}

.api-screen-profile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #087f76;
    background: #e7f8f4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.api-screen-body {
    min-height: 455px;
    padding: 20px;
}

.api-hub-center {
    position: relative;
    min-height: 310px;
    border: 1px solid #dce9e7;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at center,
            rgba(39, 185, 155, 0.13),
            transparent 38%
        ),
        #ffffff;
    overflow: hidden;
}

.api-hub-center::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    top: 50%;
    left: 50%;
    border: 1px dashed #aedbd3;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.api-hub-center::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    top: 50%;
    left: 50%;
    border: 1px solid #d5e9e5;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.api-hub-logo {
    position: absolute;
    z-index: 5;
    width: 118px;
    height: 118px;
    top: 50%;
    left: 50%;
    border-radius: 30px;
    color: #ffffff;
    background: linear-gradient(135deg, #087f79, #2abb9d);
    box-shadow: 0 25px 45px rgba(8, 127, 121, 0.27);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate(-50%, -50%);
}

.api-hub-logo > span {
    font-family: "Sora", sans-serif;
    font-size: 28px;
    font-weight: 700;
}

.api-hub-logo strong {
    margin-top: 5px;
    font-size: 9px;
}

.api-hub-logo small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 6px;
}

.api-node {
    position: absolute;
    z-index: 4;
    min-width: 98px;
    padding: 11px;
    border: 1px solid #dce9e7;
    border-radius: 12px;
    color: #18423f;
    background: #ffffff;
    box-shadow: 0 12px 25px rgba(29, 78, 73, 0.10);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.api-node i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #0a877f, #2bc0a0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.api-node-sportsbook {
    top: 31px;
    left: 35px;
}

.api-node-casino {
    top: 31px;
    right: 35px;
}

.api-node-payments {
    bottom: 31px;
    left: 35px;
}

.api-node-kyc {
    right: 35px;
    bottom: 31px;
}

.api-connection-line {
    position: absolute;
    z-index: 2;
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, #b8dfd8, #2bb99c);
    transform-origin: left center;
}

.api-line-one {
    top: 88px;
    left: 130px;
    transform: rotate(25deg);
}

.api-line-two {
    top: 88px;
    right: 130px;
    transform: rotate(155deg);
}

.api-line-three {
    bottom: 88px;
    left: 130px;
    transform: rotate(-25deg);
}

.api-line-four {
    right: 130px;
    bottom: 88px;
    transform: rotate(205deg);
}

.api-status-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.api-status-grid > div {
    min-height: 70px;
    padding: 12px;
    border: 1px solid #dce9e7;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 9px;
}

.api-status-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.api-status-success {
    background: linear-gradient(135deg, #07977f, #2cc39e);
}

.api-status-sync {
    background: linear-gradient(135deg, #2477c8, #35a6d8);
}

.api-status-grid small,
.api-status-grid strong {
    display: block;
}

.api-status-grid small {
    color: #7b8d8b;
    font-size: 7px;
}

.api-status-grid strong {
    margin-top: 3px;
    color: #16413d;
    font-size: 9px;
}

.api-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 215px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(7, 55, 51, 0.26);
    display: flex;
    align-items: center;
    gap: 11px;
}

.api-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #07877f, #2fc3a2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.api-floating-card strong,
.api-floating-card small {
    display: block;
}

.api-floating-card strong {
    color: #143d39;
    font-size: 11px;
    font-weight: 700;
}

.api-floating-card small {
    margin-top: 3px;
    color: #6b807d;
    font-size: 8px;
}

.api-security-card {
    top: 30px;
    right: -12px;
}

.api-monitoring-card {
    left: -14px;
    bottom: 35px;
}

.api-categories-section {
    padding: 110px 0;
    background: #ffffff;
}

.api-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.api-category-card {
    min-height: 220px;
    padding: 28px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(21, 57, 56, 0.14);
    transition: 0.28s ease;
}

.api-category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 62px rgba(21, 57, 56, 0.21);
}

.api-category-card > span {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.api-category-card h3 {
    margin-top: 37px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.api-category-card p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.65;
}

.api-category-teal {
    background: linear-gradient(135deg, #075148, #149b82);
}

.api-category-blue {
    background: linear-gradient(135deg, #0d3d78, #258bc2);
}

.api-category-purple {
    background: linear-gradient(135deg, #351064, #8239b6);
}

.api-category-orange {
    background: linear-gradient(135deg, #713a05, #d98c17);
}

.api-category-green {
    background: linear-gradient(135deg, #084b42, #16967e);
}

.api-category-cyan {
    background: linear-gradient(135deg, #07516b, #1aa8b8);
}

.api-process-section {
    padding: 110px 0;
    background: #f4faf9;
}

.api-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.api-process-grid article {
    position: relative;
    min-height: 280px;
    padding: 28px 24px;
    border: 1px solid #dce9e7;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(27, 73, 69, 0.07);
    overflow: hidden;
}

.api-process-grid article > span {
    position: absolute;
    top: 16px;
    right: 18px;
    color: #dcece9;
    font-family: "Sora", sans-serif;
    font-size: 42px;
    font-weight: 700;
}

.api-process-grid article i {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #07877f, #2fc3a2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.api-process-grid h3 {
    margin-top: 62px;
    color: #173f3b;
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.api-process-grid p {
    margin-top: 10px;
    color: #667b78;
    font-size: 12px;
    line-height: 1.7;
}

.api-technical-section {
    padding: 110px 0;
    background: #ffffff;
}

.api-technical-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

.api-technical-content h2 {
    max-width: 610px;
    margin-top: 16px;
    color: #102f31;
    font-family: "Sora", sans-serif;
    font-size: clamp(38px, 4.5vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.api-technical-content h2 span {
    color: #159b83;
}

.api-technical-content > p {
    max-width: 600px;
    margin-top: 20px;
    color: #667b78;
    font-size: 14px;
    line-height: 1.8;
}

.api-technical-list {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}

.api-technical-list div {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #314d4a;
    font-size: 13px;
    font-weight: 600;
}

.api-technical-list i {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #07877f, #2fc3a2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.api-code-window {
    border: 1px solid #203f43;
    border-radius: 22px;
    background: #071d23;
    box-shadow: 0 35px 75px rgba(7, 39, 42, 0.25);
    overflow: hidden;
}

.api-code-header {
    min-height: 58px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.api-code-header > div {
    display: flex;
    gap: 7px;
}

.api-code-header > div span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.api-code-header > div span:nth-child(1) {
    background: #ff6b6b;
}

.api-code-header > div span:nth-child(2) {
    background: #ffc857;
}

.api-code-header > div span:nth-child(3) {
    background: #2bd69f;
}

.api-code-header small {
    color: #82999d;
    font-size: 9px;
}

.api-code-body {
    min-height: 350px;
    padding: 40px 35px;
    color: #d8e4e5;
    font-size: 14px;
    line-height: 2;
    overflow-x: auto;
}

.api-code-key {
    color: #68d6c2;
}

.api-code-value {
    color: #ffd278;
}

.api-code-success {
    color: #50e3aa;
}

.api-code-bracket {
    color: #b996ff;
}

.api-code-footer {
    min-height: 62px;
    padding: 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: #8ba4a7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 9px;
}

.api-code-footer span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-code-footer i {
    color: #35d29d;
}

.api-code-footer strong {
    padding: 7px 10px;
    border-radius: 7px;
    color: #55d9ac;
    background: rgba(53, 210, 157, 0.10);
    font-size: 8px;
}

.api-integration-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(64, 230, 197, 0.31),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #052b30 0%,
            #087568 55%,
            #27b99b 100%
        );
}

@media (max-width: 950px) {
    .api-platform-screen {
        transform: none;
    }

    .api-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .api-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .api-technical-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

@media (max-width: 650px) {
    .api-screen-header {
        grid-template-columns: 1fr auto;
    }

    .api-screen-status {
        display: none;
    }

    .api-screen-body {
        padding: 12px;
    }

    .api-hub-center {
        min-height: 360px;
    }

    .api-hub-logo {
        width: 100px;
        height: 100px;
    }

    .api-node {
        min-width: 82px;
        padding: 8px;
    }

    .api-node span {
        font-size: 7px;
    }

    .api-node-sportsbook,
    .api-node-payments {
        left: 12px;
    }

    .api-node-casino,
    .api-node-kyc {
        right: 12px;
    }

    .api-connection-line {
        display: none;
    }

    .api-status-grid {
        grid-template-columns: 1fr;
    }

    .api-floating-card {
        display: none;
    }

    .api-categories-section,
    .api-process-section,
    .api-technical-section {
        padding: 80px 0;
    }

    .api-categories-grid,
    .api-process-grid {
        grid-template-columns: 1fr;
    }

    .api-code-body {
        padding: 28px 20px;
        font-size: 11px;
    }
}

/*!* =========================================================*/
/*   API HERO FONT & SCALE FIX*/
/*========================================================= *!*/

/*.api-integration-detail-hero .solution-detail-content h1 {*/
/*    max-width: 650px;*/
/*    font-size: clamp(52px, 4.6vw, 72px);*/
/*    line-height: 1.02;*/
/*    letter-spacing: -0.055em;*/
/*}*/

/*.api-integration-detail-hero .solution-detail-content > p {*/
/*    max-width: 620px;*/
/*    font-size: 13px;*/
/*    line-height: 1.65;*/
/*}*/

/*.api-integration-detail-hero .solution-detail-breadcrumb {*/
/*    margin-bottom: 22px;*/
/*}*/

/*.api-integration-detail-hero .solution-detail-label {*/
/*    margin-bottom: 16px;*/
/*}*/

/*.api-integration-detail-hero .solution-detail-actions {*/
/*    margin-top: 24px;*/
/*}*/

/*.api-integration-detail-hero .solution-detail-points {*/
/*    margin-top: 22px;*/
/*}*/

/*.api-integration-detail-hero .api-platform-screen {*/
/*    max-width: 620px;*/
/*}*/

/*.api-integration-detail-hero .api-screen-body {*/
/*    min-height: 405px;*/
/*    padding: 17px;*/
/*}*/

/*.api-integration-detail-hero .api-hub-center {*/
/*    min-height: 275px;*/
/*}*/

/*@media (max-height: 850px) and (min-width: 951px) {*/
/*    .api-integration-detail-hero .solution-detail-content h1 {*/
/*        font-size: clamp(48px, 4.2vw, 64px);*/
/*    }*/

/*    .api-integration-detail-hero .solution-detail-content > p {*/
/*        font-size: 12px;*/
/*    }*/

/*    .api-integration-detail-hero .api-platform-screen {*/
/*        max-width: 580px;*/
/*    }*/

/*    .api-integration-detail-hero .api-screen-body {*/
/*        min-height: 370px;*/
/*    }*/

/*    .api-integration-detail-hero .api-hub-center {*/
/*        min-height: 240px;*/
/*    }*/
/*}*/

/*@media (max-width: 650px) {*/
/*    .api-integration-detail-hero .solution-detail-content h1 {*/
/*        font-size: 42px;*/
/*        line-height: 1.04;*/
/*    }*/

/*    .api-integration-detail-hero .solution-detail-content > p {*/
/*        font-size: 13px;*/
/*    }*/
/*}*/


/* =========================================================
   ABOUT US PAGE
========================================================= */

.about-hero-section {
    position: relative;
    min-height: 940px;
    padding: 170px 0 110px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(70, 170, 255, 0.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #07172f 0%,
            #0d3d70 52%,
            #187f9d 100%
        );
    overflow: hidden;
}

.about-hero-background,
.about-hero-grid-pattern {
    position: absolute;
    inset: 0;
}

.about-hero-grid-pattern {
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        );
    background-size: 75px 75px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8),
        transparent
    );
}

.about-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.about-hero-glow-one {
    width: 580px;
    height: 580px;
    top: 100px;
    left: -200px;
    background: rgba(40, 91, 220, 0.28);
}

.about-hero-glow-two {
    width: 650px;
    height: 650px;
    top: 30px;
    right: -210px;
    background: rgba(44, 211, 204, 0.24);
}

.about-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 80px;
}

.about-hero-breadcrumb {
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.about-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
}

.about-hero-breadcrumb i {
    font-size: 7px;
}

.about-hero-label {
    color: #62e5df;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.about-hero-content h1 {
    max-width: 720px;
    margin-top: 20px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: clamp(58px, 5.6vw, 88px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.about-hero-content h1 span {
    color: #5b83ff;
}

.about-hero-content > p {
    max-width: 650px;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.8;
}

.about-hero-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.about-hero-primary,
.about-hero-secondary {
    min-height: 54px;
    padding: 0 22px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 12px;
    font-weight: 700;
}

.about-hero-primary {
    color: #10213e;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.about-hero-secondary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.08);
}

.about-hero-points {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.about-hero-points div {
    color: rgba(255, 255, 255, 0.73);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
}

.about-hero-points i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    background: #316df0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.about-hero-visual {
    position: relative;
}

.about-visual-main-card {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 27px;
    background: #f7f9fc;
    box-shadow: 0 50px 110px rgba(0, 0, 0, 0.37);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.about-visual-header {
    min-height: 75px;
    padding: 0 22px;
    border-bottom: 1px solid #dfe6ef;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.about-visual-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.about-visual-brand > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #184f9c, #1ab3b0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Sora", sans-serif;
    font-weight: 700;
}

.about-visual-brand strong,
.about-visual-brand small {
    display: block;
}

.about-visual-brand strong {
    color: #10213e;
    font-size: 11px;
}

.about-visual-brand small {
    margin-top: 3px;
    color: #8591a3;
    font-size: 7px;
}

.about-visual-status {
    padding: 9px 12px;
    border-radius: 100px;
    color: #157565;
    background: #e9f8f4;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.about-visual-status i {
    color: #1bb095;
    font-size: 6px;
}

.about-visual-body {
    min-height: 465px;
    padding: 30px;
}

.about-visual-center {
    min-height: 270px;
    border-radius: 22px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(64, 216, 215, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #0a2b56, #126e86);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.about-visual-logo {
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 31px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 25px 45px rgba(3, 25, 48, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-visual-logo span {
    font-family: "Sora", sans-serif;
    font-size: 45px;
    font-weight: 700;
}

.about-visual-center > strong {
    margin-top: 19px;
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.about-visual-center > p {
    max-width: 330px;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 9px;
    line-height: 1.7;
}

.about-visual-services {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.about-visual-services div {
    min-height: 95px;
    padding: 13px;
    border: 1px solid #dfe6ef;
    border-radius: 13px;
    color: #4e5d73;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    text-align: center;
    font-size: 8px;
    font-weight: 600;
}

.about-visual-services i {
    color: #187f9d;
    font-size: 18px;
}

.about-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 215px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(5, 35, 63, 0.26);
    display: flex;
    align-items: center;
    gap: 11px;
}

.about-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #18599f, #1ab6ae);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-floating-card strong,
.about-floating-card small {
    display: block;
}

.about-floating-card strong {
    color: #10213e;
    font-size: 11px;
}

.about-floating-card small {
    margin-top: 3px;
    color: #6e7c90;
    font-size: 8px;
}

.about-floating-technology {
    top: 42px;
    right: -15px;
}

.about-floating-support {
    left: -18px;
    bottom: 38px;
}

/* Stats */

.about-stats-section {
    padding: 42px 0 52px;
    background: #f5f7ff;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.about-stat-card {
    min-height: 135px;
    padding: 24px;
    border: 1px solid #dfe5ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 13px 30px rgba(25, 50, 95, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.about-stat-card strong {
    color: #0f1e3a;
    font-family: "Sora", sans-serif;
    font-size: 45px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.about-stat-card strong span {
    color: #2865e7;
}

.about-stat-card p {
    margin-top: 11px;
    color: #68768b;
    font-size: 11px;
    font-weight: 600;
}

/* Company */

.about-company-section {
    padding: 115px 0;
    background: #ffffff;
}

.about-company-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
}

.about-company-content h2,
.about-expertise-content h2,
.about-why-content h2 {
    max-width: 680px;
    margin-top: 16px;
    color: #0f1f3c;
    font-family: "Sora", sans-serif;
    font-size: clamp(40px, 4.7vw, 62px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.about-company-content h2 span,
.about-expertise-content h2 span,
.about-why-content h2 span {
    color: #2865e7;
}

.about-company-content > p {
    max-width: 640px;
    margin-top: 20px;
    color: #667085;
    font-size: 14px;
    line-height: 1.85;
}

.about-company-link,
.about-why-content > a {
    margin-top: 28px;
    color: #2865e7;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
}

.about-company-cards {
    display: grid;
    gap: 18px;
}

.about-company-card {
    min-height: 190px;
    padding: 28px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 22px 50px rgba(24, 44, 83, 0.14);
}

.about-company-card > span {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.about-company-card h3 {
    margin-top: 24px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 20px;
}

.about-company-card p {
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.73);
    font-size: 12px;
    line-height: 1.7;
}

.about-company-card-blue {
    background: linear-gradient(135deg, #0c3975, #257fbd);
}

.about-company-card-purple {
    background: linear-gradient(135deg, #321060, #7b36b2);
}

.about-company-card-green {
    background: linear-gradient(135deg, #064d47, #179b87);
}

/* Mission */

.about-mission-section {
    padding: 110px 0;
    background: #f6f8fc;
}

.about-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.about-mission-card {
    position: relative;
    min-height: 470px;
    padding: 42px;
    border-radius: 26px;
    overflow: hidden;
}

.about-mission-card-dark {
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(52, 206, 221, 0.23),
            transparent 30%
        ),
        linear-gradient(135deg, #081d3c, #135b78);
}

.about-mission-card-light {
    border: 1px solid #dfe6ef;
    color: #10213e;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(29, 54, 94, 0.08);
}

.about-mission-number {
    position: absolute;
    top: 26px;
    right: 31px;
    color: rgba(255, 255, 255, 0.16);
    font-family: "Sora", sans-serif;
    font-size: 58px;
    font-weight: 700;
}

.about-mission-card-light .about-mission-number {
    color: #edf1f7;
}

.about-mission-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #2865e7, #21ada9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.about-mission-label {
    margin-top: 75px;
    color: #5ae0d7;
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-mission-card-light .about-mission-label {
    color: #2865e7;
}

.about-mission-card h2 {
    max-width: 600px;
    margin-top: 15px;
    font-family: "Sora", sans-serif;
    font-size: 31px;
    line-height: 1.25;
    letter-spacing: -0.04em;
}

.about-mission-card-dark h2 {
    color: #ffffff;
}

.about-mission-card p {
    max-width: 610px;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.8;
}

.about-mission-card-dark p {
    color: rgba(255, 255, 255, 0.70);
}

.about-mission-card-light p {
    color: #667085;
}

/* Values */

.about-values-section {
    padding: 115px 0;
    background: #ffffff;
}

.about-values-heading > p {
    max-width: 720px;
    margin: 20px auto 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.about-values-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.about-value-card {
    min-height: 250px;
    padding: 29px;
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(25, 52, 92, 0.06);
    transition: 0.28s ease;
}

.about-value-card:hover {
    transform: translateY(-7px);
    border-color: #bdd0f5;
    box-shadow: 0 25px 52px rgba(25, 52, 92, 0.13);
}

.about-value-card > span {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #2865e7, #1caaa7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.about-value-card h3 {
    margin-top: 29px;
    color: #10213e;
    font-family: "Sora", sans-serif;
    font-size: 19px;
}

.about-value-card p {
    margin-top: 11px;
    color: #667085;
    font-size: 12px;
    line-height: 1.75;
}

/* Expertise */

.about-expertise-section {
    padding: 115px 0;
    background: #f5f8fc;
}

.about-expertise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 85px;
}

.about-expertise-orbit {
    position: relative;
    max-width: 560px;
    aspect-ratio: 1;
    margin: auto;
    border: 1px dashed #b9d5df;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at center,
            rgba(37, 130, 184, 0.12),
            transparent 45%
        ),
        #ffffff;
}

.about-expertise-orbit::before {
    content: "";
    position: absolute;
    width: 68%;
    height: 68%;
    top: 16%;
    left: 16%;
    border: 1px solid #dbe8ee;
    border-radius: 50%;
}

.about-expertise-center {
    position: absolute;
    z-index: 3;
    width: 155px;
    height: 155px;
    top: 50%;
    left: 50%;
    border-radius: 42px;
    color: #ffffff;
    background: linear-gradient(135deg, #164f98, #1baaa7);
    box-shadow: 0 28px 55px rgba(18, 85, 132, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate(-50%, -50%);
}

.about-expertise-center span {
    font-family: "Sora", sans-serif;
    font-size: 48px;
    font-weight: 700;
}

.about-expertise-center strong {
    margin-top: 5px;
    font-size: 10px;
}

.about-expertise-node {
    position: absolute;
    z-index: 4;
    min-width: 128px;
    padding: 14px;
    border: 1px solid #dce6ed;
    border-radius: 14px;
    color: #183550;
    background: #ffffff;
    box-shadow: 0 15px 32px rgba(27, 67, 96, 0.12);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 700;
}

.about-expertise-node i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #2865e7, #1caaa7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-node-one {
    top: 9%;
    left: 7%;
}

.about-node-two {
    top: 9%;
    right: 7%;
}

.about-node-three {
    left: 5%;
    bottom: 10%;
}

.about-node-four {
    right: 5%;
    bottom: 10%;
}

.about-expertise-content > p {
    max-width: 630px;
    margin-top: 20px;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.about-expertise-list {
    margin-top: 30px;
    display: grid;
    gap: 13px;
}

.about-expertise-list div {
    color: #35445b;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    font-weight: 600;
}

.about-expertise-list i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2865e7, #1caaa7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

/* Approach */

.about-approach-section {
    padding: 115px 0;
    background: #ffffff;
}

.about-approach-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.about-approach-grid article {
    position: relative;
    min-height: 305px;
    padding: 29px 24px;
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(27, 53, 92, 0.07);
    overflow: hidden;
}

.about-approach-number {
    position: absolute;
    top: 17px;
    right: 20px;
    color: #e7ecf4;
    font-family: "Sora", sans-serif;
    font-size: 43px;
    font-weight: 700;
}

.about-approach-icon {
    width: 53px;
    height: 53px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #2865e7, #1baaa6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.about-approach-grid h3 {
    margin-top: 70px;
    color: #10213e;
    font-family: "Sora", sans-serif;
    font-size: 19px;
}

.about-approach-grid p {
    margin-top: 11px;
    color: #667085;
    font-size: 12px;
    line-height: 1.75;
}

/* Why */

.about-why-section {
    padding: 115px 0;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(42, 101, 231, 0.08),
            transparent 28%
        ),
        #f5f8fd;
}

.about-why-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 85px;
}

.about-why-content > p {
    max-width: 590px;
    margin-top: 19px;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.about-why-list {
    display: grid;
    gap: 15px;
}

.about-why-list article {
    min-height: 125px;
    padding: 24px;
    border: 1px solid #dfe6ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(26, 53, 91, 0.06);
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
}

.about-why-list article > span {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #2865e7, #1baaa6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.about-why-list h3 {
    color: #10213e;
    font-family: "Sora", sans-serif;
    font-size: 17px;
}

.about-why-list p {
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
    line-height: 1.65;
}

/* CTA */

.about-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(60, 220, 213, 0.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #07172f 0%,
            #0d4576 55%,
            #188c9c 100%
        );
}

/* Responsive */

@media (max-width: 1050px) {
    .about-hero-container,
    .about-company-grid,
    .about-expertise-grid,
    .about-why-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-visual {
        margin-top: 25px;
    }

    .about-visual-main-card {
        max-width: 100%;
        transform: none;
    }

    .about-stats-grid,
    .about-values-grid,
    .about-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-company-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-mission-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .about-hero-section {
        min-height: auto;
        padding: 130px 0 80px;
    }

    .about-hero-container {
        gap: 50px;
    }

    .about-hero-content h1 {
        font-size: 47px;
        line-height: 1.02;
    }

    .about-hero-content > p {
        font-size: 14px;
    }

    .about-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .about-hero-primary,
    .about-hero-secondary {
        width: 100%;
    }

    .about-hero-points {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-visual-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .about-visual-status {
        display: none;
    }

    .about-visual-body {
        min-height: auto;
        padding: 14px;
    }

    .about-visual-center {
        min-height: 230px;
    }

    .about-visual-services {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-floating-card {
        display: none;
    }

    .about-stats-grid,
    .about-company-cards,
    .about-values-grid,
    .about-approach-grid {
        grid-template-columns: 1fr;
    }

    .about-company-section,
    .about-mission-section,
    .about-values-section,
    .about-expertise-section,
    .about-approach-section,
    .about-why-section {
        padding: 80px 0;
    }

    .about-company-grid,
    .about-expertise-grid,
    .about-why-grid {
        gap: 45px;
    }

    .about-mission-card {
        min-height: 420px;
        padding: 30px 24px;
    }

    .about-mission-card h2 {
        font-size: 26px;
    }

    .about-expertise-orbit {
        max-width: 100%;
    }

    .about-expertise-center {
        width: 115px;
        height: 115px;
        border-radius: 30px;
    }

    .about-expertise-center span {
        font-size: 35px;
    }

    .about-expertise-node {
        min-width: auto;
        padding: 9px;
    }

    .about-expertise-node span {
        display: none;
    }

    .about-why-list article {
        grid-template-columns: 48px 1fr;
        padding: 20px;
    }
}

/* =========================================================
   CAREERS PAGE
========================================================= */

.career-hero-section {
    position: relative;
    min-height: 900px;
    padding: 165px 0 105px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(130, 94, 255, 0.23),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #09152f 0%,
            #243d78 52%,
            #6b49bb 100%
        );
    overflow: hidden;
}

.career-hero-background,
.career-hero-grid {
    position: absolute;
    inset: 0;
}

.career-hero-grid {
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        );
    background-size: 75px 75px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8),
        transparent
    );
}

.career-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.career-hero-glow-one {
    width: 570px;
    height: 570px;
    top: 90px;
    left: -190px;
    background: rgba(50, 102, 220, 0.29);
}

.career-hero-glow-two {
    width: 640px;
    height: 640px;
    top: 20px;
    right: -210px;
    background: rgba(164, 80, 225, 0.25);
}

.career-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 80px;
}

.career-hero-breadcrumb {
    margin-bottom: 27px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.career-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
}

.career-hero-breadcrumb i {
    font-size: 7px;
}

.career-hero-label {
    color: #c7b5ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.career-hero-content h1 {
    max-width: 720px;
    margin-top: 20px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: clamp(57px, 5.4vw, 85px);
    font-weight: 600;
    line-height: 0.99;
    letter-spacing: -0.06em;
}

.career-hero-content h1 span {
    color: #a78bfa;
}

.career-hero-content > p {
    max-width: 650px;
    margin-top: 27px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.8;
}

.career-hero-actions {
    margin-top: 33px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.career-hero-primary,
.career-hero-secondary {
    min-height: 54px;
    padding: 0 22px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 12px;
    font-weight: 700;
}

.career-hero-primary {
    color: #1d2340;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.career-hero-secondary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.08);
}

.career-hero-points {
    margin-top: 29px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.career-hero-points div {
    color: rgba(255, 255, 255, 0.73);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
}

.career-hero-points i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    background: #7258db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.career-hero-visual {
    position: relative;
}

.career-workspace-card {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 27px;
    background: #f7f8fc;
    box-shadow: 0 50px 110px rgba(0, 0, 0, 0.37);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.career-workspace-header {
    min-height: 75px;
    padding: 0 22px;
    border-bottom: 1px solid #dfe4ef;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.career-workspace-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.career-workspace-brand > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #315ec7, #8554d3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Sora", sans-serif;
    font-weight: 700;
}

.career-workspace-brand strong,
.career-workspace-brand small {
    display: block;
}

.career-workspace-brand strong {
    color: #18233f;
    font-size: 11px;
}

.career-workspace-brand small {
    margin-top: 3px;
    color: #8590a3;
    font-size: 7px;
}

.career-workspace-status {
    padding: 9px 12px;
    border-radius: 100px;
    color: #5d47ae;
    background: #f1edff;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.career-workspace-status i {
    color: #7257d9;
    font-size: 6px;
}

.career-workspace-body {
    min-height: 465px;
    padding: 30px;
}

.career-workspace-banner {
    min-height: 275px;
    padding: 30px;
    border-radius: 22px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(198, 116, 255, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #172955, #66419f);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.career-workspace-banner small,
.career-workspace-banner strong {
    display: block;
}

.career-workspace-banner small {
    color: #cfbcff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.career-workspace-banner strong {
    max-width: 350px;
    margin-top: 10px;
    font-family: "Sora", sans-serif;
    font-size: 27px;
    line-height: 1.18;
}

.career-workspace-banner p {
    max-width: 340px;
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 10px;
    line-height: 1.7;
}

.career-workspace-icon {
    flex: 0 0 115px;
    width: 115px;
    height: 115px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 25px 45px rgba(20, 13, 50, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    transform: rotate(-7deg);
}

.career-team-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.career-team-grid div {
    min-height: 95px;
    padding: 13px;
    border: 1px solid #dfe4ef;
    border-radius: 13px;
    color: #4e5c72;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    text-align: center;
    font-size: 8px;
    font-weight: 600;
}

.career-team-grid i {
    color: #6e52cd;
    font-size: 18px;
}

.career-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 215px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(19, 25, 61, 0.26);
    display: flex;
    align-items: center;
    gap: 11px;
}

.career-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #315fc8, #8453d3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.career-floating-card strong,
.career-floating-card small {
    display: block;
}

.career-floating-card strong {
    color: #1b2540;
    font-size: 11px;
}

.career-floating-card small {
    margin-top: 3px;
    color: #6f7b8e;
    font-size: 8px;
}

.career-floating-growth {
    top: 42px;
    right: -15px;
}

.career-floating-team {
    left: -18px;
    bottom: 38px;
}

/* Career intro */

.career-intro-section {
    padding: 90px 0;
    background: #ffffff;
}

.career-intro-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 80px;
}

.career-intro-grid h2,
.career-application-content h2 {
    max-width: 690px;
    margin-top: 16px;
    color: #101f3c;
    font-family: "Sora", sans-serif;
    font-size: clamp(40px, 4.6vw, 61px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.career-intro-grid h2 span,
.career-application-content h2 span {
    color: #7255d6;
}

.career-intro-grid p {
    color: #667085;
    font-size: 14px;
    line-height: 1.85;
}

.career-intro-grid p + p {
    margin-top: 17px;
}

/* Values */

.career-values-section {
    padding: 115px 0;
    background: #f6f7fc;
}

.career-values-heading > p {
    max-width: 730px;
    margin: 20px auto 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.career-values-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.career-value-card {
    min-height: 250px;
    padding: 29px;
    border: 1px solid #dfe4ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(26, 44, 85, 0.06);
    transition: 0.28s ease;
}

.career-value-card:hover {
    transform: translateY(-7px);
    border-color: #cdbef3;
    box-shadow: 0 25px 52px rgba(38, 43, 90, 0.13);
}

.career-value-card > span {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #345fc7, #8253d2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.career-value-card h3 {
    margin-top: 29px;
    color: #111f3b;
    font-family: "Sora", sans-serif;
    font-size: 19px;
}

.career-value-card p {
    margin-top: 11px;
    color: #667085;
    font-size: 12px;
    line-height: 1.75;
}

/* Departments */

.career-departments-section {
    padding: 115px 0;
    background: #ffffff;
}

.career-departments-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.career-department-card {
    min-height: 270px;
    padding: 29px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(32, 37, 77, 0.15);
    transition: 0.28s ease;
}

.career-department-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 62px rgba(32, 37, 77, 0.22);
}

.career-department-card > span {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.career-department-card h3 {
    margin-top: 34px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 20px;
}

.career-department-card p {
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    line-height: 1.7;
}

.career-department-card small {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.60);
    display: block;
    font-size: 9px;
    font-weight: 600;
}

.career-department-blue {
    background: linear-gradient(135deg, #0d3d78, #287fc1);
}

.career-department-purple {
    background: linear-gradient(135deg, #351064, #843ab8);
}

.career-department-green {
    background: linear-gradient(135deg, #074d43, #17977e);
}

.career-department-orange {
    background: linear-gradient(135deg, #713a05, #da8c17);
}

.career-department-red {
    background: linear-gradient(135deg, #71172f, #cb425c);
}

.career-department-cyan {
    background: linear-gradient(135deg, #07516b, #1aa7b7);
}

/* Process */

.career-process-section {
    padding: 115px 0;
    background: #f6f7fc;
}

.career-process-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.career-process-grid article {
    position: relative;
    min-height: 305px;
    padding: 29px 24px;
    border: 1px solid #dfe4ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(27, 43, 84, 0.07);
    overflow: hidden;
}

.career-process-number {
    position: absolute;
    top: 17px;
    right: 20px;
    color: #e7e9f3;
    font-family: "Sora", sans-serif;
    font-size: 43px;
    font-weight: 700;
}

.career-process-icon {
    width: 53px;
    height: 53px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #345fc7, #8253d2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.career-process-grid h3 {
    margin-top: 70px;
    color: #111f3b;
    font-family: "Sora", sans-serif;
    font-size: 19px;
}

.career-process-grid p {
    margin-top: 11px;
    color: #667085;
    font-size: 12px;
    line-height: 1.75;
}

/* Openings */

.career-openings-section {
    padding: 115px 0;
    background: #ffffff;
}

.career-openings-heading {
    margin-bottom: 45px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.career-openings-heading h2 {
    max-width: 770px;
    margin-top: 15px;
    color: #101f3c;
    font-family: "Sora", sans-serif;
    font-size: clamp(40px, 4.5vw, 60px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.career-openings-heading h2 span {
    color: #7255d6;
}

.career-openings-heading > p {
    max-width: 430px;
    color: #667085;
    font-size: 13px;
    line-height: 1.75;
}

.career-no-openings-card {
    padding: 38px;
    border: 1px solid #dadfeb;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(131, 84, 211, 0.08),
            transparent 28%
        ),
        #f8f9fd;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
}

.career-no-openings-icon {
    width: 76px;
    height: 76px;
    border-radius: 21px;
    color: #ffffff;
    background: linear-gradient(135deg, #345fc7, #8253d2);
    box-shadow: 0 18px 35px rgba(74, 72, 179, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.career-no-openings-content > span {
    color: #7255d6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.career-no-openings-content h3 {
    margin-top: 9px;
    color: #111f3b;
    font-family: "Sora", sans-serif;
    font-size: 24px;
}

.career-no-openings-content p {
    max-width: 720px;
    margin-top: 10px;
    color: #667085;
    font-size: 13px;
    line-height: 1.75;
}

.career-no-openings-card > a {
    min-height: 52px;
    padding: 0 21px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #345fc7, #8253d2);
    box-shadow: 0 15px 30px rgba(71, 70, 174, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* Application */

.career-application-section {
    padding: 115px 0;
    background: #f6f7fc;
}

.career-application-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 85px;
}

.career-application-content > p {
    max-width: 630px;
    margin-top: 20px;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.career-application-list {
    margin-top: 29px;
    display: grid;
    gap: 13px;
}

.career-application-list div {
    color: #35445b;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    font-weight: 600;
}

.career-application-list i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #345fc7, #8253d2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.career-application-card {
    padding: 38px;
    border: 1px solid #dfe4ef;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 55px rgba(28, 43, 83, 0.10);
}

.career-application-card-label {
    color: #7255d6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.career-application-card h3 {
    margin-top: 13px;
    color: #111f3b;
    font-family: "Sora", sans-serif;
    font-size: 28px;
    line-height: 1.25;
}

.career-application-card > p {
    margin-top: 13px;
    color: #667085;
    font-size: 13px;
    line-height: 1.75;
}

.career-email-example {
    margin-top: 25px;
    padding: 19px;
    border: 1px solid #e1e4ee;
    border-radius: 14px;
    background: #f7f8fc;
}

.career-email-example small,
.career-email-example strong {
    display: block;
}

.career-email-example small {
    color: #8b95a7;
    font-size: 8px;
}

.career-email-example strong {
    margin-top: 7px;
    color: #2a3650;
    font-size: 12px;
}

.career-application-card > a {
    margin-top: 25px;
    color: #7255d6;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

/* CTA */

.career-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(173, 104, 245, 0.31),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #09152f 0%,
            #263d79 55%,
            #6d49bc 100%
        );
}

/* Responsive */

@media (max-width: 1050px) {
    .career-hero-container,
    .career-intro-grid,
    .career-application-grid {
        grid-template-columns: 1fr;
    }

    .career-workspace-card {
        max-width: 100%;
        transform: none;
    }

    .career-values-grid,
    .career-departments-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .career-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .career-openings-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .career-hero-section {
        min-height: auto;
        padding: 130px 0 80px;
    }

    .career-hero-content h1 {
        font-size: 46px;
        line-height: 1.02;
    }

    .career-hero-content > p {
        font-size: 14px;
    }

    .career-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .career-hero-primary,
    .career-hero-secondary {
        width: 100%;
    }

    .career-hero-points {
        align-items: flex-start;
        flex-direction: column;
    }

    .career-workspace-header {
        padding: 18px;
    }

    .career-workspace-status {
        display: none;
    }

    .career-workspace-body {
        min-height: auto;
        padding: 14px;
    }

    .career-workspace-banner {
        min-height: 240px;
        padding: 20px;
    }

    .career-workspace-banner strong {
        font-size: 22px;
    }

    .career-workspace-icon {
        flex-basis: 75px;
        width: 75px;
        height: 75px;
        border-radius: 22px;
        font-size: 30px;
    }

    .career-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .career-floating-card {
        display: none;
    }

    .career-intro-section,
    .career-values-section,
    .career-departments-section,
    .career-process-section,
    .career-openings-section,
    .career-application-section {
        padding: 80px 0;
    }

    .career-values-grid,
    .career-departments-grid,
    .career-process-grid {
        grid-template-columns: 1fr;
    }

    .career-no-openings-card {
        padding: 27px 22px;
        grid-template-columns: 1fr;
    }

    .career-no-openings-card > a {
        width: 100%;
    }

    .career-application-grid {
        gap: 45px;
    }

    .career-application-card {
        padding: 28px 22px;
    }
}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-hero-section {
    position: relative;
    padding: 165px 0 105px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(45, 219, 195, 0.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061a31 0%,
            #0b4867 52%,
            #15998e 100%
        );
    overflow: hidden;
}

.contact-hero-background,
.contact-hero-grid {
    position: absolute;
    inset: 0;
}

.contact-hero-grid {
    opacity: 0.14;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        );
    background-size: 75px 75px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8),
        transparent
    );
}

.contact-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.contact-hero-glow-one {
    width: 570px;
    height: 570px;
    top: 90px;
    left: -190px;
    background: rgba(32, 101, 220, 0.28);
}

.contact-hero-glow-two {
    width: 640px;
    height: 640px;
    top: 20px;
    right: -210px;
    background: rgba(42, 218, 184, 0.24);
}

.contact-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    align-items: center;
    gap: 90px;
}

.contact-hero-breadcrumb {
    margin-bottom: 27px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.contact-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
}

.contact-hero-breadcrumb i {
    font-size: 7px;
}

.contact-hero-label {
    color: #64e5d7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-hero-content h1 {
    max-width: 760px;
    margin-top: 20px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: clamp(58px, 5.4vw, 84px);
    font-weight: 600;
    line-height: 0.99;
    letter-spacing: -0.06em;
}

.contact-hero-content h1 span {
    color: #53ded1;
}

.contact-hero-content > p {
    max-width: 680px;
    margin-top: 27px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.8;
}

.contact-hero-points {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.contact-hero-points div {
    color: rgba(255, 255, 255, 0.74);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
}

.contact-hero-points i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    background: #19a99b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.contact-hero-card {
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.30);
    overflow: hidden;
}

.contact-hero-card-header {
    min-height: 100px;
    padding: 24px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(74, 229, 210, 0.28),
            transparent 30%
        ),
        linear-gradient(135deg, #0b3153, #12877f);
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-hero-card-header > span {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.contact-hero-card-header strong,
.contact-hero-card-header small {
    display: block;
}

.contact-hero-card-header strong {
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.contact-hero-card-header small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 9px;
}

.contact-hero-card-body {
    padding: 25px;
    display: grid;
    gap: 13px;
}

.contact-hero-info {
    min-height: 82px;
    padding: 15px;
    border: 1px solid #dfe8ed;
    border-radius: 14px;
    background: #f8fbfc;
    display: flex;
    align-items: center;
    gap: 13px;
}

.contact-hero-info > span {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #126d91, #20ae9d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.contact-hero-info small,
.contact-hero-info strong,
.contact-hero-info a {
    display: block;
}

.contact-hero-info small {
    color: #8996a5;
    font-size: 8px;
}

.contact-hero-info strong,
.contact-hero-info a {
    margin-top: 4px;
    color: #173547;
    font-size: 11px;
    font-weight: 700;
}

/* Main form */

.contact-main-section {
    padding: 115px 0;
    background: #ffffff;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
    gap: 55px;
}

.contact-form-wrapper h2 {
    max-width: 760px;
    margin-top: 16px;
    color: #10233a;
    font-family: "Sora", sans-serif;
    font-size: clamp(40px, 4.7vw, 62px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.contact-form-wrapper h2 span {
    color: #15998e;
}

.contact-form-wrapper > p {
    max-width: 650px;
    margin-top: 18px;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.contact-form {
    margin-top: 38px;
    padding: 34px;
    border: 1px solid #dfe7ec;
    border-radius: 23px;
    background: #f8fafc;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 21px;
}

.contact-form-group label {
    margin-bottom: 9px;
    color: #26384c;
    display: block;
    font-size: 11px;
    font-weight: 700;
}

.contact-form-group label > span {
    color: #d83e57;
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    width: 100%;
    border: 1px solid #d8e1e7;
    border-radius: 11px;
    color: #213448;
    background: #ffffff;
    outline: none;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    transition: 0.22s ease;
}

.contact-form-group input,
.contact-form-group select {
    min-height: 54px;
    padding: 0 15px;
}

.contact-form-group textarea {
    padding: 15px;
    resize: vertical;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    border-color: #15998e;
    box-shadow: 0 0 0 4px rgba(21, 153, 142, 0.10);
}

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

.contact-checkbox {
    margin: 0;
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.contact-checkbox input {
    width: 17px;
    min-height: 17px;
    margin-top: 2px;
    accent-color: #15998e;
}

.contact-checkbox span {
    color: #68778a !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.contact-submit-button {
    min-height: 56px;
    padding: 0 24px;
    border: none;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #0e6686, #1bac9b);
    box-shadow: 0 15px 32px rgba(18, 128, 131, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.contact-sidebar {
    display: grid;
    gap: 18px;
}

.contact-sidebar-card {
    padding: 28px;
    border: 1px solid #dfe7ec;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(27, 55, 75, 0.07);
}

.contact-sidebar-dark {
    color: #ffffff;
    border: none;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(62, 225, 204, 0.25),
            transparent 28%
        ),
        linear-gradient(135deg, #08253f, #0d736d);
}

.contact-sidebar-label {
    color: #70e5d9;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.contact-sidebar-card h3 {
    margin-top: 15px;
    color: #132c40;
    font-family: "Sora", sans-serif;
    font-size: 21px;
    line-height: 1.35;
}

.contact-sidebar-dark h3 {
    color: #ffffff;
}

.contact-sidebar-card p {
    margin-top: 12px;
    color: #68788a;
    font-size: 12px;
    line-height: 1.75;
}

.contact-sidebar-icon {
    width: 51px;
    height: 51px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #126c90, #1eaa99);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.contact-sidebar-list {
    margin-top: 24px;
    display: grid;
    gap: 13px;
}

.contact-sidebar-list div {
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    line-height: 1.5;
}

.contact-sidebar-list i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.contact-sidebar-card > a {
    margin-top: 22px;
    color: #15998e;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
}

/* Services */

.contact-services-section {
    padding: 110px 0;
    background: #f5f8fa;
}

.contact-services-grid {
    margin-top: 52px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.contact-services-grid article {
    min-height: 230px;
    padding: 27px;
    border: 1px solid #dce6ea;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(27, 57, 73, 0.06);
    transition: 0.25s ease;
}

.contact-services-grid article:hover {
    transform: translateY(-7px);
    border-color: #aedbd5;
    box-shadow: 0 25px 50px rgba(27, 57, 73, 0.12);
}

.contact-services-grid article > span {
    width: 53px;
    height: 53px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #126b90, #1cab9a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.contact-services-grid h3 {
    margin-top: 31px;
    color: #132c40;
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.contact-services-grid p {
    margin-top: 10px;
    color: #66788a;
    font-size: 12px;
    line-height: 1.7;
}

/* Process */

.contact-process-section {
    padding: 110px 0;
    background: #ffffff;
}

.contact-process-grid {
    margin-top: 52px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.contact-process-grid article {
    position: relative;
    min-height: 300px;
    padding: 28px 24px;
    border: 1px solid #dfe7ec;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 34px rgba(27, 54, 73, 0.07);
    overflow: hidden;
}

.contact-process-number {
    position: absolute;
    top: 17px;
    right: 20px;
    color: #e6eef0;
    font-family: "Sora", sans-serif;
    font-size: 43px;
    font-weight: 700;
}

.contact-process-icon {
    width: 53px;
    height: 53px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #126b90, #1cab9a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.contact-process-grid h3 {
    margin-top: 68px;
    color: #132c40;
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.contact-process-grid p {
    margin-top: 11px;
    color: #66788a;
    font-size: 12px;
    line-height: 1.75;
}

/* FAQ */

.contact-faq-section {
    padding: 115px 0;
    background: #f5f8fa;
}

.contact-faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: 75px;
}

.contact-faq-heading h2 {
    max-width: 630px;
    margin-top: 16px;
    color: #10243a;
    font-family: "Sora", sans-serif;
    font-size: clamp(39px, 4.4vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.contact-faq-heading h2 span {
    color: #15998e;
}

.contact-faq-heading > p {
    max-width: 590px;
    margin-top: 20px;
    color: #66788a;
    font-size: 14px;
    line-height: 1.8;
}

.contact-faq-list {
    display: grid;
    gap: 13px;
}

.contact-faq-list details {
    border: 1px solid #dce6ea;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}

.contact-faq-list summary {
    min-height: 70px;
    padding: 20px 22px;
    color: #173044;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.contact-faq-list summary::-webkit-details-marker {
    display: none;
}

.contact-faq-list summary i {
    color: #15998e;
    transition: transform 0.2s ease;
}

.contact-faq-list details[open] summary i {
    transform: rotate(45deg);
}

.contact-faq-list details p {
    padding: 0 22px 22px;
    color: #66788a;
    font-size: 12px;
    line-height: 1.75;
}

/* CTA */

.contact-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(65, 231, 207, 0.31),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061a31 0%,
            #0b526b 55%,
            #15998e 100%
        );
}

/* Responsive */

@media (max-width: 1050px) {
    .contact-hero-container,
    .contact-main-grid,
    .contact-faq-grid {
        grid-template-columns: 1fr;
    }

    .contact-services-grid,
    .contact-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .contact-hero-section {
        padding: 130px 0 80px;
    }

    .contact-hero-container {
        gap: 50px;
    }

    .contact-hero-content h1 {
        font-size: 46px;
        line-height: 1.02;
    }

    .contact-hero-content > p {
        font-size: 14px;
    }

    .contact-hero-points {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-main-section,
    .contact-services-section,
    .contact-process-section,
    .contact-faq-section {
        padding: 80px 0;
    }

    .contact-form {
        padding: 24px 18px;
    }

    .contact-form-grid,
    .contact-services-grid,
    .contact-process-grid {
        grid-template-columns: 1fr;
    }

    .contact-submit-button {
        width: 100%;
    }

    .contact-faq-grid {
        gap: 42px;
    }

    .contact-hero-card-body {
        padding: 18px;
    }
}

/* =========================================================
   CONTACT FORM MESSAGES
========================================================= */

.contact-success-message,
.contact-error-message {
    margin-top: 30px;
    padding: 18px 20px;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.contact-success-message {
    border: 1px solid #b9eadf;
    color: #145f51;
    background: #ecfbf7;
}

.contact-error-message {
    border: 1px solid #f3c4cb;
    color: #8c2939;
    background: #fff1f3;
}

.contact-success-message > span,
.contact-error-message > span {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-success-message > span {
    background: #17a88d;
}

.contact-error-message > span {
    background: #d9485f;
}

.contact-success-message strong,
.contact-error-message strong {
    display: block;
    font-size: 13px;
}

.contact-success-message p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.6;
}

.contact-error-message ul {
    margin: 7px 0 0;
    padding-left: 18px;
}

.contact-error-message li {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
}

#contact-enquiry-form {
    scroll-margin-top: 125px;
}
html {
    scroll-behavior: smooth;
}

/* =========================================================
   PLATFORM PAGE
========================================================= */

.platform-hero-section {
    position: relative;
    min-height: 900px;
    padding: 165px 0 105px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(62, 200, 255, 0.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #07152f 0%,
            #123f75 52%,
            #148d9b 100%
        );
    overflow: hidden;
}

.platform-hero-background,
.platform-hero-grid {
    position: absolute;
    inset: 0;
}

.platform-hero-grid {
    opacity: 0.14;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px
        );
    background-size: 75px 75px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85),
        transparent
    );
}

.platform-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.platform-hero-glow-one {
    width: 570px;
    height: 570px;
    top: 80px;
    left: -190px;
    background: rgba(46, 90, 225, 0.28);
}

.platform-hero-glow-two {
    width: 640px;
    height: 640px;
    top: 20px;
    right: -210px;
    background: rgba(46, 218, 207, 0.24);
}

.platform-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 75px;
}

.platform-hero-breadcrumb {
    margin-bottom: 27px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.platform-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
}

.platform-hero-breadcrumb i {
    font-size: 7px;
}

.platform-hero-label {
    color: #69e3db;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.platform-hero-content h1 {
    max-width: 730px;
    margin-top: 20px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: clamp(54px, 5vw, 80px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.06em;
}

.platform-hero-content h1 span {
    color: #61d9d0;
}

.platform-hero-content > p {
    max-width: 650px;
    margin-top: 27px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.8;
}

.platform-hero-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.platform-hero-primary,
.platform-hero-secondary {
    min-height: 54px;
    padding: 0 22px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 12px;
    font-weight: 700;
}

.platform-hero-primary {
    color: #10233e;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.platform-hero-secondary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.08);
}

.platform-hero-points {
    margin-top: 29px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.platform-hero-points div {
    color: rgba(255, 255, 255, 0.74);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
}

.platform-hero-points i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    background: #1c9fb0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.platform-hero-visual {
    position: relative;
}

.platform-dashboard-window {
    width: 100%;
    max-width: 710px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 25px;
    background: #f5f8fb;
    box-shadow: 0 50px 110px rgba(0, 0, 0, 0.36);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}

.platform-dashboard-header {
    min-height: 68px;
    padding: 0 18px;
    border-bottom: 1px solid #dfe7ed;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 15px;
}

.platform-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.platform-dashboard-brand > span {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #18539b, #1ab1aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Sora", sans-serif;
    font-weight: 700;
}

.platform-dashboard-brand strong,
.platform-dashboard-brand small {
    display: block;
}

.platform-dashboard-brand strong {
    color: #12263f;
    font-size: 10px;
}

.platform-dashboard-brand small {
    margin-top: 2px;
    color: #8795a5;
    font-size: 7px;
}

.platform-dashboard-live {
    padding: 8px 11px;
    border-radius: 100px;
    color: #167766;
    background: #e9f8f4;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.platform-dashboard-live i {
    color: #1caf93;
    font-size: 6px;
}

.platform-dashboard-user {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #126c8d;
    background: #e7f3f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-dashboard-body {
    min-height: 450px;
    display: grid;
    grid-template-columns: 58px 1fr;
}

.platform-dashboard-sidebar {
    padding: 15px 9px;
    border-right: 1px solid #dfe7ed;
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
}

.platform-dashboard-sidebar span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #83909f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.platform-dashboard-sidebar span.active {
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb0aa);
}

.platform-dashboard-content {
    padding: 18px;
}

.platform-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.platform-dashboard-top small,
.platform-dashboard-top strong {
    display: block;
}

.platform-dashboard-top small {
    color: #8793a2;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.platform-dashboard-top strong {
    margin-top: 4px;
    color: #182b43;
    font-size: 14px;
}

.platform-dashboard-top button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dae4e9;
    border-radius: 8px;
    color: #68798a;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
}

.platform-dashboard-stats {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.platform-dashboard-stats > div {
    min-height: 98px;
    padding: 11px;
    border: 1px solid #dce6eb;
    border-radius: 12px;
    background: #ffffff;
}

.platform-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.platform-stat-blue {
    background: linear-gradient(135deg, #2866d8, #4b9de4);
}

.platform-stat-green {
    background: linear-gradient(135deg, #148567, #2bc295);
}

.platform-stat-purple {
    background: linear-gradient(135deg, #6140b6, #9764dc);
}

.platform-stat-orange {
    background: linear-gradient(135deg, #b86614, #e99c33);
}

.platform-dashboard-stats small,
.platform-dashboard-stats strong,
.platform-dashboard-stats em {
    display: block;
}

.platform-dashboard-stats small {
    margin-top: 8px;
    color: #8995a4;
    font-size: 6px;
}

.platform-dashboard-stats strong {
    margin-top: 3px;
    color: #172c44;
    font-size: 13px;
}

.platform-dashboard-stats em {
    margin-top: 3px;
    color: #1a9b76;
    font-size: 6px;
    font-style: normal;
    font-weight: 700;
}

.platform-dashboard-main {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 9px;
}

.platform-chart-card,
.platform-products-card {
    min-height: 218px;
    padding: 14px;
    border: 1px solid #dce6eb;
    border-radius: 13px;
    background: #ffffff;
}

.platform-chart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.platform-chart-heading strong,
.platform-chart-heading small {
    display: block;
}

.platform-chart-heading strong {
    color: #193048;
    font-size: 9px;
}

.platform-chart-heading small {
    margin-top: 3px;
    color: #8b97a6;
    font-size: 6px;
}

.platform-chart-heading > span {
    padding: 6px 8px;
    border-radius: 7px;
    color: #17896b;
    background: #e9f8f3;
    font-size: 7px;
    font-weight: 700;
}

.platform-chart-bars {
    height: 125px;
    margin-top: 18px;
    border-bottom: 1px solid #dce5e9;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.platform-chart-bars span {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #25b7ae, #246bc5);
}

.platform-chart-labels {
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.platform-chart-labels small {
    color: #94a0ad;
    font-size: 5px;
}

.platform-products-card > strong {
    color: #193048;
    font-size: 9px;
}

.platform-products-card > div {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 27px 1fr auto;
    align-items: center;
    gap: 7px;
}

.platform-products-card > div > span {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #18589e, #1bb2a9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.platform-products-card p,
.platform-products-card p small {
    display: block;
}

.platform-products-card p {
    color: #30465b;
    font-size: 7px;
    font-weight: 700;
}

.platform-products-card p small {
    margin-top: 2px;
    color: #939da9;
    font-size: 5px;
    font-weight: 500;
}

.platform-products-card em {
    color: #1b7887;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
}

.platform-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 210px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 45px rgba(9, 37, 65, 0.26);
    display: flex;
    align-items: center;
    gap: 11px;
}

.platform-floating-card > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-floating-card strong,
.platform-floating-card small {
    display: block;
}

.platform-floating-card strong {
    color: #142a42;
    font-size: 11px;
}

.platform-floating-card small {
    margin-top: 3px;
    color: #718091;
    font-size: 8px;
}

.platform-floating-wallet {
    top: 34px;
    right: -15px;
}

.platform-floating-api {
    left: -15px;
    bottom: 35px;
}

/* Stats */

.platform-stats-section {
    padding: 42px 0 52px;
    background: #f5f8fc;
}

.platform-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.platform-stats-grid article {
    min-height: 135px;
    padding: 24px;
    border: 1px solid #dfe7ed;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 13px 30px rgba(25, 50, 95, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.platform-stats-grid strong {
    color: #10223b;
    font-family: "Sora", sans-serif;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.platform-stats-grid strong span {
    color: #1d99a4;
}

.platform-stats-grid p {
    margin-top: 11px;
    color: #68778a;
    font-size: 11px;
    font-weight: 600;
}

/* Intro */

.platform-intro-section {
    padding: 90px 0;
    background: #ffffff;
}

.platform-intro-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 80px;
}

.platform-intro-grid h2,
.platform-control-content h2,
.platform-integrations-content h2 {
    max-width: 700px;
    margin-top: 16px;
    color: #10223b;
    font-family: "Sora", sans-serif;
    font-size: clamp(40px, 4.7vw, 62px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.platform-intro-grid h2 span,
.platform-control-content h2 span,
.platform-integrations-content h2 span {
    color: #15999b;
}

.platform-intro-grid p {
    color: #66768a;
    font-size: 14px;
    line-height: 1.85;
}

.platform-intro-grid p + p {
    margin-top: 17px;
}

/* Modules */

.platform-modules-section {
    padding: 115px 0;
    background: #f5f8fb;
}

.platform-modules-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.platform-modules-grid article {
    min-height: 250px;
    padding: 29px;
    border: 1px solid #dfe7ed;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(25, 52, 92, 0.06);
    transition: 0.28s ease;
}

.platform-modules-grid article:hover {
    transform: translateY(-7px);
    border-color: #add9d7;
    box-shadow: 0 25px 52px rgba(25, 52, 92, 0.13);
}

.platform-modules-grid article > span {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.platform-modules-grid h3 {
    margin-top: 29px;
    color: #10233d;
    font-family: "Sora", sans-serif;
    font-size: 19px;
}

.platform-modules-grid p {
    margin-top: 11px;
    color: #66778a;
    font-size: 12px;
    line-height: 1.75;
}

/* Control */

.platform-control-section {
    padding: 115px 0;
    background: #ffffff;
}

.platform-control-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 85px;
}

.platform-control-content > p {
    max-width: 640px;
    margin-top: 20px;
    color: #66778a;
    font-size: 14px;
    line-height: 1.8;
}

.platform-control-list {
    margin-top: 29px;
    display: grid;
    gap: 13px;
}

.platform-control-list div {
    color: #35475b;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    font-weight: 600;
}

.platform-control-list i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.platform-control-panel {
    border: 1px solid #dce6eb;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 28px 65px rgba(22, 56, 79, 0.13);
    overflow: hidden;
}

.platform-control-panel-header {
    min-height: 82px;
    padding: 0 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #0b315b, #128d88);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.platform-control-panel-header small,
.platform-control-panel-header strong {
    display: block;
}

.platform-control-panel-header small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.platform-control-panel-header strong {
    margin-top: 4px;
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.platform-control-panel-header > span {
    padding: 8px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 8px;
    font-weight: 700;
}

.platform-control-panel-header > span i {
    margin-right: 6px;
    color: #59ebc8;
    font-size: 6px;
}

.platform-control-activity {
    padding: 21px;
    display: grid;
    gap: 11px;
}

.platform-control-activity article {
    min-height: 78px;
    padding: 13px;
    border: 1px solid #dfe7ec;
    border-radius: 13px;
    background: #f9fbfc;
    display: grid;
    grid-template-columns: 41px 1fr auto;
    align-items: center;
    gap: 12px;
}

.platform-control-activity article > span {
    width: 41px;
    height: 41px;
    border-radius: 11px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-activity-green {
    background: linear-gradient(135deg, #138767, #2bc196);
}

.platform-activity-blue {
    background: linear-gradient(135deg, #2c66c9, #4b9ee2);
}

.platform-activity-purple {
    background: linear-gradient(135deg, #633fb7, #9564d9);
}

.platform-activity-orange {
    background: linear-gradient(135deg, #b86513, #e89b32);
}

.platform-control-activity strong,
.platform-control-activity small {
    display: block;
}

.platform-control-activity strong {
    color: #20354b;
    font-size: 10px;
}

.platform-control-activity small {
    margin-top: 4px;
    color: #8794a3;
    font-size: 7px;
}

.platform-control-activity em {
    color: #8d99a6;
    font-size: 7px;
    font-style: normal;
}

.platform-control-footer {
    min-height: 72px;
    padding: 0 23px;
    border-top: 1px solid #dfe7ec;
    background: #f7fafb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.platform-control-footer small,
.platform-control-footer strong {
    display: block;
}

.platform-control-footer small {
    color: #8a97a5;
    font-size: 7px;
}

.platform-control-footer strong {
    margin-top: 3px;
    color: #147b68;
    font-size: 10px;
}

.platform-control-footer > span {
    color: #169383;
    font-family: "Sora", sans-serif;
    font-size: 21px;
    font-weight: 700;
}

/* Wallet */

.platform-wallet-section {
    padding: 115px 0;
    background: #f5f8fb;
}

.platform-wallet-grid {
    margin-top: 58px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 85px;
}

.platform-wallet-visual {
    position: relative;
}

.platform-wallet-card {
    min-height: 320px;
    padding: 34px;
    border-radius: 26px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(68, 226, 213, 0.30),
            transparent 30%
        ),
        linear-gradient(135deg, #092a51, #127b7e);
    box-shadow: 0 30px 70px rgba(13, 59, 80, 0.25);
}

.platform-wallet-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.platform-wallet-card-top > span {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-wallet-card-top small {
    color: rgba(255, 255, 255, 0.60);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.platform-wallet-card > p {
    margin-top: 55px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
}

.platform-wallet-card > strong {
    margin-top: 5px;
    display: block;
    font-family: "Sora", sans-serif;
    font-size: 45px;
    letter-spacing: -0.04em;
}

.platform-wallet-balances {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.platform-wallet-balances div {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.09);
}

.platform-wallet-balances small,
.platform-wallet-balances strong {
    display: block;
}

.platform-wallet-balances small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 8px;
}

.platform-wallet-balances strong {
    margin-top: 5px;
    font-size: 13px;
}

.platform-wallet-products {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.platform-wallet-products div {
    min-height: 95px;
    padding: 13px;
    border: 1px solid #dce6eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(22, 56, 79, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    color: #405469;
    font-size: 8px;
    font-weight: 700;
}

.platform-wallet-products i {
    color: #16989a;
    font-size: 18px;
}

.platform-wallet-content h3 {
    color: #10243d;
    font-family: "Sora", sans-serif;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.platform-wallet-content > p {
    margin-top: 18px;
    color: #66778a;
    font-size: 14px;
    line-height: 1.8;
}

.platform-wallet-features {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.platform-wallet-features article {
    padding: 18px;
    border: 1px solid #dfe7ec;
    border-radius: 15px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
}

.platform-wallet-features i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-wallet-features strong {
    color: #263b50;
    font-size: 11px;
}

.platform-wallet-features p {
    margin-top: 4px;
    color: #7b8998;
    font-size: 9px;
    line-height: 1.5;
}

/* Products */

.platform-products-section {
    padding: 115px 0;
    background: #ffffff;
}

.platform-products-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.platform-product-card {
    min-height: 275px;
    padding: 29px;
    border-radius: 21px;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(29, 48, 80, 0.15);
    transition: 0.28s ease;
}

.platform-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 62px rgba(29, 48, 80, 0.22);
}

.platform-product-card > span {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.platform-product-card h3 {
    margin-top: 35px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 21px;
}

.platform-product-card p {
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    line-height: 1.7;
}

.platform-product-card small {
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 9px;
    font-weight: 700;
}

.platform-product-blue {
    background: linear-gradient(135deg, #0d3d78, #287fc1);
}

.platform-product-purple {
    background: linear-gradient(135deg, #351064, #843ab8);
}

.platform-product-orange {
    background: linear-gradient(135deg, #713a05, #da8c17);
}

.platform-product-green {
    background: linear-gradient(135deg, #074d43, #17977e);
}

.platform-product-red {
    background: linear-gradient(135deg, #71172f, #cb425c);
}

.platform-product-cyan {
    background: linear-gradient(135deg, #07516b, #1aa7b7);
}

/* Integrations */

.platform-integrations-section {
    padding: 115px 0;
    background: #f5f8fb;
}

.platform-integrations-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 85px;
}

.platform-integrations-content > p {
    max-width: 620px;
    margin-top: 20px;
    color: #66778a;
    font-size: 14px;
    line-height: 1.8;
}

.platform-integrations-content > a {
    margin-top: 28px;
    color: #15999b;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
}

.platform-integrations-visual {
    position: relative;
    max-width: 570px;
    aspect-ratio: 1;
    margin: auto;
    border: 1px dashed #b7d9dd;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at center,
            rgba(30, 159, 166, 0.12),
            transparent 45%
        ),
        #ffffff;
}

.platform-integrations-visual::before {
    content: "";
    position: absolute;
    width: 68%;
    height: 68%;
    top: 16%;
    left: 16%;
    border: 1px solid #dbe8ec;
    border-radius: 50%;
}

.platform-integration-center {
    position: absolute;
    z-index: 3;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    border-radius: 42px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    box-shadow: 0 28px 55px rgba(18, 85, 132, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate(-50%, -50%);
}

.platform-integration-center span {
    font-family: "Sora", sans-serif;
    font-size: 46px;
    font-weight: 700;
}

.platform-integration-center strong {
    margin-top: 5px;
    font-size: 10px;
}

.platform-integration-node {
    position: absolute;
    z-index: 4;
    min-width: 120px;
    padding: 13px;
    border: 1px solid #dce6eb;
    border-radius: 14px;
    color: #1d3850;
    background: #ffffff;
    box-shadow: 0 15px 32px rgba(27, 67, 96, 0.12);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 9px;
    font-weight: 700;
}

.platform-integration-node i {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-node-one {
    top: 5%;
    left: 33%;
}

.platform-node-two {
    top: 25%;
    right: 1%;
}

.platform-node-three {
    right: 3%;
    bottom: 20%;
}

.platform-node-four {
    left: 35%;
    bottom: 3%;
}

.platform-node-five {
    left: 1%;
    bottom: 20%;
}

.platform-node-six {
    top: 25%;
    left: 1%;
}

/* Security */

.platform-security-section {
    padding: 115px 0;
    background: #ffffff;
}

.platform-security-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.platform-security-grid article {
    min-height: 235px;
    padding: 28px;
    border: 1px solid #dfe7ec;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(27, 57, 73, 0.06);
    transition: 0.25s ease;
}

.platform-security-grid article:hover {
    transform: translateY(-7px);
    border-color: #add9d7;
    box-shadow: 0 25px 50px rgba(27, 57, 73, 0.12);
}

.platform-security-grid article > span {
    width: 53px;
    height: 53px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.platform-security-grid h3 {
    margin-top: 31px;
    color: #132d44;
    font-family: "Sora", sans-serif;
    font-size: 18px;
}

.platform-security-grid p {
    margin-top: 10px;
    color: #66788a;
    font-size: 12px;
    line-height: 1.7;
}

/* Architecture */

.platform-architecture-section {
    padding: 115px 0;
    background: #f5f8fb;
}

.platform-architecture-flow {
    margin-top: 58px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}

.platform-architecture-flow article {
    min-height: 220px;
    padding: 25px;
    border: 1px solid #dce6eb;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(27, 57, 73, 0.06);
    text-align: center;
}

.platform-architecture-flow article > span {
    width: 56px;
    height: 56px;
    margin: auto;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #18569d, #1bb1aa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.platform-architecture-flow small {
    margin-top: 25px;
    color: #15999b;
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.platform-architecture-flow h3 {
    margin-top: 8px;
    color: #142e44;
    font-family: "Sora", sans-serif;
    font-size: 16px;
}

.platform-architecture-flow p {
    margin-top: 9px;
    color: #708091;
    font-size: 10px;
    line-height: 1.6;
}

.platform-flow-arrow {
    color: #1b9b9d;
    font-size: 17px;
}

/* CTA */

.platform-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(65, 231, 207, 0.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #07152f 0%,
            #104b73 55%,
            #148d91 100%
        );
}

/* Responsive */

@media (max-width: 1050px) {
    .platform-hero-container,
    .platform-intro-grid,
    .platform-control-grid,
    .platform-wallet-grid,
    .platform-integrations-grid {
        grid-template-columns: 1fr;
    }

    .platform-dashboard-window {
        max-width: 100%;
        transform: none;
    }

    .platform-stats-grid,
    .platform-modules-grid,
    .platform-products-grid,
    .platform-security-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .platform-architecture-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .platform-flow-arrow {
        display: none;
    }
}

@media (max-width: 700px) {
    .platform-hero-section {
        min-height: auto;
        padding: 130px 0 80px;
    }

    .platform-hero-content h1 {
        font-size: 46px;
        line-height: 1.02;
    }

    .platform-hero-content > p {
        font-size: 14px;
    }

    .platform-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .platform-hero-primary,
    .platform-hero-secondary {
        width: 100%;
    }

    .platform-hero-points {
        align-items: flex-start;
        flex-direction: column;
    }

    .platform-dashboard-header {
        grid-template-columns: 1fr auto;
    }

    .platform-dashboard-live {
        display: none;
    }

    .platform-dashboard-body {
        grid-template-columns: 45px 1fr;
    }

    .platform-dashboard-content {
        padding: 11px;
    }

    .platform-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .platform-dashboard-main {
        grid-template-columns: 1fr;
    }

    .platform-floating-card {
        display: none;
    }

    .platform-stats-grid,
    .platform-modules-grid,
    .platform-products-grid,
    .platform-security-grid,
    .platform-architecture-flow {
        grid-template-columns: 1fr;
    }

    .platform-intro-section,
    .platform-modules-section,
    .platform-control-section,
    .platform-wallet-section,
    .platform-products-section,
    .platform-integrations-section,
    .platform-security-section,
    .platform-architecture-section {
        padding: 80px 0;
    }

    .platform-control-grid,
    .platform-wallet-grid,
    .platform-integrations-grid {
        gap: 45px;
    }

    .platform-wallet-balances,
    .platform-wallet-features {
        grid-template-columns: 1fr;
    }

    .platform-wallet-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .platform-wallet-card > strong {
        font-size: 36px;
    }

    .platform-integrations-visual {
        max-width: 100%;
    }

    .platform-integration-center {
        width: 110px;
        height: 110px;
        border-radius: 30px;
    }

    .platform-integration-center span {
        font-size: 34px;
    }

    .platform-integration-node {
        min-width: auto;
        padding: 8px;
    }

    .platform-integration-node span {
        display: none;
    }
}

/* =========================================================
   INFORMATION HUB
========================================================= */

.hub-hero-section {
    position: relative;
    padding: 175px 0 105px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(50, 221, 203, 0.22),
            transparent 28%
        ),
        linear-gradient(135deg, #07172f, #0d4970 55%, #13998f);
    overflow: hidden;
}

.hub-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.hub-hero-glow-one {
    width: 500px;
    height: 500px;
    top: -100px;
    left: -150px;
    background: rgba(48, 97, 220, 0.26);
}

.hub-hero-glow-two {
    width: 600px;
    height: 600px;
    right: -170px;
    bottom: -220px;
    background: rgba(40, 218, 193, 0.24);
}

.hub-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    text-align: center;
}

.hub-breadcrumb {
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 10px;
}

.hub-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
}

.hub-breadcrumb i {
    font-size: 6px;
}

.hub-label {
    color: #6ae4d7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hub-hero-content h1 {
    max-width: 980px;
    margin: 18px auto 0;
    font-family: "Sora", sans-serif;
    font-size: clamp(52px, 6vw, 82px);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.hub-hero-content h1 span {
    color: #60ded1;
}

.hub-hero-content > p {
    max-width: 700px;
    margin: 23px auto 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.8;
}

.hub-search {
    max-width: 680px;
    margin: 35px auto 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(12px);
}

.hub-search > i {
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.68);
}

.hub-search input {
    min-height: 48px;
    border: none;
    color: #ffffff;
    background: transparent;
    outline: none;
    font-size: 12px;
}

.hub-search input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.hub-search button {
    min-height: 48px;
    padding: 0 21px;
    border: none;
    border-radius: 10px;
    color: #10263b;
    background: #ffffff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.hub-categories-section {
    padding: 23px 0;
    border-bottom: 1px solid #e0e7ed;
    background: #ffffff;
}

.hub-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.hub-categories a {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #dce5eb;
    border-radius: 100px;
    color: #5c6e80;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    font-weight: 700;
}

.hub-categories a span {
    padding: 3px 6px;
    border-radius: 100px;
    background: #edf2f6;
    font-size: 7px;
}

.hub-categories a.active,
.hub-categories a:hover {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #2864d0, #1aa99d);
}

.hub-featured-section,
.hub-posts-section,
.article-related-section {
    padding: 110px 0;
    background: #ffffff;
}

.hub-section-heading {
    margin-bottom: 45px;
}

.hub-section-heading h2,
.hub-posts-heading h2 {
    max-width: 750px;
    margin-top: 14px;
    color: #10243c;
    font-family: "Sora", sans-serif;
    font-size: clamp(38px, 4.5vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.hub-section-heading h2 span,
.hub-posts-heading h2 span {
    color: #159b91;
}

.hub-featured-card {
    border: 1px solid #dfe7ec;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(22, 51, 76, 0.10);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    overflow: hidden;
}

.hub-featured-image {
    min-height: 480px;
    background: #eaf1f4;
}

.hub-featured-image img,
.hub-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-featured-content {
    padding: 55px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.hub-category-badge {
    padding: 7px 10px;
    border-radius: 100px;
    color: #147b70;
    background: #e9f8f4;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.hub-featured-content h2 {
    margin-top: 20px;
    color: #10243c;
    font-family: "Sora", sans-serif;
    font-size: 35px;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.hub-featured-content p {
    margin-top: 17px;
    color: #66788a;
    font-size: 13px;
    line-height: 1.8;
}

.hub-post-meta {
    margin-top: 19px;
    color: #8995a3;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 8px;
}

.hub-post-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hub-read-button {
    margin-top: 27px;
    min-height: 49px;
    padding: 0 18px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #2864d0, #1aa99d);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
}

.hub-posts-section {
    background: #f5f8fa;
}

.hub-posts-heading {
    margin-bottom: 47px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.hub-posts-heading > p {
    color: #728193;
    font-size: 11px;
}

.hub-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.hub-post-card {
    border: 1px solid #dfe7ec;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 36px rgba(25, 54, 77, 0.07);
    overflow: hidden;
    transition: 0.28s ease;
}

.hub-post-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 55px rgba(25, 54, 77, 0.13);
}

.hub-post-image {
    position: relative;
    height: 235px;
    background: #eaf1f4;
    display: block;
}

.hub-post-image > span {
    position: absolute;
    left: 18px;
    bottom: 17px;
    padding: 7px 10px;
    border-radius: 100px;
    color: #ffffff;
    background: rgba(9, 35, 56, 0.82);
    backdrop-filter: blur(8px);
    font-size: 8px;
    font-weight: 700;
}

.hub-image-placeholder {
    width: 100%;
    height: 100%;
    color: #ffffff;
    background: linear-gradient(135deg, #123e6b, #1ba395);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.hub-post-content {
    padding: 25px;
}

.hub-post-content .hub-post-meta {
    margin-top: 0;
}

.hub-post-content h3 {
    margin-top: 16px;
    color: #12283f;
    font-family: "Sora", sans-serif;
    font-size: 19px;
    line-height: 1.35;
}

.hub-post-content p {
    margin-top: 12px;
    color: #6a7a8c;
    font-size: 11px;
    line-height: 1.75;
}

.hub-post-link {
    margin-top: 20px;
    color: #15988e;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 700;
}

.hub-pagination {
    margin-top: 45px;
}

.hub-empty-state {
    padding: 80px 25px;
    text-align: center;
}

.hub-empty-state > i {
    color: #9daab7;
    font-size: 42px;
}

.hub-empty-state h3 {
    margin-top: 18px;
    color: #1c354d;
    font-family: "Sora", sans-serif;
    font-size: 23px;
}

.hub-empty-state p {
    margin-top: 9px;
    color: #758496;
    font-size: 11px;
}

.hub-empty-state a {
    margin-top: 22px;
    color: #15988e;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
}

.hub-cta-box {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(53, 223, 200, 0.3),
            transparent 28%
        ),
        linear-gradient(135deg, #07172f, #0d4a70, #149b91);
}

/* =========================================================
   ARTICLE PAGE
========================================================= */

.article-hero-section {
    padding: 175px 0 100px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(43, 222, 198, 0.23),
            transparent 28%
        ),
        linear-gradient(135deg, #07172f, #0d4770, #13978f);
}

.article-hero-container {
    max-width: 1000px;
    text-align: center;
}

.article-breadcrumb {
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 9px;
}

.article-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
}

.article-category {
    padding: 8px 12px;
    border-radius: 100px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.article-hero-container h1 {
    margin-top: 22px;
    font-family: "Sora", sans-serif;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1.05;
    letter-spacing: -0.06em;
}

.article-hero-container > p {
    max-width: 760px;
    margin: 23px auto 0;
    color: rgba(255, 255, 255, 0.73);
    font-size: 14px;
    line-height: 1.8;
}

.article-meta {
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    font-size: 9px;
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.article-main-section {
    padding: 90px 0 115px;
    background: #ffffff;
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 55px;
}

.article-featured-image {
    margin-bottom: 45px;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(25, 50, 76, 0.12);
    overflow: hidden;
}

.article-featured-image img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

.article-content {
    color: #415469;
    font-size: 15px;
    line-height: 1.9;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    margin: 40px 0 15px;
    color: #10283f;
    font-family: "Sora", sans-serif;
    line-height: 1.3;
}

.article-content h2 {
    font-size: 32px;
}

.article-content h3 {
    font-size: 24px;
}

.article-content p {
    margin: 0 0 20px;
}

.article-content ul,
.article-content ol {
    margin: 20px 0;
    padding-left: 25px;
}

.article-content li {
    margin: 9px 0;
}

.article-content a {
    color: #15988e;
    text-decoration: underline;
}

.article-content blockquote {
    margin: 30px 0;
    padding: 24px 28px;
    border-left: 4px solid #15988e;
    border-radius: 0 15px 15px 0;
    color: #2b485c;
    background: #edf8f6;
    font-size: 17px;
}

.article-sidebar {
    position: sticky;
    top: 120px;
    display: grid;
    gap: 18px;
}

.article-sidebar-card {
    padding: 26px;
    border: 1px solid #dfe7ec;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(25, 54, 77, 0.07);
}

.article-sidebar-card > span {
    color: #15988e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.article-sidebar-card > div {
    margin-top: 19px;
    padding-top: 16px;
    border-top: 1px solid #e7edf1;
}

.article-sidebar-card small,
.article-sidebar-card strong {
    display: block;
}

.article-sidebar-card small {
    color: #8794a2;
    font-size: 8px;
}

.article-sidebar-card strong {
    margin-top: 5px;
    color: #20384e;
    font-size: 11px;
}

.article-contact-card {
    color: #ffffff;
    border: none;
    background: linear-gradient(135deg, #0b3158, #148d84);
}

.article-contact-card > i {
    font-size: 25px;
}

.article-contact-card h3 {
    margin-top: 20px;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    line-height: 1.35;
}

.article-contact-card p {
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 10px;
    line-height: 1.7;
}

.article-contact-card > a {
    margin-top: 20px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 700;
}

.article-related-section {
    background: #f5f8fa;
}

@media (max-width: 950px) {
    .hub-featured-card,
    .article-layout {
        grid-template-columns: 1fr;
    }

    .hub-featured-image {
        min-height: 380px;
    }

    .hub-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .article-sidebar {
        position: static;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .hub-hero-section,
    .article-hero-section {
        padding: 135px 0 80px;
    }

    .hub-hero-content h1,
    .article-hero-container h1 {
        font-size: 45px;
    }

    .hub-search {
        grid-template-columns: auto 1fr;
    }

    .hub-search button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hub-featured-section,
    .hub-posts-section,
    .article-main-section,
    .article-related-section {
        padding: 80px 0;
    }

    .hub-featured-content {
        padding: 30px 23px;
    }

    .hub-featured-content h2 {
        font-size: 27px;
    }

    .hub-posts-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .hub-posts-grid,
    .article-sidebar {
        grid-template-columns: 1fr;
    }

    .hub-post-image {
        height: 220px;
    }

    .article-content {
        font-size: 14px;
    }

    .article-content h2 {
        font-size: 27px;
    }
}

/* =========================================================
   BLOG ARTICLE CONTENT LIST FIX
========================================================= */

.article-content ul,
.article-content ol {
    display: block !important;
    margin: 22px 0 28px !important;
    padding-left: 28px !important;
    list-style-position: outside !important;
}

.article-content ul {
    list-style-type: disc !important;
}

.article-content ol {
    list-style-type: decimal !important;
}

.article-content ul li,
.article-content ol li {
    display: list-item !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #415469;
    font-size: 15px;
    line-height: 1.75;
}

.article-content ul li::marker,
.article-content ol li::marker {
    color: #15988e;
    font-weight: 700;
}

.article-content li p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

.article-content h2 {
    margin-top: 42px !important;
    margin-bottom: 16px !important;
}

.article-content h3 {
    margin-top: 30px !important;
    margin-bottom: 12px !important;
}

.article-content > h2:first-child {
    margin-top: 0 !important;
}

.article-content p {
    margin: 0 0 20px !important;
}

@media (max-width: 650px) {
    .article-content ul,
    .article-content ol {
        padding-left: 23px !important;
    }

    .article-content ul li,
    .article-content ol li {
        font-size: 14px;
    }
}

/* =========================================================
   ARTICLE TYPOGRAPHY FINAL POLISH
========================================================= */

.article-content {
    color: #3f5369;
    font-size: 15px;
    line-height: 1.8;
}

.article-content > *:first-child {
    margin-top: 0 !important;
}

.article-content h2 {
    margin: 42px 0 18px !important;
    color: #10283f;
    font-family: "Sora", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.article-content h3 {
    margin: 28px 0 10px !important;
    color: #17344e;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.35;
}

.article-content p {
    margin: 0 0 18px !important;
    color: #4d6176;
    font-size: 15px;
    line-height: 1.8;
}

.article-content ul,
.article-content ol {
    margin: 18px 0 30px !important;
    padding-left: 24px !important;
}

.article-content li {
    min-height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 0 0 3px !important;
    color: #40566c;
    font-size: 15px;
    line-height: 1.65;
}

.article-content li::marker {
    color: #15988e;
}

.article-main {
    min-width: 0;
}

.article-layout {
    align-items: start;
}

.article-sidebar {
    top: 125px;
}

@media (max-width: 650px) {
    .article-content h2 {
        margin-top: 34px !important;
        font-size: 26px;
    }

    .article-content h3 {
        margin-top: 24px !important;
        font-size: 19px;
    }

    .article-content p,
    .article-content li {
        font-size: 14px;
    }
}


/* =========================================================
   BRAND INFO CARD AUTO SLIDER
========================================================= */

/*.brand-info-card {*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*}*/

/*.brand-info-slide {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    padding: inherit;*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    transform: translateY(12px);*/
/*    transition:*/
/*        opacity 0.55s ease,*/
/*        visibility 0.55s ease,*/
/*        transform 0.55s ease;*/
/*}*/

/*.brand-info-slide.active {*/
/*    position: relative;*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*    transform: translateY(0);*/
/*}*/

/*.brand-info-slide .brand-info-lines {*/
/*    margin-bottom: 34px;*/
/*}*/

/*.brand-info-slide small {*/
/*    display: block;*/
/*}*/

/*.brand-info-slide h3 {*/
/*    margin-top: 20px;*/
/*}*/

/*.brand-info-slide p {*/
/*    margin-top: 22px;*/
/*}*/
/* Brand info content transition */

.brand-info-card small,
.brand-info-card h3,
.brand-info-card p {
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.brand-info-card.is-changing small,
.brand-info-card.is-changing h3,
.brand-info-card.is-changing p {
    opacity: 0;
    transform: translateY(8px);
}

.brand-info-lines span {
    transition:
        background-color 0.25s ease,
        opacity 0.25s ease;
}