/* ============================================================
   SARANG GROUP — Home Hero Section
   Interactive blueprint overlay with light/dark theme support
   ============================================================ */

/* ---------- HERO CONTAINER ---------- */
/* Flex column: nav (natural height) + hero (fills the rest). No gap = no footer line. */
html:has(.sg-hero) { overflow: hidden; margin: 0; padding: 0; height: 100%; }
html:has(.sg-hero) body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
}
html:has(.sg-hero) .sg-nav {
    position: static;
    flex-shrink: 0;
    border-bottom: none;
}

.sg-hero {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    --nav-height: 65px;
}

/* ---------- BACKGROUND IMAGES ---------- */
.sg-hero__picture {
    position: absolute;
    inset: 0;
    z-index: -3;
}
.sg-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Per-theme framing: the dark render sits higher (tower near top edge),
   so anchor it toward the top to avoid cutting the tower. The light render
   has more top margin, so keep it centered. */
.sg-hero__picture--light .sg-hero__image { object-position: left center; }
.sg-hero__picture--dark .sg-hero__image { object-position: left 15%; }

/* Theme switching: hide the wrong one */
:root[data-theme="dark"] .sg-hero__picture--light,
:root[data-theme="light"] .sg-hero__picture--dark { display: none; }
:root[data-theme="dark"] .sg-hero__picture--dark,
:root[data-theme="light"] .sg-hero__picture--light { display: block; }

/* ---------- BLUEPRINT SVG OVERLAY ---------- */
.sg-hero__blueprint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    mix-blend-mode: multiply;
    color: #64748b;
}
:root[data-theme="dark"] .sg-hero__blueprint {
    mix-blend-mode: screen;
    color: #94a3b8;
}

/* Draw animation */
.sg-hero__blueprint .draw path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: blueprint-idle 12s ease-in-out infinite;
}
.sg-hero__blueprint .energy {
    stroke-dasharray: .18 .82;
    stroke-dashoffset: 1;
    opacity: .28;
    animation: energy 12s linear infinite;
}
.sg-hero__blueprint .nodes {
    opacity: .25;
    animation: nodes 4s ease-in-out infinite;
}

/* Hover states (desktop) */
.sg-hero:hover .sg-hero__blueprint .draw path,
.sg-hero:focus-within .sg-hero__blueprint .draw path {
    animation: blueprint-hover 2.2s ease forwards;
}
.sg-hero:hover .sg-hero__blueprint .energy {
    opacity: .82;
    animation-duration: 3.5s;
}

/* Cursor glow */
.sg-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(21,87,255,0.12), transparent 70%);
    opacity: 0;
    transition: opacity .55s;
}
.sg-hero:hover::after { opacity: 1; }

/* ---------- SHADE OVERLAY (readability gradient) ---------- */
.sg-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, transparent 42%, rgba(247,246,242,0.68) 60%, rgba(247,246,242,0.95) 78%, rgba(247,246,242,0.99) 100%);
    transition: background 0.4s ease;
}
:root[data-theme="dark"] .sg-hero__shade {
    background: linear-gradient(90deg, transparent 42%, rgba(10,13,20,0.55) 60%, rgba(10,13,20,0.9) 78%, rgba(10,13,20,0.97) 100%);
}

/* ---------- RIGHT-SIDE CONTENT ---------- */
.sg-hero__content {
    position: relative;
    margin-left: auto;
    width: min(44%, 560px);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2vw, 48px) clamp(20px, 2.5vw, 48px);
    text-align: center;
    overflow-y: auto;
}

/* Location pill */
.sg-hero__location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sg-badge-bg);
    border: 1px solid var(--sg-badge-border);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 0.78rem;
    color: var(--sg-muted);
    margin-bottom: 18px;
    transition: background 0.35s, border-color 0.35s, color 0.35s;
}
.sg-hero__location svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Eyebrow */
.sg-hero__eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    color: var(--sg-accent);
    margin-bottom: 14px;
}

/* Headline */
.sg-hero__headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: 800;
    line-height: 1.0;
    color: var(--sg-heading);
    margin-bottom: 14px;
    transition: color 0.35s;
}

/* Supporting copy */
.sg-hero__para {
    font-size: 0.88rem;
    color: var(--sg-muted);
    line-height: 1.6;
    max-width: 440px;
    margin-bottom: 22px;
    transition: color 0.35s;
}

