/* Solin homepage — atmospheric public landing page. */

.homepage {
  --home-bg: #050a11;
  --home-panel: #0a121d;
  --home-panel-soft: #0d1826;
  --home-line: rgba(151, 191, 232, 0.14);
  --home-blue: #76b9f4;
  --home-blue-strong: #4c9ee9;
  --home-copy: #f3f7fb;
  background: var(--home-bg);
  color: var(--home-copy);
  overflow: clip;
}

.home-hero {
  --hero-scene-height: max(780px, 100svh);
  --hero-runway: clamp(280px, 42svh, 420px);
  position: relative;
  min-height: calc(var(--hero-scene-height) + var(--hero-runway));
  background: #06101c;
}

.home-hero__scene {
  position: sticky;
  top: 0;
  height: var(--hero-scene-height);
  min-height: var(--hero-scene-height);
  contain: paint;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  justify-items: center;
  overflow: clip;
  padding: calc(var(--nav-h) + 4rem) 1.25rem 0;
  background: #06101c;
}

.home-hero__scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 8;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(transparent, var(--home-bg));
}

.home-hero__sky,
.home-hero__aura {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.home-hero__sky {
  inset: -6% -3%;
  background-image: linear-gradient(180deg, rgba(1, 6, 12, 0.1), rgba(4, 11, 19, 0.08) 55%, rgba(4, 10, 16, 0.72)), url('https://pub-4b0000ee456841d28a03016c010667b1.r2.dev/night-landscape.webp');
  background-position: center bottom;
  background-size: cover;
  will-change: transform;
}

.home-hero__aura {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 42%, rgba(85, 160, 226, 0.16), transparent 27%),
    linear-gradient(180deg, rgba(1, 5, 10, 0.18), transparent 48%);
}

.home-hero__copy {
  position: relative;
  z-index: 10;
  min-width: 0;
  width: min(860px, 100%);
  max-width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  will-change: transform;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  max-width: 100%;
  color: #a9cae8;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--home-blue);
  box-shadow: 0 0 14px rgba(118, 185, 244, .75);
}

.home-hero h1 {
  max-width: 900px;
  margin: 1.15rem 0 .9rem;
  font-size: clamp(2.65rem, 6.5vw, 6rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 4px 32px rgba(0, 0, 0, .24);
}

.home-hero__copy > p {
  max-width: 650px;
  color: rgba(226, 237, 247, .73);
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  line-height: 1.7;
}

.home-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.9rem;
}

.button-secondary {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border: 1px solid rgba(221, 235, 248, .22);
  border-radius: 11px;
  background: rgba(5, 13, 22, .42);
  color: #e8f1fa;
  font-size: .83rem;
  font-weight: 500;
  backdrop-filter: blur(12px);
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}

.button-secondary:hover {
  border-color: rgba(221, 235, 248, .42);
  background: rgba(16, 30, 45, .72);
  transform: translateY(-1px);
}

.home-hero__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .85rem;
  color: rgba(211, 228, 243, .58);
  font-size: .72rem;
}

.home-hero__meta a {
  color: rgba(226, 238, 249, .82);
  border-bottom: 1px solid rgba(226, 238, 249, .25);
}

.home-hero__product {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: min(66%, 710px);
  bottom: auto;
  width: min(850px, 70vw);
  transform: translate3d(-50%, var(--parallax-y, 0), 0);
  transform-origin: center bottom;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .56));
  will-change: transform;
}

.product-device {
  position: relative;
  z-index: 1;
}

.product-device__bezel {
  position: relative;
  padding: clamp(6px, .62vw, 10px);
  border: 1px solid rgba(151, 180, 203, .34);
  border-radius: clamp(13px, 1.25vw, 20px);
  background: linear-gradient(145deg, #202a33, #070b10 58%, #18232d);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .82),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(255, 255, 255, .05);
}

.product-device__camera {
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 50%;
  width: clamp(34px, 4vw, 56px);
  height: clamp(4px, .45vw, 7px);
  border-radius: 0 0 999px 999px;
  background: #05080c;
  transform: translateX(-50%);
}

.product-device__camera::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(64, 132, 174, .58);
  box-shadow: 0 0 5px rgba(70, 158, 211, .42);
  transform: translateX(-50%);
}

.product-device__screen {
  position: relative;
  overflow: hidden;
  border-radius: clamp(8px, .78vw, 13px);
  background: #090e14;
}

