/* ══════════════════════════════════════════════════════
   HaghGpt Homepage — home.css
   Dual-theme (light/dark) with animations and effects.
   All colour properties use CSS variables only.
   ══════════════════════════════════════════════════════ */

/* ─── Homepage-specific CSS Variables ────────────────── */
:root {
    /* Hero gradient */
    --hp-hero-bg-1:              #2d1b69;
    --hp-hero-bg-2:              #1e3a8a;
    --hp-hero-bg-3:              #0f4880;
    --hp-hero-bg-4:              #3b2f9e;
    /* Hero text */
    --hp-hero-text:              #ffffff;
    --hp-hero-muted:             rgba(255,255,255,0.68);
    /* Badge */
    --hp-badge-bg:               rgba(245,158,11,0.18);
    --hp-badge-border:           rgba(245,158,11,0.45);
    --hp-badge-text:             #f59e0b;
    /* Hero buttons */
    --hp-btn-primary-bg:         #f59e0b;
    --hp-btn-primary-text:       #1c0f00;
    --hp-btn-outline-border:     rgba(255,255,255,0.55);
    --hp-btn-outline-text:       #ffffff;
    /* Cards */
    --hp-card-shadow:            0 4px 24px rgba(92,107,192,0.07);
    --hp-card-shadow-hov:        0 20px 60px rgba(92,107,192,0.18);
    --hp-card-border-hov:        var(--site-accent);
    /* Icon colour sets (6 variants, cycling) */
    --hp-icon-1-color:           #5c6bc0;
    --hp-icon-1-bg:              rgba(92,107,192,0.12);
    --hp-icon-2-color:           #0ea5e9;
    --hp-icon-2-bg:              rgba(14,165,233,0.12);
    --hp-icon-3-color:           #10b981;
    --hp-icon-3-bg:              rgba(16,185,129,0.12);
    --hp-icon-4-color:           #f59e0b;
    --hp-icon-4-bg:              rgba(245,158,11,0.12);
    --hp-icon-5-color:           #ef4444;
    --hp-icon-5-bg:              rgba(239,68,68,0.12);
    --hp-icon-6-color:           #8b5cf6;
    --hp-icon-6-bg:              rgba(139,92,246,0.12);
    /* Legal section */
    --hp-legal-bg:               rgba(92,107,192,0.05);
    --hp-legal-featured-from:    #5c6bc0;
    --hp-legal-featured-to:      #2563eb;
    /* Security rings */
    --hp-ring-1:                 rgba(92,107,192,0.22);
    --hp-ring-2:                 rgba(92,107,192,0.14);
    /* Stats */
    --hp-stat-bg:                rgba(92,107,192,0.08);
    --hp-stat-border:            rgba(92,107,192,0.2);
    /* CTA gradient */
    --hp-cta-from:               #5c6bc0;
    --hp-cta-to:                 #2563eb;
    --hp-cta-orb:                rgba(255,255,255,0.1);
    /* Shared */
    --hp-glow:                   rgba(92,107,192,0.35);
    --hp-particle:               rgba(92,107,192,0.28);
    --hp-section-tag:            var(--site-accent);
    --hp-section-tag-bg:         rgba(92,107,192,0.1);
    --hp-tag-legal-color:        #10b981;
    --hp-tag-legal-bg:           rgba(16,185,129,0.1);
    --hp-check:                  #10b981;
}

