/* =====================================================
   SOLAR COMPASS
   MAIN STYLESHEET
===================================================== */

/* =====================================================
   VARIABLES
===================================================== */

/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

a {

    text-decoration: none;

    color: inherit;

}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {

    outline:
        2px solid
        var(--blue);

    outline-offset:
        3px;

}

img {

    max-width: 100%;

    display: block;

}

button, input, select {

    font-family:
        inherit;

}

/* =====================================================
   CONTAINER
===================================================== */

.container {

    width:
        min(1180px, 92%);

    margin:
        0 auto;

}

/* =====================================================
   NAVBAR
===================================================== */

.logo-text .solar {

    color:
        var(--orange);

}

.logo-text .compass {

    color:
        var(--blue);

}

.mobile-menu-button {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    margin-right:
        -10px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--blue);

    font-size:
        25px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background 0.2s;

}

.mobile-menu-button:hover {

    background:
        var(--background-blue);

}

.mobile-menu {

    display:
        none;

}

/* =====================================================
   LANGUAGE SWITCHER
===================================================== */

.lang-switcher {

    position:
        relative;

}

.lang-toggle:hover {

    background:
        var(--border);

}

.lang-globe {

    font-size:
        14px;

}

.lang-caret {

    font-size:
        10px;

    opacity:
        0.7;

    transition:
        transform 0.2s;

}

.lang-menu.open + .lang-toggle .lang-caret, .lang-toggle[aria-expanded="true"] .lang-caret {

    transform:
        rotate(180deg);

}

.lang-menu {

    position:
        absolute;

    top:
        calc(100% + 10px);

    right:
        0;

    display:
        none;

    flex-direction:
        column;

    min-width:
        160px;

    padding:
        6px;

    background:
        var(--white);

    border:
        1px solid var(--border);

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

    z-index:
        1100;

}

.lang-menu.open {

    display:
        flex;

}

.lang-option {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 12px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--text);

    font-size:
        13.5px;

    font-weight:
        600;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        0.2s;

}

.lang-option:hover {

    background:
        var(--background-blue);

}

.lang-option.active {

    background:
        var(--background-blue);

    color:
        var(--blue);

}

.lang-flag {

    font-size:
        16px;

    line-height:
        1;

}

.mobile-lang-switcher {

    display:
        flex;

    gap:
        8px;

    margin-top:
        10px;

    padding-top:
        16px;

    border-top:
        1px solid var(--border);

}

.mobile-lang-option {

    flex:
        1;

    padding:
        10px;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    background:
        var(--background-blue);

    color:
        var(--blue-dark);

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.2s;

}

.mobile-lang-option.active {

    background:
        var(--blue);

    border-color:
        var(--blue);

    color:
        var(--white);

}

/* =====================================================
   RTL (ARABIC) SUPPORT
===================================================== */

html[dir="rtl"] body {

    direction:
        rtl;

    text-align:
        right;

}

html[dir="rtl"] .lang-menu {

    right:
        auto;

    left:
        0;

}

html[dir="rtl"] .lang-option {

    text-align:
        right;

}

html[dir="rtl"] .desktop-nav {

    margin-left:
        0;

    margin-right:
        auto;

}

html[dir="rtl"] .nav-button {

    margin-left:
        0;

    margin-right:
        15px;

}

html[dir="rtl"] .mobile-menu-button {

    margin-right:
        0;

    margin-left:
        -10px;

}

html[dir="rtl"] .arrow {

    display:
        inline-block;

    transform:
        scaleX(-1);

}

html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea {

    text-align:
        right;

}

/* =====================================================
   HERO
===================================================== */

.hero-label span {

    color:
        var(--blue);

}

.button:hover {

    transform:
        translateY(-2px);

}

.hero-status small {

    padding:
        5px 9px;

    background:
        #e8f3ff;

    border:
        1px solid #c8e1fb;

    border-radius:
        5px;

    color:
        var(--blue);

    font-weight:
        800;

}

/* =====================================================
   HERO COMPASS
===================================================== */

.hero-compass {

    position:
        absolute;

    right:
        9%;

    top:
        50%;

    width:
        330px;

    height:
        330px;

    transform:
        translateY(-50%);

    display:
        grid;

    place-items:
        center;

}

.hero-compass img {

    width:
        220px;

    position:
        relative;

    z-index:
        2;

    filter:
        drop-shadow(
            0 20px 30px
            rgba(0,0,0,0.18)
        );

    animation:
        compassFloat 5s ease-in-out infinite;

}

