/* ================================================================
   LINEAR COMPONENTS
   Faithful to Linear Releases 2022 page structure
   ================================================================ */

/* --- Page Container --- */
.ln-page {
    max-width: var(--ln-content-max-width);
    margin: 0 auto;
    padding: 0 var(--ln-page-padding);
}

/* --- Section --- */
.ln-section {
    padding: var(--ln-section-padding) 0;
    position: relative;
}

/* Section accent glow */
.ln-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}
.ln-section--teal::before { background: var(--ln-accent-teal); }
.ln-section--purple::before { background: var(--ln-accent-purple); }
.ln-section--blue::before { background: var(--ln-accent-blue); }

/* --- Section Header (centered) --- */
.ln-section-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}
.ln-section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: var(--ln-weight-medium);
    letter-spacing: 0.02em;
    margin-bottom: 24px;
}
.ln-section-label--teal { color: var(--ln-accent-teal); }
.ln-section-label--purple { color: var(--ln-accent-purple-light); }
.ln-section-label--blue { color: var(--ln-accent-blue); }
.ln-section-desc {
    font-size: 18px;
    font-weight: var(--ln-weight-book);
    color: var(--ln-text-secondary);
    max-width: 640px;
    margin: 20px auto 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .ln-section-header { margin-bottom: 32px; }
    .ln-section-desc { font-size: 16px; }
}

/* --- Hero --- */
.ln-hero {
    min-height: clamp(700px, calc(100vh - 48px), 820px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--ln-page-padding) 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.ln-hero-content {
    max-width: 720px;
    position: relative;
    z-index: 2;
}
.ln-hero-label {
    font-size: 13px;
    font-weight: var(--ln-weight-medium);
    color: var(--ln-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.ln-hero-subtitle {
    font-size: 20px;
    font-weight: var(--ln-weight-book);
    color: var(--ln-text-secondary);
    margin: 24px auto 0;
    line-height: 1.5;
    max-width: 600px;
}
.ln-hero-graphic {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 48px auto -64px;
    aspect-ratio: 16 / 10;
    border-radius: var(--ln-card-radius);
    border: 1px solid var(--ln-border-subtle);
    background: linear-gradient(135deg, rgba(94,106,210,0.15), rgba(176,75,255,0.1), rgba(51,255,182,0.05));
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.ln-hero-graphic-inner {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            rgba(255,255,255,0.02) 8px,
            rgba(255,255,255,0.02) 9px
        ),
        linear-gradient(
            180deg,
            rgba(94,106,210,0.2) 0%,
            rgba(176,75,255,0.15) 30%,
            rgba(51,255,182,0.1) 60%,
            rgba(111,142,255,0.08) 100%
        );
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.ln-hero-graphic-glow {
    position: absolute;
    top: 20%; left: 50%; transform: translateX(-50%);
    width: 300px; height: 200px;
    background: radial-gradient(ellipse, rgba(94,106,210,0.4), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

@media (max-width: 768px) {
    .ln-hero {
        min-height: calc(100svh - 48px);
        padding-bottom: 0;
    }
    .ln-hero-subtitle { font-size: 16px; }
    .ln-hero-graphic { max-width: 360px; margin-bottom: -32px; }
}

/* --- Cards --- */
.ln-card {
    background: var(--ln-bg-card);
    border: 1px solid var(--ln-border-primary);
    border-radius: var(--ln-card-radius);
    padding: var(--ln-card-padding);
    position: relative;
    overflow: hidden;
    transition: border-color var(--ln-duration-regular) ease;
}
.ln-card:hover {
    border-color: rgba(255,255,255,0.12);
}

/* Card glow overlay (top edge shine) */
.ln-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ln-card:hover::before { opacity: 1; }

.ln-card-title { margin-bottom: 12px; }
.ln-card-desc {
    font-size: 15px;
    font-weight: var(--ln-weight-regular);
    line-height: 1.6;
    color: var(--ln-text-secondary);
}

/* Badge / pill */
.ln-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: var(--ln-weight-medium);
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--ln-text-secondary);
    margin-bottom: 16px;
}

/* Card screenshot area */
.ln-card-image {
    margin-top: 24px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--ln-border-primary);
}
.ln-card-image img {
    width: 100%;
    height: auto;
    display: block;
}
/* Fade mask on card images */
.ln-card-image--fade {
    mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
    border: none;
}

/* --- Grid Layouts --- */
/* Standard 2-col bento */
.ln-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ln-grid-gap);
    position: relative;
    z-index: 1;
}
/* Full-width card spanning both columns */
.ln-grid-span-full { grid-column: 1 / -1; }
/* Tall card spanning multiple rows */
.ln-grid-span-rows { grid-row: span 2; }

/* 3-col grid */
.ln-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ln-grid-gap);
    position: relative;
    z-index: 1;
}

