/* ==========================================================
   GARSOLVE COMPONENT SYSTEM
   File: components.css
   ========================================================== */


/* ==========================================================
   BUTTONS
   ========================================================== */

   .button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);

    min-height: 46px;

    padding-inline: var(--space-5);

    border: 1px solid transparent;
    border-radius: var(--radius-full);

    color: var(--color-text-primary);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    overflow: hidden;
    isolation: isolate;

    transition:
        transform var(--transition-spring),
        color var(--transition-base),
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.button::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.14),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity var(--transition-base);
}

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

.button:hover::before {
    opacity: 1;
}

.button:active {
    transform: translateY(0) scale(0.98);
}

.button__arrow {
    display: inline-block;

    transition:
        transform var(--transition-base);
}

.button:hover .button__arrow {
    transform: translateX(4px);
}


/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */

.button--primary {
    border-color:
        rgba(0, 214, 214, 0.4);

    background:
        var(--gradient-primary);

    color:
        var(--color-text-inverse);

    box-shadow:
        0 8px 25px
        rgba(0, 214, 214, 0.16);
}

.button--primary:hover {
    box-shadow:
        0 12px 35px
        rgba(0, 214, 214, 0.28);
}


/* ==========================================================
   GHOST BUTTON
   ========================================================== */

.button--ghost {
    border-color:
        var(--color-border-light);

    background:
        rgba(255,255,255,0.025);

    color:
        var(--color-text-primary);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}

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

    background:
        rgba(0,214,214,0.06);

    color:
        var(--color-primary-light);
}


/* ==========================================================
   LIGHT BUTTON
   ========================================================== */

.button--light {
    background:
        var(--color-text-primary);

    color:
        var(--color-text-inverse);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,0.18);
}

.button--light:hover {
    background:
        #ffffff;

    box-shadow:
        0 14px 38px
        rgba(0,0,0,0.28);
}


/* ==========================================================
   LARGE BUTTON
   ========================================================== */

.button--large {
    min-height: 56px;
    min-width: 250px;

    padding-inline:
        var(--space-7);

    font-size:
        var(--text-base);
}


/* ==========================================================
   STATUS
   ========================================================== */

.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-weight-medium);
}

.status__dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--color-text-muted);
}

.status--primary {
    color:
        var(--color-primary-light);
}

.status--primary .status__dot {
    background:
        var(--color-primary);

    box-shadow:
        0 0 10px
        rgba(0,214,214,0.6);
}

.status--success {
    color:
        var(--color-success);
}

.status--success .status__dot {
    background:
        var(--color-success);

    box-shadow:
        0 0 10px
        rgba(54,211,153,0.6);
}


/* ==========================================================
   BADGES
   ========================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    min-height: 30px;

    padding:
        0
        var(--space-3);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-full);

    background:
        rgba(255,255,255,0.035);

    color:
        var(--color-text-secondary);

    font-size:
        0.7rem;

    font-weight:
        var(--font-weight-medium);
}

.badge--primary {
    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.07);

    color:
        var(--color-primary-light);
}

.badge--success {
    border-color:
        rgba(54,211,153,0.2);

    background:
        rgba(54,211,153,0.07);

    color:
        var(--color-success);
}


/* ==========================================================
   ICON BOX
   ========================================================== */

.icon-box {
    position: relative;

    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin-bottom:
        var(--space-6);

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-md);

    background:
        var(--gradient-primary-soft);

    color:
        var(--color-primary-light);

    font-size:
        var(--text-lg);

    font-weight:
        var(--font-weight-semibold);

    box-shadow:
        0 0 20px
        rgba(0,214,214,0.05);
}

.icon-box::after {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius:
        inherit;

    background:
        linear-gradient(
            135deg,
            rgba(0,214,214,0.18),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity var(--transition-base);
}

.service-card:hover .icon-box::after,
.challenge-card:hover .icon-box::after {
    opacity: 1;
}


/* ==========================================================
   TECH PILLS
   ========================================================== */

.tech-pill {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding:
        0
        var(--space-3);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-full);

    background:
        rgba(255,255,255,0.025);

    color:
        var(--color-text-muted);

    font-size:
        0.68rem;

    font-weight:
        var(--font-weight-medium);

    white-space:
        nowrap;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base),
        color var(--transition-base);
}

.tech-pill:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.06);

    color:
        var(--color-primary-light);
}


/* ==========================================================
   GENERIC GLASS
   ========================================================== */

.glass {
    border:
        1px solid var(--glass-border);

    background:
        var(--glass-background);

    backdrop-filter:
        blur(var(--glass-blur));

    -webkit-backdrop-filter:
        blur(var(--glass-blur));
}


/* ==========================================================
   DASHBOARD
   ========================================================== */

.dashboard-card {
    position: relative;

    width: 100%;
    max-width: 570px;

    padding:
        var(--space-6);

    border:
        1px solid var(--color-border-light);

    border-radius:
        var(--radius-2xl);

    background:
        rgba(6,18,31,0.74);

    box-shadow:
        var(--shadow-lg),
        var(--shadow-primary);

    backdrop-filter:
        blur(var(--glass-blur));

    -webkit-backdrop-filter:
        blur(var(--glass-blur));

    overflow: hidden;

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);

    transition:
        transform var(--transition-slow),
        border-color var(--transition-base);
}

.dashboard-card:hover {
    border-color:
        var(--color-border-primary);

    transform:
        perspective(1200px)
        rotateY(-1deg)
        rotateX(0deg)
        translateY(-6px);
}

.dashboard-card__glow {
    position: absolute;

    top: -120px;
    right: -100px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        var(--color-primary);

    filter:
        blur(100px);

    opacity:
        0.12;

    pointer-events:
        none;
}

.dashboard-card__header {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap:
        var(--space-4);

    padding-bottom:
        var(--space-6);

    border-bottom:
        1px solid var(--color-border);
}