/* ---------- REGISTRATION CARD ---------- */
.sg-hero__card {
    width: 100%;
    max-width: 480px;
    border-radius: 18px;
    padding: 24px 26px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
/* Solid, high-contrast card so it stands out from the hero background
   (and so the "Thank You" success state is clearly visible) */
:root[data-theme="dark"] .sg-hero__card {
    background: rgba(22,28,40,0.92);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
:root[data-theme="light"] .sg-hero__card {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(17,19,22,0.08);
    box-shadow: 0 22px 60px rgba(17,19,22,0.14);
}
.sg-hero__card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--sg-heading);
    text-align: center;
    margin-bottom: 16px;
    transition: color 0.35s;
}

/* Form fields */
.sg-hero__field {
    position: relative;
    margin-bottom: 10px;
}
.sg-hero__field svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--sg-faint);
    pointer-events: none;
}
.sg-hero__field input,
.sg-hero__field select {
    width: 100%;
    padding: 12px 14px 12px 40px;
    background: var(--sg-input-bg);
    border: 1px solid var(--sg-input-border);
    border-radius: 10px;
    color: var(--sg-heading);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.25s;
    appearance: none;
}
.sg-hero__field input::placeholder { color: var(--sg-placeholder); }
.sg-hero__field input:focus,
.sg-hero__field select:focus {
    border-color: var(--sg-accent);
    box-shadow: 0 0 0 3px rgba(21,87,255,0.12);
    background: var(--sg-input-bg-focus);
}
/* Validation error states */
.sg-hero__input--error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.sg-hero__error {
    display: none;
    font-size: 0.72rem;
    color: #f87171;
    margin-top: 4px;
    padding-left: 2px;
}
.sg-hero__field--select::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
}
.sg-hero__field select { color: var(--sg-placeholder); padding-left: 16px; }