.product-device__screen img {
  display: block;
  width: 100%;
  height: auto;
}

.product-device__base {
  position: relative;
  left: -4%;
  width: 108%;
  height: clamp(8px, 1vw, 14px);
  border-radius: 0 0 45% 45% / 0 0 100% 100%;
  background: linear-gradient(180deg, #33414c 0, #111920 44%, #05080b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 10px 20px rgba(0, 0, 0, .44);
}

.product-device__base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 44%;
  width: 12%;
  height: 34%;
  border-radius: 0 0 6px 6px;
  background: rgba(2, 5, 8, .72);
}

.product-glow {
  position: absolute;
  inset: 18% 8% 6%;
  border-radius: 50%;
  background: rgba(66, 147, 218, .22);
  filter: blur(70px);
}

.forest {
  --forest-height: max(clamp(700px, 92svh, 900px), 46vw);
  --forest-reveal: clamp(380px, 52svh, 440px);
  position: absolute;
  left: 0;
  bottom: calc(var(--forest-reveal) - var(--forest-height));
  z-index: 4;
  width: 100%;
  height: var(--forest-height);
  max-width: none;
  pointer-events: none;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transform-origin: center bottom;
  will-change: transform;
}

.forest--near {
  z-index: 7;
}

.forest--near img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: brightness(.58) saturate(.72);
}

.forest--near::before {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 7, 13, 0),
    rgba(2, 7, 13, .28) 38%,
    rgba(2, 7, 13, .82) 78%,
    #02070d 100%
  );
}

.forest--near::after {
  content: "";
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  z-index: 1;
  width: 100%;
  height: var(--hero-scene-height);
  background: #02070d;
}

.download-picker {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  border: 1px solid rgba(210, 231, 250, .32);
  border-radius: 11px;
  background: #eaf4fc;
  color: #07121e;
  box-shadow: 0 14px 40px rgba(2, 9, 17, .25);
}

.download-picker__primary {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 0 1.1rem;
  border-radius: 10px 0 0 10px;
  font-size: .84rem;
  font-weight: 650;
  white-space: nowrap;
}

.download-picker__platform {
  position: relative;
  width: 18px;
  height: 18px;
}

.download-picker__platform > span {
  position: absolute;
  inset: 0;
  display: none;
}

.download-picker__platform > .is-active { display: block; }
.download-picker svg { width: 18px; height: 18px; }

.download-picker__toggle {
  width: 42px;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(6, 20, 34, .13);
  border-radius: 0 10px 10px 0;
  color: #07121e;
  transition: background var(--fast);
}

.download-picker__toggle:hover,
.download-picker.is-open .download-picker__toggle { background: rgba(27, 88, 141, .1); }
.download-picker__toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; }

.download-picker__menu {
  position: fixed;
  z-index: 500;
  top: var(--picker-top, 0);
  left: var(--picker-left, 0);
  width: min(330px, calc(100vw - 1rem));
  padding: .45rem;
  border: 1px solid rgba(190, 217, 240, .18);
  border-radius: 13px;
  background: rgba(8, 17, 27, .97);
  color: var(--home-copy);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.98);
  transform-origin: top center;
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}

.download-picker__menu.is-open { opacity: 1; visibility: visible; transform: none; }

.download-picker__option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem;
  border-radius: 9px;
  color: #dceaf5;
  text-align: left;
}

.download-picker__option:hover,
.download-picker__option.is-active { background: rgba(92, 163, 224, .12); }
.download-picker__option-icon { width: 19px; flex: 0 0 19px; }
.download-picker__option strong { display: block; font-size: .8rem; font-weight: 600; }
.download-picker__option small { display: block; margin-top: .1rem; color: #8297a9; font-size: .65rem; }

.home-section {
  position: relative;
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding-block: clamp(5.5rem, 10vw, 9rem);
}

.section-heading {
  max-width: 760px;
  margin: 0 auto clamp(2.4rem, 5vw, 4rem);
  text-align: center;
}

.section-heading--left { max-width: none; margin-left: 0; text-align: left; }

.section-heading h2,
.community h2,
.home-finale h2 {
  margin: .85rem 0 .8rem;
  font-size: clamp(2rem, 4.2vw, 4rem);
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.section-heading p,
.community__copy > p {
  color: #8fa4b7;
  font-size: .95rem;
  line-height: 1.75;
}

.resource-section::before,
.community::before {
  content: "";
  position: absolute;
  inset: 12% -18% auto;
  height: 420px;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(38, 101, 159, .13), transparent 66%);
  pointer-events: none;
}

.resource-tabs {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1rem;
}

.resource-tabs__list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .55rem;
  border: 1px solid var(--home-line);
  border-radius: 16px;
  background: rgba(9, 18, 29, .72);
  align-self: start;
}

