:root {
    --ag-ink: #071026;
    --ag-ink-soft: #101b36;
    --ag-night: #050817;
    --ag-night-elevated: #0b1228;
    --ag-blue: #0759d9;
    --ag-blue-bright: #0a72f5;
    --ag-cyan: #08cbd4;
    --ag-orange: #ff7315;
    --ag-white: #ffffff;
    --ag-cloud: #f3f7fc;
    --ag-cloud-blue: #eaf2ff;
    --ag-line: #dbe4f0;
    --ag-muted: #64718a;
    --ag-success: #12a66a;
    --ag-shadow-sm: 0 12px 34px rgba(7, 16, 38, 0.08);
    --ag-shadow-lg: 0 34px 90px rgba(2, 8, 25, 0.18);
    --ag-container: 1220px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 94px;
}

body.ag-body {
    margin: 0;
    color: var(--ag-ink);
    background: var(--ag-white);
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

.ag-body h1,
.ag-body h2,
.ag-body h3,
.ag-body h4,
.ag-body h5,
.ag-body h6,
.ag-body .h1,
.ag-body .h2,
.ag-body .h3,
.ag-body .h4,
.ag-body .h5,
.ag-body .h6 {
    margin-top: 0;
    color: var(--ag-ink);
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.ag-body p {
    margin-top: 0;
}

.ag-body a {
    text-decoration: none;
}

.ag-body img {
    max-width: 100%;
}

.ag-site-shell {
    min-height: 100vh;
    overflow: clip;
}

.ag-page {
    background: var(--ag-white);
}

.ag-page .container,
.ag-navbar .container,
.ag-footer .container,
.ag-page-header .container {
    width: calc(100% - 40px);
    max-width: var(--ag-container);
    padding-right: 0;
    padding-left: 0;
}

.ag-section {
    position: relative;
    padding: 118px 0;
}

.ag-section-intro {
    margin-bottom: 56px;
}

.ag-intro-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: end;
}

.ag-intro-split > p {
    max-width: 550px;
    margin: 0 0 6px;
    color: var(--ag-muted);
    font-size: 18px;
}

.ag-intro-centered {
    max-width: 780px;
    margin-right: auto;
    margin-bottom: 58px;
    margin-left: auto;
    text-align: center;
}

.ag-section-intro h2 {
    margin-bottom: 0;
    font-size: clamp(38px, 4.4vw, 64px);
    line-height: 1.08;
}

.ag-intro-centered > p:last-child {
    max-width: 650px;
    margin: 22px auto 0;
    color: var(--ag-muted);
    font-size: 18px;
}

.ag-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--ag-blue);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.ag-eyebrow-dark {
    color: var(--ag-cyan);
}

.ag-live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ag-cyan);
    box-shadow: 0 0 0 6px rgba(8, 203, 212, 0.13);
}

.ag-live-dot::after {
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(8, 203, 212, 0.5);
    border-radius: inherit;
    content: "";
    animation: agPulse 2s ease-out infinite;
}

.ag-button {
    display: inline-flex;
    min-height: 54px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.ag-button:hover {
    transform: translateY(-2px);
}

.ag-button-primary,
.ag-page .ag-button-primary,
.ag-navbar .ag-button-primary {
    color: var(--ag-white) !important;
    background: var(--ag-orange) !important;
    border-color: var(--ag-orange) !important;
    box-shadow: 0 15px 34px rgba(255, 115, 21, 0.22) !important;
}

.ag-button-primary:hover,
.ag-page .ag-button-primary:hover,
.ag-navbar .ag-button-primary:hover {
    color: var(--ag-white) !important;
    background: #e95f04 !important;
    border-color: #e95f04 !important;
    box-shadow: 0 18px 40px rgba(255, 115, 21, 0.3) !important;
}

.ag-button-ghost {
    color: var(--ag-white);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.23);
}

.ag-button-ghost:hover {
    color: var(--ag-white);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.ag-button-sm {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13px;
}

.ag-button-full {
    width: 100%;
}

.ag-text-button,
.ag-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ag-blue);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.ag-text-button i,
.ag-text-link i {
    transition: transform 180ms ease;
}

.ag-text-button:hover i,
.ag-text-link:hover i {
    transform: translateX(4px);
}

/* Navigation */
.ag-navbar {
    z-index: 1030;
    top: 0 !important;
    padding: 0;
    background: rgba(5, 8, 23, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    backdrop-filter: blur(18px);
}

.ag-navbar.is-scrolled {
    background: rgba(5, 8, 23, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.ag-nav-inner {
    min-height: 80px;
}

.ag-brand {
    display: inline-flex;
    padding: 0;
    align-items: center;
    gap: 12px;
}

.ag-brand-mark {
    display: inline-flex;
    width: 46px;
    height: 46px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;
    background: #15171d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.ag-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ag-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ag-brand-copy strong {
    color: var(--ag-white);
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.ag-brand-copy small {
    margin-top: 5px;
    color: #8d99b4;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ag-navbar .ag-nav-links .nav-link {
    position: relative;
    padding: 30px 14px;
    color: #aeb8cd;
    font-size: 13px;
    font-weight: 700;
}

.ag-navbar .ag-nav-links .nav-link::after {
    position: absolute;
    right: 14px;
    bottom: 22px;
    left: 14px;
    height: 2px;
    content: "";
    background: var(--ag-cyan);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 180ms ease;
}

.ag-navbar .ag-nav-links .nav-link:hover,
.ag-navbar .ag-nav-links .nav-link:focus {
    color: var(--ag-white);
}

.ag-navbar .ag-nav-links .nav-link:hover::after,
.ag-navbar .ag-nav-links .nav-link:focus::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.ag-nav-actions {
    display: flex;
    align-items: center;
    gap: 17px;
}

.ag-login-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c8d0df;
    font-size: 13px;
    font-weight: 700;
}

.ag-login-link:hover {
    color: var(--ag-cyan);
}

.ag-menu-toggle {
    width: 44px;
    height: 42px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    box-shadow: none !important;
}

.ag-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    background: var(--ag-white);
}

/* Hero */
.ag-hero {
    position: relative;
    min-height: 880px;
    padding: 105px 0 0;
    overflow: hidden;
    color: var(--ag-white);
    background: var(--ag-night);
}

.ag-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: rgba(255, 255, 255, 0.1);
}

.ag-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.13;
    background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72 0H0V72' fill='none' stroke='%23869ab9' stroke-width='0.6'/%3E%3C/svg%3E");
}

