:root{
  --bg:#f6f4f2;
  --card: rgba(255,255,255,.72);
  --muted:#6b6b6b;
  --text:#141414;
  --line:rgba(0,0,0,.08);

  --accent:#ff7aa8;
  --accent2:#141414;

  --shadow: 0 18px 60px rgba(0,0,0,.10);
  --radius: 18px;
  --radius2: 26px;
  --max: 980px;

  --focus: 0 0 0 3px rgba(255,122,168,.22);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255,122,168,.16), transparent 55%),
    radial-gradient(800px 600px at 85% 15%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f4f2 55%, #ffffff 100%);
  transform:translateZ(0);
}

a{
  color:inherit;
  text-decoration:none;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 18px 110px;
}

/* TOPBAR */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  letter-spacing:.2px;
}

.logo{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,122,168,.18), rgba(0,0,0,.02));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
}

.logo span{
  font-weight:900;
  color:var(--accent);
  font-size:14px;
  letter-spacing:.4px;
}

.brand h1{
  margin:0;
  font-size:14px;
  font-weight:800;
}

.brand p{
  margin:2px 0 0;
  font-size:12px;
  color:var(--muted);
}

.rightTools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
}

.dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,168,.18);
}

.langToggle{
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  border-radius:999px;
  display:flex;
  overflow:hidden;
  height:38px;
}

.langToggle button{
  border:0;
  background:transparent;
  padding:0 12px;
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.2px;
}

.langToggle button[aria-pressed="true"]{
  background:rgba(0,0,0,.05);
  color:var(--text);
}

.langToggle button:focus{
  outline:none;
  box-shadow:var(--focus);
}

/* GENERIC CARD */

.card{
  border:1px solid var(--line);
  background:var(--card);
  backdrop-filter:blur(10px);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* LINKTREE */

.linktree{
  margin-bottom:18px;
  padding:18px;
}

.linktreeTitle{
  font-size:14px;
  font-weight:800;
  margin-bottom:12px;
  color:var(--text);
}

.linktreeGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.treeBtn{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid var(--line);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.treeBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.82);
  border-color:rgba(255,122,168,.35);
}

.treeLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.treeIcon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.03);
  border:1px solid var(--line);
  flex:0 0 auto;
  font-size:18px;
}

.treeText{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.treeText strong{
  display:block;
  font-size:14px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.treeText span{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.treeArrow{
  opacity:.9;
  flex:0 0 auto;
  border:1px solid var(--line);
  background:rgba(0,0,0,.03);
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
}

/* HERO */

.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:stretch;
  margin-top:6px;
}

.heroLeft{
  padding:28px;
  position:relative;
}

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.kicker strong{
  color:var(--accent);
  font-weight:900;
  letter-spacing:.4px;
}

.headline{
  margin:16px 0 10px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.6px;
  font-weight:950;
}

.sub{
  margin:0 0 18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  max-width:58ch;
}

.tagline{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.chip b{
  color:var(--text);
}

.ctaRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
  color:var(--text);
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}

.btn:hover{
  background:rgba(255,255,255,.78);
  transform:translateY(-1px);
}

.btn:focus{
  outline:none;
  box-shadow:var(--focus);
}

.btnPrimary{
  background:linear-gradient(135deg, rgba(255,122,168,.20), rgba(255,255,255,.85));
  border-color:rgba(255,122,168,.35);
}

.btnPrimary:hover{
  border-color:rgba(255,122,168,.55);
  background:linear-gradient(135deg, rgba(255,122,168,.26), rgba(255,255,255,.92));
}

.btnVip{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,122,168,.35);
  transition:all .18s ease;
}

.btnVip::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(255,122,168,.0) 0%,
    rgba(255,122,168,.25) 50%,
    rgba(255,122,168,.0) 100%
  );
  transform:translateX(-120%);
  transition:transform .45s ease;
  pointer-events:none;
}

.btnVip:hover{
  transform:translateY(-2px) scale(1.015);
  border-color:rgba(255,122,168,.65);
  box-shadow:0 10px 28px rgba(255,122,168,.18);
}

.btnVip:hover::before{
  transform:translateX(120%);
}

.heroRight{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

/* HERO SLIDER */

.media{
  position:relative;
  height:320px;
  background:#ffffff;
  overflow:hidden;
}

.media .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 900ms ease;
  will-change:opacity;
}