@keyframes compassFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-10px)
            rotate(2deg);

    }

}

.compass-ring {

    position:
        absolute;

    inset:
        0;

    border:
        1px solid
        rgba(255,255,255,0.75);

    border-radius:
        50%;

}

.compass-ring::before {

    content:
        "";

    position:
        absolute;

    inset:
        25px;

    border:
        1px dashed
        rgba(255,255,255,0.75);

    border-radius:
        50%;

}

.compass-ring span {

    position:
        absolute;

    font-size:
        12px;

    font-weight:
        800;

    color:
        white;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,0.35);

}

.north {

    top:
        5px;

    left:
        50%;

    transform:
        translateX(-50%);

}

.south {

    bottom:
        5px;

    left:
        50%;

    transform:
        translateX(-50%);

}

.east {

    right:
        5px;

    top:
        50%;

    transform:
        translateY(-50%);

}

.west {

    left:
        5px;

    top:
        50%;

    transform:
        translateY(-50%);

}

/* =====================================================
   SECTIONS
===================================================== */

.section, #top, #early-access, #community {

    scroll-margin-top:
        94px;

}

.section-label.yellow {

    color:
        var(--yellow);

}

.section h2 span {

    display:
        block;

    color:
        var(--orange);

}

/* =====================================================
   ABOUT
===================================================== */

/* =====================================================
   PROJECTS
===================================================== */

.project-status.blue {

    background:
        #eaf4ff;

    color:
        var(--blue);

}

.project-status.orange {

    background:
        #fff1e8;

    color:
        var(--orange);

}

.project-icon {

    width:
        70px;

    height:
        70px;

    margin:
        28px 0 18px;

}

.progress-title {

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        10px;

    color:
        var(--text-light);

    margin-bottom:
        7px;

}

.progress-title strong {

    color:
        var(--blue);

}

.next-milestone span {

    color:
        var(--text-light);

}

.next-milestone strong {

    color:
        var(--orange);

}

.locked-area span svg {

    width:
        100%;

    height:
        100%;

}

.locked-area p {

    margin-top:
        8px;

    font-size:
        11px;

}

/* =====================================================
   EARLY ACCESS
===================================================== */

.early-access::after {

    content:
        "";

    position:
        absolute;

    right:
        -150px;

    top:
        -150px;

    width:
        500px;

    height:
        500px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        50%;

    box-shadow:
        0 0 0 80px
        rgba(255,255,255,0.02),
        0 0 0 160px
        rgba(255,255,255,0.02);

}

.early-form-photo {

    display:
        flex;

    gap:
        4px;

    align-items:
        stretch;

}

.early-form-photo .form-wrapper {

    flex:
        1;

}

.early-info h2 span {

    display:
        block;

    color:
        var(--orange-light);

}

.benefit:last-child {

    border-right:
        none;

}

.benefit-icon svg {

    width:
        20px;

    height:
        20px;

}

.benefit strong {

    display:
        block;

    font-size:
        12px;

}

.benefit span {

    display:
        block;

    margin-top:
        5px;

    color:
        rgba(255,255,255,0.65);

    font-size:
        11px;

}

.founding-count strong {

    color:
        var(--orange);

    font-size:
        15px;

}

/* =====================================================
   FORM
===================================================== */

.form-logo {

    width:
        48px;

    height:
        48px;

}

.form-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}

.form-header p {

    color:
        var(--text-light);

    font-size:
        11px;

}

.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

}

.input-group {

    margin-bottom:
        15px;

}

.input-group label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--blue-dark);

    font-size:
        11px;

    font-weight:
        700;

}

.input-group label span {

    color:
        var(--text-light);

    font-weight:
        400;

}

.input-group input:focus, .input-group select:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(7,86,181,0.08);

}

.checkbox {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin:
        5px 0 15px;

    color:
        var(--text-light);

    font-size:
        11px;

}

.checkbox input {

    margin-top:
        2px;

    accent-color:
        var(--blue);

}

.submit-button:hover {

    transform:
        translateY(-2px);

}

.privacy {

    text-align:
        center;

    margin-top:
        10px;

    color:
        #9aabba;

    font-size:
        10px;

}

.form-success {

    display:
        none;

    margin-top:
        15px;

    padding:
        12px;

    background:
        #e9fff4;

    color:
        var(--green);

    border-radius:
        6px;

    text-align:
        center;

    font-size:
        11px;

    font-weight:
        700;

}