.resource-tabs__list button {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .9rem .85rem;
  border-radius: 10px;
  color: #788da0;
  font-size: .76rem;
  text-align: left;
  transition: color var(--fast), background var(--fast);
}

.resource-tabs__list button span {
  color: #4d6880;
  font-family: var(--font-mono);
  font-size: .62rem;
}

.resource-tabs__list button[aria-selected="true"] {
  color: #eff7ff;
  background: rgba(89, 158, 220, .12);
}

.resource-tabs__stage {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 19px;
  background: #07101a;
  box-shadow: 0 38px 80px rgba(0, 0, 0, .26);
}

.resource-tabs__stage article { animation: panel-in .38s ease both; }

.resource-tabs__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--home-line);
  background: #03070c;
}

.resource-tabs__media > video,
.resource-tabs__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-tabs__copy { padding: 1.45rem 1.6rem 1.65rem; }
.resource-tabs__stage h3 { font-size: 1rem; font-weight: 550; letter-spacing: -.02em; }
.resource-tabs__stage p { max-width: 760px; margin-top: .45rem; color: #879caf; font-size: .78rem; line-height: 1.7; }

@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }

.possibilities { padding-top: 3rem; }
.possibility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.possibility-card {
  min-height: 190px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--home-line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(14, 28, 43, .86), rgba(7, 15, 24, .9));
  transition: border-color var(--mid), transform var(--mid);
}

.possibility-card:hover { border-color: rgba(118, 185, 244, .3); transform: translateY(-3px); }
.possibility-card h3 { max-width: 170px; color: #dbe9f5; font-size: .92rem; font-weight: 500; line-height: 1.4; }
.possibility-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(126, 186, 238, .18);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, rgba(137, 199, 250, .32), rgba(37, 102, 160, .08));
  box-shadow: inset 0 0 16px rgba(88, 162, 225, .08), 0 0 24px rgba(50, 132, 203, .08);
}

.possibility-card__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(190, 222, 247, .82);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(87, 168, 232, .2));
}

.possibility-card__icon svg [data-icon-fill] {
  fill: rgba(190, 222, 247, .82);
  stroke: none;
}

.possibility-card__icon--timer svg { stroke-width: 2; }

.community {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
  border-top: 1px solid var(--home-line);
}

