/* ============================================================
   R5Z — STYLE.CSS (CLEAN, FINAL)
   ============================================================ */

/* ---------- COLOURS ---------- */
:root {
    --navy: #071a2f;
    --navy2: #0d2947;
    --navy-mid: #1e3a5f;
    --navy-hover: #4a8fd4;
    --ink: #071a2f;
    --muted: #657487;
    --line: #dce4eb;
    --bg: #f5f7f9;
    --white: #fff;
    --accent: #071a2f;
    --blue: #071a2f;
    --shadow: 0 20px 55px rgba(7, 26, 47, .10);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.playfair { font-family: "Playfair Display", serif; }

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

/* ---------- TOPBAR ---------- */
.topbar {
    background: var(--navy);
    color: #b8c7d6;
    font-size: 13px;
}
.topbar .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 0;
}
.topbar a { color: #fff; transition: color .25s ease; }
.topbar a:hover { color: var(--navy-hover); }

/* ---------- HERO ---------- */
.hero {
    position: relative;
    min-height: 690px;
    background: var(--navy);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}
.hero .slide {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease;
}
.hero .slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
.hero .slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.55);
}
.hero .slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(4,17,31,.96) 0%, rgba(4,17,31,.78) 42%, rgba(4,17,31,.12) 100%);
}
.hero .slide .hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
}
.hero .slide .hero-content .container {
    position: relative;
    z-index: 3;
}
.hero .slide .hero-content h1,
.hero .slide .hero-content p,
.hero .slide .hero-content .eyebrow,
.hero .slide .hero-content .actions {
    position: relative;
    z-index: 4;
}
.hero h1 { font-size: clamp(42px, 6vw, 76px); max-width: 790px; }
.hero p { font-size: 18px; color: #d9e4ee; max-width: 680px; margin: 0 0 30px; }

/* HERO ANIMATION */
.hero .slide.active .hero-content .eyebrow { animation: heroIn .65s ease both; }
.hero .slide.active .hero-content h1 { animation: heroIn .75s .08s ease both; }
.hero .slide.active .hero-content p { animation: heroIn .75s .16s ease both; }
.hero .slide.active .hero-content .actions { animation: heroIn .75s .24s ease both; }

@keyframes heroIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero .slide.active .hero-content .eyebrow,
    .hero .slide.active .hero-content h1,
    .hero .slide.active .hero-content p,
    .hero .slide.active .hero-content .actions { animation: none; }
}

/* ---------- EYEBROW ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 20px;
}
.eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--accent);
}

h1, h2, h3 { line-height: 1.08; margin: 0 0 18px; letter-spacing: -.035em; }
.section h2 { font-size: clamp(34px, 3vw, 54px); }

/* ---------- BUTTONS ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 20px;
    border-radius: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.btn-primary { background: var(--accent); color: #101b2a; }
.btn-primary:hover { background: #ffd329; }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy2); }
.btn-outline { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.06); }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: var(--accent); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #f1f4f7; }

/* ---------- SLIDER UI ---------- */
.slider-ui { position: absolute; z-index: 3; bottom: 32px; left: 0; right: 0; }
.slider-ui .container { display: flex; justify-content: space-between; align-items: center; }
.dots { display: flex; gap: 7px; }
.dot {
    width: 34px; height: 4px; border: 0;
    background: #738395; cursor: pointer;
    transition: background .25s ease, width .25s ease;
}
.dot:hover { background: #c5d0da; }
.dot.active { background: var(--accent); width: 45px; }
.slide-note { font-size: 12px; color: #b8c7d6; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- SECTIONS ---------- */
.section { padding: 80px 0; }
.section-sm { padding: 40px 0; }
.section-dark { background: var(--navy); color: #fff; }
.section-gray { background: var(--bg); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }

.section-kicker {
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 14px;
}
.section-dark .section-kicker { color: var(--accent); }

.lead { font-size: 18px; color: var(--muted); max-width: 680px; }
.section-dark .lead { color: #c2cfdb; }

/* ---------- IMAGE CARD ---------- */
.image-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--navy);
}
.image-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform .7s;
}
.image-card:hover img { transform: scale(1.04); }
.image-tag {
    position: absolute;
    left: 18px; bottom: 18px;
    background: rgba(7,26,47,.92);
    color: #fff;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    border-left: 3px solid var(--accent);
}

/* ---------- GRIDS ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ---------- CARDS ---------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow);
    border-color: #bdcbd8;
}
.card h3 { font-size: 22px; }
.card p { color: var(--muted); margin: 0; }
.icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #eef4fb;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-weight: 900;
    margin-bottom: 22px;
}
.number { font-size: 12px; color: #7b8b9c; font-weight: 900; letter-spacing: .14em; }

/* ---------- PROCESS ---------- */
.process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    margin-top: 50px;
}
.process::before {
    content: "";
    position: absolute;
    top: 12px; left: 5%; right: 5%;
    height: 2px;
    background: #cbd5df;
}
.process-item { position: relative; z-index: 1; text-align: center; }
.process-item::before {
    content: "";
    display: block;
    width: 24px; height: 24px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--navy);
    border: 6px solid #fff;
    box-shadow: 0 0 0 2px #cbd5df, 0 6px 16px rgba(7,26,47,.12);
    transition: .3s;
}
.process-item h4 { font-size: 16px; color: var(--navy); margin: 0 0 8px; line-height: 1.3; }
.process-item p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.process-item:hover::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(7,26,47,.25); }
.process-item:hover h4 { color: var(--navy2); }

