/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #f47c21;
    --primary-dark: #000000;
    --primary-light: #f47c21;
    --secondary-color: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --text-lighter: #9ca3af;
    --bg-white: #ffffff;
    --bg-gray: #f9fafb;
    --bg-light: #f3f4f6;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --container-max: 1200px;
    --transition: all 0.3s ease;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-white);
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.nav-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.nav.scrolled .nav-links a {
    color: var(--text-dark);
}

.nav-links a:hover {
    color: var(--primary-light);
}

.nav.scrolled .nav-links a:hover {
    color: var(--primary-color);
}

/* Special style for Back to Home link */
.nav-links a[href="index.html"] {
    font-weight: 600;
    color: var(--primary-color);
    position: relative;
    padding-left: 1rem;
}

.nav-links a[href="index.html"]::before {
    content: "←";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.nav-links a[href="index.html"]:hover {
    color: var(--primary-dark);
    transform: translateX(-2px);
}
/* 导航栏按钮 */
.nav-cta {
    background: var(--primary-color);
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: var(--transition);
    border: 1px solid var(--primary-color);
}

.nav-cta:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.nav-toggle span {
    width: 1.5rem;
    height: 2px;
    background: white;
    margin: 2px 0;
    transition: var(--transition);
}

.nav.scrolled .nav-toggle span {
    background: var(--text-dark);
}

/* Hero Section with Paper-Design Grain Gradient */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 4rem;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.grain-gradient {
    width: 100%;
    height: 100%;
    background:
        /* Paper grain texture */
        radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(139, 92, 246, 0.05) 0%, transparent 70%),
        /* Gradient overlay */
        linear-gradient(135deg,
            rgba(99, 102, 241, 0.02) 0%,
            rgba(139, 92, 246, 0.03) 25%,
            rgba(245, 158, 11, 0.02) 50%,
            rgba(99, 102, 241, 0.03) 75%,
            rgba(139, 92, 246, 0.02) 100%
        ),
        /* Noise texture */
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjYSIpIG9wYWNpdHk9Ii4wMyIvPjwvc3ZnPg==');
    background-size: 300px 300px, 100% 100%, 100% 100%, 300px 300px;
    background-position: 0 0, 0 0, 0 0, 0 0;
    animation: grain 8s steps(10) infinite;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

.hero-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f47c21 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: white;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.6;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-demo {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 16/10;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.demo-interface {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1rem;
    height: 100%;
}

.demo-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demo-frame {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.demo-frame.active {
    background: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.demo-editor {
    background: var(--bg-gray);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.demo-textarea {
    flex: 1;
    background: white;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.demo-controls {
    height: 2rem;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.demo-params {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demo-param {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}
/* 主按钮 */
/* .btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
} */
.btn {
  outline: none;
  color: var(--primary-color);
  padding: 1em;
  padding-left: 3em;
  padding-right: 3em;
  border: 2px dashed #DAA06D;
  border-radius: 15px;
  background-color: #EADDCA;
  box-shadow: 0 0 0 4px #EADDCA, 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
  transition: .1s ease-in-out, .4s color;
}

.btn-primary:active {
  transform: translateX(0.1em) translateY(0.1em);
  box-shadow: 0 0 0 4px #EADDCA, 1.5px 1.5px 2.5px 1.5px rgba(0, 0, 0, 0.5);
}


.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Section Styles */
section {
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.section-header p {
    font-size: 1.125rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* Value Propositions */
.value-props {
    background: var(--bg-gray);
}

.value-props-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.value-prop {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.value-prop:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.value-prop-icon {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
}

.value-prop h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.value-prop p {
    color: var(--text-light);
    line-height: 1.6;
}

/* How It Works */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.step {
    text-align: center;
    position: relative;
}

.step-number {
    width: 3rem;
    height: 3rem;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.step h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.step p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Use Cases */
.use-cases {
    background: var(--bg-gray);
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.use-case {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.use-case:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.use-case h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
    flex-shrink: 0;
}

.use-case p {
    color: var(--text-light);
    margin-bottom: auto;
    line-height: 1.6;
    flex-grow: 1;
    min-height: 4.8rem; /* Ensure consistent height for descriptions */
}

.use-case-cta {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.use-case-cta:hover {
    color: var(--primary-dark);
    transform: translateX(4px);
}

/* Social Proof */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-light);
    font-weight: 500;
}

.testimonial {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.testimonial p {
    font-size: 1.125rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-style: italic;
}

.testimonial-author {
    color: var(--text-light);
    font-weight: 600;
}

/* Final CTA */
.final-cta {
    background: var(--primary-color);
    color: white;
    text-align: center;
}

.final-cta h2 {
    color: white;
    margin-bottom: 1rem;
}

.final-cta p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-size: 1.125rem;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.cta-links {
    display: flex;
    gap: 2rem;
}

.cta-links a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: var(--transition);
}

.cta-links a:hover {
    color: white;
}

/* Features */
.features {
    background: var(--bg-gray);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.feature {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.feature:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.feature h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.feature p {
    color: var(--text-light);
    line-height: 1.6;
}

/* FAQ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
    transition: var(--transition);
    overflow: hidden;
}

.faq-item:hover {
    box-shadow: var(--shadow-lg);
}

.faq-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: 1.5rem 2rem;
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    position: relative;
}

.faq-item h3::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-color);
    transition: var(--transition);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
}

.faq-item.active h3::after {
    content: '−';
    background: var(--primary-color);
    color: white;
}

.faq-item h3:hover {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.02);
}

.faq-item p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-item.active p {
    padding: 0 2rem 1.5rem 2rem;
    max-height: 500px;
    transition: max-height 0.3s ease-in, padding 0.3s ease-in;
}

.faq-item:not(.active) {
    border: 1px solid var(--border-color);
}

.faq-item.active {
    border: 1px solid var(--primary-color);
    box-shadow: var(--shadow-lg);
}

/* Breadcrumb */
.breadcrumb {
    background: var(--bg-gray);
    padding: 1rem 0;
    padding-top: calc(1rem + 4rem); /* Account for fixed navigation height */
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--text-lighter);
}

.breadcrumb-current {
    color: var(--primary-color);
    font-weight: 500;
}

/* Legal Main Content */
.legal-main {
    background: var(--bg-white);
    padding: 4rem 0;
    padding-top: 2rem; /* Reduced padding since breadcrumb already provides spacing */
    min-height: calc(100vh - 200px);
}

.legal-summary {
    background: linear-gradient(135deg, rgba(244, 124, 33, 0.1) 0%, rgba(244, 124, 33, 0.05) 100%);
    border: 1px solid rgba(244, 124, 33, 0.2);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

.legal-summary h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.legal-summary p {
    color: var(--text-dark);
    font-size: 1.1rem;
    line-height: 1.6;
}

.legal-action {
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-top: 3rem;
    text-align: center;
}

.legal-action h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.legal-action p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.legal-action .btn {
    background: white;
    color: var(--primary-color);
}

.legal-action .btn:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
}

/* Legal Sections */
.legal-section {
    background: var(--bg-white);
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    text-align: center;
}

.legal-updated {
    text-align: center;
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 3rem;
    font-style: italic;
}

.legal-block {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.legal-block:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.legal-block h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
}

.legal-block p {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.legal-block ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

.legal-block li {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.legal-block strong {
    color: var(--text-dark);
    font-weight: 600;
}

.legal-block a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.legal-block a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Legal Section Responsive */
@media (max-width: 768px) {
    .legal-section {
        padding: 3rem 0;
    }

    .legal-content h1 {
        font-size: 2rem;
    }

    .legal-block {
        padding: 1.5rem;
    }

    .legal-block h2 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .legal-section {
        padding: 2rem 0;
    }

    .legal-content h1 {
        font-size: 1.75rem;
    }

    .legal-block {
        padding: 1rem;
    }

    .legal-block ul {
        padding-left: 1.5rem;
    }
}

/* Footer */
.footer {
    background: var(--text-dark);
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.footer-section a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .value-props-grid,
    .use-cases-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-links {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .faq-item h3 {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .faq-item p {
        padding: 0 1.5rem 1rem 1.5rem;
    }

    .faq-item.active p {
        padding: 0 1.5rem 1rem 1.5rem;
    }
}

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

/* Loading States */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Focus States */
.btn:focus,
a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Navigation Logo Styles */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-logo-text {
    color: white;
    transition: var(--transition);
}

.nav.scrolled .nav-logo-text {
    color: var(--primary-color);
}

.nav-logo-icon {
    width: 32px;
    height: 32px;
    transition: var(--transition);
    filter: brightness(0) invert(1);
}

.nav.scrolled .nav-logo-icon {
    filter: none;
}

.nav-logo:hover .nav-logo-icon {
    transform: scale(1.1);
}

/* Value Prop Icons */
.value-prop-img {
    width: 48px;
    height: 48px;
    transition: var(--transition);
}

.value-prop:hover .value-prop-img {
    transform: scale(1.1);
}

/* Blur Blob Background Animation */
.rain-container {
    position: absolute;
    inset: 0;
    background: #000;
}

.rain-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(
        circle at 50% 50%,
        #0000 0,
        #0000 2px,
        hsl(0 0 4%) 2px
    );
    background-size: 8px 8px;
    animation: blob-blur 5s ease-in-out infinite;
    --f: blur(3em) brightness(9);
}

@keyframes blob-blur {
    0% {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }
    25% {
        backdrop-filter: var(--f) hue-rotate(-25deg);
    }
    28% {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }
    32% {
        backdrop-filter: var(--f) hue-rotate(-20deg);
    }
    39% {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }
    40% {
        backdrop-filter: var(--f) hue-rotate(-20deg);
    }
    41% {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }
    42% {
        backdrop-filter: var(--f) hue-rotate(-25deg);
    }
    44% {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }
    58% {
        backdrop-filter: var(--f) hue-rotate(-20deg);
    }
    64% {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }
    80% {
        backdrop-filter: var(--f) hue-rotate(-25deg);
    }
    to {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }
}

.rain-container::before {
    content: "";
    position: absolute;
    inset: -145%;
    rotate: -45deg;
    --c: #fa0;
    --c1: #f00;
    background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 117.5px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 126px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 75px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 126.5px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 102px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 67px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 89.5px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 149.5px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 107.5px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 140.5px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 79px, var(--c1) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
        radial-gradient(3px 4px at 150px 105px, var(--c1) 100%, #0000 150%);
    background-size:
        300px 235px,
        300px 235px,
        300px 235px,
        300px 252px,
        300px 252px,
        300px 252px,
        300px 150px,
        300px 150px,
        300px 150px,
        300px 253px,
        300px 253px,
        300px 253px,
        300px 204px,
        300px 204px,
        300px 204px,
        300px 134px,
        300px 134px,
        300px 134px,
        300px 179px,
        300px 179px,
        300px 179px,
        300px 299px,
        300px 299px,
        300px 299px,
        300px 215px,
        300px 215px,
        300px 215px,
        300px 281px,
        300px 281px,
        300px 281px,
        300px 158px,
        300px 158px,
        300px 158px,
        300px 210px,
        300px 210px,
        300px 210px;
    animation: blob-move 150s linear infinite;
}

@keyframes blob-move {
    0% {
        background-position:
            0px 220px,
            3px 220px,
            151.5px 337.5px,
            25px 24px,
            28px 24px,
            176.5px 150px,
            50px 16px,
            53px 16px,
            201.5px 91px,
            75px 224px,
            78px 224px,
            226.5px 350.5px,
            100px 19px,
            103px 19px,
            251.5px 121px,
            125px 120px,
            128px 120px,
            276.5px 187px,
            150px 31px,
            153px 31px,
            301.5px 120.5px,
            175px 235px,
            178px 235px,
            326.5px 384.5px,
            200px 121px,
            203px 121px,
            351.5px 228.5px,
            225px 224px,
            228px 224px,
            376.5px 364.5px,
            250px 26px,
            253px 26px,
            401.5px 105px,
            275px 75px,
            278px 75px,
            426.5px 180px;
    }
    to {
        background-position:
            0px 6800px,
            3px 6800px,
            151.5px 6917.5px,
            25px 13632px,
            28px 13632px,
            176.5px 13758px,
            50px 5416px,
            53px 5416px,
            201.5px 5491px,
            75px 17175px,
            78px 17175px,
            226.5px 17301.5px,
            100px 5119px,
            103px 5119px,
            251.5px 5221px,
            125px 8428px,
            128px 8428px,
            276.5px 8495px,
            150px 9876px,
            153px 9876px,
            301.5px 9965.5px,
            175px 13391px,
            178px 13391px,
            326.5px 13540.5px,
            200px 14741px,
            203px 14741px,
            351.5px 14848.5px,
            225px 18770px,
            228px 18770px,
            376.5px 18910.5px,
            250px 5082px,
            253px 5082px,
            401.5px 5161px,
            275px 6375px,
            278px 6375px,
            426.5px 6480px;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 2;
}

/* Print Styles */
@media print {
    .nav,
    .hero-actions,
    .footer {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--primary-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.25rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(244, 124, 33, 0.3);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 124, 33, 0.4);
}

.back-to-top::before {
    content: '↑';
    font-weight: bold;
}

/* Fixed Breadcrumb Navigation */
.breadcrumb.fixed {
    position: fixed;
    top: 4rem; /* Match navigation height */
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    padding: 1rem 0; /* Remove extra top padding since it's already positioned below nav */
}

.breadcrumb.fixed.visible {
    transform: translateY(0);
}

.breadcrumb.fixed .container {
    padding: 0 1.5rem; /* Match original container padding */
    display: flex;
    align-items: center;
    font-size: 0.9rem; /* Match original breadcrumb font size */
}

.breadcrumb.fixed a,
.breadcrumb.fixed span {
    font-size: inherit; /* Keep original font size */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }

    .breadcrumb.fixed {
        top: 4rem; /* Keep same as desktop */
        padding: 0.75rem 0; /* Slightly reduced padding on mobile */
    }

    .breadcrumb.fixed .container {
        padding: 0 1rem; /* Match mobile container padding */
    }
}