.dashboard-card__eyebrow {
    display: block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-primary);

    font-size:
        0.62rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.16em;
}

.dashboard-card__header h2 {
    margin: 0;

    font-size:
        var(--text-xl);

    line-height:
        var(--line-height-tight);

    letter-spacing:
        -0.025em;
}

/* ==========================================================
   DASHBOARD BRANDING
   ========================================================== */

   .dashboard-card__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dashboard-card__logo {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 14px
            rgba(0, 214, 214, 0.2)
        );

    transition:
        transform var(--transition-base),
        filter var(--transition-base);
}

.dashboard-card:hover .dashboard-card__logo {
    transform:
        scale(1.04);

    filter:
        drop-shadow(
            0 0 20px
            rgba(0, 214, 214, 0.35)
        );
}

/* ==========================================================
   DASHBOARD METRICS
   ========================================================== */

.dashboard-metrics {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-3);

    padding-block:
        var(--space-5);
}

.dashboard-metric {
    padding:
        var(--space-4);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,0.025);

    transition:
        border-color var(--transition-base),
        background var(--transition-base),
        transform var(--transition-base);
}

.dashboard-metric:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.035);
}

.dashboard-metric__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom:
        var(--space-4);

    color:
        var(--color-text-muted);

    font-size:
        0.68rem;
}

.dashboard-metric__top > span:last-child {
    color:
        var(--color-primary);

    font-size:
        0.55rem;
}

.dashboard-metric strong {
    display: block;

    margin-bottom:
        var(--space-1);

    color:
        var(--color-text-primary);

    font-size:
        var(--text-lg);

    line-height:
        1.2;
}

.dashboard-metric small {
    display: block;

    color:
        var(--color-text-subtle);

    font-size:
        0.62rem;

    line-height:
        1.4;
}


/* ==========================================================
   DASHBOARD ACTIVITY
   ========================================================== */

.dashboard-activity {
    position: relative;

    padding-top:
        var(--space-4);

    border-top:
        1px solid var(--color-border);
}

.dashboard-activity__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom:
        var(--space-3);

    color:
        var(--color-text-muted);

    font-size:
        0.62rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.dashboard-activity__header span:last-child {
    color:
        var(--color-primary);
}

.activity-row {
    display: grid;

    grid-template-columns:
        8px 1fr auto;

    align-items: center;

    gap:
        var(--space-3);

    min-height:
        42px;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}

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

.activity-row__indicator {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-success);

    box-shadow:
        0 0 9px
        rgba(54,211,153,0.65);
}

.activity-row__name {
    color:
        var(--color-text-secondary);

    font-size:
        var(--text-xs);
}

.activity-row__time {
    color:
        var(--color-text-subtle);

    font-size:
        0.62rem;
}

/* ==========================================================
   DASHBOARD OVERVIEW
   ========================================================== */

   .dashboard-overview {
    padding-block:
        var(--space-5);

    border-bottom:
        1px solid var(--color-border);
}

.dashboard-overview__header,
.dashboard-section-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom:
        var(--space-3);

    color:
        var(--color-text-muted);

    font-size:
        0.62rem;

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}

.dashboard-overview__period {
    color:
        var(--color-primary);
}


/* ==========================================================
   DASHBOARD STAT GRID
   ========================================================== */

.dashboard-overview__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-2);
}

.dashboard-stat {
    display: flex;

    align-items: center;

    gap:
        var(--space-3);

    min-height:
        72px;

    padding:
        var(--space-3);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        rgba(255,255,255,0.025);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}

.dashboard-stat:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.035);
}

.dashboard-stat__icon {
    display: grid;

    place-items: center;

    width:
        32px;

    height:
        32px;

    flex-shrink: 0;

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-sm);

    background:
        rgba(0,214,214,0.06);

    color:
        var(--color-primary);

    font-size:
        0.75rem;
}

.dashboard-stat__content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    min-width:
        0;
}

.dashboard-stat__content span {
    color:
        var(--color-text-muted);

    font-size:
        0.58rem;
}

.dashboard-stat__content strong {
    color:
        var(--color-text-primary);

    font-size:
        0.78rem;

    font-weight:
        var(--font-weight-semibold);
}


/* ==========================================================
   BUSINESS SYSTEMS
   ========================================================== */

.dashboard-systems {
    padding-top:
        var(--space-5);
}

.dashboard-system-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    min-height:
        48px;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}

.dashboard-system-row:last-child {
    border-bottom:
        0;
}

.dashboard-system {
    display:
        flex;

    align-items:
        center;

    gap:
        var(--space-3);

    min-width:
        0;
}

.dashboard-system__icon {
    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-sm);

    background:
        rgba(255,255,255,0.025);

    color:
        var(--color-primary-light);

    font-size:
        0.65rem;

    font-weight:
        var(--font-weight-semibold);
}

.dashboard-system > div {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}

.dashboard-system strong {
    overflow:
        hidden;

    color:
        var(--color-text-secondary);

    font-size:
        0.7rem;

    font-weight:
        var(--font-weight-medium);

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.dashboard-system small {
    color:
        var(--color-text-subtle);

    font-size:
        0.55rem;
}

.system-status {
    flex-shrink:
        0;

    font-size:
        0.55rem;

    font-weight:
        var(--font-weight-semibold);
}

.system-status--active {
    color:
        var(--color-success);
}


/* ==========================================================
   WORKFLOW ACTIVITY
   ========================================================== */

.dashboard-workflow {
    margin-top:
        var(--space-5);

    padding-top:
        var(--space-5);

    border-top:
        1px solid var(--color-border);
}

.workflow-item {
    display:
        grid;

    grid-template-columns:
        7px 1fr auto;

    align-items:
        center;

    gap:
        var(--space-3);

    min-height:
        48px;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}

.workflow-item:last-child {
    border-bottom:
        0;
}

.workflow-item__marker {
    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 9px
        rgba(0,214,214,0.65);
}

.workflow-item__content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    min-width:
        0;
}

