/* ------------------ THEME COLORS ------------------ */
:root {
    --orange: #FF6A3C;       /* Main Orange */
    --sky-blue: #6ECFF6;     /* Sky Blue */
    --coral: #FF7F50;        /* Coral */
    --charcoal: #1a1a1a;     /* Neutral dark for text */
    --fog: #fbfbf9;          /* Background off-white */
}

/* ------------------ BODY ------------------ */
body {
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
    background-color: var(--fog);
    color: var(--charcoal);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* ------------------ TYPOGRAPHY ------------------ */
.serif { font-family: 'Exo 2', serif; }
.cursive { font-family: 'Exo 2', cursive; color: var(--sky-blue); }

/* ------------------ TEXTURE ------------------ */
.grain-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
    opacity: 0.4;
    pointer-events: none;
    z-index: 9999;
}

/* ------------------ HERO LIGHT ANIMATION ------------------ */
.light-drift {
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.8) 0%, rgba(251,251,249,0) 70%);
    filter: blur(80px);
    animation: drift 15s infinite alternate ease-in-out;
}
@keyframes drift {
    0% { transform: translate(-10%, -10%) scale(1); }
    100% { transform: translate(15%, 10%) scale(1.2); }
}

/* ------------------ REVEAL ANIMATION ------------------ */
.reveal { opacity: 0; transform: translateY(40px); transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ------------------ LOGO TYPING ------------------ */
.logo-wipe {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid var(--charcoal);
    animation: typing 2s steps(20, end), blink .75s step-end infinite;
}
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--charcoal); } }

/* ------------------ NAVIGATION ------------------ */
.nav-link { 
    font-size: 10px; 
    letter-spacing: 0.3em; 
    text-transform: uppercase; 
    opacity: 0.5; 
    transition: opacity 0.3s; 
}
.nav-link:hover { opacity: 1; color: var(--orange); }

/* ------------------ BUTTONS ------------------ */
.btn-editorial {
    border: 1px solid var(--charcoal);
    padding: 1.2rem 3rem;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.2em;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    position: relative;
    overflow: hidden;
    color: var(--charcoal);
}
.btn-editorial:hover { background: var(--orange); color: white; }

/* ------------------ INPUT ------------------ */
.input-minimal {
    border: none;
    border-bottom: 1px solid #e0e0dc;
    background: transparent;
    padding: 1.5rem 0;
    width: 100%;
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.4s;
    font-family: 'Exo 2', sans-serif;
}
.input-minimal:focus { border-color: var(--sky-blue); }

/* ------------------ PAGE NODES ------------------ */
.page-node { display: none; }
.page-node.active { display: block; }

/* ------------------ SCROLLBAR ------------------ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--fog); }
::-webkit-scrollbar-thumb { background: var(--charcoal); }

/* ------------------ MODAL ------------------ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(251, 251, 249, 0.98);
    z-index: 5000;
    display: none;
    overflow-y: auto;
    padding: 4rem 1rem;
}
.modal-overlay.active { display: block; }

/* ------------------ MOBILE MENU ------------------ */
#mobile-menu {
    animation: fadeSlide .35s ease-out;
}
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ------------------ THEME COLORS ------------------ */
:root {
    --orange: #FF6A3C;       /* Vibrant Orange */
    --sky-blue: #6ECFF6;     /* Cool Sky Blue */
    --coral: #FF7F50;        /* Coral Accent */
    --dark: #FF4500;          /* Deep Orange-Red instead of black */
    --light: #FFF0E5;         /* Light Coral instead of white */
    --overlay: rgba(255, 240, 229, 0.95); /* semi-transparent overlay */
}

/* ------------------ BODY ------------------ */
body {
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
    background-color: var(--light);
    color: var(--dark);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* ------------------ TYPOGRAPHY ------------------ */
.serif { font-family: 'Exo 2', serif; color: var(--dark); }
.cursive { font-family: 'Exo 2', cursive; color: var(--sky-blue); }

/* ------------------ HERO ------------------ */
#page-home h1,
#page-home h2,
#page-home h4 {
    color: var(--dark);
}

#page-home h1 .italic,
#page-home h2.italic {
    color: var(--orange);
}

#page-home p,
#page-home .text-zinc-500,
#page-home .text-zinc-400 {
    color: var(--coral);
}

/* ------------------ BUTTONS ------------------ */
.btn-editorial {
    border: 1px solid var(--dark);
    color: var(--dark);
    background: var(--sky-blue);
}
.btn-editorial:hover {
    background: var(--orange);
    color: var(--light);
}

/* ------------------ NAV LINKS ------------------ */
.nav-link {
    color: var(--dark);
    opacity: 0.7;
}
.nav-link:hover {
    color: var(--orange);
    opacity: 1;
}

/* ------------------ HERO LIGHT DRIFT ------------------ */
.light-drift {
    background: radial-gradient(circle at 50% 50%, rgba(255,240,229,0.8) 0%, rgba(255,240,229,0) 70%);
    filter: blur(80px);
    animation: drift 15s infinite alternate ease-in-out;
}
@keyframes drift {
    0% { transform: translate(-10%, -10%) scale(1); }
    100% { transform: translate(15%, 10%) scale(1.2); }
}

/* ------------------ REVEAL ANIMATION ------------------ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------ PRODUCT & TECH SECTIONS ------------------ */
#page-home .bg-white,
#page-home .bg-zinc-50 {
    background-color: var(--light);
}
#page-home .border-zinc-100 {
    border-color: var(--coral);
}
#page-home .hover\:border-black:hover {
    border-color: var(--orange);
}

/* ------------------ SCROLLBAR ------------------ */
#scroll-bar {
    background-color: var(--orange);
}

/* ------------------ METRICS ------------------ */
#page-home .bg-zinc-900 {
    background-color: var(--dark);
}
#page-home .text-white {
    color: var(--light);
}
#page-home .opacity-40 {
    opacity: 0.3;
}

/* ------------------ MODALS / OVERLAYS ------------------ */
.modal-overlay {
    background: var(--overlay);
}

/* ------------------ IMAGES ------------------ */
#page-home img.grayscale {
    filter: grayscale(80%);
}
#page-home img.group-hover\:grayscale-0:hover {
    filter: grayscale(0%);
    transition: all 1s ease;
}

/* ------------------ ENVIRONMENTS / CARDS ------------------ */
#env-slider {
    background-color: var(--light);
}

/* ------------------ INPUTS ------------------ */
.input-minimal {
    border: none;
    border-bottom: 1px solid var(--coral);
    background: transparent;
    padding: 1.5rem 0;
    width: 100%;
    font-size: 1.1rem;
    outline: none;
    font-family: 'Exo 2', sans-serif;
}
.input-minimal:focus {
    border-color: var(--orange);
}