/* Daedalus Data Labs. Parent brand: one ink, one ground (BRAND.md). Colour belongs to the products. */
:root{--ink:#0B1526;--ground:#F4F3EF;--paper:#FBFAF7;--line:#E3E0D8;--guide:rgba(11,21,38,.22);--muted:rgba(11,21,38,.66);
--bronze:#B9822F;--bronze-wash:#EFE3CF;--agora-a:#2A5FD8;--agora-b:#7A4DFF;--agora-c:#FF6A52;--glass-hi:rgba(255,255,255,.7);--glass-edge:rgba(11,21,38,.10);--shadow:0 1px 2px rgba(11,21,38,.06),0 18px 40px -12px rgba(11,21,38,.22)}
[data-theme=dark]{--ink:#F4F3EF;--ground:#0B1526;--paper:#101C30;--line:#1E2A3C;--guide:rgba(244,243,239,.24);--muted:rgba(244,243,239,.66);--bronze-wash:#2A2318;--glass-hi:rgba(255,255,255,.08);--glass-edge:rgba(255,255,255,.12);--shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -12px rgba(0,0,0,.6)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* a direct link to #section lands below the pinned header (clicks glide there in script) */
#meridian,#agora,#contact{scroll-margin-top:72px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;font-size:17px;transition:background-color .2s,color .2s}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.nav,main,.foot{max-width:1160px;margin:0 auto;padding-left:32px;padding-right:32px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:12px;padding-bottom:12px;position:sticky;top:0;z-index:10}
/* liquid glass: content under the pinned header blurs and tints through it; the edge catches light once scrolled */
.nav::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:transparent;z-index:-1;transition:background .3s,box-shadow .3s}
.nav.stuck::before{background:var(--ground)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav.stuck::before{background:color-mix(in srgb,var(--ground) 58%,transparent);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}}
.nav.stuck::before{box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-edge),0 10px 30px -18px rgba(11,21,38,.35)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:31.5px;height:30px;display:block}
.mark.small{width:21px;height:20px}
.brand-name{display:flex;flex-direction:column;gap:.5px;line-height:1}
.brand-main{font-weight:600;font-size:18px;letter-spacing:-.02em}
.brand-sub{font-weight:400;font-size:11.5px;color:var(--muted)}
.links{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.links a{text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--ink)}
.theme{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0}
.theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.theme .moon{display:none;fill:currentColor;stroke:none}
[data-theme=dark] .theme .sun,[data-theme=dark] .theme .rays{display:none}
[data-theme=dark] .theme .moon{display:block}

/* Hero: one centred column, mark over headline over lede */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:min(calc(100svh - 56px),760px);padding:56px 0 72px}
.hero-mark{width:126px;height:120px;display:block;margin:0 0 40px}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:600;margin:0 0 20px;max-width:20ch;text-wrap:balance}
.lede{font-size:20px;line-height:1.5;color:var(--muted);margin:0;max-width:52ch;text-wrap:balance}
.ink{fill:var(--ink)}
.hero-art{position:relative;width:126px;height:120px;margin:0 0 40px}
.hero-art .hero-mark{margin:0;position:relative}
/* the grid and the 45-degree cut lines the mark is built on; hidden at rest, shown only while it assembles */
.hero-grid{position:absolute;left:50%;top:50%;width:252px;height:240px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;overflow:visible}
.hero-grid pattern path{fill:none;stroke:var(--bronze);stroke-width:.13}
.hero-grid .cut{fill:none;stroke:var(--bronze);stroke-width:.14;stroke-dasharray:.6 .5}

/* Depth: a warm light above the hero and a faint bronze floor laid back in perspective behind
   it, so the page reads as content floating over a room rather than ink on a sheet. Static at
   rest; with motion allowed the floor drifts slower than the page (script sets --depth). */
