:root {
  --teal:#7be5ef;
  --deep:#001826;
  --line:rgba(123,229,239,.35);
  --white:#f7fbff;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:#00131e;
  color:var(--white);
  font-family: Georgia, "Times New Roman", serif;
}

.page {
  min-height:100vh;
}

.artboard {
  position:relative;
  width:100%;
  aspect-ratio:1536/1024;
  overflow:hidden;
  background:#00131e;
}

.background {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
}

.hotspot {
  position:absolute;
  display:block;
  z-index:5;
  border-radius:10px;
  outline:none;
}

.hotspot:hover,
.hotspot:focus-visible {
  box-shadow:0 0 0 2px rgba(123,229,239,.88), 0 0 22px rgba(123,229,239,.28);
  background:rgba(123,229,239,.05);
}

/* Navigation hotspots */
.nav-home    { left:61.2%; top:2.2%; width:4.4%; height:4.6%; }
.nav-library { left:66.7%; top:2.2%; width:5.0%; height:4.6%; }
.nav-media   { left:73.3%; top:2.2%; width:4.4%; height:4.6%; }
.nav-contact { left:80.5%; top:2.2%; width:5.4%; height:4.6%; }
.nav-support { left:88.0%; top:2.2%; width:5.6%; height:4.6%; }

/* Meeting panel hotspots */
.join  { left:36.8%; top:54.8%; width:26.3%; height:6.8%; }
.dial  { left:36.8%; top:63.4%; width:26.3%; height:6.5%; }
.phone { left:66.7%; top:57.5%; width:16.0%; height:4.8%; }

/* Bottom cards */
.library-card { left:10.4%; top:76.0%; width:17.8%; height:15.0%; }
.media-card   { left:30.0%; top:76.0%; width:18.3%; height:15.0%; }
.contact-card { left:50.2%; top:76.0%; width:20.4%; height:15.0%; }
.support-card { left:70.8%; top:76.0%; width:19.0%; height:15.0%; }

/* On desktop the image itself is the design. */
.mobile-actions,
.content-section {
  display:none;
}


.mobile-site { display:none; }

