/* Rego Technologies landing page: the edit suite as the front door */
:root {
  --red: #D9041A;
  --red-deep: #A80314;
  --red-ink: #7A0210;
  --red-50: #FFF1F2;
  --ink: #18181B;
  --ink-2: #3F3F46;
  --muted: #6B6B73;
  --line: #ECECEE;
  --white: #FFFFFF;
  --suite: #141416;      /* editing software ground */
  --suite-2: #1E1E22;
  --suite-3: #2A2A30;
  --suite-text: #E9E9EC;
  --suite-dim: #9A9AA3;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --name-w: 46px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--red); color: #fff; }
a { color: var(--red); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--red); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); color: #fff; box-shadow: 0 10px 24px -8px rgba(217,4,26,.55); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-lg { min-height: 52px; padding: 13px 26px; font-size: 16px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px;
  padding: 12px var(--gutter); background: rgba(255,255,255,.92); border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(0,0,0,.35); }
@supports (backdrop-filter: blur(8px)) { .nav { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(10px); } }
.nav-brand img { width: 118px; height: auto; }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; position: relative; }
.nav nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav nav a:hover { color: var(--ink); }
.nav nav a:hover::after { transform: scaleX(1); }

/* ---------- first viewport: the suite ---------- */
.suite {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px);
  align-items: center; padding: clamp(28px, 5vh, 64px) var(--gutter) clamp(48px, 8vh, 96px);
  min-height: calc(100svh - 70px); max-width: 1560px; margin: 0 auto;
}
.suite h1 { font-size: clamp(2.5rem, 5.2vw, 5.1rem); font-weight: 800; }
.lede { margin-top: 24px; font-size: clamp(1.02rem, 1.25vw, 1.18rem); color: var(--ink-2); max-width: 54ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.deck {
  background: var(--suite); border-radius: 18px; padding: 14px; color: var(--suite-text);
  box-shadow: 0 40px 80px -40px rgba(24,24,27,.6), 0 12px 24px -12px rgba(24,24,27,.3);
}
.monitor { background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--suite-3); }
.monitor-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--suite-2); font-size: 12px; color: var(--suite-dim); font-variant-numeric: tabular-nums; }
.monitor-label { color: var(--suite-text); font-weight: 600; letter-spacing: .02em; }
.tc { margin-left: auto; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: var(--suite-text); }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(217,4,26,.6); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }

.screen { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 50% 40%, #1d1d22 0%, #0b0b0d 70%); }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 4% 6%; visibility: hidden; }
.scene.is-on { visibility: visible; z-index: 2; }
.scene.is-in { animation: wipe .65s var(--ease) both; }
.scene.is-out { visibility: visible; z-index: 1; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); filter: brightness(1.6); } to { clip-path: inset(0 0 0 0); filter: none; } }
.safe { position: absolute; inset: 7% 5%; border: 1px dashed rgba(255,255,255,.12); pointer-events: none; z-index: 3; }

