/* ═══════════════════════════════════════════════════════════════════════
   HELPCHATLY LANDING PAGE  ·  landing.css
   Mobile-First · Fully Responsive · Professional

   TABLE OF CONTENTS
   ───────────────────────────────────────────────────────────────────────
   01  CSS Variables        (brand colors, shadows, spacing tokens)
   02  Global Reset         (box-sizing, links, font base)
   03  Shared Components    (section-label, section-title, section-subtitle)
   04  Navbar
   05  Hero Section         (headline, subtitle, CTA buttons, trust row)
   06  Chat Widget Mockup   (inside hero — right column)
   07  Floating Info Badges (appear around the widget)
   08  Stats Section        (4 stat cards below hero)
   09  Features Section     (6 feature cards grid)
   10  How It Works         (3 step cards with arrows)
   11  Pricing Section      (plan cards from database)
   12  CTA Banner Section   (above footer)
   13  Footer               (4-column grid)
   14  Animations           (keyframes for pulse, float, typing dots)
   15  Responsive Tablet    (max-width: 991px)
   16  Responsive Mobile    (max-width: 767px)
   17  Responsive Phone     (max-width: 480px)
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   01  CSS VARIABLES
   ─────────────────────────────────────────────────────────────────────
   All colors, shadows, and spacing are defined here so you can
   change the look of the entire page from one place.
───────────────────────────────────────────────────────────────────── */
:root {
    /* ── Brand colors ── */
    --brand-red:            #CC0000;          /* primary red */
    --brand-red-hover:      #a80000;          /* darker red for hover states */
    --brand-red-glow:       rgba(204,0,0,.20);/* red drop shadow / glow */
    --brand-red-tint:       rgba(204,0,0,.08);/* very light red background */
    --brand-red-border:     rgba(204,0,0,.20);/* red border */

    /* ── Dark backgrounds (navbar, hero, footer) ── */
    --bg-darkest:           #0a0a14;
    --bg-dark:              #12121e;
    --bg-dark-card:         rgba(255,255,255,.04);
    --bg-dark-border:       rgba(255,255,255,.08);
    --bg-dark-text:         rgba(255,255,255,.55);
    --bg-dark-text-muted:   rgba(255,255,255,.35);

    /* ── Light backgrounds (main content sections) ── */
    --bg-white:             #ffffff;
    --bg-light:             #f8fafc;

    /* ── Text colors ── */
    --text-heading:         #0f172a;
    --text-body:            #334155;
    --text-muted:           #64748b;

    /* ── Borders ── */
    --border-light:         #e2e8f0;

    /* ── Shadows ── */
    --shadow-card:          0 4px 24px rgba(0,0,0,.07);
    --shadow-card-hover:    0 16px 48px rgba(0,0,0,.13);
    --shadow-widget:        0 32px 80px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.07);
    --shadow-float-badge:   0 10px 36px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);

    /* ── Sizing & spacing ── */
    --radius-sm:            8px;
    --radius-md:            14px;
    --radius-lg:            20px;
    --section-gap:          96px;             /* vertical padding on each section */
}


/* ─────────────────────────────────────────────────────────────────────
   02  GLOBAL RESET
───────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-body);
    background: var(--bg-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    /* Safety net: never allow the page itself to scroll sideways. x-axis only,
       so the sticky navbar (vertical stickiness) is unaffected. */
    overflow-x: hidden;
}

/* Remove underline from ALL links across the landing page */
a {
    text-decoration: none !important;
}

img {
    max-width: 100%;
    display: block;
}


/* ─────────────────────────────────────────────────────────────────────
   03  SHARED SECTION COMPONENTS
   Used in Features, Steps, Pricing, CTA sections as section headers.
───────────────────────────────────────────────────────────────────── */

/* Small red pill label above section titles */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-red-tint);
    color: var(--brand-red);
    border: 1px solid var(--brand-red-border);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}

/* Main section heading */
.section-title {
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin-bottom: 12px;
}

/* Section sub-description */
.section-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────────────
   04  NAVBAR
   Sticky dark navbar with glassmorphism blur.
   - Desktop: Logo | Links (center) | Login + CTA buttons (right)
   - Mobile:  Logo (left) | Hamburger icon (right), links collapse
───────────────────────────────────────────────────────────────────── */
.lp-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 10, 20, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bg-dark-border);
    transition: box-shadow .3s ease;
}

/* Add deeper shadow after user scrolls down */
.lp-navbar.navbar-scrolled {
    box-shadow: 0 4px 32px rgba(0, 0, 0, .45);
}

/* Inner flex row — holds logo, links, and action buttons */
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 20px;
}

/* ── Logo ── */
.navbar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
    flex-shrink: 0;
}

.navbar-logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-red);
    box-shadow: 0 0 8px var(--brand-red);
    display: inline-block;
    flex-shrink: 0;
}

.navbar-logo-name-secondary {
    color: rgba(255,255,255,.45);
}

/* ── Center navigation links ── */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

.navbar-link {
    color: rgba(255,255,255,.60);
    font-size: 14.5px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    position: relative;
    transition: color .2s, background .2s;
}

/* Animated underline on hover */
.navbar-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--brand-red);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.navbar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
}

.navbar-link:hover::after {
    transform: scaleX(1);
}

/* Active nav link — current page indicator (set via request()->routeIs()) */
.navbar-link.is-active {
    color: #fff;
}
.navbar-link.is-active::after {
    transform: scaleX(1);
}