.form-success.show {

    display:
        block;

}

/* =====================================================
   ROADMAP
===================================================== */

.roadmap h2 {

    margin-bottom:
        35px;

    color:
        var(--blue-dark);

    font-size:
        45px;

    line-height:
        1;

}

.timeline {

    position:
        relative;

}

.timeline-item.completed .timeline-dot {

    background:
        var(--green);

    color:
        white;

    border-color:
        var(--green);

}

.timeline-item.active .timeline-dot {

    background:
        var(--orange);

    color:
        white;

    border-color:
        var(--orange);

}

.timeline-item strong {

    display:
        block;

    color:
        var(--blue-dark);

    font-size:
        13px;

}

.timeline-item span {

    color:
        var(--orange);

    font-size:
        10px;

    font-weight:
        800;

}

.timeline-item p {

    color:
        var(--text-light);

    font-size:
        11px;

}

/* =====================================================
   ROADMAP DECORATIVE COMPASS
===================================================== */

.roadmap-left {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}

.roadmap-text {

    flex:
        1;

    min-width:
        0;

}

.roadmap-compass {

    position:
        relative;

    flex:
        0 0 auto;

    width:
        170px;

    height:
        170px;

    margin:
        0;

}

.roadmap-compass-star {

    width:
        100%;

    height:
        100%;

}

.roadmap-compass-star path {

    fill:
        none;

    stroke:
        var(--border);

    stroke-width:
        1.4;

    stroke-linejoin:
        round;

}

.roadmap-compass-star circle {

    fill:
        var(--border);

}

.roadmap-compass-n {

    position:
        absolute;

    top:
        -4px;

    left:
        50%;

    transform:
        translateX(-50%);

    padding:
        0 6px;

    background:
        white;

    color:
        var(--text-light);

    font-size:
        11px;

    font-weight:
        800;

}

.roadmap-compass-logo {

    position:
        absolute;

    left:
        -6px;

    bottom:
        -14px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        6px 12px 6px 6px;

    background:
        white;

    border-radius:
        30px;

    box-shadow:
        var(--shadow);

}

.roadmap-compass-logo img {

    width:
        26px;

    height:
        26px;

}

.roadmap-compass-logo .logo-text {

    font-size:
        14px;

}

/* =====================================================
   COMMUNITY
===================================================== */

.community-box > p {

    color:
        var(--text-light);

    font-size:
        13px;

    margin-bottom:
        25px;

}

.social-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}

.social:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(7,70,130,0.08);

}

.social > span svg {

    width:
        18px;

    height:
        18px;

}

.whatsapp > span {

    background:
        #e7faef;

    color:
        #25d366;

}

.telegram > span {

    background:
        #e6f5ff;

    color:
        #229ed9;

}

.youtube > span {

    background:
        #ffeaea;

    color:
        #e60000;

}

.x > span {

    background:
        #111;

    color:
        white;

}

.linkedin > span {

    background:
        #e6f2ff;

    color:
        #0a66c2;

}

.facebook > span {

    background:
        #e9f0ff;

    color:
        #1877f2;

}

.social small {

    display:
        block;

    color:
        var(--text-light);

    font-size:
        10px;

}

/* =====================================================
   UPDATES
===================================================== */

/* =====================================================
   FOOTER
===================================================== */

.footer-container {

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    align-items:
        center;

    gap:
        30px;

}

.footer-brand .logo {

    justify-content:
        center;

}

.footer-brand img {

    width:
        34px;

    height:
        34px;

}

.footer-brand .logo-text {

    font-size:
        18px;

}

.footer-brand p {

    color:
        var(--text-light);

    font-size:
        10px;

    margin-top:
        7px;

}

.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        18px;

}

.footer-links a {

    color:
        var(--text-light);

    font-size:
        11px;

}

.copyright {

    text-align:
        right;

    color:
        #94a5b5;

    font-size:
        10px;

}

/* =====================================================
   TOAST
===================================================== */

.toast {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        2000;

    padding:
        14px 20px;

    background:
        var(--blue-dark);

    color:
        white;

    border-radius:
        8px;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.18);

    font-size:
        11px;

    transform:
        translateY(120px);

    opacity:
        0;

    transition:
        0.3s;

}

.toast.show {

    transform:
        translateY(0);

    opacity:
        1;

}

/* =====================================================
   RESPONSIVE
===================================================== */

