/* Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark-bg: #121214; /* Deeper base */
    --dark-bg-lighter: #1f1f23;
    --dark-bg-medium: #18181b;
    --dark-bg-overlay: rgba(18, 18, 20, 0.92);
    --yellow: #ffc107;
    --yellow-light: #ffd75e;
    --yellow-dark: #e0a800;
    --yellow-glow: rgba(255, 193, 7, 0.4);
    --light-text: #ededef; /* Brighter off-white */
    --light-text-secondary: rgba(237, 237, 239, 0.6);
    --dark-text: #0a0a0a;
    --accent-color: #a855f7; /* Purple accent */
    --accent-light: #c084fc;
    --accent-dark: #9333ea;
    --accent-glow: rgba(168, 85, 247, 0.35);
    --accent-glow-strong: rgba(168, 85, 247, 0.6);
    --shadow-color-light: rgba(255, 255, 255, 0.03);
    --shadow-color-medium: rgba(0, 0, 0, 0.2);
    --shadow-color-dark: rgba(0, 0, 0, 0.35);
    --section-gap: 9rem; /* More breathing room */
    --transition-speed-fast: 0.3s;
    --transition-speed-med: 0.5s;
    --transition-speed-slow: 0.8s;
    --border-radius: 20px;
    --border-radius-sm: 12px;
    --border-radius-lg: 32px;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Smooth Scrolling & Base */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.75;
    color: var(--light-text);
    background-color: var(--dark-bg);
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Remove static pattern, will use animated header */
}

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.8rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
}

h1 {
    font-size: clamp(3rem, 8vw, 5rem);
}

h2 {
    font-size: clamp(2.4rem, 6.5vw, 3.5rem);
}

p {
    margin-bottom: 2rem;
    font-size: clamp(1.05rem, 2.5vw, 1.18rem);
    color: var(--light-text-secondary);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

a {
    color: var(--accent-light);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-speed-fast);
    padding-bottom: 2px; /* Space for underline */
}

a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px; /* Thicker underline */
    bottom: -3px;
    left: 0;
    background: linear-gradient(90deg, var(--accent-light), var(--yellow-light)); /* Gradient underline */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

a:hover {
    color: var(--yellow-light);
}

a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.container {
    width: 100%;
    max-width: 1120px; /* Slightly wider */
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Truly Epic Header --- */
header {
    background: var(--dark-bg);
    padding: 6rem 0 calc(var(--section-gap) + 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--shadow-color-light);
}

/* Animated Constellation Background */
@keyframes moveTwinklingStars {
    from { background-position: 0 0; }
    to   { background-position: -10000px 5000px; }
}

header {
    /* Add more layers for parallax */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='1' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E"), /* Tiny stars */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='30' r='2' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='80' cy='70' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E"), /* Medium stars */
        radial-gradient(ellipse at center, var(--dark-bg-medium) 0%, var(--dark-bg) 70%); /* Base gradient */
    background-repeat: repeat, repeat, no-repeat;
    background-size: 100px 100px, 200px 200px, cover; /* Different sizes */
    background-position: 0 0, 0 0, center center;
    animation: moveTwinklingStars 200s linear infinite; /* Apply animation */
}


header > * {
    position: relative;
    z-index: 1;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3.5rem;
    animation: scaleIn 1s 0.8s ease-out backwards;
}

.logo {
    height: 42px;
    margin-right: 0.8rem;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
    transition: transform var(--transition-speed-med) ease;
}

.logo-container:hover .logo {
    transform: rotate(-5deg) scale(1.05);
}

.beta-badge {
    background: linear-gradient(45deg, var(--yellow), var(--yellow-light));
    color: var(--dark-text);
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--border-radius-sm);
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 5px 12px var(--shadow-color-dark), inset 0 1px 1px rgba(255,255,255,0.25);
    text-transform: uppercase;
    transform: rotate(-3deg) scale(1);
    transition: transform var(--transition-speed-med) ease;
}

.logo-container:hover .beta-badge {
    transform: rotate(2deg) scale(1.05);
}

header h1 {
    margin-bottom: 2.5rem;
    font-weight: 800;
    max-width: 95%;
    color: var(--light-text); /* Use solid color for mask effect */
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 1.4s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    display: inline-block; /* For pseudo-elements */
    text-shadow: 0 0 25px rgba(237, 237, 239, 0.15);
}

