:root {
    --navy: #0b1d36;
    --navy-2: #132844;
    --navy-3: #1b365d;
    --gold: #c9a227;
    --gold-2: #e0bc4a;
    --cream: #f6f1e6;
    --ink: #142033;
    --muted: #5b6b80;
    --line: #e6e1d6;
    --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Outfit', system-ui, sans-serif;
    color: var(--ink);
    background: #fbfaf7;
    line-height: 1.6;
}

h1, h2, h3, h4, .display, .serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -0.02em;
    color: var(--navy);
}

/* Topbar + Nav */
.topbar {
    background: var(--navy);
    color: rgba(255,255,255,.78);
    font-size: 12.5px;
    padding: 8px 0;
    letter-spacing: .02em;
}
.topbar i { color: var(--gold); margin-right: 6px; }
.trust-chip {
    border: 1px solid rgba(201,162,39,.35);
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    color: #f0e6c4;
}
.top-phone { color: var(--gold-2); text-decoration: none; font-weight: 600; }
.top-phone:hover { color: #fff; }

.navbar {
    background: rgba(251,250,247,.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}
.brand-mark {
    width: 46px;
    height: 46px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--line);
}
.brand-mark-sm { width: 40px; height: 40px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--navy);
    font-weight: 700;
}
.brand-text small {
    font-size: 9.5px;
    letter-spacing: .22em;
    color: var(--gold);
    font-weight: 600;
}
.brand-text-light strong { color: #fff; }
.brand-text-light small { color: var(--gold-2); }

.navbar .nav-link {
    color: var(--navy-2);
    font-weight: 500;
    font-size: 14.5px;
    padding: 8px 12px !important;
}
.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--gold); }

.btn-gold {
    background: linear-gradient(180deg, var(--gold-2), var(--gold));
    color: var(--navy) !important;
    border: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 4px;
    letter-spacing: .03em;
    box-shadow: 0 8px 20px rgba(201,162,39,.28);
}
.btn-gold:hover { filter: brightness(1.06); color: var(--navy) !important; }
.btn-outline-navy {
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
}
.btn-outline-navy:hover { background: #fff; color: var(--navy); }
.btn-navy {
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 12px 22px;
    font-weight: 600;
    border-radius: 4px;
}
.btn-navy:hover { background: var(--navy-3); color: #fff; }

/* Hero */
.hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(11,29,54,.82) 0%, rgba(11,29,54,.45) 55%, rgba(11,29,54,.25) 100%),
        url('../img/hero-office.jpg') center/cover no-repeat;
}
.hero-kicker {
    color: var(--gold-2);
    letter-spacing: .28em;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hero h1 {
    color: #fff;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    max-width: 16ch;
    margin-bottom: 18px;
}
.hero p.lead {
    max-width: 38rem;
    color: rgba(255,255,255,.86);
    font-size: 18px;
    font-weight: 300;
}
.hero-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
    display: flex;
    gap: 36px;
    margin-top: 48px;
    flex-wrap: wrap;
}
.hero-stats div { min-width: 120px; }
.hero-stats strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    color: var(--gold-2);
    line-height: 1;
}
.hero-stats span { font-size: 13px; color: rgba(255,255,255,.7); }

/* Sections */
.section { padding: 90px 0; }
.section-tight { padding: 60px 0; }
.kicker {
    color: var(--gold);
    letter-spacing: .24em;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.section h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; }
.lede { color: var(--muted); font-size: 17px; max-width: 40rem; }

/* Cards */
.service-card, .industry-card, .step-card, .why-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover, .industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11,29,54,.08);
}
.icon-wrap {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: rgba(201,162,39,.12);
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}
.service-card h3, .industry-card h3 { font-size: 26px; margin-bottom: 8px; }
.service-card p, .industry-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 0; }
.pill-list { list-style: none; padding: 0; margin: 14px 0 0; }
.pill-list li {
    font-size: 13.5px;
    color: var(--navy-2);
    padding: 4px 0;
}
.pill-list li::before { content: "▸ "; color: var(--gold); }

.industry-card {
    overflow: hidden;
    padding: 0;
}
.industry-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.industry-card .body { padding: 22px; }

/* Why / process */
.why-grid .why-card { text-align: left; }
.step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 8px;
}

/* Quote / forms */
.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(11,29,54,.06);
}
.form-control, .form-select {
    border-radius: 6px;
    border-color: #ddd6c8;
    padding: 11px 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(201,162,39,.18);
}
.form-label { font-size: 13px; font-weight: 600; color: var(--navy); }

