/* Page-specific CSS for mode-atlas-home-page.css. Shared repeated rules moved to mode-atlas-page-shared.css. */

:root {
  --ma-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ma-font-display: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  --ma-font-jp: "Noto Sans JP", Inter, ui-sans-serif, system-ui, sans-serif;
}

:root {
      --bg: #05060b;
      --bg-2: #0b0f1d;
      --panel: rgba(13, 17, 31, 0.72);
      --panel-2: rgba(255,255,255,0.055);
      --border: rgba(255,255,255,0.105);
      --border-strong: rgba(255,255,255,0.18);
      --text: #f7f8ff;
      --soft: #b8c1d7;
      --muted: #818ca5;
      --blue: #7db5ff;
      --violet: #b596ff;
      --green: #75e3a8;
      --gold: #f5cf78;
      --rose: #ff8fbd;
      --shadow: 0 28px 80px rgba(0,0,0,0.45);
      --radius-xl: 36px;
      --radius-lg: 26px;
      --radius-md: 18px;
    }

html { scroll-behavior: smooth; }

body {
      margin: 0;
      min-height: 100vh;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 18% 14%, rgba(125,181,255,0.22), transparent 26%),
        radial-gradient(circle at 86% 18%, rgba(181,150,255,0.18), transparent 25%),
        radial-gradient(circle at 50% 94%, rgba(117,227,168,0.09), transparent 32%),
        linear-gradient(180deg, #131827 0%, var(--bg) 58%, #030409 100%);
      overflow-x: hidden;
    }

body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at 50% 28%, black 0%, transparent 72%);
      opacity: 0.5;
    }

body::after {
      content: "あ　ア　言　音　読　書　学";
      position: fixed;
      inset: auto -3vw 3vh auto;
      z-index: 0;
      pointer-events: none;
      color: rgba(255,255,255,0.025);
      font-size: clamp(7rem, 18vw, 17rem);
      font-weight: 900;
      letter-spacing: -0.12em;
      white-space: nowrap;
      transform: rotate(-7deg);
    }

a { color: inherit; }

.shell {
      width: min(1240px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

.topbar {
      position: sticky;
      top: 14px;
      z-index: 20;
      margin: 14px auto 0;
      width: min(1240px, calc(100% - 32px));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px;
      border-radius: 999px;
      background: rgba(8, 11, 21, 0.58);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 18px 48px rgba(0,0,0,0.24);
    }

.brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: 0;
    }

.brand-mark {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: -0.08em;
      background:
        radial-gradient(circle at 26% 22%, rgba(255,255,255,0.22), transparent 28%),
        linear-gradient(135deg, rgba(125,181,255,0.95), rgba(181,150,255,0.95));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 26px rgba(0,0,0,0.26);
    }

.brand-text {
      display: grid;
      gap: 2px;
    }

.brand-name {
      font-size: 17px;
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1;
    }

.brand-sub {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.13em;
    }

.nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

.nav-link, .profile-trigger {
      border: 1px solid transparent;
      background: transparent;
      color: var(--soft);
      text-decoration: none;
      border-radius: 999px;
      padding: 10px 14px;
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
    }

.nav-link:hover, .profile-trigger:hover {
      color: white;
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.08);
      transform: translateY(-1px);
    }

.profile-trigger {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.08);
    }

.profile-dot {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-size: 11px;
      background: linear-gradient(135deg, var(--green), var(--blue));
      color: #061018;
      font-weight: 900;
      overflow: hidden;
    }

.profile-dot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

.hero {
      min-height: calc(100vh - 74px);
      display: grid;
      place-items: center;
      padding: 84px 0 56px;
      position: relative;
    }

.atlas-card {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: clamp(28px, 5vw, 58px);
      padding: clamp(26px, 5vw, 68px);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.032)),
        radial-gradient(circle at 82% 16%, rgba(125,181,255,0.18), transparent 30%),
        radial-gradient(circle at 12% 84%, rgba(117,227,168,0.10), transparent 26%),
        rgba(8, 11, 21, 0.72);
      border: 1px solid rgba(255,255,255,0.105);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

.atlas-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 32%),
        radial-gradient(circle at 68% 44%, rgba(245,207,120,0.08), transparent 26%);
      mask-image: linear-gradient(180deg, black, transparent 78%);
    }

.hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(300px, 0.62fr);
      gap: clamp(28px, 5vw, 70px);
      align-items: end;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #dce7ff;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.055);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 22px;
    }

.eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 18px rgba(117,227,168,0.76);
    }

h1 {
      margin: 0;
      max-width: 9.6ch;
      font-size: clamp(4rem, 10vw, 9.4rem);
      line-height: 0.84;
      letter-spacing: -0.085em;
      text-wrap: balance;
    }

.hero-line {
      margin: 24px 0 0;
      max-width: 680px;
      color: var(--soft);
      font-size: clamp(1.05rem, 1.9vw, 1.35rem);
      line-height: 1.72;
    }

.hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 34px;
    }

.button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      border-radius: 999px;
      padding: 14px 19px;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.055);
      color: var(--text);
      font-weight: 900;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }

.button:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,0.20);
      background: rgba(255,255,255,0.08);
      box-shadow: 0 18px 30px rgba(0,0,0,0.22);
    }

.button.primary {
      background: linear-gradient(135deg, var(--gold), #fff0bf);
      color: #0a0d15;
      border-color: rgba(255,255,255,0.24);
    }

.constellation {
      min-height: 520px;
      position: relative;
      border-radius: 34px;
      background:
        radial-gradient(circle at 50% 46%, rgba(255,255,255,0.10), transparent 8%),
        radial-gradient(circle at 20% 26%, rgba(125,181,255,0.26), transparent 8%),
        radial-gradient(circle at 80% 22%, rgba(181,150,255,0.22), transparent 8%),
        radial-gradient(circle at 28% 78%, rgba(117,227,168,0.18), transparent 8%),
        radial-gradient(circle at 76% 74%, rgba(245,207,120,0.18), transparent 8%),
        rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
    }

.constellation::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(32deg, transparent 0 22%, rgba(255,255,255,0.13) 22.2%, transparent 22.6% 100%),
        linear-gradient(148deg, transparent 0 20%, rgba(255,255,255,0.10) 20.2%, transparent 20.55% 100%),
        linear-gradient(78deg, transparent 0 43%, rgba(255,255,255,0.12) 43.2%, transparent 43.55% 100%),
        linear-gradient(118deg, transparent 0 62%, rgba(255,255,255,0.10) 62.2%, transparent 62.55% 100%);
      opacity: 0.45;
    }

.node {
      position: absolute;
      width: 96px;
      height: 96px;
      border-radius: 30px;
      display: grid;
      place-items: center;
      text-align: center;
      font-size: 38px;
      font-weight: 900;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 18px 44px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.10);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

.node span {
      display: block;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--soft);
      margin-top: 6px;
    }

.node.one { top: 11%; left: 12%; }

.node.two { top: 15%; right: 10%; }

.node.three { top: 42%; left: 39%; width: 124px; height: 124px; border-radius: 38px; font-size: 50px; }

.node.four { bottom: 10%; left: 16%; }

.node.five { bottom: 12%; right: 13%; }

.branches {
      padding: 18px 0 70px;
    }

.section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      margin-bottom: 20px;
    }

.section-kicker {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 10px;
    }

h2 {
      margin: 0;
      font-size: clamp(2.2rem, 5vw, 4.2rem);
      line-height: 0.93;
      letter-spacing: -0.06em;
    }

.section-note {
      color: var(--soft);
      max-width: 420px;
      font-size: 15px;
      line-height: 1.65;
      margin: 0;
      text-align: right;
    }

.branch-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

.branch {
      position: relative;
      overflow: hidden;
      min-height: 370px;
      border-radius: 34px;
      padding: 26px;
      text-decoration: none;
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.09);
      box-shadow: 0 24px 60px rgba(0,0,0,0.26);
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

.branch:hover {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,0.20);
      box-shadow: 0 32px 70px rgba(0,0,0,0.34);
    }

.branch::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.9;
    }

.branch.kana::before {
      background:
        radial-gradient(circle at 88% 12%, rgba(125,181,255,0.30), transparent 34%),
        radial-gradient(circle at 14% 86%, rgba(117,227,168,0.16), transparent 28%);
    }

.branch.words::before {
      background:
        radial-gradient(circle at 90% 12%, rgba(255,143,189,0.24), transparent 34%),
        radial-gradient(circle at 14% 86%, rgba(245,207,120,0.14), transparent 28%);
    }

.branch.future {
      cursor: default;
      opacity: 0.78;
    }

