:root {
  color-scheme: dark;
  --ink: #f6f7ff;
  --muted: #a8afc7;
  --faint: #717a98;
  --night: #080a15;
  --night-2: #0e1021;
  --panel: rgba(19, 22, 47, .58);
  --line: rgba(255, 255, 255, .115);
  --line-strong: rgba(255, 255, 255, .19);
  --violet: #a78bfa;
  --cyan: #5ee7ff;
  --mint: #72f2b7;
  --hot: #ff7ab6;
  --shadow: 0 28px 92px rgba(0, 0, 0, .42);
  --mouse-x: 50vw;
  --mouse-y: 20vh;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(42rem 42rem at 8% -10%, rgba(135, 100, 255, .20), transparent 72%),
    radial-gradient(34rem 34rem at 100% 10%, rgba(55, 219, 255, .14), transparent 70%),
    radial-gradient(30rem 30rem at 50% 102%, rgba(73, 245, 186, .10), transparent 68%),
    var(--night);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
body::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background: radial-gradient(26rem 26rem at var(--mouse-x) var(--mouse-y), rgba(129, 104, 255, .12), transparent 72%);
  transition: background .15s linear;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.site-frame { width: min(1210px, calc(100% - 48px)); margin: 0 auto; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0 0;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-glyph {
  position: relative;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  color: white;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: -.06em;
  background: linear-gradient(140deg, #9b7dff, #3dc7ff 55%, #69f5bb);
  box-shadow: 0 10px 34px rgba(107, 124, 255, .34);
}
.brand-glyph::after { content:""; position:absolute; inset:1px; border-radius:10px; border:1px solid rgba(255,255,255,.18); }
.brand-word { font-size: .9rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav-copy { color: var(--faint); font-size: .86rem; }
.nav-link {
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:700; background:rgba(255,255,255,.025);
  transition: border-color .22s ease, color .22s ease, transform .22s ease, background .22s ease;
}
.nav-link:hover, .nav-link:focus-visible { border-color: rgba(129, 230, 255, .55); color:var(--ink); background:rgba(87,224,255,.08); transform:translateY(-1px); outline:none; }

.hero { position:relative; display:grid; grid-template-columns: 1.12fr .88fr; align-items:center; gap:52px; padding:92px 0 86px; }
.hero::before { content:""; position:absolute; width:560px; height:560px; right:-160px; top:-42px; pointer-events:none; border-radius:50%; background:conic-gradient(from 140deg, transparent 0 9%, rgba(83,214,255,.19) 19%, transparent 34%, rgba(174,135,255,.18) 52%, transparent 71%, rgba(93,249,183,.15) 82%, transparent); filter: blur(1px); animation:spin 22s linear infinite; }
.hero-copy { position:relative; z-index:1; }
.kicker { display:inline-flex; align-items:center; gap:9px; margin:0 0 18px; color:#c8d0ff; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px rgba(114,242,183,.11), 0 0 22px rgba(114,242,183,.68); animation:pulse 2.4s ease-in-out infinite; }
.hero h1 { max-width: 730px; margin:0; font-size:clamp(3.2rem, 7vw, 6.7rem); line-height:1.02; letter-spacing:-.055em; font-weight:880; }
.hero h1 .gradient-text {
  padding-right: .09em;
  margin-right: -.09em;
  background: linear-gradient(100deg, #ffffff 0%, #d4e2ff 35%, #a78bfa 61%, #5ee7ff 100%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { max-width:560px; margin:26px 0 0; color:var(--muted); font-size:clamp(1rem, 2vw, 1.17rem); line-height:1.72; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
.primary-btn, .ghost-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 18px; border-radius:15px; font-weight:800; font-size:.94rem; text-decoration:none; }
.primary-btn { color:#08101f; background:linear-gradient(120deg, #d9ccff, #8ceeff 56%, #7bf2c0); box-shadow: 0 16px 36px rgba(100,190,255,.22); transition:transform .22s ease, box-shadow .22s ease; }
.primary-btn:hover { transform:translateY(-3px); box-shadow:0 24px 48px rgba(100,190,255,.30); }
.ghost-btn { border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.025); transition:border-color .2s ease, color .2s ease, transform .2s ease; }
.ghost-btn:hover { color:var(--ink); border-color:var(--line-strong); transform:translateY(-2px); }

.hero-art { position:relative; min-height:448px; display:grid; place-items:center; }
.halo { position:absolute; width:min(385px, 92%); aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(124,116,255,.33), rgba(64,195,255,.12) 44%, transparent 67%); filter:blur(2px); animation:breathe 5.5s ease-in-out infinite; }
.orbit { position:absolute; inset:50% auto auto 50%; width:350px; height:350px; border:1px solid rgba(255,255,255,.12); border-radius:50%; transform:translate(-50%,-50%) rotate(20deg); animation:spin 28s linear infinite; }
.orbit::before, .orbit::after { position:absolute; content:""; width:10px; height:10px; border-radius:50%; top:18%; left:4%; background:var(--cyan); box-shadow:0 0 18px var(--cyan); }
.orbit::after { width:7px; height:7px; top:76%; left:85%; background:var(--hot); box-shadow:0 0 18px var(--hot); }
.orbit--two { width:260px; height:260px; border-color:rgba(126,244,187,.13); transform:translate(-50%,-50%) rotate(-40deg); animation-direction:reverse; animation-duration:19s; }
.hero-prism { position:relative; width:min(295px, 77vw); aspect-ratio: .92; border:1px solid rgba(255,255,255,.20); border-radius:46px; background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.02) 40%, rgba(99,235,255,.14) 120%); box-shadow: 0 46px 120px rgba(0,0,0,.43), inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(16px); transform:rotate(8deg); overflow:hidden; animation:float 7s ease-in-out infinite; }
.hero-prism::before { content:""; position:absolute; width:300px; height:120px; top:-38px; right:-65px; border-radius:50%; background:linear-gradient(90deg, rgba(255,255,255,.46), rgba(255,255,255,0)); transform:rotate(20deg); filter:blur(3px); }
.hero-prism::after { content:""; position:absolute; inset: 13px; border:1px solid rgba(255,255,255,.13); border-radius:36px; }
.prism-top { position:absolute; inset:24px 24px auto; display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.79); font-size:.72rem; letter-spacing:.12em; font-weight:800; }
.prism-top span:last-child { display:inline-block; color:#d1d8ef; }
.prism-mark { position:absolute; inset:50% auto auto 50%; width:134px; height:134px; display:grid; place-items:center; border-radius:38px; color:white; font-size:2.4rem; font-weight:900; letter-spacing:-.12em; transform:translate(-50%,-50%) rotate(-8deg); background:linear-gradient(135deg, rgba(176,141,255,.98), rgba(75,205,255,.96) 64%, rgba(110,245,189,.94)); box-shadow:0 24px 54px rgba(99,150,255,.44); }
.prism-mark::after { content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.28); border-radius:30px; }
.prism-data { position:absolute; left:24px; right:24px; bottom:24px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.prism-data span { min-height:52px; padding:10px 12px; border:1px solid rgba(255,255,255,.11); border-radius:15px; color:#eaf5ff; font-size:.76rem; font-weight:750; background:rgba(6,9,24,.30); }
.prism-data b { display:block; margin-top:2px; color:rgba(255,255,255,.57); font-size:.62rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }

.stats-ribbon { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--line); box-shadow:var(--shadow); }
.stat { min-height:104px; padding:21px; background:rgba(15,18,40,.83); }
.stat b { display:block; font-size:1.48rem; letter-spacing:-.05em; }
.stat span { display:block; margin-top:5px; color:var(--faint); font-size:.78rem; font-weight:700; }

.apps-section { padding:100px 0 52px; }
.section-top { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.section-kicker { margin:0 0 11px; color:var(--cyan); font-size:.75rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.section-title { max-width:650px; margin:0; font-size:clamp(2rem, 4vw, 3.6rem); line-height:1.01; letter-spacing:-.06em; }
.filter-group { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.filter-btn { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--faint); background:rgba(255,255,255,.018); cursor:pointer; font-size:.77rem; font-weight:800; transition:background .2s, color .2s, border-color .2s, transform .2s; }
.filter-btn:hover { transform:translateY(-1px); color:var(--muted); }
.filter-btn.is-active { color:#07101b; border-color:transparent; background:linear-gradient(110deg,#cdf0ff,#a5caff 51%,#d7bbff); }
.app-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.app-card { --a:#a78bfa; --b:#5ee7ff; position:relative; grid-column:span 4; min-height:300px; padding:22px; overflow:hidden; border:1px solid var(--line); border-radius:28px; color:var(--ink); text-decoration:none; background:linear-gradient(145deg, color-mix(in srgb, var(--a) 15%, transparent), rgba(20,23,49,.86) 44%, color-mix(in srgb, var(--b) 11%, transparent)); box-shadow: 0 18px 65px rgba(0,0,0,.24); transform-style:preserve-3d; transition: opacity .28s ease, transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.app-card::before { content:""; position:absolute; inset:-65%; pointer-events:none; background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%), color-mix(in srgb, var(--b) 22%, transparent), transparent 29%); transition:background .1s; }
.app-card::after { content:""; position:absolute; width:220px; height:220px; border:1px solid color-mix(in srgb,var(--a) 55%,transparent); border-radius:50%; top:-120px; right:-96px; box-shadow:0 0 0 28px color-mix(in srgb,var(--b) 6%,transparent), 0 0 68px color-mix(in srgb,var(--a) 14%,transparent); }
.app-card:hover, .app-card:focus-visible { z-index:2; border-color:color-mix(in srgb,var(--b) 50%,white 6%); box-shadow:0 28px 82px rgba(0,0,0,.42); outline:none; }
.app-card.is-hidden { display:none; }
.app-card--wide { grid-column:span 8; }
.app-card-inner { position:relative; z-index:1; display:flex; min-height:255px; flex-direction:column; justify-content:space-between; }
.app-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.icon-tile { position:relative; width:72px; height:72px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:23px; background:rgba(8,10,22,.36); box-shadow:0 14px 30px rgba(0,0,0,.25), 0 0 44px color-mix(in srgb,var(--a) 30%,transparent); transform:translateZ(20px); }
.icon-tile img { width:100%; height:100%; object-fit:cover; }
.card-arrow { display:grid; width:37px; height:37px; place-items:center; border:1px solid var(--line); border-radius:50%; color:#edf7ff; font-size:1.08rem; background:rgba(6,8,20,.35); }
.app-card-meta { display:flex; align-items:center; gap:8px; color:color-mix(in srgb,var(--b) 75%,white); font-size:.72rem; font-weight:850; letter-spacing:.10em; text-transform:uppercase; }
.app-card-meta::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--b); box-shadow:0 0 16px var(--b); }
.app-card h3 { margin:11px 0 8px; font-size:clamp(1.5rem, 2.7vw, 2.32rem); line-height:1; letter-spacing:-.055em; }
.app-card p { max-width:430px; margin:0; color:#b4bdd7; font-size:.93rem; line-height:1.55; }
.app-card .tiny { display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:rgba(255,255,255,.65); font-size:.76rem; font-weight:700; }
.app-card .tiny i { width:4px; height:4px; border-radius:50%; background:var(--hot); box-shadow:0 0 10px var(--hot); }

.manifesto { display:grid; grid-template-columns:.88fr 1.12fr; gap:28px; margin:76px 0 72px; padding:28px; border:1px solid var(--line); border-radius:30px; background:linear-gradient(120deg, rgba(167,139,250,.12), rgba(89,226,255,.045) 48%, rgba(112,242,183,.09)); box-shadow:var(--shadow); }
.manifesto-mark { display:grid; min-height:258px; place-items:center; overflow:hidden; border-radius:23px; background:radial-gradient(circle at 30% 24%,rgba(189,168,255,.64),transparent 28%), radial-gradient(circle at 70% 70%,rgba(98,231,255,.43),transparent 30%), #111433; }
.manifesto-mark img { width:124px; height:124px; object-fit:contain; border-radius:38px; box-shadow:0 26px 80px rgba(0,0,0,.35); transform:rotate(-8deg); }
.manifesto-copy { display:flex; flex-direction:column; justify-content:center; padding:10px 12px; }
.manifesto-copy p:first-child { margin:0 0 12px; color:var(--mint); font-size:.75rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.manifesto-copy h2 { max-width:600px; margin:0; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.05; letter-spacing:-.06em; }
.manifesto-copy .body { max-width:590px; margin:18px 0 0; color:var(--muted); line-height:1.72; }
.manifesto-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:25px; }
.manifesto-list span { padding:12px; border:1px solid rgba(255,255,255,.10); border-radius:14px; color:#d8def3; font-size:.77rem; font-weight:760; background:rgba(6,8,20,.24); }

.site-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:30px 0 48px; border-top:1px solid var(--line); color:var(--faint); font-size:.83rem; }
.site-footer a { color:#c7d6ff; text-decoration:none; }
.site-footer a:hover { color:white; }

[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .72s cubic-bezier(.2,.75,.2,1), transform .72s cubic-bezier(.2,.75,.2,1); }
[data-reveal].is-visible { opacity:1; transform:none; }

@keyframes spin { to { transform:translate(-50%,-50%) rotate(380deg); } }
@keyframes float { 0%,100%{ transform:rotate(8deg) translateY(0);} 50%{ transform:rotate(6deg) translateY(-14px);} }
@keyframes breathe { 0%,100%{ transform:scale(.95); opacity:.78;} 50%{ transform:scale(1.08); opacity:1;} }
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(.7); opacity:.52;} }

@media (max-width: 920px) {
  .hero { grid-template-columns:1fr; gap:22px; padding-top:70px; }
  .hero-art { min-height:360px; order:-1; }
  .hero-prism { width:250px; }
  .app-card, .app-card--wide { grid-column:span 6; }
  .manifesto { grid-template-columns:1fr; }
  .manifesto-mark { min-height:180px; }
}
@media (max-width: 660px) {
  .site-frame { width:min(100% - 28px,1210px); }
  .site-nav { padding-top:16px; }
  .nav-copy { display:none; }
  .hero { padding:56px 0 56px; }
  .hero h1 { font-size:clamp(3rem, 15vw, 4.5rem); }
  .hero-art { min-height:300px; }
  .orbit { width:290px; height:290px; }
  .hero-prism { width:218px; border-radius:34px; }
  .prism-mark { width:108px; height:108px; font-size:2rem; border-radius:31px; }
  .prism-data { left:16px; right:16px; bottom:16px; }
  .stats-ribbon { grid-template-columns:1fr; }
  .stat { min-height:88px; }
  .section-top { align-items:flex-start; flex-direction:column; }
  .filter-group { justify-content:flex-start; }
  .app-grid { grid-template-columns:1fr; }
  .app-card, .app-card--wide { grid-column:1; min-height:272px; }
  .manifesto { margin-top:56px; padding:14px; border-radius:24px; }
  .manifesto-copy { padding:18px 6px 10px; }
  .manifesto-list { grid-template-columns:1fr; }
  .site-footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

/* Real Codivo mark — replaces the former letter placeholder. */
.brand-glyph img { width: 24px; height: 24px; object-fit: contain; display: block; border-radius: 7px; }
.prism-mark img { width: 88px; height: 88px; object-fit: contain; display: block; position: relative; z-index: 1; border-radius: 18px; filter: drop-shadow(0 10px 18px rgba(13,31,70,.24)); }
@media (max-width: 720px) { .prism-mark img { width: 72px; height: 72px; } }