/* =====================================================
   2026 UI POLISH — VISUAL OVERHAUL
===================================================== */

:root {
    --blue: #0868d6;
    --blue-dark: #062f66;
    --blue-light: #2f9bf4;
    --orange: #f36a21;
    --orange-light: #ff9a3d;
    --yellow: #ffd34e;
    --white: #ffffff;
    --background: #f5f9fe;
    --background-blue: #edf5ff;
    --text: #163a61;
    --text-light: #60758b;
    --border: #dce8f4;
    --green: #16a866;
    --shadow: 0 20px 60px rgba(6, 47, 102, .10);
    --radius: 22px;
}

body {
    font-family: "Inter",
        Arial,
        sans-serif;
    background: #f8fbff;
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(8, 104, 214, .18);
    color: var(--blue-dark);
}

/* Header */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
    border-bottom-color: rgba(220,232,244,.82);
    box-shadow: 0 8px 30px rgba(6,47,102,.045);
}

.nav-container {
    width: min(1380px, 94%);
    height: 72px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1440px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 5px 10px rgba(8,104,214,.15));
}

.logo-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.7px;
    line-height: 1;
    white-space: nowrap;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.desktop-nav a {
    font-size: 12px;
    font-weight: 700;
    color: #4c6680;
    transition: color .2s ease, background .2s ease, transform .2s ease;
    position: relative;
    padding: 9px 12px;
    border-radius: 10px;
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--orange), var(--orange-light));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.desktop-nav a:hover {
    color: var(--blue-dark);
    background: #f1f7fd;
}

.desktop-nav a:hover::after {
    transform: scaleX(1);
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f5f9fe;
    color: var(--blue-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: 0.2s;
    border-color: #d8e6f3;
}

.nav-button {
    margin-left: 15px;
    padding: 11px 17px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--blue), #0b7ae9);
    color: white;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 9px 24px rgba(8,104,214,.19);
    transition: 0.25s;
    letter-spacing: .1px;
}

.nav-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(8,104,214,.25);
}

/* Hero */

.hero {
    position: relative;
    max-width: 1700px;
    margin: 0 auto;
    aspect-ratio: auto;
    max-height: none;
    min-height: 590px;
    overflow: hidden;
    color: white;
    width: min(1600px, 100%);
    height: clamp(590px, 72vh, 760px);
    border-radius: 0 0 34px 34px;
    box-shadow: 0 28px 80px rgba(6,47,102,.10);
}

.hero-image {
    position: absolute;
    inset: 0;
    background-image: url("assets/solar-hero.jpg");
    background-size: cover;
    background-position: center right;
    z-index: 0;
    transform: scale(1.015);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 72% 48%, rgba(255,255,255,.04), transparent 26%),
        linear-gradient(90deg,
            rgba(255,255,255,.985) 0%,
            rgba(255,255,255,.965) 27%,
            rgba(255,255,255,.84) 46%,
            rgba(255,255,255,.30) 65%,
            rgba(3,45,80,.03) 100%);
    z-index: 1;
}

.hero-container {
    width: min(1380px, 94%);
    height: 100%;
    margin: auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    max-width: 1380px;
}

.hero-content {
    width: min(690px, 62%);
    padding: 50px 0;
}