/* ── Right-side action buttons ── */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.navbar-btn-login {
    color: rgba(255,255,255,.65);
    font-size: 14px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,.14);
    transition: all .2s;
}

.navbar-btn-login:hover {
    color: #fff;
    border-color: rgba(255,255,255,.38);
    background: rgba(255,255,255,.06);
}

.navbar-btn-start {
    background: var(--brand-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .2s;
}

.navbar-btn-start:hover {
    background: var(--brand-red-hover);
    color: #fff;
    box-shadow: 0 4px 16px var(--brand-red-glow);
    transform: translateY(-1px);
}

/* ── Mobile hamburger toggle ── */
.navbar-mobile-toggle {
    display: none;              /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.navbar-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,.80);
    border-radius: 2px;
    transition: all .25s ease;
}

/* Hamburger → X animation when menu is open */
.navbar-mobile-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.navbar-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.navbar-mobile-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/* ─────────────────────────────────────────────────────────────────────
   05  HERO SECTION
   Full-width dark gradient section with headline + chat widget.
───────────────────────────────────────────────────────────────────── */
.lp-hero {
    background: linear-gradient(135deg, var(--bg-darkest) 0%, var(--bg-dark) 60%, var(--bg-darkest) 100%);
    padding: var(--section-gap) 0;
    position: relative;
    overflow: visible;
}

/* Red glow radial gradient behind the widget */
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 50%, rgba(204,0,0,.14) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 10% 80%, rgba(99,102,241,.05) 0%, transparent 60%);
}

/* Subtle grid pattern overlay */
.lp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* All hero content sits above the background layers */
.lp-hero > .container {
    position: relative;
    z-index: 2;
}

/* ── Left column: text content ── */
.hero-text-column {
    position: relative;
    z-index: 1;
}

/* "AI-Powered Support Platform" red pill badge */
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(204,0,0,.12);
    border: 1px solid rgba(204,0,0,.28);
    color: #fca5a5;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 20px;
    letter-spacing: .04em;
}

/* Animated red dot inside hero label */
.hero-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: pulse-dot 1.8s infinite;
}

/* Main headline */
.hero-title {
    font-size: clamp(36px, 5.5vw, 60px);
    font-weight: 900;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -.6px;
    margin-bottom: 20px;
}

/* Red highlighted words in headline */
.hero-title-highlight {
    color: var(--brand-red);
    text-shadow: 0 0 40px rgba(204,0,0,.4);
}

/* Description paragraph */
.hero-subtitle {
    font-size: 17px;
    color: rgba(255,255,255,.58);
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 480px;
}

/* "Start for Free" + "View Pricing" buttons row */
.hero-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.hero-btn-primary {
    background: var(--brand-red);
    color: #fff;
    border-radius: 10px;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .22s;
    cursor: pointer;
}

.hero-btn-primary:hover {
    background: var(--brand-red-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--brand-red-glow);
}

.hero-btn-secondary {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.82);
    border: 1.5px solid rgba(255,255,255,.16);
    border-radius: 10px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .22s;
}

.hero-btn-secondary:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
    border-color: rgba(255,255,255,.35);
}

/* "✓ No credit card" trust row below buttons */
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.42);
    font-weight: 500;
}

.hero-trust-checkmark {
    color: #22c55e;
    font-weight: 800;
    font-size: 13px;
}


/* ─────────────────────────────────────────────────────────────────────
   06  CHAT WIDGET MOCKUP  (right column inside hero)
───────────────────────────────────────────────────────────────────── */

/* Outer wrapper — provides space for floating badges */
.hero-widget-column {
    position: relative;
    z-index: 1;
}

.hero-widget-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px 50px 80px;  /* extra left padding = room for left float badge */
    position: relative;
}

/* Relatively-positioned wrapper so float badges are positioned relative to this */
.hero-widget-wrapper {
    position: relative;
    width: 330px;
    max-width: 100%;
}

/* The actual chat widget card */
.chat-widget-mockup {
    width: 330px;
    max-width: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-widget);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
    transition: transform .4s ease;
}

.chat-widget-mockup:hover {
    transform: perspective(1200px) rotateY(-1deg) rotateX(0deg);
}

/* Glare reflection overlay on top of widget */
.chat-widget-mockup::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── Widget header (red bar at top) ── */
.chat-widget-header {
    background: var(--brand-red);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.chat-widget-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.20);
    border: 2px solid rgba(255,255,255,.30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.chat-widget-info {
    flex: 1;
    min-width: 0;
}

.chat-widget-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-widget-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.chat-widget-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse-dot 2s infinite;
    flex-shrink: 0;
}

.chat-widget-status-text {
    color: rgba(255,255,255,.85);
    font-size: 11px;
}

.chat-widget-minimize-btn {
    color: rgba(255,255,255,.55);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Messages area ── */
.chat-widget-messages {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
    min-height: 200px;
}

/* Individual message row */
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 84%;
}

.chat-message--bot  { align-self: flex-start; }
.chat-message--user { align-self: flex-end; }

/* Sender name (only for bot messages) */
.chat-message-sender {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 3px;
    padding-left: 2px;
}

/* The chat bubble */
.chat-message-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
}

