:root{
  --ink:#0b0b12;
  --ink-2:#14141f;
  --ink-3:#1d1d2c;
  --line:#2c2c40;
  --text:#ecebf5;
  --muted:#a4a3bd;
  --blue:#d7192b;
  --blue-2:#f02a3c;
  --glow:#ff3b4b;
  --white:#ffffff;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6}
a{color:var(--glow)}
img{max-width:100%}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.1}
h1,h2{font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.02em;font-weight:400}
h1{font-size:clamp(2.8rem,7vw,5rem)}
h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--glow);font-weight:600;margin:0 0 .6rem}
.glow{color:var(--glow);text-shadow:0 0 24px rgba(255,59,75,.45)}

/* buttons */
.btn{display:inline-block;background:var(--blue);color:var(--white);padding:.85rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:1rem;transition:background .2s, transform .2s}
.btn:hover{background:var(--blue-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--line)}
.btn-ghost:hover{background:var(--ink-3)}
.btn-small{padding:.5rem 1rem;font-size:.9rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.8rem 5vw;background:rgba(11,11,18,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:700}
.ball-mini{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555 0,#111 55%,#000 100%);display:grid;place-items:center}
.ball-mini span{width:16px;height:16px;border-radius:50%;background:#fff;color:#000;font-size:.7rem;display:grid;place-items:center;font-weight:700}
.links{display:flex;gap:1.4rem;align-items:center}
.links a{color:var(--text);text-decoration:none;font-weight:500;font-size:.95rem}
.links a:hover{color:var(--glow)}
.links a.btn{color:#fff}
.menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;padding:5rem 5vw 4rem;max-width:1200px;margin:0 auto}
.lead{font-size:1.15rem;color:var(--muted);max-width:34rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.hero-ball{text-align:center}
.big-ball{width:min(340px,75vw);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:radial-gradient(circle at 32% 28%,#6b6b78 0,#1a1a22 38%,#000 72%);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 80px rgba(215,25,43,.25);display:grid;place-items:center;transition:transform .2s}
.big-ball{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,#1b1b22 0,#0a0a0e 55%,#000 100%)}
.big-ball:hover{transform:scale(1.02)}

/* the "surface" of the ball that rolls: the 8 sits one ball-height above the answer window */
.roller{position:absolute;inset:0;display:block}
.roller > .window,.roller > .eight-face{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.roller > .eight-face{top:-50%}
.eight-face{width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0,#f1f1f4 55%,#cfcfd6 100%);
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.6),inset 0 -6px 12px rgba(0,0,0,.15)}
.eight-face span{font-family:Inter,Arial,sans-serif;font-weight:800;color:#000;font-size:clamp(4rem,11vw,7.5rem);line-height:1;transform:translateY(-3%)}

/* fixed shine + shading on top so the ball looks like it rotates under the light */
.ball-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.38) 0,rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 40%),
             radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.9) 100%)}

/* tap: roll to the 8, shake up and down, roll back to the answer */
.big-ball.rolling .roller{animation:roll 2.2s cubic-bezier(.45,.05,.35,1)}
.big-ball.rolling{animation:shakeBall 2.2s ease-in-out}
@keyframes roll{
  0%{transform:translateY(0) scaleY(1)}
  22%{transform:translateY(100%) scaleY(.92)}
  32%{transform:translateY(88%)}
  42%{transform:translateY(106%)}
  52%{transform:translateY(90%)}
  62%{transform:translateY(102%)}
  70%{transform:translateY(100%) scaleY(1)}
  90%{transform:translateY(-4%) scaleY(.95)}
  100%{transform:translateY(0) scaleY(1)}}
@keyframes shakeBall{
  0%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-18px) rotate(-3deg)}
  35%{transform:translateY(14px) rotate(2deg)}
  45%{transform:translateY(-16px) rotate(-2deg)}
  55%{transform:translateY(12px) rotate(2deg)}
  65%{transform:translateY(-6px) rotate(0)}
  75%{transform:translateY(0)}}
.window{width:48%;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,#0b1440 0,#040820 60%,#000 100%);
  border:6px solid #050505;
  box-shadow:inset 0 10px 24px rgba(0,0,0,.95),inset 0 -4px 12px rgba(255,255,255,.04),0 0 0 2px #1c1c22,0 2px 6px rgba(255,255,255,.08)}
/* glass reflection over the liquid */
.window::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 60% 35% at 38% 18%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%),
             radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.75) 100%)}
.triangle{width:78%;aspect-ratio:1.12;margin-top:4%;
  background:linear-gradient(180deg,#2f43c9 0,#1c2a8f 100%);
  clip-path:polygon(50% 100%,0 6%,100% 6%);
  filter:blur(.3px) drop-shadow(0 0 6px rgba(60,90,255,.35));
  opacity:.9;display:flex;align-items:flex-start;justify-content:center;padding:11% 19% 0;
  color:rgba(255,255,255,.9);font-size:clamp(.5rem,1.2vw,.64rem);font-weight:700;text-transform:uppercase;line-height:1.15;text-align:center;letter-spacing:.02em;
  transition:opacity .4s, transform .4s}
.triangle.fade{opacity:0;transform:scale(.85) translateY(8%)}
.shake-hint{color:var(--muted);font-size:.85rem;margin-top:1rem}

/* sections */
.section{padding:5rem 5vw}
.section > *{max-width:1200px;margin-left:auto;margin-right:auto}
.section-alt{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:2rem;text-align:center}
.section-head p{color:var(--muted)}
.grid{display:grid;gap:1.4rem}
.video-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.realtor-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.listing-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card-body{padding:1.2rem 1.3rem 1.4rem;flex:1}
.card-body p{color:var(--muted);margin:.2rem 0;font-size:.95rem}
.tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:rgba(215,25,43,.22);color:var(--glow);padding:.2rem .6rem;border-radius:999px;margin-bottom:.6rem}

