/**
 * Frontend stylesheet — public-facing site only. The admin panel has its
 * own entry (admin.css) so visitors never download admin-only CSS.
 *
 * Approach: import Bootstrap's compiled CSS as-is, then override its
 * exposed CSS custom properties (--bs-*) to match PRD Section 3's design
 * tokens. Bootstrap 5.3+ publishes its own theme values as CSS variables
 * for exactly this purpose, so this avoids pulling in a Sass build step
 * just to recolor a handful of variables — one less toolchain dependency,
 * consistent with the PRD's "avoid unnecessary heavy dependencies" rule.
 */

@import './tokens.css';
@import './fonts.css';
@import 'bootstrap/dist/css/bootstrap.min.css';
@import '@fortawesome/fontawesome-free/css/all.min.css';

:root {
    /* Remap Bootstrap's own variables onto this project's tokens, so every
       Bootstrap component (buttons, forms, cards, nav) inherits the PRD's
       palette automatically instead of needing per-component overrides. */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 124, 58, 237;
    --bs-body-color: var(--color-paragraph);
    --bs-body-bg: var(--color-background);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-card);
    --bs-border-radius-lg: var(--radius-section);
    --bs-border-radius-sm: var(--radius-button);
    --bs-font-sans-serif: var(--font-primary);
    --bs-body-font-size: var(--fs-paragraph);
}

html {
    scroll-behavior: smooth;
}

/* Stops off-screen elements (e.g. the closed mobile drawer) from widening the page,
   which made mobile browsers zoom out. `clip` (not `hidden`) keeps position: sticky working. */
html,
body {
    overflow-x: clip;
}

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

body {
    font-family: var(--font-primary);
    color: var(--color-paragraph);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-weight: 600; /* Geist SemiBold — 3.6 Typography, section headings */
}

.hero-heading {
    font-size: var(--fs-hero);
    font-weight: 700; /* Geist Bold — 3.6 Typography, hero heading */
    color: var(--color-heading);
    line-height: 1.1;
    letter-spacing: var(--heading-tracking);
}

.section-title {
    font-size: var(--fs-section-title);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
}

/* --- Section eyebrow ("sub-title" pill in agency templates) ---------
   A small accent-dot + label above a heading. Consolidated into one
   class because nine near-identical inline-styled <p> tags across the
   homepage sections were the same thing typed out nine times. */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

.section-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-warm);
    flex-shrink: 0;
}

.section-eyebrow--light {
    color: rgba(255, 255, 255, .7);
}

/* --- 3.13 Section width system -------------------------------------- */
.container-site {
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--space-mobile-padding);
}

@media (min-width: 992px) {
    .container-site {
        padding-inline: var(--space-desktop-padding);
    }
}

/* --- 3.14 Spacing system --------------------------------------------- */
.section {
    position: relative;
    z-index: 0;
    padding-block: calc(var(--space-between-sections) / 2);
}

@media (min-width: 992px) {
    .section {
        padding-block: var(--space-between-sections);
    }
}

.section--dark {
    background-color: var(--color-dark-section);
    color: rgba(255, 255, 255, .75);
}

.section--dark .section-title,
.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: #FFFFFF;
}

/* --- 3.11 Primary button (unified system, all primary CTAs use this) - */
.btn-primary-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.75rem;
    font-size: var(--fs-button);
    font-weight: 600;
    color: #FFFFFF;
    background: var(--gradient-button);
    border: none;
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-button-glow);
    text-decoration: none;
    /* Scale/glow transitions are driven by GSAP at runtime
       (resources/js/lib/motion.js) per Section 2.11's requirement for
       GSAP-based hover animation rather than plain CSS transitions —
       this CSS only sets the resting state. */
}

.btn-primary-gradient:hover,
.btn-primary-gradient:focus-visible {
    color: #FFFFFF;
}

.btn-primary-gradient::after {
    content: '\f061'; /* fa-solid fa-arrow-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .8em;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .25s ease, opacity .25s ease, margin .25s ease;
}

.btn-primary-gradient:hover::after {
    max-width: 1.5em;
    opacity: 1;
    margin-inline-start: .15em;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary-gradient::after {
        transition: none;
    }
}

/* --- 3.12 Secondary button ------------------------------------------- */
.btn-secondary-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.75rem;
    font-size: var(--fs-button);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-background);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