.hero-label {
    color: var(--orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(8,104,214,.14);
    border-radius: 999px;
    background: rgba(245,250,255,.88);
    box-shadow: 0 8px 25px rgba(6,47,102,.05);
}

.hero-label span + span::before {
    content: "•";
    margin-right: 8px;
    color: var(--orange);
}

.hero h1 {
    font-size: clamp(56px, 6.2vw, 84px);
    line-height: 1.15;
    letter-spacing: -5px;
    color: var(--blue-dark);
    margin-bottom: 25px;
    max-width: 720px;
    text-wrap: balance;
}

.hero h1 strong {
    display: block;
    padding-bottom: 0.08em;
    color: transparent;
    background: linear-gradient(135deg, #ef5d19 10%, #ff9b3d 90%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-content > p {
    max-width: 575px;
    color: #46647e;
    font-size: 16px;
    line-height: 1.75;
}

.hero-content > p strong {
    color: var(--blue-dark);
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    transition: 0.25s;
    min-height: 48px;
    letter-spacing: .15px;
}

.button-orange {
    background: linear-gradient(
            135deg,
            var(--orange),
            var(--orange-light)
        );
    color: white;
    box-shadow: 0 14px 30px rgba(243,106,33,.25);
}

.button-white {
    background: white;
    color: var(--blue);
    border: 1px solid
        var(--blue);
    border-color: #c9dced;
    box-shadow: 0 8px 24px rgba(6,47,102,.06);
}

.button-white:hover {
    background: #f7fbff;
    border-color: var(--blue);
}

.hero-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    font-size: 11px;
    color: var(--blue-dark);
    font-weight: 700;
    padding: 11px 14px;
    width: fit-content;
    border: 1px solid rgba(8,104,214,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 10px 30px rgba(6,47,102,.06);
    backdrop-filter: blur(10px);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1875e8;
    box-shadow: 0 0 0 5px rgba(24,117,232,.10);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(24,117,232,.10); }
    50% { box-shadow: 0 0 0 8px rgba(24,117,232,.02); }
}

/* Sections */

.section {
    padding: 112px 0;
}

.about {
    background: radial-gradient(circle at 8% 25%, rgba(8,104,214,.055), transparent 25%),
        #fff;
    position: relative;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.section-label {
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.25px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.section-label::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
}

.section h2 {
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: -3px;
    color: var(--blue-dark);
}

.about-text {
    color: var(--text-light);
    font-size: 16px;
    position: relative;
    padding-left: 34px;
    border-left: 2px solid #e5eef7;
}

.about-text p {
    max-width: 620px;
    color: #587087;
    font-size: 16px;
    line-height: 1.9;
}

.about-text p + p {
    margin-top: 22px;
}

/* Projects */

.projects {
    background: linear-gradient(180deg, #f7fbff 0%, #eef6fd 100%);
}

.projects-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 42px;
}

.projects-heading > p {
    color: #61768a;
    font-size: 14px;
    max-width: 390px;
    line-height: 1.8;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.project-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(207,224,239,.9);
    border-radius: 22px;
    padding: 26px;
    min-height: 470px;
    box-shadow: 0 12px 38px rgba(6,47,102,.06);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #dceaf5, #edf5fb);
}

.project-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -80px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(8,104,214,.055);
}

.project-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 55px rgba(6,47,102,.12);
    border-color: #bdd6ec;
}

.project-card.active {
    border: 2px solid
        #d8e9fb;
    border-color: rgba(8,104,214,.28);
    box-shadow: 0 22px 60px rgba(8,104,214,.12);
}

.project-card.active::before {
    background: linear-gradient(90deg, var(--blue), #5eb5ff);
}

.project-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-bottom: 34px;
}

.project-number {
    color: #8ba0b4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.project-status {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .6px;
}

.project-icon, .simple-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 25px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #edf6ff, #fff);
    border: 1px solid #dceaf5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 25px rgba(6,47,102,.07);
}

.project-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.simple-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin: 30px 0 22px;
    color: var(--orange);
}

.simple-icon svg {
    width: 36px;
    height: 36px;
}

.project-card h3 {
    color: var(--blue-dark);
    font-size: 25px;
    line-height: 1.1;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    letter-spacing: -.8px;
}

.project-card > p {
    color: #62778c;
    font-size: 12px;
    min-height: 68px;
    position: relative;
    z-index: 1;
    margin-top: 14px;
    line-height: 1.75;
}

.progress-wrapper {
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.progress {
    width: 100%;
    height: 8px;
    background: #e9f1f8;
    border-radius: 99px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), #52b4ff);
    border-radius: inherit;
}

.next-milestone {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e8f0f7;
    font-size: 10px;
    position: relative;
    z-index: 1;
}

.project-link {
    display: inline-flex;
    margin-top: 18px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.locked-area {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid
        var(--border);
    color: var(--text-light);
    position: relative;
    z-index: 1;
    padding: 22px 18px;
    border: 1px dashed #d5e4f0;
    border-radius: 16px;
    background: #f8fbfe;
}

.locked-area span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    color: #6f879c;
    border-radius: 12px;
    background: #edf5fc;
}

/* Early access */

.early-access {
    position: relative;
    padding: 110px 0;
    color: white;
    overflow: hidden;
    background: radial-gradient(circle at 90% 15%, rgba(255,211,78,.18), transparent 22%),
        linear-gradient(125deg, #052e69 0%, #0868d6 62%, #1485e9 100%);
}

.early-access::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.early-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 52px;
    align-items: stretch;
}

