/* Object Radar — V2.1
   Recreated because the original CSS file was not supplied.

   style_common.css
    │
    ├── :root
    ├── html
    ├── body
    │
    ├── typography
    │   ├── p
    │   ├── h1
    │   ├── h2
    │   ├── h3
    │   ├── lead
    │   └── eyebrow
    │
    ├── header
    │   ├── site-header
    │   ├── header-inner
    │   ├── nav
    │   ├── brand
    │   └── nav-links
    │
    ├── sections
    │   ├── section
    │   ├── section-inner
    │   ├── narrow
    │   ├── tinted
    │   ├── section-heading
    │   ├── section-heading-text
    │   └── section-title-icon
    │
    ├── common components
    │   ├── buttons (primay [, secondary, etc.])
    │   ├── links (not created)
    │   ├── info-box
    │   │      ├── check
    │   │      ├── tip
    │   │      └── warning
    │   ├── dark-section
    │   └── reveal
    │
    └── footer

*/

/* ============================================================
   COMMON - GLOBAL TYPOGRAPHY
   ============================================================ */

:root {
    --blue:  #007aff; /* v2 : #4f8cff; */
    --blue-soft: #eef5ff;
    --blue-soft-info-background: rgba(79, 140, 255, .05);
    --blue-dark: #005ecb; /* v2 : not defined */
    --blue-soft-background:rgba(0, 122, 255, 0.1);
    --green:#30B000;
    --orange:#FFAA00;
    --red:#FF0000;
    --ink: #101114;
    --muted: #6e6e73; /* v2 : #666b73;*/
    --line: #e7e8eb;
    --surface: #fff;
    --surface-alt: #f5f6f8;
    --border: rgba(29, 29, 31, 0.09);
    --dark: #0b0c0f;
    --dark-muted: #aeb2bb;
    --radius: 24px;
    --max-width: 1180px;
    /* --shadow: */
    /* --accent */
}

/* Consistent sizing: width/height include padding and borders */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   COMMON - TITLES AND SUBITITLES
   ============================================================ */
.eyebrow {
    margin: 0 0 14px;
    color: var(--blue); /* v2 : #737780; */
    font-size: .78rem; /* .v2 : 72rem */
    font-weight: 750;
    letter-spacing: .16em;
    
    /* Other property */
    /* text-transform: uppercase; */ /* removed: capitalization is defined by localization */
}

h1,h2,h3,p { margin-top: 0; }

h1 {
    margin-bottom: 18px;
    font-size: clamp(3.2rem,8vw,6.8rem);
    line-height: .95;
    letter-spacing: -.065em;
}

h2 {
    margin-bottom: 22px;
    font-size: clamp(2.1rem,5vw,4.3rem);
    line-height: 1;
    letter-spacing: -.055em;
}

h3 {
    margin-bottom: 10px;
    font-size: 1.25rem;
    letter-spacing: -.025em;
}

.arrow {
    flex: 0 0 auto;     
    
    color: var(--blue);
    font-size: 1.25rem; 
}

/* ============================================================
   HEADER - TOOLBAR
   ============================================================ */
