html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #0A0A0A;
  background: #EBEEF4;
}
a { color: #00703C; text-decoration: none; }
a:hover { color: #00582F; text-decoration: underline; }
img { display: block; }

.page {
  min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: radial-gradient(760px 760px at 50% -8%, #E3EDFF 0%, #EEF1F7 55%, #EBEEF4 100%);
}
.muted { font-size: 13px; color: #8A8F99; }

/* Header */
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 28px; max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,112,60,.28); }
.btn-soft {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 11px;
  background: rgba(0,112,60,.12); color: #00703C; font-size: 13px; font-weight: 600;
}
.btn-soft:hover { background: rgba(0,112,60,.18); text-decoration: none; color: #00703C; }

/* Main */
.cc-main {
  flex: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center;
  max-width: 1100px; width: 100%; margin: 0 auto; padding: 40px 28px 72px; box-sizing: border-box;
}
.hero { display: flex; flex-direction: column; align-items: flex-start; max-width: 520px; }
.icon-wrap { position: relative; width: 76px; height: 76px; }
.icon-wrap img { position: relative; width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 6px 8px rgba(0,112,60,.28); }
.glow {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0,112,60,.24) 0%, rgba(0,112,60,0) 70%);
}
.glow-sm { width: 240px; height: 240px; margin: -120px 0 0 -120px; filter: blur(28px); }
.glow-lg { width: 340px; height: 340px; margin: -170px 0 0 -170px; filter: blur(30px); }
h1 { margin: 24px 0 0; font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.8px; text-wrap: balance; }
.lede { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: #8A8F99; max-width: 440px; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.btn-store {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 18px; border-radius: 16px;
  background: #00703C; color: #fff; box-shadow: 0 4px 6px rgba(0,112,60,.28);
}
.btn-store:hover { background: #00582F; color: #fff; text-decoration: none; }
.btn-store-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.btn-store-text .small { font-size: 11px; font-weight: 500; opacity: .9; }
.btn-store-text .big { font-size: 19px; font-weight: 600; letter-spacing: -0.2px; }
.live { display: flex; align-items: center; gap: 7px; margin-top: 22px; padding-left: 4px; }
.dot { position: relative; width: 7px; height: 7px; display: inline-block; }
.dot-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1F9D52; box-sizing: border-box; animation: ccPulse 1.4s ease-out infinite; }
.dot-core { position: absolute; inset: 0; border-radius: 50%; background: #1F9D52; }
@keyframes ccPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }

/* Scene */
.cc-scene { position: relative; height: 520px; min-width: 0; max-width: 100%; }
.search {
  position: absolute; left: 50%; top: 88px; width: 300px; margin-left: -150px; height: 54px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #fff; border-radius: 16px;
  border: 0.5px solid rgba(0,0,0,.08); box-shadow: 0 6px 7px rgba(18,38,78,.08), 0 8px 14px rgba(18,38,78,.08); z-index: 4;
}
.search-text { display: flex; align-items: center; font-size: 17px; }
.caret { display: inline-block; width: 2px; height: 20px; background: #00703C; margin-left: 2px; animation: ccBlink 1.1s steps(1) infinite; }
@keyframes ccBlink { 50% { opacity: 0; } }

.card-pos { position: absolute; left: 50%; width: 280px; margin-left: -140px; }
.card-pos-1 { top: 300px; transform: rotate(-9deg) translate(-105px, 0); opacity: .85; z-index: 1; }
.card-pos-2 { top: 268px; transform: rotate(7deg) translate(100px, 0); opacity: .92; z-index: 2; }
.card-pos-3 { top: 156px; width: 300px; margin-left: -150px; transform: rotate(-2deg); z-index: 3; }
.card {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 20px;
  border: 0.5px solid rgba(0,0,0,.08); box-shadow: 0 6px 7px rgba(18,38,78,.08);
}
.card-front { box-shadow: 0 6px 7px rgba(18,38,78,.08), 0 12px 18px rgba(18,38,78,.08); }
.card-top { display: flex; align-items: flex-start; gap: 12px; }
.card-bottom { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 44px; height: 44px; border-radius: 14px; color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.av-red { background: linear-gradient(135deg,#FF8079,#D83A30); box-shadow: inset 0 0 0 1.5px rgba(217,67,58,.35); }
.av-blue { background: linear-gradient(135deg,#3AA3FF,#0A6BFF); box-shadow: inset 0 0 0 1.5px rgba(31,157,82,.35); }
.av-green { background: linear-gradient(135deg,#37D9A6,#0FA97A); box-shadow: inset 0 0 0 1.5px rgba(31,157,82,.35); }
.card-name { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.card-name .name { font-size: 16px; font-weight: 600; }
.card-name .sub { font-size: 12.5px; color: #8A8F99; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-ok { background: #E7F7EE; color: #137A41; } .status-ok .status-dot { background: #1F9D52; }
.status-bad { background: #FDECEC; color: #C2342B; } .status-bad .status-dot { background: #D9433A; }
.reg {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 8px; background: #E5E6EC;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 600;
}
.flag { width: 16px; height: 11.5px; border-radius: 2.5px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.flag-en { background: linear-gradient(#CE1124,#CE1124) center/100% 2.3px no-repeat, linear-gradient(#CE1124,#CE1124) center/2.3px 100% no-repeat, #fff; }
.flag-sc { background: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%), #0065BD; }
.pill { padding: 5px 9px; border-radius: 8px; background: #E5E6EC; color: #8A8F99; font-size: 12.5px; font-weight: 600; }
.pill-green { background: rgba(0,112,60,.12); color: #00703C; }
.spacer { flex: 1; }

.notif {
  position: absolute; left: 50%; top: 380px; width: 290px; margin-left: -145px; transform: rotate(3deg) translate(-20px, 0); z-index: 4;
  display: flex; align-items: flex-start; gap: 11px; padding: 12px; box-sizing: border-box;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 18px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 16px rgba(18,38,78,.08);
}
.notif img { width: 36px; height: 36px; border-radius: 10px; }
.notif-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notif-head { display: flex; justify-content: space-between; gap: 8px; }
.notif-app { font-size: 12.5px; font-weight: 600; }
.notif-time { font-size: 11.5px; color: #8A8F99; }
.notif-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-sub { font-size: 12.5px; color: #8A8F99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Footer */
.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 18px 28px 28px; max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box; font-size: 13px; color: #8A8F99;
}
.footer nav { display: flex; gap: 20px; }
.footer a { color: #8A8F99; }
.footer a:hover { color: #00703C; }

@media (max-width: 760px) {
  .cc-main { grid-template-columns: minmax(0,1fr); gap: 24px; padding-bottom: 40px; }
  .cc-scene { transform: scale(.82); transform-origin: top center; height: 440px; }
  h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .dot-ring, .caret { animation: none; } }