/* ==========================================================================
   DASHAPRAMATI — WHITE HOMEPAGE SYSTEM
   The cinematic hero (hero.css) opens the film; these styles carry its
   light, palette and motion language through the rest of the page.
   Structure adapted from the production PHP homepage; colors harmonized
   to the hero's cyan → blue → purple identity.
   ========================================================================== */
:root {
    --bg-base: #ffffff;
    --bg-tint: #f6f8fb;
    --color-text: #0A0F1E;
    --color-muted: #5A6478;
    --color-faint: #98A1B3;

    /* Brand identity axis — sampled from the business card logo */
    --brand-cyan: #0BB7FE;
    --brand-blue: #415AFF;
    --brand-purple: #9600FF;
    --brand-magenta: #DF12FF;
    --brand-ink-blue: #003FC3;
    --brand-gradient: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 42%, var(--brand-purple) 74%, var(--brand-magenta) 100%);
    --brand-gradient-h: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-blue) 40%, var(--brand-purple) 72%, var(--brand-magenta) 100%);

    /* Business-card deep palette (footer finale) */
    --brand-card-dark: #070913;

    --shadow-subtle: 0 4px 20px rgba(11, 15, 25, 0.03);
    --shadow-premium: 0 18px 40px -18px rgba(15, 23, 42, 0.22), 0 4px 12px -6px rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 15px 35px rgba(65, 90, 255, 0.18);
    --border-clean: 1px solid rgba(10, 15, 30, 0.08);

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --whitespace-sec: 9rem;
}

/* Core resets */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%;
    background-color: var(--bg-base);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; }
p { font-size: 1.05rem; line-height: 1.7; color: var(--color-muted); letter-spacing: -0.01em; }