.ag-hero-orb,
.ag-demo-orb,
.ag-page-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.ag-hero-orb-cyan {
    top: 90px;
    right: -90px;
    width: 310px;
    height: 310px;
    background: rgba(8, 203, 212, 0.12);
    box-shadow: 0 0 110px rgba(8, 203, 212, 0.25);
}

.ag-hero-orb-orange {
    bottom: 90px;
    left: -110px;
    width: 220px;
    height: 220px;
    background: rgba(255, 115, 21, 0.09);
    box-shadow: 0 0 100px rgba(255, 115, 21, 0.16);
}

.ag-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 48px;
    align-items: center;
}

.ag-hero-copy {
    max-width: 600px;
    padding-bottom: 54px;
}

.ag-hero-copy h1 {
    margin-bottom: 28px;
    color: var(--ag-white);
    font-size: clamp(50px, 6.2vw, 83px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.055em;
}

.ag-hero-copy h1 span {
    color: var(--ag-cyan);
}

.ag-hero-lead {
    max-width: 590px;
    margin-bottom: 34px;
    color: #aeb9cf;
    font-size: 18px;
    line-height: 1.75;
}

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

.ag-hero-assurance {
    display: flex;
    margin-top: 26px;
    flex-wrap: wrap;
    gap: 18px;
    color: #8491ab;
    font-size: 12px;
    font-weight: 600;
}

.ag-hero-assurance span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ag-hero-assurance i {
    color: var(--ag-cyan);
}

.ag-hero-visual {
    position: relative;
    min-width: 0;
    padding: 56px 0 80px;
}

.ag-dashboard-stage {
    --ag-rx: 1deg;
    --ag-ry: -4deg;
    position: relative;
    min-height: 590px;
    perspective: 1500px;
    transform-style: preserve-3d;
}

.ag-dashboard-frame {
    position: absolute;
    z-index: 2;
    top: 44px;
    right: -70px;
    width: 730px;
    height: 510px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 18px;
    background: #f7f9fc;
    box-shadow: -35px 45px 95px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.025);
    transform: rotateX(var(--ag-rx)) rotateY(var(--ag-ry)) translateZ(15px);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform 140ms ease-out;
}

.ag-dashboard-topbar {
    display: flex;
    height: 52px;
    padding: 0 18px;
    align-items: center;
    gap: 15px;
    color: #dce3f2;
    background: #0b1228;
}

.ag-demo-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.ag-demo-brand img {
    width: 29px;
    height: 29px;
    border-radius: 7px;
    object-fit: cover;
}

.ag-demo-status {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 6px;
    color: #8995ac;
    font-size: 9px;
    font-weight: 700;
}

.ag-demo-status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #21d793;
    box-shadow: 0 0 10px rgba(33, 215, 147, 0.8);
}

.ag-demo-profile {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 7px;
    color: var(--ag-white);
    background: var(--ag-blue);
    font-size: 9px;
    font-weight: 800;
}

.ag-dashboard-body {
    display: grid;
    height: calc(100% - 52px);
    grid-template-columns: 58px 1fr;
}

.ag-demo-sidebar {
    display: flex;
    padding: 16px 10px;
    align-items: center;
    flex-direction: column;
    gap: 13px;
    background: var(--ag-white);
    border-right: 1px solid #e5eaf2;
}

.ag-demo-sidebar span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #9ca8bc;
    font-size: 12px;
}

.ag-demo-sidebar span.is-active {
    color: var(--ag-white);
    background: var(--ag-blue);
    box-shadow: 0 8px 18px rgba(7, 89, 217, 0.22);
}

.ag-demo-sidebar span:last-child {
    margin-top: auto;
}

.ag-demo-content {
    min-width: 0;
    padding: 21px 22px;
}

.ag-demo-heading {
    display: flex;
    margin-bottom: 18px;
    align-items: center;
    justify-content: space-between;
}

.ag-demo-heading small {
    display: block;
    margin-bottom: 4px;
    color: #9aa6b9;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.ag-demo-heading h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.04em;
}

.ag-demo-heading button {
    position: relative;
    display: grid;
    width: 33px;
    height: 33px;
    padding: 0;
    place-items: center;
    border: 1px solid #e1e7f0;
    border-radius: 8px;
    color: #78849a;
    background: var(--ag-white);
    font-size: 11px;
}

.ag-demo-heading button span {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 5px;
    height: 5px;
    border: 1px solid var(--ag-white);
    border-radius: 50%;
    background: var(--ag-orange);
}

.ag-demo-kpis {
    display: grid;
    margin-bottom: 15px;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.ag-demo-kpis article {
    display: flex;
    min-width: 0;
    padding: 13px;
    align-items: center;
    gap: 10px;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    background: var(--ag-white);
    box-shadow: 0 7px 16px rgba(7, 16, 38, 0.035);
}

.ag-kpi-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    font-size: 11px;
}

.ag-kpi-blue {
    color: var(--ag-blue);
    background: #eaf2ff;
}

.ag-kpi-cyan {
    color: #078e96;
    background: #e2fafa;
}

.ag-kpi-orange {
    color: var(--ag-orange);
    background: #fff0e5;
}

.ag-demo-kpis article > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ag-demo-kpis small {
    color: #8994a8;
    font-size: 7px;
    line-height: 1.25;
}

.ag-demo-kpis strong {
    margin: 2px 0;
    color: var(--ag-ink);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.1;
}

.ag-demo-kpis em {
    overflow: hidden;
    color: #45a17f;
    font-size: 6px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-demo-lower {
    display: grid;
    grid-template-columns: 1.42fr 0.9fr;
    gap: 12px;
}

.ag-chart-card,
.ag-attendance-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e3e8f0;
    border-radius: 11px;
    background: var(--ag-white);
    box-shadow: 0 7px 16px rgba(7, 16, 38, 0.035);
}

.ag-demo-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ag-demo-card-head > div {
    display: flex;
    flex-direction: column;
}

.ag-demo-card-head strong {
    color: var(--ag-ink);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
}

