/* =========================
   Siemens CalcConform — UI
   Liquid Glass + Mobile-safe
   ========================= */

/* ---------- Tokens ---------- */
:root {
    /* Base (dark) */
    --bg: #0b1220;
    --surface: #111927;
    --surface-2: #182235;
    --text: #e6edf5;
    --text-2: #a9b7c8;
    --primary: #006d6d;
    --ring: #1ad0c3;
    --border: rgba(255,255,255,.08);
    --shadow-30: rgba(0,0,0,.30);
    /* Liquid glass (DARK) */
    --glass-blur: 20px;
    --glass-bg1: rgba(13,20,33,.72);
    --glass-bg2: rgba(9,14,24,.48);
    --glass-stroke: rgba(255,255,255,.10);
    --glass-inside-hi: rgba(255,255,255,.06);
    --glass-shadow: rgba(0,0,0,.60);
    /* HERO sizes */
    --hero-phone-w: clamp(200px, 32vw, 320px);
    --hero-phone-br: 34px;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #F7FAFC;
        --surface: #ffffff;
        --surface-2: #F3F5F8;
        --text: #0f172a;
        --text-2: #506176;
        --primary: #009999;
        --ring: #00c4b6;
        --border: rgba(0,0,0,.10);
        --shadow-30: rgba(0,0,0,.12);
        --glass-blur: 18px;
        --glass-bg1: rgba(255,255,255,.55);
        --glass-bg2: rgba(255,255,255,.35);
        --glass-stroke: rgba(255,255,255,.65);
        --glass-inside-hi: rgba(255,255,255,.28);
        --glass-shadow: rgba(0,0,0,.18);
    }
}

/* ---------- Reset + base ---------- */
* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter,"Inter var",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block
}

body > * {
    position: relative;
    z-index: 1
}

/* ---------- Aurora BG ---------- */
.bg-aurora {
    position: fixed;
    inset: -10% -10% -10% -10%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(800px 360px at 20% 25%, color-mix(in oklab,var(--ring) 20%, transparent) 0%, transparent 65%), radial-gradient(900px 420px at 80% 80%, color-mix(in oklab,var(--ring) 18%, transparent) 0%, transparent 65%), radial-gradient(700px 320px at 60% 30%, color-mix(in oklab,var(--primary) 22%, transparent) 0%, transparent 65%), linear-gradient(to bottom, color-mix(in oklab,var(--bg) 94%, transparent), color-mix(in oklab,var(--bg) 94%, transparent));
    filter: saturate(130%) blur(8px);
}

@media (prefers-reduced-motion:no-preference) {
    .bg-aurora {
        animation: auroraMove 24s ease-in-out infinite alternate
    }

    @keyframes auroraMove {
        0% {
            transform: translate3d(0,0,0) scale(1)
        }

        100% {
            transform: translate3d(0,-2%,0) scale(1.02)
        }
    }
}

@media (max-width:900px) {
    .bg-aurora {
        filter: none;
        opacity: .95;
        background: radial-gradient(520px 220px at 20% 15%, rgba(0,153,153,.16), transparent 60%), radial-gradient(520px 220px at 80% 85%, rgba(0,153,153,.14), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.02));
    }
}

/* ---------- Layout & Type ---------- */
.container {
    width: min(1100px,92vw);
    margin-inline: auto
}

section {
    scroll-margin-top: 92px
}

h1, h2, h3, h4, p {
    margin: 0 0 10px
}

h1 {
    font-size: clamp(28px,6vw,52px);
    letter-spacing: -.3px
}

h2 {
    font-size: clamp(20px,3.8vw,30px)
}

h3 {
    font-size: clamp(18px,3.2vw,24px)
}

p {
    color: var(--text-2)
}