.branch.future::before {
      background:
        radial-gradient(circle at 90% 12%, rgba(181,150,255,0.16), transparent 34%),
        radial-gradient(circle at 14% 86%, rgba(255,255,255,0.06), transparent 28%);
    }

.branch-top, .branch-bottom {
      position: relative;
      z-index: 1;
    }

.branch-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
      margin-bottom: 26px;
    }

.branch-label {
      color: rgba(255,255,255,0.68);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

.branch-chip {
      color: #f4f7ff;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.075);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

.branch-title {
      font-size: clamp(2.5rem, 6vw, 5.4rem);
      line-height: 0.86;
      letter-spacing: -0.08em;
      font-weight: 900;
      max-width: 8ch;
    }

.branch-copy {
      color: var(--soft);
      max-width: 34ch;
      font-size: 15px;
      line-height: 1.62;
      margin-top: 18px;
    }

.branch-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding-top: 24px;
      margin-top: 34px;
      border-top: 1px solid rgba(255,255,255,0.08);
      color: white;
      font-weight: 900;
    }

.branch-arrow {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.075);
      border: 1px solid rgba(255,255,255,0.11);
      flex: 0 0 auto;
    }

.future-row {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

.future-tile {
      min-height: 150px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
      color: var(--soft);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

.future-tile strong {
      color: #f2f5ff;
      font-size: 22px;
      letter-spacing: -0.04em;
    }

.future-tile span {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: 900;
    }

.footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      padding: 26px 0 38px;
      color: var(--muted);
      font-size: 13px;
    }

.footer strong { color: var(--soft); }

.drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(0,0,0,0.52);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }

.drawer-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

.profile-drawer {
      position: fixed;
      top: 16px;
      right: 16px;
      bottom: 16px;
      z-index: 90;
      width: min(420px, calc(100vw - 32px));
      transform: translateX(calc(100% + 24px));
      transition: transform 0.22s ease;
      border-radius: 32px;
      background:
        radial-gradient(circle at 88% 10%, rgba(125,181,255,0.18), transparent 30%),
        linear-gradient(180deg, rgba(19,24,39,0.96), rgba(7,9,18,0.98));
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 30px 90px rgba(0,0,0,0.52);
      padding: 22px;
      overflow-y: auto;
    }

.profile-drawer.open {
      transform: translateX(0);
    }

.drawer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }

.drawer-title {
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

.close-btn {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.05);
      color: white;
      cursor: pointer;
      font-size: 22px;
    }

.profile-card {
      border-radius: 26px;
      padding: 18px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.085);
      margin-bottom: 14px;
    }

.profile-user {
      display: flex;
      gap: 14px;
      align-items: center;
    }

.profile-avatar {
      width: 66px;
      height: 66px;
      border-radius: 22px;
      object-fit: cover;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      display: none;
    }

.profile-name {
      font-weight: 900;
      font-size: 19px;
      letter-spacing: -0.03em;
      margin-bottom: 5px;
    }

.profile-email, .profile-status {
      color: var(--soft);
      font-size: 13px;
      line-height: 1.5;
    }

.profile-status { margin-top: 12px; color: var(--muted); }

.profile-actions {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

.profile-actions button, .profile-actions a {
      width: 100%;
      text-align: center;
      text-decoration: none;
      border-radius: 16px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.055);
      color: var(--text);
      font: inherit;
      font-weight: 900;
      cursor: pointer;
    }

.profile-actions .primary {
      background: linear-gradient(135deg, rgba(125,181,255,0.28), rgba(181,150,255,0.20));
      border-color: rgba(125,181,255,0.26);
    }

.profile-note {
      padding: 14px;
      border-radius: 18px;
      color: var(--soft);
      font-size: 13px;
      line-height: 1.6;
      background: rgba(0,0,0,0.18);
      border: 1px solid rgba(255,255,255,0.06);
    }

@media (max-width: 980px) {
      .topbar { border-radius: 24px; }
      .nav-link { display: none; }
      .hero-grid, .branch-grid, .future-row { grid-template-columns: 1fr; }
      .constellation { min-height: 380px; }
      .section-head { align-items: start; flex-direction: column; }
      .section-note { text-align: left; }
    }

@media (max-width: 640px) {
      .topbar { width: calc(100% - 20px); top: 10px; }
      .shell { width: calc(100% - 20px); }
      .brand-sub { display: none; }
      .hero { padding-top: 42px; }
      .atlas-card { padding: 22px; }
      .hero-actions .button { width: 100%; }
      .constellation { display: none; }
      .branch { min-height: 300px; }
      .future-row { display: none; }
      .footer { flex-direction: column; align-items: flex-start; }
    }