.chat-message--bot  .chat-message-bubble {
    background: #fff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.chat-message--user .chat-message-bubble {
    background: var(--brand-red);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Timestamp */
.chat-message-time {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
    padding: 0 2px;
}

.chat-message--user .chat-message-time {
    text-align: right;
}

/* ── Typing indicator (3 animated dots) ── */
.chat-typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.chat-typing-indicator span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: typing-bounce .9s infinite alternate;
}

.chat-typing-indicator span:nth-child(2) { animation-delay: .2s; }
.chat-typing-indicator span:nth-child(3) { animation-delay: .4s; }

/* ── Input area at the bottom ── */
.chat-widget-input-area {
    padding: 12px 14px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    align-items: center;
    background: #fff;
}

.chat-widget-input-field {
    flex: 1;
    background: #f1f5f9;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: #94a3b8;
    font-family: inherit;
    border: none;
    outline: none;
}

.chat-widget-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
    cursor: pointer;
}


/* ─────────────────────────────────────────────────────────────────────
   07  FLOATING INFO BADGES  (around the widget in hero)
   These appear to the left and right of the chat widget.
───────────────────────────────────────────────────────────────────── */
.float-badge {
    position: absolute;
    background: #fff;
    border-radius: 13px;
    padding: 11px 16px;
    box-shadow: var(--shadow-float-badge);
    display: flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
    z-index: 10;
    animation: float-up-down 3.5s ease-in-out infinite;
}

/* Top-left badge: "AI Response — Instant reply" */
.float-badge--top-left {
    top: -30px;
    left: -90px;
    animation-delay: 0s;
}

/* Bottom-right badge: "Conversion Rate — +40%" */
.float-badge--bottom-right {
    bottom: 60px;
    right: -80px;
    animation-delay: 1.8s;
}

.float-badge-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.float-badge-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
}

.float-badge-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
}


/* ─────────────────────────────────────────────────────────────────────
   08  STATS SECTION
   4 metric cards in a horizontal row directly below the hero.
───────────────────────────────────────────────────────────────────── */
.lp-stats {
    background: var(--bg-white);
    position: relative;
    z-index: 3;     /* sits above hero overflow */
}

/* 4-column grid, full viewport width, bordered */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

/* Individual stat card */
.stat-card {
    padding: 32px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-right: 1px solid var(--border-light);
    transition: background .2s;
}

.stat-card:last-child {
    border-right: none;
}

.stat-card:hover {
    background: var(--bg-light);
}