.workflow-item__content strong {
    overflow:
        hidden;

    color:
        var(--color-text-secondary);

    font-size:
        0.68rem;

    font-weight:
        var(--font-weight-medium);

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.workflow-item__content span {
    color:
        var(--color-text-subtle);

    font-size:
        0.55rem;
}

.workflow-item__status {
    color:
        var(--color-success);

    font-size:
        0.55rem;

    font-weight:
        var(--font-weight-semibold);
}

/* ==========================================================
   SERVICE CARDS
   ========================================================== */

   .service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 360px;

    padding: var(--space-8);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        rgba(8, 20, 34, 0.62);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    overflow: hidden;

    isolation: isolate;

    transition:
        transform var(--transition-spring),
        border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
}


/* ------------------------------------------
   Ambient card glow
------------------------------------------ */

.service-card::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    top: -140px;
    right: -120px;

    border-radius: 50%;

    background:
        var(--color-primary);

    filter:
        blur(80px);

    opacity: 0;

    transition:
        opacity 500ms ease,
        transform 700ms ease;

    z-index: -1;
}


.service-card:hover::before {
    opacity: 0.1;

    transform:
        scale(1.35);
}


/* ------------------------------------------
   Card edge highlight
------------------------------------------ */

.service-card::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            transparent 25%,
            transparent 70%,
            rgba(0,214,214,0.05)
        );

    opacity: 0;

    transition:
        opacity var(--transition-base);

    pointer-events: none;
}


.service-card:hover::after {
    opacity: 1;
}


/* ------------------------------------------
   Hover
------------------------------------------ */

.service-card:hover {
    transform:
        translateY(-10px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(8, 20, 34, 0.78);

    box-shadow:
        var(--shadow-lg),
        0 0 35px rgba(0,214,214,0.08);
}


/* ------------------------------------------
   Top row
------------------------------------------ */

.service-card__top {
    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom:
        var(--space-6);
}


/* ------------------------------------------
   Icon
------------------------------------------ */

.service-card__icon {
    position: relative;

    display: grid;

    place-items: center;

    width: 58px;
    height: 58px;

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-lg);

    background:
        rgba(0,214,214,0.055);

    color:
        var(--color-primary-light);

    box-shadow:
        0 0 0 rgba(0,214,214,0);

    transition:
        transform 450ms
            cubic-bezier(0.16, 1, 0.3, 1),
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}


.service-card__icon::before {
    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(0,214,214,0.22),
            transparent 60%
        );

    opacity: 0;

    transition:
        opacity var(--transition-base);
}


/* SVG */

.service-card__icon svg {
    position: relative;

    width: 28px;
    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 450ms
            cubic-bezier(0.16, 1, 0.3, 1);
}


.service-card:hover
.service-card__icon {
    transform:
        translateY(-3px)
        scale(1.06);

    background:
        rgba(0,214,214,0.1);

    border-color:
        rgba(0,214,214,0.55);

    box-shadow:
        0 0 24px
        rgba(0,214,214,0.12);
}


.service-card:hover
.service-card__icon::before {
    opacity: 1;
}


.service-card:hover
.service-card__icon svg {
    transform:
        scale(1.08);
}


/* ------------------------------------------
   Number
------------------------------------------ */

.service-card__number {
    position: relative;
    z-index: 2;

    display: inline-block;

    padding-right: 4px;

    color:
        var(--color-text-subtle);

    font-family:
        var(--font-mono);

    font-size:
        0.72rem;

    font-weight:
        var(--font-weight-medium);

    line-height:
        1;

    letter-spacing:
        0.06em;

    white-space:
        nowrap;

    transition:
        color var(--transition-base);
}


.service-card:hover
.service-card__number {
    color:
        var(--color-primary);
}


/* ------------------------------------------
   Body
------------------------------------------ */

.service-card__body {
    flex: 1;
}


.service-card__eyebrow {
    display: block;

    margin-bottom:
        var(--space-3);

    color:
        var(--color-primary);

    font-size:
        0.6rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.13em;

    line-height:
        1.3;
}


.service-card h3 {
    position: relative;

    margin-bottom:
        var(--space-4);

    color:
        var(--color-text-primary);

    transition:
        color var(--transition-base);
}


.service-card:hover h3 {
    color:
        #ffffff;
}


.service-card__body p {
    max-width:
        440px;

    font-size:
        var(--text-sm);

    line-height:
        1.75;
}


/* ------------------------------------------
   Technology pills
------------------------------------------ */

.service-card__technologies {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--space-2);

    margin-top:
        var(--space-7);

    margin-bottom:
        var(--space-6);
}


/* ------------------------------------------
   Learn more
------------------------------------------ */



/* ==========================================================
   SERVICE-SPECIFIC ACCENTS
   ========================================================== */

   .service-card[data-service="power-platform"] {
    --service-accent: var(--color-primary);
    --service-accent-soft: rgba(0, 214, 214, 0.10);
}

.service-card[data-service="automation"] {
    --service-accent: #3ba9ff;
    --service-accent-soft: rgba(59, 169, 255, 0.10);
}

.service-card[data-service="integration"] {
    --service-accent: #1bc9b6;
    --service-accent-soft: rgba(27, 201, 182, 0.10);
}

.service-card[data-service="applications"] {
    --service-accent: #36eeee;
    --service-accent-soft: rgba(54, 238, 238, 0.10);
}

.service-card[data-service="data"] {
    --service-accent: #55b8ff;
    --service-accent-soft: rgba(85, 184, 255, 0.10);
}

.service-card[data-service="consulting"] {
    --service-accent: #27d5c1;
    --service-accent-soft: rgba(39, 213, 193, 0.10);
}


/* ==========================================================
   APPLY SERVICE ACCENT
   ========================================================== */

.service-card__icon {
    color:
        var(--service-accent);

    border-color:
        color-mix(
            in srgb,
            var(--service-accent) 40%,
            transparent
        );

    background:
        var(--service-accent-soft);
}

