:root{
  --bg:#1f2d38;
  --bg-soft:#2c3e4d;
  --card:#f4f4f2;
  --card2:#eeefed;
  --ink: #2A0A10; 
  --muted:#67696c;
  --accent:#ea1d46;
  --ease:cubic-bezier(.22,.82,.24,1);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  overflow-x:hidden;
  background:
    radial-gradient(900px 520px at 50% 43%,rgba(255,255,255,.045),transparent 64%),
    radial-gradient(560px 380px at 56% 48%,rgba(234,29,70,.05),transparent 68%),
    var(--bg);
  color:#f4f4f2;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.intro{
  position:relative;
  z-index:10;
  max-width:760px;
  margin:0 auto;
  padding:96px 24px 40px;
}
.intro h1{
  color:#f4f4f2;
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 14px;
}
.intro p{
  color:rgba(244,244,242,.72);
  font-size:clamp(13px,1vw,15px);
  line-height:1.65;
  margin:0;
}
.faq{
  position:relative;
  z-index:10;
  max-width:760px;
  margin:0 auto;
  padding:24px 24px 40px;
}
.faq h2{
  color:#f4f4f2;
  font-size:clamp(17px,1.8vw,21px);
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 18px;
}
.faq-list{
  margin:0;
}
.faq-item{
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.faq-item dt{
  color:#f4f4f2;
  font-size:14px;
  font-weight:700;
  margin:0 0 6px;
}
.faq-item dd{
  margin:0;
  color:rgba(244,244,242,.72);
  font-size:13px;
  line-height:1.6;
}
.legal{
  position:relative;
  z-index:10;
  display:flex;
  gap:18px;
  justify-content:center;
  padding:16px 24px 40px;
}
.legal a{
  color:rgba(244,244,242,.55);
  font-size:11px;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.legal a:hover{color:#f4f4f2}
.page{
  position:relative;
  height:100dvh;
  padding:0 24px 108px;
}
.stage{
  position:relative;
  height:calc(100dvh - 108px);
  min-height:480px;
  display:grid;
  place-items:center;
  perspective:1400px;
}
.cards{
  position:relative;
  width:min(95vw,1100px);
  height:480px;
  flex:0 0 auto;
  outline:none;
}
.card{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:clamp(350px,36vw,470px);
  aspect-ratio:1.63 / 1;
  transform-style:preserve-3d;
  transition:transform 760ms var(--ease),box-shadow 760ms var(--ease);
  will-change:transform;
}
.outer-card{
  left:50%;
  z-index:3;
  border-radius:8px;
  transform:translate(-50%,-50%) translateX(0) rotateZ(0deg);
  background:var(--card);
  color:var(--ink);
  padding:40px;
  box-shadow:0 30px 80px rgba(0,0,0,.48),0 10px 28px rgba(0,0,0,.22);
  overflow:hidden;
  -webkit-mask-image:radial-gradient(circle 25px at 100% 50%,transparent 0 24px,#000 25px);
  mask-image:radial-gradient(circle 25px at 100% 50%,transparent 0 24px,#000 25px);
}
.inner-card{
  left:50%;
  z-index:2;
  background:transparent;
  color:var(--ink);
  transform-style:preserve-3d;
}
.inner-flipper{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform 700ms var(--ease);
}
.cards.show-p1 .inner-flipper,
.cards.show-p2 .inner-flipper,
.cards.show-p3 .inner-flipper{transform:rotateY(180deg)}
.inner-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:8px;
  overflow:hidden;
  transform-style:preserve-3d;
}
.inner-front{
  display:flex;
  flex-direction:column;
  background:#e51d43;
  color:var(--ink);
  padding:28px 42px 26px var(--inner-padl,104px);
}
.inner-back{
  transform:rotateY(180deg);
  background:var(--card);
  color:var(--ink);
  border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(23,24,26,.06);
}
.inner-back::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(600px 340px at 88% 12%,rgba(234,29,70,.08),transparent 60%);
  pointer-events:none;
}
.inner-backface{
  position:relative;
  z-index:1;
  height:100%;
  padding:30px 36px 26px;
  display:flex;
  flex-direction:column;
}
.back-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(23,24,26,.06);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.back-close svg{width:15px;height:15px;display:block}
.back-close:hover,.back-close:focus-visible{background:var(--accent);color:#fff;transform:rotate(90deg)}
.back-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.back-kicker{
  margin:0 0 4px;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.back-title{
  margin:0 0 12px;
  color:var(--ink);
  font-size:clamp(22px,2vw,27px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:700;
}
.back-copy{
  margin:0;
  color:#3a3c40;
  font-size:clamp(12px,1vw,13.5px);
  line-height:1.5;
  max-width:300px;
}
.back-fact{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(23,24,26,.12);
  display:flex;
  gap:8px;
  align-items:baseline;
}
.back-fact b{
  color:var(--accent);
  font-size:clamp(20px,1.8vw,25px);
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.back-fact span{
  color:var(--muted);
  font-size:clamp(10px,.85vw,12px);
  line-height:1.3;
}
.back-page{display:none}
.cards.show-p1 .back-p1,
.cards.show-p2 .back-p2,
.cards.show-p3 .back-p3{display:block}
.inner-front::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  background:linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.32) 50%,transparent 54%);
  transform:translateX(-115%);
  transition:transform 1.25s var(--ease);
  pointer-events:none;
  z-index:2;
}
.cards:hover .inner-front::before,.cards.is-open .inner-front::before{transform:translateX(115%)}
.cards{--card-w:clamp(350px,36vw,470px);--card-h:calc(var(--card-w)/1.63);--inner-padl:104px;--outer-x:0px;--inner-x:0px;--outer-rot:0deg;--inner-rot:0deg}
.cards:hover,.cards.is-open{--outer-x:clamp(-190px,-13vw,-150px);--inner-x:clamp(245px,18vw,300px);--outer-rot:-.28deg;--inner-rot:.28deg}
.cards:hover .outer-card,.cards.is-open .outer-card{
  transform:translate(-50%,-50%) translateX(var(--outer-x)) rotateZ(var(--outer-rot));
  box-shadow:0 34px 88px rgba(0,0,0,.56),0 12px 30px rgba(0,0,0,.28);
}
.cards:hover .inner-card,.cards.is-open .inner-card{
  transform:translate(-50%,-50%) translateX(var(--inner-x)) rotateZ(var(--inner-rot));
  box-shadow:0 28px 72px rgba(0,0,0,.33),0 10px 25px rgba(0,0,0,.16);
}
.term{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  font-size:clamp(11px,.95vw,13px);
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.01em;
  transition:color .2s var(--ease);
}
.term::after{
  content:"";
  display:block;
  width:100%;
  height:2px;
  margin-top:3px;
  background:var(--paper,#fff);
  border-radius:1px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.term:hover,.term:focus-visible,.term.is-active{color:var(--ink)}
.term:hover::after,.term:focus-visible::after,.term.is-active::after{transform:scaleX(1)}
.term:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.year-scale{
  position:absolute;
  left:10px;
  top:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:rgba(23,24,26,.5);
  font-size:7px;
  line-height:1;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  user-select:none;
}
.year-scale::before{
  content:"";
  position:absolute;
  left:0;
  top:-18px;
  bottom:-18px;
  width:1px;
  background:linear-gradient(180deg,transparent 0,currentColor 15px,currentColor calc(100% - 15px),transparent 100%);
  opacity:.5;
}
.year-scale span{
  position:relative;
  padding-left:9px;
}
.year-scale i{
  position:absolute;
  left:-6px;
  top:50%;
  width:5px;
  height:1px;
  background:currentColor;
}
.year-scale span:first-child,.year-scale span:last-child{color:rgba(23,24,26,.2)}
.year-scale::after{
  content:"";
  position:absolute;
  left:-6px;
  top:-14px;
  bottom:-14px;
  width:2.5px;
  background:
    linear-gradient(currentColor,currentColor) 0 0/2.5px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/2.5px 1px no-repeat;
  opacity:.35;
}
.card-front{
  position:relative;
  width:100%;
  height:100%;
  text-align:right;
}
.brand-link{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:block;
  width:122px;
}
.brand-link .brand-mark{display:block;width:100%;height:auto;margin:0}
.brand-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.front-role{
  position:absolute;
  right:0;
  top:calc(50% + 38px);
  color:#606266;
  font-size:clamp(13px,1.05vw,15px);
  line-height:1.35;
  max-width:250px;
  letter-spacing:.005em;
}
.inner-content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.inner-copy{
  margin:auto 0 18px;
  max-width:305px;
}
.inner-title{
  margin:0 0 14px;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:700;
}
.inner-title .accent{color:#fff}
.inner-copy p:not(.inner-title){color:#ffe3e9}
.inner-copy p:not(.inner-title){
  margin:0;
  max-width:305px;
  color:#ffffff;
  font-size:clamp(12px,1.05vw,14px);
  line-height:1.5;
  letter-spacing:-.008em;
}
.inner-foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.25);
  color:#ffd7df;
  font-size:clamp(12px,1.05vw,14px);
  line-height:1.3;
}
.inner-foot .accent{color:#fff;font-weight:400;letter-spacing:.12em}
.inner-values{
  display:flex;
  gap:14px 22px;
  margin-top:10px;
  padding-top:10px;
  padding-bottom:2px;
  border-top:1px solid rgba(23,24,26,.12);
}
.clients{
  position:fixed;
  left:0;right:0;bottom:0;
  height:108px;
  z-index:50;
  display:flex;
  align-items:center;
  background:#1a2730;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -14px 34px rgba(0,0,0,.28);
  transform:translateY(160px);
  transition:transform .6s var(--ease);
  will-change:transform;
}
.clients.is-visible{transform:translateY(0)}
.testimonials{
  position:fixed;
  left:0;right:0;bottom:0;
  height:108px;
  z-index:50;
  display:flex;
  align-items:center;
  background:#1a2730;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -14px 34px rgba(0,0,0,.28);
  transform:translateY(160px);
  transition:transform .6s var(--ease);
  will-change:transform;
}
.testimonials.is-visible{transform:translateY(0)}
.testimonials-inner{
  width:100%;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
}
.testimonials-label{
  flex:0 0 auto;
  width:70px;
  color:rgba(244,244,242,.45);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.testimonial-track{
  min-width:0;
  flex:1;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,black 3%,black 97%,transparent);
}
.testimonial-row{
  width:max-content;
  display:flex;
  align-items:stretch;
  gap:24px;
  animation:drift 64s linear infinite;
  padding:0 20px;
}
.testimonial-card{
  flex:0 0 auto;
  width:300px;
  padding:14px 18px;
  background:var(--card);
  border-radius:7px;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
  color:var(--ink);
}
.testimonial-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.testimonial-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  flex:0 0 auto;
  display:block;
  object-fit:cover;
  box-shadow:0 0 0 2px rgba(234,29,70,.35);
}
.testimonial-who{min-width:0}
.testimonial-name{
  font-size:11px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
}
.testimonial-role{
  font-size:9px;
  color:var(--muted);
  line-height:1.3;
}
.testimonial-quote{
  margin:8px 0 0;
  font-size:11px;
  line-height:1.45;
  color:#3a3c40;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.testimonial-row:hover{animation-play-state:paused}
.clients-inner{
  width:100%;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
}
.clients-label{
  flex:0 0 auto;
  width:70px;
  color:rgba(244,244,242,.45);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.client-track{
  min-width:0;
  flex:1;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,black 3%,black 97%,transparent);
}
.client-row{
  width:max-content;
  display:flex;
  align-items:center;
  gap:34px;
  white-space:nowrap;
  animation:drift 48s linear infinite;
  padding:0 20px;
}
.client-logo{
  width:148px;
  height:48px;
  flex:0 0 148px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 12px;
  background:var(--card);
  border-radius:7px;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.client-logo:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(0,0,0,.3)}
.client-logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:140px;
  max-height:32px;
  object-fit:contain;
}
.client-fallback{
  display:none;
  color:#3a3c40;
  font-size:9px;
  line-height:1.05;
  text-align:center;
  font-weight:750;
  letter-spacing:.02em;
}
.client-logo img.is-broken{display:none}
.client-logo img.is-broken + .client-fallback{display:block}
.contact-zone{
  position:absolute;
  top:22px;
  right:22px;
  z-index:10;
  padding-bottom:16px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.cards:hover .contact-zone,.cards.is-open .contact-zone,.contact-zone.is-open{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
.contact-chip{
  transform:scale(.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.cards:hover .contact-chip,.cards.is-open .contact-chip,.contact-zone.is-open .contact-chip{
  transform:scale(1);
}
.contact-chip{
  width:54px;
  height:54px;
  border:0;
  padding:0;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(234,29,70,.42);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.contact-chip svg{width:24px;height:24px;display:block;transition:transform .35s var(--ease)}
.contact-chip:hover,.contact-chip:focus-visible,.contact-zone.is-open .contact-chip{
  transform:translateY(-3px) scale(1.07);
  box-shadow:0 16px 34px rgba(234,29,70,.5);
}
.contact-chip:hover svg,.contact-zone.is-open .contact-chip svg{transform:translate(2px,-2px) rotate(12deg)}
.contact-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.contact-pop{
  position:absolute;
  right:0;
  top:calc(100% - 14px);
  width:280px;
  padding:18px 20px 16px;
  border-radius:8px;
  background:var(--card2);
  color:var(--ink);
  box-shadow:0 26px 64px rgba(0,0,0,.38),0 10px 22px rgba(0,0,0,.2);
  transform-origin:top right;
  transform:translateY(-10px) rotate(-.4deg) scale(.94);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
  z-index:60;
}
.contact-zone:hover .contact-pop,.contact-zone:focus-within .contact-pop,.contact-zone.is-open .contact-pop{
  opacity:1;
  visibility:visible;
  transform:translateY(0) rotate(.4deg) scale(1);
  transition-delay:0s;
}
.contact-pop::after{
  content:"";
  position:absolute;
  right:23px;
  top:0;
  left:50%;
  margin-left:-7px;
  width:13px;
  height:13px;
  background:var(--card2);
  transform:rotate(45deg);
  border-radius:2px;
}
.pop-brand{
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.pop-brand .accent{color:var(--accent)}
.pop-line{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 0;
  color:var(--ink);
  text-decoration:none;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.005em;
  transition:color .2s var(--ease);
}
.pop-line svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.pop-line:hover{color:var(--accent)}
.pop-note{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(23,24,26,.1);
  color:#8a8c8e;
  font-size:10px;
  line-height:1.4;
}
.pop-note a{
  color:#5a5c5e;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s var(--ease);
}
.pop-note a:hover{color:var(--accent)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){
  body{overflow:auto}
  .page{height:auto;min-height:100dvh;padding-bottom:92px}
  .stage{height:calc(100dvh - 92px);min-height:480px;overflow:hidden}
   .cards{width:100%;height:470px;--card-w:min(78vw,410px)}
   .card{width:min(78vw,410px)}
   .cards:hover,.cards.is-open{--outer-x:-18vw;--inner-x:31vw;--outer-rot:-.22deg;--inner-rot:.22deg}
  .inner-front{padding:24px 34px 24px 70px}
  .inner-backface{padding:24px 26px 22px}
  .inner-copy{max-width:280px}
  .clients{height:92px;transform:translateY(140px)}
  .testimonials{height:92px;transform:translateY(140px)}
  .clients-label,.testimonials-label{display:none}
  .clients-inner,.testimonials-inner{padding:0 8px}
  .client-row{gap:24px}
  .contact-chip{width:48px;height:48px}
  .contact-chip svg{width:21px;height:21px}
  .contact-pop{right:-4px;width:min(280px,calc(100vw - 40px))}
}
@media(max-width:620px){
  .stage{min-height:460px}
  .cards{height:450px}
   .cards{--card-w:min(84vw,380px)}
   .card{width:min(84vw,380px)}
   .cards:hover,.cards.is-open{--outer-x:-28vw;--inner-x:33vw;--outer-rot:-.2deg;--inner-rot:.2deg}
  .outer-card{padding:28px}
  .inner-front{padding:22px 28px 22px 54px}
  .inner-backface{padding:20px 22px 18px}
  .inner-copy{max-width:250px}
  .inner-values{gap:10px 14px}
  .term{font-size:11px}
  .brand-link{width:108px}
  .brand-link .brand-mark{width:100%}
  .front-role{font-size:12px;top:calc(50% + 34px)}
  .inner-title{font-size:29px;margin-bottom:20px}
  .inner-copy p:not(.inner-title){font-size:12px;line-height:1.48}
  .inner-foot{font-size:9px}
  .client-logo{width:130px;flex-basis:130px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.legal-page{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:48px 24px;
}
.legal-card{
  width:100%;
  display:grid;
  place-items:center;
}
.legal-sheet{
  width:min(720px,100%);
  background:var(--card);
  color:var(--ink);
  border-radius:8px;
  padding:clamp(28px,4vw,56px);
  box-shadow:0 30px 80px rgba(0,0,0,.48),0 10px 28px rgba(0,0,0,.22);
}
.legal-kicker{
  margin:0 0 10px;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.legal-sheet h1{
  margin:0 0 24px;
  font-size:clamp(24px,3vw,34px);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:700;
}
.legal-sheet h2{
  margin:26px 0 8px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
}
.legal-sheet p{
  margin:0 0 10px;
  font-size:13.5px;
  line-height:1.6;
  color:#3a3c40;
}
.legal-sheet a{
  color:var(--accent);
  text-decoration:none;
  font-weight:650;
}
.legal-sheet a:hover{text-decoration:underline}
.legal-nav{
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid rgba(23,24,26,.12);
  display:flex;
  gap:24px;
}
.legal-nav a{
  color:var(--ink);
  font-size:12px;
  font-weight:700;
}
.legal-nav a:hover{color:var(--accent);text-decoration:none}