/* Cabin Cruiser shared brand stylesheet */
:root {
    --navy:#061322;
    --navy2:#0d1b2a;
    --gold:#fca311;
    --gold2:#ffbe55;
    --white:#fff;
    --muted:rgba(255,255,255,.78);
}
@font-face {
    font-family:"Corn";
    src:url("fonts/corn_regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--navy2);
    color:var(--white);
    line-height:1.6
}
.navbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 42px;
    background:linear-gradient(to bottom,rgba(6,19,34,.92),rgba(6,19,34,.45),rgba(6,19,34,0))
}
.logo {
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:white
}
.logo img {
    height:48px;
    width:auto;
    display:block
}
.logo-text {
    font-family:"Corn",Arial,Helvetica,sans-serif;
    font-size:24px;
    letter-spacing:2px;
    font-weight:400;
    line-height:1.05;
    text-transform:uppercase
}
.menu {
    display:flex;
    align-items:center;
    gap:28px
}
.menu a {
    color:white;
    text-decoration:none;
    font-size:13px;
    letter-spacing:1.4px;
    text-transform:uppercase;
    opacity:.88
}
.menu a:hover,.menu a.active {
    color:var(--gold2);
    opacity:1
}
.nav-cta {
    border:1px solid rgba(252,163,17,.75);
    border-radius:10px;
    padding:12px 20px;
    color:var(--gold2)!important
}
.mobile-menu-btn {
    display:none;
    background:rgba(6,19,34,.45);
    border:1px solid rgba(252,163,17,.7);
    color:var(--gold2);
    font-size:24px;
    border-radius:10px;
    padding:6px 12px;
    line-height:1;
    cursor:pointer
}

/* HOMEPAGE BRAND STRIP */

.brand-strip {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(252, 163, 17, .18);
    border-top: 1px solid rgba(252, 163, 17, .22);
    border-bottom: 1px solid rgba(252, 163, 17, .18);
}

.brand-strip a,
.brand-item {
    text-decoration: none;
    color: inherit;
}

.brand-item {
    display: block;
    background: rgba(6, 19, 34, .92);
    padding: 28px 30px;
    transition: background .25s ease, transform .25s ease;
}

.brand-item:hover {
    background: rgba(12, 31, 52, .96);
    transform: translateY(-2px);
}

.brand-item h3 {
    margin: 0 0 8px 0;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold2);
}

.brand-item p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

/* INDEX HERO */

.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 6vw 80px 6vw;
    background:
        linear-gradient(
            to right,
            rgba(6, 19, 34, .98) 0%,
            rgba(6, 19, 34, .88) 31%,
            rgba(6, 19, 34, .28) 58%,
            rgba(6, 19, 34, .08) 100%
        ),
        url("./assets/hero.jpg?v=20260531a");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 45%, rgba(252, 163, 17, .12), transparent 34%),
        linear-gradient(
            to bottom,
            rgba(6, 19, 34, .35) 0%,
            rgba(6, 19, 34, .05) 45%,
           rgba(6, 19, 34, .55) 100%
        );
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding-top: 40px;
}

.hero h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 82px;
    line-height: .96;
    letter-spacing: -2px;
    margin: 0 0 28px 0;
    font-weight: 800;
    text-shadow: 0 8px 40px rgba(0, 0, 0, .75);
}

.hero h1 span {
    display: block;
    color: var(--gold2);
}

.trust-line {
    font-size: 22px;
    margin: 0 0 18px 0;
    color: white;
    font-weight: 600;
}

.hero-subtitle {
    font-size: 21px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 620px;
    margin: 0 0 40px 0;
}

.signal-note {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .56);
    max-width: 640px;
}

.page-hero {
    min-height:68vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:140px 6vw 90px;
    background:linear-gradient(to right,rgba(6,19,34,.98) 0%,rgba(6,19,34,.9) 34%,rgba(6,19,34,.35) 66%,rgba(6,19,34,.18) 100%),url("./assets/hero.jpg?v=20260528d");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}