.service-card:hover .service-card__icon {
    border-color:
        var(--service-accent);

    box-shadow:
        0 0 24px
        color-mix(
            in srgb,
            var(--service-accent) 18%,
            transparent
        );
}

.service-card__eyebrow {
    color:
        var(--service-accent);
}

.service-card:hover .service-card__number {
    color:
        var(--service-accent);
}


/* ==========================================================
   CASE STUDY ARCHITECTURE
   ========================================================== */

   .case-study-architecture {
    width: 100%;
    min-width: 0;
    position: relative;

    padding: var(--space-6);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        rgba(3, 12, 22, 0.82);

    box-shadow:
        var(--shadow-lg);

    overflow: hidden;
}

.case-study-architecture::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -140px;
    right: -100px;

    border-radius: 50%;

    background:
        var(--color-primary);

    filter:
        blur(110px);

    opacity: 0.08;
}

.architecture-header {
    position: relative;

    display: flex;

    justify-content: space-between;

    gap: var(--space-4);

    padding-bottom:
        var(--space-5);

    margin-bottom:
        var(--space-6);

    border-bottom:
        1px solid var(--color-border);

    color:
        var(--color-text-muted);

    font-size:
        0.62rem;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.1em;
}

.architecture-header span:last-child {
    color:
        var(--color-primary);
}

.architecture-flow {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.architecture-node {
    position: relative;

    display: flex;

    align-items: center;

    gap: var(--space-3);

    width: min(100%, 320px);

    min-height: 58px;

    padding:
        var(--space-3)
        var(--space-4);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        rgba(255,255,255,0.025);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}

.architecture-node:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.04);
}

.architecture-node--primary,
.architecture-node--center {
    border-color:
        var(--color-border-primary);
}

.architecture-node--center {
    background:
        rgba(0,214,214,0.05);

    box-shadow:
        0 0 28px
        rgba(0,214,214,0.06);
}

.architecture-node__icon {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-sm);

    background:
        rgba(0,214,214,0.07);

    color:
        var(--color-primary-light);

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        var(--font-weight-semibold);
}

.architecture-node strong {
    display: block;

    margin-bottom:
        2px;

    color:
        var(--color-text-primary);

    font-size:
        var(--text-sm);
}

.architecture-node small {
    color:
        var(--color-text-subtle);

    font-size:
        0.58rem;
}

.architecture-connector {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        34px;

    color:
        var(--color-primary);

    font-size:
        var(--text-base);

    opacity:
        0.75;
}

.architecture-branches {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        var(--space-4);

    width:
        100%;

    max-width:
        660px;
}

.architecture-branch {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}

/* ==========================================================
   POWER BI REPORTING NODE
   ========================================================== */

   .architecture-node--reporting {
    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.035);
}

.architecture-node--reporting
.architecture-node__icon {
    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.06);

    color:
        var(--color-primary-light);
}

/* ==========================================================
   ARCHITECTURE CAPABILITY ROW
   ========================================================== */

   .architecture-capabilities {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: start;

    gap: var(--space-4);

    width: 100%;

    margin-top: 0;
}

.architecture-capability {
    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;
}

.architecture-capability
.architecture-connector {
    height: 30px;
}

.architecture-capability
.architecture-node {
    width: 100%;
    max-width: none;
}


/* ==========================================================
   ARCHITECTURE CAPABILITY SIZING
   ========================================================== */

.architecture-capabilities {
    width:
        100%;

    min-width:
        0;
}

.architecture-capability {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}

.architecture-capability
.architecture-node {
    width:
        100%;

    max-width:
        none;

    min-width:
        0;
}


/* ==========================================================
   EXTERNAL SYSTEM
   ========================================================== */

.architecture-node--external {
    border-color:
        var(--color-border);

    background:
        rgba(255,255,255,0.018);
}


/* ==========================================================
   POWER BI
   ========================================================== */

.architecture-node--reporting {
    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.035);
}

.architecture-node--reporting
.architecture-node__icon {
    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.06);

    color:
        var(--color-primary-light);
}

/* ==========================================================
   HERO DESCRIPTION HIGHLIGHT
   ========================================================== */

   .hero__highlight {
    color: var(--color-primary-light);

    font-weight:
        var(--font-weight-semibold);

    text-shadow:
        0 0 18px
        rgba(0, 214, 168, 0.658);
}

/* ==========================================================
   HERO TRUST PILLS
   ========================================================== */

   .hero__trust {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 0.55rem;

    margin-top:
        var(--space-7);

    max-width:
        680px;
}


/* ==========================================================
   BASE GARSOLVE BRAND STATE
   ========================================================== */

.hero__trust-pill {
    --brand-color:
        var(--color-primary);

    --brand-rgb:
        0, 214, 214;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(
            0,
            214,
            214,
            0.28
        );

    border-radius:
        var(--radius-full);

    background:
        rgba(
            0,
            214,
            214,
            0.035
        );

    color:
        var(--color-text-secondary);

    font-size:
        0.7rem;

    font-weight:
        var(--font-weight-medium);

    line-height:
        1;

    white-space:
        nowrap;

    box-shadow:
        inset 0 0 18px
        rgba(
            0,
            214,
            214,
            0.025
        );

    transition:
        transform 260ms ease,
        color 260ms ease,
        border-color 260ms ease,
        background 260ms ease,
        box-shadow 260ms ease;
}


/* ==========================================================
   MICROSOFT BRAND COLORS
   USED ONLY WHEN HOVERED
   ========================================================== */

.hero__trust-pill[data-brand="power-apps"] {
    --brand-color: #805b80;
    --brand-rgb: 116, 39, 116;
}

.hero__trust-pill[data-brand="power-automate"] {
    --brand-color: #88b5f8;
    --brand-rgb: 0, 102, 255;
}