.early-info h2 {
    font-size: clamp(48px, 5.5vw, 72px);
    line-height: 1;
    letter-spacing: -4px;
    margin-bottom: 25px;
}

.early-info > p {
    max-width: 570px;
    color: rgba(255,255,255,0.78);
    font-size: 16px;
    line-height: 1.8;
}

.benefits {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
    margin-top: 44px;
}

.benefit {
    border-right: 1px solid
        rgba(255,255,255,0.22);
    padding-right: 20px;
}

.benefit-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.11);
    color: white;
    font-weight: 800;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.13);
}

.founding-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 35px;
    padding: 10px 15px;
    background: white;
    color: var(--blue);
    border-radius: 999px;
    font-size: 11px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.form-wrapper {
    background: white;
    color: var(--blue-dark);
    padding: 30px;
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(0,25,65,.25);
}

.form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2f7;
}

.form-header h3 {
    font-size: 20px;
    letter-spacing: -.4px;
}

.input-group input, .input-group select {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid
        #d9e6f1;
    border-radius: 10px;
    outline: none;
    background: #f8fbfe;
    color: var(--blue-dark);
    font-size: 11px;
    transition: 0.2s;
    border-color: #d8e6f2;
}

.input-group input:hover, .input-group select:hover {
    border-color: #b9d2e7;
}

.submit-button {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    background: linear-gradient(
            135deg,
            var(--orange),
            var(--orange-light)
        );
    color: white;
    font-size: 12px;
    font-weight: 800;
    transition: 0.25s;
    box-shadow: 0 12px 28px rgba(243,106,33,.22);
}

/* Roadmap */

