/* OutGrowth — Service Page Styles v2 */
.og-service-hero{position:relative;padding:160px 0 100px;background:var(--og-navy-deep);overflow:hidden}
.og-service-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(43,124,233,0.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(123,45,142,0.07) 0%,transparent 40%)}
.og-service-hero__inner{position:relative;z-index:2;max-width:720px}
.og-service-hero__icon{width:72px;height:72px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-xl);color:var(--og-blue-light);backdrop-filter:blur(8px);animation:fadeInUp .6s var(--ease-out) both}
.og-service-hero__icon svg{width:36px;height:36px}
.og-service-hero__title{font-size:clamp(2.25rem,4.5vw + 0.5rem,3.75rem);color:var(--og-white);letter-spacing:-0.025em;margin-bottom:var(--space-lg);animation:fadeInUp .6s var(--ease-out) .15s both}
.og-service-hero__subtitle{font-size:clamp(1.0625rem,.5vw + 1rem,1.25rem);color:var(--og-grey-400);line-height:1.7;animation:fadeInUp .6s var(--ease-out) .3s both;margin-bottom:var(--space-2xl)}
.og-service-hero__cta{animation:fadeInUp .6s var(--ease-out) .45s both}
.og-service-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 50% 80%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 80%,black 20%,transparent 70%)}

.og-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl)}
.og-feature-card{background:var(--og-white);border:1px solid var(--og-grey-100);border-radius:var(--radius-lg);padding:var(--space-2xl);transition:all var(--duration-normal) var(--ease-out);position:relative;overflow:hidden}
.og-feature-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--og-gradient-h);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-normal) var(--ease-out)}
.og-feature-card:hover{box-shadow:var(--shadow-lg);border-color:transparent}
.og-feature-card:hover::after{transform:scaleX(1)}
.og-feature-card__icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--og-gradient-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-lg);color:var(--og-blue);transition:all var(--duration-normal) var(--ease-out)}
.og-feature-card:hover .og-feature-card__icon{background:var(--og-gradient);color:var(--og-white)}
.og-feature-card__title{font-size:1.125rem;font-weight:700;color:var(--og-navy);margin-bottom:var(--space-md)}
.og-feature-card__text{font-size:0.9375rem;color:var(--og-grey-500);line-height:1.7}

.og-benefits{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg)}
.og-benefit{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-md);background:var(--og-white);border:1px solid var(--og-grey-100);transition:all var(--duration-fast) ease}
.og-benefit:hover{border-color:rgba(43,124,233,0.2);box-shadow:var(--shadow-md)}
.og-benefit__check{width:24px;height:24px;min-width:24px;border-radius:50%;background:var(--og-gradient);display:flex;align-items:center;justify-content:center;margin-top:2px}
.og-benefit__check svg{width:14px;height:14px;color:var(--og-white)}
.og-benefit__text{font-size:0.9375rem;color:var(--og-grey-600);font-weight:500;line-height:1.5}

/* Service content sections */
.og-service-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4xl);align-items:center}
.og-service-content--reverse{direction:rtl}
.og-service-content--reverse>*{direction:ltr}
.og-service-visual{background:var(--og-gradient-subtle);border-radius:var(--radius-xl);padding:var(--space-3xl);min-height:320px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(43,124,233,0.08)}
.og-service-visual__stat{text-align:center}
.og-service-visual__number{font-family:var(--font-display);font-size:5rem;font-weight:800;background:var(--og-gradient-h);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:var(--space-sm)}
.og-service-visual__label{color:var(--og-grey-500);font-size:1rem;font-weight:500}

@media(max-width:768px){.og-service-content{grid-template-columns:1fr;gap:var(--space-2xl)}.og-service-content--reverse{direction:ltr}}

/* ═══════════════════════════════════════
   SERVICE INTRO — Rich two-column layout
   ═══════════════════════════════════════ */
.og-service-intro {
    position: relative;
    overflow: hidden;
}

.og-service-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 0% 50%, rgba(43,124,233,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(123,45,142,0.03) 0%, transparent 50%);
    pointer-events: none;
}

.og-service-intro__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-4xl);
    align-items: start;
    position: relative;
    z-index: 1;
}

.og-service-intro__text {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--og-grey-600);
    margin-bottom: var(--space-2xl);
}

.og-service-intro__text p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 800;
    float: left;
    line-height: 0.85;
    margin-right: var(--space-sm);
    margin-top: 0.1em;
    background: var(--og-gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.og-service-intro__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.og-service-intro__highlight {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--og-navy);
}

.og-service-intro__highlight svg {
    color: var(--og-success);
    flex-shrink: 0;
}

/* Visual card */
.og-service-intro__visual {
    position: relative;
}

.og-service-intro__visual::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: calc(var(--radius-xl) + 8px);
    background: var(--og-gradient);
    opacity: 0.12;
    filter: blur(20px);
    z-index: 0;
}

.og-service-intro__card {
    position: relative;
    z-index: 1;
    background: var(--og-navy);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    overflow: hidden;
}

.og-service-intro__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(43,124,233,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(243,156,18,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.og-service-intro__card > * {
    position: relative;
    z-index: 1;
}

.og-service-intro__card-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--og-gold);
    margin-bottom: var(--space-lg);
}

.og-service-intro__card-headline {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--og-white);
    line-height: 1.3;
    margin-bottom: var(--space-2xl);
}

.og-service-intro__card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.og-service-intro__card-stat {
    text-align: center;
}

.og-service-intro__card-stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--og-gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.og-service-intro__card-stat-label {
    font-size: 0.75rem;
    color: var(--og-grey-400);
    font-weight: 500;
}

@media (max-width: 1024px) {
    .og-service-intro__layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    .og-service-intro__highlights {
        flex-direction: column;
        gap: var(--space-md);
    }

    .og-service-intro__text p:first-child::first-letter {
        font-size: 2.5rem;
    }
}