:root{
    --bg:#0b0c10; --card:#0f1117cc; --muted:#a6adbb; --txt:#eef2ff;
    --accent: #6ea8fe; --accent2:#a78bfa; --ring:#6ea8fe55;
    --grad1: radial-gradient(1200px 600px at 10% -10%, #6ea8fe22, transparent 60%);
    --grad2: radial-gradient(1200px 600px at 110% 10%, #a78bfa22, transparent 60%);
    --glass: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.08);
    --shadow: 0 10px 30px rgba(0,0,0,0.4);
    --radius: 16px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
  .wrap{max-width:1100px;margin:auto;padding:28px}
  .hero{
    position:relative; border:1px solid var(--border); background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) , var(--glass);
    border-radius:24px; padding:36px 28px; box-shadow:var(--shadow); overflow:hidden;
  }
  .hero:before, .hero:after{content:""; position:absolute; inset:0; background:var(--grad1), var(--grad2); pointer-events:none; mix-blend:screen}
  h1{font-size:40px; line-height:1.15; margin:0 0 10px; letter-spacing:-0.02em}
  p.lead{font-size:18px; color:var(--muted); margin:0 0 18px}
  .contract{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    border:1px solid var(--border); background:rgba(255,255,255,0.04);
    border-radius:14px; padding:12px 14px;
  }
  .code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:rgba(255,255,255,0.05);
    padding:8px 10px; border-radius:10px; overflow:auto; white-space:nowrap}
  .btn{
    appearance:none; border:1px solid var(--border); background:linear-gradient(180deg,#ffffff22,#00000011);
    color:var(--txt); padding:10px 14px; border-radius:12px; cursor:pointer;
    box-shadow:inset 0 0 0 1px #ffffff14, 0 6px 20px rgba(0,0,0,0.25);
  }
  .btn:hover{outline:2px solid var(--ring)}
  .grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr); margin-top:26px}
  .card{grid-column: span 12; border:1px solid var(--border); background:var(--card); border-radius:var(--radius); padding:22px}
  @media (min-width:900px){
    .card.span6{grid-column: span 6}
    .card.span4{grid-column: span 4}
  }
  h2{font-size:26px; margin:0 0 10px}
  h3{font-size:18px; margin:18px 0 6px; color:#dbe3ff}
  ul{margin:8px 0 0 18px; padding:0}
  .badge{
    display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--border);
    background:rgba(255,255,255,0.06); font-size:12px; color:var(--muted); margin-right:8px
  }
  .kpi{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px}
  .kpi .box{flex:1 1 160px; border:1px solid var(--border); border-radius:14px; padding:14px; background:rgba(255,255,255,0.04)}
  .footer{margin:30px 0 10px; color:var(--muted); font-size:13px}
  a{color:#c6d3ff; text-decoration:none}
  a:hover{text-decoration:underline}
  .muted{color:var(--muted)}
  .divider{height:1px;background:var(--border);margin:14px 0}