/* Beginner Guide Section */
        .info-container {
            background: linear-gradient(135deg, #ffffff 0%, #fafbfd 100%);
            border-radius: 18px;
            box-shadow: 0 8px 32px rgba(60,120,200,0.10), 0 2px 8px rgba(60,120,200,0.06);
            padding: 1rem 1rem 0.5rem 1rem;
            margin: 1.5rem auto 1.8rem auto;
            max-width: 1200px;
            border: 1px solid rgba(208,216,232,0.6);
            transition: all 0.3s ease;
        }
        
        .info-container:hover {
            box-shadow: 0 12px 48px rgba(60,120,200,0.14), 0 4px 12px rgba(60,120,200,0.08);
            transform: translateY(-2px);
        }
        .info-header { display:flex; align-items:center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.9rem; }
        .info-title { color: #22314a; font-weight: 600; margin: 0; }
        .info-actions { 
            display: flex; 
            align-items: center; 
            gap: 10px; 
        }
        .info-actions .link { 
            color: #3c78c8; 
            text-decoration: underline; 
            cursor: pointer; 
            font-weight: 600; 
        }
        .info-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
            gap: 16px; 
        }
        .info-card { 
            border: 1px solid var(--border); 
            border-radius: 14px; 
            padding: 0.9rem 1rem 1.05rem; 
            background: #f7fafd; 
            position: relative; 
        }
        @media (max-width: 900px) { 
            .info-grid { 
                grid-template-columns: 1fr; 
            } 
        }
    .info-card.media { padding-top: 0.75rem; }
    .info-illo { height: 110px; border-radius: 12px; background: linear-gradient(180deg, #eef4ff, #f7fbff); border:1px solid #dbe6f7; display:flex; align-items:center; justify-content:center; margin-bottom: 0.65rem; overflow:hidden; }
    .info-illo svg { max-width: 100%; max-height: 100%; }
    .info-card h3 { line-height:1.2; }
    .info-card ul { padding-left:1.05rem; }
    .info-badge { position:absolute; top:8px; right:10px; background:#e8f1ff; color:#1d4c8f; letter-spacing:0.5px; font-weight:700; padding:3px 6px; border-radius:6px; }
    .risk-legend { display:flex; gap:6px; flex-wrap:wrap; margin-top:0.55rem; }
    .risk-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:20px; font-weight:600; letter-spacing:0.3px; }
    .risk-low { background:#e3f9ed; color:#146a33; border:1px solid #b2e9c9; }
    .risk-medium { background:#fff7e3; color:#8a5b00; border:1px solid #f2d08a; }
    .risk-high { background:#ffe7e7; color:#a12a2a; border:1px solid #f3b0b0; }
    .step-list { counter-reset: step; list-style:none; margin:0.3rem 0 0 0; padding:0; }
    .step-list li { counter-increment: step; background:#fff; border:1px solid #d9e3ef; border-radius:10px; padding:8px 10px 8px 40px; margin-bottom:6px; position:relative; }
    .step-list li:before { content: counter(step); position:absolute; left:10px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:#3c78c8; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.12); }
    .mini-note { color:#5a6472; margin-top:6px; line-height:1.1; }
    /* Carousel layout for quick guide */
    .guide-carousel { position:relative; overflow:hidden; width:100%; padding-bottom:4px; }
    .guide-track { display:flex; transition: transform .55s cubic-bezier(.4,.12,.15,1); will-change:transform; }
    .guide-slide { flex:0 0 100%; padding:2px; box-sizing:border-box; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
    @media (max-width: 820px) { .guide-slide { grid-template-columns:1fr; } }
        .guide-nav { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 1rem; 
            margin-top: 0.75rem; 
        }
        .guide-nav-btn { 
            background: #fff; 
            border: 1px solid #c9d8e6; 
            width: 38px; 
            height: 38px; 
            border-radius: 10px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            cursor: pointer; 
            color: #2f5d92; 
            font-weight: 600; 
            transition: background 0.25s, color 0.25s, border-color 0.25s; 
        }
        .guide-nav-btn:hover:not(:disabled) { 
            background: #e9f2fb; 
        }
        .guide-nav-btn:disabled { 
            opacity: 0.45; 
            cursor: default; 
        }
        .guide-dots { 
            display: flex; 
            gap: 6px; 
        }
        .guide-dot { 
            width: 10px; 
            height: 10px; 
            border-radius: 50%; 
            background: #c5d3e2; 
            border: none; 
            cursor: pointer; 
            padding: 0; 
            transition: background 0.3s, transform 0.3s; 
        }
        .guide-dot[aria-current="true"] { 
            background: #3c78c8; 
            transform: scale(1.25); 
        }
        .guide-dot:focus-visible { 
            outline: 2px solid #3c78c8; 
            outline-offset: 2px; 
        }
    .guide-carousel.dynamic-height { transition: height .45s ease; }
        .guide-toggle-btn { 
            background: #fff; 
            border: 1px solid #c5d4e2; 
            padding: 6px 10px; 
            border-radius: 8px; 
            font-size: 0.7rem; 
            letter-spacing: 0.5px; 
            font-weight: 600; 
            cursor: pointer; 
            display: inline-flex; 
            align-items: center; 
            gap: 4px; 
            color: #29517d; 
            transition: background 0.25s; 
        }
        .guide-toggle-btn:hover { 
            background: #eef5fb; 
        }
        .guide-hidden-placeholder { 
            font-size: 0.82rem; 
            color: #4a5968; 
            background: #f2f7fb; 
            border: 1px dashed #c9d8e6; 
            padding: 2.5px 3px; 
            border-radius: 10px; 
            margin-top: 2.5px; 
            display: flex; 
            align-items: center; 
            gap: 2px; 
        }
        .guide-carousel { 
            overflow: hidden; 
        }
        .guide-collapsed .guide-track, 
        .guide-collapsed .guide-nav { 
            display: none; 
        }
        .guide-collapsed { 
            height: auto !important; 
            overflow: visible; 
        }
        .guide-collapsed #guide-hidden-msg { 
            display: flex !important; 
            margin-top: 4px; 
        }
        .guide-outer-collapsed { 
            padding-bottom: 8px !important; 
        }
        .guide-outer-collapsed .info-header p { 
            display: none; 
        }
        .info-card h3 { margin: 0 0 0.4rem 0; color:#22314a; }
        .info-card .lead { color:#4b5563; margin-bottom: 0.35rem; }
        .info-card ul { margin: 0.2rem 0 0 1.1rem; color:#4b5563; }
        .btn-row { display:flex; gap: 10px; margin-top: 0.8rem; flex-wrap: wrap; }
        .btn { display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background:#fff; color:#1a2b4d; font-weight:600; text-decoration:none; }
        .btn:hover { box-shadow: 0 6px 18px rgba(60,120,200,0.12); transform: translateY(-1px); }
        .chip-row { display:flex; gap:8px; flex-wrap:wrap; margin-top: 0.5rem; }
        .chip { padding: 4px 10px; border-radius: 999px; border: 1px solid #cfd8e3; background:#fff; color:#334155; }

        /* ===== Homepage Hero ===== */
        .home-hero {
            margin: 0.4rem 0 1.6rem;
            padding: 1.9rem 2rem;
            border-radius: 20px;
            background: linear-gradient(135deg, #004b87 0%, #0066a1 55%, #007a9e 100%);
            color: #fff;
            box-shadow: 0 14px 40px rgba(0,75,135,0.22), 0 3px 10px rgba(0,75,135,0.14);
            position: relative;
            overflow: hidden;
        }
        .home-hero::after {
            content: '';
            position: absolute;
            right: -60px; top: -60px;
            width: 260px; height: 260px;
            background: radial-gradient(circle, rgba(31,164,99,0.30) 0%, rgba(31,164,99,0) 70%);
            pointer-events: none;
        }
        .home-hero__inner { position: relative; z-index: 1; max-width: 760px; }
        .home-hero__badge {
            display: inline-flex; align-items: center; gap: 0.45rem;
            background: rgba(255,255,255,0.16);
            border: 1px solid rgba(255,255,255,0.28);
            padding: 0.32rem 0.8rem; border-radius: 999px;
            font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
            text-transform: uppercase; margin-bottom: 0.9rem;
        }
        .home-hero__badge .dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,0.7);
            animation: heroPulse 2s infinite;
        }
        @keyframes heroPulse {
            0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
            70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
            100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
        }
        .home-hero h1 {
            margin: 0 0 0.6rem 0;
            color: #fff;
            font-size: clamp(1.5rem, 3.4vw, 2.3rem);
            font-weight: 800; line-height: 1.15; letter-spacing: -0.02em;
        }
        .home-hero h1 .accent { color: #7ef0c2; }
        .home-hero__sub {
            margin: 0 0 1.2rem 0;
            font-size: clamp(0.95rem, 1.6vw, 1.08rem);
            color: rgba(255,255,255,0.92); line-height: 1.5;
        }
        .home-hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
        .home-hero__btn {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.7rem 1.3rem; border-radius: 12px;
            font-weight: 700; font-size: 0.9rem; text-decoration: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .home-hero__btn--primary { background: #1fa463; color: #fff; box-shadow: 0 6px 18px rgba(31,164,99,0.35); }
        .home-hero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31,164,99,0.45); }
        .home-hero__btn--ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
        .home-hero__btn--ghost:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
        .home-hero__meta {
            margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 1.2rem;
            font-size: 0.78rem; color: rgba(255,255,255,0.85);
        }
        .home-hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
        @media (max-width: 900px) {
            .home-hero { margin: 0.4rem var(--mobile-gutter, 14px) 1.2rem; padding: 1.5rem 1.3rem; border-radius: 16px; }
        }