.text-gradient-highlight {
    background: var(--brand-gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 2.5rem; position: relative; z-index: 2; }
section { padding: var(--whitespace-sec) 0; position: relative; }

/* Ambient cursor glow — the hero's light following the visitor down the page */
.brand-cursor-glow {
    position: fixed;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(11, 183, 254, 0.05) 0%, rgba(150, 0, 255, 0.025) 50%, transparent 75%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    will-change: transform;
}

/* ==========================================================================
   PRELOADER — white curtain, gradient pulse (cues the hero film on lift)
   ========================================================================== */
.page-loader {
    position: fixed; inset: 0;
    background: var(--bg-base);
    z-index: 10000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2rem;
}
.loader-emblem {
    width: 60px; height: 60px;
    display: grid; place-items: center;
    filter: drop-shadow(0 12px 22px rgba(150, 0, 255, 0.35));
    animation: loaderPulse 2s ease-in-out infinite;
}
.loader-emblem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.loader-bar-frame {
    width: 180px; height: 2px;
    background: rgba(10, 15, 30, 0.06);
    border-radius: 2px;
    overflow: hidden;
}
.loader-line { width: 0%; height: 100%; background: var(--brand-gradient-h); }
@keyframes loaderPulse {
    0%, 100% { transform: scale(0.96); }
    50% { transform: scale(1.04); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-meta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1.05rem 2.2rem;
    font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
    position: relative; overflow: hidden;
}
.btn-solid { background: var(--color-text); color: #fff; border: 1px solid var(--color-text); box-shadow: var(--shadow-subtle); }
.btn-solid::before {
    content: ''; position: absolute; inset: 0;
    background: var(--brand-gradient-h);
    opacity: 0; transition: opacity 0.4s ease;
    z-index: 1;
}
.btn-solid span { position: relative; z-index: 2; }
.btn-solid:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); border-color: transparent; }
.btn-solid:hover::before { opacity: 1; }
.btn-ghost { background: transparent; color: var(--color-text); border: var(--border-clean); margin-left: 1.2rem; }
.btn-ghost:hover { background: #fff; border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-2px); }

/* ==========================================================================
   BRAND LOCKUP & NAVBAR (glass over the white scene)
   ========================================================================== */
.brand-logo-lockup { display: flex; align-items: center; gap: 0.85rem; }
.brand-logo-emblem {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    filter: drop-shadow(0 4px 10px rgba(150, 0, 255, 0.28));
}
.brand-logo-emblem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-typography { display: flex; flex-direction: column; }
/* Card wordmark: Montserrat-weight geometric caps in the brand's ink blue */
.brand-name { font-family: 'Montserrat', var(--font-heading); font-size: 1.15rem; font-weight: 800; color: var(--brand-ink-blue); letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; }
.brand-tagline { font-family: 'Montserrat', var(--font-body); font-size: 0.52rem; font-weight: 600; color: var(--brand-ink-blue); letter-spacing: 0.32em; line-height: 1; margin-top: 0.35rem; text-transform: uppercase; }

.navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 85px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    z-index: 1000;
    display: flex; align-items: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.navbar.scrolled { border-bottom: var(--border-clean); box-shadow: 0 8px 30px -18px rgba(15, 23, 42, 0.18); }
.navbar-container { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.nav-menu-wrapper { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-item-link { font-size: 0.9rem; font-weight: 500; color: var(--color-muted); transition: color 0.3s; position: relative; padding: 0.5rem 0; }
.nav-item-link:hover { color: var(--color-text); }
.nav-item-link::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--brand-gradient-h);
    transition: width 0.4s ease;
}
.nav-item-link:hover::after { width: 100%; }
.nav-item-link.is-active { color: var(--color-text); }
.nav-item-link.is-active::after { width: 100%; }

/* (mega-menu styles removed — flat navigation) */

/* ==========================================================================
   FLOW LANGUAGE — the transition system carrying the hero into the page
   ========================================================================== */

/* Seam: a gradient hairline that draws itself where sections meet —
   the same line language as the hero's ecosystem connectors */
.flow-seam {
    height: 1px;
    margin-bottom: 5.5rem;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(11, 183, 254, 0.55) 18%,
        rgba(65, 90, 255, 0.55) 48%,
        rgba(150, 0, 255, 0.5) 70%,
        rgba(223, 18, 255, 0.5) 84%,
        transparent 100%);
    transform: scaleX(0);
    transform-origin: 50% 50%;
}

/* Section eyebrow: mirrors the hero's gradient-dot eyebrow exactly */
.section-meta-tag {
    display: flex; align-items: center; gap: 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 1.4rem;
}
.section-meta-tag::before {
    content: '';
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--brand-gradient);
    box-shadow: 0 0 0 4px rgba(65, 90, 255, 0.12);
}

.section-header-block { max-width: 760px; margin-bottom: 5rem; }
.section-header-block h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.1rem);
    color: var(--color-text);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

/* Reveal defaults — elements enter in the hero's motion language */
[data-animation] { will-change: transform, opacity; }

/* ==========================================================================
   MODULE 2 · PROBLEM ALIGNMENT — flows straight out of the hero's white
   ========================================================================== */