.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-110%);
    opacity: 0;
    transition: transform .45s ease, opacity .45s ease;
    background: rgba(255,255,255,.82);
    border-bottom: 1px solid rgba(16,17,20,.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.nav {
    width: min(calc(100% - 40px), var(--max-width));
    min-height: 72px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.brand img { width: 38px; height: 38px; border-radius: 10px; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: .92rem;
    color: #4c5057;
}

.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }

.language-current {
    font-weight: 700;
}

/* ============================================================
   COMMON - SECTIONS

   Section without icon
    .section-heading
    │
    ├── eyebrow
    ├── h2
    └── p

   Section with an icon
    .section-heading.section-heading--with-icon
    │
    ├── section-heading-text
    │   ├── eyebrow
    │   └── h2
    │
    └── section-title-icon

   ============================================================ */
/* Global single and standalone block */
.section {
    padding: 120px 24px;
    background: var(--surface);
}

/* Change the background color */
.section.tinted { background: var(--surface-alt); }

/* Content of a section : width of the bloc and margin */
.section-inner {
    width: min(100%, var(--max-width));
    margin: auto;
}

/* Maximum width of a section content */
.section-inner.narrow { max-width: 820px; }

/* Header of a section (without flex container) */
.section-heading {
    width: 100%;
    max-width: 820px;
    margin-bottom: 62px;
}

/* Header containing a title with an icon (flex container) */
.section-heading--with-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* Main text of the section */
.section-heading > p:last-child,
.lead {
    color: var(--muted);
    font-size: 1.08rem;
}

/* Title behavior in the heading flex container */
.section-heading-text {
    flex: 1;        /* It can  */
    min-width: 0;
}

/* Icon position in the heading flex container */
.section-title-icon {
    flex: 0 0 80px; /*  0 0 auto */

    width: 80px; /* 36px */
    height: 80px; /* 36px */

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.section-title-icon img {
    display: block;
    
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    
    object-fit: contain;
}

.section-title-icon--small {
    width: 36px;
    height: 36px;
}

.section-title-icon--medium {
    width: 48px;
    height: 48px;
}

.section-title-icon--large {
    width: 80px;
    height: 80px;
}

.section-title-icon--bluetooth {
    width: 48px;
    height: 48px;
}

/* ============================================================
   COMMON COMPONENTS
   ============================================================ */
/* SECTION FOR CHECK, TIP AND WARNING */
.info-box {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;

    margin-top: 28px;
    padding: 18px 20px;
    border-radius: 16px;

    background: var(--blue-soft-info-background);
}

.check {
    border-left: 3px solid var(--green);
    border-right: 3px solid var(--green);
}
.tip {
    border-left: 3px solid var(--orange);
    border-right: 3px solid var(--orange);
}

.warning {
    border-left: 3px solid var(--red);
    border-right: 3px solid var(--red);
}

/* Message to highlight into a box (replace the initial quote-box) */
.highlight-box {
    margin-top: 48px;
    padding: 30px; /* 24px 30px */

    border-left: 2px solid var(--blue);
    border-right: 2px solid var(--blue);

    background: var(--blue-soft-background); /* Common background color */

    border-radius: 18px;

    box-shadow:
        12px 6px 24px rgba(0, 0, 0, 0.07);
}

.highlight-box span {
    display: block;
    margin-bottom: 8px;

    color: #8f949e;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.highlight-box strong { font-size: 1.25rem; }

/* DARK SECTIONS */
.dark-section {
    color: #fff;
    background:
        radial-gradient(circle at 80% 15%,rgba(79,140,255,.15),transparent 32%),
        var(--dark);
}

.dark-section .eyebrow { color: #7ca8ff; }
.dark-section .lead { color: var(--dark-muted); }

/* Change the background of an "highlight box" into a "dark section" */
.dark-section .highlight-box {
    background: rgba(255,255,255,.045);  /* Specific background color for dark section */

    /*box-shadow:
        12px 6px 24px rgba(0, 0, 0, 0.07);*/
}

/* BUTTONS */
.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 23px;
    border-radius: 999px;
    color: white; /* white == #fff; */
    background: var(--blue); /* v2 : #111317; */
    font-weight: 650;
    box-shadow: 0 12px 30px rgba(16,17,20,.15);
    transition: transform .25s ease, box-shadow .25s ease;
}

.primary-button:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    /*transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(16,17,20,.20);*/
}

/* ============================================================
   COMMON COMPONENTS - SECTION : TRANSITIONS
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s ease,
                transform .75s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   SECTION: BOTTOM
   ============================================================ */
footer {
    padding: 28px 24px;
    text-align: center;
    color: #858991;
    font-size: .8rem;
    background: #fff;
}

/* ============================================================
   OTHER MEDIA SUPPORT (MOBILE DEVICES)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .site-header { transition: none; }
}

@media (max-width: 900px) {
    .nav-links { gap: 14px; font-size: .82rem; }
}

@media (max-width: 650px) {
    .nav {
        width: min(calc(100% - 24px),var(--max-width));
        min-height: 62px;
    }

    .brand span { display: none; }

    .nav-links {
        width: 100%;
        justify-content: flex-end;
        gap: 12px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a:nth-child(1),
    .nav-links a:nth-child(5) { display: none; }

    .hero {
        min-height: 86vh;
        padding: 110px 20px 90px;
    }

    .hero-icon {
        width: 110px;
        height: 110px;
        border-radius: 25px;
    }
    
    .section { padding: 86px 20px; }

    .section-heading {
        gap: 20px;
        align-items: flex-start;
    }

    .section-title-icon--large {
        width: 36px;
        height: 36px;
    }

    .section-title-icon--bluetooth {
        width: 40px;
        height: 40px;
    }
}