@media (max-width: 900px) {
    .process { grid-template-columns: repeat(3, 1fr); gap: 30px; }
    .process::before { display: none; }
}
@media (max-width: 600px) {
    .process { grid-template-columns: 1fr 1fr; gap: 30px 15px; }
}
@media (max-width: 425px) {
    .process { grid-template-columns: 1fr; }
    .process-item { text-align: left; padding-left: 40px; }
    .process-item::before { position: absolute; left: 0; top: 2px; margin: 0; }
}

/* ---------- METRICS ---------- */
.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #30445a;
    margin-top: 38px;
    border: 1px solid #30445a;
}
.metric { padding: 25px; background: var(--navy2); }
.metric strong { display: block; font-size: 28px; color: #fff; }
.metric span { font-size: 12px; color: #b8c7d6; }

/* ---------- SERVICE CARDS ---------- */
.service-card { padding: 0; overflow: hidden; }
.service-card img { aspect-ratio: 16/10; object-fit: cover; }
.service-body { padding: 26px; }
.service-body ul, .clean-list { padding: 0; margin: 18px 0 0; list-style: disc; }
.service-body li, .clean-list li { position: relative; padding-left: 22px; margin: 8px 0; color: var(--muted); }

/* ---------- BANNER ---------- */
.banner {
    background: linear-gradient(120deg, var(--navy), var(--navy2));
    color: #fff;
    padding: 54px 0;
    border-top: 1px solid rgba(255,255,255,.04);
}
.banner-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.banner h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 8px; }
.banner p { color: #c7d3df; margin: 0; }

/* ---------- PAGE HERO ---------- */
.page-hero {
    background: linear-gradient(110deg, var(--navy) 0%, var(--navy2) 70%, #143d64 100%);
    color: #fff;
    padding: 90px 0;
}
.page-hero h1 { font-size: clamp(42px, 4vw, 68px); max-width: 800px; }
.page-hero p { max-width: 720px; color: #c8d6e3; font-size: 18px; }

/* ---------- TABLES, NOTICE, FORMS ---------- */
.table-like { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.row { display: grid; grid-template-columns: 1fr 2fr; padding: 18px 22px; border-bottom: 1px solid var(--line); gap: 20px; }
.row:last-child { border: 0; }
.row strong { color: var(--navy); }

.notice {
    padding: 22px 24px;
    background: #fff8d8;
    border: 1px solid #f0d86d;
    border-radius: 16px;
    color: #5d5000;
}

.download-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.download-card .icon { margin: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 25px; }
.contact-box { padding: 30px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
.contact-box h3 { margin-bottom: 8px; }
.contact-box p { color: var(--muted); margin: 0; }

.form { background: #fff; border: 1px solid var(--line); padding: 30px; border-radius: 22px; box-shadow: var(--shadow); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 800; }
.field input, .field textarea, .field select {
    font: inherit;
    border: 1px solid #ccd7e1;
    border-radius: 10px;
    padding: 13px 14px;
    outline: 0;
    background: #fbfcfd;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(44,114,214,.10);
}
.field textarea { min-height: 150px; resize: vertical; }


/* ---------- REVEAL, FLOATING ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

.floating {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 40;
    display: flex;
    gap: 8px;
}
.floating a {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    font-weight: 900;
    transition: transform .25s, box-shadow .25s;
}
.floating a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(7,26,47,.25); }

.small { font-size: 13px; color: var(--muted); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .footer-logo { height: 60px; }
}

@media (max-width: 991px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 900px) {
    .hero, .hero .slide, .hero .slide .hero-content { min-height: 620px; height: fit-content; }
    .split, .contact-grid { grid-template-columns: 1fr; gap: 38px; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .metrics { grid-template-columns: 1fr 1fr; }
    .banner-inner { flex-direction: column; align-items: flex-start; }
    .section { padding: 50px 0; }
}

@media (max-width: 600px) {
    .container { width: min(100% - 28px, 1180px); }
    .hero h1 { font-size: 42px; }
    .hero p { font-size: 16px; }
    .grid-2, .grid-3, .grid-4, .fields { grid-template-columns: 1fr; }
    .metrics { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
    .download-card { align-items: flex-start; flex-direction: column; }
    .page-hero { padding: 65px 0; }
    .section { padding: 38px 0; }
    .slider-ui .container { align-items: flex-end; }
    .slide-note { display: none; }
    .floating { right: 12px; bottom: 12px; }
    .footer { padding: 40px 0 0; }
    .footer-logo { height: 55px; margin-bottom: 15px; }
    .footer h4 { font-size: 15px; }
    .footer-contact li { font-size: 13px; }
    .footer-business { flex-direction: column; gap: 12px; }
    .business-item { font-size: 12px; }
    .footer-bottom { font-size: 12px; }
}

@media (max-width: 425px) {
    .hero, .hero .slide, .hero .slide .hero-content { min-height: 760px; height: fit-content; }
}

/* ---------- SELECTION ---------- */
::selection { background: var(--accent); color: #fff; }