/* Colored icon box */
.stat-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* Background color variants for each stat icon */
.stat-icon-box--red    { background: #fff0f0; }
.stat-icon-box--blue   { background: #eff6ff; }
.stat-icon-box--green  { background: #f0fdf4; }
.stat-icon-box--purple { background: #f5f3ff; }

.stat-text-content {
    min-width: 0;
}

/* Large bold number */
.stat-number {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-heading);
    line-height: 1;
    letter-spacing: -1px;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

/* The "+" or "K" / "M" suffix after the number */
.stat-number-suffix {
    color: var(--brand-red);
    font-size: 18px;
    font-weight: 800;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 500;
    line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────────
   09  FEATURES SECTION
   6 cards in a 3-column grid describing platform capabilities.
───────────────────────────────────────────────────────────────────── */
.lp-features {
    padding: var(--section-gap) 0;
    background: var(--bg-white);
}

.feature-card {
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    height: 100%;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.feature-card:hover {
    border-color: var(--brand-red);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(204,0,0,.09);
}

/* Icon container (shows emoji, changes bg on hover) */
.feature-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    transition: background .25s, border-color .25s;
}

/* On hover: tint the icon box red (don't filter — emojis break with CSS filter) */
.feature-card:hover .feature-icon-box {
    background: var(--brand-red-tint);
    border-color: var(--brand-red-border);
}

.feature-card-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.feature-card-description {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────
   10  HOW IT WORKS  (Steps Section)
   3 step cards in a row with connecting arrows between them.
───────────────────────────────────────────────────────────────────── */
.lp-steps {
    padding: var(--section-gap) 0;
    background: var(--bg-light);
}

/* Layout: [step] [arrow] [step] [arrow] [step] */
.steps-layout {
    display: grid;
    grid-template-columns: 1fr 44px 1fr 44px 1fr;
    align-items: start;
    gap: 0;
    margin-top: 52px;
}

/* Individual step card */
.step-card {
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: 18px;
    padding: 32px 24px;
    text-align: center;
    transition: border-color .25s, box-shadow .25s;
}

.step-card:hover {
    border-color: var(--brand-red);
    box-shadow: 0 16px 48px rgba(204,0,0,.09);
}

/* Numbered red circle at the top of each step */
.step-number-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-red);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 6px 20px rgba(204,0,0,.35);
}

.step-emoji {
    font-size: 36px;
    display: block;
    margin-bottom: 14px;
    line-height: 1;
}

.step-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.step-description {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Arrow between step cards */
.step-arrow-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 72px;  /* align arrow with middle of step card header */
}

.step-arrow-connector svg {
    width: 26px;
    height: 26px;
    color: var(--brand-red);
    opacity: .5;
}


/* ─────────────────────────────────────────────────────────────────────
   11  PRICING SECTION
   Plan cards loaded from the database via Blade loop.
───────────────────────────────────────────────────────────────────── */
.lp-pricing {
    padding: var(--section-gap) 0;
    background: var(--bg-white);
}

/* Individual plan card */
.plan-card {
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 34px 28px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Highlighted "popular" plan gets a red border */
.plan-card--featured {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 5px rgba(204,0,0,.06);
}

/* "⭐ Most Popular" badge above featured card */
.plan-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 99px;
    white-space: nowrap;
    letter-spacing: .05em;
    box-shadow: 0 4px 14px var(--brand-red-glow);
}

/* Plan name label (e.g. "STARTER", "PRO") */
.plan-name-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
}

/* Price row: $ 29 /mo  — uses flexbox baseline alignment */
.plan-price-row {
    display: flex;
    align-items: flex-start;
    line-height: 1;
    margin-bottom: 10px;
    gap: 2px;
}

/* $ currency symbol — smaller, sits at top */
.plan-price-currency {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 10px;
}

/* The main price number */
.plan-price-amount {
    font-size: 52px;
    font-weight: 900;
    color: var(--text-heading);
    letter-spacing: -2px;
    line-height: 1;
}

/* "/mo" period label — sits at bottom baseline */
.plan-price-period {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    align-self: flex-end;
    margin-bottom: 8px;
}

/* "Free" text for free plan */
.plan-price-free-label {
    font-size: 48px;
    font-weight: 900;
    color: var(--text-heading);
    line-height: 1;
}

/* Short plan description */
.plan-description {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.plan-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 18px 0;
}

/* A single feature row inside a plan card */
.plan-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: var(--text-body);
    padding: 4px 0;
}

/* Greyed out when the plan doesn't include this feature */
.plan-feature-item--disabled {
    color: #94a3b8;
}

.plan-feature-check { color: #22c55e; font-weight: 800; font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.plan-feature-cross  { color: #cbd5e1; font-size: 13px; flex-shrink: 0; margin-top: 1px; }

/* CTA button at the bottom of each plan card */
.plan-cta-btn {
    display: block;
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    transition: all .22s;
    text-align: center;
    font-family: inherit;
}

.plan-cta-btn--free {
    background: var(--bg-light);
    color: var(--text-heading);
    border: 1.5px solid var(--border-light);
}

.plan-cta-btn--free:hover {
    background: var(--border-light);
}

.plan-cta-btn--featured {
    background: var(--brand-red);
    color: #fff;
}

.plan-cta-btn--featured:hover {
    background: var(--brand-red-hover);
    box-shadow: 0 6px 20px var(--brand-red-glow);
}

.plan-cta-btn--regular {
    background: transparent;
    color: var(--text-heading);
    border: 1.5px solid var(--border-light);
}

.plan-cta-btn--regular:hover {
    border-color: var(--brand-red);
    color: var(--brand-red);
}

/* "or $X/yr — save 20%" note below button */
.plan-yearly-note {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 10px;
}

.plan-yearly-note strong {
    color: var(--text-muted);
}


/* ─────────────────────────────────────────────────────────────────────
   12  CTA BANNER SECTION
   Dark red-tinted banner above footer.
   Desktop: two columns (text left, buttons right)
   Mobile: single column, stacked
───────────────────────────────────────────────────────────────────── */
.lp-cta {
    padding: 72px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-darkest) 0%, #1a0505 50%, var(--bg-darkest) 100%);
}

/* Soft red radial glow in the center */
.lp-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 120% at 50% 50%, rgba(204,0,0,.15) 0%, transparent 65%);
}

/* Two-column layout: text | buttons */
.cta-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cta-text-column {
    flex: 1;
    min-width: 280px;
}

/* Small pill label above CTA title */
.cta-eyebrow-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(204,0,0,.18);
    border: 1px solid rgba(204,0,0,.30);
    color: #fca5a5;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 14px;
    letter-spacing: .05em;
}

.cta-title {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.3px;
    margin-bottom: 10px;
}

.cta-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,.55);
    line-height: 1.68;
    margin: 0;
}

/* Right column with buttons stacked vertically */
.cta-buttons-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

.cta-btn-primary {
    background: var(--brand-red);
    color: #fff;
    border-radius: 11px;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all .22s;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.cta-btn-primary:hover {
    background: var(--brand-red-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--brand-red-glow);
}

.cta-btn-secondary {
    color: rgba(255,255,255,.65);
    border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
    border-radius: 11px;
    padding: 13px 28px;
    font-size: 14.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all .22s;
    white-space: nowrap;
}

.cta-btn-secondary:hover {
    color: #fff;
    border-color: rgba(255,255,255,.40);
    background: rgba(255,255,255,.10);
}

/* ✓ trust items below buttons */
.cta-trust-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.cta-trust-item {
    font-size: 12.5px;
    color: rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    gap: 5px;
}

.cta-trust-checkmark {
    color: #4ade80;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────────
   13  FOOTER
   4-column dark footer: brand, two link-list columns, and a CTA card.
───────────────────────────────────────────────────────────────────── */
.lp-footer {
    background: var(--bg-darkest);
    padding: 72px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 48px;
    align-items: start;   /* columns top-align; never stretch to the tallest */
}

/* ── Column 1: brand + bio + social icons ── */
.footer-logo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.footer-brand-bio {
    font-size: 13.5px;
    color: rgba(255,255,255,.38);
    line-height: 1.72;
    margin-bottom: 20px;
    max-width: 340px;
}

.footer-social-row {
    display: flex;
    gap: 10px;
}

.footer-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.50);
    font-size: 15px;
    transition: all .2s;
}

.footer-social-btn:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

/* ── Columns 2-3: nav link lists ── */
.footer-column-heading {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: .10em;
    margin-bottom: 16px;
}