/* Submit button */
.sg-hero__submit {
    width: 100%;
    padding: 14px;
    margin-top: 4px;
    background: var(--sg-accent);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    cursor: pointer;
    transition: all 0.3s;
}
.sg-hero__submit:hover {
    background: var(--sg-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(21,87,255,0.35);
}
.sg-hero__submit:active { transform: translateY(0); }
.sg-hero__submit.loading { opacity: 0.6; pointer-events: none; }

/* ---------- CONTACT ROW ---------- */
.sg-hero__contacts {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.sg-hero__contact-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: var(--sg-muted);
    text-decoration: none;
    transition: color 0.25s;
}
.sg-hero__contact-item:hover { color: var(--sg-accent); }
.sg-hero__contact-item svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- SOUND TOGGLE ---------- */
.sg-hero__sound {
    position: absolute;
    left: clamp(20px, 4vw, 64px);
    bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--sg-card-border);
    background: var(--sg-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 100px;
    padding: 11px 18px;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    color: var(--sg-muted);
    cursor: pointer;
    z-index: 5;
    transition: all 0.25s;
}
.sg-hero__sound:hover { color: var(--sg-heading); border-color: var(--sg-accent); }
.sg-hero__sound svg { flex-shrink: 0; }

/* ---------- KEYFRAMES ---------- */
@keyframes blueprint-idle {
    0%, 100% { stroke-dashoffset: 1; opacity: .18; }
    35%, 70% { stroke-dashoffset: 0; opacity: .5; }
}
@keyframes blueprint-hover {
    to { stroke-dashoffset: 0; opacity: .72; }
}
@keyframes energy {
    to { stroke-dashoffset: 0; }
}
@keyframes nodes {
    50% { opacity: .75; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .sg-hero__content {
        width: 100%;
        height: auto;
        min-height: calc(100svh - 65px);
        padding-top: 48vh;
        align-content: start;
        justify-content: flex-start;
        padding-left: 24px;
        padding-right: 24px;
    }
    .sg-hero__image {
        object-fit: cover;
        object-position: center top;
    }
    .sg-hero__shade {
        background: linear-gradient(180deg, transparent 22%, rgba(247,246,242,0.82) 50%, rgba(247,246,242,0.98) 68%, rgba(247,246,242,1) 100%) !important;
    }
    :root[data-theme="dark"] .sg-hero__shade {
        background: linear-gradient(180deg, transparent 22%, rgba(10,13,20,0.8) 50%, rgba(10,13,20,0.96) 68%, rgba(10,13,20,1) 100%) !important;
    }
    .sg-hero__sound { bottom: auto; top: calc(50vh - 20px); left: 20px; }
    .sg-hero__headline { font-size: clamp(2rem, 7vw, 2.8rem); }
    .sg-hero__contacts { gap: 16px; font-size: 0.75rem; }
    .sg-hero { overflow-y: auto; }
}

@media (max-width: 520px) {
    .sg-hero__contacts { flex-direction: column; align-items: center; gap: 12px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .sg-hero__blueprint * { animation: none !important; }
    .sg-hero::after { display: none; }
    .sg-hero__blueprint .draw path { stroke-dashoffset: 0; opacity: .3; }
}

/* ==========================================================
   MOBILE EXPERIENCE (≤ 767px)
   Isolated from the approved desktop layout
   ========================================================== */

/* Hide mobile-only elements by default (desktop) */
.sg-mobile-menu,
.sg-mobile-menu-backdrop,
.sg-mobile-actions,
.sg-sheet-close,
.sg-sheet-handle,
.sg-sheet-privacy { display: none; }

@media (max-width: 767px) {
  /* ---------- BASE ---------- */
  html, body { overflow-x: hidden; }

  /* ---------- FIX 1: HEADER ALIGNMENT ---------- */
  /* Nav becomes a strict flex row; logo + hamburger share one vertical center */
  .sg-nav {
    height: 64px;
    display: flex;
    align-items: center;
  }
  .sg-nav__inner {
    padding: 0 18px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .sg-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .sg-nav__logo img {
    height: 30px;
    width: auto;
  }
  /* Hide desktop nav links and standalone theme toggle on mobile */
  .sg-theme-toggle,
  .sg-nav__links { display: none !important; }
  /* Hamburger: explicit 44×44 touch target; lines centered inside */
  .sg-nav__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 52;
    background: none;
    border: none;
    cursor: pointer;
    gap: 0;
  }
  /* Three-line hamburger icon centered inside the button */
  .sg-nav__hamburger span {
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--sg-hamburger);
    border-radius: 1px;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.35s ease;
  }
  .sg-nav__hamburger span:nth-child(1) { top: calc(50% - 7px); }
  .sg-nav__hamburger span:nth-child(2) { top: 50%; margin-top: -1px; }
  .sg-nav__hamburger span:nth-child(3) { bottom: calc(50% - 7px); top: auto; }

  /* ---------- BODY / HERO ---------- */
  body.sg-lock { overflow: hidden; }
  .sg-hero {
    min-height: calc(100svh - 64px);
    height: auto;
    overflow: visible;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    background: var(--sg-bg);
  }
  .sg-hero__picture {
    position: absolute;
    inset: 0 0 auto;
    height: 49svh;
  }
  .sg-hero__image,
  .sg-hero__picture--light .sg-hero__image,
  .sg-hero__picture--dark .sg-hero__image {
    object-fit: cover;
    object-position: left 15%;
  }
  .sg-hero__blueprint { height: 49svh; opacity: .32; }
  .sg-hero__shade {
    inset: 0;
    background: linear-gradient(180deg, transparent 26%, rgba(247,246,242,.15) 42%, rgba(247,246,242,.96) 61%, var(--sg-bg) 76%) !important;
  }
  :root[data-theme="dark"] .sg-hero__shade {
    background: linear-gradient(180deg, transparent 26%, rgba(10,13,20,.16) 42%, rgba(10,13,20,.96) 61%, var(--sg-bg) 76%) !important;
  }
  .sg-hero__content {
    position: relative;
    width: 100%;
    min-height: calc(100svh - 64px);
    height: auto;
    padding: 45svh 22px max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
  }
  .sg-hero__location { font-size: .72rem; padding: 8px 13px; margin-bottom: 14px; background: var(--sg-card-bg); backdrop-filter: blur(12px); }
  .sg-hero__eyebrow { font-size: .72rem; letter-spacing: 3px; margin-bottom: 8px; }
  .sg-hero__headline { font-size: clamp(2.1rem, 11vw, 3.05rem); line-height: .98; margin-bottom: 10px; }
  .sg-hero__para { font-size: .88rem; line-height: 1.6; max-width: 330px; margin-bottom: 16px; }

  /* Mobile CTA bar */
  .sg-mobile-actions { display: block; width: 100%; max-width: 360px; margin-bottom: 0; }
  .sg-mobile-cta {
    width: 100%; border: 0; border-radius: 12px; padding: 16px;
    background: #1557ff; color: #fff;
    font: 700 .76rem Montserrat, sans-serif; letter-spacing: 2.3px; text-transform: uppercase;
    box-shadow: 0 12px 34px rgba(21,87,255,.3);
  }
  .sg-mobile-actions > div {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px;
  }
  .sg-mobile-actions a {
    padding: 12px; border: 1px solid var(--sg-card-border); border-radius: 11px;
    color: var(--sg-heading); text-decoration: none;
    font: 600 .78rem Inter, sans-serif; background: var(--sg-card-bg);
    text-align: center;
  }

  /* Hide desktop-only elements */
  .sg-hero__contacts, .sg-hero__sound, .sg-whatsapp { display: none !important; }

  /* ---------- FIX 2: REGISTRATION SHEET ---------- */
  .sg-hero__card {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 71;
    width: 100%;
    max-width: none;
    /* Constrain height; internal scroll for long content / keyboard */
    max-height: min(88svh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 24px 24px 0 0;
    padding: 18px 22px max(22px, env(safe-area-inset-bottom));
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .32s ease, visibility .32s;
    background: var(--sg-bg);
    box-shadow: 0 -20px 60px rgba(0,0,0,.25);
  }
  .sg-hero__card.is-open { transform: translateY(0); visibility: visible; }

  /* Sheet backdrop */
  .sg-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(3,7,18,.58); opacity: 0; visibility: hidden;
    transition: .25s; backdrop-filter: blur(3px);
  }
  .sg-sheet-backdrop.is-open { opacity: 1; visibility: visible; }

  /* Sheet handle */
  .sg-sheet-handle {
    display: block; width: 42px; height: 4px; border-radius: 9px;
    background: var(--sg-faint); margin: 0 auto 14px;
  }

  /* Close button */
  .sg-sheet-close {
    display: grid; place-items: center;
    position: absolute; right: 18px; top: 14px;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: var(--sg-input-bg);
    color: var(--sg-heading); font-size: 23px; cursor: pointer;
  }

  /* Privacy note — now inside the sheet, fully visible */
  .sg-sheet-privacy {
    display: block;
    margin: 12px 0 0;
    padding-bottom: 4px;
    text-align: center;
    color: var(--sg-muted);
    font-size: .7rem;
  }

  /* Sheet form sizing */
  .sg-hero__card-title { margin-bottom: 15px; }
  .sg-hero__field { margin-bottom: 9px; }
  .sg-hero__field input, .sg-hero__field select { min-height: 48px; }
  .sg-hero__submit { min-height: 50px; }

  /* ---------- MOBILE BACKDROP ---------- */
  .sg-mobile-menu-backdrop {
    display: block; position: fixed; inset: 64px 0 0; z-index: 148;
    background: rgba(0,0,0,.52); opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
    backdrop-filter: blur(2px);
  }
  .sg-mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; }

  /* ---------- BOTTOM-SHEET DRAWER ---------- */
  .sg-mobile-menu {
    display: flex; flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 149;
    width: 100%;
    max-height: 88svh;
    background: var(--sg-bg);
    border-radius: 24px 24px 0 0;
    transform: translateY(105%);
    transition: transform .38s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 48px rgba(0,0,0,.2), 0 -1px 0 var(--sg-card-border);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sg-mobile-menu.is-open { transform: translateY(0); }

  /* Handle pill */
  .sg-mobile-menu__handle-bar {
    width: 44px; height: 4px; border-radius: 9px;
    background: var(--sg-card-border);
    margin: 14px auto 0;
    flex-shrink: 0;
  }

  /* Drawer: head */
  .sg-mobile-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    font: 700 .68rem Montserrat, sans-serif; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--sg-heading);
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--sg-card-border);
    flex-shrink: 0;
  }
  .sg-mobile-menu__head button {
    border: 0; background: none; color: var(--sg-faint); font-size: 28px;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 8px; transition: background .2s, color .2s;
  }
  .sg-mobile-menu__head button:hover { background: var(--sg-card-bg); color: var(--sg-heading); }

  /* Drawer: nav list */
  .sg-mobile-menu__nav {
    padding: 0 16px;
    flex-shrink: 0;
  }

  /* Each nav row: icon | text | chevron */
  .sg-mobile-menu__nav-row {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--sg-card-border);
    color: var(--sg-heading);
    font: 500 1rem Inter, sans-serif;
    text-decoration: none;
    min-height: 58px;
    transition: opacity .18s;
  }
  .sg-mobile-menu__nav-row:last-child { border-bottom: none; }
  .sg-mobile-menu__nav-row:hover { opacity: .72; }
  .sg-mobile-menu__nav-row:focus-visible { outline: 2px solid var(--sg-accent); border-radius: 8px; }

  .sg-mobile-menu__nav-icon {
    width: 22px; height: 22px; display: flex; align-items: center; flex-shrink: 0;
    color: var(--sg-heading);
  }
  .sg-mobile-menu__nav-text { flex: 1; }
  .sg-mobile-menu__nav-chevron {
    width: 16px; height: 16px; color: var(--sg-faint); flex-shrink: 0;
  }

  /* Sign In row: cobalt accent color, no fill */
  .sg-mobile-menu__nav-row--signin { color: var(--sg-accent); }
  .sg-mobile-menu__nav-row--signin .sg-mobile-menu__nav-icon,
  .sg-mobile-menu__nav-row--signin .sg-mobile-menu__nav-chevron { color: var(--sg-accent); }

  /* Divider */
  .sg-mobile-menu__divider {
    height: 1px; background: var(--sg-card-border);
    margin: 0 16px;
    flex-shrink: 0;
  }

  /* Settings: 2-column card grid */
  .sg-mobile-menu__settings {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 14px 16px;
    flex-shrink: 0;
  }
  .sg-mobile-menu__setting-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 14px 12px;
    border-radius: 14px;
    border: 1px solid var(--sg-card-border);
    background: var(--sg-card-bg);
    cursor: pointer; text-align: left; width: 100%;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
  }
  :root[data-theme="dark"] .sg-mobile-menu__setting-card {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  }
  .sg-mobile-menu__setting-card:hover { border-color: var(--sg-accent); }
  .sg-mobile-menu__setting-card:focus-visible { outline: 2px solid var(--sg-accent); }

  .sg-mobile-menu__setting-card-top {
    display: flex; align-items: center; gap: 8px;
    color: var(--sg-heading); font: 600 .88rem Inter, sans-serif;
  }
  .sg-mobile-menu__setting-card-top svg { flex-shrink: 0; color: var(--sg-muted); }

  .sg-mobile-menu__setting-card-state {
    font: 500 .76rem Inter, sans-serif;
    color: var(--sg-muted);
    padding-left: 26px; /* aligns under label text, past icon */
    transition: color .2s;
  }
  
  /* Highlight active settings status in website accent color (cobalt blue) */
  .sg-mobile-menu__setting-card-state--theme,
  .sg-mobile-menu__setting-card-state.is-active {
    color: var(--sg-accent) !important;
  }

  /* Contacts: 3-column tab bar */
  .sg-mobile-menu__contacts {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--sg-card-border);
    margin-top: auto;
    flex-shrink: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .sg-mobile-menu__contacts a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    padding: 14px 8px;
    color: var(--sg-muted); font: 400 .72rem Inter, sans-serif;
    text-decoration: none; min-height: 64px;
    transition: color .2s;
  }
  .sg-mobile-menu__contacts a:hover { color: var(--sg-accent); }
  .sg-mobile-menu__contacts a:focus-visible { outline: 2px solid var(--sg-accent); }
  /* Vertical dividers between contact tabs */
  .sg-mobile-menu__contacts a:not(:last-child) { border-right: 1px solid var(--sg-card-border); }

}

@media (max-width: 370px) {
  .sg-hero__content { padding-left: 16px; padding-right: 16px; }
  .sg-hero__headline { font-size: 2rem; }
  .sg-hero__para { font-size: .8rem; }
  .sg-hero__card { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-mobile-menu, .sg-hero__card, .sg-sheet-backdrop { transition: none !important; }
}