:root {
  --sky: #dff4ff;
  --sky-deep: #bfe8fa;
  --ink: #142b39;
  --muted: #668293;
  --line: rgba(20, 43, 57, .14);
  --glass: rgba(255,255,255,.58);
  --white: #fff;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: #f8fcfe;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-nav {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), var(--max));
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(18px);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(82,143,173,.08);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.brand-dot { width: 15px; height: 11px; border-radius: 50%; background: white; box-shadow: 7px 2px 0 2px white, 2px -3px 0 1px white; }
.nav-actions { display: flex; align-items: center; gap: 4px; }
.nav-link { padding: 9px 13px; border-radius: 999px; font-size: 14px; color: #2d4b5d; }
.nav-link:hover { background: rgba(255,255,255,.7); }

.sky-scene { position: relative; overflow: hidden; background: linear-gradient(#c8edfd 0%, #eaf8ff 65%, #f8fcfe 100%); }
.hero { min-height: 100svh; display: grid; place-items: center; padding: 120px 24px 110px; isolation: isolate; }
.hero-photo {
  background-image:
    linear-gradient(to bottom, rgba(212,236,249,.08) 0%, rgba(212,236,249,.18) 40%, rgba(240,248,252,.35) 72%, rgba(248,252,254,.78) 100%),
    url("hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.12) 68%, rgba(248,252,254,.36) 100%);
  z-index: -4;
}

.pons-cloud {
  position: absolute;
  z-index: -1;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .02em;
  font-family: "Manrope", sans-serif;
  font-size: clamp(7.5rem, 20vw, 18rem);
  font-weight: 700;
  letter-spacing: -.10em;
  color: rgba(255,255,255,.94);
  filter: blur(.25px) drop-shadow(0 30px 35px rgba(91,152,180,.14));
  text-shadow:
    0 -10px 22px rgba(255,255,255,.9),
    12px 8px 24px rgba(255,255,255,.9),
    -16px 10px 28px rgba(255,255,255,.85);
  animation: ponsFloat 24s ease-in-out infinite alternate;
}
.pons-cloud span { display: block; transform: scaleY(.8); }

@keyframes ponsFloat { from { transform: translateX(-52%) translateY(0); } to { transform: translateX(-48%) translateY(10px); } }

.cloud { position: absolute; width: 150px; height: 50px; background: rgba(255,255,255,.62); border-radius: 999px; filter: blur(1px); z-index: 0; }
.cloud::before, .cloud::after { content:""; position:absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 70px; height:70px; left: 28px; top:-28px; }
.cloud::after { width: 95px; height:95px; right: 18px; top:-46px; }
.cloud-a { top: 28%; left: -8%; animation: drift 42s linear infinite; }
.cloud-b { top: 17%; left: 18%; transform: scale(.72); animation: drift 57s linear infinite 8s; opacity:.8; }
.cloud-c { top: 37%; left: 66%; transform: scale(.56); animation: drift 48s linear infinite -19s; opacity:.6; }
@keyframes drift { from { translate: -220px 0; } to { translate: calc(100vw + 260px) 0; } }

.hero-copy { text-align: center; margin-top: 150px; position: relative; z-index: 2; padding: 38px 28px 30px; border-radius: 34px; background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.52); backdrop-filter: blur(14px); box-shadow: 0 24px 70px rgba(87,140,168,.12); }
.hero-copy .eyebrow { margin-top: 6px; }
.eyebrow { margin: 0 0 10px; text-transform: lowercase; letter-spacing: .18em; font-size: 12px; font-weight: 600; color: #587688; }
.hero h1, h2 { font-family: "Manrope", sans-serif; letter-spacing: -.055em; }
.hero h1 { margin: 0; font-size: clamp(3.8rem, 9vw, 7.8rem); line-height: .93; font-weight: 500; text-shadow: 0 10px 35px rgba(255,255,255,.28); }
.hero-text { margin: 20px auto 28px; color: #355465; line-height: 1.65; max-width: 560px; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pill { border: 1px solid rgba(255,255,255,.78); background: rgba(255,255,255,.56); color: var(--ink); min-width: 92px; height: 46px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter: blur(14px); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.pill:hover { transform: translateY(-2px); background: rgba(255,255,255,.88); box-shadow: 0 10px 28px rgba(78,136,165,.12); }
.pill.primary { background: #153345; color: white; border-color: #153345; }

.horizon { position:absolute; left:0; right:0; bottom:0; height:18%; z-index:-3; opacity:.56; }
.hill { position:absolute; bottom:-40px; border-radius:50% 50% 0 0; background:#b1d6e7; }
.hill-1 { left:-8%; width:58%; height:145px; }
.hill-2 { right:-15%; width:62%; height:185px; background:#bddfed; }
.city { position:absolute; left:12%; right:9%; bottom:0; height:58px; background: repeating-linear-gradient(90deg, transparent 0 13px, #97bfd2 13px 27px, transparent 27px 34px); clip-path: polygon(0 100%,0 45%,3% 45%,3% 20%,6% 20%,6% 58%,9% 58%,9% 30%,12% 30%,12% 65%,15% 65%,15% 15%,18% 15%,18% 50%,21% 50%,21% 28%,24% 28%,24% 70%,27% 70%,27% 40%,30% 40%,30% 60%,33% 60%,33% 18%,36% 18%,36% 52%,39% 52%,39% 34%,42% 34%,42% 72%,45% 72%,45% 43%,48% 43%,48% 62%,51% 62%,51% 25%,54% 25%,54% 58%,57% 58%,57% 38%,60% 38%,60% 73%,63% 73%,63% 32%,66% 32%,66% 55%,69% 55%,69% 21%,72% 21%,72% 65%,75% 65%,75% 36%,78% 36%,78% 61%,81% 61%,81% 24%,84% 24%,84% 57%,87% 57%,87% 30%,90% 30%,90% 67%,93% 67%,93% 40%,96% 40%,96% 55%,100% 55%,100% 100%); }

.under-hero-clouds { position:absolute; left:0; right:0; bottom:84px; height:180px; pointer-events:none; z-index:1; }
.under-cloud { position:absolute; width:170px; height:60px; background: rgba(255,255,255,.7); border-radius:999px; filter: blur(1px); opacity:.72; }
.under-cloud::before, .under-cloud::after { content:""; position:absolute; border-radius:50%; background: inherit; }
.under-cloud::before { width:84px; height:84px; left:24px; top:-30px; }
.under-cloud::after { width:104px; height:104px; right:18px; top:-46px; }
.under-cloud-1 { left:-16%; bottom:58px; transform:scale(.9); animation: driftUnder 34s linear infinite; }
.under-cloud-2 { left:-30%; bottom:8px; transform:scale(1.18); animation: driftUnder 45s linear infinite 8s; opacity:.58; }
.under-cloud-3 { left:-22%; bottom:98px; transform:scale(.72); animation: driftUnder 52s linear infinite 14s; opacity:.46; }
@keyframes driftUnder { from { translate:-260px 0; } to { translate:calc(100vw + 320px) 0; } }

.scroll-hint { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:.1em; color:#678596; display:flex; gap:10px; align-items:center; z-index:2; }

.section { width:min(calc(100% - 40px), var(--max)); margin:0 auto; padding:140px 0; position:relative; }
.section-number { position:absolute; top:147px; right:0; color:#98adba; font-size:12px; letter-spacing:.16em; }
.section-copy { max-width:560px; margin-bottom:56px; }
.section-copy h2, .section-heading h2, .facts h2 { margin:0 0 26px; font-size:clamp(2.8rem, 6vw, 5.7rem); line-height:.96; font-weight:500; }

.sighting {
  min-height: 860px;
  padding-bottom: 220px;
}
.sighting .section-copy {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}
.sighting-clouds {
  position: absolute;
  left: 0;
  right: 0;
  top: 270px;
  bottom: 24px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.p-cloud {
  position: absolute;
  width: 220px;
  height: 264px;
  opacity: .44;
  background: url("p-cloud-shape.png") center / contain no-repeat;
  filter: drop-shadow(0 18px 30px rgba(112, 156, 181, .20));
}
.p-cloud::before,
.p-cloud::after {
  content: none;
}
.p-cloud-1 {
  left: 2%;
  top: 224px;
  transform: scale(.84);
  animation: sightingFloat1 12s ease-in-out infinite alternate;
}
.p-cloud-2 {
  left: 31%;
  top: 94px;
  transform: scale(1.06);
  opacity: .38;
  animation: sightingFloat2 15s ease-in-out infinite alternate;
}
.p-cloud-3 {
  left: 58%;
  top: 236px;
  transform: scale(.72);
  opacity: .34;
  animation: sightingFloat3 13s ease-in-out infinite alternate;
}
.p-cloud-4 {
  left: 80%;
  top: 36px;
  transform: scale(.92);
  opacity: .30;
  animation: sightingFloat4 17s ease-in-out infinite alternate;
}
@keyframes sightingFloat1 {
  from { transform: translate3d(0, 0, 0) scale(.84); }
  to { transform: translate3d(24px, -14px, 0) scale(.88); }
}
@keyframes sightingFloat2 {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to { transform: translate3d(-22px, 12px, 0) scale(1.02); }
}
@keyframes sightingFloat3 {
  from { transform: translate3d(0, 0, 0) scale(.72); }
  to { transform: translate3d(20px, -10px, 0) scale(.76); }
}
@keyframes sightingFloat4 {
  from { transform: translate3d(0, 0, 0) scale(.92); }
  to { transform: translate3d(-18px, 14px, 0) scale(.96); }
}
.section-copy p:not(.eyebrow), .section-heading > p:last-child { color:#5f7786; font-size:17px; line-height:1.72; }

.visual-placeholder { position:relative; overflow:hidden; border-radius:26px; border:1px solid rgba(20,43,57,.11); box-shadow:0 22px 70px rgba(81,123,146,.09); }
.visual-placeholder::after { content:attr(data-label); position:absolute; left:18px; bottom:16px; font-size:10px; letter-spacing:.16em; color:rgba(20,43,57,.55); background:rgba(255,255,255,.54); backdrop-filter:blur(10px); border-radius:999px; padding:8px 11px; }
.visual-placeholder.wide { min-height:570px; background:linear-gradient(#bfeafd,#e9f7fd 70%); }
.placeholder-sky { position:absolute; inset:0; background:linear-gradient(#bfeafd 0%,#ebf8fe 69%,#b4d0db 70%,#90acb9 100%); }
.placeholder-city { position:absolute; left:0; right:0; bottom:0; height:26%; background:repeating-linear-gradient(90deg,#8da7b3 0 24px,#9fb8c3 24px 38px,#7796a4 38px 52px); clip-path:polygon(0 100%,0 45%,5% 45%,5% 20%,12% 20%,12% 60%,19% 60%,19% 32%,27% 32%,27% 72%,35% 72%,35% 24%,43% 24%,43% 55%,52% 55%,52% 15%,61% 15%,61% 68%,70% 68%,70% 28%,79% 28%,79% 58%,88% 58%,88% 38%,100% 38%,100% 100%); }
.mini-pons { position:absolute; left:50%; top:27%; transform:translate(-50%,-50%) scaleY(.82); font-family:"Manrope",sans-serif; font-size:clamp(3rem,8vw,7rem); font-weight:700; letter-spacing:-.09em; color:#fff; filter:drop-shadow(0 14px 18px rgba(102,158,184,.18)); }


.visual-media { position:relative; overflow:hidden; border-radius:26px; border:1px solid rgba(20,43,57,.11); box-shadow:0 22px 70px rgba(81,123,146,.09); background:#e9f4fa; }
.visual-media::after { content:attr(data-label); position:absolute; left:18px; bottom:16px; font-size:10px; letter-spacing:.16em; color:rgba(20,43,57,.55); background:rgba(255,255,255,.54); backdrop-filter:blur(10px); border-radius:999px; padding:8px 11px; }
.visual-media img { width:100%; height:100%; object-fit:cover; display:block; }

.same-cloud { padding-top:160px; }
.section-heading { max-width:760px; margin-bottom:70px; }
.sky-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.sky-card.offset { margin-top:90px; }
.visual-placeholder.square, .visual-media.square { aspect-ratio:1/1; }
.tone-day { background:linear-gradient(#bfeafa,#e8f8ff 66%,#7fc0d9 67%); }
.tone-night { background:linear-gradient(#24354c,#577798 66%,#26313e 67%); }
.tone-desert { background:linear-gradient(#c7eafa,#edf8fb 62%,#d9b77c 63%); }
.tone-mountain { background:linear-gradient(#b8e4f7,#e7f6fd 60%,#9ab4bd 61%); }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 4px 0; font-size:14px; }
.card-meta span { color:#8aa0ad; }
.card-meta strong { font-weight:500; }

.facts { background:#173242; color:white; padding:145px 24px; }
.facts-inner { width:min(100%,var(--max)); margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:end; }
.facts .eyebrow { color:#9bb4c2; }
.facts h2 span { color:#8ba7b6; }
.fact-list { margin:0; border-top:1px solid rgba(255,255,255,.16); }
.fact-list div { display:grid; grid-template-columns:120px 1fr; gap:30px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.fact-list dt { color:#88a2b1; text-transform:lowercase; }
.fact-list dd { margin:0; text-align:right; }
.fact-list i { width:7px; height:7px; display:inline-block; border-radius:50%; background:#c6ffd0; margin-right:8px; box-shadow:0 0 0 4px rgba(198,255,208,.08); }

.final-sky { min-height:760px; display:grid; place-items:center; padding:100px 24px; }
.final-p-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.final-p-cloud {
  position: absolute;
  width: 170px;
  height: 204px;
  opacity: .40;
  background: url("p-cloud-shape.png") center / contain no-repeat;
  filter: drop-shadow(0 16px 28px rgba(112, 156, 181, .18));
}
.final-p-cloud::before,
.final-p-cloud::after {
  content: none;
}
.final-p-cloud-1 {
  left: 3%;
  top: 15%;
  transform: scale(.78);
  opacity: .34;
  animation: finalFloat1 14s ease-in-out infinite alternate;
}
.final-p-cloud-2 {
  right: 8%;
  top: 18%;
  transform: scale(1.08);
  opacity: .42;
  animation: finalFloat2 18s ease-in-out infinite alternate;
}
.final-p-cloud-3 {
  right: 10%;
  top: 47%;
  transform: scale(.56);
  opacity: .28;
  animation: finalFloat3 15s ease-in-out infinite alternate;
}
@keyframes finalFloat1 {
  from { transform: translate3d(0, 0, 0) scale(.78); }
  to { transform: translate3d(20px, -10px, 0) scale(.82); }
}
@keyframes finalFloat2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to { transform: translate3d(-26px, 12px, 0) scale(1.04); }
}
@keyframes finalFloat3 {
  from { transform: translate3d(0, 0, 0) scale(.56); }
  to { transform: translate3d(-14px, 10px, 0) scale(.60); }
}
.final-copy { text-align:center; z-index:2; }
.final-copy > p { font-family:"Manrope",sans-serif; font-size:clamp(3.2rem,8vw,7.5rem); letter-spacing:-.06em; margin:0 0 30px; }
.hero-actions.compact .pill { min-width:84px; }

footer { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 max(24px,calc((100vw - var(--max))/2)); border-top:1px solid var(--line); color:#69818f; font-size:13px; }
.ca-preview { font-variant-numeric:tabular-nums; }
.copy-toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#163343; color:white; border-radius:999px; padding:12px 18px; font-size:13px; transition:.25s ease; }
.copy-toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 780px) {
  .site-nav { top:10px; }
  .nav-actions .nav-link:nth-child(2), .nav-actions .nav-link:nth-child(3) { display:none; }
  .hero { padding-inline:16px; }
  .hero-copy { margin-top: 96px; padding: 30px 18px 24px; }
  .hero-copy .eyebrow { margin-top: 4px; }
  .under-hero-clouds { bottom: 72px; height: 140px; }
  .under-cloud { width: 128px; height: 44px; }
  .section { width:min(calc(100% - 28px),var(--max)); padding:100px 0; }
  .sighting { min-height: 660px; padding-bottom: 150px; }
  .sighting-clouds { top: 330px; bottom: 10px; }
  .p-cloud { width: 142px; height: 170px; }
  .p-cloud-1 { left: -1%; top: 210px; }
  .p-cloud-2 { left: 24%; top: 108px; }
  .p-cloud-3 { left: 55%; top: 224px; }
  .p-cloud-4 { left: 75%; top: 44px; }
  .section-number { top:105px; }
  .visual-placeholder.wide { min-height:360px; }
  .sky-grid { grid-template-columns:1fr; gap:34px; }
  .sky-card.offset { margin-top:0; }
  .facts-inner { grid-template-columns:1fr; gap:56px; }
  .fact-list div { grid-template-columns:86px 1fr; gap:16px; }
  .final-p-cloud { width: 122px; height: 148px; }
  .final-p-cloud-1 { left: 2%; top: 14%; }
  .final-p-cloud-2 { right: 5%; top: 18%; }
  .final-p-cloud-3 { right: 12%; top: 42%; }
  footer { flex-direction:column; align-items:flex-start; justify-content:center; padding-block:26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}