/* ERPro umbrella marketing — light mode, brand red `#F80102`. */

:root {
    /* Brand */
    --c-primary: #F80102;
    --c-primary-hover: #C70102;
    --c-primary-deep: #B30001;
    --c-primary-container: #FFE0DE;
    --c-on-primary-container: #3A0707;
    --c-primary-soft: #FFF5F4;

    /* Sector accent dots (sector tiles only) */
    --c-health: #B33;
    --c-agri:   #1B873F;
    --c-tour:   #C7651E;
    --c-host:   #B87333;
    --c-auto:   #455A64;

    /* Neutrals — warm whites + near-blacks */
    --c-bg: #FBFBFC;
    --c-surface: #FFFFFF;
    --c-surface-warm: #FAF6F5;       /* very subtle red-warmth */
    --c-surface-warmer: #F5EFEE;
    --c-text: #161A24;
    --c-text-muted: #4A5060;
    --c-text-soft: #6E7480;
    --c-border: #ECEBEA;
    --c-border-strong: #DAD7D5;

    /* Status (kept for chip rendering) */
    --c-success: #1F7A3A;
    --c-warning: #B7791F;
    --c-info: #1769AA;
    --c-danger: #B3261E;

    /* Type scale */
    --t-display: 72px;
    --t-headline-l: 48px;
    --t-headline: 36px;
    --t-headline-s: 26px;
    --t-title: 20px;
    --t-body-l: 18px;
    --t-body: 16px;
    --t-body-s: 14px;
    --t-label: 12px;
    --t-tiny: 11px;

    /* Spacing */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 40px;
    --sp-xxl: 64px;
    --sp-xxxl: 96px;
    --sp-mega: 128px;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 920px;

    /* Shadows — soft, layered for richness */
    --shadow-sm: 0 1px 2px rgba(15, 18, 28, 0.04), 0 1px 3px rgba(15, 18, 28, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 18, 28, 0.05), 0 2px 4px rgba(15, 18, 28, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 18, 28, 0.08), 0 4px 8px rgba(15, 18, 28, 0.04);
    --shadow-red: 0 8px 24px rgba(248, 1, 2, 0.18), 0 2px 6px rgba(248, 1, 2, 0.10);
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-VariableFont.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    font-feature-settings: 'cv11', 'ss01', 'kern';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: var(--c-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--c-primary-hover); }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--c-primary); color: #fff; }

/* ---------------------------------------------------------------------- */
/* Containers                                                              */
/* ---------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-lg);
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--sp-lg);
}

/* ---------------------------------------------------------------------- */
/* Top bar                                                                 */
/* ---------------------------------------------------------------------- */

header.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 251, 252, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-border);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 28px; width: auto; display: block; transition: opacity .15s ease; }
.brand:hover img { opacity: 0.78; }

nav.nav-primary { display: flex; align-items: center; gap: var(--sp-xl); }
nav.nav-primary a {
    color: var(--c-text-muted);
    font-size: var(--t-body-s);
    font-weight: 500;
    transition: color .15s ease;
}
nav.nav-primary a:hover { color: var(--c-text); }
nav.nav-primary a.btn { color: #fff; }
nav.nav-primary a.btn-ghost { color: var(--c-text); }

@media (max-width: 760px) {
    nav.nav-primary a:not(.btn) { display: none; }
    .topbar-inner { height: 64px; }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    padding: 14px 24px;
    border-radius: var(--r-sm);
    font-size: var(--t-body-s);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
    letter-spacing: 0.1px;
}

.btn-primary {
    background: var(--c-primary);
    color: #fff;
    box-shadow: var(--shadow-red);
}

.btn-primary:hover {
    background: var(--c-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(248, 1, 2, 0.28), 0 4px 8px rgba(248, 1, 2, 0.14);
}

.btn-ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border-strong);
}

.btn-ghost:hover {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-text-muted);
}

.btn-arrow::after {
    content: '→';
    margin-left: 2px;
    font-weight: 400;
    transition: transform .15s ease;
}

.btn-arrow:hover::after { transform: translateX(3px); }