.media .slide.is-active{
  opacity:1;
}

.mediaOverlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  pointer-events:none;
}

.mediaBadge{
  position:absolute;
  left:16px;
  top:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
}

.mediaDots{
  position:absolute;
  right:14px;
  bottom:14px;
  display:flex;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
}

.mDot{
  width:7px;
  height:7px;
  border-radius:99px;
  background:rgba(0,0,0,.18);
}

.mDot.is-on{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,168,.18);
}

/* LINKS */

.links{
  padding:18px;
  display:grid;
  gap:12px;
}

.linkBtn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.68);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.linkBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.82);
  border-color:rgba(255,122,168,.35);
}

.linkLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.03);
  border:1px solid var(--line);
  flex:0 0 auto;
}

.linkText{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.linkText strong{
  font-size:14px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.linkText span{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chev{
  opacity:.9;
  flex:0 0 auto;
  border:1px solid var(--line);
  background:rgba(0,0,0,.03);
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
}

/* INFO GRID */

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}

.infoCard{
  padding:20px;
}

.infoCard h3{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.2px;
}

.infoCard p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

/* ABOUT */

.aboutWrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  padding:22px;
}

.aboutTitle{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:-.2px;
}

.aboutText{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  max-width:70ch;
}

.aboutBullets{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.aboutBullet{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.58);
}

.aboutIcon{
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:rgba(0,0,0,.03);
  flex:0 0 auto;
}

.aboutBullet strong{
  display:block;
  font-size:13px;
  letter-spacing:.2px;
}

.aboutBullet span{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

.aboutRight{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.aboutImg{
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.03);
  box-shadow:var(--shadow);
}

.aboutImg img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
}

.aboutMiniNote{
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  border-radius:18px;
  padding:12px 12px;
  font-size:12px;
  color:var(--muted);
}

/* VIDEO SECTION */

.videoWrap{
  position:relative;
  overflow:hidden;
}

.aboutVideo{
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.04);
  box-shadow:var(--shadow);
}

.aboutVideo video{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
  filter:contrast(1.05) saturate(1.05);
}

.videoText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-size:26px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 8px 30px rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .4s ease;
}

/* FOOTER */

footer{
  margin-top:22px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

footer a{
  color:var(--muted);
  text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.22);
}

footer a:hover{
  color:var(--text);
}

/* MODALS */

.modalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.modal{
  width:min(560px, 100%);
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.modalHead{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.modalHead strong{
  font-size:14px;
  letter-spacing:.2px;
}

.modalBody{
  padding:18px;
}

.modalBody p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.modalActions{
  padding:16px 18px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.xBtn{
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.03);
  color:var(--muted);
  cursor:pointer;
}

.xBtn:hover{
  color:var(--text);
  background:rgba(0,0,0,.05);
}

.toggleRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(0,0,0,.10);
}

.toggleRow:last-child{
  border-bottom:none;
}

.toggleRow label{
  font-size:13px;
}

.toggleRow small{
  display:block;
  color:var(--muted);
  margin-top:3px;
  font-size:12px;
  line-height:1.5;
}

.switch{
  width:46px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.04);
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
}

.knob{
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(0,0,0,.30);
  position:absolute;
  top:2px;
  left:2px;
  transition:left .12s ease, background .12s ease;
}

.switch[data-on="true"]{
  border-color:rgba(255,122,168,.50);
}

.switch[data-on="true"] .knob{
  left:22px;
  background:rgba(255,122,168,.95);
}

.note{
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}

.note a{
  text-decoration:underline;
}

/* RESPONSIVE */

@media (max-width:860px){
  .hero{
    grid-template-columns:1fr;
  }

  .grid2{
    grid-template-columns:1fr;
  }

  .aboutWrap{
    grid-template-columns:1fr;
  }

  .media{
    height:280px;
  }

  .aboutImg img{
    height:260px;
  }

  .aboutVideo video{
    height:260px;
  }

  .videoText{
    font-size:20px;
  }
}

@media (max-width:480px){
  .headline{
    font-size:36px;
  }

  .wrap{
    padding:22px 14px 90px;
  }

  .heroLeft{
    padding:22px;
  }

  .linktree{
    padding:14px;
  }
}