/* Animated text reveal/gradient */
header h1 span {
    display: inline-block; /* Animate words/letters if desired */
    /* Example letter animation setup (requires JS to wrap letters) */
    /* opacity: 0; transform: translateY(20px); animation: letterFadeIn 0.8s forwards; */
}

header p {
    max-width: 720px;
    color: var(--light-text-secondary);
    line-height: 1.85;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.4s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- General Section Styling --- */
section {
    padding: var(--section-gap) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Remove the subtle glow, replace with pattern/border */

section > .container {
    position: relative;
    z-index: 1;
}

section:nth-of-type(odd) {
    background-color: var(--dark-bg-medium);
}

section:nth-of-type(even) {
    background-color: var(--dark-bg);
}

/* Glowing Top Border */
section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 1s ease, transform 1s ease;
}

section.in-view::after {
    opacity: 1;
    transform: scaleX(1);
}

section h2 {
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block;
}

/* Replace underline with subtle background highlight */
section h2 span {
    background: linear-gradient(120deg, var(--accent-dark) 0%, var(--accent-light) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding: 0 0.2em;
}

/* --- Try It Section with Glassmorphism --- */
#try-it {
    background: transparent; /* Will show body background */
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--shadow-color-light);
}

/* Add a background overlay to enhance glass effect */
#try-it::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(24, 24, 27, 0.5), var(--dark-bg) 80%);
    z-index: -1;
}

.examples-container {
    margin-bottom: 4rem;
    text-align: left;
    position: relative;
}

.examples-container label {
    display: block;
    margin-bottom: 1rem;
    color: var(--light-text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
    transition: color var(--transition-speed-fast);
}

#example-selector {
    padding: 1rem 1.8rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Glass border */
    background-color: rgba(31, 31, 35, 0.5); /* Semi-transparent background */
    color: var(--light-text);
    font-size: 1rem;
    width: 100%;
    max-width: 420px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all var(--transition-speed-med) ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ededef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 1.3em;
    box-shadow: 0 6px 18px var(--shadow-color-dark), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(10px);
}

#example-selector:hover {
    border-color: var(--accent-light);
    background-color: rgba(31, 31, 35, 0.6);
    box-shadow: 0 10px 25px var(--shadow-color-dark), 0 0 0 2px var(--accent-glow);
}
#example-selector:focus {
    border-color: var(--yellow);
    background-color: rgba(31, 31, 35, 0.6);
    box-shadow: 0 10px 25px var(--shadow-color-dark), 0 0 0 3px var(--yellow-glow);
    outline: none;
}

#example-selector option {
    background-color: #1f1f23;
    color: var(--light-text);
}

.text-fields-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .text-fields-container {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.input-field, .output-field {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--transition-speed-med) cubic-bezier(0.2, 0.8, 0.2, 1);
    perspective: 1000px; /* For 3D hover */
}

.input-field:hover, .output-field:hover {
    transform: translateY(-8px) rotateX(2deg); /* Subtle 3D lift */
}

#try-it label {
    display: block;
    text-align: left;
    margin-bottom: 1.2rem;
    font-weight: 600;
    color: var(--light-text-secondary);
    font-size: 1.15rem;
    transition: color var(--transition-speed-fast) ease;
}

.input-field.focused label {
    color: var(--yellow);
}

#try-it textarea {
    width: 100%;
    height: 420px;
    padding: 1.8rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    font-size: 1.05rem;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    resize: none;
    transition: all var(--transition-speed-med) ease;
    box-shadow: 0 12px 30px var(--shadow-color-dark), inset 0 2px 4px rgba(0,0,0,0.4);
    line-height: 1.7;
    background-color: rgba(31, 31, 35, 0.5); /* Glass background */
    color: var(--light-text);
    backdrop-filter: blur(12px); /* Frosted glass */
    -webkit-backdrop-filter: blur(12px);
    transform-style: preserve-3d; /* For 3D hover */
}

#input-text::placeholder {
    color: rgba(237, 237, 239, 0.3);
}

