:root {
    --orange: #eb5647;
    --orange-dark: #d95713;
    --petrol: #0f2e3d;
    --petrol-2: #153447;
    --ink: #141212;
    --muted: #647177;
    --light: #f4f6f6;
    --white: #ffffff;
    --line: #e2e7e8;
    --max: 1240px;
    --shadow: 0 16px 40px rgba(5, 40, 48, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }

.topline { background: white; color: var(--petrol); font-size: 12px; }
.top-inner { min-height: 34px; display:flex; justify-content:space-between; align-items:center; }
.top-links { display:flex; gap:20px; }
.top-links a:hover { color: white; }

.nav-wrap { background: white; border-bottom: 1px solid var(--line); }
.nav { min-height: 78px; display:flex; align-items:center; gap:42px; }
.brand { font-size: 28px; font-weight: 900; letter-spacing:-2px; color:var(--petrol); }
.brand-mark { color: var(--petrol); }
.brand-dot { color:var(--orange); margin-left:3px; }
.main-nav { display:flex; gap:28px; flex:1; font-size:14px; font-weight:700; }
.main-nav a:hover { color:var(--orange); }
.nav-actions { display:flex; align-items:center; gap:12px; }
.icon-button { border:0; background:transparent; font-size:25px; cursor:pointer; color:var(--petrol); }
.login-button { background:var(--orange); color:white; padding:12px 18px; font-size:13px; font-weight:700; }

/*.hero { background:linear-gradient(110deg, var(--petrol) 0%, #075465 60%, #0a6472 100%); color:white; overflow:hidden; } */
.hero {
    position: relative;
    min-height: 600px;

    background-color: #0f2e3d;

    background-image:
        linear-gradient(
            90deg,
            #0f2e3d 0%,
            rgba(15, 46, 61, 0.85) 8%,
            rgba(15, 46, 61, 0.15) 22%,
            rgba(15, 46, 61, 0.00) 35%,
            rgba(15, 46, 61, 0.00) 65%,
            rgba(15, 46, 61, 0.15) 78%,
            rgba(15, 46, 61, 0.85) 92%,
            #0f2e3d 100%
        ),
        url("hero_background.png");

    background-position: center center;
    background-size: 100% 100%, auto 100%;
    background-repeat: no-repeat;

    color: white;
    overflow: hidden;
}
.hero-grid { min-height:600px; display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; }
.eyebrow { color:var(--orange); font-size:12px; letter-spacing:2px; font-weight:800; display:block; margin-bottom:12px; }
.hero h1 { font-size:clamp(42px, 5vw, 70px); line-height:1.02; margin:0 0 24px; letter-spacing:-2px; }
.hero h1 strong { color: var(--orange); }
.hero p { max-width:600px; color:#d9e8ea; font-size:18px; }
.hero-buttons { display:flex; gap:12px; margin-top:30px; }
.btn { display:inline-flex; padding:14px 22px; font-weight:800; font-size:14px; align-items:center; justify-content:center; }
.btn-primary { background:var(--orange); color:white; }
.btn-light { background:white; color:var(--petrol); }
.btn-dark { background:var(--petrol); color:white; }

.hero-art { position:relative; height:400px; }
.orb { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.orb-1 { width:390px; height:390px; right:20px; top:0; }
.orb-2 { width:250px; height:250px; right:90px; top:70px; background:rgba(255,255,255,.04); }
.hero-card { position:absolute; background:white; color:var(--petrol); padding:22px; box-shadow:var(--shadow); min-width:230px; }
.hero-card small { display:block; color:var(--muted); margin-bottom:5px; }
.hero-card strong { font-size:17px; }
.card-a { right:60px; top:85px; transform:rotate(3deg); }
.card-b { left:35px; bottom:60px; transform:rotate(-4deg); }

.quick-section, .cards-section, .news-section { padding:85px 0; }
.section-heading { margin-bottom:38px; }
.section-heading.inline { display:flex; align-items:end; justify-content:space-between; }
.section-heading h2 { font-size:38px; line-height:1.1; margin:0 0 10px; letter-spacing:-1px; }
.section-heading p { color:var(--muted); margin:0; }
.quick-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.quick-card { border:1px solid var(--line); padding:25px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; min-height:130px; transition:.2s; }
.quick-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#c9d4d6; }
.q-icon { color:var(--orange); font-size:27px; }
.quick-card h3 { margin:0 0 4px; font-size:17px; }
.quick-card p { margin:0; color:var(--muted); font-size:13px; }
.quick-card > span:last-child { color:var(--orange); font-weight:bold; }

.feature-section { background:var(--light); padding:90px 0; }
.two-col { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }

.feature-copy h2 { font-size:42px; line-height:1.1; margin:0 0 20px; }
.feature-copy p { color:var(--muted); font-size:17px; }
.text-link { color:var(--orange); font-weight:800; font-size:14px; }

```css
.feature-image {
    width: 100%;
    min-width: 0;
}

.feature-visual {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
```


.content-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.content-card { border:1px solid var(--line); padding:30px; min-height:250px; position:relative; }
.content-card.accent { background:var(--petrol); color:white; border-color:var(--petrol); }
.card-label { color:var(--orange); font-size:11px; letter-spacing:1.7px; font-weight:800; }
.content-card h3 { font-size:25px; margin:25px 0 10px; }
.content-card p { color:var(--muted); }
.content-card.accent p { color:#d7e5e7; }
.content-card a { color:var(--orange); font-weight:800; position:absolute; bottom:28px; }

.news-section { background:#fafbfb; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.news-card { background:white; border:1px solid var(--line); padding:28px; }
.news-date { color:var(--orange); font-size:11px; font-weight:800; letter-spacing:1.4px; }
.news-card h3 { font-size:21px; line-height:1.25; margin:17px 0 10px; }
.news-card p { color:var(--muted); min-height:50px; }
.news-card a { color:var(--orange); font-weight:800; font-size:14px; }

.cta { background:#edf2f2; padding:55px 0; }
.cta-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.cta h2 { margin:0 0 6px; font-size:32px; }
.cta p { margin:0; color:var(--muted); }

.footer { background:var(--petrol); color:#d8e5e7; padding:55px 0 20px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:50px; }
.footer-brand { font-size:30px; font-weight:900; color:white; }
.footer-brand span { color:var(--orange); }
.footer h4 { color:white; margin-top:0; }
.footer-grid a { display:block; margin:8px 0; color:#c7d9dc; font-size:14px; }
.footer-bottom { margin-top:45px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); display:flex; justify-content:space-between; font-size:12px; }

@media (max-width: 900px) {
    .main-nav { display:none; }
    .hero-grid, .two-col { grid-template-columns:1fr; }
    .hero { padding:55px 0; }
    .hero-art { display:none; }
    .quick-grid { grid-template-columns:repeat(2,1fr); }
    .content-grid, .news-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
    .container { width:min(var(--max), calc(100% - 28px)); }
    .topline { display:none; }
    .nav { min-height:65px; gap:10px; }
    .login-button { padding:9px 12px; }
    .hero h1 { font-size:43px; }
    .quick-grid { grid-template-columns:1fr; }
    .section-heading h2, .feature-copy h2 { font-size:31px; }
    .section-heading.inline, .cta-inner { align-items:flex-start; flex-direction:column; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:8px; }
}