/* ============================================================
   ThinkPartners — Kinetic Veridian V15 Design System
   Ported from: thinkmarkets-partners-v15.vercel.app
   ============================================================ */

/* ── Box Sizing Reset ─────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Design Tokens ────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --tp-bg: #031712;
    --tp-bg-alt: #00110d;
    --tp-bg-card: #0a1f1a;

    /* Text */
    --tp-text: #d0e8df;
    --tp-text-muted: #bbcac0;

    /* Accents */
    --tp-green: #5EE15A;
    --tp-green-dark: #4BB448;
    --tp-amber: #ffb95f;
    --tp-cta-text: #003824;

    /* Gradients */
    --tp-gradient-cta: linear-gradient(135deg, #5EE15A, #ffb95f);

    /* Glass card */
    --tp-glass-bg: rgba(12, 43, 36, 0.4);
    --tp-glass-border: rgba(78, 222, 163, 0.1);
    --tp-glass-blur: 24px;

    /* Glow */
    --tp-glow: rgba(94, 225, 90, 0.08);
    --tp-glow-strong: rgba(94, 225, 90, 0.12);
    --tp-glow-border: rgba(94, 225, 90, 0.1);
    --tp-glow-border-strong: rgba(94, 225, 90, 0.3);

    /* Typography */
    --tp-font: 'Figtree', sans-serif;

    /* Radius */
    --tp-radius-sm: 0.5rem;
    --tp-radius-md: 0.75rem;
    --tp-radius-lg: 1rem;
    --tp-radius-xl: 1.5rem;
    --tp-radius-pill: 9999px;
}

/* ── Base ─────────────────────────────────────────────────── */
.tp-body {
    margin: 0;
    padding: 0;
    font-family: var(--tp-font);
    background-color: var(--tp-bg);
    color: var(--tp-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ───────────────────────────────────────────────── */
.tp-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 1rem;
}

.tp-section {
    padding-block: 5rem;
}

/* Compact variant — tighter spacing for content-heavy pages (guidelines, etc.) */
.tp-section--compact {
    padding-block: 3rem;
}

.tp-section--compact .tp-section__header {
    margin-bottom: 2rem;
}

/* ── Typography ───────────────────────────────────────────── */
.tp-text-gradient,
.text-gradient {
    background: var(--tp-gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tp-text-muted {
    color: var(--tp-text-muted);
}

/* ── Buttons ──────────────────────────────────────────────── */
.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-family: var(--tp-font);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    border: none;
    border-radius: var(--tp-radius-pill);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.tp-btn-primary,
.power-gradient {
    background: var(--tp-gradient-cta);
    color: var(--tp-cta-text);
}

.tp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(94, 225, 90, 0.3);
}

.tp-btn-outline {
    background: transparent;
    color: var(--tp-text);
    border: 1px solid var(--tp-glow-border-strong);
}

.tp-btn-outline:hover {
    background: rgba(94, 225, 90, 0.08);
    border-color: var(--tp-green);
}

/* ── Cards ────────────────────────────────────────────────── */
.tp-glass-card,
.glass-card {
    background: var(--tp-glass-bg);
    backdrop-filter: blur(var(--tp-glass-blur));
    -webkit-backdrop-filter: blur(var(--tp-glass-blur));
    border: 1px solid var(--tp-glass-border);
    border-radius: var(--tp-radius-lg);
}

.tp-card {
    background: var(--tp-bg-card);
    border: 1px solid var(--tp-glow-border);
    border-radius: var(--tp-radius-lg);
    padding: 2rem;
}

.tp-card-hover,
.card-hover {
    transition: all 0.3s ease;
}

.tp-card-hover:hover,
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 40px var(--tp-glow-strong);
}

.tp-stat-card,
.stat-card {
    animation: border-glow 4s ease-in-out infinite;
    border: 1px solid var(--tp-glow-border);
}

/* ── Gradients & Backgrounds ──────────────────────────────── */
.tp-mesh-gradient,
.mesh-gradient {
    background:
        radial-gradient(at 20% 80%, rgba(94, 225, 90, 0.08) 0%, transparent 50%),
        radial-gradient(at 80% 20%, rgba(255, 185, 95, 0.06) 0%, transparent 50%);
}

.tp-tonal-transition,
.tonal-transition {
    background: linear-gradient(to bottom, #031712, #00110d);
}

/* ── Glows ────────────────────────────────────────────────── */
.tp-ambient-glow,
.ambient-glow {
    box-shadow: 0 0 40px var(--tp-glow);
}

.tp-hero-glow,
.hero-glow {
    background: radial-gradient(ellipse at 50% 0%, var(--tp-glow-strong) 0%, transparent 60%);
}

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Form Inputs ──────────────────────────────────────────── */
.tp-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--tp-font);
    font-size: 1rem;
    color: var(--tp-text);
    background: #031712;
    border: 1px solid rgba(94, 225, 90, 0.2);
    border-radius: 0.75rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tp-input:focus {
    border-color: rgba(94, 225, 90, 0.5);
    box-shadow: 0 0 0 3px rgba(94, 225, 90, 0.15);
}

.tp-input::placeholder {
    color: rgba(187, 202, 192, 0.4);
}

/* ── Badges ───────────────────────────────────────────────── */
.tp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--tp-radius-pill);
    background: rgba(94, 225, 90, 0.1);
    color: var(--tp-green);
    border: 1px solid rgba(94, 225, 90, 0.2);
}