#input-text:focus {
    border-color: var(--accent-light);
    background-color: rgba(31, 31, 35, 0.6);
    box-shadow: 0 15px 35px var(--shadow-color-dark), 0 0 0 3px var(--accent-glow-strong), inset 0 2px 4px rgba(0,0,0,0.4);
    outline: none;
}

#output-text {
    cursor: default;
    background-color: rgba(31, 31, 35, 0.4); /* Slightly different glass */
}

/* PII Tag Styling */
.pii-tag {
    background: linear-gradient(45deg, var(--yellow-dark), var(--yellow));
    color: var(--dark-text);
    padding: 0.15em 0.5em;
    margin: 0 0.1em;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9em;
    font-family: var(--font-primary);
    white-space: nowrap;
    display: inline-block;
    line-height: 1.4;
    vertical-align: baseline;
    transition: all var(--transition-speed-fast) ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.pii-tag:hover {
    transform: scale(1.1) rotate(-1deg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    filter: brightness(1.1);
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    position: relative;
}

/* --- Truly Epic Button (Revised) --- */
#try-now-btn {
    background: linear-gradient(60deg, var(--accent-dark), var(--accent-color), var(--accent-light));
    background-size: 200% 100%; /* For animation */
    color: #fff;
    border: none;
    padding: 1.3rem 5rem;
    border-radius: 50px;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    cursor: pointer;
    transition: all var(--transition-speed-med) cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px var(--shadow-color-dark), 0 0 25px var(--accent-glow-strong), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    z-index: 1;
    will-change: transform, box-shadow, background-position;
}

/* Animated Gradient Background */
#try-now-btn:not(.processing):hover {
    background-position: 100% 0;
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 20px 40px var(--shadow-color-dark), 0 0 30px var(--accent-glow-strong), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* Removed Glare Effect - Replaced with BG anim */

#try-now-btn:active {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px var(--shadow-color-dark), 0 0 20px var(--accent-glow-strong), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* --- Advanced Processing State --- */
#try-now-btn.processing {
    cursor: wait;
    background: var(--dark-bg-lighter);
    color: var(--light-text-secondary);
    box-shadow: 0 6px 18px var(--shadow-color-medium), inset 0 1px 2px rgba(0,0,0,0.2);
    animation: none;
    transform: translateY(0) scale(1);
}

#try-now-btn.processing::before,
#try-now-btn.processing::after {
    display: none;
}

#try-now-btn .btn-text {
    display: inline-block;
    transition: opacity var(--transition-speed-fast) ease-out;
}

#try-now-btn.processing .btn-text {
    opacity: 0;
}

#try-now-btn .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px; /* Slightly larger loader */
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    border: 4px solid rgba(237, 237, 239, 0.2);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--transition-speed-fast) 0.1s; /* Delay opacity transition */
    animation: spin 0.8s linear infinite;
    display: block; /* Keep structure, control with opacity */
}

#try-now-btn:not(.processing) .loader {
    opacity: 0;
    transition: opacity var(--transition-speed-fast);
}
#try-now-btn.processing .loader {
    opacity: 1;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Section Overlaps & Transitions --- */

/* Redesigned Features Section */
#features {
    --features-bg-dark: #0f0f11; /* Darker base for this section */
    --features-glow: rgba(255, 193, 7, 0.2); /* Yellow glow */

    background: var(--features-bg-dark);
    color: var(--light-text);
    padding: var(--section-gap) 0; /* Standard padding */
    position: relative;
    z-index: 5; /* Keep it high for potential overlaps */
    overflow: hidden; /* Contain effects */
    /* Remove old clip-path and margins */
}

/* Dynamic Background Lines */
#features::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 49.5%,
        rgba(255, 193, 7, 0.1) 49.5%,
        rgba(255, 193, 7, 0.1) 50.5%,
        transparent 50.5%
    );
    background-size: 100px 100%;
    opacity: 0.5;
    z-index: 0;
    animation: featuresLines 20s linear infinite;
}

@keyframes featuresLines {
    from { background-position: 0 0; }
    to { background-position: -200px 0; }
}


