/* ── CSS VARIABLES ── */
:root {
    --font-main: 'Afacad', sans-serif;

    /* Brand Colors */
    --color-indigo-50:  #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-purple-500: #8b5cf6;
    --color-purple-600: #7c3aed;
    --color-pink-500:   #ec4899;
    --color-gray-50:    #f9fafb;
    --color-gray-100:   #f3f4f6;
    --color-gray-500:   #6b7280;
    --color-gray-700:   #374151;
    --color-gray-800:   #1f2937;
    --color-gray-900:   #111827;

    

    /* Gradients */
    --gradient-primary:       linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    --gradient-primary-hover: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    --gradient-announce:      linear-gradient(90deg, #ede9fe, #fce7f3, #fef9c3);
    --gradient-hero-text:     linear-gradient(90deg, #4f46e5, #9333ea);

    /* Glass */
    --glass-bg:     rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);

    /* Spacing */
    --section-px: clamp(1rem, 4vw, 2.5rem);
    --max-width: 1280px;

    /* Transitions */
    --transition-fast:   all 0.2s ease;
    --transition-base:   all 0.3s ease;
    --transition-smooth: all 0.4s ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    color: var(--color-gray-800);
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── TYPOGRAPHY SCALE ── */
.text-display   { font-size: clamp(2.6rem, 6vw, 5rem);  font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; }
.text-heading   { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; }
.text-subheading{ font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 600; }
.text-body-lg   { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500; line-height: 1.7; }
.text-body      { font-size: 1rem; font-weight: 400; line-height: 1.65; }
.text-small     { font-size: 0.875rem; font-weight: 500; }
.text-xs        { font-size: 0.75rem; font-weight: 600; }
.text-gradient  { background: var(--gradient-hero-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── GLASS PANEL ── */
.glass-panel {
    background:            var(--glass-bg);
    backdrop-filter:       blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:                1px solid var(--glass-border);
    box-shadow:            var(--glass-shadow);
}

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition-base);
    text-decoration: none;
}
.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 6px 20px -4px rgba(99,102,241,0.35);
}
.btn-primary:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -5px rgba(99,102,241,0.45);
}
.btn-outline {
    background: rgba(255,255,255,0.65);
    color: var(--color-indigo-600);
    border: 2px solid var(--color-indigo-200);
    backdrop-filter: blur(8px);
}
.btn-outline:hover {
    background: #fff;
    border-color: var(--color-indigo-500);
    transform: translateY(-2px);
}
.btn-sm  { padding: 8px 20px;  border-radius: 50px; font-size: 0.875rem; }
.btn-md  { padding: 11px 28px; border-radius: 14px; font-size: 1rem;     }
.btn-lg  { padding: 14px 36px; border-radius: 14px; font-size: 1.1rem;   }
.btn-pill{ border-radius: 50px !important; }

/* ── FORM INPUTS ── */
.input-glass {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.8);
    width: 100%;
    border-radius: 14px;
    padding: 20px 16px 8px;
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--color-gray-800);
    outline: none;
    transition: var(--transition-base);
}
.input-glass::placeholder { color: transparent; }
.input-glass:focus {
    background: rgba(255,255,255,0.92);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
    border-color: var(--color-indigo-200);
}
.input-group { position: relative; }
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    color: var(--color-gray-500);
    font-size: 1rem;
    font-weight: 600;
    pointer-events: none;
    transition: all 0.25s ease;
}
.input-glass:focus ~ .input-label,
.input-glass:not(:placeholder-shown) ~ .input-label {
    top: 6px;
    font-size: 0.7rem;
    color: var(--color-indigo-500);
}
textarea.input-glass { resize: none; }

/* ── FLOATING BADGE ANIMATION ── */
@keyframes pc-floatY {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}
@keyframes pc-orbPulse {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%       { transform: scale(1.15); opacity: 0.85; }
}
@keyframes pc-fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pc-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes pc-pillIn {
    from { opacity: 0; transform: translateY(16px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── ANIMATION UTILITIES ── */
.anim-fade-up          { opacity:0; animation: pc-fadeInUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-delay-100        { animation-delay: 100ms; }
.anim-delay-200        { animation-delay: 200ms; }
.anim-delay-300        { animation-delay: 300ms; }
.anim-delay-400        { animation-delay: 400ms; }
.anim-delay-500        { animation-delay: 500ms; }
.anim-delay-600        { animation-delay: 600ms; }
.anim-delay-700        { animation-delay: 700ms; }
.anim-delay-800        { animation-delay: 800ms; }
.anim-delay-900        { animation-delay: 900ms; }

/* ── ORB ── */
.pc-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: pc-orbPulse 6s ease-in-out infinite;
}

/* ── CONTAINER ── */
.pc-container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-px);
    padding-right: var(--section-px);
}

        /* Demo Spacer to push CTA down */
        .demo-spacer { height: 50vh; display: flex; align-items: center; justify-content: center; background: var(--color-gray-50); }