.page-hero::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 72% 45%,rgba(252,163,17,.10),transparent 34%),linear-gradient(to bottom,rgba(6,19,34,.35) 0%,rgba(6,19,34,.05) 45%,rgba(6,19,34,.88) 100%);
    pointer-events:none
}
.page-hero-content {
    position:relative;
    z-index:2;
    max-width:760px
}
.brand-kicker {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--gold2);
    margin-bottom:22px
}
.brand-kicker:before {
    content:"";
    width:36px;
    height:1px;
    background:var(--gold);
    box-shadow:0 0 16px rgba(252,163,17,.8)
}
.page-hero h1 {
    font-size:64px;
    line-height:1.02;
    letter-spacing:-1.5px;
    margin:0 0 26px;
    font-weight:800;
    text-shadow:0 8px 40px rgba(0,0,0,.75)
}
.page-hero h1 span {
    color:var(--gold2)
}
.hero-divider {
    width:120px;
    height:2px;
    background:var(--gold);
    box-shadow:0 0 18px rgba(252,163,17,.85);
    margin:0 0 34px
}
.page-hero p {
    font-size:21px;
    line-height:1.62;
    color:var(--muted);
    max-width:680px;
    margin:0
}
.section-dark {
    padding:92px 6vw;
    background:var(--navy2)
}
.section-deep {
    padding:92px 6vw;
    background:#081827
}
.section-header {
    max-width:860px;
    margin:0 auto 56px;
    text-align:center
}
.section-header h2 {
    font-size:42px;
    line-height:1.1;
    margin:0 0 18px
}
.section-header p {
    font-size:19px;
    color:var(--muted);
    margin:0
}
.grid-2 {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    max-width:1120px;
    margin:0 auto
}
.grid-3 {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    max-width:1180px;
    margin:0 auto
}
.card {
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:30px;
    box-shadow:0 22px 70px rgba(0,0,0,.28)
}
.card h3 {
    margin:0 0 12px;
    color:var(--gold2);
    font-size:20px
}
.card p {
    margin:0;
    color:var(--muted);
    font-size:16px
}
.signal-note-box {
    max-width:980px;
    margin:52px auto 0;
    padding:24px 28px;
    border:1px solid rgba(252,163,17,.25);
    border-radius:16px;
    background:rgba(252,163,17,.06);
    color:rgba(255,255,255,.68);
    font-size:14px
}
.app-cta {
    padding:90px 6vw;
    background:radial-gradient(circle at center top,rgba(252,163,17,.12),transparent 38%),linear-gradient(180deg,#0d1b2a,#061322);
    text-align:center
}
.app-cta h2 {
    font-size:46px;
    line-height:1.1;
    margin:0 0 18px
}
.app-cta p {
    max-width:760px;
    margin:0 auto 34px;
    font-size:19px;
    color:var(--muted)
}
.hero-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap
}
.btn-primary,.btn-secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:0 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:14px;
    transition:.25s
}
.btn-primary {
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#061322;
    box-shadow:0 18px 45px rgba(252,163,17,.32)
}
.btn-secondary {
    border:1px solid rgba(252,163,17,.72);
    color:var(--gold2);
    background:rgba(6,19,34,.35);
    backdrop-filter:blur(8px)
}
footer {
    padding:44px 6vw;
    background:#061322;
    color:rgba(255,255,255,.55);
    text-align:center;
    font-size:14px
}
@media (max-width: 980px) {
    .navbar {
        padding:18px 22px
    }
    .logo img {
        height:42px
    }
    .logo-text {
        font-size:19px
    }
    .mobile-menu-btn {
        display:block
    }
    .menu {
        display:none;
        position:absolute;
        top:76px;
        right:22px;
        left:22px;
        background:rgba(6,19,34,.97);
        border:1px solid rgba(252,163,17,.35);
        border-radius:14px;
        padding:18px;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
        box-shadow:0 24px 60px rgba(0,0,0,.45)
    }
    body.menu-open .menu {
        display:flex
    }

    .hero {
    min-height: auto;
    padding: 89px 24px 36px 24px;
    align-items: flex-start;
    background:
        linear-gradient(
            to bottom,
            rgba(6, 19, 34, .55) 0%,
            rgba(6, 19, 34, .32) 38%,
            rgba(6, 19, 34, .10) 68%,
            rgba(6, 19, 34, .64) 100%
        ),
        url("./assets/hero.jpg?v=20260531a");
    background-size: cover;
    background-position: 82% 58%;
    background-repeat: no-repeat;
}


  .hero-content {
    max-width: 100%;
    padding-top: 0;
    transform: translateY(-15px);
}

    .hero h1 {
        font-size: 36px;
        line-height: .98;
        letter-spacing: -1px;
    }

    .trust-line {
        font-size: 18px;
    }

    .hero-subtitle {
        font-size: 15px;
        line-height: 1.5;
        max-width: 320px;
        margin-bottom: 24px;
    }

    .signal-note {
        font-size: 12px;
    }

    .page-hero {
        min-height:auto;
        padding:116px 24px 70px;
        align-items:flex-start;
        background:linear-gradient(to bottom,rgba(6,19,34,.94) 0%,rgba(6,19,34,.80) 42%,rgba(6,19,34,.35) 72%,rgba(6,19,34,.9) 100%),url("./assets/hero.jpg?v=20260531a");
        background-size:cover;
        background-position:80% 65%
    }
    .brand-kicker {
        font-size:11px;
        letter-spacing:2px;
        margin-bottom:18px
    }
    .page-hero h1 {
        font-size:40px;
        line-height:1.02;
        letter-spacing:-1px
    }
    .page-hero p {
        font-size:16px;
        line-height:1.55;
        max-width:330px
    }
    .brand-strip {
        grid-template-columns: 1fr;
    }

    .brand-item {
        padding: 22px 20px;
    }

    .section-dark,.section-deep,.app-cta {
        padding:72px 24px
    }
    .section-header {
        margin-bottom:38px
    }
    .section-header h2,.app-cta h2 {
        font-size:34px
    }
    .section-header p,.app-cta p {
        font-size:17px
    }
    .grid-2,.grid-3 {
        grid-template-columns:1fr;
        gap:18px
    }
    .btn-primary,.btn-secondary {
        width:100%;
        min-height:54px;
        font-size:13px
    }

}