.ag-demo-card-head small {
    margin-top: 2px;
    color: #9ba6b8;
    font-size: 6px;
}

.ag-demo-card-head > span {
    padding: 4px 6px;
    border: 1px solid #e4e8ef;
    border-radius: 5px;
    color: #8b96a8;
    font-size: 6px;
}

.ag-bar-chart {
    display: flex;
    height: 180px;
    padding-top: 28px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 13px;
    border-bottom: 1px solid #e6ebf2;
}

.ag-bar-chart > span {
    position: relative;
    width: 20px;
    height: var(--bar);
    border-radius: 4px 4px 0 0;
    background: #cbd9ef;
    animation: agBarRise 1.1s ease both;
    transform-origin: bottom;
}

.ag-bar-chart > span.is-current {
    background: var(--ag-blue);
}

.ag-bar-chart i {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    color: #9da8ba;
    font-size: 6px;
    font-style: normal;
    transform: translateX(-50%);
}

.ag-ring-wrap {
    position: relative;
    width: 126px;
    height: 126px;
    margin: 18px auto 11px;
}

.ag-ring-wrap svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ag-ring-wrap circle {
    fill: none;
    stroke-width: 10;
}

.ag-ring-track {
    stroke: #e7edf5;
}

.ag-ring-value {
    stroke: var(--ag-cyan);
    stroke-linecap: round;
    stroke-dasharray: 295;
    stroke-dashoffset: 24;
    animation: agRingDraw 1.4s 350ms ease both;
}

.ag-ring-wrap > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.ag-ring-wrap strong {
    color: var(--ag-ink);
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    line-height: 1;
}

.ag-ring-wrap small {
    margin-top: 4px;
    color: #9aa5b8;
    font-size: 6px;
}

.ag-attendance-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #8692a7;
    font-size: 6px;
}

.ag-attendance-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ag-attendance-legend i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.ag-dot-blue {
    background: var(--ag-cyan);
}

.ag-dot-muted {
    background: #d7deea;
}

.ag-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    min-width: 235px;
    padding: 13px 14px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 12px;
    color: var(--ag-white);
    background: #101a34;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.35);
    animation: agFloat 5s ease-in-out infinite;
}

.ag-float-card-enquiry {
    z-index: 6;
    top: 2px;
    right: -4px;
    transform: translateZ(85px);
}

.ag-float-card-fee {
    z-index: 6;
    right: 18px;
    bottom: 6px;
    animation-delay: -2.4s;
    transform: translateZ(105px);
}

.ag-float-icon {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    font-size: 11px;
}

.ag-float-icon-cyan {
    color: #70f8ff;
    background: rgba(8, 203, 212, 0.13);
}

.ag-float-icon-orange {
    color: #ffad75;
    background: rgba(255, 115, 21, 0.14);
}

.ag-float-card > span:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.ag-float-card small {
    color: #8f9bb3;
    font-size: 7px;
}

.ag-float-card strong {
    margin-top: 2px;
    color: var(--ag-white);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
}

.ag-float-check {
    margin-left: auto;
    color: #2ed99a;
    font-size: 11px;
}

.ag-visual-note {
    position: absolute;
    bottom: 24px;
    left: 115px;
    color: #62708b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ag-capability-bar {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 94px;
    padding: 22px 0;
    align-items: center;
    grid-template-columns: 0.75fr 2.25fr;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ag-capability-bar p {
    margin: 0;
    color: #73809a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ag-capability-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ag-capability-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #acb7ca;
    font-size: 12px;
    font-weight: 700;
}

.ag-capability-list i {
    color: var(--ag-cyan);
}

/* Outcomes */
.ag-outcome-section {
    background: var(--ag-white);
}

.ag-outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ag-line);
    border-bottom: 1px solid var(--ag-line);
}

