/* ═══════════════════════════════════════════════════
   JUTHOOR ADVISORY — Premium Panel-Based Design
   ═══════════════════════════════════════════════════ */

/* ─── 1. Custom Properties ─── */
:root {
    --bg: #03050a;
    --bg-card: rgba(255,255,255,0.03);
    --bg-card-hover: rgba(255,255,255,0.06);
    --border-card: rgba(255,255,255,0.08);
    --border-card-hover: rgba(255,255,255,0.18);
    --green: #2d5a27;
    --green-bright: #4a8c43;
    --gold: #c5a059;
    --gold-light: #d4b87a;
    --text-1: #ffffff;
    --text-2: #a0aec0;
    --text-3: #6b7a8d;
    --nav-bg: rgba(3,5,10,0.88);
    --blob-1: var(--green);
    --blob-2: var(--gold);
    --blob-3: var(--green-bright);
    --radius: 18px;
    --radius-sm: 10px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --nav-h: 68px;
}

/* ─── 2. Reset & Base ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
    font-family:'Cairo',sans-serif;
    background:var(--bg);
    color:var(--text-1);
    line-height:1.8;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    animation: pageIn 0.5s ease;
}
@keyframes pageIn { from{opacity:0} to{opacity:1} }
.container { max-width:1200px; margin:0 auto; padding:0 2rem; width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ─── 3. Sections (inner pages) ─── */
body.inner-page {
    scroll-padding-top: var(--nav-h);
}
.panel {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 2.5rem 0;
}
.panel-inner {
    width: 100%;
}
/* Shorter panels */
.panel-short {
    padding: 1rem 0 3rem;
}

/* ─── 3b. Reveal Animations ─── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.54s; }

/* Reveal variants */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}
.reveal-right {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ─── 4. Background Effects ─── */
.background-elements { position:fixed; inset:0; z-index:0; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(120px); opacity:0.10; transition:transform 1.5s ease-out; }
.blob-1 { width:550px; height:550px; background:var(--blob-1); top:-12%; right:-8%; }
.blob-2 { width:400px; height:400px; background:var(--blob-2); bottom:8%; left:-10%; }
.blob-3 { width:320px; height:320px; background:var(--blob-3); top:45%; right:25%; }
.noise-overlay {
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat:repeat; background-size:200px 200px;
}

/* ─── 5. Navbar ─── */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height:var(--nav-h);
    transition: background 0.4s, box-shadow 0.4s, height 0.3s;
}
.landing-page .navbar { background:transparent; backdrop-filter:none; }
.inner-page .navbar,
.navbar.scrolled {
    background:var(--nav-bg);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    box-shadow:0 1px 0 rgba(255,255,255,0.04);
}
.navbar.scrolled { height:58px; }
.nav-container {
    max-width:1200px; margin:0 auto; padding:0 2rem;
    display:flex; align-items:center; justify-content:space-between;
    height:100%;
}
.logo-img {
    height:64px; width:auto; transition:height 0.3s;
    transform: translateZ(0);
}
.navbar.scrolled .logo-img { height:54px; }
.inner-page .logo-img { height:64px; }
.nav-links { display:flex; gap:0.3rem; list-style:none; align-items:center; }
.nav-links a {
    padding:0.45rem 0.9rem; border-radius:8px;
    font-size:1rem; font-weight:500; color:var(--text-2);
    transition:var(--transition); white-space:nowrap;
}
.nav-links a:hover { color:var(--text-1); background:rgba(255,255,255,0.06); }
.nav-links a.active { color:var(--gold); background:rgba(197,160,89,0.1); }
.btn-nav-cta {
    background:linear-gradient(135deg, var(--green), var(--green-bright));
    color:#fff!important; padding:0.45rem 1.1rem; border-radius:8px;
    font-size:0.95rem; font-weight:600; transition:var(--transition); white-space:nowrap;
    border:none; cursor:pointer;
}
.btn-nav-cta:hover { box-shadow:0 4px 20px rgba(74,140,67,0.4); transform:translateY(-1px); }

/* Mobile toggle */
.mobile-toggle {
    display:none; flex-direction:column; gap:5px; background:none;
    border:none; cursor:pointer; padding:6px; z-index:1001;
}
.mobile-toggle span { width:22px; height:2px; background:var(--text-1); border-radius:2px; transition:var(--transition); }
.mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-toggle.active span:nth-child(2) { opacity:0; }
.mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ─── 6. Side Navigation Dots ─── */
.side-nav {
    position:fixed; left:28px; top:50%; transform:translateY(-50%);
    z-index:900; display:flex; flex-direction:column; gap:14px;
}
.side-dot {
    width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.25);
    background:transparent; cursor:pointer; transition:var(--transition); padding:0;
}
.side-dot:hover { border-color:rgba(255,255,255,0.5); transform:scale(1.3); }
.side-dot.active {
    background:var(--gold); border-color:var(--gold);
    transform:scale(1.4); box-shadow:0 0 12px rgba(197,160,89,0.5);
}

