/* Shared presentation for pages linked from the IKIZAME homepage. */
:root {
    --public-navy: #071f38;
    --public-blue: #0b3a59;
    --public-teal: #0b698b;
    --public-cyan: #7dd3fc;
    --public-line: #e1eaf1;
    --public-surface: #ffffff;
}

html,
body {
    background-color: #f3f7fb;
}

.navbar {
    min-height: 72px;
    padding-inline: clamp(16px, 3.5vw, 52px);
    background: rgba(255,255,255,0.98);
    border-bottom: 1px solid var(--public-line);
    box-shadow: 0 4px 16px rgba(7,31,56,0.06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.navbar-brand-wrap { gap: 10px; }
.navbar-brand-wrap img { width: 38px; height: 38px; }
.navbar-brand { color: var(--public-teal); font-size: 1.3rem; }
.navbar-links { gap: 2px; flex-wrap: nowrap; }
.navbar-links a {
    padding: 10px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: #334155;
    font-size: 0.76rem;
}
.navbar-links a i { color: var(--public-teal); }
.navbar-links a:hover {
    transform: none;
    background: #eff7fb;
    box-shadow: none;
}
.navbar-links a.active {
    position: relative;
    color: var(--public-teal);
    background: transparent;
    border: 0;
    box-shadow: none;
}
.navbar-links a.active i { color: var(--public-teal); }
.navbar-links a.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: #00b8d9;
}
.lang-badge {
    flex: 0 0 auto;
    background: #f8fbfd;
    border-color: var(--public-line);
    box-shadow: none;
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--public-navy) 0%, var(--public-blue) 100%);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.34;
    background-image: url('../images/imigongo-pattern.svg');
    background-size: 160px 160px;
    background-repeat: repeat;
}
.hero > * { position: relative; z-index: 1; }
.hero-copy-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    z-index: 1;
    width: min(100%, 720px);
    margin-inline: auto;
    padding: clamp(16px, 2.6vw, 24px);
    border: 1px solid rgba(125,211,252,0.38);
    border-radius: 16px;
    background: rgba(3,20,35,0.5);
    box-shadow: 0 16px 36px rgba(2,15,27,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.hero-copy-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: none;
    opacity: 0.34;
    background: url('../images/imigongo-pattern.svg') repeat;
    background-size: 160px 160px;
}
.hero-copy-glass > * { position: relative; z-index: 1; }
.hero-copy-glass p { color: rgba(255,255,255,0.94); font-weight: 600; }
.hero-copy-glass > :last-child { margin-bottom: 0; }
.hero-icon {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.1);
    box-shadow: none;
}
.hero h1 span { color: #bae6fd; }
.section-header-meta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, var(--public-navy) 0%, var(--public-blue) 100%);
}
.section-header-meta::before {
    content: '';
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: none;
    opacity: 0.34;
    background: url('../images/imigongo-pattern.svg') repeat;
    background-size: 160px 160px;
}
.section-header-meta::after { content: none; }
.section-header-meta > * {
    position: relative;
    z-index: 1;
}
.guide-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(125,211,252,0.36);
    background: rgba(3,20,35,0.58);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.guide-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.34;
    background-image: url('../images/imigongo-pattern.svg');
    background-size: 160px 160px;
    background-repeat: repeat;
}
.guide-card > * { position: relative; z-index: 1; }

.page,
.main,
.workspace-inner { width: 100%; }
.page { max-width: 1200px; margin-inline: auto; }
.section,
.main { max-width: 1200px; }

.contact-card-wrap,
.support-banner,
.faq-item,
.tl-body,
.doc-card,
.price-card,
.payment-guide-container,
.guide-card,
.auth-card-frame,
#amanotaLookupFormView,
.remaining-panel,
.attempts-table-wrap {
    border-radius: 12px;
}
.contact-card-wrap,
.support-banner,
.doc-card,
.price-card,
.payment-guide-container,
.guide-card,
.auth-card-frame,
#amanotaLookupFormView,
.remaining-panel,
.attempts-table-wrap {
    box-shadow: 0 10px 26px rgba(7,31,56,0.07);
}

.btn-read,
.btn-auth-submit,
.btn-submit-lookup,
.rem-buy-btn,
.btn-open-review,
.btn-balance-check {
    border-radius: 8px;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(0,184,217,0.45);
    outline-offset: 2px;
}

footer,
.footer {
    background: #061a2d;
}
footer a,
.footer a { color: #7dd3fc; }
footer strong,
.footer strong { color: #7dd3fc; }

@media (min-width: 901px) {
    .navbar + .hero { margin-top: 12px; }
    .workspace-scroll-container { margin-top: 72px; padding-top: 12px; }
}

@media (max-width: 900px) {
    .navbar {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        width: 100%;
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 8px 4% 6px !important;
        gap: 0 !important;
    }
    .navbar-brand-wrap { flex: 1; }
    .lang-badge { display: none !important; }
    nav { width: 100%; }
    .navbar-links {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 6px 0 2px !important;
        margin: 0 !important;
    }
    .navbar-links li { list-style: none; }
    .navbar-links a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 8px 8px !important;
        border: 1px solid rgba(11,105,139,0.08) !important;
        border-radius: 8px !important;
        background: rgba(11,105,139,0.035) !important;
        box-shadow: none !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .navbar-links a i { flex-shrink: 0; font-size: 0.78rem !important; }
    .navbar-links a.active {
        color: #fff !important;
        background: linear-gradient(135deg, var(--public-teal), #0ea5e9) !important;
        border-color: rgba(11,105,139,0.25) !important;
    }
    .navbar-links a.active i { color: #fff !important; }
    .navbar-links a.active::after { display: none; }
    .hero { padding: 32px 18px 28px; }
    .hero h1 { line-height: 1.12; }
    body { padding-top: 0 !important; }
    .page { padding-top: 16px !important; }
    .workspace-scroll-container { margin-top: 0 !important; }
    .workspace-scroll-container:not(.results-open) { padding-top: 12px !important; }
}

@media (max-width: 420px) {
    .navbar-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .navbar-links a { padding: 7px 6px !important; font-size: 0.68rem !important; }
}