.hero__trust-pill[data-brand="dataverse"] {
    --brand-color: #7cdf83;
    --brand-rgb: 10, 127, 68;
}

.hero__trust-pill[data-brand="sharepoint"] {
    --brand-color: #59888a;
    --brand-rgb: 3, 131, 135;
}

.hero__trust-pill[data-brand="power-bi"] {
    --brand-color: #f5e28c;
    --brand-rgb: 242, 200, 17;
}


/* ==========================================================
   HOVER
   ========================================================== */

.hero__trust-pill:hover {
    transform:
        translateY(-2px);

    color:
        var(--brand-color);

    border-color:
        rgba(
            var(--brand-rgb),
            0.7
        );

    background:
        rgba(
            var(--brand-rgb),
            0.08
        );

    box-shadow:
        0 0 14px
        rgba(
            var(--brand-rgb),
            0.14
        ),

        0 0 30px
        rgba(
            var(--brand-rgb),
            0.08
        ),

        inset 0 0 18px
        rgba(
            var(--brand-rgb),
            0.03
        );
}


/* ==========================================================
   RESPONSIVE — 2 COLUMNS / 3 ROWS
   ========================================================== */

@media (max-width: 768px) {

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

        width: 100%;

        max-width:
            430px;

        gap:
            0.5rem;
    }

    .hero__trust-pill {
        width: 100%;

        min-height:
            36px;

        padding:
            0 10px;

        font-size:
            0.68rem;
    }

    .hero__trust-pill:nth-child(5) {
        grid-column:
            1 / -1;

        width:
            50%;

        justify-self:
            center;
    }
}





/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .hero__trust {
        max-width:
            360px;
    }

    .hero__trust-pill {
        font-size:
            0.64rem;

        padding-inline:
            8px;
    }

}

/* ==========================================================
   CASE STUDY OUTCOMES
   ========================================================== */

.case-study-outcomes {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        var(--space-4);

    margin-top:
        var(--space-5);
}

.case-study-outcome {
    position:
        relative;

    min-height:
        220px;

    padding:
        var(--space-6);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255,255,255,0.025);

    transition:
        transform var(--transition-spring),
        border-color var(--transition-base),
        background var(--transition-base);
}

.case-study-outcome:hover {
    transform:
        translateY(-6px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.035);
}

.case-study-outcome__number {
    display:
        block;

    margin-bottom:
        var(--space-8);

    color:
        var(--color-primary);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    letter-spacing:
        0.08em;
}

.case-study-outcome h3 {
    margin-bottom:
        var(--space-3);
}

.case-study-outcome p {
    font-size:
        var(--text-sm);

    line-height:
        1.7;
}

/* ==========================================================
   CASE STUDY IMPACT
   ========================================================== */

   .case-study-impact {
    display: flex;
    align-items: center;
    gap: var(--space-6);

    margin-top: var(--space-5);
    padding: var(--space-8);

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            rgba(0,214,214,0.08),
            rgba(255,255,255,0.025)
        );
}

.case-study-impact__value {
    flex-shrink: 0;

    color:
        var(--color-primary-light);

    font-size:
        clamp(2.5rem, 6vw, 4rem);

    font-weight:
        var(--font-weight-bold);

    line-height:
        1;

    letter-spacing:
        -0.05em;

    text-shadow:
        0 0 30px
        rgba(0,214,214,0.18);
}

.case-study-impact strong {
    display: block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-text-primary);

    font-size:
        var(--text-lg);
}

.case-study-impact p {
    max-width:
        650px;

    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-sm);

    line-height:
        1.7;
}

@media (max-width: 600px) {

    .case-study-impact {
        align-items: flex-start;

        flex-direction: column;

        gap:
            var(--space-4);
    }

}

/* ==========================================================
   CASE STUDY RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {

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

}

@media (max-width: 600px) {

    .case-study-architecture {
        padding:
            var(--space-4);
    }

    .architecture-branches {
        grid-template-columns:
            1fr;
    }

    .case-study-outcomes {
        grid-template-columns:
            1fr;
    }

    .case-study-outcome {
        min-height:
            auto;
    }

}

/* ==========================================================
   PRINCIPLE CARDS
   ========================================================== */

.principle-card {
    position:
        relative;

    padding:
        var(--space-6);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255,255,255,0.03);

    transition:
        transform var(--transition-spring),
        border-color var(--transition-base),
        background var(--transition-base);
}

.principle-card:hover {
    transform:
        translateY(-6px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.035);
}

.principle-card__number {
    display:
        block;

    margin-bottom:
        var(--space-8);

    color:
        var(--color-primary);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.08em;
}

.principle-card h3 {
    margin-bottom:
        var(--space-3);
}

.principle-card p {
    font-size:
        var(--text-sm);
}


/* ==========================================================
   CASE STUDY FEATURE
   ========================================================== */
   .case-study-feature {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-8);

    width: 100%;
    min-width: 0;

    padding: var(--space-8);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.025);
}

.case-study-feature__content {
    position:
        relative;
}

.case-study-feature__content h3 {
    margin-block:
        var(--space-6);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    line-height:
        1.12;
}

.case-study-feature__content p {
    margin-bottom:
        var(--space-5);

    font-size:
        var(--text-sm);

    line-height:
        1.8;
}

.case-study-feature__technologies {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--space-2);

    margin-top:
        var(--space-6);
}


/* ==========================================================
   CASE STUDY WINDOW
   ========================================================== */

   .case-study-window {
    position:
        relative;

    width:
        100%;

    min-width:
        0;

    border:
        1px solid var(--color-border-light);

    border-radius:
        var(--radius-xl);

    background:
        #06111d;

    box-shadow:
        var(--shadow-lg);

    overflow:
        hidden;

    transition:
        transform var(--transition-spring),
        border-color var(--transition-base);
}

.case-study-window:hover {
    border-color:
        var(--color-border-primary);

    transform:
        translateY(-5px);
}


/* ==========================================================
   BROWSER / APPLICATION TOOLBAR
   ========================================================== */

