/* DL Car Consulting — group homepage (dlcarconsulting.pt)
   Brand tokens shared with stand. and fleet. (see CLAUDE.md). */
:root {
    --navy: #151459;
    --navy-deep: #0d0c3d;
    --blue: #45A3DA;
    --light: #CEEBFF;
    --orange: #FF6B35;
    --gold: #D4AF37;
    --footer-h: 82px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: 'Inter', sans-serif; color: #fff; background: var(--navy-deep); }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Hero: fills the first screen minus the footer, logo + cards centred */
.hero {
    position: relative;
    min-height: calc(100vh - var(--footer-h));
    min-height: calc(100dvh - var(--footer-h));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(1200px 700px at 85% 110%, rgba(69,163,218,.55), transparent 60%),
        radial-gradient(900px 600px at -10% -20%, rgba(69,163,218,.18), transparent 60%),
        linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 45%, #1d2a7c 100%);
}
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
    background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.orb--1 { width: 520px; height: 520px; right: -140px; top: -160px; background: rgba(255,255,255,.04); }
.orb--2 { width: 300px; height: 300px; left: -90px; bottom: 80px; background: rgba(255,255,255,.03); }

.intro { position: relative; text-align: center; padding: 3.5rem 1.25rem 3rem; margin: auto auto 0; }
.intro__logo { height: 130px; width: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); }

/* Unit cards: one per business area, accent colour in --c */
.units {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto auto;
    padding: 1rem 2.5rem 4rem;
}
.unit {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 1.25rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.unit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 260px at 20% 0%, var(--c), transparent 70%); opacity: .28; transition: opacity .35s; }
.unit::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.unit > * { position: relative; }
a.unit:hover, a.unit:focus-visible { transform: translateY(-8px); border-color: rgba(255,255,255,.3); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
a.unit:hover::before, a.unit:focus-visible::before { opacity: .5; }
a.unit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* "| STAND" lockup — same as the header lockup on stand./fleet., bar in the unit colour */
.lockup { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.25rem; }
.lockup__sep { font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--c); }
.lockup__label { font-size: 1.6rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }

.unit p { flex: 1; font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0 0 1.75rem; }
.unit__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.unit__go {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .9rem;
    padding: .75rem 1.2rem; border-radius: 999px;
    background: #fff; color: var(--navy);
    transition: gap .25s;
}
a.unit:hover .unit__go { gap: .8rem; }
.unit__domain { font-size: .78rem; color: rgba(255,255,255,.5); letter-spacing: .02em; }

.unit--soon { opacity: .75; }
.unit--soon .lockup__label { color: rgba(255,255,255,.75); }
.badge-soon {
    font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: .6rem 1rem; border-radius: 999px; background: var(--gold); color: var(--navy);
}

/* Footer — same pattern as stand.dlcarconsulting.pt */
.site-footer {
    min-height: var(--footer-h);
    background: var(--navy);
    padding: 1.5rem 2.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    font-size: .78rem;
}
.site-footer__logo { height: 28px; width: auto; opacity: .7; }
.site-footer__center { text-align: center; }
.site-footer__center p { margin: 0; color: rgba(255,255,255,.4); }
.site-footer__legal { margin-top: .25rem !important; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.site-footer__legal span { color: rgba(255,255,255,.2); }
.site-footer a { color: rgba(255,255,255,.5); }
.site-footer a:hover { color: rgba(255,255,255,.9); }
.site-footer__right { display: flex; align-items: center; gap: 1.25rem; }
.site-footer__social { display: flex; gap: .75rem; }
.site-footer__social a { display: flex; color: rgba(255,255,255,.45); }
.site-footer__divider { color: rgba(255,255,255,.15); }
.lang-switcher { display: flex; gap: .4rem; align-items: center; }
.lang-switcher .is-active { color: #fff; font-weight: 700; }

@media (max-width: 900px) {
    .units { grid-template-columns: 1fr; padding: 1rem 1.25rem 3rem; }
    .intro { padding: 3rem 1rem 2rem; }
    .intro__logo { height: 84px; }
}
@media (max-width: 768px) {
    .hero { min-height: 0; }
    .site-footer { flex-direction: column; gap: .75rem; padding: 1.25rem 1rem; text-align: center; }
    .site-footer__center { order: 2; }
    .site-footer__right { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
    .unit, .unit::before, .unit__go { transition: none; }
}