[data-theme="dark"] {
    --hp-hero-bg-1:              #07000f;
    --hp-hero-bg-2:              #030c22;
    --hp-hero-bg-3:              #001228;
    --hp-hero-bg-4:              #0c001e;
    --hp-hero-text:              #f5f5f5;
    --hp-hero-muted:             rgba(245,245,245,0.58);
    --hp-badge-bg:               rgba(251,191,36,0.12);
    --hp-badge-border:           rgba(251,191,36,0.32);
    --hp-badge-text:             #fbbf24;
    --hp-btn-primary-bg:         #fbbf24;
    --hp-btn-primary-text:       #1c0f00;
    --hp-btn-outline-border:     rgba(113,186,250,0.5);
    --hp-btn-outline-text:       #71bafa;
    --hp-card-shadow:            0 4px 24px rgba(0,0,0,0.35);
    --hp-card-shadow-hov:        0 20px 60px rgba(113,186,250,0.1);
    --hp-card-border-hov:        var(--site-accent);
    --hp-icon-1-color:           #71bafa;
    --hp-icon-1-bg:              rgba(113,186,250,0.1);
    --hp-icon-2-color:           #38bdf8;
    --hp-icon-2-bg:              rgba(56,189,248,0.1);
    --hp-icon-3-color:           #34d399;
    --hp-icon-3-bg:              rgba(52,211,153,0.1);
    --hp-icon-4-color:           #fbbf24;
    --hp-icon-4-bg:              rgba(251,191,36,0.1);
    --hp-icon-5-color:           #f87171;
    --hp-icon-5-bg:              rgba(248,113,113,0.1);
    --hp-icon-6-color:           #a78bfa;
    --hp-icon-6-bg:              rgba(167,139,250,0.1);
    --hp-legal-bg:               rgba(113,186,250,0.04);
    --hp-legal-featured-from:    #4338ca;
    --hp-legal-featured-to:      #1e40af;
    --hp-ring-1:                 rgba(113,186,250,0.16);
    --hp-ring-2:                 rgba(113,186,250,0.09);
    --hp-stat-bg:                rgba(113,186,250,0.07);
    --hp-stat-border:            rgba(113,186,250,0.15);
    --hp-cta-from:               #1d4ed8;
    --hp-cta-to:                 #1e3a8a;
    --hp-cta-orb:                rgba(113,186,250,0.08);
    --hp-glow:                   rgba(113,186,250,0.22);
    --hp-particle:               rgba(113,186,250,0.18);
    --hp-section-tag-bg:         rgba(113,186,250,0.1);
    --hp-tag-legal-color:        #34d399;
    --hp-tag-legal-bg:           rgba(52,211,153,0.1);
    --hp-check:                  #34d399;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hp-hero-bg-1:          #07000f;
        --hp-hero-bg-2:          #030c22;
        --hp-hero-bg-3:          #001228;
        --hp-hero-bg-4:          #0c001e;
        --hp-hero-text:          #f5f5f5;
        --hp-hero-muted:         rgba(245,245,245,0.58);
        --hp-badge-bg:           rgba(251,191,36,0.12);
        --hp-badge-border:       rgba(251,191,36,0.32);
        --hp-badge-text:         #fbbf24;
        --hp-btn-primary-bg:     #fbbf24;
        --hp-btn-primary-text:   #1c0f00;
        --hp-btn-outline-border: rgba(113,186,250,0.5);
        --hp-btn-outline-text:   #71bafa;
        --hp-card-shadow:        0 4px 24px rgba(0,0,0,0.35);
        --hp-card-shadow-hov:    0 20px 60px rgba(113,186,250,0.1);
        --hp-icon-1-color:       #71bafa;
        --hp-icon-1-bg:          rgba(113,186,250,0.1);
        --hp-icon-2-color:       #38bdf8;
        --hp-icon-2-bg:          rgba(56,189,248,0.1);
        --hp-icon-3-color:       #34d399;
        --hp-icon-3-bg:          rgba(52,211,153,0.1);
        --hp-icon-4-color:       #fbbf24;
        --hp-icon-4-bg:          rgba(251,191,36,0.1);
        --hp-icon-5-color:       #f87171;
        --hp-icon-5-bg:          rgba(248,113,113,0.1);
        --hp-icon-6-color:       #a78bfa;
        --hp-icon-6-bg:          rgba(167,139,250,0.1);
        --hp-legal-bg:           rgba(113,186,250,0.04);
        --hp-legal-featured-from: #4338ca;
        --hp-legal-featured-to:  #1e40af;
        --hp-ring-1:             rgba(113,186,250,0.16);
        --hp-ring-2:             rgba(113,186,250,0.09);
        --hp-stat-bg:            rgba(113,186,250,0.07);
        --hp-stat-border:        rgba(113,186,250,0.15);
        --hp-cta-from:           #1d4ed8;
        --hp-cta-to:             #1e3a8a;
        --hp-cta-orb:            rgba(113,186,250,0.08);
        --hp-glow:               rgba(113,186,250,0.22);
        --hp-particle:           rgba(113,186,250,0.18);
        --hp-section-tag-bg:     rgba(113,186,250,0.1);
        --hp-tag-legal-color:    #34d399;
        --hp-tag-legal-bg:       rgba(52,211,153,0.1);
        --hp-check:              #34d399;
    }
}

/* ─── Keyframe Animations ─────────────────────────────── */

@keyframes hp-gradient-shift {
    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }
}

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

@keyframes hp-fade-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0);     }
}

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