.btn-secondary-outline:hover,
.btn-secondary-outline:focus-visible {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* --- 3.17 Unified card language (portfolio/service/blog/testimonial/
   feature/FAQ cards all extend this single base class) ----------------- */
.card-premium {
    position: relative;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-card-padding);
    box-shadow: var(--shadow-card);
    transition: box-shadow .3s ease, transform .3s ease;
}

.card-premium:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Numbered index badge (01, 02, 03...) in the top-right corner — an
   agency-template cue for feature/service grids, so a set of cards reads
   as an ordered list rather than a loose collection. */
.card-premium--numbered {
    padding-top: calc(var(--space-card-padding) + .25rem);
}

.card-index {
    position: absolute;
    top: var(--space-card-padding);
    right: var(--space-card-padding);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--color-border);
    letter-spacing: .04em;
}

/* Arrow that slides in on hover — the equivalent of the little "→" icon
   Diligent tucks into its link-style cards. Purely CSS so it costs
   nothing extra on top of the GSAP lift already applied via card-hover.js. */
.card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 1rem;
    border-radius: 50%;
    background: var(--color-light-purple);
    color: var(--color-primary);
    font-size: .8rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease;
}

.card-premium--numbered:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- 3.16 Rounded containers (Featured Services, Testimonials, Skills,
   Featured Projects sections) -------------------------------------------- */
.container-panel {
    background: var(--gradient-white-to-purple);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-section);
    padding: var(--space-desktop-padding);
}

/* --- 3.10 Glass effect (premium areas only: contact form, floating
   cards, hero stats, CTA box) -------------------------------------------- */
.glass-panel {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* --- 3.15 Background pattern (large low-opacity grid + subtle glow) --- */
.bg-pattern-grid {
    position: relative;
    isolation: isolate;
}

.bg-pattern-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .35;
    pointer-events: none;
}

/* Utility: visually-hidden but screen-reader accessible (skip links,
   form labels that are visually redundant but required for a11y) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 3.23 / 6.9 / 6.10 Dark premium blocks (CTA banner + Contact panel)
   ------------------------------------------------------------------------
   The PRD calls for a small number of intentionally dark sections against
   the otherwise light theme (CTA, Contact, Footer). Both share the same
   recipe — dark navy base, one large purple radial glow, rounded container —
   so it lives here once rather than being re-declared per page.          */
.cta-banner,
.contact-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-dark-section);
    border-radius: var(--radius-section);
    color: rgba(255, 255, 255, .75);
}

.cta-banner::before,
.contact-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -40%;
    left: 50%;
    width: min(900px, 120%);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: var(--gradient-glow-to-transparent);
    opacity: .9;
    pointer-events: none;
}

.contact-panel::before {
    left: 15%;
    top: -55%;
}

.cta-banner h2,
.contact-panel h2,
.contact-panel h3 {
    color: #FFFFFF;
}

/* Ghost button — the secondary action inside a dark block, where the
   light-theme .btn-secondary-outline (purple on white) would be invisible. */
.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.75rem;
    font-size: var(--fs-button);
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease;
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .38);
}

/* Circular icon chip used for contact details and social links on dark. */
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #FFFFFF;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
}

a.contact-icon:hover,
a.contact-icon:focus-visible {
    background: rgba(124, 58, 237, .45);
    color: #FFFFFF;
}

/* "Currently available" pulse. Honors prefers-reduced-motion (PRD 14.18). */
.availability-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: availability-pulse 2.4s ease-out infinite;
}