/* ─── 7. Buttons ─── */
.btn {
    display:inline-flex; align-items:center; gap:0.5rem; padding:0.75rem 1.8rem;
    border-radius:10px; font-family:'Cairo',sans-serif; font-weight:600;
    font-size:0.95rem; cursor:pointer; border:none; transition:var(--transition);
    text-align:center; justify-content:center;
}
.btn-primary {
    background:linear-gradient(135deg, var(--green), var(--green-bright));
    color:#fff;
}
.btn-primary:hover { box-shadow:0 6px 28px rgba(74,140,67,0.45); transform:translateY(-2px); }
.btn-glow { box-shadow:0 0 0 0 rgba(74,140,67,0); }
.btn-glow:hover { box-shadow:0 0 30px rgba(74,140,67,0.3); }
.btn-secondary {
    background:rgba(255,255,255,0.06); color:var(--text-1);
    border:1px solid rgba(255,255,255,0.1);
}
.btn-secondary:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); }
.btn-full { width:100%; }

/* ─── 8. Glass Card ─── */
.glass-card {
    background:var(--bg-card); border:1px solid var(--border-card);
    border-radius:var(--radius); padding:2rem; position:relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s, border-color 0.4s, box-shadow 0.5s;
}
.glass-card::before {
    content:''; position:absolute; inset:-1px; border-radius:var(--radius);
    padding:1px;
    background:linear-gradient(135deg, transparent 30%, rgba(197,160,89,0.3) 50%, transparent 70%);
    -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.5s; pointer-events:none;
}
.glass-card:hover::before { opacity:1; }
.glass-card:hover {
    background:var(--bg-card-hover); border-color:var(--border-card-hover);
    transform:translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(197,160,89,0.08);
}

/* Card components */
.card-icon-wrap {
    width:56px; height:56px; border-radius:14px;
    background:rgba(45,90,39,0.12); border:1px solid rgba(74,140,67,0.18);
    display:flex; align-items:center; justify-content:center;
    color:var(--green-bright); margin-bottom:1.2rem; transition:var(--transition);
}
.card-icon-wrap.gold { background:rgba(197,160,89,0.1); border-color:rgba(197,160,89,0.18); color:var(--gold); }
.card-icon-wrap.green { background:rgba(45,90,39,0.12); border-color:rgba(74,140,67,0.18); color:var(--green-bright); }
.glass-card:hover .card-icon-wrap {
    background:rgba(45,90,39,0.22); box-shadow:0 0 18px rgba(74,140,67,0.15);
}
.glass-card:hover .card-icon-wrap.gold {
    background:rgba(197,160,89,0.18); box-shadow:0 0 18px rgba(197,160,89,0.15);
}
.card-number {
    position:absolute; top:1.2rem; left:1.2rem;
    font-size:2.2rem; font-weight:800; color:rgba(255,255,255,0.04);
    line-height:1; letter-spacing:-1px;
}
.card-arrow {
    display:inline-flex; align-items:center; gap:0.3rem;
    color:var(--gold); font-size:0.85rem; font-weight:600;
    margin-top:1rem; transition:var(--transition);
}
.glass-card:hover .card-arrow { gap:0.6rem; }

/* Section headers */
.section-badge {
    display:inline-block; padding:0.3rem 1rem; border-radius:20px;
    font-size:0.9rem; font-weight:600; color:var(--gold);
    background:rgba(197,160,89,0.08); border:1px solid rgba(197,160,89,0.15);
    margin-bottom:0.8rem; letter-spacing:0.02em;
}
.section-header { text-align:center; margin-bottom:3rem; }
.section-title { font-size:2.3rem; font-weight:800; margin-bottom:0.5rem; line-height:1.4; }
.section-subtitle { color:var(--text-2); max-width:600px; margin:0 auto; font-size:1.1rem; }

/* Cards grid */
.cards-grid { display:grid; gap:1.5rem; }
.cards-grid-2 { grid-template-columns:repeat(2,1fr); }
.cards-grid-3 { grid-template-columns:repeat(3,1fr); }
.cards-grid-4 { grid-template-columns:repeat(4,1fr); }

/* ─── 9. Landing Page — Bento Grid ─── */
.landing-page .landing {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: calc(var(--nav-h) + 1.2rem) 1.5rem 1.5rem;
    overflow: hidden;
}
.landing-glow {
    position: absolute; width: 700px; height: 700px; border-radius: 50%;
    background: radial-gradient(circle, rgba(45,90,39,0.13) 0%, transparent 70%);
    top: 50%; left: 40%; transform: translate(-50%,-50%);
    pointer-events: none; animation: landingGlow 9s ease-in-out infinite;
}
@keyframes landingGlow {
    0%,100% { opacity:0.5; transform:translate(-50%,-50%) scale(1); }
    50%      { opacity:0.85; transform:translate(-50%,-50%) scale(1.15); }
}

/* ── Bento mosaic grid ── */
.bento-grid {
    display: grid;
    /* RTL: col-1=rightmost(logo), cols 2-4=content left side */
    grid-template-columns: 1.45fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    gap: 0.85rem;
    width: min(1300px, 100%);
    height: calc(100vh - var(--nav-h) - 2.8rem);
    max-height: 860px;
}

