:root{
  --ink:#0f2a24; --ink2:#12332c; --muted:#5b6b67;
  --bg1:#f4fbf8; --bg2:#ffffff;
  --card:rgba(255,255,255,.72);
  --stroke:rgba(18,51,44,.14);
  --shadow:0 30px 80px rgba(0,0,0,.10);
  --accent:#2f7a66; --accent2:#4aa78c;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(140deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}
.bg{position:fixed; inset:0; pointer-events:none; z-index:-2;}
.blob{
  position:absolute; width:620px; height:620px; border-radius:999px;
  filter:blur(32px); opacity:.55; transform:translate3d(0,0,0);
  animation:float 14s ease-in-out infinite;
}
.b1{left:-220px; top:-240px; background:radial-gradient(circle at 30% 30%, rgba(74,167,140,.75), rgba(74,167,140,0) 60%);}
.b2{right:-280px; bottom:-260px; background:radial-gradient(circle at 40% 40%, rgba(47,122,102,.70), rgba(47,122,102,0) 62%); animation-duration:17s;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(34px)}}
.grain{
  position:absolute; inset:0; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size:320px 320px; z-index:-1;
}
.top{
  max-width:1080px; margin:0 auto; padding:28px 20px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px;}
.mark{
  width:42px; height:42px; border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  position:relative;
}
.mark .ring{position:absolute; inset:9px; border-radius:999px; border:2px solid rgba(47,122,102,.40);}
.mark .dot{
  position:absolute; width:10px; height:10px; border-radius:999px;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  right:10px; top:10px; box-shadow:0 8px 18px rgba(47,122,102,.30);
}
.brandtext .name{font-weight:700; letter-spacing:.2px;}
.brandtext .tag{color:var(--muted); font-weight:500; font-size:13px; margin-top:1px;}
.chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.58);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
  color:var(--ink2); font-weight:600; font-size:13px; white-space:nowrap;
}
.pulse{
  width:10px; height:10px; border-radius:999px;
  background:var(--accent2);
  box-shadow:0 0 0 0 rgba(74,167,140,.55);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,167,140,.55)}
  70%{box-shadow:0 0 0 10px rgba(74,167,140,0)}
  100%{box-shadow:0 0 0 0 rgba(74,167,140,0)}
}
.wrap{
  max-width:1080px; margin:0 auto; padding:20px 20px 40px;
  display:grid; gap:18px;
}
.card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--card);
  backdrop-filter: blur(12px);
  box-shadow:var(--shadow);
  padding:34px 28px;
}
h1{
  font-size:clamp(28px, 4vw, 46px);
  line-height:1.05; margin:0 0 14px; letter-spacing:-.6px;
}
.muted{color:var(--muted); font-weight:600}
.lead{
  margin:0 0 22px; font-size:16px;
  color:rgba(15,42,36,.86); max-width:68ch;
}
.grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px; margin:22px 0 26px;
}
.item{
  display:flex; gap:12px; padding:14px 14px;
  border-radius:16px; border:1px solid rgba(18,51,44,.10);
  background:rgba(255,255,255,.62);
}
.icon{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(74,167,140,.16), rgba(47,122,102,.08));
  border:1px solid rgba(47,122,102,.14); font-weight:800;
}
.title{font-weight:700; margin-bottom:2px}
.desc{color:var(--muted); font-size:13px}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 10px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:14px;
  border:1px solid rgba(18,51,44,.14);
  text-decoration:none; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change:transform;
}
.btn.primary{
  background:linear-gradient(180deg, var(--accent2), var(--accent));
  border-color:rgba(47,122,102,.22);
  color:white; box-shadow:0 18px 40px rgba(47,122,102,.25);
}
.btn.ghost{background:rgba(255,255,255,.60); color:var(--ink2);}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.mini{display:grid; gap:8px; margin-top:14px;}
.miniRow{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(18,51,44,.10);
  background:rgba(255,255,255,.56);
}
.miniLabel{color:var(--muted); font-weight:600}
.miniValue{font-weight:700}
.divider{
  height:1px; background:linear-gradient(90deg, rgba(18,51,44,0), rgba(18,51,44,.16), rgba(18,51,44,0));
  margin:18px 0 10px;
}
.footnote{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px;}
.dot2{width:8px; height:8px; border-radius:999px; background:rgba(47,122,102,.35)}
code{
  background:rgba(15,42,36,.06); border:1px solid rgba(15,42,36,.10);
  padding:2px 6px; border-radius:8px;
}
.small{
  border-radius:var(--radius); border:1px solid var(--stroke);
  background:rgba(255,255,255,.55); padding:18px 18px;
}
.pill{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(18,51,44,.12);
  background:rgba(255,255,255,.60);
  font-weight:700; font-size:12px; margin-bottom:10px;
}
.small p{margin:0; color:rgba(15,42,36,.86)}
.footer{
  max-width:1080px; margin:0 auto; padding:18px 20px 26px;
  display:flex; gap:10px; align-items:center; justify-content:center;
  color:rgba(15,42,36,.70); font-weight:600; font-size:13px;
}
.sep{opacity:.45}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.reveal.on{opacity:1; transform:translateY(0)}
.delay{transition-delay:.10s}
@media (max-width: 820px){
  .grid{grid-template-columns:1fr}
  .top{flex-direction:column; align-items:flex-start}
}