.problem-alignment-matrix {
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-tint) 100%);
    padding-top: 3rem;
}
.problem-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.problem-lens-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: var(--border-clean);
    border-radius: var(--radius-md);
    padding: 2.8rem 2.4rem;
    transition: var(--transition);
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 340px;
    position: relative;
}
.problem-lens-card::after {
    content: ''; position: absolute; inset: 0;
    border-radius: var(--radius-md);
    padding: 1px;
    background: var(--brand-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0; transition: opacity 0.4s ease;
    pointer-events: none;
}
.problem-lens-card:hover { transform: translateY(-4px); background: #ffffff; box-shadow: var(--shadow-premium); }
.problem-lens-card:hover::after { opacity: 1; }
.problem-lens-card h3 { font-size: 1.42rem; font-weight: 700; margin-bottom: 1.2rem; color: var(--color-text); }
.problem-lens-card p { font-size: 0.95rem; color: var(--color-muted); }
.problem-context-footer {
    font-size: 0.85rem; font-weight: 600; color: var(--brand-blue);
    margin-top: 2.5rem;
    display: flex; align-items: center; gap: 0.5rem;
    transition: var(--transition);
}
.problem-lens-card:hover .problem-context-footer { color: var(--brand-purple); transform: translateX(4px); }

/* ==========================================================================
   MODULE 3 · OUTCOMES — tinted valley, rises back to white
   ========================================================================== */
.outcomes-platform { background: linear-gradient(180deg, var(--bg-tint) 0%, #ffffff 100%); }
.outcomes-row-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 1rem; }
.outcome-node { padding-right: 1.5rem; position: relative; }
.outcome-icon-accent {
    width: 40px; height: 40px;
    margin-bottom: 1.5rem;
    display: grid; place-items: center;
    background: var(--brand-gradient);
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(65, 90, 255, 0.6);
}
.outcome-node h4 { font-size: 1.4rem; margin-bottom: 1.2rem; color: var(--color-text); line-height: 1.25; }
.outcome-node p { font-size: 0.95rem; line-height: 1.7; }

/* ==========================================================================
   MODULE 4 · CASE LOG — glass interface cards, same craft as the hero window
   ========================================================================== */
.case-log-showcase { background: #ffffff; }
.case-story-stack { display: flex; flex-direction: column; gap: 8rem; }
.case-story-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; }
.case-story-row.flipped-layout { grid-template-columns: 1.1fr 1fr; }

.case-narrative .pain-header {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 700; color: var(--color-text);
    margin-bottom: 1.5rem;
    line-height: 1.15; letter-spacing: -0.03em;
}
.case-narrative .resolution-summary { font-size: 1.05rem; margin-bottom: 2.2rem; }
.case-metric-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: rgba(11, 183, 254, 0.07);
    border: 1px solid rgba(11, 183, 254, 0.22);
    color: var(--brand-blue);
    font-weight: 600; font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.8rem;
}
.case-metric-badge::before { content: ''; width: 6px; height: 6px; background: var(--brand-cyan); border-radius: 50%; }

.case-visual-container { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.interface-card-frame {
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(10, 15, 30, 0.09);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.interface-card-header {
    padding: 1rem 1.5rem;
    background: rgba(246, 248, 252, 0.9);
    border-bottom: var(--border-clean);
    display: flex; justify-content: space-between; align-items: center;
}
.interface-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.05em; }
.interface-body { padding: 2rem; background: #fff; display: flex; flex-direction: column; gap: 1.2rem; }
.supporting-code-wrapper {
    margin-top: 1rem;
    background: #0f172a;
    border-radius: var(--radius-sm);
    padding: 1rem;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ==========================================================================
   MODULE 5 · LIFECYCLE — tinted valley again
   ========================================================================== */
.lifecycle-stepper { background: linear-gradient(180deg, #ffffff 0%, var(--bg-tint) 45%, var(--bg-tint) 100%); }
.step-track-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin-top: 4rem; }
.step-node { border-top: 1px solid rgba(10, 15, 30, 0.1); padding-top: 2rem; position: relative; }
.step-node::before {
    content: ''; position: absolute; top: -1px; left: 0;
    width: 0; height: 2px;
    background: var(--brand-gradient-h);
    transition: width 0.8s ease-in-out;
}
.step-node:hover::before { width: 100%; }
.step-number {
    font-family: var(--font-heading);
    font-size: 1.6rem; font-weight: 700;
    background: var(--brand-gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 1.2rem;
}
.step-node h4 { font-size: 1.2rem; margin-bottom: 0.75rem; color: var(--color-text); }
.step-node p { font-size: 0.9rem; line-height: 1.6; }

/* ==========================================================================
   MODULE 6 · CONVERSION BILLBOARD — calm, centered, echoes the hero's finale
   ========================================================================== */
.conversion-billboard {
    text-align: center;
    padding: 11rem 0;
    background: linear-gradient(180deg, var(--bg-tint) 0%, #ffffff 30%);
    position: relative;
    overflow: hidden;
}
.conversion-billboard::before {
    content: ''; position: absolute;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(150, 0, 255, 0.06) 0%, rgba(65, 90, 255, 0.03) 45%, transparent 70%);
    bottom: -220px; left: 50%; transform: translateX(-50%);
    pointer-events: none;
}
.conversion-billboard .flow-seam { width: min(420px, 70%); margin: 0 auto 5rem; }
.conversion-billboard h2 { font-size: clamp(2.6rem, 4.4vw, 3.8rem); margin-bottom: 1.8rem; color: var(--color-text); letter-spacing: -0.04em; }
.conversion-billboard p { max-width: 600px; margin: 0 auto 3rem auto; font-size: 1.15rem; }

/* ==========================================================================
   FOOTER — the business-card finale under a gradient strip
   ========================================================================== */
.global-footer {
    padding: 8rem 0 4rem 0;
    background: var(--brand-card-dark);
    color: #f1f5f9;
    position: relative;
}
.footer-gradient-strip { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--brand-gradient-h); }
.footer-layout-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 4.5rem; margin-bottom: 6rem; }
.footer-signature p { font-size: 0.9rem; max-width: 290px; margin-top: 1.5rem; line-height: 1.65; color: #94a3b8; }
.footer-signature .brand-name { color: #ffffff; }
.footer-signature .brand-tagline { color: #64748b; }
.footer-column-title {
    font-weight: 600; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--brand-cyan);
    margin-bottom: 1.8rem;
    display: block;
}
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.footer-links-list a { color: #94a3b8; font-size: 0.9rem; transition: var(--transition); }
.footer-links-list a:hover { color: #ffffff; transform: translateX(3px); display: inline-block; }
.footer-base-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2.5rem;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.85rem; color: #64748b;
}

/* Accessibility */
.accessibility-skip-node { position: absolute; top: -100px; left: 0; background: var(--color-text); color: #fff; padding: 1rem; z-index: 99999; }
.accessibility-skip-node:focus { top: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1140px) {
    :root { --whitespace-sec: 7rem; }
    .problem-cards-grid { grid-template-columns: 1fr; gap: 2rem; }
    .outcomes-row-matrix { grid-template-columns: 1fr; gap: 2.5rem; }
    .case-story-row, .case-story-row.flipped-layout { grid-template-columns: 1fr; gap: 4rem; }
    .step-track-layout { grid-template-columns: repeat(2, 1fr); }
    .footer-layout-grid { grid-template-columns: 1fr repeat(3, 1fr); gap: 3rem; }
}
@media (max-width: 768px) {
    :root { --whitespace-sec: 5.5rem; }
    .container { padding: 0 1.8rem; }
    .nav-menu-wrapper { display: none; }
    .section-header-block { margin-bottom: 3.5rem; }
    .flow-seam { margin-bottom: 3.5rem; }
    .step-track-layout { grid-template-columns: 1fr; }
    .footer-layout-grid { grid-template-columns: 1fr; gap: 3rem; }
    .footer-base-legal { flex-direction: column; gap: 1.5rem; text-align: center; }
}

/* Reduced motion: seams and reveals resolve instantly */
@media (prefers-reduced-motion: reduce) {
    .flow-seam { transform: none; }
    .loader-emblem { animation: none; }
}

/* ==========================================================================
   SUBPAGE MODULES — shared by services / work / insights / about / contact.
   Same design language as the homepage; no new visual ideas, only reuse.
   ========================================================================== */

/* Editorial page hero (compact cousin of the cinema hero's final frame) */
.page-hero {
    padding: 200px 0 5.5rem;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: ''; position: absolute;
    width: 54vw; height: 54vw;
    top: -30vw; right: -16vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 183, 254, 0.12) 0%, rgba(150, 0, 255, 0.06) 45%, transparent 70%);
    filter: blur(70px);
    pointer-events: none;
}
.page-hero h1 {
    font-size: clamp(2.8rem, 4.8vw, 4.6rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
    max-width: 940px;
    color: var(--color-text);
}
.page-hero-lede {
    max-width: 640px;
    font-size: 1.15rem;
    margin-top: 2rem;
}

/* Services grid — reuses the homepage problem-card component */
.services-platform {
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-tint) 100%);
    padding-top: 3rem;
}
.services-grid { grid-template-columns: repeat(3, 1fr); }
.services-grid .problem-lens-card { min-height: 0; scroll-margin-top: 110px; }
.services-grid .outcome-icon-accent { margin-bottom: 1.6rem; }

/* Technology ecosystem — glass pills in the hero's chip language */
.tech-ecosystem { background: linear-gradient(180deg, var(--bg-tint) 0%, #ffffff 100%); }
.tech-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 3rem;
}
.tech-group-title {
    font-family: var(--font-heading);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--color-muted);
    display: flex; align-items: center; gap: 0.65rem;
    margin-bottom: 1.3rem;
}
.tech-group-title::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-gradient);
}
.tech-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tech-pill {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    border: var(--border-clean);
    font-size: 0.85rem; font-weight: 600;
    color: var(--color-text);
    transition: var(--transition);
}
.tech-pill:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-2px); }

/* FAQ — quiet accordion, gradient plus */
.faq-platform { background: #ffffff; }
.faq-stack { max-width: 860px; }
.faq-item { border-bottom: var(--border-clean); }
.faq-question {
    width: 100%;
    background: none; border: 0;
    display: flex; justify-content: space-between; align-items: center; gap: 2rem;
    padding: 1.8rem 0;
    font-family: var(--font-heading);
    font-size: 1.15rem; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}
.faq-ic {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: var(--border-clean);
    color: var(--brand-blue);
    font-size: 1.1rem; font-weight: 500; line-height: 1;
    transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.faq-item.open .faq-ic {
    transform: rotate(45deg);
    background: var(--brand-gradient);
    color: #fff;
    border-color: transparent;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-answer p { padding: 0 3rem 1.9rem 0; font-size: 0.98rem; max-width: 720px; }
.faq-item.open .faq-answer { max-height: 320px; }

@media (max-width: 1140px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .page-hero { padding: 150px 0 3.5rem; }
    .services-grid { grid-template-columns: 1fr; }
    .tech-groups { grid-template-columns: 1fr; gap: 2.5rem; }
    .faq-question { font-size: 1.02rem; padding: 1.4rem 0; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-answer { transition: none; }
}

/* About page — extensions of existing components, no new visual ideas */

/* Principles: the lifecycle step-node, stacked editorially */
.principles-stack { max-width: 860px; }
.principles-stack .step-node {
    display: flex; align-items: baseline; gap: 2.2rem;
    padding: 2.4rem 0;
}
.principles-stack .step-number { margin-bottom: 0; flex: none; width: 3.2rem; }
.principles-stack h4 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.03em; margin-bottom: 0.55rem; }
.principles-stack p { max-width: 620px; }

/* Founder portrait — glass card frame holding a photo (or monogram until one exists) */
.founder-portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-width: 420px;
    border-radius: var(--radius-md);
    background: var(--brand-gradient);
    box-shadow: var(--shadow-premium);
    display: grid; place-items: center;
    overflow: hidden;
    position: relative;
}
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-monogram {
    font-family: 'Montserrat', var(--font-heading);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.02em;
    text-shadow: 0 10px 40px rgba(7, 9, 19, 0.25);
}
.founder-role-chip {
    position: absolute; left: 1.2rem; bottom: 1.2rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    font-size: 0.8rem; font-weight: 600;
    color: var(--color-text);
}

/* Section tint utility: valley → white (mirror of the lifecycle gradient) */
.bg-tint-to-white { background: linear-gradient(180deg, var(--bg-tint) 0%, #ffffff 55%); }

@media (max-width: 768px) {
    .principles-stack .step-node { gap: 1.2rem; padding: 1.8rem 0; }
    .founder-portrait { max-width: 100%; }
}

/* Work page — extensions of existing components */

/* Featured project rows: the case-story grid, weighted ~70/30 toward the product */
.work-story-row { grid-template-columns: 1.9fr 1fr; gap: 4.5rem; }
.work-story-row.flipped-layout { grid-template-columns: 1fr 1.9fr; }

/* Compact fact list inside a project narrative */
.case-facts { margin: 1.6rem 0 1.8rem; }
.case-fact { padding: 1rem 0; border-top: var(--border-clean); }
.case-fact > span {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-faint);
    margin-bottom: 0.4rem;
}
.case-fact p { font-size: 0.95rem; line-height: 1.6; }
.case-fact .tech-pills { margin-top: 0.2rem; }
.case-fact .tech-pill { padding: 0.4rem 0.85rem; font-size: 0.78rem; }

/* Metrics band: gradient figures in the step-number language, scaled up */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin-top: 1rem;
}
.metric-node { border-top: 1px solid rgba(10, 15, 30, 0.1); padding-top: 2rem; position: relative; }
.metric-node::before {
    content: ''; position: absolute; top: -1px; left: 0;
    width: 0; height: 2px;
    background: var(--brand-gradient-h);
    transition: width 0.8s ease-in-out;
}
.metric-node:hover::before { width: 100%; }
.metric-value {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    background: var(--brand-gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 0.8rem;
}
.metric-label { font-size: 0.95rem; font-weight: 600; color: var(--color-muted); }

@media (max-width: 1140px) {
    .work-story-row, .work-story-row.flipped-layout { grid-template-columns: 1fr; gap: 3rem; }
    .metrics-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .metrics-row { grid-template-columns: 1fr; gap: 2rem; }
}

/* Case study template — extensions of existing components */

/* Screenshot gallery: interface cards in a two-up grid, first shot full width */
.shots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}
.shot-span { grid-column: 1 / -1; }
.shot-caption {
    display: flex; align-items: center; gap: 0.6rem;
    margin-top: 1.1rem;
    font-family: var(--font-heading);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-faint);
}
.shot-caption::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-gradient);
}

/* Architecture diagram: a glass card holding a light SVG blueprint */
.arch-diagram {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: var(--border-clean);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-premium);
    padding: 2.2rem;
}
.arch-diagram svg { width: 100%; height: auto; display: block; }
.arch-diagram text { font-family: var(--font-body); }