@keyframes hp-float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg);  }
    33%       { transform: translateY(-20px) rotate(4deg);  }
    66%       { transform: translateY(-9px) rotate(-3deg); }
}

@keyframes hp-particle-rise {
    0%   { transform: translateY(0) scale(1);    opacity: 1;   }
    80%  { opacity: 0.6; }
    100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}

@keyframes hp-scroll-bounce {
    0%, 100% { transform: translateY(0);  opacity: 0.9; }
    50%       { transform: translateY(8px); opacity: 0.4; }
}

@keyframes hp-ring-pulse {
    0%, 100% { transform: translate(-50%,-50%) scale(0.94); opacity: 0.7; }
    50%       { transform: translate(-50%,-50%) scale(1);    opacity: 1;   }
}

@keyframes hp-glow-pulse {
    0%, 100% { box-shadow: 0 0 16px var(--hp-glow); }
    50%       { box-shadow: 0 0 56px var(--hp-glow), 0 0 100px var(--hp-glow); }
}

@keyframes hp-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ─── Hero immediate animations ──────────────────────── */

.hp-hero-anim {
    opacity: 0;
    animation: hp-fade-up 0.8s cubic-bezier(.4,0,.2,1) forwards;
}

.hp-hero-anim--badge {
    animation-name: hp-fade-down;
    animation-duration: 0.7s;
    animation-delay: 0.1s;
}

.hp-hero-anim--d1 { animation-delay: 0.3s; }
.hp-hero-anim--d2 { animation-delay: 0.5s; }
.hp-hero-anim--d3 { animation-delay: 0.7s; }
.hp-hero-anim--d4 { animation-delay: 0.9s; }
.hp-hero-anim--d5 { animation-delay: 1.1s; }

/* ─── Scroll-triggered animations ────────────────────── */

.hp-anim {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1),
                transform 0.7s cubic-bezier(.4,0,.2,1);
}

.hp-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hp-anim--delay-1 { transition-delay: 0.1s; }
.hp-anim--delay-2 { transition-delay: 0.22s; }
.hp-anim--delay-3 { transition-delay: 0.34s; }
.hp-anim--delay-4 { transition-delay: 0.46s; }

/* ─── Shared Section Styles ───────────────────────────── */

.hp-section {
    padding: 5.5rem 0;
}

.hp-section__head {
    text-align: center;
    margin-bottom: 3.5rem;
}

.hp-section__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    color: var(--hp-section-tag);
    background-color: var(--hp-section-tag-bg);
}

.hp-section__tag--legal {
    color: var(--hp-tag-legal-color);
    background-color: var(--hp-tag-legal-bg);
}

.hp-section__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--site-text);
    margin-bottom: 0.9rem;
    line-height: 1.25;
}

.hp-section__subtitle {
    font-size: 1.05rem;
    color: var(--site-text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.75;
}

.hp-section__desc {
    font-size: 1.05rem;
    color: var(--site-text-muted);
    line-height: 1.85;
    margin-bottom: 2rem;
}

/* ══════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════ */

.hp-hero {
    position: relative;
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--hp-hero-bg-1) 0%,
        var(--hp-hero-bg-2) 35%,
        var(--hp-hero-bg-3) 65%,
        var(--hp-hero-bg-4) 100%
    );
    background-size: 400% 400%;
    animation: hp-gradient-shift 20s ease infinite;
}

/* Dot-grid mesh overlay */
.hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, var(--hp-particle) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    opacity: 0.6;
}

/* Large blurred orbs */
.hp-hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hp-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
}

.hp-hero__orb--1 {
    width: 480px;
    height: 480px;
    top: -12%;
    right: -8%;
    background: radial-gradient(circle, var(--hp-particle) 0%, transparent 70%);
    animation: hp-float-slow 16s ease-in-out infinite;
}

.hp-hero__orb--2 {
    width: 340px;
    height: 340px;
    bottom: 2%;
    left: 5%;
    background: radial-gradient(circle, var(--hp-particle) 0%, transparent 70%);
    animation: hp-float-slow 20s ease-in-out infinite reverse;
}

.hp-hero__orb--3 {
    width: 220px;
    height: 220px;
    top: 38%;
    left: 42%;
    background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 70%);
    animation: hp-float 12s ease-in-out infinite;
}

.hp-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 4rem 1rem 3.5rem;
}

/* Badge */
.hp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.3rem;
    border-radius: 2rem;
    border: 1px solid var(--hp-badge-border);
    background-color: var(--hp-badge-bg);
    color: var(--hp-badge-text);
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Main title */
.hp-hero__title {
    font-size: clamp(3.2rem, 9vw, 6rem);
    font-weight: 900;
    color: var(--hp-hero-text);
    line-height: 1.08;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
}