/* ── Logo cell: occupies full right column ── */
.bento-logo-cell {
    grid-column: 1;
    grid-row: 1 / 4;
    background: linear-gradient(160deg,
        rgba(45,90,39,0.16) 0%,
        rgba(74,140,67,0.06) 40%,
        rgba(3,5,10,0.55) 100%);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.bento-logo-cell::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 35%,
        rgba(74,140,67,0.1) 0%, transparent 62%);
    pointer-events: none;
}
.bento-logo-cell::after {
    content: '';
    position: absolute; inset: -1px; border-radius: 24px;
    padding: 1px;
    background: linear-gradient(160deg,
        rgba(74,140,67,0.22) 0%,
        transparent 40%,
        rgba(197,160,89,0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.landing-logo {
    width: 96%;
    max-height: 96%;
    height: auto;
    object-fit: contain;
    filter: contrast(1.03) saturate(1.05)
            drop-shadow(0 20px 55px rgba(45,90,39,0.45));
    position: relative;
    z-index: 1;
    transform: translateZ(0);
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
@keyframes logoFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* ── Headline cell: spans cols 2-4, row 1 ── */
.bento-head-cell {
    grid-column: 2 / 5;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.8rem 2.2rem;
    text-align: right;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.bento-head-cell::before {
    content: '';
    position: absolute; inset: -1px; border-radius: var(--radius);
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(74,140,67,0.25) 0%,
        transparent 50%,
        rgba(197,160,89,0.12) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.bento-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.28rem 0.85rem;
    border-radius: 20px;
    font-size: 0.85rem; font-weight: 600;
    color: var(--green-bright);
    background: rgba(74,140,67,0.08);
    border: 1px solid rgba(74,140,67,0.18);
    margin-bottom: 0.7rem;
    letter-spacing: 0.02em;
}
.landing-title {
    font-size: 2.8rem; font-weight: 800; line-height: 1.3;
    margin-bottom: 0.55rem; letter-spacing: -0.01em;
}
.landing-title .highlight {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.landing-sub {
    color: var(--text-2); font-size: 1.05rem; line-height: 1.85;
    margin: 0;
}

/* ── Nav bento cards: explicit placement in 3×2 sub-area ── */
.bento-grid > .bento-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.bento-grid > .bento-card:nth-child(4) { grid-column: 3; grid-row: 2; }
.bento-grid > .bento-card:nth-child(5) { grid-column: 4; grid-row: 2; }
.bento-grid > .bento-card:nth-child(6) { grid-column: 2; grid-row: 3; }
.bento-grid > .bento-card:nth-child(7) { grid-column: 3; grid-row: 3; }
.bento-grid > .bento-card:nth-child(8) { grid-column: 4; grid-row: 3; }

.bento-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.4rem 1.4rem 1.1rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: right;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    transition: var(--transition);
}
.bento-card::before {
    content: '';
    position: absolute; inset: -1px; border-radius: var(--radius);
    padding: 1px;
    background: linear-gradient(135deg,
        transparent 30%,
        rgba(197,160,89,0.28) 50%,
        transparent 70%);
    -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.5s; pointer-events: none;
}
.bento-card::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 60% 15%,
        rgba(74,140,67,0.07) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.bento-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-card-hover);
    transform: translateY(-5px);
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover::after  { opacity: 1; }

.bento-card-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(74,140,67,0.10);
    border: 1px solid rgba(74,140,67,0.20);
    display: flex; align-items: center; justify-content: center;
    color: var(--green-bright);
    flex-shrink: 0;
    transition: var(--transition);
}
.bento-cta .bento-card-icon {
    background: rgba(197,160,89,0.10);
    border-color: rgba(197,160,89,0.25);
    color: var(--gold);
}
.bento-card:hover .bento-card-icon {
    background: rgba(74,140,67,0.20);
    box-shadow: 0 0 16px rgba(74,140,67,0.18);
}
.bento-cta:hover .bento-card-icon {
    background: rgba(197,160,89,0.18);
    box-shadow: 0 0 16px rgba(197,160,89,0.18);
}

.bento-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding-top: 0.8rem;
}
.bento-card-title {
    display: block;
    font-size: 1.3rem; font-weight: 700;
    color: var(--text-1);
    line-height: 1.3;
}
.bento-card-sub {
    display: block;
    font-size: 0.95rem; color: var(--text-3); line-height: 1.65;
}
.bento-card-arrow {
    position: absolute;
    bottom: 0.9rem; left: 1.1rem;
    font-size: 0.85rem;
    color: var(--text-3);
    opacity: 0.3;
    transition: var(--transition);
}
.bento-card:hover .bento-card-arrow {
    opacity: 0.8;
    transform: translateX(-5px);
}
.bento-cta .bento-card-arrow { color: var(--gold); }


/* ─── 10. Inner Page Hero Panel ─── */
.panel-hero {
    text-align:center;
    background:radial-gradient(ellipse at center, rgba(45,90,39,0.06) 0%, transparent 70%);
    align-items:center;
    padding-top: calc(var(--nav-h) + 3rem);
    padding-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
.panel-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,0.15), transparent);
}
.page-hero-title {
    font-size:2.9rem; font-weight:800; margin-bottom:1rem; line-height:1.35;
    background: linear-gradient(135deg, var(--text-1) 40%, var(--gold-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.page-hero-sub {
    color:var(--text-2); max-width:700px; margin:0 auto;
    font-size:1.15rem; line-height:1.9;
}

/* ─── 11. Services — Card Nav + Tabs ─── */
.service-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.service-nav-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 1.4rem;
    cursor: pointer;
    text-align: right;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s, border-color 0.4s, box-shadow 0.5s;
    position: relative;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
}
.service-nav-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green-bright), var(--gold));
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: right;
}
.service-nav-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-card-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}
.service-nav-card.active {
    background: rgba(45,90,39,0.08);
    border-color: rgba(74,140,67,0.3);
    box-shadow: 0 0 25px rgba(74,140,67,0.1);
}
.service-nav-card.active::before { transform: scaleX(1); }
.service-nav-card .card-icon-wrap { margin-bottom: 0.8rem; width:44px; height:44px; border-radius:12px; }
.service-nav-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}
.service-nav-card p {
    font-size: 0.92rem;
    color: var(--text-3);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tabs {
    display:flex; gap:0.6rem; flex-wrap:wrap;
    justify-content:center; margin-bottom:2.5rem;
}
.tab {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.6rem 1.2rem; border-radius:10px; font-size:1rem;
    font-weight:600; color:var(--text-2); background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06); cursor:pointer;
    transition:var(--transition); font-family:'Cairo',sans-serif;
}
.tab:hover { color:var(--text-1); background:rgba(255,255,255,0.08); }
.tab.active {
    color:var(--gold); background:rgba(197,160,89,0.1);
    border-color:rgba(197,160,89,0.2);
}
.tab svg { width:18px; height:18px; }

