.vitrine-page{
  min-height:100%;
  margin:0;
  color:#fff;
  background:
    radial-gradient(760px 420px at 73% 26%, rgba(255,105,148,.24), transparent 64%),
    radial-gradient(620px 360px at 42% 10%, rgba(141,73,255,.22), transparent 66%),
    radial-gradient(680px 430px at 15% 30%, rgba(25,82,197,.20), transparent 70%),
    linear-gradient(155deg,#020817 0%,#070823 48%,#130821 100%);
  padding:0;
  overflow-x:hidden;
}

.vitrine-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 19%, rgba(255,255,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 13%, rgba(205,118,255,.68) 0 1px, transparent 1.5px),
    radial-gradient(circle at 79% 34%, rgba(255,196,117,.64) 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 72%, rgba(255,106,198,.58) 0 1px, transparent 1.5px);
  background-size:250px 250px,340px 340px,290px 290px,410px 410px;
  opacity:.48;
}

.landing{
  position:relative;
  z-index:1;
  width:min(1680px, calc(100% - 48px));
  margin:0 auto;
  padding:30px 0 64px;
}

.site-header{
  min-height:54px;
  display:grid;
  grid-template-columns:minmax(270px,auto) minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(16px, 2vw, 28px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:.20em;
}

.brand__mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:#ffd6ad;
  font-size:1.9rem;
  text-shadow:0 0 22px rgba(255,153,92,.8);
}

.site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px, 2vw, 34px);
  color:rgba(255,255,255,.82);
  font-size:.98rem;
  font-weight:800;
  min-width:0;
}

.site-nav a,
.header-actions a{
  text-decoration:none;
}

.site-nav a{
  white-space:nowrap;
  line-height:1.12;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex-shrink:0;
}

.header-actions .btn{
  white-space:nowrap;
}

.btn{
  min-height:46px;
  padding:12px 22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:#fff;
  box-shadow:none;
  font-weight:900;
}

.btn--ghost{
  border-color:rgba(200,83,255,.72);
  background:rgba(7,7,26,.42);
}

.btn--primary{
  border:0;
  background:linear-gradient(135deg,#b13cff 0%,#f04ba5 50%,#ff8f4d 100%);
  box-shadow:0 18px 44px rgba(200,58,255,.22);
}

.btn--shine{
  min-height:60px;
  min-width:280px;
  border-radius:24px;
  font-size:1.08rem;
}

.hero{
  min-height:650px;
  display:grid;
  grid-template-columns:minmax(420px,.94fr) minmax(520px,1.06fr);
  align-items:center;
  gap:46px;
  padding:64px 0 34px;
}

.hero__copy{
  position:relative;
  z-index:2;
}

.hero__eyebrow{
  display:inline-flex;
  margin:0 0 26px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#ffc4f6;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  font-weight:900;
}

.hero h1{
  max-width:690px;
  margin:0;
  color:#fff;
  font-size:clamp(4.4rem, 6.6vw, 6.65rem);
  line-height:.92;
  letter-spacing:0;
}

.hero h1 span{
  display:block;
  width:max-content;
  max-width:100%;
  color:transparent;
  background:linear-gradient(90deg,#9584ff 0%,#eb5ad4 48%,#ff8a45 100%);
  -webkit-background-clip:text;
  background-clip:text;
  font-family:Georgia, "Times New Roman", serif;
}

.lead{
  max-width:570px;
  margin:28px 0 0;
  color:rgba(255,255,255,.86);
  font-size:1.18rem;
  line-height:1.55;
}

.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin-top:30px;
}

.rating{
  margin:0;
  color:rgba(255,255,255,.70);
  line-height:1.4;
}

.rating strong{
  display:block;
  color:#fff;
  font-size:1rem;
}

.hero__scene{
  position:relative;
  min-height:610px;
  isolation:isolate;
}

.hero__scene::before{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:min(620px, 90%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,236,196,.95) 0 2%, transparent 3.2%),
    repeating-radial-gradient(circle, rgba(255,198,134,.32) 0 1px, transparent 1px 55px);
  opacity:.7;
  filter:drop-shadow(0 0 44px rgba(255,109,102,.28));
  z-index:-2;
}

.hero__scene::after{
  content:"";
  position:absolute;
  inset:8% 3% 0;
  border-radius:42px;
  background:radial-gradient(circle at 50% 48%, rgba(255,145,93,.24), transparent 48%);
  z-index:-3;
}

.hero__scene img{
  position:absolute;
  left:50%;
  top:50%;
  width:min(560px, 80%);
  height:560px;
  transform:translate(-50%,-47%);
  object-fit:cover;
  object-position:50% 46%;
  border-radius:34px;
  box-shadow:0 36px 96px rgba(0,0,0,.46);
  mask-image:linear-gradient(to bottom, #000 76%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 76%, transparent 100%);
}

.insight-card{
  position:absolute;
  width:250px;
  padding:17px 18px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.045));
  box-shadow:0 22px 60px rgba(0,0,0,.30);
  backdrop-filter:blur(18px);
}

