/* ===========================
   Design System & Variables
   =========================== */

/* 
   The design system uses CSS custom properties to create consistency across the site.
   This approach lets us define colors once and reuse them everywhere, which makes
   future adjustments trivial. The color system is deliberately minimal - just yellow,
   black, white, and one grey for subtle elements. This restraint creates sophistication.
*/

:root {
    /* Core brand colors */
    --color-yellow: #feff01;
    --color-black: #0a0e27;
    --color-white: #ffffff;
    --color-grey: #666666;
    
    /* Semantic color assignments */
    --color-bg: var(--color-white);
    --color-text: var(--color-black);
    --color-text-light: var(--color-grey);
    --color-accent: var(--color-yellow);
    --color-project-link: var(--color-black);
    
    /* Typography system */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
    
    /* Spacing scale - uses consistent multiples for rhythm */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    --space-2xl: 12rem;
    
    /* Animation timing - custom easing curves for natural motion */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Layout constraints */
    --max-width: 1400px;
    --max-width-text: 800px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: var(--color-black);
        --color-text: var(--color-white);
        --color-text-light: #999999;
        --color-project-link: var(--color-accent);
    }
}

/* ===========================
   Base Styles & Reset
   =========================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    cursor: none; /* Hide default cursor for our custom one */
}

/* 
   Images should never overflow their containers or stretch unnaturally.
   Display block removes the tiny gap that appears under inline images.
*/
img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ===========================
   Custom Cursor
   =========================== */

/*
   The custom cursor system creates that signature interactive feel.
   We actually use two elements - the small dot that follows immediately, and the larger
   circle that trails slightly behind. This creates depth and makes cursor movement feel
   more substantial. The pointer-events none is critical because otherwise the cursor
   elements themselves would block clicks on things underneath them.
*/

.cursor,
.cursor-follower {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference; /* This makes the cursor visible on any background */
}

.cursor {
    width: 16px;
    height: 16px;
    background-color: var(--color-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.15s var(--ease-smooth);
}

/* Hide custom cursor on touch devices where it doesn't make sense */
@media (hover: none) {
    .cursor,
    .cursor-follower {
        display: none;
    }
    
    body {
        cursor: auto;
    }
}

/* ===========================
   Navigation
   =========================== */

/*
   The navigation is fixed but subtle. The backdrop blur creates that modern frosted
   glass effect you see in high-end interfaces. The nav links use a data attribute
   technique for the hover effect - each link's text is repeated in the data-text
   attribute, and we use a pseudo-element to show it on hover with the yellow color.
   This creates a smooth color transition effect that feels more sophisticated than
   just changing the text color directly.
*/

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark) {
    .nav {
        background-color: rgba(10, 14, 39, 0.8);
    }
}

.nav-inner {
    padding: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-image {
    height: auto;
    max-height: 120px;
    width: auto;
    max-width: 50vw;
    display: block;
}

.logo-image-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .logo-image-light {
        display: none;
    }
    
    .logo-image-dark {
        display: block;
    }
}

.logo-text {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

.logo-text-fallback {
    display: none;
}

.nav-menu {
    display: flex;
    gap: var(--space-sm); /* Reduced gap slightly because links now have padding */
    align-items: center;
}

.nav-link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    
    /* NEW: Structure for "Button" Highlights */
    padding: 0.5rem 1rem;
    border-radius: 2px;
    color: var(--color-text); /* Default text color */
    background-color: transparent; /* Default background */
    transition: all 0.2s var(--ease-smooth);
}

.nav-link:hover {
    background-color: var(--color-accent);
    color: var(--color-black); /* Always black text on yellow background */
}

/* ===========================
   The "Spotlight" Logic
   =========================== */

.nav-link[href="#contact"] {
    background-color: var(--color-accent);
    color: var(--color-black);
}

.nav-menu:hover .nav-link[href="#contact"]:not(:hover) {
    background-color: transparent;
    color: var(--color-text);
}

.nav-spacer {
    height: calc(120px + var(--space-md) * 2);
}

@media (max-width: 768px) {
    .nav-spacer {
        height: calc(120px + var(--space-sm) * 2);
    }
}

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 var(--space-lg) var(--space-xl) var(--space-lg);
    position: relative;
}

.hero-inner {
    max-width: var(--max-width);
    width: 100%;
}

.hero-eyebrow {
    margin-bottom: var(--space-md);
    opacity: 0;
    animation: fadeInUp 0.8s var(--ease-smooth) forwards;
}

