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

:root {
    --bg-dark: #0B0B0B;
    --bg-darker: #050505;
    --bg-card: #111111;
    --text-white: #FFFFFF;
    --text-gray: #A0A0A0;
    --accent-violet: #7B61FF;
    --accent-glow: rgba(123, 97, 255, 0.4);
    --border-subtle: rgba(255, 255, 255, 0.1);

    --font-main: 'Inter', sans-serif;

    --transition-fast: 0.3s ease;
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 6rem 0;
}

.text-gradient {
    background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-accent {
    color: var(--accent-violet);
}

/* Button & CTAs */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    font-weight: 500;
    border-radius: 4px;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
    transition: var(--transition-fast);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--accent-violet);
    color: white;
    box-shadow: 0 0 20px rgba(123, 97, 255, 0.2);
}

.btn-primary:hover {
    box-shadow: 0 0 30px rgba(123, 97, 255, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-white);
}

.btn-secondary:hover {
    border-color: var(--accent-violet);
    color: var(--accent-violet);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 0;
    z-index: 1000;
    background: transparent;
    /* Transparent to blend with light hero */
    border-bottom: 1px solid transparent;
    transition: all 0.4s ease;
}

.header.scrolled {
    background: #FFFFFF;
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

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

.nav-link {
    font-size: 0.9rem;
    color: #333;
    /* Dark text for light background */
    font-weight: 500;
}

.nav-link:hover {
    color: var(--accent-violet);
}

/* Hero Section - Redesigned Light Theme */
/* Hero Section - Redesigned Light Theme */
.hero {
    min-height: 100vh;
    /* Full height */
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 5rem;
    overflow: hidden;
    background-color: #F8F9FE;
    /* Light background from reference */
    color: var(--bg-dark);
    /* Dark text for contrast */
}

.hero::before {
    display: none;
    /* Remove dark radial gradient */
}

/* Background elements for light theme */
.hero::after {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(123, 97, 255, 0.08) 0%, rgba(248, 249, 254, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-content-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text-col {
    max-width: 100%;
}

.hero-image-col {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-image-col img {
    max-width: 120%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(123, 97, 255, 0.15));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Mobile Hero Image (Hidden on Desktop) */
.mobile-hero-img {
    display: none;
    max-width: 180px;
    /* Small size as requested */
    width: 100%;
    height: auto;
    margin: 0 auto 1.5rem auto;
    filter: drop-shadow(0 10px 20px rgba(123, 97, 255, 0.15));
    animation: float 6s ease-in-out infinite;
}

.hero-title {
    font-size: 3.5rem;
    /* Slightly smaller to fit 2 cols */
    margin-bottom: 1.5rem;
    line-height: 1.15;
    color: var(--bg-dark);
    /* Dark text */
}

.highlight-squiggle {
    position: relative;
    white-space: nowrap;
    z-index: 1;
}

.highlight-squiggle::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 20 50 10 T 100 10' stroke='%237B61FF' stroke-width='4' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: #555;
    /* Medium Gray */
    margin-bottom: 2.5rem;
    max-width: 90%;
}

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

/* Secondary CTA with Arrow */
.secondary-cta-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.curved-arrow-svg {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 40px;
    margin-left: 1rem;
    pointer-events: none;
}

.secondary-cta-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #FF8F00;
    /* Orange/Gold accent from reference */
    line-height: 1.2;
    display: block;
    width: 100px;
    margin-top: 10px;
    /* Offset for line */
    margin-left: 4.5rem;
}

/* Responsive Hero */
@media (max-width: 900px) {
    .hero-content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .hero-image-col {
        display: none !important;
        /* Hide desktop image column */
    }

    .mobile-hero-img {
        display: block;
        /* Show specific mobile image */
    }

    .hero {
        min-height: 100vh;
        height: auto;
        padding-top: 6rem;
        padding-bottom: 2rem;
        display: flex;
        align-items: center;
        /* Center content vertically */
    }

    .hero-image-col img {
        max-width: 80%;
    }

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

    .secondary-cta-wrapper {
        display: none;
        /* Hide complex arrow on mobile */
    }
}


/* Background elements for light theme */
.hero::after {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(123, 97, 255, 0.08) 0%, rgba(248, 249, 254, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-content-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text-col {
    max-width: 100%;
}

.hero-image-col {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-image-col img {
    max-width: 120%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(123, 97, 255, 0.15));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.hero-title {
    font-size: 3.5rem;
    /* Slightly smaller to fit 2 cols */
    margin-bottom: 1.5rem;
    line-height: 1.15;
    color: var(--bg-dark);
    /* Dark text */
}

.highlight-squiggle {
    position: relative;
    white-space: nowrap;
    z-index: 1;
}

.highlight-squiggle::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 20 50 10 T 100 10' stroke='%237B61FF' stroke-width='4' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: #555;
    /* Medium Gray */
    margin-bottom: 2.5rem;
    max-width: 90%;
}

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

/* Secondary CTA with Arrow */
.secondary-cta-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.curved-arrow-svg {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 40px;
    margin-left: 1rem;
    pointer-events: none;
}

/* Hero Benefits (Chips) */
.hero-benefits {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 3rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    /* Removed button styling */
    padding: 0;
    background: transparent;
    border: none;
    color: #333;
    transition: var(--transition-fast);
}

.benefit-item:hover {
    /* Removed hover background */
    transform: translateY(-2px);
}

.secondary-cta-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #FF8F00;
    /* Orange/Gold accent from reference */
    line-height: 1.2;
    display: block;
    width: 100px;
    margin-top: 10px;
    /* Offset for line */
    margin-left: 4.5rem;
}

/* Update Nav for Light Hero background if needed */
/* We'll keep the nav floating dark for contrast or change it? 
   The reference has a clean white nav. 
   Let's keep the dark nav for now as "Corvus" identity, 
   but maybe make it less translucent black? 
   Let's leave it as is, the contrast is okay (Black bar on Light BG). 
   Actually, Sdot has a transparent nav with black text. 
   I will switch Nav to be context aware? Too complex for CSS only easily.
   I will make the header background dark solid for now to separate it. */


/* Section Headlines */
.section-header {
    margin-bottom: 4rem;
    text-align: center;
}

.section-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--accent-violet);
    margin-bottom: 1rem;
    display: block;
}

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

/* Services Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 2.5rem;
    border-radius: 8px;
    transition: var(--transition-fast);
}

.card:hover {
    border-color: var(--accent-violet);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}

.card-icon {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--accent-violet);
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.card-text {
    color: var(--text-gray);
    font-size: 0.95rem;
}

/* Workflow Section (Horizontal Steps) */
.workflow-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.step {
    flex: 1;
    min-width: 200px;
    position: relative;
    text-align: center;
}

.step-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 2;
    transition: var(--transition-fast);
}