/* 2x2 grid */
.ln-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: var(--ln-grid-gap);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .ln-grid-2, .ln-grid-3, .ln-grid-2x2 {
        grid-template-columns: 1fr;
    }
    .ln-grid-span-full { grid-column: auto; }
    .ln-grid-span-rows { grid-row: auto; }
}

/* --- Testimonial Block --- */
.ln-testimonial {
    background: var(--ln-bg-card);
    border: 1px solid var(--ln-border-primary);
    border-radius: var(--ln-card-radius);
    padding: var(--ln-card-padding);
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 48px;
    position: relative;
    z-index: 1;
}
.ln-testimonial-logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: var(--ln-weight-bold);
    color: var(--ln-text-secondary);
}
.ln-testimonial-text {
    flex: 1;
    font-size: 16px;
    font-weight: var(--ln-weight-book);
    line-height: 1.6;
    color: var(--ln-text-secondary);
}
.ln-testimonial-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: var(--ln-weight-medium);
    color: var(--ln-text-tertiary);
    flex-shrink: 0;
    transition: color var(--ln-duration-quick) ease;
}
.ln-testimonial-link:hover { color: var(--ln-text-primary); }
.ln-testimonial-link svg {
    width: 14px; height: 14px;
    transition: transform var(--ln-duration-regular) ease;
}
.ln-testimonial-link:hover svg { transform: translateX(3px); }

@media (max-width: 768px) {
    .ln-testimonial {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 28px;
    }
}

/* --- Stats Row --- */
.ln-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ln-grid-gap);
    text-align: center;
    position: relative;
    z-index: 1;
}
.ln-stat-item {
    padding: 32px 0;
}
.ln-stat-number {
    margin-bottom: 12px;
}
.ln-stat-label {
    font-size: 16px;
    font-weight: var(--ln-weight-book);
    color: var(--ln-text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .ln-stats { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Buttons --- */
.ln-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: var(--ln-weight-medium);
    line-height: 1;
    transition: opacity var(--ln-duration-regular) ease, transform var(--ln-duration-regular) ease;
    white-space: nowrap;
}
.ln-btn:hover { opacity: 0.85; }
.ln-btn:active { transform: scale(0.98); }
.ln-btn svg { width: 16px; height: 16px; }

.ln-btn--primary {
    background: var(--ln-accent-brand);
    color: #fff;
}
.ln-btn--secondary {
    background: transparent;
    color: var(--ln-text-primary);
    border: 1px solid var(--ln-border-primary);
}
.ln-btn--secondary:hover {
    border-color: rgba(255,255,255,0.15);
    opacity: 1;
}
.ln-btn--ghost {
    background: transparent;
    color: var(--ln-text-secondary);
    padding: 10px 16px;
}
.ln-btn--ghost:hover { color: var(--ln-text-primary); opacity: 1; }

/* Card CTA link */
.ln-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: var(--ln-weight-medium);
    color: var(--ln-text-tertiary);
    margin-top: 16px;
    transition: color var(--ln-duration-quick) ease;
}
.ln-card-link:hover { color: var(--ln-text-primary); }
.ln-card-link svg {
    width: 14px; height: 14px;
    transition: transform var(--ln-duration-regular) ease;
}
.ln-card-link:hover svg { transform: translateX(3px); }

/* --- CTA Section --- */
.ln-cta-section {
    text-align: center;
    padding: var(--ln-section-padding) 0;
    position: relative;
}
.ln-cta-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(94,106,210,0.12), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}
.ln-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* --- Footer --- */
.ln-footer {
    border-top: 1px solid var(--ln-border-primary);
    padding: 64px 0 48px;
}
.ln-footer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}
.ln-footer-heading {
    font-size: 14px;
    font-weight: var(--ln-weight-medium);
    color: var(--ln-text-secondary);
    margin-bottom: 16px;
}
.ln-footer-link {
    display: block;
    font-size: 14px;
    font-weight: var(--ln-weight-book);
    color: var(--ln-text-muted);
    padding: 3px 0;
    transition: color var(--ln-duration-quick) ease;
}
.ln-footer-link:hover { color: var(--ln-text-primary); }
.ln-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--ln-border-primary);
    font-size: 13px;
    color: var(--ln-text-muted);
}
.ln-footer-social {
    display: flex; gap: 16px;
}
.ln-footer-social a {
    color: var(--ln-text-muted);
    transition: color var(--ln-duration-quick) ease;
}
.ln-footer-social a:hover { color: var(--ln-text-primary); }

@media (max-width: 1024px) {
    .ln-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
    .ln-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .ln-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* --- Placeholder image styling --- */
.ln-placeholder-img {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border-radius: 12px;
    border: 1px solid var(--ln-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ln-text-muted);
    font-size: 13px;
    font-weight: var(--ln-weight-medium);
    margin-top: 24px;
}