/* illustration language: white line on the dark screen, red for record/ink */
.art { width: 100%; height: 100%; color: #F4F4F5; overflow: visible; }
.art .rec { fill: var(--red); stroke: var(--red); }
.art .fill-soft { fill: rgba(255,255,255,.07); }
.art .blk { fill: var(--red); stroke: var(--red); }
.art .ink { stroke: var(--red); fill: var(--red); }
.art .paper { fill: #fff; stroke: #fff; }
.art .paper ~ * { stroke: #3F3F46; }
.art .paper ~ .ink { stroke: var(--red); }
.art .dim { opacity: .4; }
.is-on .art .rec { animation: rec 1.2s ease-in-out infinite; }
.is-on .gimbal-head { transform-origin: 248px 91px; animation: sway 3s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.is-on .mini-head { animation: scrub 3s linear infinite; }
@keyframes scrub { from { transform: translateX(-160px); } to { transform: translateX(180px); } }
.is-on .sheet { animation: feed 2.8s var(--ease) infinite; }
@keyframes feed { 0% { transform: translateY(-70px); opacity: 0; } 15% { opacity: 1; } 70%, 100% { transform: translateY(0); opacity: 1; } }
.art-print .sheet { clip-path: inset(0 0 0 0); }
.is-on .lines path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: type .5s steps(8) forwards; }
.is-on .lines path:nth-child(2) { animation-delay: .25s; } .is-on .lines path:nth-child(3) { animation-delay: .5s; }
.is-on .lines path:nth-child(4) { animation-delay: .75s; } .is-on .lines path:nth-child(5) { animation-delay: 1s; }
.is-on .lines path:nth-child(6) { animation-delay: 1.25s; } .is-on .lines path:nth-child(7) { animation-delay: 1.5s; }
.is-on .lines path:nth-child(8) { animation-delay: 1.75s; } .is-on .lines path:nth-child(9) { animation-delay: 2s; }
.is-on .lines path:nth-child(10) { animation-delay: 2.25s; }
@keyframes type { to { stroke-dashoffset: 0; } }
.caret { animation: rec 1s steps(1) infinite; }

/* timeline */
.timeline { position: relative; margin-top: 12px; padding: 4px 0 6px; user-select: none; }
.ruler { position: relative; height: 22px; margin-left: var(--name-w); border-bottom: 1px solid var(--suite-3); overflow: hidden; }
.ruler span { position: absolute; left: var(--x); bottom: 0; height: 6px; border-left: 1px solid var(--suite-3); font-size: 10px; color: var(--suite-dim); }
.ruler span:nth-child(odd) { height: 12px; }
.ruler span:not(:empty) { padding-left: 4px; line-height: 1; height: 18px; font-variant-numeric: tabular-nums; }
.track { display: flex; align-items: stretch; height: 34px; border-bottom: 1px solid rgba(255,255,255,.04); }
.track-name { flex: none; width: var(--name-w); display: flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--suite-dim); letter-spacing: .04em; }
.lane { position: relative; flex: 1; }
.clip {
  position: absolute; top: 4px; bottom: 4px; left: calc(var(--start) + 2px); width: calc(var(--len) - 4px);
  border: 0; border-radius: 6px; padding: 0 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: #fff; overflow: hidden; white-space: nowrap;
  background: var(--suite-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: background-color .25s var(--ease), transform .15s var(--ease), box-shadow .25s;
}
.clip span { position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; }
.clip::before { /* thumbnail stripes like frames in a clip */
  content: ''; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(0,0,0,.18) 26px 27px);
}
.clip:hover { background: #3A3A42; }
.clip:active { transform: scale(.98); }
.clip.is-live { background: var(--red); box-shadow: 0 0 0 1px #ff4d5e, 0 6px 18px -6px rgba(217,4,26,.8); }
.audio .lane { padding: 6px 0; }
.wave {
  height: 100%; border-radius: 6px; background-color: rgba(255,255,255,.05);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px);
  -webkit-mask: linear-gradient(transparent 0, #000 30%, #000 70%, transparent 100%);
  mask: linear-gradient(transparent 0, #000 30%, #000 70%, transparent 100%);
}
.playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); pointer-events: none; z-index: 5;
  left: calc(var(--name-w) + (100% - var(--name-w)) * var(--p, 0));
  box-shadow: 0 0 12px rgba(217,4,26,.7);
}
.playhead i { position: absolute; top: 0; left: -7px; width: 16px; height: 14px; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }

/* ---------- red band: services ---------- */
.band { background: var(--red); color: #fff; }
.band-inner { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 11vw, 140px) var(--gutter); }
.band h2 { font-size: clamp(2.1rem, 4.4vw, 4rem); font-weight: 800; max-width: 16ch; }
.band-lede { margin-top: 18px; font-size: 1.12rem; color: #fff; max-width: 52ch; }
.rundown { list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0; display: grid; gap: clamp(48px, 7vw, 96px); }
.run { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.run-flip .run-figure { order: 2; }
.run-figure { margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--suite); box-shadow: 0 30px 60px -30px rgba(70,0,8,.7); }
.run-figure img { width: 100%; height: 100%; object-fit: cover; }
.run-art { width: 100%; height: 100%; padding: 6% 8%; }
.run-art .art .rec, .run-art .art .rec { animation: none; }
.run-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; }
.run-copy p { margin-top: 14px; font-size: 1.08rem; color: #fff; max-width: 44ch; }
.run-copy h3::before { content: ''; display: block; width: 44px; height: 4px; background: #fff; border-radius: 2px; margin-bottom: 18px; transform-origin: left; }

/* ---------- how we work ---------- */
.how { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 11vw, 140px) var(--gutter) clamp(56px, 8vw, 100px); }
.how h2 { font-size: clamp(2.1rem, 4.4vw, 4rem); font-weight: 800; max-width: 18ch; }
.how-lede { margin-top: 18px; font-size: 1.12rem; color: var(--ink-2); max-width: 56ch; }
.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.flow::before { content: ''; position: absolute; left: 9px; right: 9px; top: 9px; height: 2px; background: var(--line); }
.flow::after { content: ''; position: absolute; left: 9px; right: 9px; top: 9px; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(var(--flow, 1)); transition: transform 1.4s var(--ease); }
.flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding-right: 12px; }
.flow-dot { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--red); margin-bottom: 14px; }
.flow-step strong { font-size: 1.25rem; }
.flow-step span:last-child { color: var(--muted); font-size: .98rem; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 64px; }
.day { min-height: 128px; border-radius: 12px; border: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; }
.day-name { font-weight: 600; color: var(--muted); font-size: .9rem; }
.day.has-post { background: var(--red-50); border-color: #FFD0D5; }
.day.has-post .day-name { color: var(--red); }
.post { display: flex; flex-direction: column; font-size: .88rem; line-height: 1.35; color: var(--ink-2); }
.post b { font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.note { margin-top: 12px; color: var(--muted); font-size: .88rem; }

/* ---------- close ---------- */
.close {
  max-width: 1320px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(72px, 10vw, 128px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: end;
  border-top: 1px solid var(--line);
}
.close h2 { font-size: clamp(2.4rem, 5.4vw, 5rem); font-weight: 800; }
.close-copy p { margin-top: 16px; font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }
.contact { margin: 0; display: grid; gap: 18px; }
.contact div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contact dt { color: var(--muted); font-size: .92rem; }
.contact dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.contact a { color: var(--ink); text-decoration: none; }
.contact a:hover { color: var(--red); text-decoration: underline; }

.foot { background: var(--red); color: #fff; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 22px var(--gutter); font-size: 12px; letter-spacing: .12em; }
.foot img { width: 104px; height: auto; }
.foot span:last-child { margin-left: auto; letter-spacing: .04em; }

/* ---------- reveal (content stays visible without JS) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-seen { opacity: 1; transform: none; }
.js .run[data-reveal] .run-copy h3::before { transform: scaleX(0); transition: transform .9s var(--ease) .25s; }
.js .run[data-reveal].is-seen .run-copy h3::before { transform: scaleX(1); }
.js .flow { --flow: 0; }
.js .flow.is-seen { --flow: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .suite { grid-template-columns: 1fr; min-height: 0; }
  .suite-copy { max-width: 720px; }
}
@media (max-width: 760px) {
  :root { --name-w: 36px; }
  .nav { gap: 12px; }
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; min-height: 44px; padding: 8px 16px; }
  .deck { padding: 10px; border-radius: 14px; }
  .track { height: 30px; }
  .clip { font-size: 11px; padding: 0 6px; }
  .run, .run-flip { grid-template-columns: 1fr; }
  .run-flip .run-figure { order: 0; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .flow::before, .flow::after { display: none; }
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .day { min-height: 96px; padding: 8px 6px; }
  .post { font-size: .7rem; }
  .post b { font-size: .95rem; }
  .close { grid-template-columns: 1fr; }
  .foot span:last-child { margin-left: 0; }
}
@media (max-width: 420px) {
  .clip span { font-size: 10px; }
  .day-name { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .scene.is-in { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .playhead { transition: left .2s linear; }
}