:root{
  --ink:        #495063;
  --ink-soft:   #6C7386;
  --pink:       #F2D8D6;
  --blue:       #BBDEF2;
  --paper:      #FFFFFF;
  --paper-alt:  #F5FAFD;
  --line:       #E1E6EC;

  --font: 'Poppins', -apple-system, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

h1,h2,h3{
  font-family:var(--font);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font);
  font-size:21px; font-weight:600;
  text-decoration:none; color:var(--ink);
}
.logo img{ height: 65px ; width:auto; }
.logo .dot{ color:var(--ink); opacity:0.4; }
.nav-cta{
  font-family:var(--font);
  font-size:13px; font-weight:500;
  text-decoration:none; color:var(--ink);
  border:1.5px solid var(--ink);
  padding:9px 18px; border-radius:100px;
  transition:background .18s ease, color .18s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--ink); color:#fff; }

/* ---------- Hero ---------- */
.hero{ padding:76px 0 90px; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:56px; align-items:start;
}
.hero h1{
  font-size:clamp(26px, 4.1vw, 30px);
  line-height:1.16;
  margin-bottom:24px;
}
.hero-lede{
  font-size:16.5px; font-weight:400;
  color:var(--ink-soft);
  max-width:52ch;
}
.hero-lede + .hero-lede{ margin-top:12px; }

.benefit-line{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  margin-top:30px; padding-top:24px;
  border-top:1px solid var(--line);
}
.benefit{
  font-size:13.5px; font-weight:500;
  color:var(--ink);
  background:var(--pink);
  padding:8px 16px;
  border-radius:100px;
}

/* video */
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(155deg, var(--blue) 0%, var(--pink) 100%);
  display:flex; align-items:flex-end; padding:22px;
}
.video-frame video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  background:var(--ink);
}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border-radius:50%;
  background:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(73,80,99,0.25);
  z-index:2;
}
.play-btn svg{ margin-left:3px; }
.video-caption{ position:relative; z-index:1; width:100%; }
.video-caption p{
  font-size:13px; font-weight:500;
  color:var(--ink);
  background:rgba(255,255,255,0.75);
  display:inline-block;
  padding:8px 14px;
  border-radius:100px;
}

/* ---------- Certification band ---------- */
.cert-band{ background:var(--ink); color:#fff; padding:68px 0; }
.cert-head{ max-width:64ch; margin-bottom:44px; }
.cert-head h2{ color:#fff; font-size:clamp(20px, 3vw, 26px); }
.cert-head p{ color:#D7DAE3; margin-top:12px; font-size:15.5px; }

.cert-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:rgba(255,255,255,0.15);
  border-radius:14px; overflow:hidden;
}
.cert-card{
  background:#3E4457;
  padding:26px 22px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.seal{
  width:46px; height:46px; border-radius:50%;
  background:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink);
  flex:none;
}
.cert-card p{ font-size:13.5px; color:#DDE0E8; line-height:1.5; }

/* ---------- Adoption / stats ---------- */
.adopt{ padding:80px 0; }
.adopt-top{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:56px; margin-bottom:64px;
}
.adopt-top h2{ font-size:clamp(20px, 3vw, 26px); }
.adopt-lead{ font-size:15.5px; color:var(--ink-soft); margin-bottom:20px; }

.thread{ position:relative; padding-left:30px; }
.thread::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px;
  width:2px; background:var(--line);
}
.thread-item{ position:relative; padding-bottom:22px; }
.thread-item:last-child{ padding-bottom:0; }
.thread-item::before{
  content:""; position:absolute; left:-30px; top:4px;
  width:11px; height:11px; border-radius:50%;
  background:var(--blue); border:2px solid var(--ink);
}
.thread-item p{ font-size:15.5px; color:var(--ink); }

.adopt-result{
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:14.5px; color:var(--ink-soft);
}
.adopt-result strong{ color:var(--ink); font-weight:600; }

.stat-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.stat{ border-top:2px solid var(--ink); padding-top:16px; }
.stat .num{
  font-family:var(--font);
  font-size:clamp(34px, 4vw, 46px); font-weight:600;
  color:var(--ink); line-height:1;
}
.stat .label{ margin-top:8px; font-size:13.5px; color:var(--ink-soft); max-width:26ch; }

/* ---------- CTA / coming soon ---------- */
.cta{
  padding:100px 0 90px;
  text-align:center;
  background:var(--paper-alt);
  border-top:1px solid var(--line);
}
.cta-tag{
  display:inline-block;
  font-size:13px; font-weight:500;
  color:var(--ink);
  background:var(--blue);
  padding:8px 18px;
  border-radius:100px;
  margin-bottom:20px;
}
.cta h3{ font-size:clamp(18px, 3.6vw, 26px); max-width:22ch; margin:0 auto 20px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:500;
  text-decoration:none;
  padding:14px 28px; border-radius:100px;
  background:var(--ink); color:#fff;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); background:#3A4053; }

.store-row{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:14px; margin-top:40px;
}
.store-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:500;
  text-decoration:none; color:var(--ink);
  background:#fff;
  border:1.5px solid var(--line);
  padding:12px 22px;
  border-radius:100px;
  transition:border-color .15s ease, transform .15s ease;
}
.store-btn:hover{ border-color:var(--ink); transform:translateY(-1px); }
.store-btn img{ height:18px; width:18px; }

footer{ padding:40px 0; border-top:1px solid var(--line); margin-top:60px; }
.foot-grid{ display:flex; justify-content:center; }
.foot-grid .logo{ font-size:16px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .video-frame{ aspect-ratio:16/10; order:-1; }
  .cert-grid{ grid-template-columns:repeat(2, 1fr); }
  .adopt-top{ grid-template-columns:1fr; gap:30px; }
  .stat-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .nav-cta{ padding:8px 14px; font-size:12px; }
  .cert-grid{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:1fr; gap:22px; }
}