.depth{position:absolute;left:0;right:0;top:0;height:1100px;overflow:hidden;z-index:-1;pointer-events:none}
.depth::before{content:"";position:absolute;left:50%;top:-24px;width:1400px;height:900px;margin-left:-700px;z-index:-1;pointer-events:none;
background:radial-gradient(40% 30% at 50% 40%,color-mix(in srgb,var(--bronze) 14%,transparent),transparent 72%)}
.depth::after{content:"";position:absolute;left:50%;top:150px;width:2400px;height:620px;margin-left:-1200px;z-index:-1;pointer-events:none;
background-image:linear-gradient(color-mix(in srgb,var(--bronze) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--bronze) 22%,transparent) 1px,transparent 1px);
background-size:48px 48px;background-position:50% var(--depth,0px);transform:perspective(560px) rotateX(64deg);transform-origin:50% 100%;
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%,#000 68%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 42%,#000 68%,transparent)}
@media (max-width:900px){.depth::after{top:40px}}

/* Edges: the background shades off toward the corners of the screen, behind everything, fixed
   to the viewport, so the page sits in a soft frame. The nav is transparent until the page
   scrolls so the shading reaches the top edge. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(110% 90% at 50% 42%,transparent 38%,var(--vig) 100%)}
:root{--vig:rgba(11,21,38,.16)}
[data-theme=dark]{--vig:rgba(0,0,0,.55)}

/* Products */
.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;padding:88px 0;border-top:1px solid var(--line)}
.product.agora{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.product-icon{width:64px;height:64px;border-radius:15px;display:block;margin-bottom:26px;box-shadow:var(--shadow)}
.product h2{font-size:clamp(36px,4.4vw,52px);line-height:1;font-weight:600;letter-spacing:-.04em;margin:0 0 6px}
.product .status{display:inline-block;margin:10px 0 16px;padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tagline{font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.015em;margin:0 0 18px}
.product-copy p:not(.tagline){color:var(--muted);margin:0 0 28px;max-width:46ch}
.method{list-style:none;margin:6px 0 32px;padding:0;max-width:48ch;counter-reset:step}
.method li{counter-increment:step;display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--muted);font-size:16px;line-height:1.5}
.method li:last-child{border-bottom:1px solid var(--line)}
.method li::before{content:counter(step);font-weight:600;font-size:13px;line-height:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.button{display:inline-block;color:#fff;text-decoration:none;font-weight:500;padding:13px 22px;border-radius:999px;font-size:15px}
.meridian .button{background:var(--bronze)}
.agora .button{background:linear-gradient(100deg,var(--agora-a),var(--agora-b) 55%,var(--agora-c))}
.button:hover{filter:brightness(1.07)}
.text-link{font-size:15px;font-weight:500;text-underline-offset:4px;text-decoration-thickness:1px}
.shot{margin:0;position:relative}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:13px;color:var(--muted);margin-top:14px}
.browser{background:var(--bronze-wash);border-radius:20px;padding:28px 28px 22px}
.browser .chrome{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:10px 12px;font-size:12px;color:var(--muted)}
.browser .chrome i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.browser .chrome span{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:var(--shadow)}
.phone{display:flex;flex-direction:column;align-items:center;padding:36px 0 0;isolation:isolate}
.phone::before{content:"";position:absolute;inset:6% 4% 14%;z-index:-1;border-radius:40px;background:radial-gradient(60% 55% at 30% 30%,rgba(42,95,216,.35),transparent 70%),radial-gradient(55% 50% at 70% 45%,rgba(122,77,255,.32),transparent 70%),radial-gradient(50% 45% at 45% 80%,rgba(255,106,82,.28),transparent 70%);filter:blur(24px)}
.phone img{width:min(300px,78%);border-radius:38px;border:8px solid #0B1526;box-shadow:var(--shadow);background:#fff}
.phone figcaption{text-align:center}

/* Closing */
.closing{display:grid;grid-template-columns:3fr 2fr;gap:64px;padding:80px 0 96px;border-top:1px solid var(--line)}
.closing h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.closing p{margin:0;color:var(--muted);max-width:52ch}
.closing a{color:var(--ink);text-underline-offset:4px}
.foot{border-top:1px solid var(--line);padding-top:36px;padding-bottom:48px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand p{margin:0}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols div{display:flex;flex-direction:column;gap:8px}
.foot-cols h3{font-size:14px;font-weight:600;margin:0 0 2px;color:var(--ink)}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{color:var(--ink)}

@media (max-width:900px){
.product,.product.agora,.closing{grid-template-columns:1fr}
.hero{min-height:0;padding:48px 0 64px}
.hero-art,.hero-mark{width:84px;height:80px}
.hero-art{margin-bottom:28px}
.hero-grid{width:168px;height:160px}
.product{gap:44px;padding:64px 0}
.product.agora .shot{order:2}
.closing{gap:40px;padding:56px 0 72px}
}
@media (max-width:640px){
.nav,main,.foot{padding-left:16px;padding-right:16px}
.nav{padding-top:10px;padding-bottom:10px}
.links{gap:14px}
.links a[href="#contact"]{display:none}
.lede{font-size:18px}
.browser{padding:14px 14px 12px;border-radius:16px}
.foot-cols{gap:32px}
}


/* Motion: only where it explains something, and never for reduced-motion users */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:no-preference){
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .shot.reveal{transform:translateY(24px) scale(.985)}
.js .shot.reveal.in{transform:none}
.js .reveal .method li{opacity:0;transform:translateX(-8px);transition:opacity .5s ease-out,transform .5s ease-out}
.js .reveal.in .method li{opacity:1;transform:none}
.js .reveal.in .method li:nth-child(1){transition-delay:.25s}
.js .reveal.in .method li:nth-child(2){transition-delay:.35s}
.js .reveal.in .method li:nth-child(3){transition-delay:.45s}
.js .reveal.in .method li:nth-child(4){transition-delay:.55s}
.button,.text-link,.links a,.theme{transition:filter .15s,color .15s,background-color .15s}
}

/* Showmanship, in the brand's own terms: the mark is built on its grid, the products come to rest
   in perspective, and the lines between sections are drawn rather than switched on. All of it runs
   once, takes under two seconds, and none of it runs for reduced-motion users. */
@media (prefers-reduced-motion:no-preference){
/* hero: the grid comes up, the three letters slide in along it, the grid lifts, then the words sharpen */
.hero-grid{animation:grid 2.4s cubic-bezier(.4,0,.2,1) .1s both}
.hero-mark path{animation:part .9s cubic-bezier(.2,.8,.2,1) both}
.part-l{--from:translate(-6px,0);animation-delay:.35s!important}
.part-d{--from:translate(6px,0);animation-delay:.5s!important}
.part-i{--from:scale(.7);transform-box:fill-box;transform-origin:center;animation-delay:.68s!important}
.hero h1{animation:sharpen .9s cubic-bezier(.2,.7,.2,1) .95s both}
.hero .lede{animation:sharpen .9s cubic-bezier(.2,.7,.2,1) 1.15s both}
/* section rules draw outward from the centre as each band arrives */
.js .product,.js .closing{border-top-color:transparent;position:relative}
.js .product::before,.js .closing::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .seen::before{transform:none}
/* product icons settle with a small overshoot */
.js .reveal .product-icon{transform:scale(.82);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1) .1s,opacity .4s ease-out .1s}
.js .reveal.in .product-icon{transform:none;opacity:1}
/* screenshots lie back in perspective and come flat as they reach the middle of the screen (script sets --rx/--ry);
   a fine pointer tips them a few degrees more and a soft light follows it */
.shot{perspective:1600px}
[data-tilt]{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.screen{position:relative;border-radius:12px}
.screen::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),transparent 60%)}
.screen.lit::after{opacity:1}
/* a one-time scan down Meridian's screen as it arrives, in Meridian's bronze */
.screen::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--bronze) 20%,var(--bronze) 80%,transparent);box-shadow:0 0 18px 2px color-mix(in srgb,var(--bronze) 55%,transparent)}
.js .reveal.in .screen::before{animation:scan 1.5s cubic-bezier(.45,0,.25,1) .55s both}
/* Agora's colours drift slowly behind the phone */
.phone::before{animation:drift 18s ease-in-out infinite alternate}
/* the nav marks the section on screen */
.links a{position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;border-radius:1px;background:currentColor;transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.links a.here{color:var(--ink)}
.links a.here::after{transform:none}
}
@keyframes grid{0%{opacity:0}22%{opacity:1}62%{opacity:1}100%{opacity:0}}
@keyframes part{from{opacity:0;transform:var(--from)}}
@keyframes sharpen{from{opacity:0;filter:blur(8px);transform:translateY(10px)}}
@keyframes scan{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes drift{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(5deg) scale(1.06) translate(2%,-2%)}}