/* video */
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 40%,#3a070c,#0a0102);color:var(--muted);font-size:.9rem}
.video-soon strong{display:block;color:#fff;font-size:1rem;margin-top:.4rem}

/* filters + search */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.8rem}
.chip{background:var(--ink-3);border:1px solid var(--line);color:var(--text);padding:.45rem 1rem;border-radius:999px;cursor:pointer;font-size:.9rem;font-family:inherit}
.chip.active{background:var(--blue);border-color:var(--blue)}
.search-row{display:flex;justify-content:center;margin-bottom:1.8rem}
.search-row input{width:min(520px,100%)}

/* realtor */
.realtor-card .card-body{text-align:center}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;margin:0 auto .8rem;background:var(--ink);display:grid;place-items:center;font-family:"Bebas Neue";font-size:2rem;color:var(--glow);border:2px solid var(--line)}
.contact-links{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem}
.contact-links a{font-size:.88rem;text-decoration:none;border:1px solid var(--line);padding:.35rem .8rem;border-radius:999px;color:var(--text)}
.contact-links a:hover{border-color:var(--glow)}

/* listings */
.listing-photo{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--ink)}
.price{font-size:1.5rem;font-weight:700;color:#fff}
.stats{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0;font-size:.88rem}
.stats div{background:var(--ink);padding:.35rem .7rem;border-radius:8px}
.stats b{color:var(--glow)}

/* why randall */
.why{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:900px}
.compare-card{border-radius:var(--radius);padding:1.6rem 1.8rem;border:1px solid var(--line);background:var(--ink-3)}
.compare-card h3{margin-bottom:.8rem}
.compare-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.compare-card li{position:relative;padding-left:1.8rem;color:var(--muted)}
.compare-card li::before{position:absolute;left:0;top:0;font-weight:800}
.compare-card.bad li::before{content:"\2715";color:#6c6c80}
.compare-card.good{border-color:var(--blue);background:linear-gradient(160deg,rgba(215,25,43,.18),var(--ink-3) 60%)}
.compare-card.good li{color:var(--text)}
.compare-card.good li::before{content:"\2713";color:var(--glow)}
.why-cta{text-align:center;margin-top:2rem}
@media (max-width:860px){.compare{grid-template-columns:1fr}}

/* featured homes */
.home-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.8rem}
.home-controls .filters{margin:0;justify-content:flex-start}
.sort{flex-direction:row;align-items:center;gap:.6rem}
.photo-soon{display:grid;place-items:center;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;
  background:repeating-linear-gradient(135deg,#15151d 0 14px,#111118 14px 28px)}

/* callout + forms */
.callout{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.6rem;padding:1.6rem 2rem;border-radius:var(--radius);background:linear-gradient(120deg,rgba(215,25,43,.35),rgba(215,25,43,.08));border:1px solid var(--line)}
.callout h3{margin:0 0 .2rem}
.callout p{margin:0;color:var(--muted)}
.form-card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;max-width:820px;margin:2rem auto 0}
.collapsible{display:none}
.collapsible.open{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;margin:1rem 0 1.2rem}
.form-grid .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.88rem;font-weight:600;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-2);outline-offset:1px}
label.check{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:500;margin-bottom:1rem}
label.check input{margin-top:.3rem}
.fine{font-size:.82rem;color:var(--muted)}
.empty{text-align:center;color:var(--muted);margin-top:1rem}

/* homes steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1000px;margin:0 auto}
.step{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;text-align:center}
.step span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue);font-weight:700;margin-bottom:.6rem}
.step p{color:var(--muted);margin:0;font-size:.92rem}

/* footer */
.footer{background:#05050a;border-top:1px solid var(--line);padding:3rem 5vw 2rem}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;max-width:1200px;margin:0 auto 1.6rem}
.footer-links{display:flex;gap:1.2rem}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--glow)}
.disclosures{max-width:1200px;margin:0 auto;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.4rem}
.eho{font-size:1.1rem;margin-right:.3rem}
.copy{margin-top:1rem}

/* thanks page */
.thanks{min-height:80vh;display:grid;place-items:center;text-align:center;padding:4rem 5vw}

/* mobile */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:3rem}
  .hero-ctas{justify-content:center}
  .lead{margin:0 auto}
  .menu-btn{display:block}
  .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--ink-2);padding:1.2rem;border-bottom:1px solid var(--line)}
  .menu-open .links{display:flex}
  .steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:1.4rem}
  .section{padding:3.5rem 16px}
}