@keyframes availability-pulse {
    70% { box-shadow: 0 0 0 .5rem rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .availability-dot { animation: none; }
}

/* --- Client logo marquee (agency-style continuous strip) ------------ */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__track img {
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Marquee is a continuous motion effect, not a one-off transition, so
   reduced-motion gets a static (non-animating) strip rather than an
   instant jump-to-end-state the way scroll-reveal's `motionFrom` does. */
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* --- Floating decorative blobs (agency-hero motif) -------------------
   Soft, blurred glow shapes that drift gently behind hero/dark sections —
   built from the existing gradient tokens rather than raster art, so
   there's no external asset dependency and the color always matches the
   rest of the palette. Purely decorative: aria-hidden, no pointer events,
   never affects layout since they're absolutely positioned. */
.decor-blob {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    background: var(--gradient-glow-to-transparent);
    filter: blur(2px);
    animation: float-bob-y 9s ease-in-out infinite;
}

.decor-blob--sm { width: 180px; height: 180px; }
.decor-blob--md { width: 320px; height: 320px; }
.decor-blob--lg { width: 460px; height: 460px; }

.decor-blob--alt { animation-name: float-bob-x; animation-duration: 11s; }
.decor-blob--slow { animation-duration: 14s; }

@keyframes float-bob-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-22px); }
}

@keyframes float-bob-x {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(18px); }
}

@media (prefers-reduced-motion: reduce) {
    .decor-blob { animation: none; }
}

/* --- 3.22 Form design, dark/glass variant --------------------------- */
.form-label-dark {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    font-size: var(--fs-small);
}

.form-control-glass {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-form);
    color: #FFFFFF;
    padding: .875rem 1rem;
}

.form-control-glass::placeholder {
    color: rgba(255, 255, 255, .40);
}

.form-control-glass:focus {
    background: rgba(255, 255, 255, .10);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--color-purple-glow);
    color: #FFFFFF;
}

/* Bootstrap's .is-invalid feedback is dark red on dark navy — unreadable.
   Lifted to a lighter tint that still passes contrast on this background. */
.form-control-glass.is-invalid {
    border-color: #F87171;
}

.form-control-glass.is-invalid ~ .invalid-feedback,
.contact-panel .invalid-feedback {
    color: #FCA5A5;
}

/* --- 3.20 / 10.6 Blog card ------------------------------------------- */
.blog-card {
    padding: var(--space-card-padding);
    overflow: hidden;
}

.blog-card__media {
    border-radius: var(--radius-image);
    overflow: hidden;
    background: var(--color-soft-background);
}

.blog-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-card:hover .blog-card__media img,
.blog-card:focus-visible .blog-card__media img {
    transform: scale(1.04);
}

.blog-card:hover,
.blog-card:focus-visible {
    border-color: var(--color-primary);
}

.blog-card__arrow {
    transition: transform .25s ease;
}

.blog-card:hover .blog-card__arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .blog-card__media img,
    .blog-card__arrow { transition: none; }
    .blog-card:hover .blog-card__media img { transform: none; }
}

/* --- 10.16 Share buttons -------------------------------------------- */
.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-paragraph);
    background: var(--color-soft-background);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.share-button:hover,
.share-button:focus-visible {
    color: #FFFFFF;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* --- 10.10 Article table of contents --------------------------------- */
.article-toc__details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-soft-background);
    padding: 1rem 1.25rem;
}

.article-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-heading);
    list-style: none;
}

.article-toc__summary::-webkit-details-marker { display: none; }

.article-toc__chevron { transition: transform .2s ease; }
.article-toc__details[open] .article-toc__chevron { transform: rotate(180deg); }

.article-toc__list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    border-left: 2px solid var(--color-border);
}

.article-toc__item a {
    display: block;
    padding: .375rem 0 .375rem 1rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: var(--fs-small);
    line-height: 1.45;
    color: var(--color-paragraph);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.article-toc__item--level-3 a { padding-left: 1.75rem; }

.article-toc__item a:hover,
.article-toc__item a:focus-visible { color: var(--color-primary); }

.article-toc__item a.is-active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
}

@media (min-width: 992px) {
    .article-toc {
        position: sticky;
        top: 96px;
        max-height: calc(100vh - 128px);
        overflow-y: auto;
    }

    /* Desktop: always expanded, and the disclosure affordance is removed so
       it doesn't read as an interactive control that does nothing. */
    .article-toc__details {
        background: transparent;
        border: none;
        padding: 0;
    }

    .article-toc__summary { cursor: default; pointer-events: none; }
    .article-toc__chevron { display: none; }
}

/* --- 10.7 Article body typography ------------------------------------ */
.article-body {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #333333;
}

.article-body > * + * { margin-top: 1.5rem; }

.article-body h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-top: 3rem;
    /* Offsets the sticky header when a ToC link jumps to a heading. */
    scroll-margin-top: 96px;
}