.features-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.features-content {
    max-width: 800px; /* Constrain text width */
    text-align: center;
    padding: 3rem 0; /* Add some vertical spacing */
    background: rgba(18, 18, 20, 0.6); /* Semi-transparent overlay */
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

#features h2 {
    color: var(--light-text);
    text-shadow: 0 0 15px var(--yellow-glow); /* Glowing text */
    margin-bottom: 1.5rem;
    font-size: clamp(2.5rem, 7vw, 3.8rem); /* Adjust size */
}

#features h2 span {
     /* Override general style - use solid glowing color */
     background: none;
     -webkit-background-clip: unset;
     background-clip: unset;
     -webkit-text-fill-color: unset;
     color: var(--yellow-light); /* Glowing yellow */
}

/* Remove underline */
#features h2::after {
    display: none;
}

#features p {
    color: var(--light-text-secondary);
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    line-height: 1.8;
    max-width: 650px; /* Tighter paragraph */
    margin-bottom: 0; /* Remove bottom margin inside content box */
}

/* Remove old ::after glow */
#features::after {
    display: none;
}

/* Optional: Add subtle border glow to content box */
.features-content::before {
    content: '';
    position: absolute;
    inset: -1px; /* Position slightly outside */
    border-radius: inherit; /* Match parent border-radius */
    background: linear-gradient(135deg, transparent, var(--yellow-glow), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-speed-med) ease;
}

.features-container:hover .features-content::before {
    opacity: 0.8; /* Show glow on container hover */
}


/* --- Enhanced Integration/Accuracy Sections --- */
#seamless-integrations {
     background: linear-gradient(140deg, var(--dark-bg) 0%, var(--dark-bg-medium) 100%);
     /* Adjust top padding to account for #features change */
     padding-top: var(--section-gap);
     padding-bottom: calc(var(--section-gap) / 2); /* Keep reduced bottom padding */
}

#unmatched-accuracy {
     background: linear-gradient(220deg, var(--dark-bg) 0%, var(--dark-bg-medium) 100%);
     padding-top: calc(var(--section-gap) / 2); /* Keep reduced top padding */
     padding-bottom: calc(var(--section-gap) + 8rem); /* Keep large bottom padding */
}

/* Split Layout */
.section-layout-split {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 4rem;
}

@media screen and (min-width: 992px) {
    .section-layout-split {
        grid-template-columns: repeat(2, 1fr);
        gap: 6rem;
    }
    /* Reverse column order for accuracy section */
    .section-layout-split.reverse .section-text {
        order: 2;
    }
    .section-layout-split.reverse .section-visual {
        order: 1;
    }
}

.section-text {
    text-align: left;
}

.section-text h2 {
    text-align: left;
    display: block; /* Remove inline-block for left align */
    margin-bottom: 2rem;
}