.insight-card strong{
  display:block;
  margin:0 0 9px;
  font-size:1rem;
}

.insight-card span{
  color:rgba(255,255,255,.76);
  line-height:1.4;
}

.insight-card--one{left:3%;bottom:88px;transform:rotate(4deg)}
.insight-card--two{right:1%;top:122px;transform:rotate(6deg)}
.insight-card--three{right:5%;bottom:108px;transform:rotate(-3deg)}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.115),rgba(255,255,255,.04));
  box-shadow:0 28px 80px rgba(0,0,0,.23);
  backdrop-filter:blur(18px);
  overflow:hidden;
}

.feature-strip article{
  display:flex;
  gap:16px;
  padding:26px 24px;
  min-height:126px;
  border-right:1px solid rgba(255,255,255,.12);
}

.feature-strip article:last-child{border-right:0}

.feature-strip span{
  flex:0 0 56px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(209,92,255,.34);
  border-radius:20px;
  color:#ffb8ed;
  background:rgba(172,68,255,.16);
  font-size:1.45rem;
}

.feature-strip h2,
.feature-strip p{
  margin:0;
}

.feature-strip h2{
  color:#fff;
  font-size:1.05rem;
}

.feature-strip p{
  margin-top:8px;
  color:rgba(255,255,255,.72);
  line-height:1.42;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:44px 0 72px;
}

.stats div{
  padding:0 30px;
  border-right:1px solid rgba(255,255,255,.14);
}

.stats div:first-child{padding-left:0}
.stats div:last-child{border-right:0}

.stats strong{
  display:block;
  color:#fff;
  font-family:Georgia, "Times New Roman", serif;
  font-size:2.35rem;
  line-height:1;
}

.stats span{
  color:rgba(255,255,255,.72);
}

.section-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:46px;
  align-items:start;
  margin-top:58px;
  padding-top:14px;
}

.section-heading h2{
  max-width:540px;
  margin:0;
  color:#fff;
  font-size:clamp(2.1rem, 3.1vw, 3.25rem);
  line-height:1.08;
}

.kicker{
  color:#ff67c6;
}

.steps,
.examples{
  display:grid;
  gap:16px;
}

.steps article,
.examples article,
.premium-band,
.closing-card{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  box-shadow:0 22px 62px rgba(0,0,0,.20);
  backdrop-filter:blur(16px);
}