.case-study-window__toolbar {
    display:
        grid;

    grid-template-columns:
        38px minmax(0, 1fr);

    align-items:
        center;

    gap:
        var(--space-4);

    min-height:
        46px;

    padding:
        0 var(--space-4);

    border-bottom:
        1px solid var(--color-border);

    background:
        rgba(255,255,255,0.025);

    color:
        var(--color-text-muted);

    font-size:
        0.65rem;
}

.case-study-window__toolbar::before {
    content:
        "";

    display:
        block;

    width:
        38px;

    height:
        8px;

    border-radius:
        var(--radius-full);

    background:
        linear-gradient(
            90deg,
            #667085 0 25%,
            transparent 25% 38%,
            #667085 38% 63%,
            transparent 63% 76%,
            #667085 76%
        );

    opacity:
        0.6;
}

.case-study-window__toolbar span {
    display:
        none;
}

.case-study-window__toolbar div {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    opacity:
        0.8;
}


/* ==========================================================
   CASE STUDY APPLICATION BODY
   ========================================================== */

.case-study-window__body {
    display:
        grid;

    grid-template-columns:
        58px minmax(0, 1fr);

    min-width:
        0;

    min-height:
        360px;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.case-study-window .mock-sidebar {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-4);

    padding:
        var(--space-5)
        var(--space-2);

    min-width:
        0;

    border-right:
        1px solid var(--color-border);

    background:
        rgba(255,255,255,0.018);
}

.case-study-window .mock-sidebar span {
    width:
        100%;

    height:
        7px;

    border-radius:
        var(--radius-full);

    background:
        rgba(255,255,255,0.08);
}

.case-study-window .mock-sidebar span:first-child {
    background:
        rgba(0,214,214,0.5);
}


/* ==========================================================
   MOCK APPLICATION CONTENT
   ========================================================== */

.mock-content {
    min-width:
        0;

    padding:
        var(--space-6);
}


/* ==========================================================
   APPLICATION HEADER
   ========================================================== */

.mock-content__header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    min-width:
        0;

    margin-bottom:
        var(--space-6);
}

.mock-content__header > div:first-child {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-2);

    min-width:
        0;
}

.mock-content__header span {
    color:
        var(--color-primary);

    font-size:
        0.58rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.1em;

    white-space:
        nowrap;
}

.mock-content__header strong {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--color-text-primary);

    font-size:
        var(--text-base);
}


/* ==========================================================
   AVATAR
   ========================================================== */

.mock-avatar {
    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    width:
        34px;

    height:
        34px;

    border:
        1px solid var(--color-border-primary);

    border-radius:
        50%;

    background:
        rgba(0,214,214,0.08);

    color:
        var(--color-primary-light);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-weight-semibold);
}


/* ==========================================================
   MOCK METRIC CARDS
   ========================================================== */

.mock-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-3);

    margin-bottom:
        var(--space-5);
}

.mock-grid > div {
    width:
        100%;

    height:
        75px;

    min-width:
        0;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(0,214,214,0.07),
            rgba(255,255,255,0.025)
        );
}


/* ==========================================================
   MOCK CHART
   ========================================================== */

.mock-chart {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        var(--space-2);

    min-width:
        0;

    min-height:
        130px;

    padding:
        var(--space-5);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            180deg,
            rgba(59,169,255,0.06),
            transparent
        );
}

.mock-chart span {
    width:
        9%;

    min-width:
        4px;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            to top,
            rgba(0,214,214,0.25),
            rgba(0,214,214,0.8)
        );
}

.mock-chart span:nth-child(1) {
    height:
        35%;
}

.mock-chart span:nth-child(2) {
    height:
        52%;
}

.mock-chart span:nth-child(3) {
    height:
        45%;
}

.mock-chart span:nth-child(4) {
    height:
        68%;
}

.mock-chart span:nth-child(5) {
    height:
        60%;
}

.mock-chart span:nth-child(6) {
    height:
        82%;
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1400px) {

    .case-study-window__body {
        grid-template-columns:
            64px minmax(0, 1fr);

        min-height:
            390px;
    }

    .mock-content {
        padding:
            var(--space-7);
    }

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

}


/* ==========================================================
   TABLET / NARROW DESKTOP
   ========================================================== */

@media (max-width: 1100px) {

    .case-study-window__body {
        grid-template-columns:
            54px minmax(0, 1fr);
    }

    .mock-content {
        padding:
            var(--space-5);
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .case-study-window__body {
        grid-template-columns:
            54px minmax(0, 1fr);

        min-height:
            280px;
    }

    .mock-content {
        padding:
            var(--space-4);
    }

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

    .mock-grid > div {
        height:
            55px;
    }

    .mock-chart {
        min-height:
            95px;

        padding:
            var(--space-3);
    }

}


@media (max-width: 480px) {

    .case-study-window__body {
        grid-template-columns:
            46px minmax(0, 1fr);
    }

    .case-study-window .mock-sidebar {
        padding-inline:
            var(--space-2);
    }

    .mock-content {
        padding:
            var(--space-3);
    }

    .mock-content__header {
        gap:
            var(--space-2);

        margin-bottom:
            var(--space-4);
    }

    .mock-content__header span {
        font-size:
            0.52rem;
    }

    .mock-content__header strong {
        font-size:
            0.76rem;
    }

    .mock-avatar {
        width:
            30px;

        height:
            30px;
    }

}

/* ==========================================================
   ABOUT / FOUNDER
   ========================================================== */

   .founder-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(100%, 390px);

    aspect-ratio: 1;

    padding: var(--space-10);

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-2xl);

    background:
        radial-gradient(
            circle at center,
            rgba(0,214,214,0.09),
            transparent 56%
        ),
        rgba(5,14,25,0.9);

    box-shadow:
        var(--shadow-lg);

    overflow: hidden;
}

