/* ArtikHub identity layer. Loaded after styles.css / v04.css. Black, ice white, cyan; glass surfaces; one hero motion.
   Edit the tokens here (and MARK in render.js + favicon.svg) to change the brand in one place. */
:root {
  --bg: #04060a; --bg2: #080c12; --bg3: #0e141c; --line: #17202b; --line2: #263342;
  --ink: #eaf6fb; --ink2: #b4c3cf; --ink3: #8795a3;
  --cyan: #4de1f0; --ice: #eaf6fb;
  --glass: linear-gradient(150deg, rgba(234,246,251,.11), rgba(234,246,251,.025) 60%);
  --glass-line: rgba(190,235,248,.2);
}
.grad { background: linear-gradient(95deg, var(--ice) 0%, var(--cyan) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.progress i { background: linear-gradient(90deg, var(--cyan), var(--ice)); }

/* Wordmark: "Artik" highlighted, "Hub" in ice white. Reads "ArtikHub" (capital A, capital H). */
.logo { font-stretch: 100%; letter-spacing: -.015em; font-size: 1.35rem; }
.wm { font-weight: 500; text-transform: none; } .wm b { font-weight: 800; color: var(--cyan); }
.logo-mark { width: 28px; height: 28px; }
.ft-big { text-transform: none; letter-spacing: -.02em; } .ft-big .wm { font-weight: 500; } .ft-big .wm b { font-weight: 800; }
.ft-note { overflow-wrap: anywhere; }

/* Hero: black, a cyan bloom, a faint diagonal reflection. No grid, no gradient mesh. */
.hero-bg i { position: absolute; display: block; }
.hero-bg .bloom { right: -12%; top: -30%; width: 74vw; max-width: 980px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(77,225,240,.2), rgba(77,225,240,.05) 55%, transparent 72%); }
.hero-bg .beam { inset: 0; background: linear-gradient(112deg, transparent 38%, rgba(234,246,251,.05) 47%, transparent 56%); }
.hero-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.js .display .line > span, .display .line > span { transform: none; animation: rise .9s var(--ease) backwards; }
@keyframes rise { from { transform: translateY(105%); } }

/* Pieces that line up into one tool. Final state is the default; the animation only plays FROM the scattered state,
   so if animation never runs (reduced motion, throttled tab) the composed product is what you see. */
.conv { margin: 0; position: relative; container-type: inline-size; width: 100%; max-width: min(100%, 560px); margin-inline: auto; aspect-ratio: 1 / 1.02; }
.conv-in { position: absolute; inset: 0; display: grid; place-items: center; }
.prod { position: relative; width: 92%; padding: 5.2cqw; border-radius: 4.2cqw; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6cqw 12cqw -4cqw #000, 0 0 0 1px rgba(0,0,0,.5); font-size: 2.55cqw; overflow: hidden; animation: lit 1.6s var(--ease) 1.9s backwards; }
.prod::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.16), transparent 32%); pointer-events: none; }
@keyframes lit { from { border-color: var(--glass-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6cqw 12cqw -4cqw #000; } 45% { border-color: var(--cyan); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 5cqw rgba(77,225,240,.45), 0 6cqw 12cqw -4cqw #000; } }
.prod-bar { display: flex; align-items: center; gap: .55em; margin-bottom: 1.4em; color: var(--ink2); } .prod-bar i { width: .8em; height: .8em; border-radius: 50%; background: var(--line2); } .prod-bar span { margin-left: .8em; font-size: .9em; letter-spacing: .04em; }
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3em; }
.pc { position: relative; border-radius: 1.4em; padding: 1.2em 1.3em; background: linear-gradient(150deg, rgba(234,246,251,.09), rgba(234,246,251,.02)); border: 1px solid rgba(190,235,248,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1.2em 2.4em -1em rgba(0,0,0,.8); animation: converge 1.5s var(--ease) var(--d, 0s) backwards; }
.pc small { display: block; font: 500 .82em var(--font-m); color: var(--ink2); letter-spacing: .04em; margin-bottom: .9em; }
@keyframes converge { from { translate: var(--x) var(--y); rotate: var(--r); scale: .9; opacity: .0; filter: blur(.3em); } 30% { opacity: 1; } }
.pc-form { grid-column: 1 / -1; --x: -30%; --y: -90%; --r: -7deg; --d: .1s; }
.pc-form u { display: block; height: 2.2em; border-radius: .6em; border: 1px solid rgba(190,235,248,.3); background: rgba(4,6,10,.5); text-decoration: none; position: relative; } .pc-form u::after { content: ""; position: absolute; left: .9em; top: 50%; width: 38%; height: .45em; margin-top: -.22em; border-radius: .3em; background: var(--ink3); }
.pc-cal { --x: -70%; --y: 70%; --r: 8deg; --d: .25s; } .pc-chart { --x: 80%; --y: -60%; --r: -10deg; --d: .4s; }
.pc-cal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4em; } .pc-cal .days i { aspect-ratio: 1; border-radius: .35em; background: rgba(234,246,251,.12); } .pc-cal .days i.on { background: var(--cyan); box-shadow: 0 0 1em rgba(77,225,240,.6); }
.pc-chart .bars { display: flex; align-items: flex-end; gap: .45em; height: 6.2em; } .pc-chart .bars i { flex: 1; height: var(--h); border-radius: .3em .3em 0 0; background: linear-gradient(var(--cyan), rgba(77,225,240,.18)); }
.pc-msg { --x: -60%; --y: 120%; --r: -6deg; --d: .55s; display: flex; align-items: center; gap: .8em; font-weight: 600; font-size: .95em; color: var(--ice); } .pc-msg i { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--cyan); display: grid; place-items: center; color: #001014; font-style: normal; font-size: .85em; font-weight: 800; }
.pc-btn { --x: 90%; --y: 110%; --r: 9deg; --d: .7s; display: grid; place-items: center; background: var(--cyan); color: #001014; font-weight: 800; border-color: transparent; font-size: 1em; }

/* Samples: legible captures, factual attribution */
.sample img { aspect-ratio: 5 / 4; }

/* Contact card in e-mail mode */
.mail-card { display: grid; gap: 14px; justify-items: start; }
.mail-addr { font-size: clamp(1.15rem, 3.4vw, 1.6rem); overflow-wrap: anywhere; user-select: all; } .mail-addr a { color: var(--ice); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 5px; }
.mail-card .row { display: flex; flex-wrap: wrap; gap: 10px; } .js .btn.js-only { display: inline-flex; }
.mail-card .tag { color: var(--ink3); font-size: .82rem; line-height: 1.5; margin: 0; } .mail-card .priv { color: var(--ink2); font-size: .85rem; }
.sec-contact { background: radial-gradient(ellipse 70% 60% at 85% 100%, rgba(77,225,240,.13), transparent 62%), var(--bg); }
.contact-card { border: 1px solid var(--glass-line); border-radius: 22px; padding: clamp(20px, 4vw, 36px); background: var(--glass); backdrop-filter: blur(10px); }
#contact-dlg .contact-card { border: 0; padding: 0; background: none; backdrop-filter: none; }

@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .conv { max-width: 440px; } .hero-bg .bloom { right: -40%; width: 120vw; } }
@media (prefers-reduced-motion: reduce) { .pc, .prod, .display .line > span { animation: none !important; } }

/* The hero runs under the transparent header and fades out at the bottom: no visible rectangle edges. */
.hero { margin-top: calc(var(--hd) * -1); padding-top: var(--hd); }
.hero-bg { mask-image: linear-gradient(#000 62%, transparent 100%); -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); }
.hero-bg .bloom { top: -8%; }