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

:root {
    --emerald-deep:  #064e3b;
    --emerald-mid:   #065f46;
    --blue-deep:     #1e3a8a;  /* dark navy blue */
    --blue-mid:      #1e40af;  /* slightly less dark */
    --bg:            #ffffff;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--bg);
    color: #065f46;
}
h1,h2,h3,h4,h5,h6 { font-family:'Outfit',sans-serif; color:#064e3b; }

/* Backgrounds */
.bg-branded-mesh {
    background-color: #fff;
    background-image:
        radial-gradient(at 0% 0%,   hsla(161,70%,95%,1) 0, transparent 55%),
        radial-gradient(at 100% 0%, hsla(220,80%,95%,0.7) 0, transparent 55%),
        radial-gradient(at 50% 100%,hsla(161,70%,97%,1) 0, transparent 55%);
}

/* Glassmorphism nav */
.glass {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(6,78,59,0.08);
    box-shadow: 0 2px 16px rgba(6,78,59,0.06);
}

/* Cards */
.card-branded {
    background: #fff;
    border-radius: 1.75rem;
    padding: 2rem;
    border: 1px solid #d1fae5;
    transition: all .4s ease;
    box-shadow: 0 4px 16px rgba(6,78,59,0.06);
}
.card-branded:hover { border-color:#6ee7b7; box-shadow:0 8px 32px rgba(6,78,59,0.12); }
.card-blue {
    background:#fff;
    border-radius:1.75rem;
    padding:2rem;
    border:1px solid #dbeafe;
    transition: all .4s ease;
    box-shadow:0 4px 16px rgba(30,58,138,0.06);
}
.card-blue:hover { border-color:#93c5fd; box-shadow:0 8px 32px rgba(30,58,138,0.12); }

/* Text gradients */
.text-gradient-green {
    background:linear-gradient(135deg,#064e3b 0%,#10b981 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-blue {
    background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-both {
    background:linear-gradient(135deg,#064e3b 0%,#1e3a8a 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient      { @apply text-gradient-green; }
.text-gradient-dark { @apply text-gradient-blue; }

/* Nav links */
.nav-link {
    font-weight:600; color:#065f46;
    transition:all .3s; text-underline-offset:4px;
}
.nav-link:hover { color:#1e3a8a; text-decoration:underline; }
.nav-link.active { color:#1e3a8a; font-weight:700; text-decoration:underline; }

/* === BUTTONS === */
.btn-login {
    padding:.5rem 1.4rem;
    background:#1e3a8a;   /* Dark Navy Blue */
    color:#fff;
    border-radius:9999px;
    font-weight:700;
    box-shadow:0 2px 10px rgba(30,58,138,0.35);
    transition:all .3s;
    display:inline-block;
    text-align:center;
    white-space:nowrap;
}
.btn-login:hover { background:#1e40af; transform:scale(1.05); }

.btn-register {
    padding:.5rem 1.4rem;
    background:#064e3b;   /* Deep Emerald */
    color:#fff;
    border-radius:9999px;
    font-weight:700;
    box-shadow:0 2px 10px rgba(6,78,59,0.35);
    transition:all .3s;
    display:inline-block;
    text-align:center;
    white-space:nowrap;
}
.btn-register:hover { background:#022c22; transform:scale(1.05); }

.btn-primary-green {
    padding:.75rem 2rem;
    background:#064e3b; color:#fff;
    border-radius:9999px; font-weight:700;
    box-shadow:0 4px 16px rgba(6,78,59,0.25);
    transition:all .3s; display:inline-block; text-align:center;
}
.btn-primary-green:hover { background:#022c22; transform:scale(1.05); }

.btn-primary-blue {
    padding:.75rem 2rem;
    background:#1e3a8a; color:#fff;
    border-radius:9999px; font-weight:700;
    box-shadow:0 4px 16px rgba(30,58,138,0.28);
    transition:all .3s; display:inline-block; text-align:center;
}
.btn-primary-blue:hover { background:#1e40af; transform:scale(1.05); }

.btn-outline-green {
    padding:.75rem 2rem;
    border:2px solid #064e3b; color:#064e3b;
    border-radius:9999px; font-weight:700;
    transition:all .3s; display:inline-block; text-align:center;
}
.btn-outline-green:hover { background:#064e3b; color:#fff; transform:scale(1.05); }

/* Legacy compat */
.btn-primary  { @apply btn-primary-green; }
.btn-outline  { @apply btn-outline-green; }

/* Cart Button */
.btn-cart {
    position:relative;
    width:40px; height:40px;
    border-radius:9999px;
    background:#f0fdf4;
    border:2px solid #d1fae5;
    display:flex; align-items:center; justify-content:center;
    color:#064e3b;
    transition:all .3s;
    cursor:pointer;
}
.btn-cart:hover { background:#064e3b; color:#fff; border-color:#064e3b; }
.btn-cart .cart-count {
    position:absolute; top:-6px; right:-6px;
    width:18px; height:18px;
    background:#1e3a8a; color:#fff;
    border-radius:9999px; font-size:10px; font-weight:900;
    display:flex; align-items:center; justify-content:center;
}

/* Network animation */
@keyframes pulse-node {
    0%,100% { opacity:.4; transform:scale(1); }
    50%      { opacity:1;  transform:scale(1.15); }
}
@keyframes flow-line {
    0%   { stroke-dashoffset:200; opacity:0; }
    40%  { opacity:1; }
    100% { stroke-dashoffset:0; opacity:0.6; }
}
@keyframes float-up {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-12px); }
}
.node-pulse { animation:pulse-node 2s ease-in-out infinite; }
.float-anim { animation:float-up 4s ease-in-out infinite; }

/* Reveal animations */
@keyframes reveal-up {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
.reveal      { animation:reveal-up 0.7s ease-out both; }
.delay-100   { animation-delay:.1s; }
.delay-200   { animation-delay:.2s; }
.delay-300   { animation-delay:.3s; }
.delay-400   { animation-delay:.4s; }

/* Scrollbar */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* Mobile menu */
#mobile-menu { display:none; }
#mobile-menu.open { display:flex; flex-direction:column; }

html, body { overflow-x: hidden; max-width: 100%; width: 100%; }


/* Skew Scroll Animation */
.skew-scroll-wrapper {
    overflow: hidden;
    white-space: nowrap;
    background: #064e3b; /* emerald-900 */
    color: #a7f3d0; /* emerald-200 */
    padding: 1.5rem 0;
    transform: skewY(-2deg) translateY(-20px);
    position: relative;
    z-index: 10;
}
.skew-scroll-content {
    display: inline-block;
    animation: skewScroll 20s linear infinite;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 1.25rem;
}
@keyframes skewScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.skew-scroll-item {
    display: inline-block;
    padding: 0 4rem;
}