/* Solution layout: diagram beside the decisions column */
.solution-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 1140px) {
    .solution-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 768px) {
    .shots-grid { grid-template-columns: 1fr; gap: 2rem; }
    .arch-diagram { padding: 1.2rem; }
}

/* Contact page — form system and contact channels */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 4.5rem;
    align-items: start;
}

/* Channel cards: icon tile + value, the chip/card language */
.channel-card {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1.4rem 1.5rem;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: var(--border-clean);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    transition: var(--transition);
    margin-bottom: 1.2rem;
}
.channel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-premium); }
.channel-card .outcome-icon-accent { margin-bottom: 0; flex: none; }
.channel-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-faint);
    margin-bottom: 0.3rem;
}
.channel-value { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }

/* Stylized location card — a map without the iframe */
.map-card {
    position: relative;
    border-radius: var(--radius-md);
    border: var(--border-clean);
    box-shadow: var(--shadow-subtle);
    background-color: #fbfcff;
    background-image: radial-gradient(circle, rgba(10, 15, 30, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    padding: 2.2rem 1.8rem;
    overflow: hidden;
    margin-top: 0.6rem;
}
.map-card::before {
    content: ''; position: absolute;
    width: 220px; height: 220px;
    top: -80px; right: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(65, 90, 255, 0.10) 0%, transparent 70%);
}
.map-pin {
    width: 40px; height: 40px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: var(--brand-gradient);
    box-shadow: 0 10px 22px -8px rgba(150, 0, 255, 0.5);
    display: grid; place-items: center;
    margin-bottom: 1.3rem;
}
.map-pin i {
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff;
}
.map-card address { font-style: normal; font-size: 0.95rem; line-height: 1.7; color: var(--color-muted); }
.map-card address b { display: block; font-family: var(--font-heading); color: var(--color-text); font-size: 1.05rem; margin-bottom: 0.3rem; }
.map-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.85rem; font-weight: 600;
    color: var(--brand-blue);
    transition: var(--transition);
}
.map-link:hover { color: var(--brand-purple); transform: translateX(4px); }

