/* ============================================
   landing.css — brand styles, animations
   Used by Home and Legal pages
   ============================================ */

:root {
    --brand: #7C3AED;
    --brand-light: #A78BFA;
    --brand-dark: #5B21B6;
    --mint: #059669;
    --ink: #1F1937;
}

html { scroll-behavior: smooth; }

/* Display & mono utility classes */
.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
.font-mono    { font-family: 'Geist Mono', ui-monospace, monospace; }

/* Hero mesh background */
.mesh-hero {
    background:
        radial-gradient(ellipse 80% 60% at 12% 18%, rgba(196,181,253,0.55) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 88% 32%, rgba(255,200,180,0.50) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 50% 105%, rgba(167,243,208,0.45) 0%, transparent 60%),
        linear-gradient(180deg, #FBF9F4 0%, #F4F1FB 50%, #FFF5F2 100%);
}
.mesh-cta {
    background:
        radial-gradient(ellipse 80% 70% at 0% 0%,    rgba(167,139,250,0.95) 0%, transparent 60%),
        radial-gradient(ellipse 80% 70% at 100% 100%, rgba(16,185,129,0.65) 0%, transparent 60%),
        linear-gradient(135deg, #5B21B6 0%, #4C1D95 50%, #2E1065 100%);
}
.mesh-why {
    background:
        radial-gradient(ellipse 70% 60% at 90% 10%, rgba(255,200,180,0.55) 0%, transparent 55%),
        radial-gradient(ellipse 80% 70% at 10% 90%, rgba(167,243,208,0.40) 0%, transparent 60%),
        linear-gradient(180deg, #FBF9F4 0%, #F7F3EA 100%);
}

/* Light grid backdrop */
.grid-bg-light {
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
}

/* Glow blobs */
.glow-purple-soft {
    background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.30) 0%, rgba(124, 58, 237, 0) 70%);
    filter: blur(60px);
}
.glow-mint-soft {
    background: radial-gradient(circle at 50% 50%, rgba(5, 150, 105, 0.25) 0%, rgba(5, 150, 105, 0) 70%);
    filter: blur(70px);
}
.glow-peach-soft {
    background: radial-gradient(circle at 50% 50%, rgba(255, 180, 150, 0.40) 0%, rgba(255, 180, 150, 0) 70%);
    filter: blur(70px);
}

/* Reveal-on-scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in {
    opacity: 1;
    transform: none;
}

/* Marquee */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 35s linear infinite; }

/* Live dot pulse */
@keyframes pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.5); opacity: .55; }
}
.live-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

/* Lift on hover */
.lift {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lift:hover { transform: translateY(-4px); }

/* Number tag */
.num-tag {
    font-family: 'Fraunces', serif;
    font-feature-settings: 'ss01' on, 'tnum' on;
}

/* Gradient text */
.grad-text {
    background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 50%, #059669 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.grad-text-warm {
    background: linear-gradient(135deg, #6B21D6 0%, #DB6B5C 60%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Button shine */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.btn-shine:hover::after { transform: translateX(100%); }

/* Bullet indicator */
.indicator-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--mint);
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}

/* Perforated bottom edge */
.perforated-bottom {
    -webkit-mask-image: radial-gradient(circle at 8px 100%, transparent 5px, #000 5.5px);
            mask-image: radial-gradient(circle at 8px 100%, transparent 5px, #000 5.5px);
    -webkit-mask-size: 16px 12px;
            mask-size: 16px 12px;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
    -webkit-mask-position: bottom;
            mask-position: bottom;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .live-dot, .lift, .btn-shine::after, .marquee-track { animation: none; transition: none; }
}