.btn-lg { padding: 18px 32px; font-size: var(--t-body); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
    position: relative;
    padding: var(--sp-xxxl) 0 var(--sp-mega);
    text-align: center;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(248, 1, 2, 0.08), transparent 55%),
        radial-gradient(ellipse at 12% 25%, rgba(248, 1, 2, 0.05), transparent 40%),
        radial-gradient(ellipse at 88% 35%, rgba(248, 1, 2, 0.05), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.hero-inner { position: relative; z-index: 1; padding-top: var(--sp-xxl); }

/* Subtle dot-grid backdrop, anchored to hero only. */
.hero .dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(22, 26, 36, 0.06) 1px, transparent 1.2px);
    background-size: 28px 28px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--c-primary-container);
    color: var(--c-on-primary-container);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: var(--sp-lg);
}

.eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 0 0 4px var(--c-primary-soft);
}

.hero h1 {
    font-size: var(--t-display);
    line-height: 1.02;
    letter-spacing: -2.5px;
    font-weight: 800;
    color: var(--c-text);
    margin-bottom: var(--sp-lg);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.hero h1 .accent { color: var(--c-primary); }

.hero p.lead {
    font-size: var(--t-body-l);
    color: var(--c-text-muted);
    max-width: 600px;
    margin: 0 auto var(--sp-xl);
    line-height: 1.6;
}

.hero-cta {
    display: inline-flex;
    gap: var(--sp-md);
    flex-wrap: wrap;
    justify-content: center;
}

.hero-meta {
    margin-top: var(--sp-xxl);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-md);
    color: var(--c-text-soft);
    font-size: var(--t-label);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
}

.hero-meta span { position: relative; padding: 0 var(--sp-md); }

.hero-meta span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-primary);
    transform: translateY(-50%);
}

@media (max-width: 760px) {
    .hero { padding: var(--sp-xl) 0 var(--sp-xxl); }
    .hero h1 { font-size: 44px; letter-spacing: -1.5px; }
    .hero p.lead { font-size: var(--t-body); }
}

/* ---------------------------------------------------------------------- */
/* Section base                                                            */
/* ---------------------------------------------------------------------- */

section.section { padding: var(--sp-mega) 0; position: relative; }

.section-head { text-align: center; margin-bottom: var(--sp-xxl); max-width: 720px; margin-left: auto; margin-right: auto; padding: 0 var(--sp-lg); }

.section-head .eyebrow { margin-bottom: var(--sp-lg); }

.section-head h2 {
    font-size: var(--t-headline-l);
    line-height: 1.1;
    letter-spacing: -1.5px;
    font-weight: 700;
    margin-bottom: var(--sp-md);
}

.section-head h2 .muted {
    color: var(--c-text-soft);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -1px;
}

.section-head p {
    font-size: var(--t-body-l);
    color: var(--c-text-muted);
    line-height: 1.55;
}

@media (max-width: 760px) {
    section.section { padding: var(--sp-xxl) 0; }
    .section-head h2 { font-size: 30px; letter-spacing: -1px; }
    .section-head p { font-size: var(--t-body); }
}

/* ---------------------------------------------------------------------- */
/* Sectors                                                                 */
/* ---------------------------------------------------------------------- */

.section-sectors {
    background: var(--c-surface-warm);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-lg);
    max-width: 1080px;
    margin: 0 auto;
}

.sector-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
}

.sector-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--accent, var(--c-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.sector-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.sector-card:hover::before { transform: scaleX(1); }

.sector-card.live { --accent: var(--c-primary); }
.sector-card.health { --accent: var(--c-health); }
.sector-card.agri { --accent: var(--c-agri); }
.sector-card.tour { --accent: var(--c-tour); }
.sector-card.host { --accent: var(--c-host); }
.sector-card.auto { --accent: var(--c-auto); }

.sector-num {
    position: absolute;
    top: var(--sp-md);
    right: var(--sp-md);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--c-text-soft);
    font-feature-settings: 'tnum';
    opacity: 0.6;
}

.sector-emoji {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: var(--c-surface-warm);
    display: grid;
    place-items: center;
    font-size: 28px;
    margin-bottom: var(--sp-md);
}