.ag-outcome-card {
    position: relative;
    min-height: 390px;
    padding: 46px 38px 40px;
    border-right: 1px solid var(--ag-line);
    background: var(--ag-white);
    transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.ag-outcome-card:first-child {
    border-left: 1px solid var(--ag-line);
}

.ag-outcome-card:hover {
    z-index: 2;
    background: var(--ag-cloud);
    box-shadow: var(--ag-shadow-sm);
    transform: translateY(-7px);
}

.ag-card-number {
    position: absolute;
    top: 25px;
    right: 26px;
    color: #bec8d6;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.ag-outcome-card > i {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 60px;
    place-items: center;
    border: 1px solid #bfd0ea;
    border-radius: 14px;
    color: var(--ag-blue);
    background: var(--ag-cloud-blue);
    font-size: 20px;
    transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.ag-outcome-card:hover > i {
    color: var(--ag-white);
    background: var(--ag-blue);
    transform: rotate(-6deg) translateY(-3px);
}

.ag-outcome-card h3 {
    max-width: 320px;
    margin-bottom: 15px;
    font-size: 23px;
    line-height: 1.25;
}

.ag-outcome-card p {
    margin-bottom: 24px;
    color: var(--ag-muted);
    font-size: 15px;
}

/* Modules */
.ag-modules-section {
    background: var(--ag-cloud);
}

.ag-module-explorer {
    overflow: hidden;
    border: 1px solid #ccd8e8;
    border-radius: 20px;
    background: var(--ag-white);
    box-shadow: var(--ag-shadow-lg);
}

.ag-module-tabs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border-bottom: 1px solid #dce4ef;
    background: #eef3f9;
}

.ag-module-tab {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 91px;
    padding: 15px 8px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    border: 0;
    border-right: 1px solid #dce4ef;
    color: #728097;
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    transition: color 180ms ease, background-color 180ms ease;
}

.ag-module-tab:last-child {
    border-right: 0;
}

.ag-module-tab::after {
    position: absolute;
    right: 20%;
    bottom: -1px;
    left: 20%;
    height: 3px;
    content: "";
    background: transparent;
}

.ag-module-tab i {
    font-size: 17px;
}

.ag-module-tab:hover,
.ag-module-tab.is-active {
    color: var(--ag-blue);
    background: var(--ag-white);
}

.ag-module-tab.is-active::after {
    background: var(--ag-blue);
}

.ag-module-panel {
    display: grid;
    min-height: 535px;
    padding: 62px;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 72px;
    align-items: center;
}

.ag-module-copy {
    max-width: 430px;
}

.ag-module-icon {
    display: grid;
    width: 57px;
    height: 57px;
    margin-bottom: 31px;
    place-items: center;
    border-radius: 14px;
    color: var(--ag-white);
    background: var(--ag-blue);
    box-shadow: 0 16px 32px rgba(7, 89, 217, 0.2);
    font-size: 20px;
}

.ag-module-kicker,
.ag-card-kicker {
    margin-bottom: 10px;
    color: var(--ag-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ag-module-copy h3 {
    margin-bottom: 16px;
    font-size: clamp(32px, 3.3vw, 48px);
    line-height: 1.08;
}

.ag-module-copy > p:not(.ag-module-kicker) {
    margin-bottom: 23px;
    color: var(--ag-muted);
    font-size: 16px;
}

.ag-module-copy ul {
    margin: 0 0 31px;
    padding: 0;
    list-style: none;
}

.ag-module-copy li {
    display: flex;
    margin: 10px 0;
    align-items: center;
    gap: 9px;
    color: #354158;
    font-size: 14px;
}

.ag-module-copy li i {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    color: var(--ag-blue);
    background: #eaf2ff;
    font-size: 8px;
}

.ag-module-copy.is-changing > * {
    animation: agContentSwap 360ms ease both;
}

.ag-module-preview {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d5deea;
    border-radius: 14px;
    background: #f6f8fb;
    box-shadow: 0 24px 52px rgba(7, 16, 38, 0.13);
    transform: perspective(1200px) rotateY(-4deg) rotateX(1deg);
    transition: transform 260ms ease;
}

.ag-module-preview:hover {
    transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px);
}

.ag-preview-toolbar {
    display: flex;
    min-height: 78px;
    padding: 15px 20px;
    align-items: center;
    justify-content: space-between;
    background: var(--ag-white);
    border-bottom: 1px solid #e1e7ef;
}

.ag-preview-toolbar > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ag-preview-nav-icon {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 9px;
    color: var(--ag-blue);
    background: #eaf2ff;
    font-size: 12px;
}

.ag-preview-toolbar > div > span:last-child {
    display: flex;
    flex-direction: column;
}

.ag-preview-toolbar small {
    color: #9aa5b5;
    font-size: 7px;
    text-transform: uppercase;
}

.ag-preview-toolbar strong {
    color: var(--ag-ink);
    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

.ag-preview-toolbar button {
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    color: var(--ag-white);
    background: var(--ag-blue);
    font-size: 9px;
    font-weight: 700;
}

.ag-preview-search {
    display: flex;
    margin: 20px;
    min-height: 42px;
    padding: 0 13px;
    align-items: center;
    gap: 9px;
    border: 1px solid #dde4ed;
    border-radius: 8px;
    color: #9ca7b7;
    background: var(--ag-white);
    font-size: 9px;
}

.ag-preview-search em {
    margin-left: auto;
    color: #7e8ba0;
    font-style: normal;
    font-weight: 700;
}

.ag-preview-table {
    margin: 0 20px 20px;
    overflow: hidden;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    background: var(--ag-white);
}

.ag-preview-row {
    display: grid;
    min-height: 64px;
    padding: 0 14px;
    align-items: center;
    grid-template-columns: 1.5fr 1fr 0.7fr 0.9fr;
    gap: 10px;
    border-bottom: 1px solid #edf0f4;
    color: #5f6c80;
    font-size: 8px;
}

.ag-preview-row:last-child {
    border-bottom: 0;
}

.ag-preview-row-head {
    min-height: 37px;
    color: #98a3b4;
    background: #f9fafc;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.ag-preview-row > span:first-child {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.ag-preview-row > span:first-child strong {
    display: flex;
    min-width: 0;
    color: #26334b;
    flex-direction: column;
    font-size: 9px;
}

.ag-preview-row > span:first-child small {
    color: #9ca7b8;
    font-size: 6px;
    font-weight: 500;
}

.ag-avatar {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
}

.ag-avatar-one {
    color: #0759d9;
    background: #e7f0ff;
}

.ag-avatar-two {
    color: #b35212;
    background: #ffede1;
}

.ag-avatar-three {
    color: #088b91;
    background: #e2f8f8;
}

.ag-status-active,
.ag-status-review {
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 6px;
    font-style: normal;
    font-weight: 800;
}

.ag-status-active {
    color: #0d8f5e;
    background: #e4f8f0;
}

.ag-status-review {
    color: #c05b18;
    background: #fff0e5;
}

.ag-preview-row > span:last-child {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ag-preview-row b {
    display: block;
    width: 55px;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: #e7ecf2;
}

.ag-preview-row b i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ag-blue);
}

.ag-preview-row > span:last-child small {
    color: #6c788b;
    font-size: 7px;
}

.ag-preview-footnote {
    padding: 0 20px 16px;
    color: #a2adbc;
    font-size: 7px;
    text-align: right;
}

/* Journey */
.ag-journey-section {
    overflow: hidden;
    color: var(--ag-white);
    background: var(--ag-night);
}

.ag-journey-section .ag-section-intro h2 {
    color: var(--ag-white);
}

.ag-journey-section .ag-intro-centered > p:last-child {
    color: #9da8bc;
}

.ag-journey-track {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr 36px 1fr;
    gap: 10px;
}

.ag-journey-track::before {
    position: absolute;
    z-index: 0;
    top: 61px;
    right: 5%;
    left: 5%;
    height: 1px;
    content: "";
    background: rgba(255, 255, 255, 0.12);
}

.ag-journey-track article {
    position: relative;
    z-index: 1;
    min-height: 260px;
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: #0b1228;
    transition: border-color 220ms ease, transform 220ms ease, background-color 220ms ease;
}

.ag-journey-track article:hover {
    border-color: rgba(8, 203, 212, 0.55);
    background: #101a34;
    transform: translateY(-7px);
}

.ag-journey-track article > span {
    display: block;
    color: #60708c;
    font-size: 10px;
    font-weight: 800;
}

.ag-journey-track article > i {
    display: grid;
    width: 45px;
    height: 45px;
    margin: 34px 0 23px;
    place-items: center;
    border-radius: 11px;
    color: var(--ag-cyan);
    background: rgba(8, 203, 212, 0.11);
    font-size: 16px;
}

.ag-journey-track h3 {
    margin-bottom: 8px;
    color: var(--ag-white);
    font-size: 19px;
}

.ag-journey-track p {
    margin: 0;
    color: #8f9bb0;
    font-size: 12px;
}

.ag-journey-arrow {
    position: relative;
    z-index: 2;
    color: #526078;
    font-size: 12px;
    text-align: center;
}

/* Growth */
.ag-growth-section {
    background: var(--ag-white);
}

.ag-growth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ag-growth-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    padding: 38px;
    border: 1px solid var(--ag-line);
    border-radius: 16px;
    background: var(--ag-white);
    box-shadow: 0 12px 30px rgba(7, 16, 38, 0.045);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.ag-growth-card:hover {
    border-color: #b8c8de;
    box-shadow: var(--ag-shadow-sm);
    transform: translateY(-5px);
}

.ag-growth-featured {
    display: grid;
    min-height: 515px;
    grid-column: 1 / -1;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 70px;
    color: var(--ag-white);
    background: var(--ag-ink-soft);
    border-color: var(--ag-ink-soft);
}

.ag-growth-featured:hover {
    border-color: #26395f;
}

.ag-growth-featured h3 {
    color: var(--ag-white);
}

.ag-growth-icon {
    display: grid;
    width: 53px;
    height: 53px;
    margin-bottom: 29px;
    place-items: center;
    border: 1px solid #c5d5eb;
    border-radius: 13px;
    color: var(--ag-blue);
    background: var(--ag-cloud-blue);
    font-size: 19px;
}

.ag-growth-featured .ag-growth-icon {
    color: #62f2fa;
    background: rgba(8, 203, 212, 0.1);
    border-color: rgba(8, 203, 212, 0.25);
}

.ag-growth-card h3 {
    max-width: 560px;
    margin-bottom: 14px;
    font-size: 29px;
    line-height: 1.18;
}

.ag-growth-card > p,
.ag-growth-copy > p:not(.ag-card-kicker) {
    max-width: 540px;
    color: var(--ag-muted);
    font-size: 15px;
}

.ag-growth-featured .ag-growth-copy > p:not(.ag-card-kicker) {
    color: #aeb9ce;
}

.ag-growth-featured .ag-card-kicker {
    color: var(--ag-cyan);
}

.ag-growth-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.ag-growth-copy ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ag-growth-copy li {
    display: flex;
    margin: 10px 0;
    align-items: center;
    gap: 9px;
    color: #c9d2e2;
    font-size: 13px;
}

.ag-growth-copy li i {
    color: var(--ag-cyan);
}

.ag-chat-mockup {
    width: min(100%, 450px);
    overflow: hidden;
    align-self: center;
    justify-self: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 21px;
    color: var(--ag-ink);
    background: #e8f0ec;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.32);
    transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
}

.ag-chat-head {
    display: flex;
    min-height: 70px;
    padding: 12px 17px;
    align-items: center;
    gap: 11px;
    color: var(--ag-white);
    background: #074f43;
}

.ag-chat-logo {
    display: block;
    width: 43px;
    height: 43px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.ag-chat-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ag-chat-head > span:last-child {
    display: flex;
    flex-direction: column;
}

.ag-chat-head strong {
    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

.ag-chat-head small {
    display: flex;
    margin-top: 2px;
    align-items: center;
    gap: 5px;
    color: #b8d5cf;
    font-size: 8px;
}

.ag-chat-head small i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4bf0ad;
}

.ag-chat-body {
    min-height: 350px;
    padding: 24px;
    background-color: #e7efeb;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%238aa098' stroke-width='.45' opacity='.16'%3E%3Cpath d='M10 6l4 4-4 4M38 8a5 5 0 110 10M8 37h10M39 34l5 5-5 5M25 22v8M21 26h8'/%3E%3C/g%3E%3C/svg%3E");
}

.ag-chat-in,
.ag-chat-out {
    width: fit-content;
    max-width: 78%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(20, 45, 36, 0.07);
    font-size: 11px;
    line-height: 1.45;
}

.ag-chat-in {
    background: var(--ag-white);
    border-top-left-radius: 2px;
}

.ag-chat-out {
    margin-left: auto;
    background: #d5f7df;
    border-top-right-radius: 2px;
}

.ag-chat-options {
    display: flex;
    margin-top: 17px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.ag-chat-options span {
    padding: 7px 9px;
    border: 1px solid #aacbbf;
    border-radius: 6px;
    color: #095f50;
    background: rgba(255, 255, 255, 0.7);
    font-size: 8px;
    font-weight: 700;
}

.ag-chat-note {
    display: flex;
    width: fit-content;
    margin: 24px auto 0;
    padding: 7px 10px;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    color: #557268;
    background: rgba(255, 255, 255, 0.62);
    font-size: 8px;
}

.ag-chat-note i {
    color: #098b68;
}

.ag-mini-pipeline {
    display: flex;
    margin-top: 35px;
    align-items: center;
    gap: 8px;
}

.ag-mini-pipeline span {
    display: flex;
    min-width: 105px;
    padding: 12px;
    justify-content: space-between;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    color: #77849a;
    background: var(--ag-cloud);
    font-size: 9px;
}

.ag-mini-pipeline b {
    color: var(--ag-blue);
}

.ag-mini-pipeline > i {
    width: 18px;
    height: 1px;
    background: #b8c4d5;
}

.ag-mini-calendar {
    display: flex;
    margin-top: 30px;
    gap: 8px;
}

.ag-mini-calendar span {
    display: flex;
    width: 52px;
    height: 68px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    color: #919caf;
    background: var(--ag-cloud);
    font-size: 8px;
}

.ag-mini-calendar small {
    margin-top: 5px;
    color: var(--ag-ink);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.ag-mini-calendar .is-selected {
    color: #bdd7ff;
    background: var(--ag-blue);
    border-color: var(--ag-blue);
    box-shadow: 0 12px 23px rgba(7, 89, 217, 0.2);
    transform: translateY(-8px);
}

.ag-mini-calendar .is-selected small {
    color: var(--ag-white);
}

.ag-social-row {
    display: flex;
    margin-top: 32px;
    align-items: center;
    gap: 8px;
}

.ag-social-row > i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    color: var(--ag-blue);
    background: var(--ag-cloud);
}

.ag-social-row span {
    display: flex;
    margin-left: 7px;
    flex-direction: column;
    color: #8995a8;
    font-size: 8px;
}

.ag-social-row b {
    color: var(--ag-ink);
    font-size: 11px;
}

.ag-ai-lines {
    position: relative;
    margin-top: 30px;
    padding: 21px;
    border: 1px solid #dce4ef;
    border-radius: 9px;
    background: var(--ag-cloud);
}

.ag-ai-lines i {
    display: block;
    width: 80%;
    height: 7px;
    margin: 7px 0;
    border-radius: 3px;
    background: #d5dfec;
}

.ag-ai-lines i:nth-child(2) {
    width: 92%;
}

.ag-ai-lines i:nth-child(3) {
    width: 63%;
}

.ag-ai-lines span {
    position: absolute;
    top: 16px;
    right: 18px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--ag-white);
    background: var(--ag-blue);
    font-size: 9px;
    font-weight: 800;
}

.ag-mini-stats {
    display: flex;
    margin-top: 28px;
    flex-direction: column;
    gap: 10px;
}

.ag-mini-stats span {
    display: grid;
    align-items: center;
    grid-template-columns: 75px 1fr;
    gap: 10px;
}

.ag-mini-stats small {
    color: #77849a;
    font-size: 9px;
}

.ag-mini-stats b {
    position: relative;
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 5px;
    background: #e6ebf2;
}

.ag-mini-stats b::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--stat);
    border-radius: inherit;
    content: "";
    background: var(--ag-cyan);
}

/* Roles */
.ag-roles-section {
    background: var(--ag-cloud);
}

.ag-role-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--ag-line);
    border-radius: 16px;
    background: var(--ag-white);
}