.community__copy > p { max-width: 530px; }
.community__principles { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.community__principles span,
.language-cloud span {
  border: 1px solid rgba(135, 182, 222, .15);
  border-radius: 999px;
  background: rgba(14, 28, 42, .64);
  color: #9db1c3;
  font-size: .68rem;
}
.community__principles span { padding: .52rem .75rem; }
.language-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.language-cloud span { padding: .58rem .8rem; }

.reach { border-top: 1px solid var(--home-line); }
.reach__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid rgba(118, 185, 244, .18);
  border-radius: 18px;
  background: #06131c;
}
.reach__map { min-height: 460px; }
.reach__map[hidden] + .reach__list { grid-column: 1 / -1; border-left: 0; }
.reach__list { padding: 1rem; border-left: 1px solid var(--home-line); align-self: center; }
.reach__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .4rem;
  border-bottom: 1px solid rgba(145, 189, 226, .08);
  color: #93a8b9;
  font-size: .7rem;
}
.reach__list strong { color: #d8ebfb; font-family: var(--font-mono); font-weight: 500; }

.home-finale {
  position: relative;
  min-height: clamp(700px, 82vh, 900px);
  isolation: isolate;
  display: grid;
  place-items: start center;
  overflow: clip;
  padding: clamp(6.5rem, 10vw, 9rem) 1.25rem 19rem;
  background:
    radial-gradient(circle at 50% 44%, rgba(61, 140, 211, .12), transparent 27%),
    linear-gradient(180deg, var(--home-bg), #030911 68%, #02070d);
  text-align: center;
}

.home-finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .52;
  background-image:
    radial-gradient(circle at 14% 23%, rgba(183, 219, 250, .8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 79% 18%, rgba(126, 190, 244, .72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 65% 38%, rgba(188, 220, 247, .6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 29% 46%, rgba(117, 181, 235, .55) 0 1px, transparent 1.5px);
}

.home-finale__glow {
  position: absolute;
  inset: auto 50% 0;
  z-index: -1;
  width: min(760px, 72vw);
  height: 66%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(47, 127, 196, .2), transparent 65%);
  pointer-events: none;
}

.home-finale__content {
  position: relative;
  z-index: 3;
  width: min(760px, 100%);
}

.home-finale .download-picker { margin-inline: auto; }

.home-finale__details {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem .65rem;
  margin-top: 1rem;
  color: #7890a4;
  font-size: .7rem;
}

.home-finale__details a {
  color: #a9bfd2;
  border-bottom: 1px solid rgba(169, 191, 210, .25);
  transition: color var(--fast), border-color var(--fast);
}

.home-finale__details a:hover {
  color: #d8e9f8;
  border-color: rgba(216, 233, 248, .5);
}

.home-finale__landscape {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -3.5rem;
  width: max(1200px, 100%);
  transform: translate3d(-50%, var(--parallax-y, 0), 0);
  pointer-events: none;
  will-change: transform;
}

.home-finale__landscape img {
  width: 100%;
  height: auto;
  max-width: none;
  filter: brightness(.72) saturate(.82);
}

.is-homepage .site-footer {
  position: relative;
  z-index: 5;
  margin-top: 0;
  padding-top: 2.35rem;
  padding-bottom: 2.75rem;
  border-top-color: rgba(132, 178, 217, .11);
  background: #02070d;
}

@media (max-width: 900px) {
  .home-hero {
    --hero-scene-height: max(740px, 100svh);
    --hero-runway: clamp(230px, 34svh, 340px);
  }
  .home-hero__scene { padding-top: calc(var(--nav-h) + 3.25rem); }
  .home-hero__product { top: 57%; width: min(820px, 92vw); }
  .forest {
    --forest-height: clamp(720px, 82svh, 900px);
    --forest-reveal: clamp(350px, 38svh, 420px);
  }
  .resource-tabs { grid-template-columns: 1fr; }
  .resource-tabs__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .resource-tabs__list::-webkit-scrollbar { display: none; }
  .resource-tabs__list button { min-width: max-content; }
  .possibility-grid { grid-template-columns: repeat(2, 1fr); }
  .community { grid-template-columns: 1fr; }
  .community__copy { text-align: center; }
  .community__copy > p { margin-inline: auto; }
  .community__principles { justify-content: center; }
  .reach__visual { grid-template-columns: 1fr; }
  .reach__list { display: grid; grid-template-columns: repeat(2, 1fr); border: 0; border-top: 1px solid var(--home-line); }
}

@media (max-width: 620px) {
  .home-hero { --hero-scene-height: 820px; --hero-runway: clamp(180px, 24svh, 230px); }
  .home-hero__scene { display: block; padding-inline: 1rem; }
  .home-hero__copy { width: 100%; margin-inline: auto; }
  .home-hero .eyebrow { white-space: normal; }
  .home-hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.04;
    letter-spacing: -.05em;
    overflow-wrap: break-word;
  }
  .home-hero__actions { width: 100%; flex-direction: column; }
  .home-hero__actions .download-picker,
  .home-hero__actions .button-secondary { width: min(310px, 100%); }
  .download-picker__primary { flex: 1; justify-content: center; }
  .home-hero__product { top: 66%; width: 132vw; }
  .forest { --forest-height: 520px; --forest-reveal: 270px; }
  .home-section { width: min(100% - 1.5rem, 1180px); padding-block: 5.5rem; }
  .section-heading h2, .community h2, .home-finale h2 { font-size: 2.35rem; }
  .resource-tabs__copy { padding: 1.15rem; }
  .possibility-grid { gap: .55rem; }
  .possibility-card { min-height: 145px; padding: 1rem; }
  .reach__map { min-height: 300px; }
  .reach__visual { min-height: 0; }
  .reach__list { grid-template-columns: 1fr; }
  .home-finale { min-height: 680px; padding-top: 6rem; padding-bottom: 15rem; }
  .home-finale__landscape { bottom: -1.5rem; width: max(980px, 185%); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero { --hero-runway: clamp(100px, 15svh, 140px); }
  .home-hero__sky,
  .home-hero__copy,
  .home-hero__product,
  .forest,
  .home-finale__landscape { transform: none !important; will-change: auto; }
  .resource-tabs__stage article { animation: none; }
}