/* Violaeon — single-hue violet design system.
   Brand hue is the only hue on the site: violet #8B5CF6. No teal, ever. */

:root{
  --bg:#0B0A12; --bg2:#12101F; --ink:#EDEAF7; --muted:#A8A2C4;
  --violet:#8B5CF6; --violet-l:#A78BFA; --line:#2A2540;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--violet-l); text-decoration:none}
a:hover{text-decoration:underline}
img{display:block}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}

/* ---------- nav ---------- */
.topnav{
  position:sticky; top:0; z-index:20; background:rgba(11,10,18,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:18px; height:58px}
.wordmark{font-size:13px; letter-spacing:.30em; text-transform:uppercase; color:var(--violet-l); font-weight:600}
.wordmark:hover{text-decoration:none}
.navlinks{display:flex; align-items:center; gap:20px; font-size:14px}
.navlinks a{color:var(--muted)}
.navlinks a:hover{color:var(--ink); text-decoration:none}
.navlinks a.on{color:var(--ink)}
.navcta{
  color:#fff !important; background:var(--violet); padding:7px 14px; border-radius:7px;
  font-weight:600; font-size:13px;
}
.navcta:hover{background:var(--violet-l); color:#0B0A12 !important}

/* ---------- heroes ---------- */
header.hero{
  padding:80px 0 58px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(700px 340px at 92% 8%, rgba(167,139,250,.16), transparent 62%);
}
header.page{
  padding:60px 0 46px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(760px 340px at 8% -20%, rgba(139,92,246,.26), transparent 62%);
}
h1{font-size:clamp(26px,3.6vw,34px); line-height:1.18; margin:0 0 16px; font-weight:700; letter-spacing:-.02em}
header.page h1{margin-bottom:14px}
.lede{font-size:18.5px; color:var(--muted); max-width:700px; margin:0 0 28px}
.lede strong{color:var(--ink); font-weight:600}
.btns{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 20px; border-radius:8px; font-weight:600; font-size:15px;
  border:1px solid var(--violet); background:var(--violet); color:#fff;
}
.btn.ghost{background:transparent; color:var(--violet-l); border-color:var(--line)}
.btn:hover{text-decoration:none; background:var(--violet-l); color:#0B0A12}
.btn.ghost:hover{border-color:var(--violet-l); background:transparent; color:var(--violet-l)}

/* ---------- sections ---------- */
section{padding:58px 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--violet-l); margin:0 0 24px; font-weight:600}
h3{margin:0 0 8px; font-size:17px; font-weight:600}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sec-head h2{margin-bottom:24px}

/* ---------- direction cards (home) ---------- */
.dirs{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.dir{display:flex; flex-direction:column; background:var(--bg2); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.dir:hover{border-color:var(--violet); text-decoration:none}
.dir-img{aspect-ratio:16/10; background:#fff; overflow:hidden; border-bottom:1px solid var(--line)}
.dir-img img{width:100%; height:100%; object-fit:cover}
.dir-img.contain img{object-fit:contain; padding:16px}
.dir-body{flex:1; display:flex; flex-direction:column; padding:20px 22px 22px}
.dir-body h3{font-size:19px; color:var(--ink); margin-bottom:10px}
.dir-body p{margin:0 0 14px; color:var(--muted); font-size:15px}
.more{font-size:13.5px; font-weight:600; color:var(--violet-l)}
.dir-body .more{margin-top:auto; padding-top:10px}

/* ---------- capability / scope cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  display:flex; flex-direction:column;
}
.card h3{flex:0 0 auto}
.card p{margin:0 0 16px; color:var(--muted); font-size:15px}
.idx{font-size:12px; font-weight:700; color:var(--violet); letter-spacing:.10em; display:block; margin-bottom:10px}
.card .out{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--violet-l);
}
.card .out b{color:var(--ink); font-weight:600}

/* ---------- case cards ---------- */
.cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:18px}
.case{
  background:var(--bg2); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
.case-img{height:216px; background:#fff; overflow:hidden; border-bottom:1px solid var(--line)}
.case-img img{width:100%; height:100%; object-fit:cover}
.case-img.contain img{object-fit:contain}
.case-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.case-body h3{font-size:17px}
.case-body ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:14.5px}
.case-body ul li{margin-bottom:7px}
.tag{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet-l);
  font-weight:600; display:block; margin-bottom:10px;
}
.case-note{margin:auto 0 0; padding-top:14px; font-size:13px; line-height:1.55; color:var(--muted); font-style:italic}

/* ---------- cta band ---------- */
.cta{
  padding:54px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(139,92,246,.13), rgba(139,92,246,.02));
}
.cta h2{
  font-size:22px; letter-spacing:-.01em; text-transform:none; color:var(--ink); font-weight:700;
  margin:0 0 10px;
}
.cta p{margin:0 0 22px; color:var(--muted); font-size:16px}

/* ---------- about ---------- */
.about p{margin:0 0 14px; max-width:740px; color:var(--muted); font-size:16.5px}
.about p strong{color:var(--ink); font-weight:600}

/* ---------- footer ---------- */
footer{padding:40px 0 56px; color:var(--muted); font-size:14px}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .dirs{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  header.hero{padding:54px 0 44px}
  header.page{padding:46px 0 40px}
  .lede{font-size:17px}
  .nav-in{height:auto; padding:11px 0 0; flex-direction:column; align-items:flex-start; gap:8px}
  .navlinks{flex-wrap:wrap; gap:14px; font-size:13.5px; padding-bottom:11px}
  .case-img{height:180px}
}