.ag-role-card {
    min-height: 265px;
    padding: 32px 27px;
    border-right: 1px solid var(--ag-line);
    transition: background-color 200ms ease, transform 200ms ease;
}

.ag-role-card:last-child {
    border-right: 0;
}

.ag-role-card:hover {
    z-index: 2;
    background: var(--ag-cloud-blue);
    transform: translateY(-6px);
}

.ag-role-card > span {
    display: grid;
    width: 49px;
    height: 49px;
    margin-bottom: 47px;
    place-items: center;
    border: 1px solid #c7d6e9;
    border-radius: 12px;
    color: var(--ag-blue);
    background: var(--ag-cloud);
}

.ag-role-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.ag-role-card p {
    margin: 0;
    color: var(--ag-muted);
    font-size: 13px;
}

/* Demo form */
.ag-demo-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    color: var(--ag-white);
    background: var(--ag-night);
}

.ag-demo-orb-one {
    top: -150px;
    right: -130px;
    width: 360px;
    height: 360px;
    background: rgba(8, 203, 212, 0.1);
    box-shadow: 0 0 130px rgba(8, 203, 212, 0.2);
}

.ag-demo-orb-two {
    bottom: -160px;
    left: -120px;
    width: 330px;
    height: 330px;
    background: rgba(255, 115, 21, 0.08);
    box-shadow: 0 0 120px rgba(255, 115, 21, 0.14);
}