.hero-eyebrow-text {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.hero-title {
    margin-bottom: var(--space-lg);
    line-height: 0.9;
}

.title-line {
    display: block;
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: fadeInUp 0.8s var(--ease-smooth) forwards;
}

.title-line:nth-child(1) {
    animation-delay: 0.1s;
}

.title-line:nth-child(2) {
    animation-delay: 0.2s;
}

.title-line:nth-child(3) {
    animation-delay: 0.3s;
}

.title-line-accent {
    color: var(--color-accent);
    -webkit-text-stroke: 2px var(--color-text);
    -webkit-text-fill-color: var(--color-accent);
}

.hero-description {
    max-width: var(--max-width-text);
    margin-bottom: var(--space-lg);
    opacity: 0;
    animation: fadeInUp 0.8s var(--ease-smooth) 0.5s forwards;
}

.hero-description p {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.5;
    color: var(--color-text-light);
}

.hero-cta {
    opacity: 0;
    animation: fadeInUp 0.8s var(--ease-smooth) 0.6s forwards;
}

/*
   The primary button uses a technique where the background color fills in from left
   to right on hover. This is achieved with a pseudo-element that's initially scaled
   to zero width and expands on hover. The transform-based animation performs better
   than animating width directly because browsers can optimize transforms using the GPU.
*/

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 1.25rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background-color: var(--color-accent);
    color: var(--color-black);
    position: relative;
    overflow: hidden;
    transition: color 0.3s var(--ease-smooth);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s var(--ease-smooth);
    z-index: -1;
}

.btn-primary:hover {
    color: var(--color-accent);
}

.btn-primary:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-arrow {
    transition: transform 0.3s var(--ease-smooth);
}

.btn-primary:hover .btn-arrow {
    transform: translateX(4px);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    opacity: 0;
    animation: fadeIn 0.8s var(--ease-smooth) 1s forwards;
}

.scroll-text {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.scroll-line {
    width: 1px;
    height: 60px;
    background-color: var(--color-text-light);
    animation: scrollLineMove 2s ease-in-out infinite;
}

/* ===========================
   Work Section
   =========================== */

.work {
    padding: var(--space-2xl) var(--space-lg);
}

.work-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-header {
    margin-bottom: var(--space-xl);
}

.section-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
}

.title-number {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    -webkit-text-stroke: 2px var(--color-text);
    -webkit-text-fill-color: transparent;
}

.title-text {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
}

.projects {
    display: grid;
    gap: var(--space-xl);
}

.project {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.project.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.project:nth-child(even) {
    direction: rtl;
}

.project:nth-child(even) > * {
    direction: ltr;
}

.project-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--color-white);
}

@media (prefers-color-scheme: dark) {
    .project-image {
        background-color: var(--color-black);
    }
}

.project-image-logo {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
}

@media (prefers-color-scheme: dark) {
    .project-image-logo {
        background-color: #1a1f3a;
    }
}

.project-image-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s var(--ease-smooth);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.project:hover .project-image-inner {
    transform: scale(1.05);
}

.project-image-logo .project-image-inner {
    background-size: contain;
    padding: var(--space-lg);
}

.project-header {
    margin-bottom: var(--space-md);
}

.project-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.project-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-light);
    letter-spacing: 0.05em;
}

