*{box-sizing:border-box}
:root{
  --purple:#7f4dc2;
  --purple-light:#b887f2;
  --purple-dark:#2c0f4e;
  --ink:#17152a;
  --ivory:#f8f5f1;
  --muted:#676170;
  --max:1160px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--ivory);
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

.hero{
  position:relative;
  min-height:675px;
  color:#fff;
  background:url("assets/hero-background.jpg") center 46%/cover no-repeat;
  overflow:hidden;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.50),rgba(0,0,0,.24) 45%,rgba(0,0,0,.16)),
    linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.05) 50%,rgba(0,0,0,.5));
}
.nav{
  position:relative;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding-top:28px;
}
.brand{display:flex;gap:12px;align-items:center}
.brand-mark{width:92px;height:92px;object-fit:contain}
.brand-copy{
  display:grid;line-height:.85;
  text-align:center;
  letter-spacing:.12em;
  font-size:13px;
}
.brand-copy strong{font-size:30px;letter-spacing:.08em}
.brand-copy span{margin:8px 0 7px}

.hero-content{
  position:relative;z-index:1;
  text-align:center;
  padding-top:42px;
}
.hero h1{
  margin:0;
  font-weight:800;
  line-height:1.04;
  text-shadow:0 3px 20px rgba(0,0,0,.35);
}
.hero h1 span{display:block;font-size:clamp(42px,6.8vw,76px)}
.hero h1 em{
  display:block;
  font-size:clamp(40px,6.2vw,68px);
  font-style:normal;
  color:var(--purple-light);
  margin-top:8px;
}
.hero-sub{font-size:clamp(20px,2.4vw,29px);line-height:1.28;margin:20px 0 0}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--purple-light);font-size:30px;margin:18px auto 4px}
.ornament span{display:block;width:62px;height:2px;background:currentColor}
.ornament.small{font-size:20px;margin:10px auto 10px}
.ornament.small span{width:42px}

