/* ==========================================================================
   Prosengit Kundu — Shared Design System
   --------------------------------------------------------------------------
   ONE stylesheet for the whole website. Every page loads this file, so the
   page loader, navigation, hover effects, reveal animations, cards, buttons,
   tables and footer behave EXACTLY the same on every single page.

   Do not add page-specific <style> blocks to HTML files — add the rule here
   instead so the whole site stays consistent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    --primary: #0A66C2;
    --primary-dark: #084e96;
    --primary-soft: rgba(10, 102, 194, 0.10);
    --secondary: #16A34A;
    --secondary-soft: rgba(22, 163, 74, 0.10);
    --accent: #F59E0B;

    --ink: #111827;
    --muted: #64748b;
    --line: #e5e7eb;
    --bg: #F8FAFC;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --footer-bg: #0d1522;

    --radius-sm: 0.85rem;
    --radius: 1.25rem;
    --radius-lg: 1.75rem;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px -12px rgba(15, 23, 42, .25);
    --shadow-2: 0 22px 45px -26px rgba(15, 23, 42, .45);
    --shadow-3: 0 28px 60px -28px rgba(10, 102, 194, .55);

    /* One easing + one duration scale = one identical motion language */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 0.22s;
    --dur: 0.38s;
    --dur-slow: 0.65s;

    --header-h: 74px;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-head: 'Poppins', 'Inter', system-ui, sans-serif;
}

.dark {
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --line: #334155;
    --bg: #111827;
    --surface: #1f2937;
    --surface-2: #0f172a;
    --primary-soft: rgba(96, 165, 250, 0.14);
    --secondary-soft: rgba(34, 197, 94, 0.14);
    --footer-bg: #080d16;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -12px rgba(0, 0, 0, .7);
    --shadow-2: 0 22px 45px -26px rgba(0, 0, 0, .85);
    --shadow-3: 0 28px 60px -28px rgba(10, 102, 194, .8);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
/* NOTE: the default border-color compatibility rule lives in the
   <style type="text/tailwindcss"> block in each page's <head>, because it has
   to sit inside Tailwind's `base` layer so real border-* utilities still win. */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

.site-body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--ink);
    margin: 0;
    overflow-x: hidden;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

body.is-loading {
    overflow: hidden;
}

.heading-font {
    font-family: var(--font-head);
}

.section {
    scroll-margin-top: calc(var(--header-h) + 26px);
}

[id] {
    scroll-margin-top: calc(var(--header-h) + 26px);
}

::selection {
    background: var(--primary);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}

img {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Page loader — identical first-load experience on every page
   -------------------------------------------------------------------------- */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    opacity: 1;
    transition: opacity 0.55s var(--ease), visibility 0.55s var(--ease);
}

.page-loader::before {
    content: '';
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 102, 194, .16), transparent 62%);
    animation: pk-pulse-glow 2.6s var(--ease) infinite;
}

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

.page-loader__inner {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.page-loader__mark {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.7rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: var(--shadow-3);
    animation: pk-mark-in 0.7s var(--ease-spring) both;
}

.page-loader__mark::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 32px;
    border: 2px solid var(--primary);
    border-top-color: transparent;
    border-right-color: transparent;
    opacity: .55;
    animation: pk-spin 1.15s linear infinite;
}

.page-loader__name {
    margin-top: 22px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    animation: pk-fade-up 0.6s var(--ease) 0.1s both;
}

.page-loader__tag {
    margin-top: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    animation: pk-fade-up 0.6s var(--ease) 0.18s both;
}

.page-loader__bar {
    margin-top: 26px;
    width: 190px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--line);
    overflow: hidden;
    animation: pk-fade-up 0.6s var(--ease) 0.26s both;
}

.page-loader__bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    animation: pk-loading-bar 1.15s var(--ease) infinite;
}

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

@keyframes pk-loading-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

@keyframes pk-pulse-glow {
    0%, 100% { transform: scale(.85); opacity: .55; }
    50%      { transform: scale(1.05); opacity: 1; }
}