.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-link-list li {
    margin: 0;
}

.footer-nav-link {
    display: block;
    font-size: 13.5px;
    color: rgba(255,255,255,.52);
    padding: 6px 0;
    transition: color .15s;
}

.footer-nav-link:hover {
    color: #fff;
}

/* ── Column 4: mini CTA card ── */
.footer-cta-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 22px 20px;
}

.footer-cta-card p {
    font-size: 13px;
    color: rgba(255,255,255,.42);
    margin-bottom: 16px;
    line-height: 1.65;
}

.footer-cta-btn {
    background: var(--brand-red);
    color: #fff;
    border-radius: 9px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .2s;
}

.footer-cta-btn:hover {
    background: var(--brand-red-hover);
    color: #fff;
}

/* ── Bottom bar: copyright + legal links ── */
.footer-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    margin: 0 0 22px;
}

.footer-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copyright {
    font-size: 12.5px;
    color: rgba(255,255,255,.28);
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom-link {
    font-size: 12.5px;
    color: rgba(255,255,255,.32);
    transition: color .15s;
}

.footer-bottom-link:hover {
    color: rgba(255,255,255,.72);
}


/* ─────────────────────────────────────────────────────────────────────
   14  ANIMATIONS  (keyframes)
───────────────────────────────────────────────────────────────────── */

/* Animated dot used in hero label and widget status */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(1.5); }
}

/* Floating up-down motion for info badges */
@keyframes float-up-down {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* Typing indicator dots bouncing */
@keyframes typing-bounce {
    from { opacity: .3; transform: translateY(0); }
    to   { opacity: 1;  transform: translateY(-5px); }
}

/* Fade + slide up (used via JS IntersectionObserver) */
@keyframes fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════
   15  RESPONSIVE — TABLET  (max-width: 991px)
   Covers tablets in landscape and portrait, and small laptops.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ── Navbar: show hamburger, hide desktop links ── */
    .navbar-mobile-toggle  { display: flex; }
    .navbar-links          { display: none; }
    .navbar-actions        { display: none; }

    /* Mobile menu open state — vertical dropdown */
    .navbar-links.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: rgba(10,10,20,.98);
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: 12px 20px 20px;
        gap: 4px;
        z-index: 999;
    }

    .navbar-actions.is-open {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        padding: 0 20px 20px;
        background: rgba(10,10,20,.98);
        gap: 10px;
        z-index: 999;
    }

    /* ── Hero: reduce top/bottom padding ── */
    .lp-hero {
        padding: 72px 0;
    }

    /* ── Hero widget: less horizontal padding for badges ── */
    .hero-widget-area {
        padding: 40px 20px 40px 60px;
    }

    /* Float badges: bring in closer to not overflow viewport */
    .float-badge--top-left  { left: -60px; top: -20px; }
    .float-badge--bottom-right { right: -55px; bottom: 40px; }

    /* ── Stats: 2x2 grid ── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card:nth-child(2) { border-right: none; }
    .stat-card:nth-child(3) { border-top: 1px solid var(--border-light); }
    .stat-card:nth-child(4) { border-right: none; border-top: 1px solid var(--border-light); }

    /* ── Steps: switch to vertical layout ── */
    .steps-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    /* Rotate arrow to point downward */
    .step-arrow-connector {
        padding-top: 0;
        transform: rotate(90deg);
        height: 36px;
    }

    /* ── Footer: brand spans the top, the 3 link/CTA columns sit in a row below.
       Avoids the lopsided gaps a 2x2 grid creates with uneven columns. ── */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px 32px;
    }
    .footer-col-brand {          /* brand block → full width on top */
        grid-column: 1 / -1;
    }
    .footer-brand-bio {
        max-width: 520px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   16  RESPONSIVE — MOBILE  (max-width: 767px)
   Covers smartphones in landscape and standard tablets in portrait.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Section vertical spacing: reduce on mobile ── */
    :root {
        --section-gap: 64px;
    }

    /* ── Hero: stack columns ── */
    .lp-hero {
        padding: 60px 0 48px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    /* Make hero CTA buttons full-width on small screens */
    .hero-cta-buttons {
        flex-direction: column;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* ── Widget area: remove perspective tilt on mobile ── */
    .hero-widget-area {
        padding: 50px 16px 20px;    /* top padding for float-badge--top-left */
        justify-content: center;
    }

    .hero-widget-wrapper {
        width: 100%;
        max-width: 340px;
    }

    .chat-widget-mockup {
        width: 100%;
        transform: none;    /* no 3D tilt on mobile */
    }

    .chat-widget-mockup:hover {
        transform: none;
    }

    /* Float badges: repositioned to avoid overflow on mobile */
    .float-badge--top-left {
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        animation: none; /* static on mobile */
    }

    .float-badge--bottom-right {
        display: none;   /* hide bottom badge on mobile — too cramped */
    }

    /* ── Stats: stay 2x2 but with smaller padding ── */
    .stat-card {
        padding: 22px 18px;
        gap: 13px;
    }

    .stat-icon-box {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .stat-number {
        font-size: 24px;
    }

    /* ── How It Works: single column already set at 991px ── */
    .step-card {
        padding: 26px 20px;
    }

    /* ── CTA: stack columns ── */
    .cta-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .cta-buttons-column {
        width: 100%;
    }

    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* ── Footer: Brand (full) · [Product | Company] · Get Started (full). ── */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 28px;
    }
    .footer-col-cta {            /* CTA card → full width */
        grid-column: 1 / -1;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   16b  RESPONSIVE — MOBILE / XS ONLY  (max-width: 575.98px)
   Below Bootstrap's "sm" breakpoint. This is the ONLY place the footer
   collapses to a single stacked column; sm and up stay in rows.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* ── Footer: single column stack ── */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   17  RESPONSIVE — SMALL PHONE  (max-width: 480px)
   Covers phones like iPhone SE and similar narrow viewports.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Tighten up section spacing */
    :root {
        --section-gap: 52px;
    }

    /* ── Navbar: slimmer ── */
    .navbar-inner {
        height: 60px;
    }

    .navbar-logo {
        font-size: 17px;
    }

    /* ── Hero title: smaller on very small screens ── */
    .hero-title {
        font-size: 30px;
    }

    .hero-label {
        font-size: 11px;
        padding: 4px 12px;
    }

    /* ── Stats: tight padding ── */
    .stat-card {
        padding: 18px 14px;
    }

    .stat-label {
        font-size: 12px;
    }

    /* ── Feature cards: comfortable padding ── */
    .feature-card {
        padding: 22px 18px;
    }

    /* ── Pricing cards: comfortable padding ── */
    .plan-card {
        padding: 26px 20px;
    }

    .plan-price-amount {
        font-size: 44px;
    }

    /* ── Footer: tighter ── */
    .lp-footer {
        padding: 52px 0 24px;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   NEW SECTIONS (2026-07) — Trust badges, Live Demo, Integrations,
   Testimonials, Pricing toggle, Comparison, FAQ, Footer badge.
   All reuse the existing brand tokens and section-header components.
═════════════════════════════════════════════════════════════════════ */

/* ── Trust-badge title (replaces the big stat number) ── */
.stat-trust-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.2;
    letter-spacing: -.2px;
    margin-bottom: 3px;
}


/* ─────────────────────────────────────────────────────────────────────
   INTEGRATIONS STRIP
───────────────────────────────────────────────────────────────────── */
.lp-integrations {
    padding: 54px 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.integrations-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .01em;
    margin-bottom: 22px;
}
.integrations-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
.integration-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-light);
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-body);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.integration-badge .bi { font-size: 17px; color: var(--brand-red); }
.integration-badge:hover {
    border-color: var(--brand-red);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(204,0,0,.08);
}
.integrations-note {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
}


/* ─────────────────────────────────────────────────────────────────────
   TESTIMONIALS SECTION
───────────────────────────────────────────────────────────────────── */
.lp-testimonials {
    padding: var(--section-gap) 0;
    background: var(--bg-white);
}
/* Live average rating line under the header */
.testimonial-rating-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-body);
}
.testimonial-rating-stars {
    display: inline-flex;
    gap: 3px;
    color: #f59e0b;
    font-size: 15px;
}