.article-body h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-top: 2.25rem;
    scroll-margin-top: 96px;
}

.article-body h2:focus-visible,
.article-body h3:focus-visible { outline: none; }

.article-body ul,
.article-body ol { padding-left: 1.5rem; }

.article-body li + li { margin-top: .5rem; }

.article-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-image);
}

.article-body figure figcaption {
    margin-top: .75rem;
    font-size: var(--fs-small);
    color: var(--color-paragraph);
    text-align: center;
}

.article-body blockquote {
    margin-inline: 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--color-primary);
    background: var(--color-extra-light-purple);
    border-radius: 0 var(--radius-button) var(--radius-button) 0;
    color: var(--color-heading);
    font-size: 1.0625rem;
}

.article-body blockquote > :first-child { margin-top: 0; }

.article-body pre {
    padding: 1.25rem 1.5rem;
    background: var(--color-dark-section);
    color: #E5E7EB;
    border-radius: var(--radius-button);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: .9375rem;
    line-height: 1.6;
}

.article-body :not(pre) > code {
    padding: .15em .4em;
    background: var(--color-light-purple);
    color: var(--color-primary-hover);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: .9em;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.article-body th,
.article-body td {
    padding: .75rem 1rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.article-body th {
    background: var(--color-soft-background);
    color: var(--color-heading);
    font-weight: 600;
}

.article-body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: 2.5rem;
}

/* Video embeds keep a 16:9 box so the page doesn't reflow as they load. */
.article-body iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: none;
    border-radius: var(--radius-image);
}

/* A table wider than the column scrolls inside its own box rather than
   forcing the whole page to scroll sideways (PRD 2.9). */
@media (max-width: 575.98px) {
    .article-body table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- 6.3 / 6.5 Vertical timeline (Development Process, Experience) ------
   One component for both: the PRD describes the same visual pattern for the
   process steps and the experience timeline, and giving them separate styles
   would be exactly the "section belongs to a different design system" problem
   3.31 warns about. */
.process-timeline {
    position: relative;
    margin: 0 auto;
    max-width: 780px;
}

.process-step {
    position: relative;
    padding-left: 4.5rem;
    padding-bottom: 2.5rem;
}

.process-step:last-child {
    padding-bottom: 0;
}

/* Connector line, drawn between markers rather than behind them so it never
   shows through the circle. */
.process-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 3.25rem;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.process-step__marker {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--gradient-button);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: var(--shadow-button-glow);
}

@media (max-width: 575.98px) {
    .process-step { padding-left: 3.5rem; }
    .process-step__marker { width: 2.5rem; height: 2.5rem; font-size: .9375rem; }
    .process-step:not(:last-child)::before { left: 1.25rem; top: 2.75rem; }
}

/* --- 3.24 / 4.6 Navbar ------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.site-header--scrolled {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--color-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
}

/* Older Safari and Firefox with backdrop-filter disabled would show a
   translucent bar over scrolling text; fall back to opaque white there. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header--scrolled { background: #FFFFFF; }
}

.site-header .nav-link {
    color: var(--color-heading);
    border-radius: var(--radius-button);
    transition: color .2s ease, background-color .2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
    color: var(--color-primary);
    background: var(--color-light-purple);
}

.site-header .nav-link.is-active {
    color: var(--color-primary);
    font-weight: 600;
    position: relative;
}

.site-header .nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: translateX(-50%);
}

.mobile-nav-link {
    display: block;
    padding: .75rem 1rem;
    border-radius: var(--radius-button);
    color: var(--color-heading);
    font-weight: 500;
    text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible,
.mobile-nav-link.is-active {
    color: var(--color-primary);
    background: var(--color-light-purple);
}

@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}

/* --- 3.27 Premium loader ------------------------------------------------
   The overlay element is created by JavaScript, never rendered server-side —
   so a failed asset load can never leave a visitor staring at a permanent
   splash screen with the page hidden behind it. */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: var(--color-background);
    opacity: 1;
    transition: opacity .45s ease, visibility .45s ease;
}

.page-loader--done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__glow {
    position: absolute;
    width: min(640px, 90vw);
    aspect-ratio: 1;
    background: var(--gradient-glow-to-transparent);
    animation: loader-breathe 2.4s ease-in-out infinite;
}