.founder-card::before {
    content: "";

    position: absolute;

    inset: 12%;

    border:
        1px solid rgba(0,214,214,0.12);

    border-radius: 50%;
}

.founder-card__logo {
    position: relative;
    z-index: 2;

    width: 150px;
    height: 150px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 24px
            rgba(0,214,214,0.2)
        );
}

.founder-card__label {
    position: relative;
    z-index: 2;

    margin-top: var(--space-5);

    color:
        var(--color-primary);

    font-size:
        0.62rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.18em;
}

.founder__principles {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-3);

    margin:
        var(--space-8) 0;
}

.founder__principles > div {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    min-height: 0;
    height: auto;


    padding:
        var(--space-4);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        rgba(255,255,255,0.025);
}

.founder__principles span {
    color:
        var(--color-primary);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;
}

.founder__principles strong {
    color:
        var(--color-text-secondary);

    font-size:
        0.72rem;

    line-height:
        1.4;
}



/* ==========================================================
   FOUNDER CARD
   ========================================================== */

.founder-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        min(
            100%,
            420px
        );

    aspect-ratio:
        1;

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-2xl);

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(0,214,214,0.16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(10,31,48,0.92),
            rgba(3,10,19,0.98)
        );

    box-shadow:
        var(--shadow-lg),
        var(--shadow-primary);

    overflow:
        hidden;
}

.founder-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        14%;

    border:
        1px solid rgba(0,214,214,0.14);

    border-radius:
        50%;

    box-shadow:
        0 0 80px
        rgba(0,214,214,0.08);
}

.founder-card__initial {
    position:
        relative;

    z-index:
        2;

    color:
        var(--color-text-primary);

    font-size:
        clamp(
            5rem,
            10vw,
            8rem
        );

    font-weight:
        var(--font-weight-bold);

    line-height:
        1;

    letter-spacing:
        -0.1em;

    transform:
        translateX(-0.05em);
}

.founder-card__label {
    position:
        relative;

    z-index:
        2;

    margin-top:
        var(--space-4);

    color:
        var(--color-primary);

    font-size:
        0.65rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.24em;
}

.founder-card__glow {
    position:
        absolute;

    width:
        48%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        var(--color-primary);

    filter:
        blur(100px);

    opacity:
        0.12;

    pointer-events:
        none;
}


/* ==========================================================
   CONTACT CARD
   ========================================================== */

.contact-card {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        var(--space-10);

    padding:
        clamp(
            var(--space-8),
            6vw,
            var(--space-16)
        );

    border:
        1px solid var(--color-border-primary);

    border-radius:
        var(--radius-2xl);

    background:
        linear-gradient(
            135deg,
            rgba(0,214,214,0.11),
            rgba(59,169,255,0.07),
            rgba(255,255,255,0.025)
        );

    overflow:
        hidden;
}

.contact-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(0,214,214,0.12),
            transparent 32%
        );

    pointer-events:
        none;
}

.contact-card__content,
.contact-card__actions,
.contact-card__email {
    position:
        relative;

    z-index:
        2;
}

.contact-card__content h2 {
    margin-top:
        var(--space-5);

    margin-bottom:
        var(--space-4);
}

.contact-card__content p {
    max-width:
        650px;

    font-size:
        var(--text-base);
}

.contact-card__actions {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        var(--space-3);

    min-width:
        250px;
}

.contact-card__email {
    grid-column:
        1 / -1;

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-sm);
}

.contact-card__glow {
    position:
        absolute;

    top:
        -180px;

    right:
        -100px;

    width:
        400px;

    height:
        400px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    filter:
        blur(110px);

    opacity:
        0.08;

    pointer-events:
        none;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer-brand .brand {
    width:
        max-content;
}

.footer-column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        var(--space-3);
}

.footer-column h3 {
    margin-bottom:
        var(--space-2);

    color:
        var(--color-text-primary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-weight-semibold);
}

.footer-column a,
.footer-column span {
    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);

    transition:
        color var(--transition-base);
}

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

.footer-brand p {
    margin-top:
        var(--space-5);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);
}




/* ==========================================================
   FLOATING PARTICLES
   ========================================================== */

.particle {
    position: absolute;
    display: block;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(190, 255, 255, 1) 0%,
            rgba(82, 247, 247, 0.95) 24%,
            rgba(0, 214, 214, 0.62) 58%,
            rgba(0, 214, 214, 0.12) 100%
        );

    opacity:
        var(--particle-opacity, 0.28);

    transform:
        translate3d(0, 0, 0);

    will-change:
        transform,
        opacity,
        box-shadow,
        filter;

    animation-name:
        garsolve-particle-float,
        garsolve-particle-breathe;

    animation-timing-function:
        ease-in-out,
        ease-in-out;

    animation-iteration-count:
        infinite,
        infinite;

    animation-direction:
        alternate,
        alternate;

    animation-fill-mode:
        both,
        both;

    transition:
        opacity 300ms ease,
        box-shadow 320ms ease,
        filter 320ms ease,
        transform 320ms ease;
}


/* Large, soft halo */
.particle::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.72);

    background:
        radial-gradient(
            circle,
            rgba(0, 245, 245, 0.30) 0%,
            rgba(0, 220, 220, 0.14) 24%,
            rgba(0, 214, 214, 0.06) 48%,
            rgba(0, 214, 214, 0.015) 68%,
            transparent 82%
        );

    filter:
        blur(5px);

    opacity:
        0.62;

    pointer-events:
        none;

    transition:
        opacity 320ms ease,
        transform 420ms ease,
        filter 320ms ease;
}


/* Inner glow bloom */
.particle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.75);

    background:
        radial-gradient(
            circle,
            rgba(205, 255, 255, 0.5) 0%,
            rgba(70, 242, 242, 0.22) 38%,
            transparent 72%
        );

    filter:
        blur(3px);

    opacity:
        0.42;

    pointer-events:
        none;

    transition:
        opacity 300ms ease,
        transform 360ms ease;
}