@media (max-width:760px) {
  html, body {
    background:#00131e;
    overflow-x:hidden;
  }

  /* Desktop artwork is preserved for desktop, hidden only on phones. */
  .artboard { display:none; }

  .mobile-site {
    display:block;
    min-height:100vh;
    position:relative;
    isolation:isolate;
    padding-bottom:28px;
    color:#f6fbfd;
    background:#00131e;
  }

  /* Re-use the approved artwork itself as the atmosphere.
     Blur/darken it just enough that the baked desktop text disappears
     while the stars, Milky Way, mountains and lake remain visible. */
  .mobile-art-bg {
    position:fixed;
    inset:-18px;
    z-index:-3;
    background:
      url("assets/effortless-friends-home.png") center top / auto 100vh no-repeat;
    filter:blur(2.2px) brightness(.58) saturate(1.08);
    transform:scale(1.045);
  }

  .mobile-site::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
      radial-gradient(circle at 50% 16%, rgba(43,206,222,.22), transparent 25%),
      linear-gradient(180deg,
        rgba(0,14,24,.08) 0%,
        rgba(0,20,31,.20) 28%,
        rgba(0,21,33,.58) 63%,
        rgba(0,15,24,.92) 100%);
  }

  .mobile-header {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:15px 16px 8px;
    color:rgba(247,251,255,.93);
  }

  .mobile-logo-mark {
    width:28px;
    height:28px;
    border:1px solid rgba(214,245,248,.75);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#dff9fb;
  }

  .mobile-name {
    font-size:.79rem;
    letter-spacing:.01em;
  }

  .mobile-top-link {
    color:#c9f5f8 !important;
    text-decoration:none;
    font-size:.75rem;
    border-bottom:1px solid rgba(201,245,248,.45);
    padding-bottom:2px;
  }

  .mobile-hero {
    text-align:center;
    padding:24px 20px 20px;
  }

  .mobile-ah {
    font-size:5.4rem;
    line-height:.8;
    margin:4px 0 18px;
    color:white;
    text-shadow:
      0 0 18px rgba(122,232,241,.72),
      0 0 44px rgba(28,155,178,.32);
  }

  .mobile-hero h1 {
    margin:0;
    font-size:clamp(2.25rem, 10.5vw, 3.25rem);
    line-height:.98;
    font-weight:400;
    letter-spacing:-.025em;
    text-shadow:0 3px 24px rgba(0,0,0,.42);
  }

  .mobile-tagline {
    margin:14px 0 12px;
    color:#8cecf3;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    text-transform:uppercase;
    letter-spacing:.34em;
    font-size:.75rem;
  }

  .mobile-ornament {
    width:min(230px,72vw);
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    gap:9px;
  }

  .mobile-ornament span {
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(137,234,241,.72));
  }

  .mobile-ornament span:last-child {
    background:linear-gradient(90deg,rgba(137,234,241,.72),transparent);
  }

  .mobile-ornament i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#8cecf3;
    box-shadow:0 0 10px rgba(140,236,243,.9);
  }

  .mobile-intro {
    max-width:34rem;
    margin:0 auto;
    color:rgba(240,248,250,.93);
    font-size:.96rem;
    line-height:1.48;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
  }

  .mobile-panel {
    width:calc(100% - 26px);
    max-width:520px;
    margin:8px auto 18px;
    padding:18px;
    border-radius:18px;
    background:
      linear-gradient(180deg,rgba(4,52,70,.90),rgba(2,31,46,.93));
    border:1px solid rgba(151,239,246,.48);
    box-shadow:
      0 18px 50px rgba(0,0,0,.30),
      inset 0 1px rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
  }

  .mobile-panel-heading {
    margin:0 0 13px;
    color:#a0eef4;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    text-transform:uppercase;
    letter-spacing:.24em;
    font-size:.70rem;
  }

  .mobile-schedule {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-bottom:15px;
  }

  .mobile-schedule > div {
    min-height:62px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:7px 4px;
    border:1px solid rgba(138,231,239,.16);
    border-radius:9px;
    background:rgba(255,255,255,.025);
  }

  .mobile-schedule b {
    font-weight:400;
    font-size:.94rem;
  }

  .mobile-schedule span {
    display:block;
    margin-top:3px;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    color:rgba(225,243,246,.70);
    font-size:.60rem;
  }

  .mobile-btn {
    min-height:58px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:10px 0;
    padding:12px 16px;
    border-radius:10px;
    color:white !important;
    text-decoration:none;
    font-size:1.02rem;
    transition:transform .16s ease, box-shadow .16s ease;
  }

  .mobile-btn:visited { color:white !important; }

  .mobile-btn.primary {
    background:linear-gradient(180deg,#10aabb,#078ba0);
    border:1px solid rgba(116,246,252,.50);
    box-shadow:0 9px 26px rgba(0,0,0,.18);
  }

  .mobile-btn.secondary {
    background:rgba(0,21,32,.26);
    border:1px solid rgba(178,245,249,.88);
  }

  .mobile-btn:active { transform:translateY(1px); }

  .btn-icon {
    color:#dffbfe;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:.84rem;
  }

  .mobile-phone {
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid rgba(139,231,239,.16);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px 18px;
    font-size:.90rem;
  }

  .mobile-phone a {
    color:#e8fcfe !important;
    text-decoration:none;
  }

  .mobile-cards {
    width:calc(100% - 26px);
    max-width:520px;
    margin:0 auto 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .mobile-cards a {
    min-height:122px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:14px 10px;
    text-align:center;
    color:white !important;
    text-decoration:none;
    border:1px solid rgba(140,232,240,.20);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(4,45,61,.80),rgba(2,28,42,.84));
    backdrop-filter:blur(9px);
    box-shadow:0 10px 30px rgba(0,0,0,.14);
  }

  .card-icon {
    color:#8cecf3;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:1.6rem;
    line-height:1;
    margin-bottom:8px;
  }

  .mobile-cards strong {
    font-size:1.04rem;
    font-weight:400;
  }

  .mobile-cards small {
    margin-top:5px;
    max-width:145px;
    color:rgba(230,245,248,.72);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:.63rem;
    line-height:1.35;
    overflow-wrap:anywhere;
  }

  .mobile-section {
    width:calc(100% - 26px);
    max-width:520px;
    margin:0 auto 12px;
    padding:20px 18px;
    border:1px solid rgba(140,232,240,.17);
    border-radius:15px;
    background:linear-gradient(180deg,rgba(3,40,56,.78),rgba(1,27,40,.83));
    backdrop-filter:blur(9px);
  }

  .mobile-section h2 {
    margin:0 0 7px;
    font-size:1.45rem;
    font-weight:400;
  }

  .mobile-section p:last-child {
    margin:0;
    color:rgba(234,246,248,.82);
    font-size:.92rem;
    line-height:1.48;
  }

  .mobile-footer {
    width:calc(100% - 34px);
    margin:20px auto 0;
    display:flex;
    align-items:center;
    gap:10px;
    color:#76dce5;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.57rem;
    text-align:center;
  }

  .mobile-footer span {
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(120,223,232,.62));
  }

  .mobile-footer span:last-child {
    background:linear-gradient(90deg,rgba(120,223,232,.62),transparent);
  }

  .mobile-footer p { margin:0; }
}