.tab-panel { display:none; animation:slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.tab-panel.active { display:block; }
@keyframes slideUp {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}

/* Service block detail */
.service-block {
    background:var(--bg-card); border:1px solid var(--border-card);
    border-radius:var(--radius); padding:2.5rem; margin-bottom:2rem;
}
.service-block-header {
    display:flex; align-items:center; gap:1.2rem; margin-bottom:1.5rem;
}
.service-block-header .card-icon-wrap { margin-bottom:0; }
.service-num { font-size:0.78rem; color:var(--gold); font-weight:700; letter-spacing:0.05em; }
.service-block-header h2 { font-size:1.4rem; font-weight:700; }
.service-block-desc { color:var(--text-2); margin-bottom:2rem; line-height:1.9; }
.service-columns { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-bottom:2rem; }
.service-col h4 {
    font-size:0.95rem; font-weight:700; margin-bottom:1rem;
    color:var(--gold); display:flex; align-items:center; gap:0.5rem;
}
.service-col h4::before {
    content:''; width:3px; height:18px; border-radius:2px;
    background:var(--gold); display:inline-block;
}
.service-col ul { display:flex; flex-direction:column; gap:0.7rem; }
.service-col li {
    color:var(--text-2); font-size:0.92rem; padding-right:1.2rem;
    position:relative; line-height:1.7;
}
.service-col li::before {
    content:''; position:absolute; right:0; top:0.65em;
    width:5px; height:5px; border-radius:50%; background:var(--green-bright);
}
.results-list li::before { background:var(--gold); }
.service-cta { text-align:center; padding-top:0.5rem; }

/* ─── 12. Sectors ─── */
.sector-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:0.6rem; }
.sector-card > p { color:var(--text-2); font-size:0.92rem; line-height:1.8; margin-bottom:1.2rem; }
.sector-focus {
    display:flex; flex-direction:column; gap:0.5rem;
    padding-top:1rem; border-top:1px solid rgba(255,255,255,0.06);
}
.sector-focus li {
    color:var(--text-2); font-size:0.88rem; padding-right:1rem; position:relative;
}
.sector-focus li::before {
    content:''; position:absolute; right:0; top:0.6em;
    width:4px; height:4px; border-radius:50%; background:var(--green-bright);
}

/* ─── 13. Methodology / Steps ─── */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    position: relative;
}
.steps-grid::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--green-bright), var(--gold), var(--green-bright));
    opacity: 0.25;
    z-index: 0;
}
.methodology-intro {
    padding: 2rem 2.2rem;
    margin-bottom: 2rem;
}
.methodology-intro p {
    color: var(--text-2);
    line-height: 1.95;
    font-size: 0.98rem;
    max-width: 880px;
}
.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 1.8rem 1.4rem;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s, border-color 0.4s, box-shadow 0.5s;
}
.step-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-card-hover);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.step-number {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-bright));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem; color: #fff;
    margin: 0 auto 1.2rem;
    box-shadow: 0 4px 18px rgba(74,140,67,0.3);
    transition: transform 0.4s, box-shadow 0.4s;
}
.step-card:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(74,140,67,0.5);
}
.step-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(197,160,89,0.1);
    color: var(--gold-light);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.step-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--text-1);
}
.step-card p {
    color: var(--text-2);
    font-size: 1rem;
    line-height: 1.75;
}
.step-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    text-align: right;
}
.step-list li {
    color: var(--text-2);
    font-size: 0.84rem;
    line-height: 1.7;
    padding-right: 0.95rem;
    position: relative;
}
.step-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0.65em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}
.methodology-pillars {
    margin-top: 2rem;
}