.section-text h2 span {
    padding: 0; /* Remove padding from general h2 span style */
    background: linear-gradient(120deg, var(--accent-dark) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-text p {
    margin-left: 0;
    margin-right: 0;
    max-width: none; /* Allow text to fill column */
    color: var(--light-text-secondary);
}

.highlight-text {
    color: var(--yellow-light);
    font-weight: 700;
}

/* Visual Element Placeholders */
.section-visual {
    min-height: 300px; /* Ensure space on mobile */
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Integrations Visual (Abstract Flow Lines) */
.integrations-visual::before,
.integrations-visual::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    mix-blend-mode: screen;
    animation: pulseGlow 4s infinite ease-in-out alternate;
}

.integrations-visual::before {
    width: 80%;
    padding-bottom: 80%;
    background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
    left: -20%;
    top: 0;
    animation-delay: -2s;
}

.integrations-visual::after {
    width: 60%;
    padding-bottom: 60%;
    background: radial-gradient(circle, var(--yellow) 0%, transparent 70%);
    right: -10%;
    bottom: -10%;
}

@keyframes pulseGlow {
    from { opacity: 0.1; transform: scale(0.95); }
    to   { opacity: 0.25; transform: scale(1.05); }
}

/* Accuracy Visual (Target/Precision) */
.accuracy-visual {
    perspective: 800px;
}

.accuracy-visual::before {
    content: '';
    display: block;
    width: 250px;
    height: 250px;
    border: 3px solid var(--yellow-glow);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 30px var(--yellow-glow), inset 0 0 20px var(--yellow-glow);
    animation: spin3D 15s linear infinite, accuracyPulse 3s infinite ease-in-out alternate;
}

.accuracy-visual::after {
    content: '+'; /* Crosshair */
    position: absolute;
    font-size: 5rem;
    font-weight: 100;
    color: var(--yellow-light);
    text-shadow: 0 0 15px var(--yellow-glow);
    animation: spin3D 15s linear infinite reverse; /* Counter-rotate */
}

@keyframes spin3D {
    from { transform: rotateY(0deg) rotateX(5deg); }
    to   { transform: rotateY(360deg) rotateX(5deg); }
}

@keyframes accuracyPulse {
    from { opacity: 0.6; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- Pricing Section --- */
#pricing {
    background-color: var(--yellow);
    color: var(--dark-text);
    padding: calc(var(--section-gap) + 7rem) 0 calc(var(--section-gap) + 3rem);
    position: relative;
    overflow: hidden;
    z-index: 4;
    clip-path: ellipse(130% 100% at 50% 0%);
}

#pricing h2 {
    color: var(--dark-text);
    margin-bottom: 1.5rem; /* Reduced margin */
}

#pricing h2 span {
    background: linear-gradient(120deg, #333 0%, #000 100%);
    -webkit-background-clip: text;
     background-clip: text;
}

#pricing > .container > p { /* Target the intro paragraph */
    color: rgba(10, 10, 10, 0.85);
    max-width: 750px; /* Adjust width */
    margin-bottom: 4rem;
}

/* Pricing Options Layout */
.pricing-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 5rem; /* Space before comparison table */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 768px) {
    .pricing-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

.pricing-option {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform var(--transition-speed-med) ease, box-shadow var(--transition-speed-med) ease;
    position: relative;
    overflow: hidden;
}

.pricing-option:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(0,0,0,0.15);
}

/* Featured Option Styling */
.pricing-option.featured {
    border-color: var(--yellow-dark);
    box-shadow: 0 18px 40px rgba(0,0,0,0.15), 0 0 15px var(--yellow-glow);
}

.pricing-option.featured:hover {
     box-shadow: 0 25px 50px rgba(0,0,0,0.2), 0 0 20px var(--yellow-glow);
}

.pricing-icon {
    font-size: 2.5rem;
    color: var(--yellow-dark);
    margin-bottom: 1.5rem;
    line-height: 1;
}

.pricing-option.featured .pricing-icon {
    color: var(--accent-dark);
}

.pricing-option h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #333;
}

.price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark-text);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.pricing-subtext {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.pricing-option p:not(.pricing-subtext) {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0; /* Remove default p margin */
}

/* Comparison Table Adjustments */
.comparison-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 2.5rem;
    text-align: center;
}

.modern-table.pricing-table {
    margin-top: 0; /* Remove top margin as title handles spacing */
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
    margin-left: auto; /* Ensure centering */
    margin-right: auto; /* Ensure centering */
}

.modern-table.pricing-table th {
    background-color: rgba(0, 0, 0, 0.03);
    font-size: 0.85rem;
    padding: 1.3rem 1.8rem;
    font-weight: 700; /* Make header bolder */
    color: #444;
}

/* Align specific columns */
.modern-table.pricing-table th:nth-child(1),
.modern-table.pricing-table td:nth-child(1) {
    text-align: left;
}
.modern-table.pricing-table th:nth-child(2),
.modern-table.pricing-table td:nth-child(2),
.modern-table.pricing-table th:nth-child(3),
.modern-table.pricing-table td:nth-child(3) {
    text-align: center; /* Center Price and Accuracy */
}

.modern-table.pricing-table td {
    padding: 1.5rem 1.8rem; /* Slightly more vertical padding */
    font-size: 1.1rem; /* Slightly larger cell text */
    vertical-align: middle;
}

/* Add alternating row colors for readability */
.modern-table.pricing-table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.02);
}

.modern-table.pricing-table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.04); /* Adjust hover slightly */
}

/* Keep highlight row styles */
.modern-table.pricing-table tr.highlight-row td {
    font-weight: 700;
    color: #3a2f00;
}
.modern-table.pricing-table tr.highlight-row:hover td {
     background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.35)); /* Maintain hover distinction */
}
.modern-table.pricing-table tr.highlight-row td:first-child::before {
    content: '🚀';
    margin-right: 12px;
    font-size: 1.1em;
}