.ag-demo-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 96px;
    align-items: center;
}

.ag-demo-copy h2 {
    margin-bottom: 22px;
    color: var(--ag-white);
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
}

.ag-demo-copy > p {
    max-width: 520px;
    color: #a8b3c8;
    font-size: 17px;
}

.ag-demo-points {
    display: flex;
    margin-top: 29px;
    flex-direction: column;
    gap: 11px;
}

.ag-demo-points span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d3dbea;
    font-size: 13px;
}

.ag-demo-points i {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: var(--ag-cyan);
    background: rgba(8, 203, 212, 0.11);
    font-size: 8px;
}

.ag-whatsapp-link {
    display: inline-flex;
    margin-top: 38px;
    align-items: center;
    gap: 11px;
    color: #7ce6c2;
    font-size: 13px;
    font-weight: 700;
}

.ag-whatsapp-link i {
    font-size: 20px;
}

.ag-whatsapp-link:hover {
    color: var(--ag-white);
}

.ag-demo-form-wrap {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    color: var(--ag-ink);
    background: var(--ag-white);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.33);
}

.ag-form-heading {
    padding: 31px 35px 20px;
}

.ag-form-heading > span {
    color: var(--ag-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ag-form-heading h3 {
    margin: 7px 0 4px;
    font-size: 28px;
}

.ag-form-heading p {
    margin: 0;
    color: #8e99aa;
    font-size: 11px;
}

.ag-demo-form {
    padding: 11px 35px 33px;
}

.ag-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}

.ag-demo-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ag-demo-form label > span {
    color: #59667b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.ag-demo-form input,
.ag-demo-form select {
    width: 100%;
    height: 49px;
    padding: 0 13px;
    border: 1px solid #d8e0eb;
    border-radius: 8px;
    outline: 0;
    color: var(--ag-ink);
    background: #f8fafc;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.ag-demo-form input::placeholder {
    color: #a2acba;
}

.ag-demo-form input:focus,
.ag-demo-form select:focus {
    border-color: var(--ag-blue);
    background: var(--ag-white);
    box-shadow: 0 0 0 3px rgba(7, 89, 217, 0.1);
}

.ag-recaptcha {
    margin: 14px 0;
}

.ag-form-privacy {
    display: flex;
    margin: 13px 0 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #909aaa;
    font-size: 9px;
}

/* Inner pages */
.ag-page-header {
    position: relative;
    padding: 105px 0 75px;
    overflow: hidden;
    color: var(--ag-white);
    background: var(--ag-night);
}

.ag-page-header h1 {
    margin-bottom: 26px;
    color: var(--ag-white);
    font-size: clamp(44px, 5.5vw, 72px);
}

.ag-page-orb-one {
    top: -120px;
    right: 8%;
    width: 270px;
    height: 270px;
    background: rgba(8, 203, 212, 0.11);
    box-shadow: 0 0 100px rgba(8, 203, 212, 0.2);
}

.ag-page-orb-two {
    right: 25%;
    bottom: -100px;
    width: 190px;
    height: 190px;
    background: rgba(255, 115, 21, 0.08);
    box-shadow: 0 0 90px rgba(255, 115, 21, 0.13);
}

.ag-breadcrumb {
    margin: 0;
}

.ag-breadcrumb .breadcrumb-item,
.ag-breadcrumb .breadcrumb-item a {
    color: #8f9db6;
    font-size: 12px;
}

.ag-breadcrumb .breadcrumb-item.active,
.ag-breadcrumb .breadcrumb-item a:hover {
    color: var(--ag-white);
}

.ag-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #54627b;
}

.ag-body .page-header {
    background-color: var(--ag-night);
}

.ag-body .about-img img,
.ag-body .classes-item,
.ag-body .team-item .team-text {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.ag-body .about-img img:hover,
.ag-body .classes-item:hover {
    box-shadow: var(--ag-shadow-sm);
    transform: translateY(-5px);
}

.ag-body .team-item {
    position: relative;
}

.ag-body .team-item .team-text {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 220px;
    min-height: 150px;
    padding: 24px;
    border: 10px solid var(--ag-cloud);
    border-radius: 16px;
    background: var(--ag-white);
}

.ag-body .team-item:hover .team-text {
    border-color: var(--ag-cloud-blue);
}

.ag-body .container-fluid.py-5:not(.ag-section) .btn-primary,
.ag-body .container.py-5 .btn-primary {
    border-color: var(--ag-blue) !important;
    background: var(--ag-blue) !important;
}

/* Footer */
.ag-footer {
    color: #a4afc3;
    background: #03050d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ag-footer-main {
    display: grid;
    padding: 78px 0 68px;
    grid-template-columns: 1.4fr 0.78fr 0.78fr 1fr;
    gap: 60px;
}

.ag-brand-footer {
    margin-bottom: 22px;
}

.ag-footer-brand > p {
    max-width: 350px;
    color: #7e899f;
    font-size: 13px;
}

.ag-footer-socials {
    display: flex;
    margin-top: 25px;
    gap: 8px;
}

.ag-footer-socials a {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #9ba7bc;
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.ag-footer-socials a:hover {
    color: var(--ag-white);
    background: var(--ag-blue);
    border-color: var(--ag-blue);
}

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

.ag-footer-column h2 {
    margin-bottom: 23px;
    color: var(--ag-white);
    font-size: 14px;
    letter-spacing: -0.01em;
}

.ag-footer-column > a {
    margin: 7px 0;
    color: #818da3;
    font-size: 12px;
    transition: color 180ms ease, transform 180ms ease;
}

.ag-footer-column > a:hover {
    color: var(--ag-white);
    transform: translateX(3px);
}

.ag-footer-contact > a,
.ag-footer-contact > p {
    display: flex;
    margin: 7px 0 12px;
    align-items: flex-start;
    gap: 10px;
}

.ag-footer-contact i {
    width: 17px;
    margin-top: 4px;
    color: var(--ag-cyan);
    text-align: center;
}

.ag-footer-bottom {
    display: flex;
    min-height: 71px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ag-footer-bottom p {
    margin: 0;
    color: #626d81;
    font-size: 10px;
}

.ag-footer-bottom a {
    color: #8d9bb1;
}

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

.ag-back-to-top {
    position: fixed;
    z-index: 100;
    right: 25px;
    bottom: 25px;
    display: grid;
    width: 45px;
    height: 45px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: var(--ag-white);
    background: var(--ag-blue);
    box-shadow: 0 15px 32px rgba(7, 89, 217, 0.25);
    opacity: 0;
    transform: translateY(15px);
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background-color 180ms ease;
}

.ag-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.ag-back-to-top:hover {
    background: var(--ag-orange);
}

/* Reveal and animation */
.ag-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--ag-delay, 0ms);
}

.ag-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes agPulse {
    0% {
        opacity: 0.7;
        transform: scale(0.7);
    }
    80%,
    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

@keyframes agFloat {
    0%,
    100% {
        margin-top: 0;
    }
    50% {
        margin-top: -9px;
    }
}

@keyframes agBarRise {
    from {
        transform: scaleY(0.05);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes agRingDraw {
    from {
        stroke-dashoffset: 295;
    }
    to {
        stroke-dashoffset: 24;
    }
}

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

/* Responsive */
@media (max-width: 1199.98px) {
    :root {
        --ag-container: 1040px;
    }

    .ag-navbar .ag-nav-links .nav-link {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 12px;
    }

    .ag-brand-copy small {
        display: none;
    }

    .ag-dashboard-frame {
        right: -150px;
    }

    .ag-float-card-enquiry {
        right: -25px;
    }

    .ag-module-panel {
        padding: 48px;
        gap: 45px;
    }

    .ag-module-tabs {
        grid-template-columns: repeat(4, 1fr);
    }

    .ag-module-tab {
        min-height: 76px;
        border-bottom: 1px solid #dce4ef;
    }

    .ag-journey-track {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .ag-journey-arrow {
        display: none;
    }

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

    .ag-role-card:nth-child(3) {
        border-right: 0;
    }

    .ag-role-card:nth-child(-n + 3) {
        border-bottom: 1px solid var(--ag-line);
    }
}

@media (max-width: 991.98px) {
    .ag-section {
        padding: 90px 0;
    }

    .ag-navbar .navbar-collapse {
        margin: 0 -20px;
        padding: 13px 20px 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
        background: var(--ag-night);
    }

    .ag-nav-inner {
        display: flex;
    }

    .ag-menu-toggle {
        display: block !important;
        margin-left: auto;
    }

    .ag-navbar .ag-nav-links {
        margin-top: 0;
        border: 0;
    }

    .ag-navbar .ag-nav-links .nav-link {
        padding: 10px 0;
    }

    .ag-navbar .ag-nav-links .nav-link::after {
        display: none;
    }

    .ag-nav-actions {
        margin-top: 12px;
    }

    .ag-hero {
        min-height: auto;
        padding-top: 86px;
    }

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

    .ag-hero-copy {
        max-width: 740px;
        padding-bottom: 0;
    }

    .ag-hero-visual {
        min-height: 610px;
    }

    .ag-dashboard-frame {
        right: 50%;
        width: 730px;
        transform: translateX(50%) rotateX(var(--ag-rx)) rotateY(var(--ag-ry)) translateZ(15px);
    }

    .ag-float-card-enquiry {
        right: 2%;
    }

    .ag-float-card-fee {
        right: 6%;
    }

    .ag-capability-bar {
        grid-template-columns: 1fr;
    }

    .ag-capability-list {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .ag-intro-split {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ag-outcome-card {
        min-height: 420px;
        padding: 36px 25px;
    }

    .ag-module-panel {
        grid-template-columns: 1fr;
    }

    .ag-module-copy {
        max-width: 650px;
    }

    .ag-module-preview {
        transform: none;
    }

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

    .ag-growth-featured {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ag-chat-mockup {
        justify-self: start;
    }

    .ag-demo-wrap {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .ag-demo-copy {
        max-width: 720px;
    }

    .ag-footer-main {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

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

@media (max-width: 767.98px) {
    .ag-page .container,
    .ag-navbar .container,
    .ag-footer .container,
    .ag-page-header .container {
        width: calc(100% - 30px);
    }

    .ag-section {
        padding: 74px 0;
    }

    .ag-section-intro {
        margin-bottom: 40px;
    }

    .ag-intro-centered {
        text-align: left;
    }

    .ag-intro-centered > p:last-child {
        margin-left: 0;
    }

    .ag-brand-mark {
        width: 42px;
        height: 42px;
    }

    .ag-brand-copy strong {
        font-size: 15px;
    }

    .ag-nav-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ag-login-link {
        min-height: 40px;
    }

    .ag-hero {
        padding-top: 70px;
    }

    .ag-hero-copy h1 {
        font-size: clamp(45px, 14vw, 68px);
    }

    .ag-hero-lead {
        font-size: 16px;
    }

    .ag-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ag-hero-actions .ag-button {
        width: 100%;
    }

    .ag-hero-assurance {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .ag-hero-visual {
        min-height: 490px;
        margin: 0 -15px;
        padding-top: 35px;
    }

    .ag-dashboard-stage {
        min-height: 465px;
    }

    .ag-dashboard-frame {
        top: 60px;
        width: 600px;
        height: 415px;
        transform: translateX(50%) scale(0.82) rotateX(1deg) rotateY(-3deg);
        transform-origin: top center;
    }

    .ag-float-card {
        min-width: 195px;
    }

    .ag-float-card-enquiry {
        top: 6px;
        right: 0;
    }

    .ag-float-card-fee {
        right: auto;
        bottom: -8px;
        left: 5px;
    }

    .ag-visual-note {
        display: none;
    }

    .ag-capability-bar {
        margin-top: 18px;
    }

    .ag-capability-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .ag-outcome-grid {
        grid-template-columns: 1fr;
    }

    .ag-outcome-card,
    .ag-outcome-card:first-child {
        min-height: auto;
        border-right: 1px solid var(--ag-line);
        border-bottom: 1px solid var(--ag-line);
        border-left: 1px solid var(--ag-line);
    }

    .ag-outcome-card > i {
        margin-bottom: 40px;
    }

    .ag-module-explorer {
        border-radius: 13px;
    }

    .ag-module-tabs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .ag-module-tab {
        min-width: 98px;
        scroll-snap-align: start;
    }

    .ag-module-panel {
        padding: 35px 22px;
        gap: 40px;
    }

    .ag-module-preview {
        margin: 0 -10px;
    }

    .ag-preview-row {
        grid-template-columns: 1.35fr 0.8fr 0.7fr;
    }

    .ag-preview-row > span:nth-child(2) {
        display: none;
    }

    .ag-preview-toolbar button {
        padding: 8px;
        font-size: 0;
    }

    .ag-preview-toolbar button i {
        font-size: 10px;
    }

    .ag-journey-track {
        grid-template-columns: 1fr;
    }

    .ag-journey-track article {
        min-height: auto;
        padding: 25px;
    }

    .ag-journey-track article > i {
        margin: 28px 0 18px;
    }

    .ag-journey-track::before {
        display: none;
    }

    .ag-growth-grid {
        grid-template-columns: 1fr;
    }

    .ag-growth-card {
        min-height: auto;
        padding: 29px 24px;
    }

    .ag-growth-featured {
        grid-column: auto;
    }

    .ag-chat-mockup {
        transform: none;
    }

    .ag-mini-pipeline {
        overflow-x: auto;
    }

    .ag-mini-calendar {
        overflow-x: auto;
        padding-top: 10px;
    }

    .ag-role-grid {
        grid-template-columns: 1fr;
    }

    .ag-role-card,
    .ag-role-card:nth-child(3) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ag-line);
    }

    .ag-role-card:last-child {
        border-bottom: 0;
    }

    .ag-role-card > span {
        margin-bottom: 28px;
    }

    .ag-demo-section {
        padding: 78px 0;
    }

    .ag-form-heading {
        padding: 27px 23px 16px;
    }

    .ag-demo-form {
        padding: 10px 23px 27px;
    }

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

    .ag-footer-main {
        padding: 60px 0 48px;
        grid-template-columns: 1fr 1fr;
        gap: 45px 25px;
    }

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

    .ag-footer-contact {
        grid-column: 1 / -1;
    }

    .ag-footer-bottom {
        padding: 24px 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 479.98px) {
    .ag-hero-visual {
        min-height: 440px;
    }

    .ag-dashboard-stage {
        min-height: 420px;
    }

    .ag-dashboard-frame {
        width: 570px;
        transform: translateX(50%) scale(0.68) rotateX(1deg) rotateY(-3deg);
    }

    .ag-float-card {
        padding: 10px;
        min-width: 175px;
    }

    .ag-float-card-fee {
        bottom: 2px;
    }

    .ag-float-card strong {
        font-size: 8px;
    }

    .ag-capability-list {
        grid-template-columns: 1fr;
    }

    .ag-growth-card h3 {
        font-size: 25px;
    }

    .ag-chat-body {
        min-height: 310px;
        padding: 18px;
    }

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

    .ag-footer-brand,
    .ag-footer-contact {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .ag-reveal {
        opacity: 1;
        transform: none;
    }
}