@keyframes pk-mark-in {
    from { transform: scale(.6) rotate(-12deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes pk-fade-up {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Page-entry + page-exit transition (same on every page) */
.page-shell {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

body.is-ready .page-shell {
    opacity: 1;
    transform: none;
}

body.is-leaving .page-shell {
    opacity: 0;
    transform: translateY(-10px);
    transition-duration: 0.28s;
}

/* --------------------------------------------------------------------------
   4. Scroll progress bar
   -------------------------------------------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1200;
    background: transparent;
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, var(--primary), var(--secondary), var(--accent));
    transition: width 0.12s linear;
}

/* --------------------------------------------------------------------------
   5. Header / navigation — identical markup + behaviour site-wide
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.site-header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom-color: var(--line);
    box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .55);
}

.site-header__inner {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 2rem;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.brand__mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px -14px rgba(10, 102, 194, .9);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}

.brand:hover .brand__mark {
    transform: translateY(-2px) rotate(-6deg) scale(1.05);
    box-shadow: 0 16px 30px -14px rgba(10, 102, 194, .95);
}

.brand__name {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
}

.brand__role {
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    color: var(--muted);
    margin-top: 2px;
}

/* Desktop nav */
.site-nav {
    display: none;
    align-items: center;
    gap: 1.45rem;
}

.nav-link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 6px 0;
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur) var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--primary);
    transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

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

.nav-link.is-active::after {
    transform: scaleX(1);
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.icon-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-1);
}

.icon-btn:active {
    transform: translateY(0) scale(.96);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
}

.nav-toggle {
    display: inline-flex;
}

/* Header CTA hides on very small screens (the mobile menu carries it instead) */
.hidden-sm {
    display: none;
}

@media (min-width: 640px) {
    .hidden-sm { display: inline-flex; }
}

/* Mobile menu */
.mobile-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    border-top: 1px solid transparent;
    background: var(--surface);
    transition: max-height 0.45s var(--ease), border-color 0.45s var(--ease);
}

.mobile-menu.is-open {
    max-height: 620px;
    border-top-color: var(--line);
}

.mobile-menu__inner {
    max-width: 1536px;
    margin: 0 auto;
    padding: 1rem 2rem 1.4rem;
    display: grid;
    gap: 2px;
}

.mobile-menu a {
    display: block;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.mobile-menu a:hover {
    background: var(--primary-soft);
    color: var(--primary);
    transform: translateX(5px);
}

.mobile-menu a.is-active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

.mobile-menu .btn {
    margin-top: 0.6rem;
    justify-content: center;
}

@media (min-width: 1100px) {
    .site-nav { display: flex; }
    .nav-toggle { display: none; }
    .mobile-menu { display: none; }
}

/* --------------------------------------------------------------------------
   6. Buttons — one hover behaviour everywhere
   -------------------------------------------------------------------------- */
.btn,
.premium-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.btn {
    padding: 0.78rem 1.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.btn-sm {
    padding: 0.6rem 1.2rem;
    font-size: 0.82rem;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 14px 28px -18px rgba(10, 102, 194, .95);
}

.btn-primary:hover {
    background: var(--primary-dark);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Shared lift + shine on every button style, including page-level ones */
.btn:hover,
.premium-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
}

.btn:active,
.premium-btn:active {
    transform: translateY(-1px) scale(.985);
}

.btn::after,
.premium-btn::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 40%;
    height: 220%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    transition: left 0.65s var(--ease);
    pointer-events: none;
}

.btn:hover::after,
.premium-btn:hover::after {
    left: 145%;
}

/* --------------------------------------------------------------------------
   7. Cards — one identical hover for every card on every page
   -------------------------------------------------------------------------- */
.u-card,
.service-card,
.portfolio-card,
.pricing-card,
.package-card,
.blog-card,
.modern-card,
.t-card {
    position: relative;
    overflow: hidden;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
    will-change: transform;
}

.u-card:hover,
.service-card:hover,
.portfolio-card:hover,
.pricing-card:hover,
.package-card:hover,
.blog-card:hover,
.modern-card:hover,
.t-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2);
    border-color: var(--primary);
}

/* Subtle sheen that sweeps across a card on hover */
.u-card::before,
.service-card::before,
.portfolio-card::before,
.pricing-card::before,
.package-card::before,
.blog-card::before,
.modern-card::before,
.t-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, transparent 35%, rgba(10, 102, 194, .07) 50%, transparent 65%);
    background-size: 250% 250%;
    background-position: 100% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), background-position 0.8s var(--ease);
    z-index: 1;
}

.u-card:hover::before,
.service-card:hover::before,
.portfolio-card:hover::before,
.pricing-card:hover::before,
.package-card:hover::before,
.blog-card:hover::before,
.modern-card:hover::before,
.t-card:hover::before {
    opacity: 1;
    background-position: 0% 0%;
}