.grad {
    background: linear-gradient(90deg,#7ef8e6,#21b3b3,#7ef8e6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

/* ---------- NAV ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in oklab,var(--bg) 55%,transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border)
}

    .nav .container {
        padding: 8px 0
    }

.nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px
}

.brand span {
    font-weight: 800;
    letter-spacing: .2px
}

.nav__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: clamp(12px,2.3vw,14px);
    white-space: nowrap
}

    .nav__bottom a {
        color: var(--text);
        text-decoration: none;
        opacity: .9
    }

        .nav__bottom a:hover {
            opacity: 1
        }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 14px;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
    vertical-align: middle;
    height: 44px;
    padding: 0 16px;
}

    .btn.ghost {
        background: color-mix(in oklab,var(--surface-2) 35%,transparent);
        color: var(--text);
        border: 1px solid var(--border);
        backdrop-filter: blur(6px)
    }

        .btn.ghost:hover {
            background: color-mix(in oklab,var(--surface-2) 50%,transparent)
        }

    .btn.primary {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 12px 28px var(--shadow-30), inset 0 1px 0 rgba(255,255,255,.12)
    }

        .btn.primary:hover {
            filter: saturate(110%)
        }

.nav__top .btn.primary {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 12px;
    box-shadow: 0 8px 18px var(--shadow-30), inset 0 1px 0 rgba(255,255,255,.12)
}

@media (max-width:480px) {
    .nav__top .btn.primary {
        height: 32px;
        padding: 0 10px;
        font-size: 12px
    }
}

/* ---------- HERO ---------- */
.hero {
    min-height: 88svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden
}

.hero__content {
    text-align: center;
    padding: 40px 0
}

    .hero__content p {
        max-width: 760px;
        margin: 0 auto 18px
    }

.cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px
}

/* Grid */
.hero-grid {
    display: grid;
    align-items: center;
    gap: 28px;
    grid-template-columns: 1.05fr .95fr
}

@media (max-width: 960px) {
    .hero-grid {
        grid-template-columns: 1fr
    }
}

/* ===== HERO — Icons carousel ===== */
:root {
    --hero-icons-w: var(--hero-phone-w);
    --hero-icons-br: var(--hero-phone-br)
}

.hero-icons {
    display: grid;
    justify-items: center;
    gap: 10px
}

.hero-icons__frame {
    position: relative;
    width: var(--hero-icons-w);
    aspect-ratio: 1 / 1;
    border-radius: var(--hero-icons-br);
    overflow: hidden;
    background: radial-gradient(120% 120% at 10% 0%, #ffffff12, transparent 60%), color-mix(in oklab, #0f172a, transparent 92%);
    border: 1px solid color-mix(in oklab, #0f172a, transparent 85%);
    box-shadow: 0 10px 30px rgba(0,0,0,.16), inset 0 0 0 6px color-mix(in oklab, #f6f7f9, transparent 90%);
}

@media (prefers-color-scheme: dark) {
    .hero-icons__frame {
        box-shadow: 0 12px 32px rgba(0,0,0,.45), inset 0 0 0 6px rgba(255,255,255,.02)
    }
}

.hero-icons__slideTrack {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--hero-icons-br) - 12px);
    overflow: hidden
}

.hero-icons__slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
    border-radius: inherit;
    will-change: transform,opacity;
    z-index: 1;
}

    .hero-icons__slide.is-current {
        z-index: 2;
        animation: heroEnter .46s ease both
    }

    .hero-icons__slide.is-next {
        opacity: 0
    }

    .hero-icons__slide.from-right {
        animation: heroEnter .46s ease both
    }

    .hero-icons__slide.to-left {
        animation: heroExit .46s ease both
    }

    .hero-icons__slide.from-left {
        animation: heroEnterFromLeft .46s ease both
    }

    .hero-icons__slide.to-right {
        animation: heroExitToRight .46s ease both
    }

.hero-icons__icon {
    display: grid;
    place-items: center;
    width: clamp(72px, 8vw, 96px);
    height: clamp(72px, 8vw, 96px);
    border-radius: 24px;
    background: color-mix(in oklab,var(--surface-2) 35%, transparent);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    margin-bottom: 14px;
}

    .hero-icons__icon svg {
        width: 52%;
        height: 52%;
        stroke-width: 1.75
    }

.hero-icons__title {
    font-size: clamp(16px, 2.3vw, 18px);
    margin-top: 4px;
    color: var(--text)
}

.hero-icons__desc {
    font-size: 14px;
    color: var(--text-2);
    margin-top: 2px
}

/* Dots */
.hero-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 2px
}

    .hero-dots > button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        background: rgba(127,127,127,.35);
        cursor: pointer;
    }

        .hero-dots > button.is-active {
            background: var(--brand, #0f9a8f)
        }

/* Animations */
@keyframes heroEnter {
    from {
        transform: translateX(8%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes heroExit {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(-8%);
        opacity: 0
    }
}

@keyframes heroEnterFromLeft {
    from {
        transform: translateX(-8%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes heroExitToRight {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(8%);
        opacity: 0
    }
}

/* Mobile tuning (home only) */
@media (max-width: 940px) {
    .hero#top {
        overflow: visible;
        padding-bottom: 40px
    }

        .hero#top .hero-grid {
            grid-template-columns: 1fr
        }

        .hero#top .hero__content {
            padding-top: 6vh;
            padding-bottom: 2vh
        }

        .hero#top .hero-icons {
            margin-top: 8px
        }
}

/* ---------- Sections / Cards ---------- */
.card, .panel, .tile {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(to bottom right,var(--glass-bg1),var(--glass-bg2)), radial-gradient(1100px 600px at 10% -10%, rgba(255,255,255,.10), transparent 60%), radial-gradient(900px 500px at 110% 120%, rgba(255,255,255,.06), transparent 65%);
    border: 1px solid var(--glass-stroke);
    box-shadow: 0 14px 40px var(--glass-shadow), inset 0 1px 0 var(--glass-inside-hi), inset 0 -1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

    .card::before, .panel::before, .tile::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,.10), transparent 55%), linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0) 32%);
        mix-blend-mode: screen;
        opacity: .75;
    }

    .card::after, .panel::after, .tile::after {
        content: "";
        position: absolute;
        inset: -20% -20% -20% -20%;
        border-radius: inherit;
        pointer-events: none;
        background: conic-gradient(from 0deg at 60% -20%, rgba(255,255,255,.08), rgba(255,255,255,0) 25%, rgba(255,255,255,.06) 35%, rgba(255,255,255,0) 55%, rgba(255,255,255,.05) 70%, rgba(255,255,255,0) 85%);
        filter: blur(42px);
        opacity: .18;
        animation: liquidShift 18s ease-in-out infinite alternate;
    }