.about-strip{padding:0 0 46px}

.about-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch;border-radius:34px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028));border:1px solid rgba(255,255,255,.10);box-shadow:0 24px 70px rgba(0,0,0,.30);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

.about-copy{display:grid;align-content:center;gap:12px}

.about-copy h2{font-size:clamp(2rem,4vw,3.8rem);letter-spacing:-.055em}

.about-copy p{margin:0;color:var(--soft);line-height:1.65;max-width:54ch}

.about-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.about-point{min-height:150px;border-radius:24px;padding:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}

.about-point strong{display:block;font-size:18px;margin-bottom:8px}

.about-point span{color:var(--muted);font-size:13px;line-height:1.5}

@media(max-width:860px){.about-card,.about-points{grid-template-columns:1fr}.about-strip{padding-bottom:28px}}

@media (min-width: 761px) {
  .topbar { margin-top: 10px !important; }
  .hero {
    min-height: auto !important;
    padding: clamp(28px, 4.2vh, 42px) 0 28px !important;
    display: grid !important;
    place-items: start center !important;
  }
  .atlas-card {
    padding: clamp(30px, 3.8vw, 52px) !important;
  }
  .hero-grid {
    gap: clamp(24px, 4vw, 52px) !important;
    align-items: center !important;
  }
  .eyebrow {
    margin-bottom: clamp(14px, 1.9vw, 18px) !important;
    padding: 8px 13px !important;
  }
  h1 {
    font-size: clamp(4.2rem, 7.6vw, 7.7rem) !important;
    line-height: 0.86 !important;
  }
  .hero-line {
    margin-top: clamp(16px, 2vw, 22px) !important;
    line-height: 1.58 !important;
  }
  .hero-actions {
    margin-top: clamp(20px, 2.6vw, 28px) !important;
  }
  .constellation {
    transform: scale(0.92);
    transform-origin: center;
  }
}

@media (min-width: 1181px) and (max-height: 900px) {
  .hero { padding-top: 24px !important; }
  .atlas-card { padding: clamp(28px, 3.2vw, 44px) !important; }
  h1 { font-size: clamp(4rem, 6.7vw, 7rem) !important; }
  .hero-line { font-size: clamp(1rem, 1.45vw, 1.18rem) !important; }
  .constellation { transform: scale(0.86); }
}

@media (max-width: 760px) {
  body {
    background-color: #05060b !important;
  }
  .topbar {
    position: relative !important;
    top: 0 !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto 8px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 66px !important;
    border-radius: 26px !important;
  }
  .brand { min-width: 0 !important; gap: 10px !important; }
  .brand-mark { width: 48px !important; height: 48px !important; border-radius: 16px !important; flex: 0 0 auto !important; }
  .brand-name { font-size: 1.18rem !important; white-space: nowrap !important; }
  .brand-sub { display: none !important; }
  .nav {
    display: flex !important;
    width: auto !important;
    grid-column: auto !important;
    overflow: visible !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }
  .nav-link { display: none !important; }
  .profile-trigger {
    width: auto !important;
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 999px !important;
  }
  .profile-trigger > span:not(.profile-dot) { display: none !important; }
  .profile-dot { width: 38px !important; height: 38px !important; }
  .hero {
    min-height: auto !important;
    display: block !important;
    padding: 8px 0 22px !important;
  }
  .atlas-card {
    padding: 22px !important;
    border-radius: 30px !important;
  }
  .hero-grid { display: block !important; }
  .eyebrow { margin-bottom: 18px !important; }
  h1, .hero-title, .main-title {
    font-size: clamp(3.35rem, 16vw, 5.1rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.07em !important;
  }
  .hero-line {
    margin-top: 20px !important;
    font-size: clamp(1.05rem, 5vw, 1.32rem) !important;
    line-height: 1.48 !important;
  }
  .hero-actions { margin-top: 24px !important; }
  .hero-actions .button { min-height: 58px !important; }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .hero { padding-top: 18px !important; }
  .atlas-card { padding: clamp(28px, 4vw, 42px) !important; }
  h1, .hero-title, .main-title { font-size: clamp(4.2rem, 8vw, 6.6rem) !important; }
}