/* Dedicated menu pages. These styles extend the approved website look without changing the homepage. */
.detail-main { overflow: hidden; }
.detail-hero { padding-bottom: 86px; }
.detail-hero-grid { grid-template-columns: .88fr 1.12fr; }
.detail-content-section { padding-bottom: 96px; }

.detail-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.detail-visual-glow { position: absolute; width: 78%; height: 70%; border-radius: 50%; background: var(--project-accent); opacity: .13; filter: blur(48px); }
.detail-dashboard { position: relative; z-index: 2; width: min(100%, 650px); overflow: hidden; border: 1px solid #d6e1ed; border-radius: 25px; background: #fff; box-shadow: 0 32px 80px rgba(7,29,60,.16); transform: rotate(1deg); }
.detail-dashboard-top { height: 47px; padding: 0 17px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #e8edf4; background: #f8fafc; }
.detail-dashboard-top > span { width: 9px; height: 9px; border-radius: 50%; background: #ff766f; }
.detail-dashboard-top > span:nth-child(2) { background: #ffc85a; }
.detail-dashboard-top > span:nth-child(3) { background: #52c987; }
.detail-dashboard-top small { margin: auto; min-width: 210px; padding: 7px 18px; border: 1px solid #e4eaf2; border-radius: 9px; color: #8a96a8; background: #fff; text-align: center; }
.detail-dashboard-body { min-height: 390px; padding: 34px; background: linear-gradient(145deg, #f9fbff, var(--project-accent-soft)); }
.detail-dashboard-head { display: flex; align-items: center; gap: 15px; }
.detail-dashboard-head > span { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 17px; color: #fff; background: linear-gradient(145deg, var(--project-accent-dark), var(--project-accent)); font-size: 1.35rem; }
.detail-dashboard-head div { display: flex; flex-direction: column; }
.detail-dashboard-head small { color: var(--project-accent); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.detail-dashboard-head strong { margin-top: 5px; font-family: "Space Grotesk"; font-size: 1.55rem; letter-spacing: -.035em; }
.detail-card-grid { margin-top: 27px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.detail-card-grid article { min-height: 116px; padding: 18px; display: flex; align-items: flex-start; gap: 13px; border: 1px solid #dfe7f1; border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 10px 25px rgba(7,29,60,.05); }
.detail-card-grid article > i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--project-accent); background: var(--project-accent-soft); font-size: 1rem; }
.detail-card-grid article div { display: flex; flex-direction: column; }
.detail-card-grid strong { color: var(--project-accent-dark); font-size: .76rem; }
.detail-card-grid small { margin-top: 6px; color: #78869a; font-size: .63rem; line-height: 1.45; }
.detail-floating-note { position: absolute; z-index: 3; right: -18px; bottom: 43px; max-width: 250px; padding: 15px 17px; display: flex; align-items: center; gap: 11px; border: 1px solid #dfe7f1; border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 18px 45px rgba(7,29,60,.14); }
.detail-floating-note > i { color: var(--project-accent); font-size: 1.2rem; }
.detail-floating-note span { display: flex; flex-direction: column; }
.detail-floating-note strong { font-size: .7rem; }
.detail-floating-note small { margin-top: 3px; color: #7a8798; font-size: .58rem; line-height: 1.35; }

.detail-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 46px; align-items: start; }
.detail-check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.detail-check-list > div { min-height: 80px; padding: 17px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #dfe6f0; border-radius: 16px; color: #536278; background: linear-gradient(145deg,#fff,#fbfcff); font-size: .75rem; line-height: 1.5; }
.detail-check-list i { margin-top: 1px; color: var(--project-accent); font-size: 1rem; }

.detail-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.detail-process-card { position: relative; min-height: 215px; padding: 25px 22px 22px; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 19px; background: linear-gradient(145deg,#fff,#fbfcff); }
.detail-process-card > span { position: absolute; right: 18px; top: 14px; color: var(--project-accent-soft); font-family: "Space Grotesk"; font-size: 2.5rem; font-weight: 700; line-height: 1; }
.detail-process-card > i { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 14px; color: var(--project-accent); background: var(--project-accent-soft); font-size: 1.1rem; }
.detail-process-card h3 { margin: 20px 0 8px; font-family: "Space Grotesk"; font-size: 1rem; letter-spacing: -.025em; }
.detail-process-card p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.6; }

.client-hero-showcase { position: relative; min-height: 500px; display: grid; align-content: center; gap: 17px; }
.client-hero-card { position: relative; z-index: 2; padding: 28px; border: 1px solid #d8e4f0; border-radius: 23px; background: linear-gradient(145deg,#fff,#f1f7ff); box-shadow: 0 24px 60px rgba(7,29,60,.1); }
.client-hero-card > span { color: var(--project-accent); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.client-hero-card h3 { margin: 8px 0 9px; font-family: "Space Grotesk"; font-size: 1.8rem; letter-spacing: -.04em; }
.client-hero-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.client-logo-cloud { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.client-logo-cloud > div { min-height: 115px; padding: 17px; display: grid; place-items: center; border: 1px solid #dce6f1; border-radius: 17px; background: rgba(255,255,255,.95); box-shadow: 0 13px 30px rgba(7,29,60,.06); }
.client-logo-cloud > div:nth-child(4), .client-logo-cloud > div:nth-child(5) { grid-column: span 1; }
.client-logo-cloud img { max-width: 135px; max-height: 62px; object-fit: contain; }

.contact-detail-hero { padding-bottom: 72px; }
.contact-hero-panel { padding: 35px; border: 1px solid #d5e1ed; border-radius: 26px; background: linear-gradient(145deg,#fff,#edf5ff); box-shadow: 0 28px 70px rgba(7,29,60,.12); }
.contact-hero-icon { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: linear-gradient(145deg,var(--project-accent-dark),var(--project-accent)); font-size: 1.45rem; }
.contact-hero-panel > small { display: block; margin-top: 21px; color: var(--project-accent); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-hero-panel > h3 { margin: 7px 0 20px; font-family: "Space Grotesk"; font-size: 2rem; line-height: 1.08; letter-spacing: -.045em; }
.contact-hero-panel > div { padding: 15px 0; display: flex; gap: 12px; border-top: 1px solid #dce5ef; }
.contact-hero-panel > div > i { color: var(--project-accent); font-size: 1.2rem; }
.contact-hero-panel > div > span { display: flex; flex-direction: column; }
.contact-hero-panel strong { font-size: .82rem; }
.contact-hero-panel small { margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.detail-contact-page { margin-top: 0; }
.contact-next-section { padding: 92px 0; background: #f8fbff; }

@media (max-width: 1100px) {
    .detail-hero-grid { gap: 28px; }
    .detail-floating-note { right: 0; }
}

@media (max-width: 980px) {
    .detail-hero-grid, .detail-split { grid-template-columns: 1fr; }
    .detail-visual, .client-hero-showcase { min-height: 450px; }
    .detail-process-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 740px) {
    .detail-hero { padding-bottom: 62px; }
    .detail-visual { min-height: 420px; }
    .detail-dashboard-body { padding: 24px; }
    .detail-floating-note { position: relative; right: auto; bottom: auto; margin: -10px auto 0; }
    .detail-check-list, .detail-process-grid { grid-template-columns: 1fr; }
    .client-logo-cloud { grid-template-columns: repeat(2,1fr); }
    .contact-hero-panel { padding: 26px; }
}

@media (max-width: 520px) {
    .detail-visual { min-height: 390px; }
    .detail-dashboard { border-radius: 19px; }
    .detail-dashboard-top small { min-width: 0; padding: 7px 10px; }
    .detail-dashboard-head strong { font-size: 1.25rem; }
    .detail-card-grid { grid-template-columns: 1fr; }
    .detail-card-grid article { min-height: 0; }
    .client-logo-cloud { grid-template-columns: 1fr; }
    .client-logo-cloud > div { min-height: 100px; }
    .contact-hero-panel > h3 { font-size: 1.6rem; }
}