/* Review wall: responsive grid, equal-height rows, footers pinned to the
   bottom of each card (columns-based masonry left ugly holes with few cards) */
.testimonial-wall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}
@media (max-width: 991.98px) { .testimonial-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .testimonial-wall { grid-template-columns: 1fr; } }

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 28px 24px 22px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .05);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.testimonial-card:hover {
    border-color: var(--brand-red);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(204, 0, 0, .09);
}
/* Highlighted "best review" variant */
.testimonial-card--highlight {
    border-color: var(--brand-red-border);
    background: linear-gradient(180deg, #fff, #fffafa);
    box-shadow: 0 14px 40px rgba(204, 0, 0, .08);
}
@media (min-width: 992px) {
    .testimonial-card--highlight { transform: scale(1.02); }
    .testimonial-card--highlight:hover { transform: scale(1.02) translateY(-4px); }
}

/* Red quote-mark accent */
.testimonial-quote-mark {
    position: absolute;
    top: 8px;
    right: 18px;
    font-size: 64px;
    line-height: 1;
    font-family: Georgia, serif;
    color: var(--brand-red);
    opacity: .12;
    pointer-events: none;
    user-select: none;
}
.testimonial-stars {
    display: flex;
    gap: 3px;
    color: #f59e0b;
    font-size: 14px;
    margin-bottom: 12px;
}
.testimonial-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 6px;
}
.testimonial-quote {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-body);
    margin: 0 0 18px;
    flex: 1; /* pushes the divider + author row to the card's bottom edge */
}
.testimonial-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 0 0 16px;
    opacity: 1;
}
.testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.testimonial-avatar--img { object-fit: cover; }
.testimonial-avatar--red    { background: linear-gradient(135deg, #CC0000, #ff4d4d); }
.testimonial-avatar--blue   { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.testimonial-avatar--green  { background: linear-gradient(135deg, #059669, #34d399); }
.testimonial-avatar--purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.testimonial-avatar--amber  { background: linear-gradient(135deg, #d97706, #fbbf24); }
.testimonial-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.2;
}
.testimonial-role {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* "View All Reviews" button under the homepage wall */
.testimonial-more {
    text-align: center;
    margin-top: 36px;
}
.testimonial-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1.5px solid var(--brand-red);
    border-radius: 99px;
    color: var(--brand-red);
    background: transparent;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.testimonial-more-btn:hover {
    background: var(--brand-red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(204, 0, 0, .25);
}
.testimonial-more-btn i { transition: transform .2s; }
.testimonial-more-btn:hover i { transform: translateX(3px); }

/* /reviews page: hero rating line + pagination */
.reviews-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 99px;
    color: #fff;
    font-size: 14.5px;
}
.reviews-hero-stars {
    display: inline-flex;
    gap: 3px;
    color: #fbbf24;
    font-size: 15px;
}
.reviews-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}


/* ─────────────────────────────────────────────────────────────────────
   PRICING — Monthly / Yearly toggle + notes
───────────────────────────────────────────────────────────────────── */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
}
.pricing-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .2s;
    user-select: none;
}
.pricing-toggle-label.is-active { color: var(--text-heading); }

.pricing-toggle-switch {
    width: 52px;
    height: 28px;
    border-radius: 99px;
    background: #cbd5e1;
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background .22s;
    flex-shrink: 0;
}
.pricing-toggle-switch.is-yearly { background: var(--brand-red); }
.pricing-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: transform .22s;
}
.pricing-toggle-switch.is-yearly .pricing-toggle-knob { transform: translateX(24px); }

.pricing-save-badge {
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 99px;
    letter-spacing: .02em;
}

.plan-billing-note {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    margin: 2px 0 0;
}

/* Secondary "Book a Demo" link under the Enterprise button */
.plan-demo-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-red);
    text-decoration: none;
}
.plan-demo-link:hover { text-decoration: underline; }

/* 14-day guarantee row under the pricing grid */
.pricing-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 34px;
    font-size: 14px;
    color: var(--text-body);
}
.pricing-guarantee .bi { color: #22c55e; font-size: 18px; }
.pricing-guarantee strong { color: var(--text-heading); }


/* ─────────────────────────────────────────────────────────────────────
   COMPARISON SECTION
───────────────────────────────────────────────────────────────────── */
.lp-compare {
    padding: var(--section-gap) 0;
    background: var(--bg-light);
}
.compare-table-wrap {
    max-width: 860px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
}
/* Scroll hint — only shown on screens where the table can't fit (≤768px) */
.compare-scroll-hint {
    display: none;
    text-align: center;
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}
.compare-scroll-hint .bi { color: var(--brand-red); margin-right: 4px; }
.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}
.compare-table th,
.compare-table td {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}
.compare-table thead th {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-heading);
    background: var(--bg-light);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-feature-col {
    text-align: left !important;
    font-weight: 600;
    color: var(--text-body);
    width: 40%;
}
/* Highlighted HelpChatly column */
.compare-col-hc {
    background: var(--brand-red-tint);
    border-left: 1.5px solid var(--brand-red-border);
    border-right: 1.5px solid var(--brand-red-border);
}
.compare-table thead .compare-col-hc {
    color: var(--brand-red);
    background: rgba(204,0,0,.10);
}
.compare-table tbody tr:last-child .compare-col-hc {
    border-bottom: 1.5px solid var(--brand-red-border);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}
