/* Styles extracted from index.php. Dynamic hero font/color values remain in index.php. */
:root {
            --primary: #12372A;
            --primary-dark: #0E2A20;
            --gold: #D4AF37;
            --ink: #1C1A16;
            --muted: #64748b;
            --line: #E8DEC3;
            --soft: #FFFCF3;
        }
        * { box-sizing: border-box; }
        body { font-family: 'DM Sans', 'Noto Sans Devanagari', sans-serif; background: #fff; color: var(--ink); letter-spacing: 0; }
        h1, h2, h3, .brand { font-family: 'Sora', sans-serif; letter-spacing: 0; }
.hi-font { font-family: 'Noto Sans Devanagari', 'DM Sans', sans-serif; letter-spacing: 0; }
        .hi-title { font-family: 'Baloo 2', 'Noto Sans Devanagari', sans-serif; letter-spacing: 0; font-weight: 800; line-height: 1.12; }
        .hi-bold { font-family: 'Noto Sans Devanagari', 'DM Sans', sans-serif; font-weight: 800; letter-spacing: 0; }
        .how-step h3, .how-step p { font-family: 'Noto Sans Devanagari', 'DM Sans', sans-serif; }
        .shell { max-width: 1160px; margin: 0 auto; }
        .top-strip { display: none; }
        .main-nav { background: var(--primary); color: #fff; border-bottom: 2px solid var(--gold); box-shadow: 0 10px 22px rgba(15,23,42,.16); }
        .brand-mark { background: #fff; color: var(--primary); box-shadow: 0 8px 16px rgba(18,55,42,.20); }
        .search-box { border: 1px solid #E8DEC3; box-shadow: 0 14px 35px rgba(15, 23, 42, .06); }
        .header-search input { min-width: 0; line-height: 1.2; color: #1C1A16 !important; caret-color: var(--theme-accent, #D4AF37); }
        .header-search input::placeholder { color: #6b7280 !important; opacity: 1; }
        .header-search .search-box { box-shadow: none; }
        .hero { background: linear-gradient(180deg, #fffdf6 0%, #fbf4df 100%); overflow: hidden; }
        .hero-copy { max-width: 610px; }
        .hero-word { color: var(--hero-highlight-color); }
        .hero-visual { min-height: 455px; position: relative; overflow: visible; }
        .blue-orbit { display: none; }
        .hero-worker { position: absolute; right: -8px; top: -155px; width: min(575px, 84vw); height: 735px; object-fit: contain; object-position: center top; border-radius: 0; border: 0; outline: 0; box-shadow: none; }
        .float-card { display: none; position: absolute; background: rgba(255,255,255,.95); border: 1px solid #E8DEC3; border-radius: 18px; padding: 14px 18px; box-shadow: 0 18px 45px rgba(15, 23, 42, .12); }
        .left-card { left: 20px; top: 125px; }
        .right-card { right: 12px; top: 210px; }
        .bottom-card { left: 105px; top: 350px; }
        .category-card, .worker-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
        .category-card:hover, .worker-card:hover { transform: translateY(-3px); border-color: rgba(212,175,55,.55); box-shadow: 0 18px 40px rgba(15,23,42,.09); }
        .icon-tile { background: #FFF8E1; color: var(--primary); }
        .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 20px rgba(18,55,42,.20); }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-outline { border: 1px solid #D9BF67; color: var(--primary); background: #fff; }
        .how-step::before { content: ""; position: absolute; top: 36px; left: 50%; width: 100%; border-top: 2px dashed #E8DEC3; z-index: 0; }
        .how-step:last-child::before { display: none; }
        .app-band { background: var(--primary); }
        .fade-up { animation: fadeUp .75s ease both; }
        .fade-delay-1 { animation-delay: .12s; }
        .fade-delay-2 { animation-delay: .24s; }
        .fade-delay-3 { animation-delay: .36s; }
        .running-line { overflow: hidden; white-space: nowrap; }
        .running-line span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; }
        .language-chip { border: 1px solid #E8DEC3; background: #fff; color: var(--primary); }
        .hero-tag { border: 1px solid #E8DEC3; background: #fff; color: var(--primary); }
        .voice-card { border: 1px solid #E8DEC3; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.06); }
        .voice-dot { animation: softPulse 1.6s ease-in-out infinite; }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(18px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
        @keyframes softPulse {
            0%, 100% { transform: scale(1); opacity: .7; }
            50% { transform: scale(1.18); opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .fade-up, .running-line span, .voice-dot { animation: none; }
        }
        @media (max-width: 1023px) {
            .hero-visual { min-height: 430px; }
            .hero-worker { left: 50%; right: auto; top: -80px; transform: translateX(-50%); width: min(450px, 88vw); height: 560px; }
            .float-card.left-card { left: 9%; top: 18%; }
            .float-card.right-card { right: 4%; top: 38%; }
            .float-card.bottom-card { left: 8%; bottom: 4%; }
            .how-step::before { display: none; }
        }
        @media (max-width: 640px) {
            .hero-visual { min-height: 370px; }
            .hero-worker { width: 345px; height: 455px; top: -50px; }
            .float-card { padding: 10px 12px; border-radius: 14px; font-size: 12px; }
        }