/* "حق" — shimmer gradient text */
.hp-hero__title-highlight {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--hp-badge-text) 0%,
        #ffffff 45%,
        var(--hp-badge-text) 85%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hp-shimmer 4s linear infinite;
}

.hp-hero__title-rest {
    display: inline-block;
    color: var(--hp-hero-text);
}

/* Subtitle */
.hp-hero__subtitle {
    font-size: clamp(1.15rem, 3vw, 1.65rem);
    font-weight: 500;
    color: var(--hp-hero-muted);
    margin-bottom: 1.1rem;
    letter-spacing: 0.01em;
}

/* Description */
.hp-hero__desc {
    font-size: 1.05rem;
    color: var(--hp-hero-muted);
    max-width: 620px;
    margin: 0 auto 2.75rem;
    line-height: 1.85;
}

/* Buttons group */
.hp-hero__btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

/* Scroll-down hint */
.hp-hero__scroll-hint {
    color: var(--hp-hero-muted);
    font-size: 1.15rem;
    animation: hp-scroll-bounce 2.2s ease-in-out infinite;
}

/* ─── Hero Buttons ────────────────────────────────────── */

.hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2.1rem;
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}

.hp-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.35s ease;
}

.hp-btn:hover::after {
    background: rgba(255,255,255,0.1);
}

.hp-btn--primary {
    background-color: var(--hp-btn-primary-bg);
    color: var(--hp-btn-primary-text);
    box-shadow: 0 4px 22px rgba(245,158,11,0.38);
}

.hp-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(245,158,11,0.55);
    color: var(--hp-btn-primary-text);
}

.hp-btn--outline {
    background: rgba(255,255,255,0.08);
    border: 2px solid var(--hp-btn-outline-border);
    color: var(--hp-btn-outline-text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hp-btn--outline:hover {
    background: rgba(255,255,255,0.17);
    transform: translateY(-3px);
    color: var(--hp-btn-outline-text);
    border-color: rgba(255,255,255,0.82);
}

/* ─── JS Particles ────────────────────────────────────── */

.hp-particle {
    position: absolute;
    border-radius: 50%;
    background-color: var(--hp-particle);
    animation: hp-particle-rise linear infinite;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   FEATURES SECTION
   ══════════════════════════════════════════════════════ */

.hp-features {
    background-color: var(--site-bg);
}

/* Feature Card */
.hp-card {
    background-color: var(--site-card-bg);
    border-radius: 1.25rem;
    padding: 1.75rem 1.6rem;
    height: 100%;
    border: 1.5px solid var(--site-border);
    box-shadow: var(--hp-card-shadow);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                box-shadow 0.35s cubic-bezier(.4,0,.2,1),
                border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle tinted glow on hover */
.hp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 50%,
        var(--hp-icon-1-bg) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.hp-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--hp-card-shadow-hov);
    border-color: var(--hp-card-border-hov);
}

.hp-card:hover::before {
    opacity: 1;
}

/* Icon circle */
.hp-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.hp-card:hover .hp-card__icon {
    transform: scale(1.12) rotate(-6deg);
}

.hp-card__icon--1 { color: var(--hp-icon-1-color); background-color: var(--hp-icon-1-bg); }
.hp-card__icon--2 { color: var(--hp-icon-2-color); background-color: var(--hp-icon-2-bg); }
.hp-card__icon--3 { color: var(--hp-icon-3-color); background-color: var(--hp-icon-3-bg); }
.hp-card__icon--4 { color: var(--hp-icon-4-color); background-color: var(--hp-icon-4-bg); }
.hp-card__icon--5 { color: var(--hp-icon-5-color); background-color: var(--hp-icon-5-bg); }
.hp-card__icon--6 { color: var(--hp-icon-6-color); background-color: var(--hp-icon-6-bg); }

.hp-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--site-text);
    margin-bottom: 0.55rem;
    position: relative;
    z-index: 1;
}

.hp-card__desc {
    font-size: 0.88rem;
    color: var(--site-text-muted);
    line-height: 1.72;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════
   LEGAL SHOWCASE SECTION
   ══════════════════════════════════════════════════════ */

.hp-legal {
    background-color: var(--hp-legal-bg);
    border-top: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}

.hp-legal-card {
    background-color: var(--site-card-bg);
    border: 1.5px solid var(--site-border);
    border-radius: 1.5rem;
    padding: 2.25rem 1.85rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1),
                box-shadow 0.4s cubic-bezier(.4,0,.2,1),
                border-color 0.3s ease;
    box-shadow: var(--hp-card-shadow);
}

