*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; margin: 0; color: #1a2d4a; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ── Hero ─────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, #0a1424 0%, #0f2b4c 40%, #0d3b3a 70%, #064e3b 100%);
}
.hero-img { opacity: 0.18; }
.hero-overlay { background: linear-gradient(180deg, rgba(6,12,22,0.55) 0%, rgba(10,20,36,0.75) 100%); }
.hero-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35;
    animation: orbFloat 8s ease-in-out infinite alternate;
}
.hero-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, #34d399 0%, transparent 70%); top: -10%; right: -5%; animation-delay: 0s; }
.hero-orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, #22d3ee 0%, transparent 70%); bottom: 5%; left: -3%; animation-delay: -3s; }
.hero-orb-3 { width: 200px; height: 200px; background: radial-gradient(circle, #a7f3d0 0%, transparent 70%); top: 40%; left: 20%; animation-delay: -5s; opacity: 0.2; }
@keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.1); }
}
.hero-title { animation: heroFadeUp 1s ease-out both; }
.hero-subtitle { animation: heroFadeUp 1s 0.15s ease-out both; }
.hero-ctas { animation: heroFadeUp 1s 0.3s ease-out both; }
.hero-badge { animation: heroFadeUp 1s 0.1s ease-out both; }
.hero-scroll { animation: heroFadeUp 1s 0.5s ease-out both; }
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ──────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, #34d399, #059669);
    color: #060c16; font-weight: 700; font-size: 0.938rem;
    padding: 0.875rem 1.75rem; border-radius: 9999px;
    border: none; cursor: pointer; text-decoration: none;
    box-shadow: 0 4px 20px rgba(52,211,153,0.35);
    transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(52,211,153,0.45); }
.btn-secondary {
    background: rgba(255,255,255,0.1); color: #fff; font-weight: 600; font-size: 0.938rem;
    padding: 0.875rem 1.75rem; border-radius: 9999px;
    border: 1.5px solid rgba(255,255,255,0.25); cursor: pointer; text-decoration: none;
    backdrop-filter: blur(8px); transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); transform: translateY(-2px); }
.btn-dark {
    background: #0a1424; color: #fff; font-weight: 700; font-size: 0.938rem;
    padding: 0.875rem 1.75rem; border-radius: 9999px;
    border: none; cursor: pointer; text-decoration: none;
    box-shadow: 0 4px 20px rgba(6,12,22,0.3);
    transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-dark:hover { background: #1a2d4a; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(6,12,22,0.4); }
.btn-mint-dark {
    background: rgba(255,255,255,0.25); color: #0a1424; font-weight: 700; font-size: 0.938rem;
    padding: 0.875rem 1.75rem; border-radius: 9999px;
    border: 1.5px solid rgba(255,255,255,0.5); cursor: pointer; text-decoration: none;
    backdrop-filter: blur(8px); transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-mint-dark:hover { background: rgba(255,255,255,0.4); transform: translateY(-2px); }

/* ── Badges ───────────────────────────────── */
.badge-mint {
    background: rgba(52,211,153,0.12); color: #059669;
    padding: 0.4rem 1rem; border-radius: 9999px;
    border: 1px solid rgba(52,211,153,0.25);
}

/* ── Cards ────────────────────────────────── */
.card-product { transition: transform 0.3s ease; }
.card-product:hover { transform: translateY(-4px); }
.card-dark {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem; padding: 1.75rem;
    transition: all 0.3s ease; backdrop-filter: blur(4px);
}
.card-dark:hover { background: rgba(255,255,255,0.07); border-color: rgba(52,211,153,0.2); transform: translateY(-3px); }
.card-process {
    background: #fff; border-radius: 1.25rem; padding: 1.75rem;
    box-shadow: 0 4px 24px rgba(15,45,74,0.06); border: 1px solid rgba(15,45,74,0.06);
    transition: all 0.3s ease;
}
.card-process:hover { box-shadow: 0 8px 40px rgba(15,45,74,0.12); transform: translateY(-4px); }
.process-step {
    font-family: 'DM Serif Display', serif; font-size: 3rem; font-weight: 700;
    color: rgba(52,211,153,0.15); line-height: 1; margin-bottom: 0.75rem;
}

/* ── Gallery ──────────────────────────────── */
.gallery-item {
    border-radius: 1rem; overflow: hidden;
    box-shadow: 0 4px 20px rgba(15,45,74,0.08);
    transition: all 0.35s ease; height: 260px;
}
.gallery-item:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(15,45,74,0.15); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* ── Form ─────────────────────────────────── */
.input-field {
    border: 1.5px solid #d1dce8; border-radius: 0.75rem;
    padding: 0.75rem 1rem; font-size: 0.938rem; color: #1a2d4a;
    background: #f0f4f8; transition: all 0.2s ease; width: 100%;
    font-family: 'Inter', system-ui, sans-serif; outline: none;
}
.input-field:focus { border-color: #34d399; background: #fff; box-shadow: 0 0 0 3px rgba(52,211,153,0.15); }
.input-field::placeholder { color: #a7b8d1; }
.input-field.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.field-error { color: #ef4444; font-size: 0.813rem; margin-top: 0.3rem; display: none; }

/* ── Scroll Reveal ────────────────────────── */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-visible { opacity: 1; transform: translateY(0); }

/* ── Back to top ──────────────────────────── */
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 768px) {
    .hero-title { font-size: 3rem; }
    .hero-orb-1 { width: 280px; height: 280px; }
    .hero-orb-2 { width: 180px; height: 180px; }
    .hero-orb-3 { display: none; }
    .process-arrow { display: none !important; }
    .gallery-item { height: 200px; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 2.4rem; }
    .hero-subtitle { font-size: 1rem; }
}