.roadmap {
    background: #fff;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 80px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(#bcd7ee, #e7f0f7);
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.timeline-item:hover {
    background: #f7fbff;
    border-color: #e2edf6;
    transform: translateX(4px);
}

.timeline-dot {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    flex: 0 0 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: white;
    border: 2px solid
        #dceaf5;
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    flex-basis: 38px;
    border-color: #d5e4ef;
}

.community-box {
    padding: 40px;
    background: linear-gradient(145deg, #f7fbff, #eef6fd);
    border: 1px solid
        var(--border);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(6,47,102,.06);
}

.community-box h2 {
    color: var(--blue-dark);
    font-size: 42px;
    margin-bottom: 10px;
    letter-spacing: -1.8px;
}

.social {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid
        var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
    transition: 0.2s;
}

.social > span {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-weight: 800;
}

.social strong {
    display: block;
    color: var(--blue-dark);
    font-size: 12px;
}

/* Updates / footer */

.updates {
    background: linear-gradient(180deg, #fff, #f6faff);
    padding-top: 40px;
    padding: 75px 0 95px;
}

.updates-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 42px 46px;
    background: linear-gradient(135deg, #fff 0%, #f3f9ff 100%);
    border: 1px solid
        var(--border);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(6,47,102,.08);
}

.updates-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -100px;
    border-radius: 50%;
    border: 1px solid rgba(8,104,214,.09);
    box-shadow: 0 0 0 30px rgba(8,104,214,.025), 0 0 0 60px rgba(8,104,214,.018);
}

.updates-card h2 {
    color: var(--blue-dark);
    font-size: 36px;
    position: relative;
    z-index: 1;
    letter-spacing: -1.4px;
}

.updates-card p {
    color: var(--text-light);
    font-size: 14px;
    position: relative;
    z-index: 1;
    margin-top: 6px;
}

.updates-card .button {
    position: relative;
    z-index: 1;
}

footer {
    background: #071f3f;
    border-top: 0;
    padding: 38px 0;
}

.footer-brand .logo-text .solar, .footer-brand .logo-text .compass {
    color: #fff;
}

.footer-brand p, .footer-links a, .copyright {
    color: #8fa7bf;
}

.footer-links a:hover {
    color: #fff;
}

/* Subtle entrance animation */

.reveal-ready {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal-ready.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1050px) {
    .desktop-nav {
        gap: 18px;
    }

    .hero-content {
        width: 65%;
    }

    .hero-compass {
        right: 1%;
        width: 220px;
        height: 220px;
        opacity: 0.55;
    }

    .hero-compass img {
        width: 150px;
    }

    .project-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .early-grid {
        grid-template-columns: 1fr;
    }

    .roadmap-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        height: 650px;
    }

    .project-card {
        min-height: 450px;
    }
}

@media (max-width: 800px) {
    .roadmap-left {
        flex-direction: column;
        align-items: stretch;
    }

    .roadmap-compass {
        margin: 30px auto 0;
    }

    .desktop-nav, .nav-button {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        padding: 0 6%;
        background: white;
        border-top: 0px solid var(--border);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.3s ease,
            opacity 0.25s ease,
            padding 0.3s ease,
            visibility 0s 0.3s;
    }

    .mobile-menu.open {
        max-height: 420px;
        opacity: 1;
        visibility: visible;
        padding: 10px 6% 20px;
        border-top-width: 1px;
        transition: max-height 0.3s ease,
            opacity 0.25s ease,
            padding 0.3s ease;
    }

    .mobile-menu a {
        padding: 12px 0;
        color: var(--blue-dark);
        font-size: 13px;
        font-weight: 700;
        border-bottom: 1px solid
            var(--border);
    }

    .mobile-cta {
        color: var(--orange) !important;
    }

    .hero {
        aspect-ratio: auto;
        max-height: none;
        min-height: 690px;
        height: auto;
        border-radius: 0 0 26px 26px;
    }

    .hero-container {
        min-height: 690px;
        height: auto;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 58%, rgba(255,255,255,.58) 100%);
    }

    .hero-content {
        width: 100%;
        padding: 58px 0 90px;
    }

    .hero h1 {
        font-size: clamp(50px, 13vw, 72px);
        letter-spacing: -3.5px;
    }

    .hero-compass {
        right: -80px;
        bottom: 20px;
        top: auto;
        transform: none;
        opacity: 0.35;
    }

    .about-grid, .projects-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .benefits {
        grid-template-columns: 1fr;
    }

    .benefit {
        border-right: none;
        border-bottom: 1px solid
            rgba(255,255,255,0.2);
        padding: 10px 0 15px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand .logo {
        justify-content: center;
    }

    .copyright {
        text-align: center;
    }

    .nav-container {
        height: 68px;
    }

    .hero-content > p {
        font-size: 15px;
    }

    .hero-status {
        margin-top: 28px;
    }

    .section {
        padding: 84px 0;
    }

    .about-grid {
        gap: 40px;
    }

    .about-text {
        padding-left: 20px;
    }

    .project-card {
        min-height: 0;
    }

    .early-access {
        padding: 86px 0;
    }

    .community-box {
        padding: 30px;
    }

    .updates-card {
        padding: 34px 28px;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 550px) {
    .logo-text {
        font-size: 18px;
    }

    .hero h1 {
        font-size: 50px;
        letter-spacing: -2.8px;
    }

    .hero-content > p {
        font-size: 14px;
    }

    .hero-status {
        gap: 7px;
        width: 100%;
    }

    .hero-status strong {
        display: inline;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        min-height: auto;
        padding: 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .social-grid {
        grid-template-columns: 1fr;
    }

    .updates-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }

    .section {
        padding: 72px 0;
    }

    .early-access {
        padding: 65px 0;
    }

    .early-info h2 {
        font-size: 45px;
    }

    .form-wrapper {
        padding: 22px;
    }

    .nav-container {
        width: min(94%, 1440px);
    }

    .lang-switcher {
        display: none;
    }

    .hero {
        min-height: 700px;
    }

    .hero-container {
        min-height: 700px;
    }

    .hero-content {
        padding-top: 50px;
    }

    .hero-label {
        font-size: 9px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .button {
        width: 100%;
    }

    .section h2 {
        letter-spacing: -2px;
    }

    .about-text {
        border-left: 0;
        padding-left: 0;
        padding-top: 18px;
        border-top: 2px solid #e5eef7;
    }

    .community-box {
        padding: 25px 20px;
    }

    .community-box h2 {
        font-size: 34px;
    }

    .updates-card h2 {
        font-size: 30px;
    }
}

@media (max-width: 360px) {
    .hero h1 { font-size: 44px; }
    .hero-status strong { display: none; }
}

/* =====================================================
   PRIVACY & COOKIE UI
===================================================== */

.footer-links a {
    transition: color .2s ease, transform .2s ease;
}

.footer-links a:hover {
    color: var(--blue);
}

.cookie-banner {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    padding: 18px;
    border: 1px solid rgba(7, 86, 181, .14);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 55px rgba(12, 35, 60, .18);
    backdrop-filter: blur(16px);
}

.cookie-content {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}

.cookie-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #f4f8fc;
    font-size: 22px;
}

.cookie-copy h2 {
    font-size: 17px;
    margin-bottom: 4px;
}

.cookie-copy p {
    max-width: 720px;
    color: #5d6b79;
    font-size: 13px;
    line-height: 1.6;
}

.cookie-links {
    display: flex;
    gap: 14px;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
}

.cookie-actions,
.cookie-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cookie-button {
    border: 0;
    border-radius: 10px;
    padding: 11px 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cookie-button:hover {
    transform: translateY(-1px);
}

.cookie-button.primary {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 8px 18px rgba(7,86,181,.18);
}

.cookie-button.secondary {
    color: #1f3448;
    background: #eef4f9;
}

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.cookie-modal[hidden],
.cookie-banner[hidden] {
    display: none;
}

.cookie-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 24, 40, .56);
}

.cookie-modal-card {
    position: relative;
    width: min(560px, 100%);
    padding: 30px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(0,0,0,.24);
}

.cookie-modal-card h2 {
    margin: 9px 0 10px;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.08;
}

.cookie-modal-card > p {
    color: #5d6b79;
    line-height: 1.7;
    font-size: 14px;
}

.cookie-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #eef4f9;
    color: #183044;
    font-size: 25px;
    cursor: pointer;
}