/* The form itself */
.contact-form {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: var(--border-clean);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-premium);
    padding: 2.8rem;
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.8rem; }
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
    font-family: var(--font-heading);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-faint);
    margin-bottom: 0.55rem;
}
.form-field input,
.form-field select,
.form-field textarea {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #ffffff;
    border: var(--border-clean);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    appearance: none;
}
.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%235A6478' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    padding-right: 2.6rem;
    cursor: pointer;
}
.form-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-faint); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(65, 90, 255, 0.12);
}
.form-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    margin-top: 2rem;
}
.form-note { font-size: 0.85rem; color: var(--color-faint); }

@media (max-width: 1140px) {
    .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 640px) {
    .contact-form { padding: 1.8rem 1.4rem; }
    .form-grid { grid-template-columns: 1fr; }
}

/* Insights page — editorial article cards + newsletter, extending existing kit */

.insights-grid { grid-template-columns: repeat(2, 1fr); }
.article-featured { grid-column: 1 / -1; }
.article-featured h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.035em; max-width: 780px; }
.article-featured p { max-width: 680px; }

.article-meta {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-faint);
    margin-bottom: 1.3rem;
}
.article-meta::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-gradient);
}

/* Newsletter: one field, one button */
.newsletter-bar {
    display: flex; gap: 1rem;
    max-width: 560px;
    margin: 0 auto;
}
.newsletter-bar input {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #ffffff;
    border: var(--border-clean);
    border-radius: var(--radius-sm);
    padding: 0.95rem 1.2rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.newsletter-bar input::placeholder { color: var(--color-faint); }
.newsletter-bar input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(65, 90, 255, 0.12);
}
.newsletter-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-faint);
    margin-top: 1.1rem;
}