/* --- Compliance Section Revamp --- */
#compliance {
    background: linear-gradient(160deg, var(--dark-bg-lighter) 0%, var(--dark-bg) 100%);
    padding: var(--section-gap) 0;
    position: relative;
    z-index: 2;
}

#compliance h2 {
    margin-bottom: 4rem;
    color: var(--light-text);
}

/* Remove old table style reference */
/* #compliance .modern-table { ... } */

/* Compliance Grid Layout */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.compliance-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);
    padding: 1.5rem 1.8rem; /* Reduced top/bottom padding */
    border: 1px solid var(--shadow-color-light);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    text-align: left;
    transition: transform var(--transition-speed-med) ease, box-shadow var(--transition-speed-med) ease;
    position: relative;
    overflow: hidden;
}

.compliance-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 40%);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

.compliance-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 15px var(--accent-glow);
    border-color: rgba(168, 85, 247, 0.3);
}

.compliance-card:hover::before {
    opacity: 0.2;
    transform: scale(1);
}

.compliance-card > * { /* Ensure content is above pseudo-elements */
    position: relative;
    z-index: 1;
}

.compliance-card h3 {
    font-size: 1.05rem; /* Slightly smaller heading */
    font-weight: 700;
    color: var(--yellow-light);
    margin-bottom: 1rem; /* Reduced margin */
    display: flex;
    align-items: center;
    gap: 0.7rem; /* Slightly reduced gap */
    border-bottom: 1px solid var(--shadow-color-light);
    padding-bottom: 0.8rem; /* Reduced padding */
}

.compliance-card h3 i {
    font-size: 1.2em; /* Adjust icon size if needed */
    opacity: 0.7;
}

.compliance-detail {
    margin-bottom: 0.8rem; /* Reduced margin */
}

.compliance-detail strong {
    display: block;
    font-size: 0.8rem; /* Slightly smaller label */
    color: var(--light-text-secondary);
    margin-bottom: 0.2rem; /* Reduced margin */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.compliance-detail span {
    font-size: 0.95rem; /* Slightly smaller text */
    color: var(--light-text);
    line-height: 1.45;
}

.compliance-penalty span {
    font-weight: 700;
    color: var(--accent-light);
}

/* --- Entities Section --- */
#entities {
    background-color: var(--yellow);
    color: var(--dark-text);
    padding: calc(var(--section-gap) + 8rem) 0 calc(var(--section-gap)); /* Overlap adjustment */
    position: relative;
    z-index: 1;
    clip-path: ellipse(120% 100% at 50% 0%); /* Match pricing curve */
    margin-top: -8rem; /* Adjust for overlap */
}

#entities h2 {
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    color: var(--dark-text);
}

#entities h2 span {
    background: linear-gradient(120deg, #333 0%, #000 100%);
    -webkit-background-clip: text;
     background-clip: text;
}

#entities ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 4rem;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

#entities li {
    font-size: 1rem;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    display: inline-block;
    transition: all var(--transition-speed-med) cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: default;
    box-shadow: 0 5px 10px var(--shadow-color-medium);
    will-change: transform, box-shadow;
}

#entities li:hover {
    background-color: var(--dark-text);
    color: var(--yellow-light);
    transform: translateY(-5px) scale(1.08) rotate(-2deg);
    box-shadow: 0 10px 20px var(--shadow-color-dark);
}

#entities p {
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: rgba(10, 10, 10, 0.8);
}

/* --- Calendar Section --- */
#calendar {
    background-color: var(--dark-bg);
    padding: var(--section-gap) 0;
    position: relative;
    z-index: 0;
}

#calendar h2 {
    margin-bottom: 4rem;
    color: var(--light-text);
}

.calendly-inline-widget {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 30px 70px var(--shadow-color-dark);
    min-height: 720px;
    transition: transform var(--transition-speed-med) cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow var(--transition-speed-med) ease;
    will-change: transform, box-shadow;
}

.calendly-inline-widget:hover {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 40px 80px var(--shadow-color-dark), 0 0 25px var(--accent-glow);
}

