*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#050b16;color:#eaf2ff;font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 18% 16%,rgba(84,220,255,.16),transparent 28%),radial-gradient(circle at 82% 8%,rgba(126,82,255,.18),transparent 30%),linear-gradient(180deg,#050b16,#07111f 46%,#040812)}
a{color:#61dcff;text-decoration:none}
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 6vw;background:rgba(5,11,22,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(97,220,255,.16)}
.logo{display:flex;align-items:center;gap:12px;color:white;font-weight:850;letter-spacing:.25px}
.logo-mark{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid #61dcff;color:#61dcff;box-shadow:0 0 28px rgba(97,220,255,.38)}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{color:#d5e9ff;font-size:.95rem}
.nav-cta{border:1px solid rgba(97,220,255,.72);padding:8px 14px;border-radius:999px}
.hero{min-height:86vh;padding:8vw 6vw 5vw;display:grid;grid-template-columns:1.18fr .82fr;gap:52px;align-items:center}
.eyebrow{color:#61dcff;text-transform:uppercase;letter-spacing:.22em;font-weight:800;font-size:.78rem}
h1{font-size:clamp(2.8rem,7vw,6.8rem);line-height:.92;letter-spacing:-.065em;margin:12px 0 24px}
h2{font-size:clamp(2.1rem,4.5vw,4.7rem);line-height:1.02;letter-spacing:-.05em;margin:0 0 18px}
h3{font-size:1.38rem;margin:0 0 12px}
.lead{font-size:1.18rem;color:#b8cadc;max-width:820px}
.button{display:inline-block;margin:18px 12px 0 0;padding:14px 20px;border-radius:999px;font-weight:800}
.primary{background:linear-gradient(135deg,#61dcff,#8b67ff);color:#04101e}
.secondary{border:1px solid rgba(255,255,255,.28);color:white}
.hero-panel,.contact-card,.content-panel{border:1px solid rgba(97,220,255,.24);border-radius:30px;padding:32px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 35px 90px rgba(0,0,0,.34)}
.orb{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,#fff 0,#61dcff 18%,#765bff 46%,transparent 72%);box-shadow:0 0 95px rgba(97,220,255,.5);margin-bottom:28px}
.page-hero{padding:7vw 6vw 3vw;max-width:1120px}
.page-hero p{color:#b8cadc;font-size:1.15rem}
.tile-grid{padding:3vw 6vw 7vw;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.tile{display:block;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border-radius:28px;padding:22px;color:#eaf2ff;transition:.2s transform,.2s border-color;overflow:hidden}
.tile:hover{transform:translateY(-4px);border-color:rgba(97,220,255,.56)}
.tile img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#fff;border-radius:18px;border:1px solid rgba(97,220,255,.18);margin-bottom:18px}
.tile span{color:#61dcff;font-weight:900}
.demo-layout{padding:2vw 6vw 7vw;display:grid;grid-template-columns:1fr .85fr;gap:42px;align-items:start}
.demo-visual img,.chart img{width:100%;border-radius:26px;background:#fff;border:1px solid rgba(97,220,255,.24);box-shadow:0 30px 80px rgba(0,0,0,.38)}
.copy p{color:#b8cadc}
.use-cases{margin-top:22px;display:grid;gap:12px}
.use-case{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);border-radius:18px;padding:16px}
.use-case b{color:white}
.chart{grid-column:1 / -1;border:1px solid rgba(97,220,255,.22);background:rgba(97,220,255,.055);border-radius:28px;padding:24px;margin-top:10px}
.chart p{color:#b8cadc}
.contact-card{margin:3vw 6vw 7vw;max-width:760px}
footer{border-top:1px solid rgba(255,255,255,.1);padding:30px 6vw;display:flex;justify-content:space-between;gap:20px;color:#9fb2c7}
@media(max-width:950px){.hero,.demo-layout,.tile-grid{grid-template-columns:1fr}.site-header{align-items:flex-start;flex-direction:column}footer{flex-direction:column}}


/* V7 readability patch: demonstration tile text */
.tile h3 {
  color: #ffffff;
}

.tile p {
  color: #eef6ff;
  font-weight: 500;
}

.tile span {
  color: #61dcff;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.tile:hover h3 {
  color: #61dcff;
}


/* ===== FINAL TILE LINK FIX ===== */
.tile,
.tile:link,
.tile:visited,
.tile:active {
    color:#ffffff !important;
    text-decoration:none !important;
}

.tile h3,
.tile h3:link,
.tile h3:visited,
.tile h3 a,
.tile h3 a:link,
.tile h3 a:visited {
    color:#ffffff !important;
    text-decoration:none !important;
}

.tile p,
.tile p:link,
.tile p:visited,
.tile p a,
.tile p a:link,
.tile p a:visited {
    color:#eef6ff !important;
    text-decoration:none !important;
}

.tile:hover h3,
.tile:hover h3 a {
    color:#61dcff !important;
}

.tile a,
.tile a:link,
.tile a:visited,
.tile a:hover,
.tile a:active {
    color:#ffffff !important;
    text-decoration:none !important;
}