.compare-yes { color: #22c55e; font-size: 19px; }
.compare-no  { color: #cbd5e1; font-size: 19px; }
.compare-text { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.compare-text--hc { color: var(--brand-red); font-weight: 800; }


/* ─────────────────────────────────────────────────────────────────────
   FAQ SECTION (accordion)
───────────────────────────────────────────────────────────────────── */
.lp-faq {
    padding: var(--section-gap) 0;
    background: var(--bg-white);
}
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.faq-item.is-open {
    border-color: var(--brand-red-border);
    box-shadow: 0 10px 30px rgba(204,0,0,.06);
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-heading);
    cursor: pointer;
}
.faq-icon {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--brand-red);
    transition: transform .25s;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.faq-item.is-open .faq-answer { max-height: 320px; }
.faq-answer p {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-muted);
}


/* ─────────────────────────────────────────────────────────────────────
   FOOTER — Powered by Claude AI badge
───────────────────────────────────────────────────────────────────── */
.footer-claude-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 7px 14px;
    background: var(--bg-dark-card);
    border: 1px solid var(--bg-dark-border);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.75);
}
.footer-claude-badge .bi { color: var(--brand-red); font-size: 13px; }


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — new sections
───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pricing-toggle { flex-wrap: wrap; gap: 10px; }
    .compare-table th, .compare-table td { padding: 13px 14px; }
    .compare-scroll-hint { display: block; }
}

