:root{
  --bg:#0a1027;
  --bg2:#142046;
  --panel:#141a3b;
  --panel2:#1c2450;
  --line:#394b86;
  --white:#f7f8ff;
  --muted:#b3bce3;
  --cyan:#35e1cf;
  --blue:#458cff;
  --purple:#7764ff;
  --orange:#ffad52;
  --danger:#ff6d72;
}
*{box-sizing:border-box}
html{background:#0a1027}
body{
  margin:0;
  color:var(--white);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 8%,rgba(100,86,255,.22),transparent 24rem),
    radial-gradient(circle at 88% 78%,rgba(41,210,208,.16),transparent 25rem),
    linear-gradient(180deg,#11112b 0%,#12113b 44%,#081326 100%);
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.32;
  background-image:radial-gradient(circle,rgba(122,139,207,.8) 0 1.4px,transparent 2.4px);
  background-size:190px 190px;
}
.page{position:relative;width:min(900px,calc(100% - 28px));margin:0 auto;padding:34px 0 46px}
.hero{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.app-icon{
  width:92px;height:92px;border-radius:27px;
  box-shadow:0 18px 45px rgba(0,0,0,.36),0 0 0 1px rgba(72,224,213,.16)
}
.eyebrow{margin:0 0 6px;color:var(--cyan);font-size:.78rem;letter-spacing:.15em;font-weight:900}
h1{margin:0;font-size:clamp(2.5rem,7vw,4.2rem);line-height:1;letter-spacing:-.045em}
.subtitle{margin:10px 0 0;color:var(--muted);font-size:1.03rem}
.updated{
  display:inline-flex;gap:10px;align-items:center;margin:4px 0 10px;padding:10px 14px;
  border:1px solid rgba(117,100,255,.45);border-radius:999px;
  background:rgba(20,26,59,.86);color:var(--muted)
}
.updated strong{color:var(--cyan)}
.card,.contact{
  background:linear-gradient(145deg,rgba(20,26,59,.98),rgba(18,25,55,.98));
  border:1px solid rgba(61,74,137,.78);
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}
.card{padding:27px 28px;border-radius:30px;margin:16px 0}
.card h2,.contact h2{margin:0 0 12px;font-size:1.3rem}
.card p{margin:0 0 13px;color:var(--muted);line-height:1.72}
.card p:last-child{margin-bottom:0}
a{color:var(--cyan);font-weight:800;text-decoration:none}
a:hover{text-decoration:underline}
.accent.cyan{border-color:rgba(53,225,207,.62)}
.accent.orange{border-color:rgba(255,173,82,.58)}
.tag{
  display:inline-flex;padding:7px 10px;margin-bottom:11px;border-radius:999px;
  background:linear-gradient(135deg,rgba(119,100,255,.20),rgba(69,140,255,.18));
  border:1px solid rgba(95,116,255,.45);
  color:#d3d6ff;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase
}
.accent.cyan .tag{color:var(--cyan);border-color:rgba(53,225,207,.44);background:rgba(53,225,207,.10)}
.accent.orange .tag{color:var(--orange);border-color:rgba(255,173,82,.44);background:rgba(255,173,82,.10)}
.contact{
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:20px;padding:25px 28px;border-radius:30px
}
.contact p{margin:.4rem 0 0;color:var(--muted);line-height:1.6;max-width:600px}
.email{
  display:inline-flex;padding:14px 18px;border-radius:18px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  color:white;
  box-shadow:0 10px 28px rgba(69,140,255,.22)
}
footer{display:flex;justify-content:space-between;gap:16px;padding:24px 4px 0;color:#6674a5;font-size:.88rem}
@media(max-width:640px){
  .page{width:min(100% - 20px,900px);padding-top:22px}
  .hero{align-items:flex-start;gap:13px}
  .app-icon{width:70px;height:70px;border-radius:20px}
  h1{font-size:2.25rem}
  .card{padding:21px 19px;border-radius:24px}
  .contact{padding:21px 19px;border-radius:24px}
  .email{width:100%;justify-content:center;text-align:center;word-break:break-all}
  footer{flex-direction:column;gap:5px}
}