.page-loader__mark {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--color-light-purple);
    border-top-color: var(--color-primary);
    animation: loader-spin .9s linear infinite;
}

@keyframes loader-spin { to { transform: rotate(360deg); } }

@keyframes loader-breathe {
    0%, 100% { transform: scale(.9); opacity: .7; }
    50% { transform: scale(1.05); opacity: 1; }
}

body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .page-loader { display: none; }
}

/* --- 3.19 / 6.2 Portfolio card ---------------------------------------- */
.portfolio-card {
    padding: 0;
    overflow: hidden;
}

.portfolio-card__media {
    overflow: hidden;
    background: var(--color-soft-background);
}

.portfolio-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .5s ease;
}

.portfolio-card:hover .portfolio-card__media img,
.portfolio-card:focus-visible .portfolio-card__media img {
    transform: scale(1.04);
}

.portfolio-card:hover,
.portfolio-card:focus-visible {
    border-color: var(--color-primary);
}

.portfolio-card__arrow { transition: transform .25s ease; }
.portfolio-card:hover .portfolio-card__arrow { transform: translateX(4px); }

/* Fade for cards revealed by the homepage category filter. Purely additive —
   a card that is not animated is simply visible. */
.is-filtering-in {
    animation: filter-fade-in .35s ease both;
}

@keyframes filter-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card__media img,
    .portfolio-card__arrow { transition: none; }
    .portfolio-card:hover .portfolio-card__media img { transform: none; }
    .is-filtering-in { animation: none; }
}

[data-parallax] {
    --parallax-y: 0px;
    transform: translate3d(0, var(--parallax-y), 0);
    will-change: transform;
}

/* ==========================================================================
   REDESIGN LAYER — structural patterns drawn from Natia (personal portfolio)
   and Diligent (creative agency), rebuilt on the existing token system.
   Nothing here changes --color-* tokens; it only adds layout/shape/rhythm.
   ========================================================================== */

/* --- Split hero (Natia-style): portrait right, orbiting rings + badge --- */
.hero-split { position: relative; overflow: hidden; }

.hero-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed var(--color-border);
    pointer-events: none;
}

.hero-portrait {
    position: relative;
    max-width: 460px;
    margin-inline: auto;
}

.hero-portrait__frame {
    position: relative;
    aspect-ratio: 1 / 1.05;
    border-radius: 50% 50% 46% 46% / 54% 54% 46% 46%;
    overflow: hidden;
    background: var(--gradient-purple-to-white);
    box-shadow: var(--shadow-card-hover);
}

.hero-portrait__frame img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.05;
    object-fit: cover;
}

.hero-portrait__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
}

.hero-float-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-card-hover);
    padding: .75rem 1rem;
    font-size: var(--fs-small);
    /* Combines the CSS float loop (--float-y) with scroll parallax
       (--parallax-y, written by parallax.js) into one transform so the
       two never overwrite each other. */
    --float-y: 0px;
    transform: translate3d(0, calc(var(--float-y) + var(--parallax-y, 0px)), 0);
    animation: hero-badge-float 6s ease-in-out infinite;
}

.hero-float-badge--alt { animation-delay: -3s; animation-duration: 7s; }

@keyframes hero-badge-float {
    0%, 100% { --float-y: 0px; }
    50% { --float-y: -10px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-float-badge { animation: none; }
}

/* --- About "resume" tabs (Natia-style pill tabs) ------------------------ */
.about-tabs-nav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    background: var(--color-soft-background);
    border-radius: var(--radius-button);
    padding: .4rem;
}

.about-tabs-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: calc(var(--radius-button) - 6px);
    padding: .6rem 1.1rem;
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--color-paragraph);
    background: transparent;
    border: 0;
    transition: background .2s ease, color .2s ease;
}

.about-tabs-nav .nav-link.active,
.about-tabs-nav .nav-link:hover {
    background: #fff;
    color: var(--color-primary);
    box-shadow: var(--shadow-card);
}

/* --- Stat counter strip (Diligent-style fact counters) ------------------ */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-between-cards);
}

@media (min-width: 992px) {
    .stat-strip { grid-template-columns: repeat(4, 1fr); }
}