/* --- Footer Styling --- */
footer {
    background-color: var(--dark-bg-medium);
    padding: 4rem 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--light-text-secondary);
    position: relative;
    border-top: 1px solid var(--shadow-color-light);
    margin-top: calc(var(--section-gap) / 2); /* Add space before footer */
}

footer p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* --- Epic Animations & Effects --- */

/* Keyframes */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-50px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* Enhanced Scroll Animation Triggering */
.animate-on-scroll {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-duration: var(--transition-speed-slow);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastic ease */
}

.animate-on-scroll.fade-in-up {
    transform: translateY(60px);
}
.animate-on-scroll.fade-in-down {
    transform: translateY(-60px);
}
.animate-on-scroll.scale-in {
    transform: scale(0.85);
}

/* In View State */
.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Enhanced Stagger */
.stagger-children > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--transition-speed-med) ease-out, transform var(--transition-speed-med) ease-out;
    will-change: transform, opacity;
}

.stagger-children.in-view > * {
    opacity: 1;
    transform: translateY(0);
}

/* --- Improved Loading/Feedback States --- */
textarea.loading-example {
    background: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2) 12px,
        rgba(0, 0, 0, 0.28) 12px,
        rgba(0, 0, 0, 0.28) 24px
    );
    animation: loadingSlide 1s linear infinite;
    background-size: 34px 34px; /* Adjust pattern size */
}

#output-text.loading {
    color: transparent;
    background: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 12px,
        rgba(0, 0, 0, 0.23) 12px,
        rgba(0, 0, 0, 0.23) 24px
    );
    animation: loadingSlide 1s linear infinite;
    background-size: 34px 34px;
}

@keyframes loadingSlide {
    from { background-position: 0 0; }
    to   { background-position: 34px 0; }
}

/* Refined Border Pulse */
#output-text.success,
#output-text.error {
    animation: borderPulseFeedback 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#output-text.success {
    border-color: #4CAF50 !important;
    --pulse-color-feedback: rgba(76, 175, 80, 0.7);
}
#output-text.error {
    border-color: #FF5722 !important;
    --pulse-color-feedback: rgba(255, 87, 34, 0.7);
}

@keyframes borderPulseFeedback {
    0% { box-shadow: 0 12px 30px var(--shadow-color-dark), inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 0px var(--pulse-color-feedback); }
    40% { box-shadow: 0 12px 30px var(--shadow-color-dark), inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 12px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 12px 30px var(--shadow-color-dark), inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 0px rgba(0, 0, 0, 0); }
}

/* Refined Shake */
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

#input-text.shake {
    animation: shake 0.75s cubic-bezier(.36,.07,.19,.97) both;
}

/* --- Responsive Fine-tuning --- */

@media screen and (max-width: 992px) {
    :root { --section-gap: 7rem; }
    .container {
        max-width: 960px;
    }
    h1 { font-size: clamp(2.8rem, 7vw, 4.5rem); }
    h2 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
}

@media screen and (max-width: 768px) {
    :root { --section-gap: 6rem; }
    header {
        padding: 5rem 0 calc(var(--section-gap) + 1.5rem);
    }

    .modern-table th,
    .modern-table td {
        padding: 1.2rem 1rem;
        font-size: 0.95rem;
    }
    #compliance .modern-table th,
    #compliance .modern-table td {
        font-size: 0.9rem;
        padding: 1.1rem 0.8rem;
    }

    #try-now-btn {
        padding: 1.2rem 4rem;
        font-size: 1.15rem;
    }

    #features {
        padding: calc(var(--section-gap) - 1rem) 0; /* Adjust mobile padding */
    }
    .features-content {
        padding: 2rem 1.5rem;
    }
    #features h2 {
        font-size: clamp(2.2rem, 6vw, 3rem);
    }
    #features p {
        font-size: clamp(1rem, 2.5vw, 1.15rem);
    }

    #seamless-integrations {
        padding-top: var(--section-gap);
    }
    #unmatched-accuracy {
        padding-bottom: calc(var(--section-gap) + 6rem); /* Keep adjusted bottom padding */
    }
}