.example-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.example-link article{
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.example-link:hover article{
  transform:translateY(-2px);
  border-color:rgba(255,117,201,.38);
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
}

.steps article{
  display:grid;
  grid-template-columns:56px 1fr;
  column-gap:18px;
  padding:22px;
  border-radius:22px;
}

.steps span{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(135deg,#8d4aff,#ff61a6);
  font-weight:900;
}

.steps h3,
.examples h3{
  margin:0 0 8px;
  color:#fff;
}

.steps p,
.examples p,
.premium-band p,
.closing-card p{
  margin:0;
  color:rgba(255,255,255,.74);
  line-height:1.5;
}

.examples article{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:18px;
  align-items:center;
  min-height:116px;
  padding:18px;
  border-radius:22px;
}

.examples article span{
  display:inline-flex;
  margin-top:10px;
  color:#ffb7e7;
  font-size:.9rem;
  font-weight:900;
}

.avatar{
  width:92px;
  aspect-ratio:1;
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 27%, #ffd8ad 0 10%, transparent 11%),
    radial-gradient(circle at 50% 45%, #58233a 0 18%, transparent 19%),
    linear-gradient(145deg,#2b1731,#dd743e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}

.avatar--two{
  background:
    radial-gradient(circle at 50% 27%, #ffd4b9 0 10%, transparent 11%),
    radial-gradient(circle at 50% 45%, #4c1e55 0 19%, transparent 20%),
    linear-gradient(145deg,#1b1f45,#ba49f0);
}

.avatar--three{
  background:
    radial-gradient(circle at 50% 27%, #f4cba1 0 10%, transparent 11%),
    radial-gradient(circle at 50% 45%, #11172e 0 18%, transparent 19%),
    linear-gradient(145deg,#1a203d,#ef7743);
}

.premium-band,
.closing-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:54px;
  padding:34px;
  border-radius:28px;
}

.premium-band h2,
.closing-card h2{
  margin:0 0 12px;
  color:#fff;
  font-size:2rem;
  line-height:1.12;
}

.site-footer{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px 28px;
  margin:58px 0 0;
  padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.66);
  font-weight:800;
}

.site-footer a{
  text-decoration:none;
}

.site-footer a:hover{
  color:#fff;
}

@media (max-width: 1500px){
  .landing{
    width:min(100% - 40px, 1360px);
  }

  .site-header{
    grid-template-columns:minmax(230px,auto) minmax(0,1fr) auto;
    gap:16px;
  }

  .brand{
    gap:10px;
    font-size:1rem;
    letter-spacing:.16em;
  }

  .site-nav{
    gap:20px;
    font-size:.92rem;
  }

  .header-actions{
    gap:10px;
  }

  .header-actions .btn{
    min-height:42px;
    padding:10px 16px;
    border-radius:14px;
  }
}

@media (max-width: 1180px){
  .landing{
    width:min(100% - 40px, 980px);
  }

  .site-header{
    grid-template-columns:1fr auto;
  }

  .site-nav{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:50px;
  }

  .hero__scene{
    min-height:520px;
  }

  .feature-strip{
    grid-template-columns:repeat(2,1fr);
  }

  .feature-strip article:nth-child(2){
    border-right:0;
  }

  .feature-strip article:nth-child(-n+2){
    border-bottom:1px solid rgba(255,255,255,.12);
  }
}

@media (max-width: 720px){
  .landing{
    width:min(100% - 28px, 440px);
    padding:18px 0 48px;
  }

  .site-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .header-actions{
    flex:1 0 100%;
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:center;
    justify-content:stretch;
    gap:10px;
  }

  .header-actions .language-switch{
    justify-self:start;
  }

  .header-actions .language-switch .language-switch__menu{
    left:0;
    right:auto;
  }

  .brand{
    gap:8px;
    font-size:.88rem;
    letter-spacing:.14em;
  }

  .brand__mark{
    width:28px;
    height:28px;
    font-size:1.48rem;
  }

  .header-actions__login{
    display:inline-flex;
    justify-content:center;
    justify-self:end;
    min-height:40px;
    padding:10px 12px;
    border-radius:13px;
    font-size:.82rem;
    white-space:nowrap;
  }

  .header-actions__cta{
    grid-column:1 / -1;
    justify-self:stretch;
    width:100%;
    min-height:40px;
    padding:10px 12px;
    border-radius:13px;
    font-size:.82rem;
    white-space:normal;
    text-align:center;
    min-width:0;
  }

  .hero{
    gap:18px;
    padding:42px 0 24px;
  }

  .hero__eyebrow{
    margin-bottom:18px;
    padding:8px 14px;
    font-size:.68rem;
  }

  .hero h1{
    max-width:360px;
    font-size:clamp(3rem, 13.2vw, 3.75rem);
    line-height:.96;
  }

  .lead{
    margin-top:22px;
    font-size:1rem;
    line-height:1.55;
  }

  .actions{
    margin-top:28px;
    gap:16px;
  }

  .btn--shine{
    width:100%;
    min-width:0;
    min-height:58px;
  }

  .rating{
    width:100%;
    text-align:center;
  }

  .hero__scene{
    min-height:420px;
  }

  .hero__scene::before{
    width:96%;
  }

  .hero__scene img{
    width:min(290px,76%);
    height:350px;
    border-radius:28px;
    transform:translate(-50%,-48%);
  }

  .insight-card{
    width:188px;
    padding:13px 14px;
    border-radius:18px;
    font-size:.84rem;
  }

  .insight-card--one{
    left:0;
    bottom:28px;
    transform:rotate(4deg);
  }

  .insight-card--two{
    right:0;
    top:42px;
    transform:rotate(7deg);
  }

  .insight-card--three{
    display:none;
  }

  .feature-strip,
  .stats,
  .section-grid{
    grid-template-columns:1fr;
  }

  .feature-strip{
    border-radius:24px;
  }

  .feature-strip article{
    padding:22px;
    min-height:auto;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .feature-strip article:last-child{
    border-bottom:0;
  }

  .feature-strip span{
    flex-basis:54px;
    width:54px;
    height:54px;
  }

  .stats{
    margin:34px 0 52px;
  }

  .stats div,
  .stats div:first-child{
    padding:0 0 18px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }

  .stats div + div{
    padding-top:18px;
  }

  .stats div:last-child{
    border-bottom:0;
  }

  .stats strong{
    font-size:2.35rem;
  }

  .section-grid{
    gap:22px;
    margin-top:42px;
  }

  .section-heading h2{
    font-size:2rem;
  }

  .steps article{
    grid-template-columns:50px 1fr;
    padding:20px;
  }

  .steps span{
    width:50px;
    height:50px;
  }

  .examples article{
    grid-template-columns:74px 1fr;
    min-height:112px;
    gap:16px;
  }

  .avatar{
    width:74px;
    border-radius:18px;
  }

  .premium-band,
  .closing-card{
    display:grid;
    padding:24px;
    border-radius:24px;
  }

  .premium-band h2,
  .closing-card h2{
    font-size:1.55rem;
  }
}

@media (max-width: 390px){
  .landing{
    width:min(100% - 22px, 390px);
  }

  .brand span:last-child{
    font-size:.78rem;
  }

  .header-actions__cta{
    padding:9px 10px;
    font-size:.76rem;
  }

  .hero h1{
    font-size:2.9rem;
  }
}