/* Home page: multiverse hero, portal trip route, CTA. Uses the site's existing blue palette. */
.mv { position:relative; overflow:hidden; overflow-x:clip; overflow-y:visible; isolation:isolate;  /* clip only sideways: the fixed star canvas must show below the hero too */
  color:#fff; min-height:min(88vh,780px);
  background:radial-gradient(900px 560px at 76% 42%, rgba(96,165,250,.55), transparent 62%),
             radial-gradient(700px 500px at 0% 100%, rgba(37,99,235,.55), transparent 65%),
             linear-gradient(160deg,#0B2169 0%,#1D4ED8 58%,#2563EB 100%); }
/* fixed + full viewport: stars drift behind the whole page; sections after the hero sit above it */
#mv-stars { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
.container.home > * { position:relative; z-index:1; }
.mv-flash { position:absolute; inset:0; z-index:4; pointer-events:none; background:radial-gradient(circle at 76% 45%, #fff, rgba(147,197,253,.6) 25%, transparent 60%); opacity:0; animation:flash 1.6s ease-out .15s backwards; }
@keyframes flash { 0% { opacity:.95; } 100% { opacity:0; } }
.mv-fade { position:absolute; left:0; right:0; bottom:0; height:120px; z-index:2; background:linear-gradient(180deg, transparent, var(--bg)); }
.mv-inner { position:relative; z-index:3; clip-path:inset(0 -100vw);   /* cut off only above/below the hero; sideways the hero itself clips at the screen edge */
  max-width:1180px; margin:0 auto; padding:72px 24px 152px; display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; }

/* copy */
.mv-copy { position:relative; z-index:6; transform:translateY(calc(var(--sp,0) * -50px)); opacity:calc(1 - var(--sp,0) * 1.2); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); animation:rise .9s cubic-bezier(.2,.9,.2,1) .2s backwards; }
.eyebrow i { width:8px; height:8px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:ping 2s infinite; }
@keyframes ping { 70% { box-shadow:0 0 0 10px rgba(74,222,128,0); } 100% { box-shadow:0 0 0 0 rgba(74,222,128,0); } }
.mv h1 { font-size:clamp(1.8rem,3.5vw,2.9rem); line-height:1.25; margin:20px 0 16px; font-weight:700; text-shadow:0 4px 30px rgba(11,33,105,.45); }
.mv h1 .line { display:block; overflow:hidden; padding-bottom:.12em; }
.mv h1 .line > span { display:inline-block; animation:line-up 1.1s cubic-bezier(.2,.9,.2,1) backwards; }
.mv h1 .line:nth-child(1) > span { animation-delay:.45s; }
.mv h1 .line:nth-child(2) > span { animation-delay:.7s; }
@keyframes line-up { from { transform:translateY(110%) rotate(3deg); opacity:0; } to { transform:none; opacity:1; } }
.glow { background:linear-gradient(100deg,#fff 0%,#BFDBFE 30%,#fff 50%,#93C5FD 75%,#fff 100%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
.mv h1 .line > span.glow { animation:line-up 1.1s cubic-bezier(.2,.9,.2,1) .7s backwards, shimmer 5s linear 2s infinite; }
@keyframes shimmer { to { background-position:-240% 0; } }
.mv .lead { color:rgba(255,255,255,.82); font-size:1.08rem; margin:0 0 28px; animation:rise .9s cubic-bezier(.2,.9,.2,1) 1s backwards; }
.mv-actions { display:flex; gap:12px; flex-wrap:wrap; animation:rise .9s cubic-bezier(.2,.9,.2,1) 1.15s backwards; }
@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.btn.light { background:#fff; color:var(--primary-dark); border-color:#fff; box-shadow:0 10px 30px rgba(11,33,105,.4); }
.btn.light:hover { background:#EAF1FD; border-color:#EAF1FD; transform:translateY(-2px); }
.btn.ghost { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(6px); }
.btn.ghost:hover { background:rgba(255,255,255,.2); }

/* portal stage */
.mv-stage { position:relative; width:100%; max-width:460px; aspect-ratio:1; justify-self:center; perspective:1100px; transform:scale(calc(1 + var(--sp,0) * .35)) translateY(calc(var(--sp,0) * -30px)); }
.mv-tilt { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(calc(var(--my,0) * -9deg)) rotateY(calc(var(--mx,0) * 12deg)); }
.mv-open { position:absolute; inset:0; animation:portal-open 1.8s cubic-bezier(.2,.9,.15,1) .1s backwards; }
@keyframes portal-open { 0% { transform:scale(.05) rotate(-300deg); opacity:0; filter:blur(14px); } 60% { opacity:1; filter:blur(0); } 100% { transform:none; } }
.halo { position:absolute; inset:-14%; border-radius:50%; background:radial-gradient(circle, rgba(191,219,254,.75), rgba(96,165,250,.25) 45%, transparent 68%); filter:blur(10px); animation:pulse 4.5s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scale(1.1); opacity:.75; } }
.ring { position:absolute; border-radius:50%; --w:6px;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--w) - 1px), #000 calc(100% - var(--w))); mask:radial-gradient(farthest-side, transparent calc(100% - var(--w) - 1px), #000 calc(100% - var(--w))); }
.r1 { inset:0; background:conic-gradient(from 0deg,#fff,#60A5FA 18%,transparent 34%,#fff 56%,transparent 78%,#93C5FD 90%,#fff); animation:spin 12s linear infinite; filter:drop-shadow(0 0 14px rgba(191,219,254,.95)); }
.r2 { inset:7%; --w:4px; background:conic-gradient(#60A5FA,transparent 22%,#FACC15 38%,transparent 54%,#4ADE80 70%,transparent 88%,#60A5FA); animation:spin 8s linear infinite reverse; filter:drop-shadow(0 0 10px rgba(250,204,21,.6)); }
.r3 { inset:14%; --w:2px; background:repeating-conic-gradient(rgba(255,255,255,.85) 0 6deg, transparent 6deg 14deg); animation:spin 50s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.core { position:absolute; inset:19%; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#BFD6FB,#EAF1FD); box-shadow:inset 0 0 50px rgba(11,33,105,.75), 0 0 70px rgba(96,165,250,.85); transform:translateZ(30px); }
.core img { position:absolute; left:50%; top:50%; width:150%; height:150%; object-fit:cover; transform:translate(-50%,-50%); animation:drift 22s ease-in-out infinite alternate; }
@keyframes drift { from { transform:translate(-56%,-48%) scale(1.05) rotate(-4deg); } to { transform:translate(-44%,-52%) scale(1.25) rotate(5deg); } }
.swirl { position:absolute; inset:-10%; background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.45) 12%, transparent 30%, rgba(147,197,253,.4) 60%, transparent 80%); mix-blend-mode:screen; animation:spin 9s linear infinite; }
.core::after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 50%, transparent 55%, rgba(11,33,105,.55)); }

/* orbiting listing chips */
.orbit { position:absolute; inset:var(--inset); border-radius:50%; animation:spin var(--d) linear infinite; animation-direction:var(--dir); animation-delay:calc(var(--d) * var(--delay,0)); transform-style:preserve-3d; }
.oc { pointer-events:none; position:absolute; left:50%; top:0; display:flex; align-items:stretch; gap:12px; width:236px; padding:8px; border-radius:14px; background:rgba(255,255,255,.97); color:var(--fg); text-decoration:none; box-shadow:0 14px 34px rgba(11,33,105,.5); animation:counter var(--d) linear infinite; animation-direction:var(--dir); animation-delay:calc(var(--d) * var(--delay,0)); }
.oc-photo { position:relative; flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:10px; overflow:hidden; color:hsl(var(--h,210) 55% 62%); background:linear-gradient(135deg,hsl(var(--h,210) 70% 88%),hsl(calc(var(--h,210) + 10) 60% 94%)); }
.oc-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.oc-info { display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.3; }
.oc-title { font-size:.8rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-loc { font-size:.7rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-price { font-size:.92rem; font-weight:700; color:var(--primary); } .oc-price small { font-size:.68rem; font-weight:500; color:var(--muted); }
@keyframes counter { from { transform:translate(-50%,-50%) rotate(0); } to { transform:translate(-50%,-50%) rotate(-360deg); } }

/* feature strip overlapping the hero */
.container.home { padding-top:0; }
.mv-features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:-76px 0 56px; position:relative; z-index:5; }
.feat { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 14px 40px rgba(11,33,105,.18); transition:transform .35s cubic-bezier(.2,1.4,.3,1), box-shadow .3s; }
.feat:hover { transform:translateY(-6px); box-shadow:0 22px 50px rgba(37,99,235,.28); }
.feat h3 { margin:0 0 2px; font-size:1rem; } .feat p { margin:0; color:var(--muted); font-size:.88rem; }
.feat-ico { flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#2563EB,#60A5FA); box-shadow:0 8px 18px rgba(37,99,235,.4); }

/* journey: five steps, one color */
.trip { margin:0 0 56px; text-align:center; }
.trip-head h2 { font-size:clamp(1.4rem,3vw,2rem); margin:12px 0 8px; }
.eyebrow.dark { background:var(--primary-soft); border-color:#c9dcfb; color:var(--primary); backdrop-filter:none; animation:none; }
.eyebrow.dark i { background:var(--primary); box-shadow:none; animation:none; }
.trip-track { position:relative; height:320px; margin-top:12px; }
.trip-path { position:absolute; left:0; top:0; width:100%; height:220px; overflow:visible; }
.trip-path path { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; stroke-dasharray:var(--len,2000); stroke-dashoffset:var(--len,2000); filter:drop-shadow(0 0 6px rgba(37,99,235,.45)); }
.trip.in .trip-path path { animation:draw 2.6s cubic-bezier(.5,0,.2,1) .3s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.tp-dot { fill:#fff; stroke:var(--primary); stroke-width:3; filter:drop-shadow(0 0 8px rgba(37,99,235,.9)); opacity:0; }
.tp-dot.on { opacity:1; }
/* water effects when the dot dives into / leaves a portal */
.wr { position:absolute; inset:0; border-radius:50%; border:2px solid var(--wrc,var(--primary)); pointer-events:none; animation:wr 1s cubic-bezier(.2,.6,.3,1) forwards; box-shadow:0 0 14px var(--wrc,var(--primary)); }
.wr.small { animation-duration:.8s; border-width:1.5px; }
@keyframes wr { from { transform:scale(.92); opacity:.9; } to { transform:scale(2.3); opacity:0; border-width:.5px; } }
/* 3D press: the portal is pushed back into the page on the side the ball hits, then springs back once */
.nbody { position:absolute; inset:0; display:block; transform-style:preserve-3d; }
.nbody.squish { animation:squish 1s cubic-bezier(.33,.0,.2,1); }
@keyframes squish {
  0% { transform:perspective(520px) rotateX(0) rotateY(0) translateZ(0) scale(1); }
  38% { transform:perspective(520px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(-9px) scale(.975); }
  100% { transform:perspective(520px) rotateX(0) rotateY(0) translateZ(0) scale(1); }
}
.dr { position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--wrc,var(--primary)); pointer-events:none; animation:dr .75s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes dr { 0% { transform:translate(var(--sx),var(--sy)) scale(1); opacity:1; } 70% { opacity:.9; } 100% { transform:translate(var(--dx),var(--dy)) scale(.1); opacity:0; } }
.node { --c:var(--primary); position:absolute; top:110px; width:104px; height:104px; margin-left:-52px; margin-top:-52px; }
.js .node { opacity:0; transform:scale(.2) rotate(-90deg); }
.trip.in .node { animation:node-pop .9s cubic-bezier(.2,1.4,.3,1) calc(.4s + var(--n) * .5s) forwards; }
@keyframes node-pop { to { opacity:1; transform:none; } }
.nring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--c), transparent 30%, var(--c) 55%, transparent 80%, var(--c));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); animation:spin 6s linear infinite; filter:drop-shadow(0 0 8px rgba(37,99,235,.55)); }
.nring.r2 { inset:10px; animation-duration:9s; animation-direction:reverse; opacity:.6; }
.ncore { position:absolute; inset:21px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--c); box-shadow:0 10px 30px rgba(15,23,42,.16), inset 0 0 0 1px var(--border); }
.nstep { position:absolute; top:-2px; right:-2px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--c); color:#fff; font-size:.8rem; font-weight:700; box-shadow:0 4px 10px rgba(37,99,235,.4); border:2px solid var(--bg); }
.ncap { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); width:190px; display:flex; flex-direction:column; gap:2px; line-height:1.4; }
.ncap strong { font-size:1rem; } .ncap small { color:var(--muted); font-size:.82rem; }

/* closing CTA */
.cta-band { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:32px; padding:36px 40px; border-radius:24px; color:#fff; background:linear-gradient(120deg,#0B2169,#1D4ED8 60%,#3B82F6); box-shadow:0 24px 60px rgba(37,99,235,.35); isolation:isolate; }
.cta-band h2 { font-size:clamp(1.2rem,2.6vw,1.7rem); margin:0 0 4px; } .cta-band p { margin:0; color:rgba(255,255,255,.8); }
.cb-ring { position:absolute; border-radius:50%; z-index:-1; border:2px solid rgba(255,255,255,.25); }
.cb-ring.a { width:340px; height:340px; right:-90px; top:-150px; border-style:dashed; animation:spin 40s linear infinite; }
.cb-ring.b { width:220px; height:220px; right:40px; bottom:-130px; border-color:rgba(147,197,253,.5); animation:spin 26s linear infinite reverse; }

@media (max-width:900px) {
  .mv-inner { grid-template-columns:1fr; padding:48px 20px 120px; }
  .mv-stage { max-width:340px; order:-1; margin:0 auto -8px; }
  .oc { width:170px; gap:8px; } .oc-photo { width:44px; height:44px; } .oc-title { font-size:.7rem; } .oc-loc { display:none; } .oc-price { font-size:.8rem; }
  .mv-features { grid-template-columns:1fr; margin-top:-64px; }
  .cta-band { padding:28px 24px; }
}
@media (max-width:820px) {
  .trip { text-align:left; } .trip-head { text-align:center; }
  .trip-track { height:auto; display:flex; flex-direction:column; gap:28px; padding:8px 0 0 12px; }
  .trip-track::before { content:""; position:absolute; left:63px; top:40px; bottom:40px; width:3px; border-radius:3px; background:linear-gradient(var(--primary),#93C5FD); opacity:.5; }
  .trip-path { display:none; }
  .node { position:relative; top:auto; left:auto !important; margin:0; width:104px; height:104px; }
  .ncap { top:50%; left:calc(100% + 18px); transform:translateY(-50%); width:min(56vw,300px); text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  .mv *, .mv, .trip *, .cta-band * { animation:none !important; transition:none !important; }
  .js .node { opacity:1; transform:none; } .trip-path path { stroke-dashoffset:0; }
}

/* ---- why Ban Penguin (agents) ---- */
.why { margin:0 0 56px; text-align:center; }
.why-head h2 { font-size:clamp(1.4rem,3vw,2rem); margin:12px 0 8px; }
.why-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:40px 0 32px; padding:8px 0; }
.stat { display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 24px; }
.stat + .stat { border-left:1px solid var(--border); }
.stat-ico { display:none; }
.stat small { color:var(--fg); font-size:.95rem; font-weight:600; }
.stat b { order:-1; font-size:clamp(2.5rem,5vw,3.5rem); line-height:1; letter-spacing:-.02em; color:var(--primary); font-weight:700; }
.stat em { font-style:normal; color:var(--muted); font-size:.85rem; max-width:240px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:left; }
.why-card { padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--card); transition:transform .35s cubic-bezier(.2,1.4,.3,1), box-shadow .3s, border-color .3s; }
.why-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(37,99,235,.2); border-color:var(--primary); }
.why-card h3 { margin:16px 0 8px; font-size:1.0625rem; }
.why-card p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.7; }
.why-ico { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--primary-soft); color:var(--primary); }
.why-card.hot { border-color:var(--primary); background:linear-gradient(160deg,var(--primary-soft),var(--card)); }
.why-card.hot .why-ico { background:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.4); }
.why-cta { margin-top:40px; }
.why-head p { max-width:560px; margin:0 auto; }
@media (max-width:560px) { .stat + .stat { border-left:0; border-top:1px solid var(--border); padding-top:20px; margin-top:12px; } }

/* ---- property types + near-transit tiles ---- */
.types, .stations { margin:0 0 48px; }
.type-row { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.type-tile { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 8px; border:1px solid var(--border); border-radius:18px; background:var(--card); color:var(--fg); font-weight:600; transition:transform .35s cubic-bezier(.2,1.4,.3,1), border-color .25s, box-shadow .3s; }
.type-tile:hover { text-decoration:none; transform:translateY(-3px); border-color:var(--primary); box-shadow:0 14px 30px rgba(37,99,235,.2); }
.type-ico { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--primary-soft); color:var(--primary); transition:transform .4s cubic-bezier(.2,1.6,.3,1); }
.type-tile:hover .type-ico { transform:scale(1.1) rotate(-4deg); }
.st-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.st-tile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; border:1.5px solid var(--c); border-radius:18px; background:var(--card); color:var(--fg); font-weight:600; transition:transform .35s cubic-bezier(.2,1.4,.3,1), box-shadow .3s; }
.st-tile:hover { text-decoration:none; transform:translateY(-3px); box-shadow:0 14px 30px -8px var(--c); }
.st-badge { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--c); color:#fff; font-size:.95rem; font-weight:800; letter-spacing:.03em; }
.stations .muted { margin:12px 0 0; }
@media (max-width:900px) { .why-grid { grid-template-columns:repeat(2,1fr); } .type-row { grid-template-columns:repeat(3,1fr); } .st-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .why-stats { grid-template-columns:1fr; } .why-grid { grid-template-columns:1fr; } .type-row { grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce) { .why-card, .type-tile, .st-tile, .type-ico { transition:none !important; } }

/* 3D property-type images + real transit logos */
.type-img { width:88px; height:88px; object-fit:contain; transition:transform .4s cubic-bezier(.2,1.4,.3,1); }
.type-tile:hover .type-img { transform:translateY(-4px) scale(1.06); }
.st-logo { width:56px; height:56px; object-fit:contain; transition:transform .4s cubic-bezier(.2,1.4,.3,1); }
.st-tile:hover .st-logo { transform:scale(1.08); }
@media (prefers-reduced-motion: reduce) { .type-img, .st-logo { transition:none !important; } }
.type-img { width:104px; height:104px; }
.type-tile { padding-top:14px; }