@keyframes liquidShift {
    0% {
        transform: translate3d(-1%,0,0) rotate(0turn)
    }

    100% {
        transform: translate3d(1%,-2%,0) rotate(1turn)
    }
}

.card {
    width: min(1000px,92vw);
    margin-inline: auto;
    padding: 26px 24px
}

    .card h2 {
        letter-spacing: .2px
    }

    .card p {
        margin-top: 6px
    }

.panel {
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
    padding: clamp(18px,4vw,28px)
}

    .panel h2 {
        margin-bottom: 12px
    }

    .panel .btn.primary {
        display: inline-flex;
        margin-bottom: 16px
    }

    .panel .note {
        font-size: 13px;
        color: var(--text-2)
    }

.tile {
    padding: 18px;
    border-radius: 20px;
    transform: translateY(32px) scale(.96);
    opacity: 0;
    filter: blur(2px);
    transition: opacity 1.1s cubic-bezier(.18,.7,.25,1.08), transform 1.1s cubic-bezier(.18,.7,.25,1.08), filter 1.1s ease;
}

    .tile.in {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0)
    }

@media (hover:hover) {
    .card, .panel, .tile {
        transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease
    }

        .card:hover, .panel:hover, .tile:hover {
            transform: translateY(-3px);
            box-shadow: 0 22px 60px var(--glass-shadow)
        }
}

/* ---------- Sections spacing ---------- */
.about, .specs, .tools, .faq, .contact {
    padding: 56px 0
}

.bullets {
    margin: 12px 0 8px;
    padding-left: 18px;
    color: var(--text-2)
}

    .bullets li {
        margin: 6px 0
    }

.about-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.tag {
    font-size: 12px;
    color: var(--text);
    background: color-mix(in oklab,var(--surface-2) 45%,transparent);
    border: 1px solid var(--border);
    padding: 6px 8px;
    border-radius: 999px
}

/* ===== Assistant I.A. — espacement propre entre blocs ===== */
#assistant-ia .container {
    display: flex;
    flex-direction: column;
    gap: 18px; /* espace entre <h2> et chaque .card */
}

@media (min-width:768px) {
    #assistant-ia .container {
        gap: 20px
    }
}

@media (min-width:1200px) {
    #assistant-ia .container {
        gap: 24px
    }
}