/* Legacy timeline fallback */
.timeline { position:relative; max-width:700px; margin:0 auto; }
.timeline::before {
    content:''; position:absolute; right:24px; top:0; bottom:0;
    width:2px; background:linear-gradient(to bottom, var(--green-bright), var(--gold), transparent);
}
.timeline-item {
    display:flex; align-items:flex-start; gap:2rem; margin-bottom:2.5rem;
    position:relative;
    opacity:0; transform:translateX(20px);
    transition:opacity 0.6s, transform 0.6s;
}
.timeline-item.visible { opacity:1; transform:translateX(0); }
.timeline-dot {
    width:50px; height:50px; min-width:50px; border-radius:50%;
    background:rgba(45,90,39,0.15); border:2px solid var(--green-bright);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.1rem; color:var(--green-bright);
    position:relative; z-index:2; transition:var(--transition);
}
.timeline-item:hover .timeline-dot {
    background:var(--green-bright); color:#fff;
    box-shadow:0 0 20px rgba(74,140,67,0.4);
}
.timeline-content { flex:1; }
.timeline-content h3 { font-size:1.15rem; font-weight:700; margin-bottom:0.5rem; }
.timeline-content p { color:var(--text-2); font-size:0.92rem; line-height:1.8; }

/* ─── 14. Training ─── */
.training-card {
    max-width:700px; margin:0 auto; text-align:center;
    padding:3rem;
}
.training-card p { color:var(--text-2); line-height:1.9; }

/* ─── 15. About ─── */
.about-block { margin-bottom:2rem; }
.about-block h3 { font-size:1.3rem; font-weight:700; margin-bottom:1rem; color:var(--gold); }
.about-block p { color:var(--text-2); line-height:1.9; }
.about-vision-mission { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
.about-vision-mission h3 { color:var(--gold); font-size:1.1rem; font-weight:700; margin-bottom:0.8rem; }
.about-vision-mission p { color:var(--text-2); font-size:0.92rem; line-height:1.8; }
.value-card { text-align:center; padding:1.8rem 1.5rem; }
.value-card .card-icon-wrap { margin:0 auto 1rem; }
.value-card h4 { font-size:1rem; font-weight:700; margin-bottom:0.5rem; }
.value-card p { color:var(--text-2); font-size:0.88rem; line-height:1.7; }

/* ─── 16. Contact ─── */
.contact-grid { display:grid; grid-template-columns:1.3fr 0.7fr; gap:2rem; align-items:start; }
.contact-form-card h3 { font-size:1.3rem; font-weight:700; margin-bottom:1.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:0.5rem; }
.form-group label { font-size:0.85rem; font-weight:600; color:var(--text-2); }
.form-group input,
.form-group textarea,
.form-group select {
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius-sm); padding:0.75rem 1rem;
    color:var(--text-1); font-family:'Cairo',sans-serif; font-size:0.92rem;
    transition:var(--transition); outline:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color:var(--gold); background:rgba(255,255,255,0.06);
    box-shadow:0 0 0 3px rgba(197,160,89,0.1);
}
.form-group textarea { resize:vertical; min-height:100px; }
.form-group select { cursor:pointer; }
.form-group select option { background:var(--bg); color:var(--text-1); }
.contact-info { display:flex; flex-direction:column; gap:1.2rem; }
.contact-info-card h3 { font-size:1rem; font-weight:700; margin-bottom:0.8rem; }
.contact-info-card p { color:var(--text-2); font-size:0.9rem; line-height:1.7; }
.contact-link {
    display:flex; align-items:center; gap:0.6rem;
    color:var(--gold); font-size:0.92rem; direction:ltr; transition:var(--transition);
}
.contact-link:hover { color:var(--gold-light); }
.contact-services-list { display:flex; flex-direction:column; gap:0.6rem; }
.contact-services-list a {
    display:flex; align-items:center; gap:0.5rem;
    color:var(--text-2); font-size:0.88rem; transition:var(--transition);
}
.contact-services-list a:hover { color:var(--gold); }
.contact-services-list svg { width:16px; height:16px; min-width:16px; }

/* ─── 17. CTA Section ─── */
.cta-card {
    text-align:center; padding:3.5rem 2.5rem;
    background:linear-gradient(135deg, rgba(45,90,39,0.08), rgba(197,160,89,0.05));
    border-color:rgba(197,160,89,0.12);
}
.cta-card h2 { font-size:1.6rem; font-weight:800; margin-bottom:1rem; line-height:1.5; }
.cta-card p { color:var(--text-2); max-width:600px; margin:0 auto 2rem; line-height:1.8; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ─── 18. Footer ─── */
.footer {
    border-top:1px solid rgba(255,255,255,0.05); padding:2.5rem 0 2rem;
    position:relative; z-index:10;
}
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.footer-logo-img { height:52px; width:auto; opacity:0.75; }
.footer-nav { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.footer-nav a { color:var(--text-3); font-size:0.85rem; transition:var(--transition); }
.footer-nav a:hover { color:var(--text-2); }
.footer-copy { color:var(--text-3); font-size:0.78rem; }

/* ─── 19. Intro card ─── */
.intro-card { position:relative; overflow:hidden; max-width:800px; margin:0 auto; }
.intro-card p { color:var(--text-2); text-align:center; font-size:1.05rem; line-height:2; }
.intro-accent {
    position:absolute; top:0; right:0; width:4px; height:100%;
    background:linear-gradient(to bottom, var(--green-bright), var(--gold));
    border-radius:2px;
}

/* Service home cards */
.service-card-home { display:flex; flex-direction:column; }
.service-card-home h3 { font-size:1.1rem; font-weight:700; margin-bottom:0.6rem; }
.service-card-home p { color:var(--text-2); font-size:0.9rem; line-height:1.7; flex:1; }
.card-link-block { cursor:pointer; }
.card-link-block:hover { text-decoration:none; }

/* Diff cards  */
.diff-card { text-align:center; padding:2rem 1.5rem; }
.diff-card .card-icon-wrap { margin:0 auto 1rem; }
.diff-card h3 { font-size:1rem; font-weight:700; margin-bottom:0.5rem; }
.diff-card p { color:var(--text-2); font-size:0.88rem; line-height:1.7; }

/* ─── 20. Stats Section ─── */
.stats-grid {
    display:flex; justify-content:center; align-items:center;
    gap:0; flex-wrap:wrap;
}
.stat-item { text-align:center; padding:1.5rem 2.5rem; }
.stat-number {
    display:block; font-size:2.8rem; font-weight:800; line-height:1;
    background:linear-gradient(135deg, var(--green-bright), var(--gold));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { display:block; color:var(--text-2); font-size:0.82rem; margin-top:0.4rem; }
.stat-divider { width:1px; height:50px; background:rgba(255,255,255,0.08); }

/* ─── 21. Animations ─── */
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74,140,67,0); }
    50% { box-shadow: 0 0 20px rgba(74,140,67,0.15); }
}