@media screen and (max-width: 576px) {
    :root {
        --section-gap: 5rem;
        --border-radius: 16px;
    }
    .container {
        padding: 0 1rem;
    }
    header {
        padding: 4rem 0 calc(var(--section-gap));
    }
    h1 { font-size: clamp(2.4rem, 8vw, 3.5rem); }
    h2 { font-size: clamp(2rem, 7vw, 2.6rem); }
    p { font-size: clamp(1rem, 3.5vw, 1.1rem); }

    #try-it textarea {
        height: 340px;
        padding: 1.5rem;
    }

    /* Stacked Table Refinements */
    .modern-table tr {
        margin-bottom: 1.5rem;
        border-radius: var(--border-radius-sm);
    }

    .modern-table td {
        padding-left: 50%; /* Keep label space */
        border-bottom: 1px solid var(--shadow-color-light);
    }
    #pricing .modern-table td { border-bottom-color: rgba(0,0,0,0.1); }

    .modern-table td::before {
        left: 1.2rem;
        width: 45%;
        color: var(--accent-light);
        font-size: 0.85em;
        font-weight: 700;
        opacity: 0.85;
    }
    #pricing .modern-table td::before {
        color: var(--dark-text);
        font-weight: 700;
    }

    #entities ul {
        gap: 1rem;
    }
    #entities li {
        font-size: 0.95rem;
        padding: 0.6rem 1.2rem;
    }
    #features,
    #pricing,
    #entities {
        clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
        margin-top: -4rem;
        margin-bottom: -4rem;
    }
     #seamless-integrations, #unmatched-accuracy, #pricing, #entities {
        padding-top: calc(var(--section-gap) + 4rem);
    }

    /* Adjust Compliance Cards */
    .compliance-grid {
        grid-template-columns: 1fr; /* Stack cards */
        gap: 1.5rem;
    }
    .compliance-card {
        padding: 1.2rem 1.5rem; /* Adjust mobile padding too */
    }
    .compliance-card h3 {
        font-size: 1rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.7rem;
    }
    .compliance-detail span {
        font-size: 0.9rem;
    }

    /* Adjustments for stacked pricing table */
     .modern-table.pricing-table td {
        padding-left: 50%; /* Keep label space */
        font-size: 1rem;
        text-align: right; /* Right align value on mobile */
    }
    .modern-table.pricing-table td:nth-child(1) {
         text-align: right; /* Override for consistency */
    }
    .modern-table.pricing-table td::before {
        text-align: left; /* Ensure label is left aligned */
        width: 45%;
        /* ... */
    }
}

@media screen and (max-width: 991px) {
    .section-layout-split {
        gap: 3rem;
    }
    .section-text {
        text-align: center; /* Center text on mobile */
    }
    .section-text h2 {
        text-align: center;
    }
    .section-text p {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
    }
    .section-visual {
        min-height: 250px;
        margin-top: 2rem;
    }
    .accuracy-visual::before {
        width: 200px;
        height: 200px;
    }
     /* Adjust padding for accuracy */
     #unmatched-accuracy {
          padding-bottom: calc(var(--section-gap) + 6rem);
     }
     /* Adjust padding for seamless-integrations on mobile too */
     #seamless-integrations {
         padding-bottom: calc(var(--section-gap) / 2);
     }
     #unmatched-accuracy {
         padding-top: calc(var(--section-gap) / 2);
         padding-bottom: calc(var(--section-gap) + 6rem); /* Keep adjusted bottom padding */
     }
}

@media screen and (max-width: 767px) {
     .pricing-options {
        max-width: 450px; /* Limit width when stacked */
    }
}

@media screen and (max-width: 576px) {
    /* ... */
     .pricing-option {
         padding: 2rem 1.5rem;
     }
    .price {
        font-size: 1.8rem;
    }
    .comparison-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    /* Adjustments for stacked pricing table */
     .modern-table.pricing-table td {
        padding-left: 50%; /* Keep label space */
        font-size: 1rem;
        text-align: right; /* Right align value on mobile */
    }
    .modern-table.pricing-table td:nth-child(1) {
         text-align: right; /* Override for consistency */
    }
    .modern-table.pricing-table td::before {
        text-align: left; /* Ensure label is left aligned */
        width: 45%;
        /* ... */
    }
    /* ... */
}

/* ... */