/* Orbis Notus — shared design system. Used by every page in apps/web.
   Source of truth for brand tokens: docs/BRAND.md */

:root {
    --teal-dark: #145e5e; --teal-globe: #1a6b6b; --teal-medium: #1a7a7a;
    --teal-light: #2a8a8a; --teal-pale: #e8f2f2;
    --copper: #b05a30; --copper-dark: #8b4025; --copper-light: #f7efe8;
    --navy: #0c1a1e;
    --gray-50: #f8fafa; --gray-100: #eef2f2; --gray-200: #dde4e4;
    --gray-400: #8a9a9a; --gray-500: #5a6a6a; --gray-700: #2a3a3a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #fff; color-scheme: light; }
body { font-family: 'Lato', system-ui, sans-serif; color: var(--navy); line-height: 1.6; background: #fff; }

/* NAV */
nav {
    position: fixed; top: 0; width: 100%; z-index: 50;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
}
.nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 32px;
    height: 56px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { height: 32px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
    font-size: 13px; color: var(--gray-500); text-decoration: none;
    font-weight: 500; letter-spacing: 0.01em;
}
.nav-links a:hover { color: var(--navy); }
.nav-links .cta {
    background: var(--teal-dark); color: white; padding: 7px 18px;
    border-radius: 6px; font-weight: 600; font-size: 13px;
}
.nav-links .cta:hover { background: var(--teal-globe); color: white; }

/* HERO (base — pages override height/copy via inline style or hero-sm) */
.hero {
    margin-top: 56px;
    padding: 80px 32px 72px; text-align: center;
    background: var(--navy); position: relative; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(26,107,107,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(26,107,107,0.08) 0%, transparent 60%);
}
.hero-content { position: relative; }
.hero-logo { width: 90px; height: 90px; margin-bottom: 28px; }
.hero-tag {
    display: inline-block; font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.4); margin-bottom: 16px;
}
.hero h1 {
    font-family: 'Quattrocento', Georgia, serif;
    font-size: 44px; font-weight: 700; line-height: 1.15;
    max-width: 700px; margin: 0 auto 16px; letter-spacing: -0.02em;
    color: #fff;
}
.hero p {
    font-size: 17px; color: rgba(255,255,255,0.6); max-width: 540px;
    margin: 0 auto 36px; font-weight: 400;
}
.hero-btns { display: flex; gap: 10px; justify-content: center; }

/* Small hero variant — legal pages, product page header */
.hero-sm { padding: 56px 32px 40px; }
.hero-sm h1 { font-size: 28px; }
.hero-sm .hero-logo { width: 48px; height: 48px; margin-bottom: 16px; }

.btn {
    padding: 12px 28px; border-radius: 6px; font-size: 14px;
    font-weight: 600; text-decoration: none; transition: all 0.15s;
    border: none; cursor: pointer; display: inline-block;
}
.btn-teal { background: var(--teal-dark); color: white; }
.btn-teal:hover { background: var(--teal-globe); }
.btn-outline { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); }
.btn-outline:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* SECTIONS */
.section { padding: 80px 32px; }
.section-alt { background: var(--gray-50); }
.container { max-width: 1080px; margin: 0 auto; }
.container-narrow { max-width: 760px; margin: 0 auto; }
.section-head { margin-bottom: 48px; }
.section-head h2 {
    font-family: 'Quattrocento', Georgia, serif;
    font-size: 28px; font-weight: 700; margin-bottom: 8px;
    letter-spacing: -0.01em; color: var(--teal-dark);
}
.section-head p { font-size: 15px; color: var(--gray-500); max-width: 520px; }

/* FOOTER */
footer {
    padding: 16px 32px; border-top: 1px solid var(--gray-200);
    text-align: center; background: white;
}
footer p { font-size: 11px; color: var(--gray-400); }
footer a { color: var(--gray-500); text-decoration: none; }
footer a:hover { color: var(--navy); }
.footer-legal { margin-top: 4px; }
.footer-legal a { margin: 0 6px; }
.footer-catalan { font-size: 11px; color: var(--gray-400); margin-top: 6px; font-style: italic; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero { padding: 56px 20px 48px; }
    .hero h1 { font-size: 28px; }
    .hero-logo { width: 60px; height: 60px; }
    .section { padding: 48px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}