.sector-card.health .sector-emoji { background: rgba(179, 51, 51, 0.08); }
.sector-card.agri .sector-emoji   { background: rgba(27, 135, 63, 0.08); }
.sector-card.tour .sector-emoji   { background: rgba(199, 101, 30, 0.08); }
.sector-card.host .sector-emoji   { background: rgba(184, 115, 51, 0.08); }
.sector-card.auto .sector-emoji   { background: rgba(69, 90, 100, 0.08); }

.sector-card h3 {
    font-size: var(--t-headline-s);
    margin-bottom: 6px;
    letter-spacing: -0.4px;
    font-weight: 700;
}

.sector-card p {
    color: var(--c-text-muted);
    font-size: var(--t-body-s);
    line-height: 1.55;
    margin-bottom: var(--sp-md);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: var(--t-tiny);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-pill.live { background: rgba(31, 122, 58, 0.10); color: #176A2F; }
.status-pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1F7A3A; box-shadow: 0 0 0 3px rgba(31, 122, 58, 0.20); }
.status-pill.soon { background: rgba(110, 116, 128, 0.10); color: var(--c-text-soft); }

/* ---------------------------------------------------------------------- */
/* Approche / principles                                                   */
/* ---------------------------------------------------------------------- */

.section-approche {
    position: relative;
}

.section-approche::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: var(--c-border-strong);
}

.principle-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-xl);
    position: relative;
}

.principle {
    position: relative;
    padding: var(--sp-xl) 0 0;
    border-top: 1px solid var(--c-border);
}

.principle-num {
    display: inline-block;
    color: var(--c-primary);
    font-size: var(--t-tiny);
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: var(--sp-md);
    font-feature-settings: 'tnum';
}

.principle h3 {
    font-size: var(--t-headline-s);
    letter-spacing: -0.5px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: var(--sp-md);
    max-width: 14ch;
}

.principle p {
    color: var(--c-text-muted);
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 36ch;
}

@media (max-width: 760px) {
    .principle-list { gap: var(--sp-lg); }
    .principle { padding-top: var(--sp-lg); }
}

/* ---------------------------------------------------------------------- */
/* CTA                                                                     */
/* ---------------------------------------------------------------------- */

.cta-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: var(--sp-xxxl) var(--sp-xl);
    text-align: center;
    margin: 0 auto;
    max-width: 920px;
    box-shadow: var(--shadow-red);
}

.cta-banner::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: url('/assets/img/erpro-icon.svg') center / contain no-repeat;
    opacity: 0.10;
    filter: brightness(0) invert(1);
    pointer-events: none;
    transform: rotate(-8deg);
}

.cta-banner::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 60%);
    pointer-events: none;
}

.cta-banner h2 {
    color: #fff;
    font-size: var(--t-headline-l);
    line-height: 1.1;
    margin-bottom: var(--sp-md);
    letter-spacing: -1.5px;
    position: relative;
    z-index: 1;
}

.cta-banner p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: var(--sp-xl);
    font-size: var(--t-body-l);
    line-height: 1.55;
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-banner .btn-primary {
    background: #fff;
    color: var(--c-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
}

.cta-banner .btn-primary:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--c-primary-deep);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 760px) {
    .cta-banner { padding: var(--sp-xxl) var(--sp-lg); border-radius: var(--r-md); }
    .cta-banner h2 { font-size: 28px; letter-spacing: -1px; }
    .cta-banner p { font-size: var(--t-body); }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

footer {
    border-top: 1px solid var(--c-border);
    padding: var(--sp-xxl) 0;
    color: var(--c-text-muted);
    font-size: var(--t-body-s);
    background: var(--c-surface);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-md);
    font-size: var(--t-body-s);
}

.footer-bottom .brand img { height: 22px; }
.footer-bottom .copy { color: var(--c-text-soft); font-size: var(--t-label); }

@media (max-width: 480px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------- */
/* Print                                                                   */
/* ---------------------------------------------------------------------- */

@media print {
    header.topbar, .cta-banner { display: none; }
}