.hp-legal-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--hp-card-shadow-hov);
    border-color: var(--hp-card-border-hov);
}

/* Featured centre card */
.hp-legal-card--featured {
    background: linear-gradient(
        148deg,
        var(--hp-legal-featured-from),
        var(--hp-legal-featured-to)
    );
    border-color: transparent;
    transform: translateY(-14px);
    box-shadow: 0 28px 72px var(--hp-glow);
}

.hp-legal-card--featured:hover {
    transform: translateY(-22px);
    box-shadow: 0 36px 90px var(--hp-glow);
    border-color: transparent;
}

.hp-legal-card--featured .hp-legal-card__num,
.hp-legal-card--featured .hp-legal-card__title,
.hp-legal-card--featured .hp-legal-card__desc {
    color: rgba(255,255,255,0.92);
}

.hp-legal-card--featured .hp-legal-card__icon {
    color: #ffffff;
    background-color: rgba(255,255,255,0.2);
}

.hp-legal-card__num {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--site-accent);
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.hp-legal-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--hp-icon-1-color);
    background-color: var(--hp-icon-1-bg);
    margin-bottom: 1.25rem;
    transition: transform 0.3s ease;
}

.hp-legal-card:hover .hp-legal-card__icon {
    transform: scale(1.1);
}

.hp-legal-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--site-text);
    margin-bottom: 0.75rem;
}

.hp-legal-card__desc {
    font-size: 0.9rem;
    color: var(--site-text-muted);
    line-height: 1.78;
}

/* ══════════════════════════════════════════════════════
   AI CAPABILITIES SECTION
   ══════════════════════════════════════════════════════ */

.hp-capabilities {
    background-color: var(--site-card-bg);
    border-top: 1px solid var(--site-border);
}

/* Capability card — shares icon styles with hp-card */
.hp-cap-card {
    background-color: var(--site-bg);
    border-radius: 1.25rem;
    padding: 1.75rem 1.6rem;
    height: 100%;
    border: 1.5px solid var(--site-border);
    box-shadow: var(--hp-card-shadow);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                box-shadow 0.35s cubic-bezier(.4,0,.2,1),
                border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

.hp-cap-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--hp-card-shadow-hov);
    border-color: var(--hp-card-border-hov);
}

/* Featured capability card */
.hp-cap-card--featured {
    background: linear-gradient(
        148deg,
        var(--hp-legal-featured-from),
        var(--hp-legal-featured-to)
    );
    border-color: transparent;
    box-shadow: 0 20px 56px var(--hp-glow);
}

.hp-cap-card--featured:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 72px var(--hp-glow);
    border-color: transparent;
}

.hp-cap-card--featured .hp-cap-card__title,
.hp-cap-card--featured .hp-cap-card__desc {
    color: rgba(255,255,255,0.92);
}

/* Reuse .hp-card__icon for the icon circles */
.hp-cap-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 1.2rem;
    transition: transform 0.3s ease;
}

.hp-cap-card:hover .hp-cap-card__icon {
    transform: scale(1.12) rotate(-6deg);
}

.hp-cap-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--site-text);
    margin-bottom: 0.55rem;
}

.hp-cap-card__desc {
    font-size: 0.88rem;
    color: var(--site-text-muted);
    line-height: 1.72;
}

/* ══════════════════════════════════════════════════════
   SECURITY VISUAL SECTION
   ══════════════════════════════════════════════════════ */

.hp-security {
    background-color: var(--site-bg);
}

/* Animated concentric rings */
.hp-security__visual {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto 1.5rem;
}

.hp-security__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border-style: solid;
    transform: translate(-50%, -50%);
}

.hp-security__ring--1 {
    width: 260px;
    height: 260px;
    border-width: 1.5px;
    border-color: var(--hp-ring-1);
    animation: hp-ring-pulse 3.6s ease-in-out infinite;
}

.hp-security__ring--2 {
    width: 190px;
    height: 190px;
    border-width: 2px;
    border-color: var(--hp-ring-1);
    animation: hp-ring-pulse 3.6s ease-in-out infinite 0.6s;
}