/* Dark band */
.band-navy {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 100%);
    color: #fff;
}
.band-navy h2, .band-navy h3 { color: #fff; }
.band-cream { background: var(--cream); }

/* Testimonials */
.quote-card {
    background: #fff;
    border-left: 3px solid var(--gold);
    padding: 24px 26px;
    border-radius: 0 12px 12px 0;
    height: 100%;
}
.quote-card p { font-style: italic; color: var(--navy-2); }
.quote-card cite { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 600; }

/* Footer */
.site-footer {
    background: #081526;
    color: rgba(255,255,255,.72);
    padding: 72px 0 24px;
    font-size: 14.5px;
}
.site-footer h6 {
    color: #fff;
    letter-spacing: .16em;
    font-size: 12px;
    font-family: 'Outfit', sans-serif;
    margin-bottom: 16px;
}
.footer-blurb { max-width: 32ch; }
.footer-links, .footer-contact { list-style: none; padding: 0; }
.footer-links a, .footer-contact a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { color: var(--gold-2); }
.footer-links li, .footer-contact li { margin-bottom: 8px; }
.footer-contact i { color: var(--gold); margin-right: 8px; }
.soc {
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none;
}
.soc:hover { background: var(--gold); color: var(--navy); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 48px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}
.fine { opacity: .6; }

.wa-float {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 56px; height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(37,211,102,.4);
    z-index: 50;
    text-decoration: none;
}
.wa-float:hover { color: #fff; transform: scale(1.06); }

.page-hero {
    background: linear-gradient(120deg, rgba(11,29,54,.88), rgba(11,29,54,.55)),
                url('../img/hero-office.jpg') center/cover;
    color: #fff;
    padding: 90px 0 70px;
}
.page-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 58px); }
.page-hero p { color: rgba(255,255,255,.8); max-width: 36rem; }

.alert-success-soft {
    background: #eef7ef;
    border: 1px solid #c8e0cb;
    color: #1d5a28;
    border-radius: 10px;
    padding: 16px 18px;
}

@media (max-width: 767px) {
    .hero { min-height: 78vh; }
    .section { padding: 64px 0; }
}

.parent-bar {
    background: #061018;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 0;
}
.parent-bar a { color: var(--gold-2); text-decoration: none; }
.parent-bar a:hover { color: #fff; }

.view-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    letter-spacing: .02em;
}
.view-more:hover { color: var(--gold); }

.hub-card { min-height: 100%; }
.price-tag { color: var(--gold); font-weight: 600; font-size: 14px; }

/* Auth */
.auth-wrap { min-height: 70vh; display: flex; align-items: center; padding: 48px 0; }
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.auth-panel { padding: 48px 40px; }
.auth-aside {
    background: linear-gradient(160deg, rgba(11,29,54,.82), rgba(11,29,54,.5)), url('../img/school.jpg') center/cover;
    color: #fff;
    padding: 48px 40px;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.auth-aside.recruit {
    background: linear-gradient(160deg, rgba(11,29,54,.8), rgba(11,29,54,.45)), url('../img/military-camp.jpg') center/cover;
}
.auth-aside.client-soft {
    background: linear-gradient(160deg, rgba(246,241,230,.92), rgba(246,241,230,.7)), url('../img/hospital.jpg') center/cover;
    color: var(--navy);
}
@media (max-width: 991px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-aside { min-height: 220px; }
}

/* Portals */
.portal-body { background: #f3efe6; }
.portal-body.portal-client { background: #f7f3ea; }
.portal-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.portal-side {
    background: var(--navy);
    color: #fff;
    padding: 22px 16px;
    display: flex; flex-direction: column;
}
.side-brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: #fff; margin-bottom: 28px; }
.side-brand img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #fff; }
.side-brand strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 20px; }
.side-brand small { display: block; font-size: 9px; letter-spacing: .14em; color: var(--gold-2); }
.side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.side-nav a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    display: flex; align-items: center; gap: 10px;
}
.side-nav a:hover, .side-nav a:focus, .side-nav a.on { background: rgba(255,255,255,.08); color: #fff; }
.side-nav a.on { box-shadow: inset 3px 0 0 var(--gold); }
.badge-dot { background: var(--gold); color: var(--navy); font-size: 10px; padding: 1px 6px; border-radius: 99px; margin-left: auto; }
.side-foot { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
.side-user { font-size: 13px; } .side-user small { display: block; opacity: .6; }
.side-out { color: var(--gold-2); font-size: 13px; text-decoration: none; }
.portal-main { display: flex; flex-direction: column; min-width: 0; }
.portal-top {
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(10px);
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
}
.portal-top h1 { font-size: 28px; margin: 0; }
.portal-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--navy); color: var(--gold-2);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.portal-content { padding: 28px; }
.stat-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px;
    height: 100%;
}
.stat-card .num { font-family: 'Cormorant Garamond', serif; font-size: 36px; color: var(--navy); line-height: 1; }
.table-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.table-card h3 { padding: 16px 18px 0; font-size: 22px; }
.calm-hero {
    background: linear-gradient(120deg, #efe6d4, #f7f3ea 55%, #e7eef0);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 36px;
}
.calm-hero h2 { font-size: 42px; margin-bottom: 8px; }
@media (max-width: 991px) {
    .portal-shell { grid-template-columns: 1fr; }
    .portal-side { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .side-nav { flex-direction: row; flex-wrap: wrap; }
}

html[dir="rtl"] { text-align: right; }
html[lang="ar"] { font-family: 'Noto Naskh Arabic', 'Outfit', sans-serif; }
html[lang="zh"] { font-family: 'Noto Sans SC', 'Outfit', sans-serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3 { font-family: inherit; }

.image-preview-wrap {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #eee;
    aspect-ratio: 4/3;
}
.image-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-thumb {
    width: 64px; height: 48px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--line);
}