/* Keep real content above the decorative sheen layer */
.u-card > *,
.service-card > *,
.portfolio-card > *,
.pricing-card > *,
.package-card > *,
.blog-card > *,
.modern-card > *,
.t-card > * {
    position: relative;
    z-index: 2;
}

/* Images inside cards zoom gently on hover */
.u-card img,
.service-card img,
.portfolio-card img,
.blog-card img,
.package-card img,
.modern-card img {
    transition: transform var(--dur-slow) var(--ease);
}

.u-card:hover img,
.service-card:hover img,
.portfolio-card:hover img,
.blog-card:hover img,
.package-card:hover img,
.modern-card:hover img {
    transform: scale(1.045);
}

/* Standalone images / figures */
.media-zoom {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.media-zoom img {
    transition: transform var(--dur-slow) var(--ease);
}

.media-zoom:hover img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   8. Reveal-on-scroll — same entrance animation on every page
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   9. Shared content components
   -------------------------------------------------------------------------- */
.luxury-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.premium-shadow {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15);
}

.glass {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(20px);
}

.section-header {
    position: relative;
    display: inline-block;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    border-radius: var(--radius-pill);
}

/* Typing cursor (home hero) */
.typing-cursor::after {
    content: '|';
    animation: pk-blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes pk-blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

.floating {
    animation: pk-float 3.6s var(--ease) infinite;
}

@keyframes pk-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.stat-number {
    font-variant-numeric: tabular-nums;
}

/* Skill / progress bars */
.skill-bar,
.progress-bar {
    height: 6px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    border-radius: var(--radius-pill);
    transition: width 1.6s var(--ease);
}

/* Timeline */
.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(var(--primary), var(--secondary));
}

.timeline-item::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--primary);
    transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease);
}

.timeline-item:hover::after {
    transform: scale(1.35);
    border-color: var(--secondary);
}

/* Filter buttons (portfolio + blog) */
.filter-btn,
.portfolio-filter-btn {
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.filter-btn:hover,
.portfolio-filter-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-1);
}

.filter-btn.active,
.portfolio-filter-btn.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 12px 24px -16px rgba(10, 102, 194, .95);
}

.filter-btn.active:hover,
.portfolio-filter-btn.active:hover {
    color: #fff;
}

/* Pills / chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .8rem;
    font-weight: 500;
    transition: transform var(--dur-fast) var(--ease-spring);
}

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

/* Tables (services + pricing) */
.service-table th,
.service-table td,
.price-table th,
.price-table td {
    padding: 1rem 1.25rem;
    text-align: left;
}

.service-table tr + tr,
.price-table tr + tr {
    border-top: 1px solid var(--line);
}

.service-table th,
.price-table th {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.service-table td,
.price-table td {
    font-size: .9rem;
}

.service-row {
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.service-row:hover {
    background: var(--primary-soft);
    transform: translateX(4px);
}

.price {
    color: var(--primary);
    font-weight: 700;
    white-space: nowrap;
}

.bdt {
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.usd {
    font-weight: 700;
    color: var(--secondary);
    white-space: nowrap;
}

/* Check lists (pricing) */
.check-list li {
    position: relative;
    padding-left: 1.5rem;
}

.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary);
    font-weight: 700;
}

.check-list-dark li::before {
    color: #60A5FA;
}

/* Testimonial avatar */
.avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease-spring);
}

.u-card:hover .avatar,
.t-card:hover .avatar {
    transform: scale(1.08) rotate(-4deg);
}

/* FAQ accordions */
details.faq-item,
.faq-item {
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

details.faq-item:hover,
.faq-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-1);
}

details.faq-item[open] {
    border-color: var(--primary);
    box-shadow: var(--shadow-1);
}

details.faq-item summary,
.faq-item summary {
    list-style: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
}

details.faq-item summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
    display: none;
}

details.faq-item summary:hover,
.faq-item summary:hover {
    color: var(--primary);
}

details.faq-item .faq-sign {
    display: inline-block;
    transition: transform var(--dur) var(--ease-spring);
}

details.faq-item[open] .faq-sign {
    transform: rotate(135deg);
}

details.faq-item[open] > *:not(summary) {
    animation: pk-fade-up 0.4s var(--ease) both;
}

.faq-cat,
.category-anchor {
    scroll-margin-top: calc(var(--header-h) + 36px);
}

/* Article typography (blog details) */
.article-body p {
    font-size: 1.06rem;
    line-height: 1.85;
    margin-top: 1.4rem;
    color: #374151;
}

