:root {
  --bg:#101012; --bg2:#19191C; --line:#27272B; --cream:#EFEFED; --cream2:#E7E7E4;
  --text:#EFEFED; --muted:#8C8C90; --accent:#FF4B33; --accent-soft:rgba(255,75,51,.14);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:Inter,system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; }
.sg { font-family:Archivo,sans-serif; }
.mono { font-family:'IBM Plex Mono',monospace; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1060px; margin:0 auto; padding:0 28px; }

/* nav */
nav { position:sticky; top:0; z-index:50; background:rgba(16,16,18,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.navin { display:flex; align-items:center; justify-content:space-between; height:66px; }
.logo { display:flex; align-items:center; gap:10px; font-family:Archivo,sans-serif; font-weight:700; font-size:15px; letter-spacing:3px; }
.logo svg { display:block; }
.navlinks { display:flex; gap:30px; font-size:13.5px; color:var(--muted); letter-spacing:.5px; }
.navlinks a:hover { color:var(--text); }
.btn { display:inline-block; background:var(--accent); color:#fff; font-weight:600; font-size:14px; border-radius:99px; padding:12px 26px; transition:all .15s; }
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn.ghost:hover { border-color:var(--muted); }

/* hero */
.hero { padding:120px 0 90px; text-align:center; position:relative; overflow:hidden; }
.hero .mark { margin-bottom:34px; }
.giant { font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(30px,11.5vw,138px); letter-spacing:.02em; line-height:1; white-space:nowrap;
  background:linear-gradient(180deg,#FFFFFF 0%, #C9C9C6 55%, #75757A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:5px; color:var(--accent); margin:26px 0 40px; text-transform:uppercase; }
.herocta { display:flex; gap:14px; justify-content:center; }

/* hero entrance animation (web version of the Remotion logo reveal) */
@keyframes barLeft { from { opacity:0; transform:translateX(-70px); } to { opacity:1; transform:none; } }
@keyframes barRight { from { opacity:0; transform:translateX(70px); } to { opacity:.78; transform:none; } }
@keyframes barDrop { 0% { opacity:0; transform:translateY(-60px); } 60% { opacity:1; transform:translateY(6px); } 100% { opacity:1; transform:none; } }
@keyframes riseIn { from { opacity:0; transform:translateY(34px); } to { opacity:1; transform:none; } }
.hb1 { opacity:0; animation:barLeft .7s cubic-bezier(.16,1,.3,1) .15s forwards; }
.hb2 { opacity:0; animation:barRight .7s cubic-bezier(.16,1,.3,1) .35s forwards; }
.hb3 { opacity:0; animation:barDrop .8s cubic-bezier(.34,1.56,.64,1) .6s forwards; }
.heroanim { opacity:0; animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards; }
.ha2 { animation-delay:.9s; }
.ha3 { animation-delay:1.25s; }
.ha4 { animation-delay:1.55s; }
@media (prefers-reduced-motion: reduce) { .hb1,.hb2,.hb3,.heroanim { animation:none; opacity:1; } .hb2 { opacity:.78; } }

/* marquee */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0; background:var(--bg2); }
.marquee .track { display:flex; gap:0; width:max-content; animation:scroll 28s linear infinite; }
.marquee span { font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:4px; color:var(--muted); padding:0 26px; white-space:nowrap; }
.marquee span::after { content:'·'; color:var(--accent); margin-left:52px; }
@keyframes scroll { to { transform:translateX(-50%); } }

/* manifesto */
.manifesto { padding:130px 0; }
.manifesto p { font-family:Archivo,sans-serif; font-size:clamp(26px,4vw,40px); line-height:1.35; font-weight:500; max-width:900px; }
.manifesto em { font-style:normal; color:var(--accent); }
.manifesto .dim { color:var(--muted); }

/* sections */
section { padding:96px 0; border-top:1px solid var(--line); }
.kicker { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
h2 { font-family:Archivo,sans-serif; font-size:34px; font-weight:600; margin-bottom:12px; }
.sub { color:var(--muted); max-width:620px; margin-bottom:44px; font-size:16px; }
.g3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.card { background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:32px; }
.card h3 { font-family:Archivo,sans-serif; font-size:18px; font-weight:600; margin-bottom:10px; }
.card p { font-size:14.5px; color:var(--muted); }
.card .n { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); display:block; margin-bottom:16px; letter-spacing:2px; }

/* big section titles (Kryvu-style) */
.bigtitle { font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(34px,6vw,68px);
  line-height:1.02; letter-spacing:-.01em; margin-bottom:20px; }
.bigtitle em { font-style:normal; color:var(--accent); }
.creamband .bigtitle { color:#101012; }
.creamband .bigtitle em { color:#C93A22; }
.bigsec { padding:120px 0 60px; }
.bigsec .bigtitle { margin-bottom:0; }

/* products: in development */
.soon { border:1px solid var(--line); border-radius:22px; padding:44px; background:var(--bg2); display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.soon .soonbody { text-align:left; }
@media (max-width:840px) { .soon { grid-template-columns:1fr; padding:30px; text-align:left; } }
.soonchip { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:3px;
  background:rgba(255,75,51,.14); color:var(--accent); border-radius:99px; padding:7px 18px; margin-bottom:20px; }
.soon h3 { font-family:Archivo,sans-serif; font-size:26px; font-weight:800; margin-bottom:10px; }
.soontext { font-size:15px; color:var(--muted); line-height:1.7; max-width:460px; }

/* editorial rows (about + services) */
.rows { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:150px 1fr 1.2fr; gap:28px; align-items:baseline;
  padding:34px 8px; border-bottom:1px solid var(--line); position:relative; transition:background .25s; }
.row .rn { font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--accent); letter-spacing:2px; }
.row .rt { font-family:Archivo,sans-serif; font-size:clamp(22px,2.7vw,36px); font-weight:800; letter-spacing:.2px; transition:translate .3s cubic-bezier(.16,1,.3,1); }
.row .rd { font-size:14.5px; color:var(--muted); max-width:480px; }
.row.srow { cursor:default; }
.row.srow .ra { position:absolute; right:14px; top:50%; translate:-10px -50%; opacity:0; font-size:24px; color:var(--accent); transition:all .3s cubic-bezier(.16,1,.3,1); }
.row.srow::after { content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent); transition:width .45s cubic-bezier(.16,1,.3,1); }
.row.srow:hover { background:rgba(255,255,255,.02); }
.row.srow:hover .rt { translate:10px 0; }
.row.srow:hover .ra { opacity:1; translate:0 -50%; }
.row.srow:hover::after { width:100%; }
@media (max-width:840px) { .row { grid-template-columns:1fr; gap:8px; } .row .rt { font-size:24px; } }

/* manifesto word reveal */
#manifesto-text .w { color:#3A3A3E; transition:none; }
#manifesto-text .w.on { color:var(--text); }
#manifesto-text .w.em.on { color:var(--accent); }

/* cream band */
.creamband { background:var(--cream); color:#1B1B1E; padding:110px 0; }
.creamband .kicker { color:#C93A22; }
.creamband h2 { color:#101012; }
.creamband p.big { font-family:Archivo,sans-serif; font-size:clamp(22px,3vw,32px); line-height:1.4; font-weight:500; max-width:860px; color:#26262A; }

/* product */
.product { display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; background:var(--bg2); border:1px solid var(--line); border-radius:22px; padding:46px; }
.product .tagchip { display:inline-block; font-family:'IBM Plex Mono',monospace; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600; border-radius:99px; padding:6px 14px; letter-spacing:2px; margin-bottom:18px; }
.product h3 { font-family:Archivo,sans-serif; font-size:26px; margin-bottom:12px; }
.product p { color:var(--muted); font-size:15px; margin-bottom:24px; }
.shot { border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.shot img { width:100%; display:block; }

/* contact — statement style */
.contactsec { text-align:center; padding:150px 0; position:relative; overflow:hidden; }
.contactsec::after { content:''; position:absolute; left:50%; bottom:-260px; transform:translateX(-50%); width:720px; height:420px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,75,51,.22), transparent 65%); pointer-events:none; }
.contactsec .lema { font-family:Archivo,sans-serif; font-size:clamp(32px,6vw,56px); font-weight:600; line-height:1.15; max-width:760px; margin:0 auto 18px; }
.contactsec .lema em { font-style:normal; color:var(--accent); }
.contactsec .sub2 { font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:3px; color:var(--muted); text-transform:uppercase; margin-bottom:44px; }
.mailbtn { display:inline-block; background:var(--accent); color:#fff; font-family:Archivo,sans-serif; font-weight:600; font-size:17px; border-radius:99px; padding:17px 38px; }
.mailbtn:hover { filter:brightness(1.08); }

/* footer */
footer { border-top:1px solid var(--line); padding:56px 0 42px; font-size:14px; color:var(--muted); background:var(--bg); }
.frow { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:38px; }
footer h4 { font-family:'IBM Plex Mono',monospace; color:var(--text); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin-bottom:16px; }
footer li { list-style:none; margin-bottom:9px; }
footer a:hover { color:var(--text); }
.fbottom { border-top:1px solid var(--line); padding-top:26px; font-size:12.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* legal pages */
.legal { max-width:800px; margin:0 auto; padding:70px 28px; }
.legal h1 { font-family:Archivo,sans-serif; font-size:36px; }
.legal .updated { color:var(--muted); font-size:13.5px; margin-bottom:38px; font-family:'IBM Plex Mono',monospace; }
.legal h2 { font-size:20px; margin:36px 0 10px; }
.legal p, .legal li { color:#C9C9CC; font-size:15px; margin-bottom:12px; }
.legal ul { margin-left:22px; }
.legal a { color:var(--accent); }

@media (max-width:840px) {
  .navlinks { display:none; }
  .product { grid-template-columns:1fr; padding:30px; }
  .frow { grid-template-columns:1fr; }
  .giant { letter-spacing:0; }
  .tagline { letter-spacing:3px; font-size:11.5px; }
}