.stat-strip__item {
    text-align: center;
    padding: var(--space-card-padding) 1rem;
    background: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
}

.stat-strip__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.stat-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-light-purple);
    color: var(--color-primary);
    font-size: 1.375rem;
    margin-bottom: .9rem;
}

.stat-strip__number {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    color: var(--color-heading);
    line-height: 1;
}

.stat-strip__label {
    margin-top: .4rem;
    color: var(--color-paragraph);
    font-size: var(--fs-small);
}

/* --- Service card with icon badge + arrow (Diligent-style) -------------- */
/* Diligent's real service-three__single pattern: a solid card with a
   color panel that sweeps up from behind on hover (perspective-rotated
   in the source template), swapping icon/text color as it arrives —
   not just a lift-and-shadow hover. Adapted to the light purple palette
   instead of Diligent's dark theme. */
.service-icon-card {
    position: relative;
    display: block;
    height: 100%;
    padding: var(--space-card-padding);
    background: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: border-color .4s ease;
}

.service-icon-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: var(--gradient-button);
    opacity: 0;
    transform: perspective(500px) rotateX(18deg) scaleY(0.85);
    transform-origin: bottom;
    transition: opacity .45s ease, transform .45s ease;
    z-index: -1;
}

.service-icon-card:hover,
.service-icon-card:focus-visible {
    border-color: transparent;
}

.service-icon-card:hover::before,
.service-icon-card:focus-visible::before {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg) scaleY(1);
}

.service-icon-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-button);
    background: var(--color-light-purple);
    color: var(--color-primary);
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    transition: background .4s ease, color .4s ease;
}

.service-icon-card:hover .service-icon-card__icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.service-icon-card:hover h3,
.service-icon-card:hover p {
    color: #fff !important;
}

.service-icon-card__arrow {
    position: absolute;
    top: var(--space-card-padding);
    right: var(--space-card-padding);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-soft-background);
    color: var(--color-primary);
    transition: transform .4s ease, background .4s ease, color .4s ease;
}

.service-icon-card:hover .service-icon-card__arrow {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .service-icon-card,
    .service-icon-card::before,
    .service-icon-card__icon,
    .service-icon-card__arrow,
    .stat-strip__item { transition: none; }
}

.text-gradient-purple {
    background: var(--gradient-button);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.typewriter-caret::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-left: 4px;
    background: var(--color-primary);
    vertical-align: -0.15em;
    animation: typewriter-blink 1s step-end infinite;
}

@keyframes typewriter-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .typewriter-caret::after { animation: none; }
}

/* --- Diligent-style floating decorative shape chips (distinct from the
   existing blurred decor-blob background shapes — these are small, crisp,
   icon-bearing chips that drift independently, like banner-three__shape*
   in the agency template). --- */
.float-shape {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-card);
    color: var(--color-primary);
    pointer-events: none;
}

.float-shape--bob-x { animation: float-bob-x 5s ease-in-out infinite; }
.float-shape--bob-y { animation: float-bob-y 4.5s ease-in-out infinite; }

@keyframes float-bob-x {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(14px); }
}

@keyframes float-bob-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    .float-shape--bob-x,
    .float-shape--bob-y { animation: none; }
}
.kicker-rule {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.kicker-rule::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--color-primary);
    display: inline-block;
}

.kicker-rule--light {
    color: #fff;
}

.kicker-rule--light::before {
    background: #fff;
}

/* --- Footer newsletter band (Diligent-style CTA strip above footer) ----- */
.footer-cta-band {
    background: var(--gradient-button);
    border-radius: var(--radius-section);
    padding: 2rem 1.75rem;
    margin-top: calc(var(--space-between-sections) * -0.4);
    margin-inline: var(--space-mobile-padding);
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-button-glow);
}

@media (min-width: 992px) {
    .footer-cta-band {
        padding: 2.5rem;
        margin-inline: auto;
        max-width: calc(var(--container-max-width) - 2 * var(--space-desktop-padding));
    }
}

.footer-cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* --- Numbered process rail with connecting line (Diligent-style) -------- */
.process-rail {
    position: relative;
}

.process-rail::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--color-border);
}

@media (min-width: 992px) {
    .process-rail--horizontal::before {
        top: 28px;
        left: 28px;
        right: 28px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
}