.video-section{position:relative;margin-top:-170px;z-index:3}
.video-card{
  width:min(940px,100%);
  margin:auto;
  border:2px solid rgba(255,255,255,.72);
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  position:relative;
}
.video-card video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.play-button{
  position:absolute;inset:0;margin:auto;
  width:94px;height:94px;border-radius:999px;
  border:3px solid #fff;background:rgba(0,0,0,.18);
  cursor:pointer;transition:.2s ease;
}
.play-button:hover{transform:scale(1.04);background:rgba(0,0,0,.32)}
.play-button span{
  display:block;margin-left:32px;width:0;height:0;
  border-top:18px solid transparent;border-bottom:18px solid transparent;border-left:28px solid #fff;
}
.video-card.is-playing .play-button{opacity:0;pointer-events:none}
.video-card.is-ended .play-button{opacity:0;pointer-events:none}
.video-end-link{
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding:24px;
  background:rgba(18,7,34,.68);
  color:#fff;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.video-end-link span{
  padding:15px 22px;
  border-radius:11px;
  background:linear-gradient(90deg,#29104e,#6a2b8f,#3d145e);
  box-shadow:0 8px 18px rgba(0,0,0,.3);
  font-size:clamp(16px,2.5vw,21px);
  font-weight:800;
  text-align:center;
}
.video-card.is-ended .video-end-link{opacity:1;pointer-events:auto}

.intro{text-align:center;padding:28px 0 20px}
.intro h2{font-size:clamp(28px,3.5vw,38px);margin:0;font-weight:800;color:#19152d}
.intro p{font-size:18px;line-height:1.55;color:#24212b}
.cta{
  margin:26px auto 6px;
  width:min(700px,100%);
  display:grid;grid-template-columns:56px 1fr 32px;align-items:center;
  padding:18px 22px;
  color:#fff;
  background:linear-gradient(90deg,#29104e,#6a2b8f,#3d145e);
  border-radius:11px;
  box-shadow:0 8px 18px rgba(47,20,80,.25);
  font-size:22px;font-weight:800;
  transition:.18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,20,80,.32)}
.yt-icon{
  display:grid;place-items:center;
  width:42px;height:30px;border-radius:7px;
  background:#fff;color:#4d1c72;font-size:18px;
}
.arrow{font-size:37px;font-weight:400;line-height:0}
.hand-note{font-style:italic;color:#4d1c72!important;margin:12px 0 0!important;font-size:17px!important}

.benefits{
  display:flex;flex-wrap:wrap;justify-content:center;
  padding:20px 0 30px;text-align:center;
}
.benefits article{flex:0 1 33.333%;padding:4px 20px;border-right:1px solid #d8d0d9}
.benefits article:last-child{border-right:0}
.icon{
  margin:auto auto 12px;width:60px;height:60px;border:2px solid #9a62cf;border-radius:50%;
  display:grid;place-items:center;color:#8247bd;font-size:34px;font-weight:400
}
.icon.cross{font-size:44px}
.benefits h3{font-size:16px;margin:0 0 6px}
.benefits p{margin:0;color:#2f2a32;line-height:1.35;font-size:15px}

footer{background:linear-gradient(90deg,#180b32,#34104e,#130922);color:#fff;padding:20px 0 14px}
.footer-inner{display:grid;grid-template-columns:250px 1fr 250px;align-items:center;gap:22px}
.footer-brand .brand-mark{width:62px;height:62px}
.footer-brand .brand-copy strong{font-size:21px}.footer-brand .brand-copy{font-size:9px}
.footer-inner>p{text-align:center;font-size:14px;line-height:1.45;margin:0;color:#f2edf5}
.socials{display:flex;justify-content:flex-end;gap:12px}
.socials a{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.75);
  display:grid;place-items:center;font-size:14px;font-weight:700
}
.socials a:hover{color:var(--purple-light);border-color:var(--purple-light)}
.footer-meta{
  display:flex;justify-content:center;align-items:center;gap:8px;
  color:#c9bdd2;font-size:12px;margin-top:12px
}
.footer-meta a{text-decoration:underline;text-underline-offset:3px}
.footer-meta a:hover{color:#fff}

.page-header{background:linear-gradient(90deg,#180b32,#34104e,#130922);color:#fff}
.page-header .nav{padding-bottom:28px}
.policy{padding:64px 0 80px}
.policy article{width:min(720px,100%);margin:auto}
.policy h1{font-size:clamp(36px,5vw,54px);line-height:1.08;margin:0 0 12px}
.policy h2{font-size:24px;margin:36px 0 10px}
.policy p,.policy li{font-size:17px;line-height:1.65;color:var(--muted)}
.policy ul{padding-left:22px}
.policy .updated{font-size:15px;margin-bottom:32px}
.text-link{color:var(--purple-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}

a:focus-visible,button:focus-visible{
  outline:3px solid var(--purple-light);outline-offset:3px
}

@media (max-width:820px){
  .hero{min-height:620px}
  .nav{align-items:center}
  .brand-mark{width:64px;height:64px}
  .brand-copy strong{font-size:22px}.brand-copy{font-size:10px}
  .hero-content{padding-top:60px}
  .hero h1 span{font-size:46px}.hero h1 em{font-size:43px}
  .video-section{margin-top:-115px}
  .benefits{row-gap:28px}
  .benefits article{flex-basis:50%}
  .benefits article:nth-child(2){border-right:0}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-brand{justify-content:center}.socials{justify-content:center}
}
@media (max-width:520px){
  .wrap{width:min(100% - 24px,var(--max))}
  .hero{min-height:410px;background-position:58% 45%}
  .nav{padding-top:16px}
  .brand-mark{width:56px;height:56px}
  .brand-copy strong{font-size:19px}.brand-copy{font-size:9px}
  .hero-content{padding-top:20px}
  .hero h1 span{font-size:clamp(32px,10vw,39px)}
  .hero h1 em{font-size:clamp(29px,9.2vw,36px);margin-top:5px}
  .hero-sub{font-size:17px;margin-top:12px}
  .ornament{margin-top:10px;font-size:24px}
  .video-section{margin-top:-64px}
  .play-button{width:76px;height:76px}.play-button span{margin-left:26px;border-top-width:14px;border-bottom-width:14px;border-left-width:22px}
  .intro{display:flex;flex-direction:column;padding-top:12px}
  .intro .cta{order:-1;margin-top:0;margin-bottom:14px}
  .intro p{font-size:16px}.desktop-only{display:none}
  .cta{grid-template-columns:42px 1fr 22px;padding:15px 14px;font-size:16px}
  .yt-icon{width:35px;height:26px}
  .benefits article{flex-basis:100%;border-right:0;border-bottom:1px solid #ddd4df;padding-bottom:24px}
  .benefits article:last-child{border-bottom:0}
  .policy{padding:48px 0 64px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta,.play-button{transition:none}
  .video-end-link{transition:none}
  .cta:hover,.play-button:hover{transform:none}
}