.cookie-preference {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #e4edf5;
    border-radius: 14px;
}

.cookie-preference div {
    display: grid;
    gap: 4px;
}

.cookie-preference strong {
    font-size: 14px;
}

.cookie-preference span:not(.cookie-required) {
    color: #687888;
    font-size: 12px;
    line-height: 1.5;
}

.cookie-required {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: #e9f6ee;
    color: #227344;
    font-size: 11px;
    font-weight: 800;
}

.cookie-required.off {
    background: #f1f3f5;
    color: #687888;
}

.cookie-modal-actions {
    margin-top: 20px;
}

.cookie-settings-button {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 900;
    border: 1px solid #dce7f0;
    border-radius: 999px;
    padding: 9px 13px;
    background: rgba(255,255,255,.94);
    color: #254057;
    box-shadow: 0 8px 22px rgba(12,35,60,.12);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.policy-page {
    min-height: 100vh;
    background: #f7fafc;
}

.policy-main {
    padding: 130px 0 90px;
}

.policy-shell {
    width: min(900px, 92%);
    margin: 0 auto;
    padding: 46px;
    border: 1px solid #e3edf5;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(12,35,60,.07);
}

.policy-eyebrow {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

.policy-shell h1 {
    margin-bottom: 14px;
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1;
    letter-spacing: -2.5px;
}

.policy-intro {
    color: #5d6b79;
    font-size: 16px;
    line-height: 1.8;
    padding-bottom: 26px;
    border-bottom: 1px solid #e7eef4;
}

.policy-section {
    padding-top: 28px;
}

.policy-section h2 {
    margin-bottom: 9px;
    font-size: 22px;
}

.policy-section p,
.policy-section li {
    color: #526273;
    font-size: 14px;
    line-height: 1.8;
}

.policy-section ul {
    margin: 10px 0 0 20px;
}

.policy-back {
    display: inline-flex;
    margin-top: 32px;
    padding: 11px 15px;
    border-radius: 10px;
    background: #edf4fa;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

[dir="rtl"] .policy-section ul {
    margin: 10px 20px 0 0;
}

[dir="rtl"] .cookie-modal-close {
    right: auto;
    left: 16px;
}

[dir="rtl"] .cookie-settings-button {
    left: auto;
    right: 16px;
}

@media (max-width: 900px) {
    .cookie-content {
        grid-template-columns: auto 1fr;
    }

    .cookie-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 14px;
    }

    .cookie-content {
        grid-template-columns: 1fr;
    }

    .cookie-icon {
        display: none;
    }

    .cookie-actions,
    .cookie-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cookie-button {
        width: 100%;
    }

    .cookie-modal-card {
        padding: 25px 20px;
    }

    .policy-main {
        padding: 105px 0 50px;
    }

    .policy-shell {
        padding: 28px 22px;
        border-radius: 18px;
    }
}


/* Solar Compass social links */
.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 8px;
    flex-wrap: wrap;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    transform: translateY(-2px);
    opacity: .9;
}

.footer-social a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Ensure footer social links are always clickable */
.footer-social { position: relative; z-index: 20; pointer-events: auto; }
.footer-social a { position: relative; z-index: 21; pointer-events: auto; cursor: pointer; }

.social.tiktok, .social.email { cursor: pointer; }