.dark .article-body p { color: #cbd5e1; }

.article-body h2 {
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 700;
    margin-top: 2.8rem;
    margin-bottom: .4rem;
    letter-spacing: -.01em;
    color: #111827;
}

.dark .article-body h2 { color: #f1f5f9; }

.article-body h3 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    color: #111827;
}

.dark .article-body h3 { color: #e2e8f0; }

.article-body ul,
.article-body ol {
    margin-top: 1.2rem;
    padding-left: 1.4rem;
}

.article-body li {
    font-size: 1.02rem;
    line-height: 1.8;
    margin-top: .55rem;
    color: #374151;
}

.dark .article-body li { color: #cbd5e1; }

.article-body ul li { list-style: disc; }
.article-body ol li { list-style: decimal; }
.article-body strong { color: #111827; }
.dark .article-body strong { color: #f8fafc; }

.article-body a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease);
}

.article-body a:hover { color: #1d4ed8; }

.article-body .example,
.article-body .verdict {
    margin-top: 1.2rem;
    padding: 1rem 1.3rem;
    border-left: 4px solid var(--primary);
    background: #EFF6FF;
    border-radius: .75rem;
    font-size: .98rem;
    color: #1e3a8a;
}

.dark .article-body .example,
.dark .article-body .verdict { background: #0B1D33; color: #bfdbfe; }

.article-body .verdict { border-color: var(--secondary); background: #F0FDF4; color: #14532d; }
.dark .article-body .verdict { background: #052e16; color: #bbf7d0; }

.toc-link { border-left: 2px solid var(--line); }

.toc-link a {
    display: block;
    padding: .35rem 0 .35rem 1rem;
    font-size: .9rem;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.toc-link a:hover {
    color: var(--primary);
    transform: translateX(4px);
}

/* Simple legal / utility pages */
.legal-page {
    max-width: 56rem;
    margin: 0 auto;
    padding: 4.5rem 2rem 5rem;
}

.legal-page h1 {
    font-family: var(--font-head);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: .6rem 0 0;
}

.legal-page .eyebrow {
    font-size: .7rem;
    letter-spacing: .3em;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
}

.legal-page p {
    margin-top: 1.15rem;
    line-height: 1.85;
    color: var(--muted);
}

.legal-page h2 {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 2.4rem;
    color: var(--ink);
}

.center-page {
    min-height: calc(100vh - var(--header-h) - 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   10. Footer — identical on every page
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--footer-bg);
    color: #cbd5e1;
    margin-top: 0;
}

.site-footer__inner {
    max-width: 1536px;
    margin: 0 auto;
    padding: 4rem 2rem 2rem;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 1100px) {
    .site-footer__inner { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; }
}

.site-footer h3 {
    font-family: var(--font-head);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 1.1rem;
}

.site-footer a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.site-footer__links {
    display: grid;
    gap: .65rem;
    font-size: .875rem;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
}

.site-footer__links a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width var(--dur) var(--ease);
}

.site-footer__links a:hover {
    color: #fff;
    transform: translateX(3px);
}

.site-footer__links a:hover::before {
    width: 12px;
}

.footer-brand__mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dur) var(--ease-spring);
}

.footer-brand:hover .footer-brand__mark {
    transform: translateY(-2px) rotate(-6deg);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}

.footer-brand__name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: -.02em;
}

.footer-brand__role {
    display: block;
    font-size: .58rem;
    letter-spacing: .2em;
    color: #94a3b8;
    margin-top: 2px;
}

.site-footer__about {
    font-size: .875rem;
    line-height: 1.75;
    color: #94a3b8;
    margin: 1.2rem 0 1.4rem;
    max-width: 34ch;
}

.social-row {
    display: flex;
    gap: .6rem;
}

.social-row a {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    border: 1px solid #1e293b;
    background: rgba(255, 255, 255, .03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.social-row a:hover {
    transform: translateY(-3px);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.social-row svg {
    width: 18px;
    height: 18px;
}

.site-footer__bottom {
    max-width: 1536px;
    margin: 0 auto;
    padding: 1.5rem 2rem 2.2rem;
    border-top: 1px solid rgba(148, 163, 184, .16);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color: #94a3b8;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

/* --------------------------------------------------------------------------
   11. Back to top
   -------------------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: 1.6rem;
    bottom: 1.6rem;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.9);
    box-shadow: var(--shadow-3);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring),
                visibility var(--dur) var(--ease), background-color var(--dur) var(--ease);
    z-index: 1050;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-4px);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

/* Floating WhatsApp shortcut (same position/behaviour site-wide) */
.floating-contact {
    position: fixed;
    right: 1.6rem;
    bottom: 5.2rem;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--secondary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 35px -20px rgba(22, 163, 74, .95);
    transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease);
    z-index: 1050;
}

.floating-contact:hover {
    transform: translateY(-4px) scale(1.04);
    background: #128a3c;
}

.floating-contact svg {
    width: 22px;
    height: 22px;
}

/* --------------------------------------------------------------------------
   12. Accessibility / motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .page-shell {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .site-header__inner { padding: 0 1.1rem; }
    .mobile-menu__inner { padding: 1rem 1.1rem 1.4rem; }
    .site-footer__inner { padding: 3rem 1.1rem 1.5rem; }
    .site-footer__bottom { padding: 1.4rem 1.1rem 2rem; }
    .brand__role { display: none; }
    .back-to-top { right: 1rem; bottom: 1rem; }
    .floating-contact { right: 1rem; bottom: 4.4rem; }
}

/* ==========================================================================
   Chatbot widget — "Ask Prosengit" assistant
   A lightweight on-site assistant that answers visitor questions about
   services, pricing, packages, process and contact details.
   Injected by assets/js/chatbot.js (loaded from site.js on every page).
   ========================================================================== */

.pk-chatbot-launcher {
    position: fixed;
    right: 1.6rem;
    bottom: 9.4rem;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 18px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 20px 40px -18px rgba(10, 102, 194, .95);
    transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease);
    z-index: 1100;
}

.pk-chatbot-launcher:hover {
    background: var(--primary-dark);
    transform: translateY(-4px) scale(1.04);
}

.pk-chatbot-launcher svg {
    width: 26px;
    height: 26px;
}

.pk-chatbot-launcher .pk-chatbot-launcher__dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--secondary);
    border: 3px solid var(--surface);
}

.pk-chatbot {
    position: fixed;
    right: 1.6rem;
    bottom: 13.4rem;
    width: min(382px, calc(100vw - 2rem));
    height: min(600px, calc(100vh - 15.5rem));
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    z-index: 1150;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.96);
    transform-origin: bottom right;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring),
                visibility var(--dur) var(--ease);
}

.pk-chatbot.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.pk-chatbot__header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
}

.pk-chatbot__avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.pk-chatbot__avatar-init {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid rgba(255, 255, 255, .35);
}

.pk-chatbot__avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .35);
    background: #fff;
}

