/* ============================================================
   Or Kadosh - shared design kit for every site (same DNA as the Ai B-roll page)
   ============================================================ */
@font-face { font-family: "Lia"; src: url("assets/fonts/liafont-300.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lia"; src: url("assets/fonts/liafont-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lia"; src: url("assets/fonts/liafont-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lia"; src: url("assets/fonts/liafont-900.ttf") format("truetype"); font-weight: 900; font-display: swap; }
:root {
  --bg: #07040d; --bg-3: #160c27; --ink: #f5f0fc; --mute: #a99cc2; --dim: #6f6488;
  --violet: #9b6bff; --violet-2: #c9a8ff; --gold: #ffd43b; --gold-2: #ffe58a; --on-gold: #1d0c36; --rose: #ff7ab8; --cyan: #6ee7f2;
  --line: rgba(201,168,255,.15); --card: rgba(255,255,255,.04);
  --gold-grad: linear-gradient(100deg, #ffd43b 10%, #ffe58a 45%, #ffb938 90%);
  --ease: cubic-bezier(.2,.7,.1,1); --gutter: clamp(16px, 4vw, 56px); --maxw: 1240px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: "Lia", system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* sketch chrome: tells the viewer which site this is */
.sk { position: fixed; z-index: 90; bottom: 14px; left: 14px; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 99px; font-size: .78rem;
  background: rgba(255,255,255,.92); color: #1d0c36; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.sk a { padding: .45em 1em; border-radius: 99px; background: #1d0c36; color: #fff; font-weight: 700; }

/* nav */
.nav { position: fixed; z-index: 50; top: 14px; inset-inline: var(--gutter); display: flex; justify-content: space-between; align-items: center; max-width: 1180px; margin-inline: auto;
  padding: 8px 8px 8px 20px; border-radius: 99px; background: rgba(24,14,42,.55); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.05rem; }
.nav__brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.nav__brand small { display: block; font-weight: 300; font-size: .72rem; color: var(--mute); }
.nav__links { display: flex; gap: 4px; font-size: .9rem; color: #cdbfe6; }
.nav__links a { padding: .5em 1em; border-radius: 99px; }
.nav__links a:hover { background: rgba(255,255,255,.07); color: var(--ink); }
@media (max-width: 860px) { .nav__links { display: none; } }

/* type */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; letter-spacing: .12em; color: var(--violet-2); }
.eyebrow::before { content: "✦"; color: var(--gold); }
.display { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .98; font-weight: 900; letter-spacing: -.01em; }
.h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.02; font-weight: 900; }
.light { font-weight: 300; color: var(--violet-2); }
.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: #d8cbee; font-weight: 300; max-width: 46ch; }
.muted { color: var(--mute); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 8px 8px 22px; padding-inline-start: 24px; border-radius: 99px; font-weight: 700; font-size: 1rem; border: 0; cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s; }
.btn i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.btn--gold { background: var(--gold); color: var(--on-gold); box-shadow: 0 16px 40px -14px rgba(255,212,59,.6); }
.btn--gold i { background: var(--on-gold); color: var(--gold); }
.btn--ghost { background: rgba(255,255,255,.06); color: var(--ink); border: 1px solid rgba(255,255,255,.14); }
.btn--ghost i { background: rgba(255,255,255,.1); }
.btn:hover { transform: translateY(-2px); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* sections */
.sec { position: relative; padding-block: clamp(80px, 10vw, 140px); }
.sec__head { margin-bottom: clamp(30px, 4vw, 56px); }
.sec__head .h2 { margin-top: 10px; }
.cards { display: grid; gap: clamp(14px, 1.6vw, 24px); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .c3, .c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .c3, .c2, .c4 { grid-template-columns: 1fr; } }
.card { position: relative; border-radius: 26px; padding: 24px; background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 45%), rgba(16,9,28,.85);
  border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1); }
.card h3 { font-size: 1.4rem; font-weight: 900; margin-top: 10px; }
.card p { color: var(--mute); margin-top: 8px; line-height: 1.5; font-weight: 300; }
.num { font-weight: 900; font-size: .8rem; letter-spacing: .14em; color: var(--gold); direction: ltr; display: inline-block; }
.tag { display: inline-block; font-size: .72rem; font-weight: 900; padding: .3em .8em; border-radius: 99px; background: var(--gold); color: var(--on-gold); }
.tag--ghost { background: rgba(255,255,255,.08); color: var(--violet-2); border: 1px solid var(--line); }

/* "what will be here" placeholder for sections that are only planned */
.plan { border: 1.5px dashed rgba(201,168,255,.3); border-radius: 22px; padding: 22px; color: var(--mute); background: rgba(155,107,255,.04); }
.plan b { color: var(--ink); }
.plan ul { margin: 10px 0 0; padding-inline-start: 18px; line-height: 1.8; }

/* steps */
.steps { counter-reset: s; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { list-style: none; counter-increment: s; }
.steps li::before { content: "0" counter(s); display: block; font-weight: 900; font-size: 2.6rem; color: transparent; -webkit-text-stroke: 1.2px rgba(201,168,255,.5); margin-bottom: 6px; direction: ltr; text-align: right; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* glass form */
.form { display: grid; gap: 12px; }
.form input, .form textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--ink); font: inherit; }
.form input::placeholder, .form textarea::placeholder { color: var(--dim); }

/* footer */
.foot { padding: 40px var(--gutter) 90px; text-align: center; color: var(--dim); font-size: .85rem; border-top: 1px solid var(--line); }

/* glow background */
.glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 40% at 50% 0%, rgba(155,107,255,.3), transparent 70%); }

/* reveal */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }