/* Physical surfaces and the changing-phone showcase. Load after landing.css. */
:root{--depth-ease:cubic-bezier(.2,.72,.25,1)}

/* Every card has thickness before it receives a pointer or scroll movement. */
.grid{perspective:1500px;gap:30px;padding-bottom:12px}
.depth-card{
  --tilt-x:0deg;--tilt-y:0deg;--light-x:32%;--light-y:15%;--card-lift:0px;
  --depth-rx:2deg;--depth-ry:-2deg;--depth-rz:0deg;
  transform-style:preserve-3d;isolation:auto;overflow:visible;
  transform:perspective(1300px) translateY(calc(-1 * var(--card-lift))) rotateX(calc(var(--depth-rx) + var(--tilt-x))) rotateY(calc(var(--depth-ry) + var(--tilt-y))) rotateZ(var(--depth-rz));
  transition:transform .32s var(--depth-ease),box-shadow .32s var(--depth-ease),border-color .25s;
  backface-visibility:hidden;
}
.card.depth-card:hover,.hero-price.depth-card:hover{
  transform:perspective(1300px) translateY(calc(-1 * var(--card-lift))) rotateX(calc(var(--depth-rx) + var(--tilt-x))) rotateY(calc(var(--depth-ry) + var(--tilt-y))) rotateZ(var(--depth-rz));
}
.depth-card::before,.depth-card::after{content:'';position:absolute;pointer-events:none;border-radius:inherit}
.depth-card::before{
  inset:5px 1px -7px;
  background:linear-gradient(140deg,#E0D5C3,#B7AB96 50%,#EEE5D5);
  transform:translateZ(-10px);
  box-shadow:0 13px 18px #0B1F3A14,0 30px 48px -17px #0B1F3A38;
}
.depth-card::after{
  inset:0;transform:translateZ(2px);border:1px solid #FFFFFF9C;
  background:radial-gradient(ellipse at var(--light-x) var(--light-y),#FFFFFF6B,transparent 64%),linear-gradient(135deg,#FFFFFF28,transparent 40%,#AFA18A0A);
}
.card.depth-card{
  padding:25px 23px 22px;border-radius:22px;border:1px solid #D9D3C8;
  background:linear-gradient(145deg,#FFFDF8 0%,#F4EFE5 58%,#EBE5D9 100%);
  box-shadow:inset 0 1px 0 #FFFFFF,0 5px 0 #DDD4C4,0 13px 0 -7px #BBAF9C,0 22px 36px -20px #0B1F3A66;
}
.card.depth-card:hover,.card.depth-card:focus-within{
  z-index:4;border-color:#E6AD7A;
  box-shadow:inset 0 1px 0 #FFFFFF,0 5px 0 #DFD2BE,0 13px 0 -7px #BD9D7D,0 34px 48px -20px #0B1F3A66;
}
.card.depth-card .chip{transform:translateZ(55px);border:1px solid #FFF;box-shadow:0 5px 10px #0B1F3A12;background:#FFFCF4}
.card.depth-card .shot{
  isolation:auto;overflow:visible;transform-style:preserve-3d;transform:translateZ(46px);
  height:248px;margin:15px 0 19px;background:transparent;
}
.card.depth-card .shot::before{
  content:'';position:absolute;width:82%;height:30%;left:9%;bottom:-1%;border-radius:50%;
  background:radial-gradient(ellipse,#5F5E5A35 0%,#867D6D1A 40%,transparent 70%);
  transform:translateZ(-39px) rotateX(60deg);pointer-events:none;
}
.card.depth-card .shot::after{
  content:'';position:absolute;inset:13% 8% 9%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse,#FFFFFFD6,#E8DED17A 57%,transparent 72%);
  transform:translateZ(-25px);pointer-events:none;
}
.card.depth-card .shot img{
  max-height:236px;transform:translateZ(28px) translateY(-7px) rotate(-2deg);
  filter:drop-shadow(8px 17px 10px #1B28382A);
  transition:opacity .35s,transform .38s var(--depth-ease),filter .38s;
}
.card.depth-card:hover .shot img,.card.depth-card:focus-within .shot img{
  transform:translateZ(48px) translateY(-16px) rotate(-3deg) scale(1.035);
  filter:drop-shadow(13px 25px 15px #1B283833);
}
.card.depth-card .card-body{position:relative;transform:translateZ(19px);transform-style:preserve-3d}
.card.depth-card .card-btn{position:relative;transform:translateZ(28px);padding-top:18px}
.card.depth-card .card-btn::after{border:1px solid #FFF;box-shadow:0 3px 0 #D8D0C2,0 7px 12px #0B1F3A13}
.card.depth-card .card-price{border-top-color:#C8BBA547}
.card.depth-card .card-brand{color:#586983!important}

/* The floating price tag and the calculator share the same warm material. */
.hero-price.depth-card{
  --depth-rx:5deg;--depth-ry:-6deg;--depth-rz:-3deg;
  background:linear-gradient(140deg,#FFFDF7,#FFF1DA);border:1px solid #FFE4BE;
  box-shadow:inset 0 1px 0 white,0 5px 0 #C8A986,0 26px 45px #00000042;
}
.hero-price.depth-card::before{background:linear-gradient(145deg,#EDCBA1,#AD8053);box-shadow:0 16px 28px #00000029}
.hero-price.depth-card>span{position:relative;transform:translateZ(15px)}
.hero-price.depth-card .hero-price-number{transform:translateZ(32px);text-shadow:0 2px 0 #FFF9ED}
.sim-box.depth-card{
  --depth-rx:1.2deg;--depth-ry:-1.8deg;
  background:linear-gradient(130deg,#FFFDF7 0%,#FFF3DE 58%,#EDE0CA 100%);
  border:1px solid #FFF9EB;
  box-shadow:inset 0 1px 0 #FFFFFF,0 7px 0 #CBBDA5,0 16px 0 -6px #857A69,0 40px 75px #00000042;
}
.sim-box.depth-card::before{background:linear-gradient(135deg,#EDE0C8,#A99A81);box-shadow:0 25px 42px #00000026}
.sim-box.depth-card::after{opacity:.58}
.sim-box.depth-card>*{position:relative;transform:translateZ(13px)}
.sim-box.depth-card .field select{background:linear-gradient(#FFFFFF,#FFFAEF);box-shadow:inset 0 1px 0 #FFF,0 3px 0 #D8CDBB,0 7px 12px #0B1F3A08;border-color:#CEC0A9}
.sim-box.depth-card .sim-main-result{transform:translateZ(25px);border-color:#C6AD864F}
.sim-box.depth-card .sim-apply{transform:translateZ(25px);box-shadow:0 5px 0 #A74100,0 13px 23px #CC5E0129}
.sim-box.depth-card .sim-apply:hover{transform:translateZ(29px) translateY(-3px)}
.sim-out{gap:13px}
.out{
  position:relative;min-width:0;padding:14px 13px 15px;border:1px solid #FFFFFFC7;border-radius:12px;
  background:linear-gradient(130deg,#FFFFFFB8,#EAE0CF8F);
  box-shadow:inset 0 1px 0 #FFFFFF,0 3px 0 #D3C5AF,0 10px 15px -10px #0B1F3A44;
}
.out .out-l{color:#655F55;line-height:1.5}
.total-out{padding:15px 13px;background:linear-gradient(130deg,#152E4B,#0B1F3A);border-color:#55708E;color:#FFF9EF;gap:13px;box-shadow:inset 0 1px 0 #FFFFFF24,0 4px 0 #07162B,0 11px 18px #0B1F3A20}
.total-out .out-l{color:#CBD5E3}
.total-out .out-v{white-space:nowrap}
/* Opacity flattens a preserve-3d surface and exposes its back layer. Reveal by moving it. */
.has-motion .depth-card.reveal{opacity:1;transition:transform .32s var(--depth-ease),box-shadow .32s,border-color .25s}
.has-motion .depth-card.reveal:not(.in){transform:perspective(1300px) translateY(calc(22px - var(--card-lift))) rotateX(calc(var(--depth-rx) + var(--tilt-x))) rotateY(calc(var(--depth-ry) + var(--tilt-y))) rotateZ(var(--depth-rz))}

/* The simulator's product gallery: a lit stage, not a flat image container. */
.sim-preview.showcase{
  display:block;width:100%;max-width:490px;height:440px;margin:30px auto 0;
  background:transparent;border:0;border-radius:0;isolation:auto;perspective:1000px;
  transform-style:preserve-3d;overflow:visible;
}
.sim-preview.showcase::before{
  content:'';position:absolute;left:5%;right:5%;top:3%;bottom:21%;border-radius:50%;
  background:radial-gradient(ellipse,#FF6A002C 0%,#FF6A0012 42%,transparent 69%);
  pointer-events:none;animation:showcase-glow 7s ease-in-out infinite;
}
.showcase-orbit{position:absolute;pointer-events:none;border-radius:50%;border:1px solid #FF9A4D57;left:4%;right:4%;height:76%;top:2%;transform:rotateX(63deg) rotateZ(-24deg);box-shadow:0 0 20px #FF6A0008}
.showcase-orbit.orbit-b{left:0;right:0;top:5%;height:72%;border-color:#BFD8F124;transform:rotateX(62deg) rotateZ(28deg)}
.showcase-platform{
  position:absolute;left:14%;right:14%;bottom:91px;height:104px;border-radius:50%;
  transform:rotateX(65deg) translateZ(-24px);
  background:radial-gradient(ellipse at 50% 30%,#B6CDE32E,#6A86A91C 54%,#112843 73%);
  border:1px solid #C8DFF44A;box-shadow:0 8px 0 #07172D,0 10px 0 #FF8A333D,0 25px 28px #00000050,inset 0 1px 20px #C8DFF41A;
  pointer-events:none;
}
.showcase-platform::after{content:'';position:absolute;inset:12px 23px;border-radius:50%;border:1px solid #FF9A4D4D;background:radial-gradient(ellipse,#FF6A0017,transparent 68%)}
.showcase-screen{
  position:absolute;inset:5px 3% 88px;perspective:950px;transform-style:preserve-3d;
  transform:translateZ(35px) rotateY(-7deg) rotateX(2deg);
  animation:showcase-drift 7s ease-in-out infinite;
}
.sim-preview.showcase img.showcase-phone{
  position:absolute;left:50%;top:48%;width:92%;height:310px;max-width:390px;
  object-fit:contain;mix-blend-mode:normal;opacity:1;
  transform:translate(-50%,-50%) translateZ(30px) rotateZ(-4deg);
  filter:drop-shadow(13px 28px 17px #00000061);
  transition:opacity .34s ease,transform .6s var(--depth-ease);
  backface-visibility:hidden;
}
.sim-preview.showcase img.showcase-phone.standby{opacity:0;pointer-events:none;transform:translate(-36%,-45%) translateZ(-35px) rotateY(22deg) rotateZ(6deg) scale(.9)}
.showcase-screen[data-phase="out"] img.showcase-phone:not(.standby){opacity:0;transform:translate(-72%,-57%) translateZ(-45px) rotateY(-24deg) rotateZ(-12deg) scale(.9)}
.showcase-screen[data-phase="in"] img.showcase-phone:not(.standby){animation:showcase-arrive .7s var(--depth-ease) both}
.showcase-caption{
  position:absolute;left:7%;right:7%;bottom:62px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:15px;z-index:3;color:#EDF4FF;
}
.showcase-caption #sim-model{font-size:15px;font-weight:900;line-height:1.3;letter-spacing:-.025em;max-width:75%}
.showcase-caption #showcase-brand{font:500 8px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#FFAB6B;text-align:right}
.showcase-controls{
  position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;z-index:4;
}
.showcase-controls>button{
  display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;
  border:1px solid #BFD3ED45;background:linear-gradient(145deg,#2B4360,#122842);color:white;
  box-shadow:inset 0 1px 0 #FFFFFF1C,0 3px 0 #030D1B,0 8px 12px #0000001F;
  font-size:19px;line-height:1;transition:background .2s,border-color .2s,transform .2s;
}
.showcase-controls>button:hover{background:#314E70;border-color:#FF9A4D;transform:translateY(-2px)}
.showcase-controls>button:focus-visible{outline-color:#FF9A4D;outline-offset:4px}
#showcase-autoplay{width:auto;min-width:76px;padding:0 15px;border-radius:100px;font-size:10px;font-weight:900}
#showcase-autoplay>span{pointer-events:none}
#showcase-dots{display:flex;align-items:center;justify-content:center;gap:0;min-height:32px;min-width:0;max-width:180px;flex:1 1 auto}
#showcase-dots button{position:relative;display:block;flex:1 1 21px;min-width:10px;width:21px;height:32px;padding:0;background:transparent;border:0;border-radius:8px;color:transparent;font-size:0}
#showcase-dots button::before{content:'';position:absolute;left:50%;top:13px;margin-left:-3.5px;width:7px;height:7px;border:1px solid #9FB5CF;border-radius:50%;background:transparent;transition:background .2s,transform .2s}
#showcase-dots button[aria-current="true"]::before,#showcase-dots button[aria-pressed="true"]::before,#showcase-dots button.active::before,#showcase-dots button.is-active::before{background:var(--orange);border-color:var(--orange);transform:scale(1.15)}
#showcase-dots button:focus-visible{outline-offset:0;outline-width:2px}
@keyframes showcase-drift{0%,100%{transform:translateZ(35px) translateY(1px) rotateY(-7deg) rotateX(2deg)}50%{transform:translateZ(50px) translateY(-11px) rotateY(7deg) rotateX(-2deg)}}
@keyframes showcase-glow{0%,100%{opacity:.7;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@keyframes showcase-arrive{from{opacity:0;transform:translate(-30%,-43%) translateZ(-40px) rotateY(26deg) rotateZ(7deg) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) translateZ(30px) rotateY(0deg) rotateZ(-4deg) scale(1)}}

/* Supporting cards use a quieter bevel so reading still feels effortless. */
.steps{gap:15px}
.step,.step:last-child{
  border:1px solid #DDD5C8;border-radius:17px;padding:26px 23px;background:linear-gradient(135deg,#FFFFFF,#F1EBE0);
  box-shadow:inset 0 1px 0 #FFFFFF,0 4px 0 #D5CBB9,0 14px 24px -16px #0B1F3A55;
  transition:box-shadow .3s,border-color .3s,transform .3s;
}
.step:hover{border-color:#DCA474;box-shadow:inset 0 1px 0 white,0 4px 0 #D5CBB9,0 20px 30px -17px #0B1F3A55}
.step-number{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:#FFF6E8;box-shadow:0 3px 0 #E4C7A5;border:1px solid #FFF;margin-top:0}
.step-arrow{margin-top:3px}
.faqs{border:0;display:flex;flex-direction:column;gap:14px}
.faq{border:1px solid #D7CDBF;border-radius:15px;background:linear-gradient(125deg,#FFFDF8,#EEE6D9);box-shadow:inset 0 1px 0 #FFFFFF,0 4px 0 #CCBFAE,0 12px 20px -12px #0B1F3A40;transition:border-color .25s,box-shadow .25s}
.faq summary{padding:21px 22px}
.faq summary>span{width:27px;height:27px;display:grid;place-items:center;flex:none;background:#FFF9EF;border-radius:50%;box-shadow:0 2px 0 #D5C5AE;font-size:22px}
.faq[open]{border-color:#DDAA79;box-shadow:inset 0 1px 0 #FFFFFF,0 4px 0 #CCBFAE,0 19px 27px -14px #0B1F3A44}
.faq-body{padding:0 22px 22px;max-width:none}

@media(max-width:1100px){
  .grid{gap:23px}.card.depth-card{padding:20px 18px;border-radius:19px}
  .card.depth-card .shot{height:214px}.card.depth-card .shot img{max-height:203px}
  .sim-preview.showcase{height:415px}.sim-preview.showcase img.showcase-phone{height:285px}
  .showcase-caption{left:2%;right:2%}.showcase-caption #sim-model{font-size:13px}
  .showcase-controls{gap:7px}#showcase-dots button{width:17px}
  .step,.step:last-child{padding:23px 20px;gap:18px}
}
@media(max-width:760px){
  .grid{gap:24px 15px;padding-top:6px}
  .depth-card,.card.depth-card:hover,.hero-price.depth-card:hover{
    transform:translateY(calc(-1 * var(--card-lift)));transform-style:preserve-3d;
  }
  .depth-card::before{inset:5px 1px -6px;transform:translateZ(-6px);box-shadow:0 13px 20px -10px #0B1F3A4A}
  .card.depth-card{padding:14px 12px 15px;border-radius:15px;box-shadow:inset 0 1px 0 white,0 4px 0 #D7CDBD,0 10px 0 -5px #BCAF9B,0 20px 25px -19px #0B1F3A77}
  .card.depth-card .shot{height:148px;margin:14px 0 15px;transform:translateZ(24px)}
  .card.depth-card .shot img{max-height:142px;max-width:98%;transform:translateZ(18px) translateY(-5px) rotate(-2deg);filter:drop-shadow(6px 13px 7px #1B28382C)}
  .card.depth-card.depth-in-view .shot img{transform:translateZ(25px) translateY(-9px) rotate(-2deg) scale(1.025)}
  .card.depth-card .card-body{transform:translateZ(8px)}.card.depth-card .card-btn{transform:translateZ(12px);padding-top:12px}
  .card.depth-card .chip{transform:translateZ(28px)}
  .hero-price.depth-card{box-shadow:inset 0 1px 0 white,0 4px 0 #C8A986,0 22px 34px #00000042}
  .hero-price.depth-card .hero-price-number{transform:translateZ(18px)}
  .simulator{gap:40px;overflow:hidden}.sim-intro{min-width:0}
  .sim-preview.showcase{display:block;height:360px;width:100%;max-width:440px;margin:25px auto 1px}
  .showcase-screen{inset:2px 1% 78px}
  .sim-preview.showcase img.showcase-phone{height:255px;width:91%;max-width:325px;top:48%}
  .showcase-platform{bottom:82px;height:87px;left:15%;right:15%}
  .showcase-orbit{top:0;height:76%;left:5%;right:5%}.showcase-orbit.orbit-b{height:72%;top:3%}
  .showcase-caption{left:3%;right:3%;bottom:57px}
  .showcase-caption #sim-model{font-size:14px}.showcase-caption #showcase-brand{font-size:7px}
  .showcase-controls{gap:7px}#showcase-dots button{width:19px}
  .sim-box.depth-card{border-radius:20px;box-shadow:inset 0 1px 0 #FFFFFF,0 6px 0 #CBBDA5,0 12px 0 -5px #857A69,0 32px 45px #00000038}
  .sim-box.depth-card>*{transform:translateZ(6px)}.sim-box.depth-card .sim-main-result{transform:translateZ(12px)}
  .out{padding:12px 10px;border-radius:10px}.out .out-l{font-size:8px}.total-out{padding:13px 11px}.total-out .out-l{max-width:20ch}
  .steps{gap:17px}.step,.step:last-child{padding:23px 17px;gap:15px;border-radius:15px}
  .step-number{width:27px;height:29px;font-size:9px}.step h3{font-size:21px}.step p{font-size:12px;line-height:1.65}.step-arrow{font-size:21px}
  .faq summary{padding:20px 16px;gap:16px}.faq-body{padding:0 16px 21px}
  .has-motion .depth-card.reveal:not(.in){transform:translateY(18px)}
}
@media(max-width:380px){
  .grid{gap:22px 12px}.card.depth-card{padding:12px 10px 13px}
  .card.depth-card .shot{height:131px}.card.depth-card .shot img{max-height:126px}
  .sim-preview.showcase{height:350px}.sim-preview.showcase img.showcase-phone{height:245px}
  .showcase-controls{gap:5px}.showcase-controls>button{width:42px;height:42px}#showcase-autoplay{min-width:65px;padding:0 11px}
  #showcase-dots button{width:16px}#showcase-dots button::before{width:6px;height:6px;margin-left:-3px}
  .showcase-caption #sim-model{font-size:13px}.out-v{font-size:17px}.total-out .out-v{font-size:17px}
  .step,.step:last-child{padding:22px 14px;gap:13px}.step h3{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .depth-card,.card.depth-card:hover,.hero-price.depth-card:hover,.has-motion .depth-card.reveal:not(.in){transform:none!important;transition:none!important;opacity:1}
  .card.depth-card .shot img,.card.depth-card:hover .shot img,.card.depth-card.depth-in-view .shot img{transform:translateZ(18px) translateY(-5px);transition:none}
  .showcase-screen{animation:none!important;transform:translateZ(30px)}
  .sim-preview.showcase::before{animation:none!important;opacity:.85;transform:none}
  .sim-preview.showcase img.showcase-phone{animation:none!important;transition:none!important;transform:translate(-50%,-50%) translateZ(20px)}
  .showcase-screen[data-phase="out"] img.showcase-phone:not(.standby){transform:translate(-50%,-50%) translateZ(20px)}
  .showcase-controls>button:hover{transform:none}.faq[open] .faq-body{animation:none}
}

/* Keep the model caption centered and independent from the phone layers. */
.showcase-caption{flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.showcase-caption #sim-model{max-width:100%;text-align:center}
.showcase-caption #showcase-brand{text-align:center;font-size:7px}
.showcase.has-matte .showcase-phone:not(.standby){background:#FFF5E6;border-radius:24px;padding:12px}
.sim-preview.showcase:not(.showcase-in-view) .showcase-screen,.sim-preview.showcase:not(.showcase-in-view)::before{animation-play-state:paused}
/* Give the floating stage a clean margin above its caption. */
.showcase-screen,.showcase-orbit,.showcase-platform{translate:0 -18px}
.showcase-controls>button:disabled{opacity:.45;cursor:default}
.showcase-controls>button:disabled:hover{transform:none}