@media (max-width: 768px) {
    .insights-grid { grid-template-columns: 1fr; }
    .newsletter-bar { flex-direction: column; }
}

/* Trust commitments — "Why Clients Choose Dashapramati" */
.commitments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 4rem;
    max-width: 1060px;
}
.commit-item {
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 1.5rem 0;
    border-top: var(--border-clean);
}
.commit-check {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--brand-gradient);
    display: grid; place-items: center;
    color: #fff;
    margin-top: 2px;
    box-shadow: 0 5px 12px -5px rgba(150, 0, 255, 0.5);
}
.commit-check svg { width: 12px; height: 12px; }
.commit-item b {
    font-family: var(--font-heading);
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: -0.015em;
    display: block; margin-bottom: 0.3rem;
    color: var(--color-text);
}
.commit-item p { font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 768px) {
    .commitments-grid { grid-template-columns: 1fr; gap: 0; }
    .commit-item { padding: 1.2rem 0; }
}

/* ==========================================================================
   PRODUCT HISTORY (Work page) — timeline, artifacts, video frames, teasers
   ========================================================================== */

/* Scroll cue under the hero */
.scroll-cue {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem;
    margin-top: 3.2rem;
    font-family: var(--font-heading);
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--color-faint);
}
.scroll-cue span {
    width: 1px; height: 34px; margin-left: 2px;
    background: linear-gradient(180deg, transparent, var(--brand-blue));
    animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop {
    0% { transform: scaleY(0); transform-origin: top; }
    45% { transform: scaleY(1); transform-origin: top; }
    55% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Horizontal product timeline */
.timeline-track {
    display: flex;
    gap: 1.2rem;
    position: relative;
    padding: 2.4rem 0.2rem 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.timeline-track::-webkit-scrollbar { display: none; }
.timeline-track::before {
    content: '';
    position: absolute;
    top: calc(2.4rem + 5px);
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(11, 183, 254, 0.55) 0%,
        rgba(65, 90, 255, 0.55) 40%,
        rgba(150, 0, 255, 0.5) 72%,
        rgba(223, 18, 255, 0.45) 100%);
}
.timeline-node {
    flex: 1 0 auto;
    min-width: 118px;
    scroll-snap-align: start;
    text-decoration: none;
}
.tl-dot {
    display: block;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--brand-gradient);
    box-shadow: 0 0 0 4px rgba(65, 90, 255, 0.12);
    margin-bottom: 1.1rem;
    transition: var(--transition);
}
.timeline-node:hover .tl-dot { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(150, 0, 255, 0.14); }
.tl-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.92rem; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    line-height: 1.3;
}
.tl-sub {
    display: block;
    font-size: 0.72rem; font-weight: 600;
    color: var(--color-faint);
    margin-top: 0.25rem;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.timeline-node.is-soon .tl-dot { background: #fff; border: 2px solid var(--brand-purple); }

/* Historical artifact frames (brochure pages, product art) */
.artifact-frame {
    background: #fff;
    border: var(--border-clean);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
}
.artifact-frame img { width: 100%; height: auto; display: block; }

/* Video frames */
.video-frame video { width: 100%; display: block; background: #0A0F1E; }

/* Archis artifact gallery */
.artifact-gallery { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; }
.artifact-stack { display: flex; flex-direction: column; gap: 2.5rem; }

/* SRS ecosystem grid */
.srs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.srs-grid .channel-card { margin-bottom: 0; }
.srs-grid .channel-value { font-size: 1rem; }

/* Coming-next teaser cards */
.teaser-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.teaser-card {
    position: relative;
    min-height: 320px;
    padding: 3rem 2.6rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: #fff;
    border: var(--border-clean);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
}
.teaser-card::before {
    content: '';
    position: absolute;
    width: 380px; height: 380px;
    top: -160px; right: -120px;
    border-radius: 50%;
    filter: blur(55px);
    background: radial-gradient(circle, rgba(11, 183, 254, 0.18) 0%, rgba(150, 0, 255, 0.12) 50%, transparent 72%);
}
.teaser-card:nth-child(2)::before {
    background: radial-gradient(circle, rgba(150, 0, 255, 0.16) 0%, rgba(223, 18, 255, 0.10) 50%, transparent 72%);
}
.teaser-chip {
    position: absolute; top: 2rem; left: 2.6rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(150, 0, 255, 0.25);
    background: rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading);
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--brand-purple);
}
.teaser-name {
    font-family: 'Montserrat', var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--brand-gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.7rem;
}
.teaser-card p { font-size: 0.98rem; max-width: 400px; }

@media (max-width: 1140px) {
    .artifact-gallery { grid-template-columns: 1fr; }
    .srs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .teaser-grid { grid-template-columns: 1fr; }
    .srs-grid { grid-template-columns: 1fr; }
    .timeline-node { min-width: 128px; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue span { animation: none; }
}

/* 25+ years credibility band */
.years-band { display: grid; grid-template-columns: auto 1fr; gap: 4.5rem; align-items: start; }
.years-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(4.5rem, 8vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: var(--brand-gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.years-num em {
    display: block;
    font-style: normal;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-top: 0.9rem;
    background: none;
    -webkit-text-fill-color: var(--color-muted);
}
.years-lines {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.35;
    color: var(--color-text);
}
.years-band > div > p { margin-top: 1.4rem; max-width: 640px; }

/* Operational innovation cards */
.innovations-grid { grid-template-columns: repeat(2, 1fr); }
.impact-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem; }
.impact-list li { position: relative; padding-left: 1.3rem; font-size: 0.92rem; color: var(--color-muted); line-height: 1.55; }
.impact-list li::before {
    content: '';
    position: absolute; left: 0; top: 0.5em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-gradient);
}

/* Two-tap workflow diagram */
.tap-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: 1.8rem; }
.tap-step {
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border: var(--border-clean);
    background: rgba(255, 255, 255, 0.85);
    font-family: var(--font-heading);
    font-weight: 700; font-size: 0.9rem;
    color: var(--color-text);
}
.tap-step.hot { background: var(--brand-gradient); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(150, 0, 255, 0.5); }
.tap-arrow { margin-left: 1.4rem; color: var(--color-faint); font-size: 1rem; line-height: 1; }

/* Portrait field-footage video */
.video-portrait { max-width: 380px; margin: 0 auto; }
.video-portrait video { aspect-ratio: 9 / 16; object-fit: cover; }

@media (max-width: 1140px) {
    .innovations-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .years-band { grid-template-columns: 1fr; gap: 2rem; }
}