.step:hover .step-img {
    transform: scale(1.1) translateY(-5px);
    filter: drop-shadow(0 0 20px rgba(123, 97, 255, 0.4));
}

.step-content {
    padding: 0 1rem;
}

.step-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Connecting line for workflow - Only visible on large screens */
@media (min-width: 900px) {
    .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 40px;
        left: 50%;
        width: calc(100% + 2rem);
        height: 2px;
        background: linear-gradient(90deg, var(--accent-violet) 0%, rgba(123, 97, 255, 0.5) 100%);
        z-index: 0;
        opacity: 0.6;
    }
}

/* Use Cases */
.use-case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.use-case-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 2rem;
    border-left: 2px solid var(--accent-violet);
}

/* Tech Stack (Simple list) */
.tech-flex {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    opacity: 0.7;
}

.tech-item {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Final CTA */
.cta-section {
    background: var(--bg-darker);
    text-align: center;
    border-top: 1px solid var(--border-subtle);
}

.cta-box h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

/* Footer */
.footer {
    padding: 4rem 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-gray);
    font-size: 0.9rem;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .section {
        padding: 4rem 0;
    }

    .hero {
        padding-top: 6rem;
        text-align: center;
    }

    .hero-title {
        font-size: 2.2rem;
        word-wrap: break-word;
        margin-bottom: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
        width: 100%;
        max-width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Ensure secondary CTA is hidden on small screens if it causes issues, 
       or style it to stack below */
    .secondary-cta-wrapper {
        display: none !important;
    }

    .hero-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

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

    .use-case-grid {
        grid-template-columns: 1fr;
    }

    .nav-links {
        display: none;
    }
}