.particle--glowing {
    opacity:
        1 !important;

    filter:
        brightness(1.9)
        saturate(1.55);

    transform:
        scale(
            calc(
                1 +
                (
                    var(--glow-strength, 0) *
                    1.8
                )
            )
        );

    box-shadow:
        0 0
        calc(
            10px +
            (
                var(--glow-strength, 0) *
                24px
            )
        )
        rgba(
            0,
            236,
            236,
            calc(
                0.30 +
                (
                    var(--glow-strength, 0) *
                    0.48
                )
            )
        );
}


.particle--glowing::before {
    opacity:
        calc(
            0.58 +
            (
                var(--glow-strength, 0) *
                0.42
            )
        );

    transform:
        translate(-50%, -50%)
        scale(
            calc(
                0.9 +
                (
                    var(--glow-strength, 0) *
                    1.75
                )
            )
        );

    filter:
        blur(
            calc(
                5px +
                (
                    var(--glow-strength, 0) *
                    4px
                )
            )
        );
}


.particle--glowing::after {
    opacity:
        calc(
            0.46 +
            (
                var(--glow-strength, 0) *
                0.54
            )
        );

    transform:
        translate(-50%, -50%)
        scale(
            calc(
                0.9 +
                (
                    var(--glow-strength, 0) *
                    1.4
                )
            )
        );
}


@keyframes garsolve-particle-float {

    0% {
        transform:
            translate3d(0, 0, 0);
    }

    18% {
        transform:
            translate3d(
                var(--drift-x-1),
                var(--drift-y-1),
                0
            );
    }

    39% {
        transform:
            translate3d(
                var(--drift-x-2),
                var(--drift-y-2),
                0
            );
    }

    61% {
        transform:
            translate3d(
                var(--drift-x-3),
                var(--drift-y-3),
                0
            );
    }

    82% {
        transform:
            translate3d(
                calc(var(--drift-x-1) * -0.55),
                calc(var(--drift-y-1) * -0.55),
                0
            );
    }

    100% {
        transform:
            translate3d(0, 0, 0);
    }
}


@keyframes garsolve-particle-breathe {

    0%,
    100% {
        opacity:
            var(--particle-opacity, 0.28);
    }

    50% {
        opacity:
            calc(
                var(--particle-opacity, 0.28) +
                0.07
            );
    }
}


.particle-field--static .particle {
    animation:
        none !important;
}

.particle-field--static .particle {
    opacity:
        var(--particle-opacity, 0.28);
}


@media (max-width: 768px) {

    .particle::before {
        width: 36px;
        height: 36px;
    }

    .particle::after {
        width: 18px;
        height: 18px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .particle {
        animation:
            none !important;
    }

    .particle--glowing {
        transform:
            none;
    }
}

/* ==========================================================
   SECTION EYEBROW
   ========================================================== */

.section-heading__eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-2);

    margin-bottom:
        var(--space-5);

    color:
        var(--color-primary-light);

    font-size:
        0.68rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.section-heading__eyebrow::before {
    content:
        "";

    width:
        22px;

    height:
        1px;

    background:
        var(--color-primary);
}


/* ==========================================================
   ARROW LINK
   ========================================================== */

.arrow-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-3);

    color:
        var(--color-text-primary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-weight-semibold);

    transition:
        color var(--transition-base),
        gap var(--transition-base);
}

.arrow-link span {
    transition:
        transform var(--transition-base);
}

.arrow-link:hover {
    gap:
        var(--space-4);

    color:
        var(--color-primary-light);
}

.arrow-link:hover span {
    transform:
        translateX(4px);
}


/* ==========================================================
   GENERIC CARD
   ========================================================== */

.card {
    position:
        relative;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255,255,255,0.03);

    transition:
        transform var(--transition-spring),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

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

    border-color:
        var(--color-border-primary);

    box-shadow:
        var(--shadow-md);
}


/* ==========================================================
   CONTACT CARD CONTENT SIZING
   ========================================================== */

.contact-card__content {
    min-width:
        0;
}

.contact-card__content h2,
.contact-card__content p {
    max-width:
        700px;
}

.contact-card__actions {
    min-width:
        0;
}

.contact-card__actions .button {
    flex-shrink:
        0;

    white-space:
        nowrap;
}


/* ==========================================================
   UTILITY
   ========================================================== */

.sr-only {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}

.hidden {
    display:
        none !important;
}

.invisible {
    visibility:
        hidden !important;
}


/* ==========================================================
   TECHNOLOGY STACK PILLS
   ========================================================== */

.technology-section__stack {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.55rem;

    margin-top:
        var(--space-6);
}

.technology-section__stack span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 14px;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-full);

    background:
        rgba(255,255,255,0.025);

    color:
        var(--color-text-secondary);

    font-size:
        0.75rem;

    line-height:
        1;

    white-space:
        nowrap;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base),
        color var(--transition-base);
}

.technology-section__stack span:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--color-border-primary);

    background:
        rgba(0,214,214,0.05);

    color:
        var(--color-primary-light);
}



/* ==========================================================
   CONTACT SECTION SPACING
   ========================================================== */

.contact {
    padding-bottom:
        clamp(
            3rem,
            5vw,
            4.5rem
        );
}


/* ==========================================================
   TECHNOLOGY SECTION SPACING
   ========================================================== */

.technology-section {
    padding-block:
        clamp(4rem, 7vw, 6rem);
}

.technology-section__content {
    gap:
        clamp(
            var(--space-8),
            5vw,
            var(--space-10)
        );
}


/* ==========================================================
   SERVICE CARD TOP SAFETY
   ========================================================== */

.service-card__top {
    position: relative;
    z-index: 2;

    min-height: 58px;

    overflow: visible;
}

.contact-highlight {
    color: var(--color-primary-light);

    font-weight:
        var(--font-weight-semibold);

    text-shadow:
        0 0 18px
        rgba(0, 214, 214, 0.12);
}