/* ─── 22. Responsive ─── */
@media (max-width:1024px) {
    .cards-grid-4 { grid-template-columns:repeat(2,1fr); }
    .service-columns { grid-template-columns:1fr; }
    .service-nav-grid { grid-template-columns:repeat(2,1fr); }
    .steps-grid { grid-template-columns:repeat(3,1fr); }
    .steps-grid::before { display:none; }
    /* Bento: compress to 2-column (logo + 2 card cols) */
    .bento-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        height: calc(100vh - var(--nav-h) - 2rem);
    }
    .bento-grid > .bento-card:nth-child(3) { grid-column: 2; grid-row: 2; }
    .bento-grid > .bento-card:nth-child(4) { grid-column: 3; grid-row: 2; }
    .bento-grid > .bento-card:nth-child(5) { grid-column: 2; grid-row: 3; }
    .bento-grid > .bento-card:nth-child(6) { grid-column: 3; grid-row: 3; }
    .bento-grid > .bento-card:nth-child(7) { grid-column: 2; grid-row: 4; }
    .bento-grid > .bento-card:nth-child(8) { grid-column: 3; grid-row: 4; }
    .bento-grid {
        grid-template-rows: auto 1fr 1fr 1fr;
    }
    .bento-logo-cell { grid-row: 1 / 5; }
    .bento-head-cell { grid-column: 2 / 4; }
    .landing-title { font-size: 2.1rem; }
}
@media (max-width:768px) {
    .panel { padding: 1.5rem 0; }
    .panel-hero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 1rem; }
    .side-nav { display:none; }

    /* Navbar */
    .nav-links {
        position:fixed; top:0; right:-100%; width:70%; max-width:300px;
        height:100vh; background:rgba(3,5,10,0.97); backdrop-filter:blur(20px);
        flex-direction:column; padding:5rem 2rem 2rem; gap:0.5rem;
        transition:right 0.35s ease;
    }
    .nav-links.open { right:0; }
    .mobile-toggle { display:flex; }
    .btn-nav-cta { display:none; }
    .logo-img { height:46px; }

    /* Landing — bento collapses to single column stack */
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        max-height: none;
        gap: 0.75rem;
    }
    .bento-logo-cell {
        grid-column: 1; grid-row: 1;
        min-height: 260px;
        border-radius: 20px;
    }
    .landing-logo { width: min(300px, 80vw); }
    .bento-head-cell {
        grid-column: 1; grid-row: 2;
        padding: 1.4rem 1.4rem;
    }
    .landing-title { font-size: 1.85rem; }
    .landing-sub { font-size: 0.88rem; }
    /* All bento cards — reset to auto flow single column */
    .bento-grid > .bento-card:nth-child(3),
    .bento-grid > .bento-card:nth-child(4),
    .bento-grid > .bento-card:nth-child(5),
    .bento-grid > .bento-card:nth-child(6),
    .bento-grid > .bento-card:nth-child(7),
    .bento-grid > .bento-card:nth-child(8) {
        grid-column: 1; grid-row: auto;
    }
    /* 2-column card grid on mobile */
    .bento-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    .bento-grid > .bento-card {
        grid-column: 1 !important;
    }

    /* Content */
    .page-hero-title { font-size:1.9rem; }
    .cards-grid-2 { grid-template-columns:1fr; }
    .cards-grid-3 { grid-template-columns:1fr; }
    .about-vision-mission { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .stats-grid { flex-direction:column; gap:0; }
    .stat-divider { width:50px; height:1px; }
    .stat-item { padding:1rem 2rem; }

    /* Service nav */
    .service-nav-grid { grid-template-columns:1fr 1fr; gap:0.75rem; }

    /* Steps */
    .steps-grid { grid-template-columns:1fr 1fr; gap:0.75rem; }
    .steps-grid::before { display:none; }

    .tabs { gap:0.4rem; }
    .tab { font-size:0.8rem; padding:0.5rem 0.8rem; }
    .tab svg { width:14px; height:14px; }
}
@media (max-width:480px) {
    .container { padding:0 1.2rem; }
    .landing-title { font-size:1.55rem; }
    .landing-sub { font-size:0.85rem; }
    .section-title { font-size:1.5rem; }
    .cta-card { padding:2.5rem 1.5rem; }
    .cta-card h2 { font-size:1.3rem; }
    .service-nav-grid { grid-template-columns:1fr; }
    .steps-grid { grid-template-columns:1fr; }
}