.pk-chatbot__id {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.pk-chatbot__name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95rem;
}

.pk-chatbot__status {
    font-size: 0.72rem;
    opacity: .9;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pk-chatbot__status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}

.pk-chatbot__close {
    border: none;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease);
}

.pk-chatbot__close:hover { background: rgba(255, 255, 255, .28); }
.pk-chatbot__close svg { width: 18px; height: 18px; }

.pk-chatbot__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--surface-2);
    overscroll-behavior: contain;
}

.pk-msg {
    max-width: 84%;
    padding: 0.65rem 0.85rem;
    border-radius: 16px;
    font-size: 0.86rem;
    line-height: 1.55;
    word-wrap: break-word;
    animation: pk-msg-in var(--dur) var(--ease) both;
}

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

.pk-msg--bot {
    align-self: flex-start;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 6px;
}

.pk-msg--user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.pk-msg a.pk-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.15rem 0.25rem 0 0;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.78rem;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.dark .pk-msg a.pk-link { color: #93c5fd; }

.pk-msg a.pk-link:hover {
    transform: translateY(-1px);
    background: var(--primary);
    color: #fff;
}

.pk-msg a.pk-link--wa {
    background: var(--secondary-soft);
    color: var(--secondary);
}

.dark .pk-msg a.pk-link--wa { color: #4ade80; }

.pk-msg a.pk-link--wa:hover { background: var(--secondary); color: #fff; }

.pk-msg p { margin: 0 0 0.25rem; }
.pk-msg p:last-child { margin-bottom: 0; }

.pk-msg ul { margin: 0.25rem 0 0; padding-left: 1.05rem; }
.pk-msg li { margin: 0.15rem 0; }

/* Typing indicator */
.pk-typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 0.75rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    border-bottom-left-radius: 6px;
}

.pk-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: pk-bounce 1.2s infinite ease-in-out;
}

.pk-typing span:nth-child(2) { animation-delay: .15s; }
.pk-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes pk-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* Quick reply chips */
.pk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-self: flex-start;
}

