/* ============================================================
   theme.css  --  Paragentics.ai Design System
   ============================================================
   Shared design tokens, utility classes, and component styles
   used across all marketing pages. Works in tandem with the
   Tailwind CDN (<script src="https://cdn.tailwindcss.com">).

   Sections:
     1. Design Tokens (CSS custom properties)
     2. Base / Reset
     3. Typography
     4. Layout (container)
     5. Color Utilities
     6. Button Components
     7. Miscellaneous Utilities
     8. Animation Keyframes & Helpers
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   HSL triplets without the hsl() wrapper so they can be
   combined with Tailwind's opacity syntax, e.g.
     bg-[hsl(var(--glow-teal)/0.1)]
   ------------------------------------------------------------ */
:root {
    /* --- Shadcn/Radix-compatible base palette --- */
    --background: 220 20% 97%;
    --foreground: 222 47% 11%;
    --card: 210 40% 8%;
    --card-foreground: 210 20% 90%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 222 47% 11%;
    --primary-foreground: 210 40% 98%;
    --secondary: 220 14% 92%;
    --secondary-foreground: 222 47% 11%;
    --muted: 220 14% 92%;
    --muted-foreground: 210 15% 55%;
    --accent: 170 70% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 210 20% 18%;
    --input: 220 13% 87%;
    --ring: 170 70% 50%;
    --radius: .75rem;

    /* --- Hero / dark-mode surface palette --- */
    --hero-bg: 220 30% 5%;
    --hero-foreground: 210 20% 93%;
    --hero-muted: 210 15% 55%;
    --surface-dark: 210 30% 7%;
    --surface-card: 210 25% 10%;

    /* --- Accent glow colors (used for borders, badges, icons) --- */
    --glow-teal: 170 70% 50%;
    --glow-magenta: 310 80% 60%;
    --glow-coral: 0 78% 69%;
    --glow-cyan: 195 85% 50%;
    --glow-purple: 270 70% 60%;
    --glow-turquoise: 175 72% 45%;

    /* --- Borders --- */
    --border-subtle: 210 20% 16%;

    /* --- Semantic aliases (consumed by older components) --- */
    --accent-primary: #26d8bb;
    --accent-primary: hsl(var(--glow-teal));
    --accent-gradient: linear-gradient(135deg, #ea47cf, #26d8bb);
    --accent-gradient: linear-gradient(135deg, hsl(var(--glow-magenta)), hsl(var(--glow-teal)));

    /* --- Spacing scale --- */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    /* --- Text shorthand --- */
    --text-primary: #e9edf0;
    --text-primary: hsl(var(--hero-foreground));
}


/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
* { border-color: #242d37; border-color: hsl(var(--border)); }

body {
    background-color: #080b10;
    background-color: hsl(var(--hero-bg));
    color: #e9edf0;
    color: hsl(var(--hero-foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, system-ui, sans-serif;
}


/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: Inter, system-ui, sans-serif;
}

@supports (text-wrap: balance) {
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    p { text-wrap: pretty; }
}


/* ------------------------------------------------------------
   4. LAYOUT
   Container mirrors Tailwind's container but with a custom
   1400px max-width for wider marketing layouts.
   ------------------------------------------------------------ */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem;
}
@media (min-width: 1400px) {
    .container { max-width: 1400px; }
}


/* ------------------------------------------------------------
   5. COLOR UTILITIES
   Each pair provides text and background variants for every
   accent color in the token set above.
   ------------------------------------------------------------ */

/* Hero text and surfaces */
.text-hero { color: #e9edf0; color: hsl(var(--hero-foreground)); }
.text-hero-muted { color: #7b8c9d; color: hsl(var(--hero-muted)); }
.bg-hero { background-color: #080b10; background-color: hsl(var(--hero-bg)); }
.bg-surface-dark { background-color: #0c1117; background-color: hsl(var(--surface-dark)); }
.bg-surface-card { background-color: #13191f; background-color: hsl(var(--surface-card)); }

/* Teal (primary brand accent) */
.text-accent-brand { color: #26d8bb; color: hsl(var(--glow-teal)); }
.bg-accent-brand { background-color: #26d8bb; background-color: hsl(var(--glow-teal)); }

/* Coral (Briefly / email agent accent) */
.text-accent-coral { color: #ed7272; color: hsl(var(--glow-coral)); }
.bg-accent-coral { background-color: #ed7272; background-color: hsl(var(--glow-coral)); }

/* Cyan (AiMe / personal rep accent) */
.text-accent-cyan { color: #13b5eb; color: hsl(var(--glow-cyan)); }
.bg-accent-cyan { background-color: #13b5eb; background-color: hsl(var(--glow-cyan)); }

/* Purple (Directly / website agent accent) */
.text-accent-purple { color: #9851e0; color: hsl(var(--glow-purple)); }
.bg-accent-purple { background-color: #9851e0; background-color: hsl(var(--glow-purple)); }

/* Magenta */
.text-accent-magenta { color: #ea47cf; color: hsl(var(--glow-magenta)); }
.bg-accent-magenta { background-color: #ea47cf; background-color: hsl(var(--glow-magenta)); }

/* Turquoise (homepage / platform accent) */
.text-accent-turquoise { color: #20c5b7; color: hsl(var(--glow-turquoise)); }
.bg-accent-turquoise { background-color: #20c5b7; background-color: hsl(var(--glow-turquoise)); }

/* --- Tinted background utilities (rgba fallbacks for hsl/alpha) --- */
.bg-hero-85 { background-color: rgba(8, 11, 16, 0.85); }
.bg-turquoise-full { background-color: #20c5b7; }
.bg-turquoise-10 { background-color: rgba(32, 197, 183, 0.1); }
.bg-turquoise-06 { background-color: rgba(32, 197, 183, 0.06); }
.bg-turquoise-05 { background-color: rgba(32, 197, 183, 0.05); }
.bg-teal-10 { background-color: rgba(38, 216, 187, 0.1); }
.bg-teal-06 { background-color: rgba(38, 216, 187, 0.06); }
.bg-magenta-04 { background-color: rgba(234, 71, 207, 0.04); }
.bg-coral-15 { background-color: rgba(237, 114, 114, 0.15); }
.bg-coral-10 { background-color: rgba(237, 114, 114, 0.1); }
.bg-coral-06 { background-color: rgba(237, 114, 114, 0.06); }
.bg-cyan-10 { background-color: rgba(19, 181, 235, 0.1); }
.bg-cyan-06 { background-color: rgba(19, 181, 235, 0.06); }
.bg-purple-full { background-color: #9851e0; }
.bg-purple-10 { background-color: rgba(152, 81, 224, 0.1); }
.bg-purple-06 { background-color: rgba(152, 81, 224, 0.06); }


/* ------------------------------------------------------------
   6. BUTTON COMPONENTS
   All buttons share inline-flex centering, gap, rounded
   corners, and a scale-down on :active for tactile feedback.
   ------------------------------------------------------------ */

/* Turquoise CTA -- used on the homepage and platform pages */
.btn-turquoise {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-weight: 600;
    transition: all 0.15s;
    text-decoration: none;
    background-color: #0f9e8e;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow:
        0 10px 15px -3px rgba(15, 158, 142, 0.3),
        0  4px  6px -4px rgba(15, 158, 142, 0.3);
    border-radius: 0.5rem;
}
.btn-turquoise:hover  { filter: brightness(1.1); }
.btn-turquoise:active { transform: scale(0.97); }

/* Teal accent CTA -- used on agent sub-pages */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.15s;
    text-decoration: none;
    background-color: #0d9488;
    color: #fff;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    box-shadow:
        0 10px 15px -3px rgba(13, 148, 136, 0.3),
        0  4px  6px -4px rgba(13, 148, 136, 0.3);
    box-shadow:
        0 10px 15px -3px var(--page-accent-glow, rgba(13, 148, 136, 0.3)),
        0  4px  6px -4px var(--page-accent-glow, rgba(13, 148, 136, 0.3));
}
.btn-accent:hover  { filter: brightness(1.1); }
.btn-accent:active { transform: scale(0.97); }

/* Outline / ghost button */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
    border: 1px solid #202830;
    border: 1px solid hsl(var(--border-subtle));
    color: #e9edf0;
    color: hsl(var(--hero-foreground));
    background: transparent;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1rem;
}
.btn-outline:hover  { background-color: rgba(255,255,255,0.05); }
.btn-outline:active { transform: scale(0.97); }

/* Base button -- shared foundation for composing custom buttons */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
    cursor: pointer;
}
.btn-base:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #080b10, 0 0 0 4px #26d8bb;
    box-shadow: 0 0 0 2px hsl(var(--hero-bg)), 0 0 0 4px hsl(var(--ring));
}


/* ------------------------------------------------------------
   7. MISCELLANEOUS UTILITIES
   ------------------------------------------------------------ */

/* Gradient text (magenta -> teal) for emphasis headings */
.text-gradient {
    background: linear-gradient(135deg, #ea47cf, #26d8bb);
    background: linear-gradient(135deg, hsl(var(--glow-magenta)), hsl(var(--glow-teal)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Teal outer glow for cards / containers */
.glow-teal { box-shadow: 0 0 80px 20px rgba(38, 216, 187, 0.08); box-shadow: 0 0 80px 20px hsl(var(--glow-teal) / .08); }

/* Subtle border utility */
.border-subtle { border-color: #202830; border-color: hsl(var(--border-subtle)); }

/* --- Tinted border utilities (rgba fallbacks for hsl/alpha) --- */
.border-turquoise-40 { border-color: rgba(32, 197, 183, 0.4); }
.border-turquoise-30 { border-color: rgba(32, 197, 183, 0.3); }
.border-teal-40 { border-color: rgba(38, 216, 187, 0.4); }
.border-teal-30 { border-color: rgba(38, 216, 187, 0.3); }
.border-coral-40 { border-color: rgba(237, 114, 114, 0.4); }
.border-coral-30 { border-color: rgba(237, 114, 114, 0.3); }
.border-cyan-40 { border-color: rgba(19, 181, 235, 0.4); }
.border-cyan-30 { border-color: rgba(19, 181, 235, 0.3); }
.border-purple-40 { border-color: rgba(152, 81, 224, 0.4); }
.border-purple-30 { border-color: rgba(152, 81, 224, 0.3); }

/* --- Hover border utilities (companion to tinted borders above) --- */
.hover-border-turquoise-40:hover { border-color: rgba(32, 197, 183, 0.4); }
.hover-border-teal-40:hover { border-color: rgba(38, 216, 187, 0.4); }
.hover-border-coral-40:hover { border-color: rgba(237, 114, 114, 0.4); }
.hover-border-cyan-40:hover { border-color: rgba(19, 181, 235, 0.4); }
.hover-border-purple-40:hover { border-color: rgba(152, 81, 224, 0.4); }

/* --- Gradient stop utilities (from/to fallbacks) --- */
.from-teal { --tw-gradient-from: #26d8bb; }
.to-magenta { --tw-gradient-to: #ea47cf; }
.from-surface-12 { --tw-gradient-from: #171e27; }
.to-surface-8 { --tw-gradient-to: #111720; }

/* ------------------------------------------------------------
   NAVIGATION
   Top bar (.site-nav): site-wide links, h-12, always present.
   ------------------------------------------------------------ */

/* Shared frosted-glass backdrop for both bars */
.nav-blur {
    background-color: rgba(8, 11, 16, 0.85);
    background-color: hsl(var(--hero-bg) / .85);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

/* --- Site nav (top bar) --- */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 3rem;
    border-bottom: 1px solid #202830;
    border-bottom-color: hsl(var(--border-subtle));
}

.site-nav-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1.5rem;
}

.site-nav-links { justify-content: center; }

/* --- Desktop nav: enlarged sizing --- */
@media (min-width: 768px) {
    .site-nav {
        height: 4.5rem !important;
    }

    .site-nav-links {
        gap: 1.75rem;
    }

    .site-nav-links a {
        font-size: 1.125rem;
    }

    .site-nav-inner > a:first-child img {
        height: 2.75rem;
        width: auto;
    }

    .site-nav-inner > a:first-child > span {
        font-size: 1.5rem;
    }

    .site-nav-right .btn-accent {
        height: 2.75rem !important;
        padding: 0 1.5rem !important;
        font-size: 1rem !important;
    }
}

.site-nav-right {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- Mobile site-nav drawer --- */
@media (max-width: 767px) {
    .site-nav-inner { position: relative; }

    .site-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.75rem;
        background: rgba(8, 11, 16, 0.98);
        background: hsl(var(--hero-bg) / 0.98);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        border-bottom: 1px solid #202830;
        border-bottom: 1px solid hsl(var(--border-subtle));
        z-index: 40;
    }

    .site-nav-links.active { display: flex !important; }

    .site-nav-toggle.active span:nth-child(1) {
        transform: translateY(4px) rotate(45deg);
    }
    .site-nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .site-nav-toggle.active span:nth-child(3) {
        transform: translateY(-4px) rotate(-45deg);
    }

    /* shrink the nav CTA on mobile and swap its label to "Free Trial"
       so the brand text isn't pushed off-screen. !important beats the
       inline sizing applied on every page's nav markup. font-size:0 on
       the anchor hides the original "Start Your Free Trial" text, and
       the ::before injects the shorter label at a readable size. */
    .site-nav-right .btn-accent {
        height: 1.375rem !important;
        padding: 0 0.5rem !important;
        font-size: 0 !important;
        line-height: 1 !important;
        gap: 0 !important;
        border-radius: 0.375rem !important;
        box-shadow: none !important;
    }
    .site-nav-right .btn-accent::before {
        content: "Start Free Trial";
        font-size: 0.625rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.01em;
    }
}


/* ------------------------------------------------------------
   8. ANIMATION KEYFRAMES & HELPERS
   Used for on-scroll reveal effects. The .animate-reveal-*
   classes trigger immediately; stagger with .delay-100 etc.
   ------------------------------------------------------------ */
@keyframes reveal-up {
    0%  { opacity: 0; transform: translateY(18px); filter: blur(4px); }
    to  { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes reveal-scale {
    0%  { opacity: 0; transform: scale(.97); filter: blur(4px); }
    to  { opacity: 1; transform: scale(1);   filter: blur(0); }
}

.animate-reveal-up    { animation: reveal-up    .7s cubic-bezier(.16,1,.3,1) both; }
.animate-reveal-scale { animation: reveal-scale .7s cubic-bezier(.16,1,.3,1) both; }

/* Staggered delay helpers */
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }


/* ------------------------------------------------------------
   9. CARD CONTENT CENTERING
   Center text, icons, and SVGs inside all section-level cards.
   Horizontal flex-row cards (icon-left + text-right) are
   excluded to preserve their side-by-side layout.
   ------------------------------------------------------------ */

/* Center text in all section cards */
section .bg-surface-card {
    text-align: center;
}

/* Preserve left alignment for horizontal flex-row cards */
section .bg-surface-card.flex:not(.flex-col) {
    text-align: left;
}

/* Make icon wrapper divs inline-flex so parent text-align centers them */
section .bg-surface-card:not(.flex) > .flex {
    display: inline-flex;
}

/* Center standalone SVGs (differentiator / use-case cards) */
section .bg-surface-card:not(.flex) > svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center SVGs inside flex-column cards (e.g. testimonials) */
section .bg-surface-card.flex-col > svg {
    align-self: center;
}


/* ------------------------------------------------------------
   10. ABOUT PAGE — TIMELINE
   Vertical spine with alternating left/right milestone cards.
   Mobile: spine hugs the left edge, all cards flow right.
   ------------------------------------------------------------ */
.about-timeline {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 0;
}

.about-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: hsl(var(--border-subtle));
    transform: translateX(-50%);
}

.about-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 3rem;
}
.about-timeline-item:last-child { margin-bottom: 0; }

.about-timeline-dot {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: hsl(var(--glow-teal));
    border: 3px solid hsl(var(--hero-bg));
    transform: translateX(-50%);
    z-index: 2;
}

.about-timeline-card {
    width: calc(50% - 2.5rem);
    background-color: hsl(var(--surface-card));
    border: 1px solid hsl(var(--border-subtle));
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.about-timeline-card:hover { border-color: rgba(38, 216, 187, 0.4); }

.about-timeline-item:nth-child(odd) .about-timeline-card { margin-right: auto; }
.about-timeline-item:nth-child(even) .about-timeline-card { margin-left: auto; }

@media (max-width: 767px) {
    .about-timeline::before { left: 1rem; transform: none; }
    .about-timeline-dot { left: 1rem; }
    .about-timeline-card { width: calc(100% - 3rem); margin-left: 2.5rem !important; margin-right: 0 !important; }
}


/* ------------------------------------------------------------
   11. ABOUT PAGE — COMPARISON TABLE
   Dark-themed table with a highlighted Paragentics Engage
   column. Horizontal-scroll wrapper on narrow viewports.
   ------------------------------------------------------------ */
.about-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.about-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.about-compare-table th,
.about-compare-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border-subtle));
    vertical-align: top;
}

.about-compare-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsl(var(--hero-muted));
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.about-compare-table thead th.engage-col {
    color: hsl(var(--glow-teal));
    border-top: 3px solid hsl(var(--glow-teal));
}

.about-compare-table tbody td {
    color: hsl(var(--hero-muted));
}

.about-compare-table tbody td:first-child {
    color: hsl(var(--hero-foreground));
    font-weight: 500;
}

.about-compare-table .engage-col {
    background-color: rgba(38, 216, 187, 0.04);
}

.about-compare-table .icon-check { color: hsl(var(--glow-teal)); }
.about-compare-table .icon-x { color: #ef4444; }
.about-compare-table .icon-warn { color: #f59e0b; }

/* Left-align cards inside about-page sections that use left-justified layouts */
#mission .bg-surface-card,
.about-timeline-card {
    text-align: left;
}


/* ------------------------------------------------------------
   12. CONTACT FORM
   Dark-themed form controls for the contact page.
   ------------------------------------------------------------ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--hero-foreground));
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-family: Inter, system-ui, sans-serif;
    color: hsl(var(--hero-foreground));
    background-color: hsl(var(--surface-dark));
    border: 1px solid hsl(var(--border-subtle));
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: hsl(var(--hero-muted));
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: hsl(var(--glow-turquoise));
    box-shadow: 0 0 0 3px hsl(var(--glow-turquoise) / 0.15);
}

.form-input.form-error,
.form-textarea.form-error,
.form-select.form-error {
    border-color: hsl(var(--destructive));
    box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.12);
}

.form-error-msg {
    font-size: 0.8125rem;
    color: hsl(var(--destructive));
    min-height: 1.25rem;
}

.form-textarea {
    min-height: 8rem;
    resize: vertical;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237b8c9d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-select option {
    background-color: hsl(var(--surface-dark));
    color: hsl(var(--hero-foreground));
}