/* ─── 23. Colour Themes ─── */
[data-theme="navy"] {
    --bg: #05091e;
    --bg-card: rgba(12,22,60,0.45);
    --bg-card-hover: rgba(18,32,80,0.55);
    --border-card: rgba(80,120,255,0.09);
    --border-card-hover: rgba(80,120,255,0.22);
    --nav-bg: rgba(5,9,30,0.9);
    --blob-1: #1a2d8c;
    --blob-2: var(--gold);
    --blob-3: #2244cc;
}
[data-theme="slate"] {
    --bg: #0f0f1a;
    --bg-card: rgba(255,255,255,0.038);
    --bg-card-hover: rgba(255,255,255,0.07);
    --border-card: rgba(180,160,220,0.09);
    --border-card-hover: rgba(180,160,220,0.22);
    --nav-bg: rgba(15,15,26,0.92);
    --blob-1: #6040a0;
    --blob-2: var(--gold);
    --blob-3: var(--green-bright);
}
[data-theme="forest"] {
    --bg: #050d08;
    --bg-card: rgba(5,20,12,0.48);
    --bg-card-hover: rgba(10,30,18,0.6);
    --border-card: rgba(74,140,67,0.13);
    --border-card-hover: rgba(74,140,67,0.3);
    --nav-bg: rgba(5,13,8,0.92);
    --blob-1: #1a5a15;
    --blob-2: var(--gold);
    --blob-3: #0d3a08;
}
[data-theme="sand"] {
    --bg: #f7f2e9;
    --bg-card: rgba(120,90,40,0.07);
    --bg-card-hover: rgba(100,75,30,0.13);
    --border-card: rgba(80,55,20,0.1);
    --border-card-hover: rgba(80,55,20,0.24);
    --text-1: #1a1208;
    --text-2: #4a3c28;
    --text-3: #5e5040;  /* darkened: 6.5:1 on sand */
    --gold: #7a5c1a;   /* darkened: 5.1:1 on sand  */
    --gold-light: #8a6c28;
    --nav-bg: rgba(247,242,233,0.92);
    --blob-1: var(--green);
    --blob-2: #c5a059;  /* keep original gold for decorative blobs */
    --blob-3: var(--green-bright);
}
[data-theme="silver"] {
    --bg: #edf0f5;
    --bg-card: rgba(60,80,120,0.065);
    --bg-card-hover: rgba(50,70,110,0.12);
    --border-card: rgba(40,60,100,0.1);
    --border-card-hover: rgba(40,60,100,0.24);
    --text-1: #0d1520;
    --text-2: #3a4a60;
    --text-3: #4e5f7a;  /* darkened: 5.2:1 on silver */
    --gold: #7a5c1a;    /* darkened: 5.0:1 on silver */
    --gold-light: #8a6c28;
    --nav-bg: rgba(237,240,245,0.92);
    --blob-1: var(--green);
    --blob-2: #c5a059;  /* keep original gold for decorative blobs */
    --blob-3: var(--green-bright);
}

/* Light theme element overrides */
[data-theme="sand"] .blob,
[data-theme="silver"] .blob { opacity: 0.22; }

[data-theme="sand"] .side-dot,
[data-theme="silver"] .side-dot { border-color: rgba(0,0,0,0.25); }
[data-theme="sand"] .side-dot:hover,
[data-theme="silver"] .side-dot:hover { border-color: rgba(0,0,0,0.5); }

[data-theme="sand"] .btn-secondary,
[data-theme="silver"] .btn-secondary { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.12); }
[data-theme="sand"] .btn-secondary:hover,
[data-theme="silver"] .btn-secondary:hover { background:rgba(0,0,0,0.09); border-color:rgba(0,0,0,0.2); }

[data-theme="sand"] .nav-links a:hover,
[data-theme="silver"] .nav-links a:hover { background: rgba(0,0,0,0.05); }

[data-theme="sand"] .tab,
[data-theme="silver"] .tab { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.07); }
[data-theme="sand"] .tab:hover,
[data-theme="silver"] .tab:hover { background:rgba(0,0,0,0.09); }

[data-theme="sand"] .stat-divider,
[data-theme="silver"] .stat-divider { background: rgba(0,0,0,0.1); }

[data-theme="sand"] .glass-card:hover,
[data-theme="silver"] .glass-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(197,160,89,0.18);
}

[data-theme="sand"] .navbar.scrolled,
[data-theme="sand"] .inner-page .navbar,
[data-theme="silver"] .navbar.scrolled,
[data-theme="silver"] .inner-page .navbar { box-shadow: 0 1px 0 rgba(0,0,0,0.07); }



@media (max-width:768px) {
    [data-theme="sand"] .nav-links { background: rgba(247,242,233,0.99) !important; border-left: 1px solid rgba(0,0,0,0.08) !important; }
    [data-theme="silver"] .nav-links { background: rgba(237,240,245,0.99) !important; border-left: 1px solid rgba(0,0,0,0.08) !important; }
}