.pk-chip {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius-pill);
    padding: 0.42rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.pk-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

/* Input row */
.pk-chatbot__input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.pk-chatbot__input input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    border-radius: var(--radius-pill);
    padding: 0.62rem 1rem;
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.pk-chatbot__input input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.pk-chatbot__input input::placeholder { color: var(--muted); }

.pk-chatbot__send {
    border: none;
    background: var(--primary);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.pk-chatbot__send:hover { background: var(--primary-dark); transform: translateY(-1px); }
.pk-chatbot__send svg { width: 20px; height: 20px; }

.pk-chatbot__foot {
    font-size: 0.66rem;
    text-align: center;
    color: var(--muted);
    padding: 0.4rem 0.8rem;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
    .pk-chatbot-launcher { right: 1rem; bottom: 7.9rem; width: 52px; height: 52px; border-radius: 16px; }
    .pk-chatbot { right: 1rem; bottom: 11.4rem; width: calc(100vw - 2rem); height: min(560px, calc(100vh - 12.8rem)); }
}

/* ==========================================================================
   Team section / pages — added with the Team feature.
   Reuses the site design tokens, cards, buttons and reveal animations.
   ========================================================================== */

/* Desktop nav fits one extra item */
@media (min-width: 1100px) and (max-width: 1280px) {
    .site-nav { gap: 1.05rem; }
    .nav-link { font-size: 0.83rem; }
}

/* Team member cards — team.html + homepage team section */
.team-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
    will-change: transform;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2);
    border-color: var(--primary);
}

.team-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, transparent 35%, rgba(10, 102, 194, .07) 50%, transparent 65%);
    background-size: 250% 250%;
    background-position: 100% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), background-position 0.8s var(--ease);
    z-index: 1;
}

.team-card:hover::before { opacity: 1; background-position: 0% 0%; }
.team-card > * { position: relative; z-index: 2; }

/* 4:3 photo frame — whole frame shows, faces never cropped */
.team-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.team-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--dur-slow) var(--ease);
}

.team-card:hover .team-photo-frame img { transform: scale(1.045); }

/* Profile photos on the detail pages */
.team-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
}

.team-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Certification / role badge */
.team-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    background: var(--primary-soft);
    color: var(--primary);
    transition: transform var(--dur-fast) var(--ease-spring);
}

.team-badge--green { background: var(--secondary-soft); color: var(--secondary); }
.team-badge--amber { background: rgba(245, 158, 11, .14); color: #b45309; }
.team-badge--pink  { background: rgba(219, 39, 119, .12); color: #be185d; }
.dark .team-badge--amber { color: #fbbf24; }
.dark .team-badge--pink  { color: #f472b6; }

/* Short excerpt on cards — supplied wording, trimmed visually only */
.team-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
    font-size: .9rem;
    color: var(--muted);
}

/* Detail page skill / service cards */
.team-skill-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    height: 100%;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.team-skill-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-1);
    border-color: var(--primary);
}

.team-skill-card h3,
.team-skill-card h4 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
}

.team-skill-card p {
    margin-top: .5rem;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--muted);
}

/* Check / tick lists on team pages (supplied bullets) */
.team-ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.team-ticks li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .94rem;
    line-height: 1.65;
    color: var(--ink);
}

.team-ticks li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--secondary);
    font-weight: 700;
}

/* Quote blocks on team pages (supplied wording) */
.team-quote {
    position: relative;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.4rem 1.7rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink);
}

.team-quote--green {
    background: var(--secondary-soft);
    border-left-color: var(--secondary);
}

/* Chip rows (platforms, tools, skill tags) */
.team-chip {
    display: inline-flex;
    align-items: center;
    padding: .42rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .82rem;
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

.team-chip:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
}

/* Long-form team profile text */
.team-profile-body p {
    line-height: 1.85;
    color: var(--muted);
    margin-top: 1.05rem;
    font-size: 1.02rem;
}

.team-profile-body strong { color: var(--ink); }

.team-profile-body h2 {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 2.8rem 0 .4rem;
    color: var(--ink);
}

.team-profile-body h3 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.8rem;
    color: var(--ink);
}

/* Next / previous member links */
.team-pager {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.team-pager a {
    padding: .55rem 1.15rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

.team-pager a:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
}

.team-pager a.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