.hp-security__ring--3 {
    width: 126px;
    height: 126px;
    border-width: 2.5px;
    border-color: var(--site-accent);
    animation: hp-ring-pulse 3s ease-in-out infinite 1.2s,
               hp-glow-pulse 4s ease-in-out infinite;
}

.hp-security__icon-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    color: var(--site-accent);
    background-color: var(--site-card-bg);
    border: 2.5px solid var(--site-accent);
    box-shadow: 0 0 28px var(--hp-glow);
    animation: hp-float 6s ease-in-out infinite;
}

.hp-security__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.hp-security__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--site-text);
    font-size: 1rem;
    font-weight: 500;
}

.hp-security__list li i {
    color: var(--hp-check);
    font-size: 0.8rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--hp-tag-legal-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════
   STATS SECTION
   ══════════════════════════════════════════════════════ */

.hp-stats {
    padding: 4rem 0;
    background-color: var(--site-card-bg);
    border-top: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}

.hp-stat {
    text-align: center;
    padding: 1.75rem 1rem;
    border-radius: 1.1rem;
    background-color: var(--hp-stat-bg);
    border: 1px solid var(--hp-stat-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hp-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px var(--hp-glow);
    border-color: var(--site-accent);
}

.hp-stat__icon {
    font-size: 2.4rem;
    color: var(--site-accent);
    display: block;
    margin-bottom: 0.8rem;
    animation: hp-float 6s ease-in-out infinite;
}

/* Stagger the floating icons */
.hp-stat:nth-child(2) .hp-stat__icon { animation-delay: 1.5s; }
.hp-stat:nth-child(3) .hp-stat__icon { animation-delay: 3s;   }
.hp-stat:nth-child(4) .hp-stat__icon { animation-delay: 4.5s; }

.hp-stat__label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--site-text-muted);
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════ */

.hp-cta {
    padding: 5.5rem 0;
    background-color: var(--site-bg);
}

.hp-cta__box {
    background: linear-gradient(135deg, var(--hp-cta-from), var(--hp-cta-to));
    border-radius: 2rem;
    padding: 4.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 28px 72px var(--hp-glow);
}

/* Decorative orbs inside CTA */
.hp-cta__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hp-cta__orb--1 {
    width: 320px;
    height: 320px;
    top: -100px;
    right: -80px;
    background: radial-gradient(circle, var(--hp-cta-orb) 0%, transparent 65%);
    animation: hp-float-slow 14s ease-in-out infinite;
}

.hp-cta__orb--2 {
    width: 220px;
    height: 220px;
    bottom: -70px;
    left: -60px;
    background: radial-gradient(circle, var(--hp-cta-orb) 0%, transparent 65%);
    animation: hp-float-slow 18s ease-in-out infinite reverse;
}

.hp-cta__title {
    font-size: clamp(1.7rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 1;
}

.hp-cta__subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.72);
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.hp-cta__btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* CTA primary button (white on gradient) */
.hp-btn--cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 2.2rem;
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    background-color: #ffffff;
    color: var(--hp-cta-from);
    box-shadow: 0 4px 22px rgba(0,0,0,0.22);
}

.hp-btn--cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 38px rgba(0,0,0,0.32);
    color: var(--hp-cta-from);
}

/* CTA outline button */
.hp-btn--cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 2.2rem;
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.5);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hp-btn--cta-outline:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
    color: #ffffff;
    border-color: rgba(255,255,255,0.8);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .hp-hero__title { font-size: clamp(2.6rem, 7.5vw, 4rem); }
    .hp-legal-card--featured { transform: none; }
    .hp-security__visual { width: 200px; height: 200px; }
    .hp-security__ring--1 { width: 200px; height: 200px; }
    .hp-security__ring--2 { width: 148px; height: 148px; }
    .hp-security__ring--3 { width: 98px;  height: 98px; }
    .hp-security__icon-wrap { width: 60px; height: 60px; font-size: 1.5rem; }
}

@media (max-width: 767px) {
    .hp-hero { min-height: calc(100svh - 60px); }
    .hp-section { padding: 3.5rem 0; }
    .hp-cta__box { padding: 2.75rem 1.5rem; }
    .hp-hero__desc { font-size: 0.95rem; }
    .hp-legal-card--featured { transform: none; }
}

@media (max-width: 480px) {
    .hp-hero__btns,
    .hp-cta__btns { flex-direction: column; align-items: center; }

    .hp-btn,
    .hp-btn--cta-primary,
    .hp-btn--cta-outline {
        width: 100%;
        max-width: 290px;
        justify-content: center;
    }
}