/* ─── 24. Unified Theme Picker ─── */
.unified-picker {
    position:fixed; bottom:1.5rem; left:1.5rem; z-index:9999;
    display:flex; flex-direction:column-reverse; align-items:flex-start; gap:0.5rem;
}
.unified-picker-btn {
    width:42px; height:42px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border-card);
    color:var(--text-2); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transition:var(--transition); box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.unified-picker-btn:hover { color:var(--text-1); border-color:var(--border-card-hover); transform:scale(1.08); }
.unified-panel {
    display:flex; flex-direction:column; gap:0.35rem;
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity 0.25s ease, transform 0.25s ease;
    background:var(--bg-card); border:1px solid var(--border-card);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:0.75rem 0.6rem; border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
    min-width:56px;
}
.unified-picker.open .unified-panel {
    opacity:1; pointer-events:auto; transform:translateY(0);
}
.ut-sep {
    font-family:'Cairo',sans-serif; font-size:0.68rem;
    color:var(--text-3); text-align:center; padding:0.2rem 0 0.3rem;
    letter-spacing:0.02em;
}
.ut-sep:not(:first-child) { border-top:1px solid var(--border-card); padding-top:0.5rem; margin-top:0.2rem; }
.ut-swatch {
    width:38px; height:38px; border-radius:50%;
    border:2px solid rgba(255,255,255,0.10);
    cursor:pointer; position:relative; overflow:hidden;
    transition:var(--transition); box-shadow:0 2px 8px rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center;
    align-self:center;
}
.ut-swatch:hover { transform:scale(1.12); border-color:var(--ut-border,rgba(255,255,255,0.35)); }
.ut-swatch.active { border-color:var(--ut-border,var(--gold)); box-shadow:0 0 0 3px rgba(197,160,89,0.3); }
.ut-check { color:#fff; opacity:0; transition:opacity 0.2s; }
.ut-swatch.active .ut-check { opacity:1; }
.ut-label {
    position:absolute; right:calc(100% + 0.6rem);
    background:var(--bg-card); border:1px solid var(--border-card);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    color:var(--text-2); font-size:0.75rem; white-space:nowrap;
    padding:0.25rem 0.6rem; border-radius:6px; opacity:0;
    pointer-events:none; transition:opacity 0.2s;
    font-family:'Cairo',sans-serif;
}
.ut-swatch:hover .ut-label { opacity:1; }
[data-theme="sand"] .unified-picker-btn,
[data-theme="silver"] .unified-picker-btn { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.12); }

/* ─── 25. Team page ─── */
.team-intro-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--gold);
    text-align: center;
    margin-bottom: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.team-grid {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin-top: 2.5rem;
}
.team-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2rem 2.2rem;
    gap: 0;
}
.team-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 3px solid rgba(197,160,89,0.4);
    flex-shrink: 0;
}
.team-avatar-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid rgba(197,160,89,0.2);
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-3);
}
.team-divider {
    width: 1px;
    align-self: stretch;
    margin: 0 1.8rem;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(197,160,89,0.6) 20%,
        rgba(197,160,89,0.6) 80%,
        transparent 100%);
    flex-shrink: 0;
}
.team-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}
.team-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.4;
}
.team-bio {
    color: var(--text-2);
    font-size: 0.88rem;
    line-height: 1.9;
}
.team-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.team-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: rgba(197,160,89,0.1);
    color: var(--gold);
    border: 1px solid rgba(197,160,89,0.2);
    white-space: nowrap;
}
/* Placeholder cards: compact centered */
.team-card-placeholder {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.8rem;
}
.team-card-placeholder .team-avatar-placeholder {
    margin-bottom: 1rem;
}
.team-card-placeholder .team-name {
    color: var(--text-3);
}
.team-card-placeholder .team-bio {
    color: var(--text-3);
    font-style: italic;
}
/* Responsive */
@media (max-width: 640px) {
    .team-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.8rem 1.4rem;
    }
    .team-divider {
        width: 60px;
        height: 1px;
        align-self: auto;
        margin: 1.2rem 0;
        background: linear-gradient(to right,
            transparent 0%,
            rgba(197,160,89,0.6) 20%,
            rgba(197,160,89,0.6) 80%,
            transparent 100%);
    }
    .team-tags { justify-content: center; }
}

/* ─── 26. Background image themes ─── */
/* Clean — hide blobs/noise (solid color only) */
[data-bg="clean"] .blob { display:none; }
[data-bg="clean"] .noise-overlay { display:none; }

/* Image backgrounds — hide blobs/noise, keep body transparent */
[data-bg="waves-gold"] .blob,
[data-bg="tree-circuit"] .blob,
[data-bg="tree-glow"] .blob,
[data-bg="roots"] .blob { display:none; }

[data-bg="waves-gold"] .noise-overlay,
[data-bg="tree-circuit"] .noise-overlay,
[data-bg="tree-glow"] .noise-overlay,
[data-bg="roots"] .noise-overlay { display:none; }

[data-bg="waves-gold"] body,
[data-bg="tree-circuit"] body,
[data-bg="tree-glow"] body,
[data-bg="roots"] body { background:transparent; }

/* Glass cards get slightly more opacity over image backgrounds for readability */
[data-bg="waves-gold"] .glass-card,
[data-bg="tree-circuit"] .glass-card,
[data-bg="tree-glow"] .glass-card,
[data-bg="roots"] .glass-card { background: rgba(3,5,10,0.72); }