#assistant-ia h2 {
    margin-bottom: 2px
}

#assistant-ia .card .card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px; /* espace entre l’en-tête et la liste */
}

/* Specs grid */
.grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px
}

@media (min-width:900px) {
    .grid {
        grid-template-columns: repeat(4,1fr)
    }
}

@media (max-width:520px) {
    .grid {
        grid-template-columns: 1fr
    }
}

/* ---------- FAQ ---------- */
.faq h3 {
    text-align: center;
    margin-bottom: 12px
}

.faq-wrap {
    width: min(900px,92vw);
    margin-inline: auto
}

.faq details {
    background: linear-gradient(to bottom right,var(--glass-bg1),var(--glass-bg2));
    border: 1px solid var(--glass-stroke);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 8px 0;
    backdrop-filter: blur(calc(var(--glass-blur) - 6px))
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    position: relative
}

    .faq summary::-webkit-details-marker {
        display: none
    }

    .faq summary::after {
        content: "▾";
        position: absolute;
        right: 2px;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 1em;
        transition: transform .26s ease
    }

.faq details[open] summary::after {
    transform: rotate(-180deg)
}

.faq .answer {
    padding-top: 8px
}

/* ---------- CTA / Footer ---------- */
.cta-final {
    padding: 80px 0;
    display: flex;
    align-items: center
}

.foot {
    text-align: center;
    color: var(--text-2);
    font-size: 12px;
    padding: 24px 24px;
    border-top: 1px solid var(--border);
    background: color-mix(in oklab,var(--bg) 60%, transparent);
    backdrop-filter: blur(6px)
}

    .foot .social {
        margin-top: 10px;
        display: flex;
        justify-content: center
    }

    .foot .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: color-mix(in oklab, var(--surface-2) 45%, transparent);
        border: 1px solid var(--border);
        box-shadow: 0 10px 24px var(--shadow-30), inset 0 1px 0 rgba(255,255,255,.08);
        backdrop-filter: blur(4px);
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

        .foot .social-link:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 34px var(--shadow-30)
        }

        .foot .social-link img {
            width: 18px;
            height: 18px;
            filter: invert(100%) grayscale(100%) opacity(0.9)
        }

@media (prefers-color-scheme: light) {
    .foot .social-link img {
        filter: grayscale(100%) opacity(0.8)
    }
}

/* ---------- Reveals ---------- */
[data-animate] {
    opacity: 0;
    transform: translateY(40px) scale(.98);
    filter: blur(3px);
    transition: opacity .95s cubic-bezier(.18,.7,.25,1.08), transform .95s cubic-bezier(.18,.7,.25,1.08), filter .95s ease;
    will-change: transform,opacity,filter;
    transition-delay: var(--d,0ms)
}

    .in [data-animate], [data-animate].in {
        opacity: 1;
        transform: none;
        filter: blur(0)
    }

/* ---------- Cookie banner ---------- */
.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 50
}

.cookie-inner {
    border-radius: 18px;
    padding: 14px 14px 12px;
    background: linear-gradient(to bottom right,var(--glass-bg1),var(--glass-bg2));
    border: 1px solid var(--glass-stroke);
    box-shadow: 0 18px 50px var(--glass-shadow);
    backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(160%);
    transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
    will-change: opacity, transform, filter;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0)
}

.cookie-banner.is-closing .cookie-inner {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    filter: blur(6px)
}

.cookie-title {
    margin: 0 0 6px;
    font-size: 16px
}

.cookie-text {
    margin: 0 0 8px;
    color: var(--text-2);
    font-size: 13px
}

.cookie-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap
}

.cookie-link {
    margin-top: 6px;
    text-align: center
}

    .cookie-link a {
        font-size: 12px;
        font-family: 'Inter',sans-serif;
        text-decoration: underline;
        transition: color 0.2s ease
    }

@media (prefers-color-scheme: light) {
    .cookie-link a {
        color: #4A5568
    }
}

@media (prefers-color-scheme: dark) {
    .cookie-link a {
        color: #FFFFFF
    }
}

/* A11y */
@media (prefers-reduced-motion: reduce) {
    .cookie-inner, * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important
    }

    .card::after, .panel::after, .tile::after {
        animation: none !important
    }
}