/* ── Keyframe Animations ──────────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes border-glow {
    0%, 100% { border-color: rgba(94, 225, 90, 0.1); }
    50% { border-color: rgba(94, 225, 90, 0.3); }
}

@keyframes aurora-drift-1 {
    0%   { transform: translate(0%, 0%) scale(1); }
    25%  { transform: translate(15%, -20%) scale(1.15); }
    50%  { transform: translate(-10%, 15%) scale(0.9); }
    75%  { transform: translate(10%, -10%) scale(1.1); }
    100% { transform: translate(0%, 0%) scale(1); }
}

@keyframes aurora-drift-2 {
    0%   { transform: translate(0%, 0%) scale(1); }
    25%  { transform: translate(-20%, 15%) scale(1.1); }
    50%  { transform: translate(15%, -20%) scale(0.85); }
    75%  { transform: translate(-10%, 10%) scale(1.15); }
    100% { transform: translate(0%, 0%) scale(1); }
}

@keyframes aurora-drift-3 {
    0%   { transform: translate(0%, 0%) scale(1) rotate(0deg); }
    33%  { transform: translate(10%, -15%) scale(1.1) rotate(5deg); }
    66%  { transform: translate(-15%, 10%) scale(0.95) rotate(-3deg); }
    100% { transform: translate(0%, 0%) scale(1) rotate(0deg); }
}

@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(30px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Aurora Blobs ─────────────────────────────────────────── */
.tp-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.tp-aurora-blob--1 {
    width: 600px;
    height: 600px;
    background: rgba(94, 225, 90, 0.07);
    animation: aurora-drift-1 20s ease-in-out infinite;
}

.tp-aurora-blob--2 {
    width: 500px;
    height: 500px;
    background: rgba(255, 185, 95, 0.05);
    animation: aurora-drift-2 25s ease-in-out infinite;
}

.tp-aurora-blob--3 {
    width: 400px;
    height: 400px;
    background: rgba(94, 225, 90, 0.04);
    animation: aurora-drift-3 30s ease-in-out infinite;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 640px) {
    .tp-container { padding-inline: 1.5rem; }
}

@media (min-width: 768px) {
    .tp-section { padding-block: 6rem; }
}

@media (min-width: 1024px) {
    .tp-container { padding-inline: 2rem; }
    .tp-section { padding-block: 8rem; }
}

@media (min-width: 1280px) {
    .tp-container { max-width: 1280px; }
}

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

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

    .tp-aurora-blob {
        display: none;
    }
}

/* ── RTL Support (Arabic) ─────────────────────────────────── */
[dir="rtl"] .tp-body {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .tp-btn {
    flex-direction: row-reverse;
}