/* Sold Reality hero nitpick preview — mobile-native comparison stage only. */

.hero-grid{
  position:relative;
  min-height:760px;
  grid-template-columns:minmax(400px,.86fr) minmax(500px,1.14fr);
  overflow:hidden;
  background:
    radial-gradient(circle at 83% 48%,rgba(255,89,35,.14),transparent 25%),
    radial-gradient(circle at 72% 68%,rgba(255,41,108,.055),transparent 31%),
    radial-gradient(circle at 91% 30%,rgba(91,91,255,.055),transparent 28%),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.026) 1px,transparent 1.4px) 0 0/5px 5px,
    #090a0b!important;
}
.hero-grid:before{
  content:"";
  position:absolute;
  width:720px;
  height:720px;
  right:-190px;
  top:20px;
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 42%,rgba(255,116,52,.13),transparent 31%),
    radial-gradient(circle at 64% 56%,rgba(255,54,121,.075),transparent 36%);
  filter:blur(26px);
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:4;
  padding:90px 18px 54px 54px;
}
.hero-copy h1{
  position:relative;
  z-index:3;
  width:calc(100% + 86px);
  margin-top:15px;
  text-shadow:0 22px 70px rgba(0,0,0,.32);
}
.hero-copy>p{max-width:455px}

.hero-proof{
  position:relative;
  min-width:0;
  padding:58px 36px 76px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  perspective:1200px;
  overflow:visible;
}
.hero-proof:before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:min(650px,92%);
  height:650px;
  transform:translate(-43%,-49%);
  border-radius:48%;
  background:
    radial-gradient(ellipse at 38% 68%,rgba(255,103,34,.27),transparent 43%),
    radial-gradient(ellipse at 70% 28%,rgba(255,49,120,.13),transparent 42%),
    radial-gradient(ellipse at 72% 68%,rgba(89,82,255,.10),transparent 44%);
  filter:blur(42px);
  opacity:.9;
  pointer-events:none;
}
.hero-proof:after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:386px;
  height:612px;
  transform:translate(-40%,-46%) rotate(5deg);
  border:1px solid rgba(255,255,255,.075);
  border-radius:44px;
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.004));
  box-shadow:0 30px 90px rgba(0,0,0,.32),0 0 70px rgba(255,88,31,.045);
  opacity:.72;
  pointer-events:none;
}

.product-window{
  --hero-rx:1deg;
  --hero-ry:-4deg;
  position:relative;
  z-index:2;
  width:min(414px,calc(100% - 72px));
  padding:10px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.21);
  border-radius:46px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 18%,rgba(7,8,9,.96) 46%,#030404 100%);
  box-shadow:
    0 52px 120px rgba(0,0,0,.68),
    0 16px 34px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,0,0,.55),
    0 0 80px rgba(255,91,31,.075),
    inset 0 0 0 1px rgba(255,255,255,.045);
  transform:perspective(1150px) rotateX(var(--hero-rx)) rotateY(var(--hero-ry)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .18s ease-out,box-shadow .28s ease;
}
.product-window:hover{
  box-shadow:
    0 58px 132px rgba(0,0,0,.72),
    0 18px 38px rgba(0,0,0,.46),
    0 0 0 1px rgba(0,0,0,.5),
    0 0 92px rgba(255,91,31,.11),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.windowbar{
  position:absolute;
  z-index:9;
  left:50%;
  top:-35px;
  width:max-content;
  max-width:calc(100% - 12px);
  height:27px;
  min-height:0;
  padding:0 10px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(8,9,10,.76);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#8c8d89;
  gap:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  white-space:nowrap;
}
.windowbar span:first-child{color:#c7c5bf}

.compare{
  --scene-native-width:390px;
  --scene-native-height:844px;
  --scene-fit:1;
  position:relative;
  height:620px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:36px;
  background:#050606;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.68),
    inset 0 18px 38px rgba(255,255,255,.018);
}
.compare:after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(112deg,rgba(255,255,255,.055) 0%,transparent 18%,transparent 67%,rgba(255,255,255,.025) 84%,transparent 100%),
    radial-gradient(ellipse at 46% -8%,rgba(255,255,255,.065),transparent 36%);
  mix-blend-mode:screen;
}
.compare iframe{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:var(--scene-native-width)!important;
  height:var(--scene-native-height)!important;
  max-width:none!important;
  border-radius:35px;
  transform:scale(var(--scene-fit));
  transform-origin:top left;
  transition:opacity .32s ease,filter .32s ease,transform .22s ease;
}
.compare .label{
  top:13px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(5,6,7,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#d0cec8;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:opacity .22s ease;
}
.compare .label.left{left:13px}
.compare .label.right{right:13px}
.cut{
  width:2px;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.82) 12%,#fff 35%,#ff7840 52%,#fff 70%,rgba(255,255,255,.8) 88%,transparent 100%);
  box-shadow:0 0 11px rgba(255,255,255,.46),0 0 28px rgba(255,98,38,.30);
  transition:opacity .22s ease;
}
.cut:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:130px;
  transform:translate(-50%,-50%);
  background:rgba(255,100,35,.12);
  filter:blur(11px);
  pointer-events:none;
}
.knob{
  width:50px;
  height:50px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(8,9,10,.78);
  color:#fff;
  font-size:17px;
  font-weight:600;
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:
    0 0 0 7px rgba(255,255,255,.035),
    0 12px 32px rgba(0,0,0,.44),
    0 0 28px rgba(255,98,38,.30),
    inset 0 0 0 1px rgba(255,255,255,.045);
  transition:opacity .22s ease;
}
.knob:after{
  content:"DRAG";
  position:absolute;
  left:50%;
  top:62px;
  transform:translateX(-50%);
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(5,6,7,.72);
  color:#b4b3ae;
  font:800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
  opacity:1;
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.compare.hero-intro-done .knob:after{
  opacity:0;
  transform:translate(-50%,5px);
}
.proof-foot{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:-43px;
  width:max-content;
  max-width:calc(100% - 18px);
  min-height:30px;
  padding:0 11px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(8,9,10,.74);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  gap:12px;
  white-space:nowrap;
}
.proof-foot strong{color:#d9d6cf;transition:opacity .22s ease}

.product-window.hero-scene-changing .compare iframe{
  opacity:0;
  filter:blur(3px) saturate(.72);
}
.product-window.hero-scene-changing .compare .label,
.product-window.hero-scene-changing .cut,
.product-window.hero-scene-changing .knob,
.product-window.hero-scene-changing .proof-foot strong{
  opacity:.22;
}

/* All rotating scenes use the scene library's canonical 390 × 844 mobile viewport.
   The parent JS measures the actual comparison width and scales this viewport to fit it exactly. */

@media(max-width:1120px) and (min-width:1001px){
  .hero-grid{grid-template-columns:minmax(360px,.9fr) minmax(440px,1.1fr)}
  .hero-copy{padding-left:40px}
  .hero-copy h1{width:calc(100% + 46px)}
  .product-window{width:min(390px,calc(100% - 54px))}
  .compare{height:596px}
  .hero-proof:after{width:365px;height:590px}
}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:64px 28px 30px}
  .hero-copy h1{width:auto}
  .hero-proof{
    min-height:760px;
    padding:58px 24px 88px;
  }
  .product-window{
    width:min(404px,calc(100% - 48px));
    transform:none!important;
  }
  .hero-proof:before{transform:translate(-50%,-49%)}
  .hero-proof:after{transform:translate(-44%,-46%) rotate(4deg)}
}

@media(max-width:700px){
  .hero-copy{padding:54px 22px 22px}
  .hero-proof{
    min-height:662px;
    padding:50px 10px 76px;
  }
  .hero-proof:before{width:440px;height:560px;filter:blur(36px)}
  .hero-proof:after{display:none}
  .product-window{
    width:min(344px,calc(100% - 28px));
    padding:8px;
    border-radius:39px;
  }
  .compare{height:540px;border-radius:31px}
  .compare iframe{border-radius:30px}
  .windowbar{top:-32px;font-size:7px;gap:8px}
  .windowbar span:first-child{display:none}
  .proof-foot{bottom:-40px;width:auto;max-width:calc(100% - 8px)}
  .proof-foot span{display:none}
  .knob{width:46px;height:46px}
  .knob:after{top:58px}
}

@media(prefers-reduced-motion:reduce){
  .product-window{transition:none!important;transform:none!important}
  .knob:after{display:none}
  .compare iframe{transition:none!important}
}