/* ==========================================================
   Majir – Shared Styles
   ========================================================== */

/* ---------- Theme custom properties ---------- */
:root {
    --canvas: #FBFAF7;
    --canvas-sunk: #F4F1EA;
    --ink: #0E1512;
    --ink-soft: #3A4440;
    --ink-muted: #6B7570;
    --brand: #008000;
    --brand-hover: #006B00;
    --line: #E8E3D8;
    --surface: #FFFFFF;
}

[data-theme="dark"] {
    --canvas: #0E1512;
    --canvas-sunk: #1A2420;
    --ink: #F4F1EA;
    --ink-soft: #B8C4BD;
    --ink-muted: #7A8B82;
    --brand: #33A033;
    --brand-hover: #008000;
    --line: #2A3530;
    --surface: #1A2420;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--canvas);
    color: var(--ink);
}
.font-display {
    font-family: 'Archivo', 'Inter', 'Inter', -apple-system, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ---------- Grain overlay (disabled for light theme) ---------- */
.grain::after {
    display: none;
}

/* ---------- Glow & mesh ---------- */
.glow-green {
    box-shadow: 0 0 60px rgba(0,128,0,0.10), 0 0 120px rgba(0,128,0,0.04);
}
.text-glow {
    text-shadow: 0 0 40px rgba(0,128,0,0.2);
}
.mesh-bg {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0,128,0,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0,128,0,0.03) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 80%, rgba(0,107,0,0.02) 0%, transparent 50%);
}

/* ---------- Gradient border ---------- */
.gradient-border { position: relative; }
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,128,0,0.3), transparent 40%, transparent 60%, rgba(0,128,0,0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* ---------- Keyframes ---------- */
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes marquee { 0%{transform:translateX(0%)} 100%{transform:translateX(-50%)} }

.animate-float    { animation: float 6s ease-in-out infinite; }
.animate-fade-up  { animation: fadeUp 0.8s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }
.animate-marquee  { animation: marquee 30s linear infinite; }

.delay-100{animation-delay:.1s}
.delay-200{animation-delay:.2s}
.delay-300{animation-delay:.3s}
.delay-400{animation-delay:.4s}

/* ---------- Light section green override ---------- */
/* Apply .section-light to any white/cream background container.
   All green text inside will use a darker shade for better contrast. */
.section-light .text-majir-green { color: #006B00 !important; }
.section-light svg[stroke="#008000"] { stroke: #006B00; }
.section-light svg[fill="#008000"] { fill: #006B00; }
.section-light .step-number {
    background: linear-gradient(135deg, #006B00, #005200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-light .border-majir-green\/20 { border-color: rgba(0,107,0,0.2); }

/* ---------- Step numbers (gradient text) ---------- */
.step-number {
    background: linear-gradient(135deg, #008000, #006B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Cards ---------- */
.card-hover {
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 40px rgba(0,128,0,0.06);
}

/* ---------- Neumorphic (light sections) ---------- */
.neumorphic {
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid var(--line);
}
.neumorphic.card-hover:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}

/* ---------- Glassmorphic (now light card style) ---------- */
.glass {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.glass.card-hover:hover {
    border-color: rgba(0,128,0,0.2);
    box-shadow: 0 4px 16px rgba(0,128,0,0.06);
}

/* ---------- Phone mockup (iPhone frame) ---------- */
.iphone-frame {
    filter: drop-shadow(0 25px 60px rgba(0,0,0,0.25)) drop-shadow(0 8px 20px rgba(0,0,0,0.15));
}
.phone-screen {
    background: #141614;
    overflow: hidden;
}

/* ---------- Navigation ---------- */
.nav-blur {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ---------- Icon containers ---------- */
.icon-container {
    background: linear-gradient(135deg, rgba(0,128,0,0.12), rgba(0,128,0,0.04));
    border: 1px solid rgba(0,128,0,0.1);
}

/* ---------- hCaptcha compact ---------- */
.h-captcha {
    transform: scale(0.5);
    transform-origin: left top;
    max-height: 40px;
}
#cta-captcha {
    transform-origin: center top;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--canvas-sunk); }
::-webkit-scrollbar-thumb { background: var(--ink-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------- Spacing overrides ---------- */
/* Reduce How It Works section-heading-wrapper bottom margin from mb-20 (80px) to 48px */
#product .max-w-2xl.mb-20 { margin-bottom: 3rem; }
/* Reduce final CTA section vertical padding from py-24/lg:py-32 to py-16/lg:py-24 */
#waitlist { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 1024px) {
    #waitlist { padding-top: 6rem; padding-bottom: 6rem; }
}

/* ---------- Dark mode overrides ---------- */
/* Nav and footer use Tailwind classes for bg/border; override via data-theme */
[data-theme="dark"] nav {
    background-color: rgba(14,21,18,0.95) !important;
    border-color: var(--line) !important;
    color: var(--ink);
}
[data-theme="dark"] #mobile-menu {
    background-color: rgba(14,21,18,0.95) !important;
    border-color: var(--line) !important;
}
[data-theme="dark"] footer {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink);
}
/* Section-light green override is not needed in dark mode */
[data-theme="dark"] .section-light .text-majir-green { color: var(--brand) !important; }

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-toggle:hover {
    color: var(--brand);
    border-color: var(--brand);
}