.project-image-inner .project-meta {
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.project-description {
    margin-bottom: var(--space-md);
    font-size: 1.375rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.tech-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-family: var(--font-mono);
    background-color: rgba(254, 255, 1, 0.1);
    border: 1px solid rgba(254, 255, 1, 0.3);
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    color: var(--color-project-link);
    transition: transform 0.3s var(--ease-smooth);
}

.project-link:hover {
    transform: translateX(4px);
}

/* ===========================
   About Section
   =========================== */

.about {
    padding: var(--space-2xl) var(--space-lg);
    background-color: rgba(254, 255, 1, 0.05);
}

.about-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.about-intro {
    padding-bottom: 2.25rem;
}

.about-lead {
    max-width: var(--max-width-text);
    margin-bottom: var(--space-lg);
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    line-height: 1.4;
    font-weight: 500;
}

.about-text {
    max-width: var(--max-width-text);
    margin-bottom: var(--space-xl);
    font-size: 1.375rem;
    color: var(--color-text-light);
}

.capabilities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.capability {
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border-left: 4px solid var(--color-accent);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}

.capability.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.capability-number {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    opacity: 0.3;
}

.capability-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.capability-description {
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.about-person {
    max-width: var(--max-width-text);
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border-left: 4px solid var(--color-accent);
}

.person-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.person-content p {
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
    line-height: 1.6;
}

.inline-link {
    color: var(--color-accent);
    font-weight: 600;
    border-bottom: 1px solid var(--color-accent);
    transition: opacity 0.3s var(--ease-smooth);
}

.inline-link:hover {
    opacity: 0.7;
}

/* ===========================
   Pricing Section
   =========================== */

.pricing {
    padding: var(--space-2xl) var(--space-lg);
}

.pricing-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.pricing-item {
    padding: var(--space-lg);
    background-color: var(--color-black); 
    border: 1px solid var(--color-black);
    
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
    opacity: 0;
    transform: translateY(40px);
}

.pricing-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}

.pricing-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pricing-item .pricing-title {
    color: var(--color-white);
}

.pricing-item .pricing-description {
    color: rgba(255, 255, 255, 0.7);
}

@media (prefers-color-scheme: dark) {
    .pricing-item {
        background-color: rgba(254, 255, 1, 0.05);
        border: 1px solid rgba(254, 255, 1, 0.2);
    }
}

.pricing-item-featured {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.pricing-item-featured .pricing-title,
.pricing-item-featured .pricing-rate,
.pricing-item-featured .pricing-description {
    color: var(--color-black);
}

.pricing-header {
    margin-bottom: var(--space-md);
}

.pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.pricing-rate {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
}

.pricing-item-featured .pricing-rate {
    color: var(--color-black);
}

.rate-unit {
    font-size: 1rem;
    font-weight: 400;
}

.pricing-description {
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ===========================
   FAQ Section
   =========================== */

.faq {
    padding: var(--space-2xl) var(--space-lg);
    background-color: rgba(254, 255, 1, 0.05);
}

.faq-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.faq-content {
    max-width: var(--max-width-text);
}

.faq-item {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(254, 255, 1, 0.2);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.faq-answer {
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ===========================
   Contact Section
   =========================== */

.contact {
    padding: var(--space-2xl) var(--space-lg);
    background-color: var(--color-accent);
    color: var(--color-black);
}

.contact-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.contact-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-md);
}

.contact-subtitle {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--color-black);
    opacity: 0.8;
    margin-bottom: var(--space-xl);
}

.contact-methods {
    display: grid;
    gap: var(--space-md);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: rgba(10, 14, 39, 0.95);
    border: 2px solid rgba(10, 14, 39, 1);
    transition: all 0.3s var(--ease-smooth);
    color: var(--color-white);
}

.contact-method:hover {
    background-color: var(--color-black);
    border-color: var(--color-black);
    transform: translateX(8px);
}

.contact-method:hover .method-title,
.contact-method:hover .method-description,
.contact-method:hover .method-arrow {
    color: var(--color-white);
}

.method-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.method-content {
    flex-grow: 1;
}

.method-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    transition: color 0.3s var(--ease-smooth);
}

.method-description {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s var(--ease-smooth);
}

.method-arrow {
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: color 0.3s var(--ease-smooth);
}

/* ===========================
   Footer
   =========================== */

.footer {
    padding: var(--space-xl) var(--space-lg);
    background-color: var(--color-black);
    color: var(--color-white);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-logo .logo-text {
    font-size: 1rem;
}

.footer-logo-image {
    width: 80%;
    margin:auto;
    display: block;
}

.logo-tagline {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.footer-heading {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

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

.footer-link {
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    transition: opacity 0.3s var(--ease-smooth);
}

.footer-link:hover {
    opacity: 0.7;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

/* ===========================
   Animations
   =========================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollLineMove {
    0%, 100% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(40px);
        opacity: 0;
    }
}

@keyframes scrollLineMoveMobile {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* ===========================
   Responsive Design
   =========================== */

@media (max-width: 1024px) {
    .project {
        grid-template-columns: 1fr;
    }
    
    .project:nth-child(even) {
        direction: ltr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width: 1402px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --space-lg: 2rem;
        --space-xl: 4rem;
        --space-2xl: 6rem;
    }
    
    .nav-inner {
        padding: var(--space-sm) var(--space-md);
    }
    
    .nav-menu {
        display: none; /* You'll want to add a mobile menu here */
    }
    
    .hero-scroll-indicator {
        position: fixed;
        top: var(--space-sm);
        right: var(--space-md);
        left: auto;
        transform: none;
        bottom: auto;
        flex-direction: column;
        gap: var(--space-xs);
        align-items: center;
        z-index: 1001;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        padding: var(--space-xs) var(--space-sm);
        border-radius: 20px;
        animation: none;
        opacity: 1;
    }

    @media (prefers-color-scheme: dark) {
        .hero-scroll-indicator {
            background-color: rgba(10, 14, 39, 0.8);
        }
    }

    .scroll-line {
        width: 1px;
        height: 30px;
        background-color: var(--color-text-light);
        animation: scrollLineMoveMobile 2s ease-in-out infinite;
    }
    
    .hero {
        padding: 0 var(--space-md) var(--space-lg) var(--space-md);
    }
    
    .capabilities {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .section-title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}