:root{
  --cyan:#00AAE0;
  --cyan-deep:#0088B8;
  --gold:#F3D03E;
  --ink:#0F172A;
  --muted:#475569;
  --subtle:#94A3B8;
  --bg:#F3F6FC;
  --bg2:#E9EFFA;
  --surface:#FFFFFF;
  --border:#E2E8F0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',sans-serif;
  background:linear-gradient(135deg,#F8FAFD 0%, var(--bg) 55%, var(--bg2) 100%);
  color:var(--ink);
  overflow-x:hidden;
}

.page{
  display:grid;
  grid-template-columns:minmax(440px,48%) 1fr;
  min-height:100vh;
}

/* ================= LEFT ================= */
.content{
  display:flex;flex-direction:column;justify-content:center;
  padding:52px 40px 44px 62px;
  position:relative;z-index:2;
}

.brand{animation:rise .7s .05s cubic-bezier(.22,1,.36,1) both}
.brand-logo{width:min(280px,72%);height:auto;filter:drop-shadow(0 3px 8px rgba(0,136,184,.12))}

.badge{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:28px;
  background:#E4F5FC;color:var(--cyan-deep);
  font-size:.8rem;font-weight:700;letter-spacing:.1em;
  padding:9px 18px;border-radius:999px;
  animation:rise .7s .14s cubic-bezier(.22,1,.36,1) both;
}
.badge svg{width:15px;height:15px}

h1{
  font-size:clamp(2.3rem,4vw,3.3rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.14;
  margin-top:18px;
  animation:rise .7s .22s cubic-bezier(.22,1,.36,1) both;
}
h1 .grad{
  background:linear-gradient(92deg, var(--cyan) 0%, #3A6FE0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:block;
}

.desc{
  margin-top:20px;max-width:520px;
  font-size:1.05rem;font-weight:500;color:var(--muted);line-height:1.65;
  animation:rise .7s .3s cubic-bezier(.22,1,.36,1) both;
}

.features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:30px;max-width:560px;
  animation:rise .7s .38s cubic-bezier(.22,1,.36,1) both;
}
.feature{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.feature .ico{
  width:44px;height:44px;border-radius:12px;background:#EAF2FF;
  display:flex;align-items:center;justify-content:center;
}
.feature .ico svg{width:22px;height:22px;stroke:var(--cyan-deep)}
.feature span{font-size:.82rem;font-weight:700;color:var(--ink);line-height:1.3}

.noticebox{
  display:flex;align-items:flex-start;gap:16px;
  margin-top:32px;max-width:560px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:16px;padding:20px 22px;
  box-shadow:0 8px 26px rgba(15,23,42,.06);
  animation:rise .7s .46s cubic-bezier(.22,1,.36,1) both;
}
.noticebox .bell{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#EAF2FF;
  display:flex;align-items:center;justify-content:center;
}
.noticebox p{font-size:.94rem;font-weight:500;color:var(--muted);line-height:1.55;margin-bottom:14px}

.btnrow{display:flex;flex-wrap:wrap;gap:10px}
.notify, .buildlink{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
  font-size:.9rem;font-weight:700;padding:11px 20px;border-radius:10px;
  transition:background .15s,transform .15s,box-shadow .15s,border-color .15s;
}
.notify{background:var(--cyan);color:#fff}
.notify:hover{background:var(--cyan-deep);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,170,224,.32)}
.notify svg{width:15px;height:15px}
.buildlink{background:#fff;color:var(--cyan-deep);border:1.5px solid var(--cyan)}
.buildlink:hover{background:#EAF7FC;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,170,224,.18)}
.buildlink svg{width:15px;height:15px}

footer{
  margin-top:30px;font-size:.9rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:8px;
  animation:rise .7s .54s cubic-bezier(.22,1,.36,1) both;
}
footer svg{width:16px;height:16px;stroke:var(--cyan-deep)}
.partnerline{
  margin-top:12px;font-size:.8rem;font-weight:600;color:#9AA3C0;
  animation:rise .7s .6s cubic-bezier(.22,1,.36,1) both;
}
.partnerline a{color:var(--cyan-deep);text-decoration:none;border-bottom:1.5px solid #B9E0F2;transition:border-color .15s}
.partnerline a:hover{border-color:var(--cyan-deep)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ================= RIGHT : flat illustration ================= */
.stage{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.stage img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.floaty{animation:floaty 6s ease-in-out infinite}
.floaty2{animation:floaty 6.5s ease-in-out infinite .8s}
.floaty3{animation:floaty 5.5s ease-in-out infinite 1.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@media (max-width:1020px){
  .page{grid-template-columns:1fr;grid-template-rows:auto auto}
  .stage{grid-row:1;min-height:50vh;padding:20px}
  .content{grid-row:2;padding:44px 26px 30px;align-items:center;text-align:center}
  .badge{align-self:center}
  .features{grid-template-columns:repeat(2,1fr);margin-left:auto;margin-right:auto}
  .feature{align-items:center;text-align:center}
  .noticebox{flex-direction:column;align-items:center;text-align:center}
  .btnrow{justify-content:center}
  footer{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important}
}