@media (max-width: 576px) {
    .stat-trust-title { font-size: 15.5px; }
    .integration-badge { padding: 9px 14px; font-size: 13px; }
    .faq-question { font-size: 14px; padding: 15px 16px; }
    .faq-answer p { padding: 0 16px 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SHARED SUB-PAGE STYLES (Contact, About, FAQ, Demo)
═══════════════════════════════════════════════════════════════════════ */

/* ── Compact dark page hero ── */
.page-hero {
    background: linear-gradient(160deg, var(--bg-darkest) 0%, var(--bg-dark) 100%);
    padding: 116px 0 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -220px; right: -140px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(204,0,0,.18) 0%, transparent 70%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    margin: 14px 0 12px;
    letter-spacing: -.02em;
}
.page-hero-sub {
    color: rgba(255,255,255,.72);
    font-size: clamp(15px, 1.9vw, 18px);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Brand form controls (light surfaces) ── */
.form-field { margin-bottom: 18px; }
.form-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 7px;
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--text-heading);
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}
.form-textarea { resize: vertical; min-height: 130px; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(204,0,0,.10);
}
.form-error { color: var(--brand-red); font-size: 12.5px; margin-top: 5px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: 14px;
    padding: 22px 24px;
    text-align: center;
    font-size: 15px;
}
.form-success .bi { color: #16a34a; font-size: 32px; display: block; margin-bottom: 8px; }

/* ── Contact page ── */
.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 34px;
    align-items: start;
}
.contact-info-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-card);
}
/* Icon container matches the homepage .feature-icon-box exactly */
.contact-card-icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 13px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.contact-card-title { font-weight: 700; color: var(--text-heading); font-size: 14.5px; margin-bottom: 2px; }
.contact-card-text  { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.contact-card-text a { color: var(--brand-red); font-weight: 600; }
.contact-copy-btn {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    padding: 2px 5px; border-radius: 6px; font-size: 12px; transition: color .15s, background .15s;
}
.contact-copy-btn:hover { color: var(--brand-red); background: rgba(204,0,0,.07); }
.contact-copy-btn.copied { color: #16a34a; }
.contact-form-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 28px;
    box-shadow: var(--shadow-card);
}

/* Contact hero — ~30% shorter than the shared .page-hero */
.page-hero.contact-hero { padding: 82px 0 46px; }

/* About hero — ~20% shorter than the shared .page-hero */
.page-hero.about-hero { padding: 93px 0 51px; }

/* Shared animated red glow so all sub-page heroes feel consistent */
.page-hero::after {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 35%, rgba(204,0,0,.18) 0%, transparent 42%);
    pointer-events: none;
    z-index: 0;
    animation: heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(14%, 8%) scale(1.15); }
    100% { transform: translate(-8%, 4%) scale(1.05); }
}

/* Reveal-on-scroll (shared across pages) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .page-hero::after { animation: none; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Slim closing CTA strip (half-height lp-cta) */
.contact-cta-strip {
    padding: 34px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-darkest) 0%, #1a0505 50%, var(--bg-darkest) 100%);
}
.contact-cta-strip::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 120% at 50% 50%, rgba(204,0,0,.15) 0%, transparent 65%);
}
.contact-cta-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.contact-cta-badges { display: flex; flex-wrap: wrap; gap: 18px; }
.contact-cta-badges span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.55); font-weight: 500; }
.contact-cta-badges i { color: #22c55e; }
.contact-cta-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-cta-line { font-size: 14px; color: rgba(255,255,255,.75); }

@media (max-width: 860px) {
    /* Mobile: form first, info cards below — full width (override align-items:start) */
    .contact-grid { display: flex; flex-direction: column; align-items: stretch; }
    .contact-col-form { order: 1; }
    .contact-col-info { order: 2; }
    .contact-cta-inner { justify-content: center; text-align: center; }
}

/* ── About page ── */
.value-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 28px 24px;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: transform .18s, box-shadow .18s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.10); }
.value-card-icon {
    width: 52px; height: 52px;
    border-radius: 13px;
    background: rgba(204,0,0,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
}
.value-card-title { font-weight: 700; font-size: 17px; color: var(--text-heading); margin-bottom: 8px; }
.value-card-text  { color: var(--text-body); font-size: 14.5px; line-height: 1.6; }
.about-story-prose { max-width: 760px; margin: 0 auto; color: var(--text-body); font-size: 16px; line-height: 1.8; }
.about-story-prose p { margin-bottom: 18px; }

/* ── FAQ page ── */
.faq-search-wrap { max-width: 560px; margin: 22px auto 0; position: relative; }
.faq-search-wrap .bi { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); }
.faq-search-input {
    width: 100%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 13px 16px 13px 44px;
    font-size: 15px;
    color: #fff;
    outline: none;
    transition: border-color .16s, background .16s;
}
.faq-search-input::placeholder { color: rgba(255,255,255,.45); }
.faq-search-input:focus { border-color: var(--brand-red); background: rgba(255,255,255,.12); }
.faq-cat-block { margin-bottom: 44px; }
.faq-cat-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.faq-cat-title .faq-cat-count { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-light); border-radius: 20px; padding: 2px 10px; }
.faq-empty-state { text-align: center; color: var(--text-muted); padding: 40px 0; display: none; }

/* ── Demo page ── */
.demo-frame {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    border: 1px solid var(--border-light);
    background: #fff;
}
.demo-frame-bar {
    display: flex; align-items: center; gap: 7px;
    background: #f1f5f9;
    padding: 11px 15px;
    border-bottom: 1px solid var(--border-light);
}
.demo-frame-dot { width: 11px; height: 11px; border-radius: 50%; }
.demo-frame-dot--r { background: #ff5f57; }
.demo-frame-dot--y { background: #febc2e; }
.demo-frame-dot--g { background: #28c840; }
.demo-frame-addr {
    margin-left: 10px;
    background: #fff;
    border-radius: 7px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
    max-width: 280px;
}
.demo-frame-body {
    position: relative;
    min-height: 420px;
    background: #eef2f6 repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(148,163,184,.08) 22px, rgba(148,163,184,.08) 23px);
    padding: 22px;
    display: flex; justify-content: flex-end; align-items: flex-end;
}
.booking-form-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 30px;
    box-shadow: var(--shadow-card);
    max-width: 760px;
    margin: 0 auto;
}

/* ── Sub-page responsiveness ── */
@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 768px) {
    .page-hero { padding: 100px 0 48px; }
    .contact-form-card, .booking-form-card { padding: 22px; }
}