/* ---------- Fallback color-mix ---------- */
@supports not (background: color-mix(in oklab, #000 50%, transparent)) {
    .card, .tile, .panel {
        background: rgba(17,25,39,.92) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
        backdrop-filter: none
    }

    .nav, .foot {
        background: rgba(11,18,32,.85) !important
    }
}

/* === HOME MOBILE FIXES: titre centré & module sous le fold === */
@media (max-width: 940px) {
    .hero#top {
        overflow: visible !important;
        padding-bottom: 40px
    }

        .hero#top .hero-grid {
            display: block
        }

        .hero#top .hero__content {
            min-height: 100svh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 24px 16px;
        }

        .hero#top .hero-icons {
            margin-top: 8px
        }
}

/* === Ombre lisse module (mobile) === */
@media (max-width: 940px) {
    .hero#top .hero-icons__frame {
        box-shadow: none;
        filter: drop-shadow(0 24px 48px rgba(0,0,0,.40));
        -webkit-filter: drop-shadow(0 24px 48px rgba(0,0,0,.40));
    }
}

/* === HERO Features (icônes) — base desktop === */
.hero-features {
    display: grid;
    place-items: center
}

.feature-card {
    width: min(520px, 42vw);
    border-radius: 28px;
    background: linear-gradient(to bottom right, var(--glass-bg1), var(--glass-bg2));
    border: 1px solid var(--glass-stroke);
    box-shadow: 0 18px 50px var(--glass-shadow), inset 0 1px 0 var(--glass-inside-hi);
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(160%);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(160%);
    padding: clamp(22px, 3vw, 30px);
    overflow: visible;
}
/* Dots sous la carte */
.hero-feature-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px
}

    .hero-feature-dots > button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        background: rgba(127,127,127,.35)
    }

        .hero-feature-dots > button.is-active {
            background: var(--ring)
        }

/* === Mobile: features sous le fold === */
@media (max-width: 940px) {
    .hero#top {
        display: block;
        overflow: visible;
        padding-bottom: 36px
    }

        .hero#top .hero-grid {
            display: block
        }

        .hero#top .hero__content {
            min-height: 100svh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 24px 16px;
        }

        .hero#top .hero-features {
            margin-top: 16px
        }

    .feature-card {
        box-shadow: none;
        filter: drop-shadow(0 24px 48px rgba(0,0,0,.38));
        border: 1px solid var(--glass-stroke);
        background: linear-gradient(to bottom right, var(--glass-bg1), var(--glass-bg2));
    }

        .feature-card::after {
            display: none
        }

        .feature-card::before {
            opacity: .65
        }
}

/* ===== Outils & technologies — mini-cartes ===== */
.tools .card {
    padding: clamp(22px, 3.6vw, 36px)
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.tool {
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(to bottom right, var(--glass-bg1), var(--glass-bg2));
    border: 1px solid var(--glass-stroke);
    box-shadow: inset 0 1px 0 var(--glass-inside-hi);
    backdrop-filter: blur(calc(var(--glass-blur) - 4px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

    .tool h5 {
        margin: 0 0 6px 0;
        color: var(--text);
        letter-spacing: .1px;
        font-weight: 700;
        font-size: clamp(13.5px, 1.2vw, 18px);
        line-height: 1.25;
        flex-shrink: 0;
    }

    .tool p {
        margin: 0;
        color: var(--text-2);
        font-size: clamp(12.5px, 1.05vw, 16px);
        line-height: 1.35;
        flex-grow: 1;
        display: flex;
        align-items: flex-end;
    }

@media (max-width: 1200px) {
    .tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 900px) {
    .tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 520px) {
    .tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px
    }

    .tool {
        padding: 12px;
        border-radius: 12px
    }

        .tool h5 {
            font-size: 12.5px
        }

        .tool p {
            font-size: 12px
        }
}

/* ===== Center hero pair (desktop only) ===== */
@media (min-width: 961px) {
    .hero-grid {
        grid-template-columns: minmax(480px, 680px) var(--hero-icons-w);
        justify-content: center;
        column-gap: clamp(32px, 6vw, 80px);
    }

    .hero__content {
        justify-self: center;
        text-align: center;
        max-width: 720px;
        margin-inline: auto
    }

    .hero-icons {
        justify-self: center
    }
}