/* Self-hosted fonts (OFL) — Bricolage Grotesque, IBM Plex Sans, JetBrains Mono; latin + latin-ext only */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/ibm-plex-sans-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/ibm-plex-sans-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/ibm-plex-sans-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
color-scheme:dark;
--bg:#0B0F19; --bg-2:#111827; --surface:#172034; --surface-2:#1F2B42; --chip:#FFFFFF;
--fg:#F2F4F8; --fg-2:#CDD3DE; --muted:#9AA4B8; --faint:#4F586B;
--line:rgba(234,236,240,.13); --line-2:rgba(234,236,240,.26); --hi:rgba(255,255,255,.09);
--accent:#6C8FFF; --accent-2:#9B7BFF; --accent-ink:#070A10; --accent-soft:rgba(108,143,255,.16); --accent-glow:rgba(108,143,255,.35);
--mark:#F7B84B; --ok:#3EDB9A; --violet:#B07CFF; --danger:#FF6B6B;
--shadow:0 30px 70px -28px rgba(0,0,0,.85);
--card-shadow:0 1px 0 var(--hi) inset, 0 14px 34px -18px rgba(0,0,0,.75);
--card-bg:linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%) 0%, var(--surface) 55%);
--glow-a:rgba(108,143,255,.26); --glow-b:rgba(155,123,255,.18);
--display:"Bricolage Grotesque","Bricolage Fallback",ui-sans-serif,system-ui,"Helvetica Neue",sans-serif;
--body:"IBM Plex Sans","Plex Fallback",ui-sans-serif,system-ui,"Helvetica Neue",sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="light"]{
color-scheme:light;
--bg:#C6CCD8; --bg-2:#BAC1CF; --surface:#DCE0E8; --surface-2:#CFD5DF; --chip:#F6F7FA;
--fg:#0A0E16; --fg-2:#222A39; --muted:#444E60; --faint:#8C95A6;
--line:rgba(10,14,22,.17); --line-2:rgba(10,14,22,.32); --hi:rgba(255,255,255,.75);
--accent:#1E4BD8; --accent-2:#6A3BD6; --accent-ink:#FFFFFF; --accent-soft:rgba(30,75,216,.13); --accent-glow:rgba(30,75,216,.32);
--mark:#A86B05; --ok:#0E7A52; --violet:#6A3BD6; --danger:#C93F32;
--shadow:0 30px 70px -28px rgba(10,14,22,.45);
--card-shadow:0 1px 0 var(--hi) inset, 0 14px 30px -18px rgba(10,14,22,.45);
--card-bg:linear-gradient(180deg, #EDEFF4 0%, #E1E4EC 100%);
--glow-a:rgba(30,75,216,.22); --glow-b:rgba(106,59,214,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
background-image:radial-gradient(900px 520px at 12% -6%, var(--glow-a), transparent 60%), radial-gradient(800px 600px at 96% 18%, var(--glow-b), transparent 60%), radial-gradient(700px 500px at 50% 120%, var(--glow-a), transparent 60%);
background-attachment:fixed}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
::selection{background:var(--accent); color:var(--accent-ink)}
img{max-width:100%}
.mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1100px; margin:0 auto; padding:0 32px}
/* logo chips */
.lg{display:inline-flex; align-items:center; justify-content:center; background:var(--chip); border:1px solid var(--line-2); border-radius:10px; width:48px; height:48px; padding:7px; flex:none}
.lg img{width:100%; height:100%; object-fit:contain; display:block}
.lg.wide{width:auto; min-width:48px; max-width:150px; padding:8px 12px}
.lg.wide img{height:100%; width:auto; max-width:126px}
.lg.dark{background:#0B0F16}
.lg.txt{font-family:var(--display); font-weight:700; font-size:.95rem; color:#0C1018; letter-spacing:-.02em}
/* ---------- top bar (floating pill) ---------- */
.bar{position:sticky; top:12px; z-index:10; padding:0 16px; margin-bottom:-68px}
.bar .pill{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; height:56px; padding:0 8px 0 20px; border-radius:999px;
background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
border:1px solid var(--line-2); box-shadow:0 1px 0 var(--hi) inset, 0 18px 40px -22px rgba(0,0,0,.8)}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em; white-space:nowrap}
.brand img{width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--line-2)}
.nav{display:flex; gap:4px; overflow-x:auto}
.nav a{font-family:var(--body); font-size:.9rem; font-weight:500; color:var(--muted); white-space:nowrap; padding:8px 12px; border-radius:999px; transition:color .2s, background .2s}
.nav a:hover{color:var(--fg)} .nav a.on{color:var(--fg); background:var(--accent-soft)}
.bar .right{display:flex; align-items:center; gap:8px}
.theme-btn{width:38px; height:38px; border-radius:50%; background:none; border:1px solid var(--line-2); color:var(--muted); display:grid; place-items:center; cursor:pointer; padding:0}
.theme-btn:hover{color:var(--fg); border-color:var(--fg)}
.theme-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.lang-btn{height:38px; text-decoration:none; min-width:44px; padding:0 12px; border-radius:999px; background:none; border:1px solid var(--line-2); color:var(--muted); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; cursor:pointer}
.lang-btn:hover{color:var(--fg); border-color:var(--fg)}
.cta-pill{display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:999px; background:var(--fg); color:var(--bg); font-family:var(--body); font-weight:600; font-size:.9rem; white-space:nowrap; transition:transform .2s, filter .2s}
.cta-pill:hover{transform:translateY(-1px); filter:brightness(1.1)}
section{padding:88px 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:40px; flex-wrap:wrap}
.sec-head h2{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,2.8vw,2.4rem); letter-spacing:-.03em; line-height:1.1}
.sec-head h2 em{font-style:normal; color:var(--accent)}
/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:150px 0 60px}
.scales{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:block}
.hero-veil{position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 80% at 60% 48%, color-mix(in srgb, var(--bg) 90%, transparent) 20%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, transparent 85%)}
.contact{position:relative; overflow:hidden}
.hero .wrap{position:relative; display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; align-items:center}
.photo{width:250px; height:250px; border-radius:50%; object-fit:cover; display:block; border:3px solid var(--bg); outline:1px solid var(--line-2); box-shadow:var(--shadow), 0 0 0 12px var(--accent-soft)}
.hero .eyebrow{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center}
.badge{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:20px; border:1px solid var(--line-2); color:var(--fg-2)}
.badge i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent)}
.hero h1{margin:0 0 10px; font-family:var(--display); font-weight:700; font-variation-settings:"opsz" 96; font-size:clamp(1.3rem,5.2vw,3.3rem); line-height:1; letter-spacing:-.045em; white-space:nowrap}
.hero h1 .ln{font-weight:500; color:var(--muted)}
.hero .tag{margin:0 0 14px; font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.8rem); letter-spacing:-.03em; line-height:1.15}
.hero .tag em{font-style:normal; background:linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .who{margin:0 0 14px; color:var(--accent); font-size:.72rem}
.hero .who b{color:var(--fg); font-weight:600}
.lede{max-width:58ch; font-size:1.04rem; color:var(--fg-2); margin:0 0 26px; line-height:1.55}
.lede strong{color:var(--fg); font-weight:500}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border:1px solid var(--line-2); border-radius:6px; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; background:var(--surface); transition:all .2s; cursor:pointer; color:var(--fg)}
.btn:hover{border-color:var(--fg); transform:translateY(-1px)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn svg{width:13px; height:13px}
.tools-row{display:flex; align-items:center; gap:10px; margin-top:28px; flex-wrap:wrap}
.tools-row .lg{width:38px; height:38px; padding:6px; border-radius:8px}
.tools-row .lg.wide{width:auto; padding:7px 10px}
/* metrics */
.metrics{border-bottom:1px solid var(--line); background:var(--surface)}
.metrics ul{list-style:none; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(4,1fr); max-width:1100px}
.metrics li{padding:38px 28px 36px 0; border-right:1px solid var(--line)}
.metrics li + li{padding-left:28px}
.metrics li:last-child{border-right:0}
.metrics .big{display:flex; align-items:baseline; gap:2px; font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,4.6vw,3.8rem); letter-spacing:-.045em; line-height:1; margin-bottom:10px; font-variant-numeric:tabular-nums}
.metrics .big sup{font-size:.45em; color:var(--accent); font-weight:600; align-self:flex-start; margin-top:.15em}
.metrics .lbl{display:block; color:var(--fg); font-weight:500; font-size:.98rem; line-height:1.35}
.metrics .sub{display:block; color:var(--muted); font-size:.84rem; margin-top:4px}
/* ---------- worked with + press ---------- */
.trust{padding:44px 0 48px; border-bottom:1px solid var(--line)}
.trust .row{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; justify-content:space-between}
.trust .row .mono{margin-right:6px}
.trust .lg{height:56px; width:auto; padding:9px 16px; border-radius:12px; min-width:56px; flex:none}
.trust .lg img{height:100%; width:auto; max-width:170px}
.trust .lg.big{height:72px; padding:8px 14px}
.trust .lg.big img{max-width:190px}
/* The edges used to fade with mask-image. A mask over a subtree that MOVES is re-composited every frame —
the same trap the scale canvases hit, where the fade had to be drawn inside the canvas instead. Two static
gradient overlays give the identical look and cost nothing once painted. `--bg` is what sits behind this
strip (.trust sets no background of its own), so the fade matches in both themes. */
.marquee{margin-top:18px; overflow:hidden; position:relative; contain:paint}
.marquee::before, .marquee::after{content:""; position:absolute; top:0; bottom:0; width:9%; z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg, var(--bg), transparent)}
.marquee::after{right:0; background:linear-gradient(270deg, var(--bg), transparent)}
/* translate3d + will-change keeps the track on its own compositor layer; hover no longer stops it dead,
which is what read as a stutter every time the pointer crossed the strip */
.marquee .track{display:flex; align-items:center; gap:18px; width:max-content; animation:marquee 34s linear infinite; will-change:transform; backface-visibility:hidden}
.marquee.off .track{animation-play-state:paused} /* off screen: nothing to composite */
@keyframes marquee{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){ .marquee .track{animation:none; flex-wrap:wrap; width:auto} }
.trust .lg.wm{gap:9px} .trust .lg.wm img{height:30px; width:auto} .trust .lg.big.wm img{height:54px} .trust .lg.wm i{font-style:normal; font-family:var(--display); font-weight:700; font-size:.82rem; line-height:1.05; letter-spacing:-.02em; color:#0C1018; white-space:nowrap}
.trust .more{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--muted); margin-left:4px}
.press-head{margin-top:30px; display:flex; justify-content:space-between; gap:12px} .press-head .dim{color:var(--faint)}
.press-grid{margin-top:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.press{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; transition:border-color .2s, transform .2s}
.press:hover{border-color:var(--accent); transform:translateY(-2px)}
.press .lg.wide{width:auto; height:48px; padding:8px 10px} .press .lg.wide img{height:100%; width:auto; max-width:110px}
.press .go{display:inline-block; margin-top:8px}
.press-old{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:16px 20px; box-shadow:var(--card-shadow)}
.press .lg{width:48px; height:48px; padding:7px}
.press b{display:block; font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; line-height:1.3}
.press .out{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.press q{display:block; color:var(--fg-2); font-size:.9rem; margin-top:6px; quotes:none}
.press small{display:block; color:var(--muted); font-size:.8rem; margin-top:4px}
.press .go{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.press .go svg{width:12px; height:12px}
@media (max-width:760px){ .press-grid{grid-template-columns:1fr} .trust .lg{height:44px; padding:7px 10px} .trust .lg.big{height:56px} }
/* ---------- services ---------- */
.svc-intro{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:end; margin-bottom:36px}
.svc-intro h2{margin:8px 0 0; font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.03em; line-height:1.1; text-wrap:balance}
.svc-intro h2 em{font-style:normal; color:var(--accent)}
.svc-intro p{margin:0; color:var(--fg-2); font-size:1rem; max-width:44ch}
.svc{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.svc .tile{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s, transform .2s}
.svc .tile:hover{border-color:var(--accent); transform:translateY(-2px)}
.ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent)}
.ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.svc b{font-family:var(--display); font-weight:600; font-size:1.08rem; letter-spacing:-.015em; line-height:1.25}
.svc p{margin:0; color:var(--muted); font-size:.9rem; line-height:1.5}
.svc .proof{margin-top:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
/* ---------- showcase: what I can do with AI ---------- */
.showcase{display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start}
.sc-list{display:flex; flex-direction:column; gap:6px; position:sticky; top:96px}
.sc-item{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; text-align:left; padding:12px 14px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--fg); cursor:pointer; position:relative; overflow:hidden; transition:background .3s, border-color .3s, transform .3s}
.sc-item .ico{width:40px; height:40px; border-radius:11px; background:color-mix(in srgb, var(--ac) 14%, transparent); color:var(--ac); transition:transform .3s, box-shadow .3s}
.sc-item .ico svg{width:20px; height:20px}
.sc-item .tx b{display:block; font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.015em; line-height:1.2}
.sc-item .tx small{display:block; color:var(--muted); font-size:.8rem; margin-top:2px; line-height:1.3}
.sc-item:hover{background:color-mix(in srgb, var(--surface) 70%, transparent)}
.sc-item.on{border-color:color-mix(in srgb, var(--ac) 45%, var(--line)); box-shadow:var(--card-shadow), 0 0 40px -16px var(--ac); transform:translateX(4px)}
.sc-item.on .ico{transform:scale(1.06); box-shadow:0 0 0 4px color-mix(in srgb, var(--ac) 18%, transparent)}
.sc-item{background-image:linear-gradient(var(--ac),var(--ac)); background-repeat:no-repeat; background-position:left bottom; background-size:0 2px}
.sc-item.on{background-image:linear-gradient(var(--ac),var(--ac)), var(--card-bg); background-size:100% 2px, 100% 100%; transition:background-size 7s linear, border-color .3s, transform .3s, box-shadow .3s}
.showcase.paused .sc-item.on{background-size:0 2px, 100% 100%; transition:border-color .3s, transform .3s}
.sc-stage{position:relative; display:grid; min-height:440px}
.sc-pane{grid-area:1/1; display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:max-content; align-content:start; gap:14px; opacity:0; transform:translateY(14px) scale(.985); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); pointer-events:none; visibility:hidden}
.sc-pane.on{opacity:1; transform:none; pointer-events:auto; visibility:visible}
.sc-pane .pts{grid-template-columns:repeat(3,minmax(0,1fr))}
.sc-pane .pts li{opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s}
.sc-pane.on .pts li{opacity:1; transform:none}
.sc-pane.on .pts li:nth-child(1){transition-delay:.25s} .sc-pane.on .pts li:nth-child(2){transition-delay:.4s} .sc-pane.on .pts li:nth-child(3){transition-delay:.55s}
.sc-pane .mock{border-color:color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.08)); box-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--ac) 12%, transparent), 0 0 80px -30px var(--ac)}
.sc-pane .mk-top{background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 14%, #0A0E16), #0A0E16 60%)}
.sc-pane .mk-brand em{color:var(--ac)}
@media (max-width:980px){
.showcase{grid-template-columns:1fr}
.sc-list{position:static; flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:6px; scroll-snap-type:x mandatory}
.sc-item{flex:0 0 auto; grid-template-columns:32px minmax(0,1fr); padding:10px 12px; scroll-snap-align:start; max-width:250px; transform:none !important}
.sc-item .ico{width:32px; height:32px} .sc-item .tx small{display:none}
.sc-stage{min-height:0}
.sc-pane .pts{grid-template-columns:1fr}
}
/* per-mock motion (restarts when .on is applied) */
.sc-pane.on .vision .bbox{animation:bb 2.4s ease-in-out infinite} .sc-pane.on .vision .bbox.b2{animation-delay:.6s} .sc-pane.on .vision .bbox.b3{animation-delay:1.1s}
@keyframes bb{0%,100%{transform:translate(0,0)} 50%{transform:translate(2px,-3px)}}
.sc-pane.on .funnel b, .sc-pane.on .kpis b{animation:popin .6s cubic-bezier(.2,.7,.2,1) both} .sc-pane.on .kpis div:nth-child(2n) b{animation-delay:.15s} .sc-pane.on .kpis div:nth-child(3n) b{animation-delay:.3s}
@keyframes popin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.sc-pane.on .bars i{animation:grow .9s cubic-bezier(.2,.7,.2,1) both; transform-origin:bottom} @keyframes grow{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.sc-pane.on .tk{animation:slidein .5s cubic-bezier(.2,.7,.2,1) both} .sc-pane.on .tlm-row:nth-child(2) .tk{animation-delay:.15s} .sc-pane.on .tlm-row:nth-child(3) .tk{animation-delay:.3s} .sc-pane.on .tlm-row:nth-child(4) .tk{animation-delay:.45s}
@keyframes slidein{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
.sc-pane.on .term{animation:popin .6s .6s both}
.sc-pane.on .node{animation:popin .5s both} .sc-pane.on .node.ai{animation-delay:.2s} .sc-pane.on .node.act{animation-delay:.4s} .sc-pane.on .node.hum{animation-delay:.6s}
.arr{overflow:visible} .arr::before{content:""; position:absolute; top:-2px; width:6px; height:5px; border-radius:3px; background:var(--ac,#F7B84B); box-shadow:0 0 8px var(--ac,#F7B84B); opacity:0}
.sc-pane.on .arr::before{animation:travel 1.6s linear infinite} .sc-pane.on .arr:nth-of-type(2)::before{animation-delay:.5s} .sc-pane.on .arr:nth-of-type(3)::before{animation-delay:1s}
@keyframes travel{0%{left:0; opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{left:100%; opacity:0}}
.sc-pane.on .log div{animation:popin .4s both} .sc-pane.on .log div:nth-child(2){animation-delay:.9s} .sc-pane.on .log div:nth-child(3){animation-delay:1.5s} .sc-pane.on .log div:nth-child(4){animation-delay:2.1s}
.sc-pane.on .card-t{animation:popin .45s both} .sc-pane.on .col:nth-child(2) .card-t{animation-delay:.15s} .sc-pane.on .col:nth-child(3) .card-t{animation-delay:.3s} .sc-pane.on .col:nth-child(4) .card-t{animation-delay:.45s}
.sc-pane.on .card-t.hot{animation:popin .45s .15s both, glow 2.2s 1s ease-in-out infinite} @keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(108,143,255,0)} 50%{box-shadow:0 0 18px -4px rgba(108,143,255,.7)}}
.chart .line{stroke-dasharray:1400; stroke-dashoffset:1400} .sc-pane.on .chart .line{animation:draw 2.2s cubic-bezier(.2,.7,.2,1) forwards} @keyframes draw{to{stroke-dashoffset:0}}
.sc-pane.on .chart .anom, .sc-pane.on .chart .lbl{animation:popin .4s 1.6s both}
.sc-pane.on .al{animation:slidein .5s both} .sc-pane.on .al:nth-child(2){animation-delay:.2s} .sc-pane.on .al:nth-child(3){animation-delay:.4s}
.sc-pane.on .m{animation:popin .5s both} .sc-pane.on .m:nth-child(2){animation-delay:.6s} .sc-pane.on .m:nth-child(3){animation-delay:1.4s} .sc-pane.on .m:nth-child(4){animation-delay:2s}
.sc-pane.on .cmp tbody tr{animation:popin .45s both} .sc-pane.on .cmp tbody tr:nth-child(2){animation-delay:.1s} .sc-pane.on .cmp tbody tr:nth-child(3){animation-delay:.2s} .sc-pane.on .cmp tbody tr:nth-child(4){animation-delay:.3s} .sc-pane.on .cmp tbody tr:nth-child(5){animation-delay:.4s}
.sb i{transform-origin:left; transform:scaleX(0)} .sc-pane.on .sb i{animation:growx 1s .5s cubic-bezier(.2,.7,.2,1) forwards} .sc-pane.on .sb i.b{animation-delay:.8s} @keyframes growx{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){ .sc-pane *{animation:none !important} .sc-pane .pts li{opacity:1; transform:none} .chart .line{stroke-dashoffset:0} .sb i{transform:none} }
.pts{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pts li{padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb, var(--bg) 60%, var(--surface)); color:var(--fg-2); font-size:.92rem; line-height:1.5}
.pts li b{color:var(--fg); font-weight:600}
.sc-pane .pts{display:flex; flex-wrap:wrap; gap:8px; grid-template-columns:none; align-items:flex-start}
.sc-pane .pts span{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2); border:1px solid color-mix(in srgb, var(--ac) 40%, var(--line)); background:color-mix(in srgb, var(--ac) 8%, transparent); padding:7px 11px; border-radius:20px; opacity:0; transform:translateY(6px); transition:opacity .5s, transform .5s}
.sc-pane.on .pts span{opacity:1; transform:none} .sc-pane.on .pts span:nth-child(1){transition-delay:.3s} .sc-pane.on .pts span:nth-child(2){transition-delay:.45s} .sc-pane.on .pts span:nth-child(3){transition-delay:.6s}
.sc-item .tx b{font-size:1.02rem} .sc-item .tx small{font-size:.78rem}
.shotwrap{position:relative; overflow:hidden; background:#000} .shotwrap img{display:block; width:100%; height:auto} .shotwrap .scan{position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(62,219,154,.8), transparent); animation:scan 3.4s linear infinite}
.strip{display:flex; gap:6px; padding:10px 12px; flex-wrap:wrap} .strip span{flex:1 1 90px; background:#0E1320; border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:8px 10px; color:#6B7488; font-size:.52rem; letter-spacing:.08em; text-transform:uppercase; display:flex; flex-direction:column; gap:2px}
.strip b{font-family:var(--display); font-size:1.05rem; font-weight:700; color:#fff; letter-spacing:-.02em} .strip b.c1{color:#6C8FFF} .strip b.c2{color:#3EDB9A} .strip b.c3{color:#F7B84B} .strip b.c4{color:#FF7A59}
.sc-pane.on .strip b{animation:popin .6s both} .sc-pane.on .strip span:nth-child(2n) b{animation-delay:.12s} .sc-pane.on .strip span:nth-child(3n) b{animation-delay:.24s}
.stepper{position:relative; display:grid; grid-template-columns:repeat(4,1fr); padding:34px 20px 18px}
.stepper .rail,.stepper .fill{position:absolute; left:12.5%; right:12.5%; top:46px; height:2px; background:rgba(255,255,255,.12)} .stepper .fill{right:auto; width:0; background:var(--ac,#6C8FFF); box-shadow:0 0 12px var(--ac,#6C8FFF)}
.sc-pane.on .stepper .fill{animation:fillrail 1.8s .3s cubic-bezier(.2,.7,.2,1) forwards} @keyframes fillrail{to{width:75%}}
.st{text-align:center; position:relative; padding-top:26px} .st::before{content:""; position:absolute; left:50%; top:6px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#0E1320; border:2px solid rgba(255,255,255,.25); transition:all .4s}
.st b{display:block; color:#fff; font-family:var(--display); font-size:.95rem} .st span{color:#6B7488; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase}
.sc-pane.on .st.done::before{border-color:#3EDB9A; background:#3EDB9A} .sc-pane.on .st.live::before{border-color:var(--ac,#6C8FFF); background:var(--ac,#6C8FFF); box-shadow:0 0 0 5px rgba(108,143,255,.25)}
.sc-pane.on .st:nth-of-type(1)::before{transition-delay:.5s} .sc-pane.on .st:nth-of-type(2)::before{transition-delay:.9s} .sc-pane.on .st:nth-of-type(3)::before{transition-delay:1.3s} .sc-pane.on .st:nth-of-type(4)::before{transition-delay:1.8s}
.board .cols{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){ .stepper{padding:28px 6px 14px} .st b{font-size:.8rem} .board .cols{grid-template-columns:repeat(2,1fr)} }
/* mock shell */
.mock{background:#070A10; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; color:#E6E9F0; font-family:var(--mono); font-size:.66rem; box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
:root[data-theme="light"] .mock{box-shadow:0 20px 40px -24px rgba(10,14,22,.5)}
.mk-top{display:flex; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08); background:#0A0E16}
.mk-brand{font-weight:600; letter-spacing:.12em; color:#fff} .mk-brand em{font-style:normal; color:#3EDB9A}
.mk-dim{color:#6B7488; letter-spacing:.08em; text-transform:uppercase; font-size:.6rem}
.mk-pill{margin-left:auto; padding:3px 8px; border-radius:20px; border:1px solid; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.mk-pill.green{color:#3EDB9A; border-color:rgba(62,219,154,.4)} .mk-pill.blue{color:#6C8FFF; border-color:rgba(108,143,255,.4)} .mk-pill.amber{color:#F7B84B; border-color:rgba(247,184,75,.4)}
.mk-h{color:#6B7488; letter-spacing:.12em; text-transform:uppercase; font-size:.58rem; margin:0 0 8px}
.c1{color:#6C8FFF} .c2{color:#3EDB9A} .c3{color:#F7B84B} .c4{color:#FF7A59}
/* vision */
.vision .mk-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:12px; padding:12px}
.mk-video{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:linear-gradient(180deg,#1b2436 0%,#0f1522 55%,#0a0e16 100%)}
.mk-video::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), radial-gradient(60% 50% at 50% 30%, rgba(108,143,255,.18), transparent 70%); pointer-events:none}
.mk-video::after{content:""; position:absolute; left:0; right:0; bottom:22%; height:40%; background:repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 26px, transparent 26px 52px), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px); transform:perspective(300px) rotateX(55deg); transform-origin:bottom; opacity:.6}
.scan{position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(108,143,255,.7), transparent); animation:scan 3.4s linear infinite; z-index:2}
@keyframes scan{0%{top:6%} 100%{top:94%}}
.sil{position:absolute; bottom:24%; border-radius:40% 40% 8px 8px; background:linear-gradient(180deg, rgba(40,52,78,.95), rgba(20,26,40,.95)); box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.sil.s1{left:38%; width:11%; height:44%} .sil.s2{left:60%; width:9%; height:38%; bottom:26%} .sil.s3{left:24%; width:6%; height:22%; bottom:30%; opacity:.7}
.bbox{position:absolute; border:1.5px solid #6C8FFF; border-radius:3px; box-shadow:0 0 12px rgba(108,143,255,.35)}
.bbox span{position:absolute; left:-1.5px; top:-16px; background:rgba(7,10,16,.85); color:#C6CCD8; padding:2px 6px; font-size:.56rem; white-space:nowrap; border-radius:3px}
.bbox i{position:absolute; left:30%; top:14%; width:22%; height:14%; border:1.5px solid #F7B84B; border-radius:2px}
.bbox.b1{left:36%; top:24%; width:15%; height:52%} .bbox.b2{left:58%; top:30%; width:13%; height:46%; border-color:#3EDB9A} .bbox.b2 span{top:auto; bottom:-16px} .bbox.b3{left:23%; top:46%; width:8%; height:24%; border-color:rgba(108,143,255,.6)} .bbox.small span{top:-14px}
.zone{position:absolute; left:4%; top:12%; right:14%; height:1px; border-top:1px dashed rgba(176,124,255,.6); color:rgba(176,124,255,.8); font-size:.52rem; padding-top:2px}
.heat{position:absolute; right:3%; top:5%; width:24%; aspect-ratio:16/10; border:1px solid rgba(255,255,255,.15); border-radius:4px; background:linear-gradient(135deg,#132038,#0b1220), radial-gradient(40% 40% at 60% 60%, rgba(255,80,60,.8), rgba(255,200,60,.5) 40%, rgba(60,200,120,.3) 65%, transparent 80%); background-blend-mode:screen}
.mk-bar{position:absolute; left:0; right:0; bottom:0; padding:6px 10px; background:rgba(0,0,0,.6); color:#C6CCD8; font-size:.56rem; letter-spacing:.04em; z-index:2}
.mk-side{display:flex; flex-direction:column}
.funnel{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-bottom:8px}
.funnel div{background:#0E1320; border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:7px 2px; text-align:center; min-width:0; overflow:hidden}
.funnel b{display:block; font-family:var(--display); font-size:1.05rem; font-weight:700; letter-spacing:-.02em} .funnel span{color:#6B7488; font-size:.44rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.bars{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; height:64px; align-items:end; margin-bottom:14px; padding:0 4px; border-bottom:1px solid rgba(255,255,255,.08)}
.bars i{display:block; height:var(--h); background:currentColor; opacity:.85; border-radius:3px 3px 0 0; min-height:2px}
.screen{background:#000; border:2px solid #1c2533; border-radius:10px; padding:18px 12px; text-align:center; box-shadow:inset 0 0 30px rgba(108,143,255,.15)}
.screen b{display:block; font-family:var(--display); font-size:1rem; color:#fff; margin-bottom:4px} .screen span{color:#3EDB9A; font-size:.6rem}
.kpis{display:grid; grid-template-columns:repeat(8,1fr); gap:6px; padding:0 12px 12px}
.kpis div{background:#0E1320; border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:8px}
.kpis b{display:block; font-family:var(--display); font-size:1rem; font-weight:700} .kpis span{color:#6B7488; font-size:.48rem; letter-spacing:.08em; text-transform:uppercase}
@media (max-width:760px){ .vision .mk-grid{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(4,1fr)} }
/* speed */
.tlm{padding:14px 14px 4px; display:grid; gap:8px}
.tlm-row{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center}
.tlm-row .d{color:#6B7488; letter-spacing:.08em; text-transform:uppercase; font-size:.58rem; text-align:right}
.tk{position:relative; padding:9px 12px 9px 26px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:#0E1320; font-family:var(--body); font-size:.86rem; color:#E6E9F0}
.tk::before{content:""; position:absolute; left:10px; top:13px; width:8px; height:8px; border-radius:50%; background:#3EDB9A}
.tk.live::before{background:#6C8FFF; box-shadow:0 0 0 4px rgba(108,143,255,.25)}
.tk small{display:block; color:#6B7488; font-size:.72rem; margin-top:2px}
.mock .term{margin:10px 14px 14px; padding:12px 14px; background:#03050a; border:1px solid rgba(255,255,255,.08); border-radius:8px; color:#C6CCD8; line-height:1.8; font-size:.66rem}
.mock .term .p{color:#6C8FFF} .mock .term .ok{color:#3EDB9A} .mock .term .k{color:#F7B84B}
/* flow */
.nodes{display:grid; grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr; gap:6px; align-items:center; padding:14px}
.node{border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:10px; background:#0E1320; min-height:64px}
.node span{display:block; color:#6B7488; letter-spacing:.1em; text-transform:uppercase; font-size:.52rem; margin-bottom:4px} .node b{font-family:var(--body); font-weight:500; font-size:.8rem; color:#fff}
.node.trig{border-color:rgba(247,184,75,.5)} .node.ai{border-color:rgba(108,143,255,.6); box-shadow:0 0 20px -6px rgba(108,143,255,.5)} .node.act{border-color:rgba(62,219,154,.5)} .node.hum{border-color:rgba(176,124,255,.5)}
.arr{height:1px; background:rgba(255,255,255,.25); position:relative} .arr::after{content:""; position:absolute; right:-1px; top:-3px; border:3.5px solid transparent; border-left-color:rgba(255,255,255,.5)}
.log{margin:0 14px 14px; border-top:1px solid rgba(255,255,255,.08); padding-top:10px; display:grid; gap:4px; color:#C6CCD8}
.log .t{color:#6B7488; margin-right:8px} .log .ok{color:#3EDB9A}
@media (max-width:760px){ .nodes{grid-template-columns:1fr} .arr{display:none} }
/* board */
.cols{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px}
.col h6{margin:0 0 8px; font-weight:500; color:#6B7488; letter-spacing:.1em; text-transform:uppercase; font-size:.56rem; display:flex; justify-content:space-between} .col h6 span{color:#fff}
.card-t{background:#0E1320; border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:9px 10px; margin-bottom:8px; font-family:var(--body); font-size:.8rem; color:#fff}
.card-t small{display:block; color:#6B7488; font-size:.68rem; margin-top:3px; font-family:var(--mono)} .card-t em{font-style:normal} .a1{color:#6C8FFF} .a2{color:#B07CFF} .a3{color:#3EDB9A}
.card-t.hot{border-color:rgba(108,143,255,.6)} .card-t.qa{border-color:rgba(62,219,154,.6)} .card-t.done{opacity:.6}
@media (max-width:760px){ .cols{grid-template-columns:repeat(2,1fr)} }
/* monitor */
.chart{padding:14px 14px 4px} .chart svg{width:100%; height:150px; display:block}
.chart .grid path{stroke:rgba(255,255,255,.08); stroke-width:1}
.chart .band{fill:rgba(108,143,255,.12)} .chart .line{fill:none; stroke:#6C8FFF; stroke-width:2}
.chart .anom{fill:#FF6B6B; stroke:#070A10; stroke-width:2; animation:pulse2 1.6s ease-out infinite} @keyframes pulse2{0%{r:6} 50%{r:8} 100%{r:6}}
.chart .lbl{fill:#FF9B9B; font-size:11px; font-family:var(--mono)}
.alerts{display:grid; gap:6px; padding:8px 14px 14px}
.al{display:grid; gap:2px; padding:8px 10px 8px 14px; border-left:3px solid; border-radius:6px; background:#0E1320}
.al b{font-family:var(--body); font-weight:600; font-size:.82rem; color:#fff} .al span{color:#8B95A8; font-size:.62rem}
.al.red{border-color:#FF6B6B} .al.amber{border-color:#F7B84B} .al.ok{border-color:#3EDB9A}
/* chat */
.msgs{display:grid; gap:10px; padding:14px}
.m{max-width:88%; padding:10px 12px; border-radius:12px; font-family:var(--body); font-size:.86rem; line-height:1.45}
.m.u{justify-self:end; background:#6C8FFF; color:#070A10; border-bottom-right-radius:4px}
.m.a{background:#0E1320; border:1px solid rgba(255,255,255,.1); color:#E6E9F0; border-bottom-left-radius:4px}
.m.a b{color:#fff}
.cites{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px} .cites span{font-family:var(--mono); font-size:.56rem; color:#8B95A8; border:1px solid rgba(255,255,255,.12); padding:2px 6px; border-radius:4px}
.acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px} .acts span{font-family:var(--mono); font-size:.6rem; color:#3EDB9A; border:1px solid rgba(62,219,154,.4); padding:3px 8px; border-radius:20px}
.m.typing{color:#8B95A8} .dots{display:inline-flex; gap:3px; margin-left:8px; vertical-align:middle} .dots i{width:5px; height:5px; border-radius:50%; background:#6C8FFF; animation:blink 1.2s infinite} .dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s} @keyframes blink{0%,80%,100%{opacity:.2} 40%{opacity:1}}
/* compare */
.cmp table{width:100%; border-collapse:collapse; font-family:var(--body); font-size:.84rem}
.cmp th,.cmp td{padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; color:#C6CCD8}
.cmp th{font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#6B7488}
.cmp td:first-child{color:#8B95A8; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em}
.cmp .hi{color:#fff; background:rgba(62,219,154,.07)} .cmp th.hi{color:#3EDB9A}
.save{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 14px}
.save > span{color:#6B7488; letter-spacing:.1em; text-transform:uppercase; font-size:.56rem}
.sb{display:grid; gap:6px} .sb i{display:block; height:16px; width:var(--w); border-radius:4px; position:relative} .sb i.a{background:#FF7A59; opacity:.7} .sb i.b{background:#3EDB9A}
.sb i b{position:absolute; left:100%; top:0; margin-left:8px; font-size:.58rem; color:#C6CCD8; font-weight:500; white-space:nowrap; line-height:16px}
@media (max-width:760px){ .cmp table{font-size:.76rem} .cmp th,.cmp td{padding:8px} }
/* ---------- how I work (scrollytelling) ---------- */
.how{padding-top:80px}
.wrap.wide{max-width:1380px}
.how-grid{display:grid; grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr); gap:40px; align-items:start}
.steps{display:flex; flex-direction:column}
.step{min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0}
.step .n{transition:color .3s} .step:not(.on) .n{color:var(--muted)} .step:not(.on) .n::before{background:var(--muted)}
.step .n{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:10px}
.step .n::before{content:""; width:22px; height:1px; background:var(--accent)}
.step h3{margin:0 0 14px; font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,2.8vw,2.3rem); letter-spacing:-.035em; line-height:1.05; text-wrap:balance}
.step h3 em{font-style:normal; background:linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.step p{margin:0; color:var(--fg-2); font-size:1.02rem; max-width:44ch}
.step .kp{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.step .kp span{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line-2); padding:5px 9px; border-radius:20px; color:var(--fg-2); background:var(--card-bg)}
.stage-wrap{position:sticky; top:84px}
.stage{position:relative; height:min(80vh,820px); width:100%; border-radius:18px; border:1px solid var(--line-2); overflow:hidden; background:radial-gradient(600px 400px at 30% 20%, var(--glow-a), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--bg-2)); box-shadow:var(--shadow), 0 1px 0 var(--hi) inset}
.stage svg{position:absolute; inset:0; width:100%; height:100%}
.stage .hud{position:absolute; left:16px; top:14px; display:flex; gap:8px; align-items:center; font-family:var(--mono); font-size:.7rem; color:var(--fg-2) !important; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.stage .hud i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent)}
.stage .kpis{position:absolute; right:16px; bottom:14px; display:flex; gap:10px; opacity:0; transform:translateY(8px); transition:opacity .6s, transform .6s}
.stage[data-step="4"] .kpis, .stage[data-step="5"] .kpis{opacity:1; transform:none}
.stage .kpi{background:var(--card-bg); border:1px solid var(--line-2); border-radius:10px; padding:8px 12px; box-shadow:var(--card-shadow); min-width:96px}
.stage .kpi b{display:block; font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.03em; color:var(--ok); font-variant-numeric:tabular-nums}
.stage .kpi span{font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.stage .cap{position:absolute; left:16px; bottom:14px; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); background:var(--card-bg); border:1px solid var(--line-2); padding:6px 10px; border-radius:6px; box-shadow:var(--card-shadow)}
/* svg layers */
.stage .g{transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.dept rect{fill:var(--surface-2); stroke:var(--line-2); stroke-width:1.2; rx:10}
.dept text{fill:var(--fg); font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase}
.ppl circle{fill:var(--muted); transition:fill .6s}
.enter .halo{fill:var(--accent-soft)} .enter .tok{fill:var(--accent); stroke:var(--bg); stroke-width:2}
.enter text{fill:var(--accent); font-family:var(--mono); font-size:10px; letter-spacing:.4px}
.enter .cap1{fill:var(--fg); font-size:10.5px} .enter .cap1.dim{fill:var(--muted)}
.edges path{fill:none; stroke:var(--accent); stroke-width:1.6; opacity:.9; stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.6s ease}
.flow circle{fill:var(--mark)}
.flow .wait circle{fill:var(--surface); stroke:var(--mark); stroke-width:1.4} .flow .wait path{fill:none; stroke:var(--mark); stroke-width:1.4} .flow .wait text{fill:var(--mark); font-family:var(--mono); font-size:9px}
.tools rect{fill:var(--bg); stroke:var(--line-2); rx:6}
.tools text{fill:var(--fg-2); font-family:var(--mono); font-size:9.5px}
.tools circle.ok{fill:var(--ok)}
.tools .dead rect{stroke-dasharray:3 3; stroke:var(--danger)} .tools .dead text{fill:var(--danger)} .tools .dead line{stroke:var(--danger); stroke-width:1} .tools .dead .dl{font-size:8.5px}
.tools .note{fill:var(--fg); font-family:var(--mono); font-size:9.5px; letter-spacing:.3px; transition:opacity .4s}
.tools .key text{fill:var(--muted); font-size:9px} .tools .key .dk{fill:none; stroke:var(--danger); stroke-dasharray:2 2; rx:3} .tools .key .wk{fill:none; stroke:var(--mark); stroke-width:1.4}
.tools .key{transition:opacity .4s}
.tools > g{transition:opacity .5s}
.hot circle.ring{fill:none; stroke:var(--danger); stroke-width:1.5; opacity:.9}
.hot circle.core{fill:var(--danger)}
.hot text{fill:#fff; font-family:var(--mono); font-size:9px; font-weight:600; text-anchor:middle}
.leg text{fill:var(--fg); font-family:var(--mono); font-size:9.5px}
.leg .hd{fill:var(--muted); font-size:8.5px; letter-spacing:1px}
.leg .n{fill:var(--danger); font-weight:600}
.leg .bar{fill:var(--danger); opacity:.85; rx:2; transform-origin:218px 0; transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.stage[data-step="3"] .leg .bar{transform:scaleX(1)}
.leg .v{fill:var(--fg-2); font-size:8.5px}
.fixed circle{fill:var(--ok)} .fixed path{fill:none; stroke:#fff; stroke-width:1.6}
.agents circle.a{fill:var(--accent); stroke:var(--bg); stroke-width:2}
.agents circle.cmd{fill:var(--accent-2)}
.agents text{fill:var(--fg); font-family:var(--mono); font-size:9.5px}
.agents .cmdl{fill:var(--fg)} .agents .small{fill:var(--muted); font-size:8px}
.agents .drop{fill:none; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:3 3; opacity:.9}
.agents .data{fill:none; stroke:var(--ok); stroke-width:1.2; stroke-dasharray:3 3}
.agents .bus{fill:none; stroke:var(--accent-2); stroke-width:1.8}
.agents .ic path, .agents .ic circle, .agents .ic ellipse{fill:var(--surface); stroke:var(--fg-2); stroke-width:1.3}
.agents .ic.db ellipse, .agents .ic.db path{stroke:var(--ok)}
.agents .sum{fill:var(--fg); font-size:9px; transition:opacity .4s} .agents .sum.dim{fill:var(--muted); font-size:8.5px}
.out path{fill:none; stroke:var(--accent-2); stroke-width:1.6; stroke-dasharray:80; stroke-dashoffset:80; transition:stroke-dashoffset 1s ease .3s}
.out text{fill:var(--fg); font-family:var(--display); font-weight:600; font-size:12px}
.out .oi{fill:none; stroke:var(--accent-2); stroke-width:1.5}
.stage .dotbg{color:var(--line-2); opacity:.32}
.dept rect{fill:color-mix(in srgb, var(--surface-2) 85%, var(--accent) 15%); stroke:var(--line-2); stroke-width:1.2; rx:10}
.dept .dico{fill:none; stroke:var(--accent); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.ppl .pp circle, .ppl .pp path{fill:var(--muted); transition:fill .6s}
.stage[data-step="5"] .ppl .pp circle, .stage[data-step="5"] .ppl .pp path{fill:var(--accent)}
.enter .hlr{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.2}
.agents .crit rect{shape-rendering:crispEdges}
.lens{transition:transform 1.1s cubic-bezier(.2,.7,.2,1); transform-origin:50% 50%}
/* step states */
.stage .enter, .stage .edges, .stage .flow, .stage .tools, .stage .hot, .stage .leg, .stage .agents, .stage .fixed, .stage .out, .stage .ppl{opacity:0}
.stage[data-step="1"] .lens{transform:scale(1.1) translate(0,8%)}
.stage:not([data-step="0"]) .ppl{opacity:1}
.stage[data-step="1"] .enter{opacity:1}
.stage[data-step="2"] .tools, .stage[data-step="3"] .tools, .stage[data-step="4"] .tools, .stage[data-step="5"] .tools{opacity:1}
.stage[data-step="2"] .edges, .stage[data-step="3"] .edges, .stage[data-step="4"] .edges, .stage[data-step="5"] .edges{opacity:1}
.stage[data-step="2"] .edges path, .stage[data-step="3"] .edges path, .stage[data-step="4"] .edges path, .stage[data-step="5"] .edges path{stroke-dashoffset:0}
.stage[data-step="2"] .flow, .stage[data-step="3"] .flow{opacity:1}
.stage[data-step="3"] .tools .note, .stage[data-step="3"] .tools .key, .stage[data-step="4"] .tools .note, .stage[data-step="4"] .tools .key, .stage[data-step="5"] .tools .note, .stage[data-step="5"] .tools .key{opacity:0 !important}
.stage[data-step="3"] .tools .dead .dl, .stage[data-step="4"] .tools .dead .dl, .stage[data-step="5"] .tools .dead .dl{opacity:0}
.tools .dead .dl{transition:opacity .4s}
.stage[data-step="3"] .tools > g:not(.leak), .stage[data-step="4"] .tools > g:not(.leak){opacity:.35}
.stage[data-step="4"] .tools > g:nth-child(8){opacity:1}
.stage[data-step="3"] .hot, .stage[data-step="3"] .leg{opacity:1}
.stage[data-step="3"] .hot circle.ring{animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{r:7; opacity:.9} 100%{r:22; opacity:0}}
.stage[data-step="4"] .fixed, .stage[data-step="4"] .agents, .stage[data-step="5"] .fixed, .stage[data-step="5"] .agents{opacity:1}
.stage[data-step="5"] .lens{transform:scale(.8) translate(0,-4%)}
.stage[data-step="5"] .out{opacity:1}
.stage[data-step="5"] .out path{stroke-dashoffset:0}
.stage[data-step="5"] .agents .sum{opacity:0}
.stage[data-step="5"] .ppl circle{fill:var(--accent)}
@media (max-width:900px){
.how-grid{grid-template-columns:1fr; gap:20px}
.stage-wrap{position:sticky; top:8px; z-index:3}
.stage{height:min(66vh,620px)}
.steps{order:2}
.step{min-height:64vh; justify-content:flex-start; padding-top:28px}
}
/* ---------- timeline ---------- */
.legend{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.legend span{display:flex; align-items:center; gap:7px}
.legend i{width:9px; height:9px; border-radius:50%; display:block}
.k-work{background:var(--accent)} .k-edu{background:var(--violet)} .k-prod{background:var(--mark)} .k-cert{background:var(--ok)}
.tl{position:relative; list-style:none; margin:0; padding:8px 0 0}
.tl .spine{position:absolute; left:139px; top:0; bottom:0; width:2px; background:var(--line)}
.tl .spine i{position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(var(--accent), var(--accent) 85%, transparent); display:block; transform-origin:0 0; transform:scaleY(0); will-change:transform}
.tl .spine b{position:absolute; left:50%; width:16px; height:16px; margin-left:-8px; margin-top:-8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--accent-soft), 0 0 20px var(--accent); top:0; will-change:transform}
.year{display:grid; grid-template-columns:100px 78px 1fr; align-items:center; margin:40px 0 18px}
.year:first-of-type{margin-top:0}
.year b{font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.6rem); letter-spacing:-.04em; line-height:1; text-align:right; color:var(--faint); transition:color .5s, transform .5s; transform:translateX(-6px); font-variant-numeric:tabular-nums}
.year.lit b{color:var(--fg); transform:none}
.year em{grid-column:3; font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ev{display:grid; grid-template-columns:100px 78px minmax(0,1fr); align-items:start; padding:0 0 22px}
.ev time{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--muted); text-align:right; padding-top:16px; line-height:1.5; font-variant-numeric:tabular-nums}
.ev .dot{position:relative; height:100%; min-height:44px}
.ev .dot::before{content:""; position:absolute; left:33px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--faint); transition:border-color .4s, background .4s, box-shadow .4s}
.ev.lit .dot::before{border-color:var(--c); box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent)}
.ev.work{--c:var(--accent)} .ev.edu{--c:var(--violet)} .ev.prod{--c:var(--mark)} .ev.cert{--c:var(--ok)}
.ev .card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px 18px; position:relative; border-left:3px solid var(--line);
display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
opacity:.35; transform:translateX(18px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), border-color .4s}
.ev.lit .card{opacity:1; transform:none; border-left-color:var(--c)}
.ev .card .lg{width:56px; height:56px; padding:8px}
.ev .card .lg.wide{width:auto; height:56px; max-width:200px; padding:8px 12px}
.ev .card .lg.wide img{height:40px; width:auto; max-width:176px}
.ev .kind{display:inline-block; margin-bottom:8px; font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); padding:2px 7px; border-radius:20px}
.ev h3{margin:0; font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.02em; line-height:1.25}
.ev .org{color:var(--muted); font-size:.86rem; margin:2px 0 8px}
.ev p{margin:0; color:var(--fg-2); max-width:62ch; font-size:.95rem}
.ev ul{margin:8px 0 0; padding:0; list-style:none; display:grid; gap:5px; color:var(--fg-2); font-size:.93rem}
.ev ul li{display:grid; grid-template-columns:10px 1fr; gap:10px}
.ev ul li::before{content:""; width:5px; height:5px; margin-top:10px; background:var(--c); border-radius:1px}
.ev ul li b{color:var(--fg); font-weight:500}
.ev .chips{margin-top:10px}
.ev .sublogos{display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap}
.ev .sublogos .lg{width:auto; height:34px; padding:5px 9px}
.ev .sublogos .lg img{height:24px; width:auto; max-width:110px}
.ev.now .dot::before{background:var(--accent); border-color:var(--accent); animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent)} 100%{box-shadow:0 0 0 14px transparent}}
.ev.hl .card{border-color:color-mix(in srgb, var(--violet) 55%, transparent); box-shadow:0 1px 0 var(--hi) inset, 0 18px 40px -20px rgba(0,0,0,.8), 0 0 48px -10px color-mix(in srgb, var(--violet) 55%, transparent)}
.ev.hl .card::before{content:""; position:absolute; inset:0; border-radius:12px; background:linear-gradient(120deg, color-mix(in srgb, var(--violet) 14%, transparent), transparent 55%); pointer-events:none}
.ev.hl .duo{display:flex; flex-direction:column; align-items:center; gap:6px}
.ev.hl .duo .plus{font-family:var(--display); font-weight:700; color:var(--violet); font-size:1.1rem; line-height:1}
.ev.hl .duo .lg{width:64px; height:64px; padding:8px}
.ev .kind.key{margin-left:6px; color:var(--mark); border-color:color-mix(in srgb, var(--mark) 55%, transparent); background:color-mix(in srgb, var(--mark) 12%, transparent)}
.ev.hl h3{font-size:1.3rem}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{padding:4px 9px; border:1px solid var(--line-2); border-radius:6px; font-size:.8rem; color:var(--fg-2); background:var(--bg); display:inline-flex; align-items:center; gap:6px}
.chip svg{width:13px; height:13px; color:var(--fg-2)}
.chip.hot{border-color:var(--accent); color:var(--fg); background:var(--accent-soft)}
/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(12px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
.stag > *{opacity:0; transform:translateY(10px) scale(.98); transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1)}
.stag.in > *{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .rv, .stag > *, .ev .card{opacity:1 !important; transform:none !important; transition:none !important} .year b{color:var(--fg)} }
/* ---------- AI toolkit ---------- */
.kit{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.kit .k{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; transition:border-color .2s, transform .2s}
.kit .k:hover{border-color:var(--accent); transform:translateY(-2px)}
.kit .k b{font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.01em}
.kit .k span{color:var(--muted); font-size:.82rem; line-height:1.45}
.kit .lg{width:46px; height:46px; padding:7px; border-radius:10px}
.kit .lg.wide{width:auto; padding:8px 10px; max-width:150px}
.stack{margin-top:44px}
.stack h3{margin:0 0 12px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:10px}
.stack h3::after{content:""; flex:1; height:1px; background:var(--line)}
.icons{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px}
.icons div{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--fg)}
.icons svg{width:26px; height:26px}
.icons span{font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; text-align:center}
.stack .chips{margin-top:14px}
.stack .chip{background:var(--surface); font-size:.84rem; padding:5px 10px}
.langbar{margin-top:40px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.lang{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px}
.lang b{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:1.05rem}
.lang .flag{width:26px; height:auto; border-radius:3px; box-shadow:0 0 0 1px var(--line-2); flex:none}
.lang span{color:var(--muted); font-size:.86rem}
.lang .meter{height:4px; background:var(--line); border-radius:2px; margin-top:12px; overflow:hidden}
.lang .meter i{display:block; height:100%; width:0; background:var(--accent); transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.in .lang .meter i{width:var(--w)}
/* ---------- products ---------- */
.prods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.pcard .body{min-width:0}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s}
.pcard:hover{border-color:var(--accent); transform:translateY(-2px)}
.pcard .shot{display:block; position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface-2)}
.pcard .shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .shot img{transform:scale(1.03)}
.pcard .shot .url{position:absolute; left:12px; bottom:10px; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); padding:4px 8px; border-radius:4px; backdrop-filter:blur(4px)}
.pcard .body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.pcard .top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.pcard .top .l{display:flex; align-items:center; gap:12px}
.pcard .top .lg{width:44px; height:44px; padding:6px}
.pcard .top .lg.wide{width:auto; padding:7px 10px}
.pcard h3{margin:0; font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.03em; line-height:1}
.pcard p{margin:0; color:var(--fg-2); font-size:.94rem}
.pcard .fact{display:flex; gap:22px; flex-wrap:wrap; margin-top:auto; padding-top:12px; border-top:1px solid var(--line)}
.pcard .fact div{display:flex; flex-direction:column}
.pcard .fact b{font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pcard .fact span{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pcard .go{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:6px}
.pcard .go svg{width:12px; height:12px}
.status{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:20px; border:1px solid var(--line-2); color:var(--muted); white-space:nowrap}
.status::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.status.live{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent)}
.status.gold{color:var(--mark); border-color:color-mix(in srgb, var(--mark) 45%, transparent)}
/* ---------- MeshCode feature ---------- */
.feature{border:1px solid var(--line-2); border-radius:22px; overflow:hidden; background:var(--card-bg); box-shadow:var(--shadow), 0 1px 0 var(--hi) inset; margin-bottom:18px}
.feature .banner{display:block; position:relative; aspect-ratio:1200/433; background:#05070C; overflow:hidden}
.feature .banner img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature:hover .banner img{transform:scale(1.02)}
.feature .banner .url{position:absolute; right:16px; bottom:14px; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); padding:5px 9px; border-radius:6px}
.feature .body{padding:30px 32px 30px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:32px; align-items:stretch}
.feature .k{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.feature .badges{display:flex; gap:8px; flex-wrap:wrap}
.feature h3{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; line-height:1}
.feature h3 a:hover{color:var(--accent)}
.feature h3 .arr{font-size:.5em; vertical-align:middle; color:var(--accent); margin-left:8px}
.feature .site{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:6px 0 16px}
.feature p{margin:0 0 16px; color:var(--fg-2); font-size:1.02rem; max-width:62ch}
.feature p code{font-family:var(--mono); font-size:.82em; background:var(--accent-soft); padding:2px 6px; border-radius:4px}
.feature .chips .chip{background:var(--surface)}
.feature .go{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.feature .go svg{width:12px; height:12px}
.critters{display:flex; align-items:flex-end; justify-content:flex-end; gap:14px; min-height:120px}
.critters canvas{width:84px; height:84px; image-rendering:pixelated; filter:drop-shadow(0 12px 10px rgba(0,0,0,.35))}
.critters .c{display:flex; flex-direction:column; align-items:center; gap:6px; animation:bob 1.6s ease-in-out infinite}
.critters .c:nth-child(2){animation-delay:.2s} .critters .c:nth-child(3){animation-delay:.4s} .critters .c:nth-child(4){animation-delay:.6s}
.critters .c span{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){ .critters .c{animation:none} }
@media (max-width:900px){ .feature .body{grid-template-columns:minmax(0,1fr); padding:22px 20px 24px} .critters{justify-content:flex-start; flex-wrap:wrap; gap:10px; min-height:0} .critters canvas{width:64px; height:64px} }
/* ---------- CV modal ---------- */
.cvm{position:fixed; inset:0; z-index:50; display:none; align-items:flex-start; justify-content:center; padding:24px; background:rgba(4,6,10,.78); backdrop-filter:blur(8px); overflow:auto}
.cvm.open{display:flex}
.cvm .box{background:var(--surface); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow); width:min(920px,100%); overflow:hidden}
.cvm .hd{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 12px 18px; border-bottom:1px solid var(--line)}
.cvm .hd b{font-family:var(--display); font-weight:600}
.cvm .hd .acts{display:flex; gap:8px; align-items:center}
.cvm .x{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:none; color:var(--fg); cursor:pointer; font-size:18px; line-height:1}
.cvm .pg{display:block; width:100%; height:auto; background:#fff}
.cvm .note{padding:10px 18px; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line)}
@media (max-width:760px){ .cvm{padding:10px} }
/* ---------- contact form ---------- */
.cform{margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; background:var(--card-bg); border:1px solid var(--line-2); border-radius:16px; padding:20px; box-shadow:var(--card-shadow)}
.cform .f{display:flex; flex-direction:column; gap:6px} .cform .wide{grid-column:1 / -1}
.cform label{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.cform input, .cform textarea{width:100%; background:color-mix(in srgb, var(--bg) 70%, var(--surface)); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; color:var(--fg); font-family:var(--body); font-size:.96rem; outline:none; transition:border-color .2s, box-shadow .2s}
.cform input:focus, .cform textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.cform textarea{resize:vertical; min-height:110px}
.cform .act{flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap}
.cta-pill.big{height:46px; padding:0 22px; font-size:.95rem; background:var(--accent); color:var(--accent-ink); border:0; cursor:pointer; box-shadow:0 10px 26px -10px var(--accent-glow)}
.cta-pill.big:disabled{opacity:.6; cursor:default; transform:none}
.fnote{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--muted)}
.fnote.ok{color:var(--ok)} .fnote.err{color:var(--danger)}
@media (max-width:760px){ .cform{grid-template-columns:1fr; padding:16px} }
/* ---------- contact ---------- */
.contact{padding-bottom:110px}
.contact .hd{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:end; margin-bottom:34px}
.contact h2{margin:8px 0 0; font-family:var(--display); font-weight:700; font-variation-settings:"opsz" 96; font-size:clamp(2.4rem,5.4vw,4.6rem); letter-spacing:-.045em; line-height:.98; text-wrap:balance}
.contact h2 em{font-style:normal; color:var(--accent)}
.contact .hd p{margin:0; color:var(--fg-2); font-size:1.02rem; max-width:44ch}
.ways{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:26px}
.way{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:10px}
.way b{font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:-.015em}
.way p{margin:0; color:var(--muted); font-size:.88rem}
.way .mono{color:var(--accent); margin-top:auto}
.contact-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.contact-grid a{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; display:flex; align-items:center; gap:12px; transition:border-color .2s}
.contact-grid a:hover{border-color:var(--accent)}
.contact-grid .ico{display:flex; align-items:center; justify-content:center; padding:0; width:40px; height:40px; border-radius:10px; background:var(--chip); box-shadow:0 1px 0 var(--hi) inset, 0 6px 16px -8px rgba(0,0,0,.5); flex:none}
.contact-grid .ico svg{width:22px; height:22px; display:block; margin:auto; flex:none; stroke:none}
.contact-grid .ico.pdf{background:linear-gradient(145deg,#FF6B6B,#D9483B)}
.contact-grid .ico.pdf svg{stroke:#fff; fill:none; stroke-width:1.8}
.contact-grid span{display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.contact-grid b{font-weight:500; font-size:.86rem; overflow-wrap:anywhere; display:block}
.foot{margin-top:48px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:var(--faint); text-transform:uppercase}
/* ---------- depth ---------- */
.svc .tile, .kit .k, .pcard, .way, .lang, .icons div, .contact-grid a, .ev .card, .metrics{background:var(--card-bg); box-shadow:var(--card-shadow)}
.svc .tile:hover, .kit .k:hover, .pcard:hover, .contact-grid a:hover{box-shadow:0 1px 0 var(--hi) inset, 0 22px 44px -18px rgba(0,0,0,.8), 0 0 0 1px var(--accent-soft), 0 0 40px -10px var(--accent-glow)}
.ev.lit .card{box-shadow:0 1px 0 var(--hi) inset, 0 18px 40px -20px rgba(0,0,0,.8), 0 0 36px -14px color-mix(in srgb, var(--c) 45%, transparent)}
.chip{background:color-mix(in srgb, var(--bg) 70%, var(--surface))}
.btn.primary{box-shadow:0 8px 24px -8px var(--accent-glow), 0 1px 0 rgba(255,255,255,.25) inset}
.btn.primary:hover{box-shadow:0 12px 30px -8px var(--accent-glow)}
.sec-head h2 em, .svc-intro h2 em, .contact h2 em, .hero h1 em{background:linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
section.band{background:linear-gradient(180deg, var(--bg-2), transparent 70%)}
.ico{background:linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 18%, transparent)); box-shadow:0 1px 0 var(--hi) inset, 0 6px 16px -8px var(--accent-glow)}
.photo{box-shadow:var(--shadow), 0 0 0 12px var(--accent-soft), 0 0 80px -10px var(--accent-glow)}
/* ---------- responsive ---------- */
@media (max-width:980px){ .svc{grid-template-columns:repeat(2,minmax(0,1fr))} .kit{grid-template-columns:repeat(3,minmax(0,1fr))} .icons{grid-template-columns:repeat(5,minmax(0,1fr))} .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
.wrap{padding:0 20px} .metrics ul{padding:0 20px}
.bar{position:static; top:auto; padding:10px 10px 0; margin-bottom:0} .bar .pill{height:auto; flex-wrap:wrap; padding:8px 8px 8px 10px; border-radius:22px; row-gap:4px}
.brand span.full{display:none} .brand{gap:8px; font-size:14px}
.bar .right{margin-left:auto; gap:6px} .lang-btn,.theme-btn{height:34px; min-width:34px; width:auto; padding:0 9px} .theme-btn{width:34px; padding:0}
.cta-pill{height:34px; padding:0 12px; font-size:.8rem}
.nav{width:100%; order:3; gap:2px; padding-bottom:2px} .nav a{padding:7px 10px; font-size:.86rem}
.hero{padding:44px 0 56px} .hero .scales{opacity:.6}
.hero .wrap{grid-template-columns:1fr; gap:24px; justify-items:start}
.photo{width:150px; height:150px}
.metrics ul{grid-template-columns:repeat(2,1fr)}
.metrics li{padding:24px 16px 22px 0}
.metrics li:nth-child(2n){border-right:0; padding-left:16px}
.metrics li:nth-child(2n+1){padding-left:0}
.metrics li:nth-child(n+3){border-top:1px solid var(--line)}
.svc-intro, .contact .hd{grid-template-columns:1fr; gap:14px}
.svc, .kit, .ways, .langbar, .prods, .contact-grid{grid-template-columns:1fr}
.icons{grid-template-columns:repeat(4,minmax(0,1fr))}
.tl .spine{left:9px}
.year{grid-template-columns:1fr; margin-left:34px}
.year b{text-align:left; font-size:1.7rem}
.year em{grid-column:1}
.ev{grid-template-columns:28px minmax(0,1fr); padding-bottom:16px}
.ev time{grid-column:2; text-align:left; padding:0 0 6px}
.ev .dot{grid-column:1; grid-row:1 / span 2; min-height:0}
.ev .dot::before{left:3px; top:4px}
.ev .card{grid-column:2; grid-template-columns:1fr}
section{padding:56px 0}
}
/* ---------- mobile polish (≤760) ---------- */
@media (max-width:760px){
html{-webkit-text-size-adjust:100%}
.bar{position:sticky; top:8px; padding:0 10px; margin-bottom:-58px; z-index:20}
.bar .pill{height:50px; flex-wrap:nowrap; padding:0 6px 0 10px; border-radius:999px; row-gap:0}
.nav{display:none}
.brand{font-size:0} .brand img{width:32px; height:32px}
.bar .right{margin-left:auto; gap:6px} .lang-btn,.theme-btn{height:36px} .cta-pill{height:36px; padding:0 14px; font-size:.84rem}
.hero{padding:96px 0 44px} .hero .wrap{gap:18px}
.photo{width:132px; height:132px; box-shadow:var(--shadow), 0 0 0 8px var(--accent-soft)}
.hero .eyebrow{margin-bottom:12px; gap:8px}
.hero h1{white-space:normal; font-size:2.35rem; line-height:1; letter-spacing:-.04em; margin-bottom:8px} .hero h1 .ln{display:block; font-size:.62em; margin-top:4px}
.hero .who{font-size:.64rem; margin-bottom:12px} .hero .tag{font-size:1.35rem; margin-bottom:10px}
.lede{font-size:.98rem; margin-bottom:18px}
.cta-row{gap:8px} .cta-row .btn{flex:1 1 calc(50% - 8px); justify-content:center; padding:12px 10px}
.cta-row .btn.primary{flex-basis:100%}
.tools-row{margin-top:18px; gap:8px} .tools-row .mono{width:100%}
.metrics li{padding:20px 12px 18px 0} .metrics li:nth-child(2n){padding-left:14px}
.metrics .big{font-size:2.3rem; margin-bottom:6px} .metrics .lbl{font-size:.88rem} .metrics .sub{display:none}
section{padding:52px 0} .sec-head{margin-bottom:24px} .sec-head h2{font-size:1.5rem}
.svc-intro h2{font-size:1.5rem} .svc-intro p{font-size:.94rem}
.trust{padding:32px 0 36px} .trust .row .more{font-size:.62rem}
.press{padding:14px} .press b{font-size:.94rem} .press q{font-size:.84rem}
.svc .tile{padding:18px 16px} .svc b{font-size:1rem}
/* AI showcase */
.sc-list{gap:6px; margin:0 -20px; padding:0 20px 8px}
.sc-item{grid-template-columns:28px minmax(0,1fr); gap:8px; padding:8px 12px 8px 8px; border-radius:999px; border:1px solid var(--line); max-width:none; background-color:var(--surface)}
.sc-item .ico{width:28px; height:28px; border-radius:50%} .sc-item .ico svg{width:15px; height:15px}
.sc-item .tx b{font-size:.84rem; white-space:nowrap} .sc-item .tx small{display:none}
.sc-item.on{transform:none; box-shadow:0 0 0 1px var(--ac)}
.sc-stage{min-height:0}
.sc-pane .pts span{font-size:.6rem; padding:6px 9px}
.mock{font-size:.6rem} .strip span{flex:1 1 30%} .kpis{grid-template-columns:repeat(3,1fr)}
/* how */
.how{padding-top:44px} .step h3{font-size:1.45rem} .step p{font-size:.94rem}
.stage .hud{font-size:.58rem}
.iso-caps{max-width:calc(100% - 96px)} .iso-cap{line-height:1.35} /* never runs under the scroll hint */
/* timeline */
.tl .spine{left:7px}
.year{margin:28px 0 12px 26px} .year b{font-size:1.5rem}
.year em{font-size:.6rem}
.ev{grid-template-columns:22px minmax(0,1fr); padding-bottom:12px}
.ev time{display:inline-block; padding:2px 8px; border:1px solid var(--line-2); border-radius:20px; font-size:.62rem; margin-bottom:6px; background:var(--surface)}
.ev .dot::before{left:1px; top:6px; width:12px; height:12px}
.ev .card{padding:14px 14px 14px; gap:10px; grid-template-columns:1fr}
.ev .card .lg{width:44px; height:44px; padding:6px} .ev .card .lg.wide{height:40px; padding:6px 10px; max-width:150px} .ev .card .lg.wide img{max-width:126px}
.ev h3{font-size:1.02rem} .ev p, .ev ul{font-size:.9rem} .ev .org{font-size:.8rem}
.ev.hl .duo{flex-direction:row} .ev.hl .duo .lg{width:44px; height:44px}
.ev .kind{font-size:.52rem}
/* products */
.feature .body{padding:18px 16px 20px} .feature h3{font-size:1.9rem} .feature p{font-size:.94rem}
.pcard .body{padding:16px 16px 18px} .pcard h3{font-size:1.15rem}
/* toolkit */
.kit .k{flex-direction:row; align-items:center; gap:12px; padding:12px 14px} .kit .k b{font-size:.94rem} .kit .k span{font-size:.78rem}
.kit .k .lg{width:40px; height:40px; padding:6px} .kit .k .lg.wide{width:auto; max-width:120px}
.icons{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px} .icons div{padding:10px 4px 8px} .icons svg{width:22px; height:22px} .icons span{font-size:.52rem}
.langbar{gap:8px} .lang{padding:12px 14px}
/* contact */
.contact{padding-bottom:64px} .contact h2{font-size:2rem} .contact .hd p{font-size:.94rem}
.way{padding:16px} .way b{font-size:.98rem} .way p{font-size:.84rem}
.contact-grid a{padding:12px 14px} .contact-grid b{font-size:.84rem}
.cform{margin-top:14px; padding:14px; gap:10px} .cform input,.cform textarea{padding:11px 12px; font-size:16px}
.cta-pill.big{width:100%; justify-content:center}
.foot{font-size:.58rem; gap:8px}
.cvm .box{border-radius:12px} .cvm .hd{padding:10px 10px 10px 14px} .cvm .hd b{font-size:.88rem}
}
@media (max-width:760px) and (hover:none){ .scales{opacity:.45} }
/* ---------- mobile fixes, 12 Sep 2026 (Samuel's iPhone review) ----------
1. How I work: the sticky stage sits at the very top with an opaque band behind
it that reaches up under the nav, so the step text scrolls behind it cleanly
and nothing shows above the stage. app.js sets its top to 0 on mobile.
box-shadow + clip-path extend the band to both screen edges without knowing
the wrap's side padding.
2. iOS repaints a fixed background on every scroll frame, which made the
timeline dot flicker; on mobile the background scrolls with the page. */
@media (max-width:900px){
.stage-wrap{top:0; z-index:3; padding:68px 0 10px; background:var(--bg);
box-shadow:0 0 0 100vmax var(--bg); clip-path:inset(0 -100vmax)}
body{background-attachment:scroll}
}
/* ---------- footer + consent line, 12 Sep 2026 ---------- */
.site-foot{border-top:1px solid var(--line); padding:22px 0 28px}
.site-foot .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--muted)}
.site-foot a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.site-foot a:hover, .site-foot a:focus-visible{color:var(--fg); text-decoration-thickness:2px}
.cform .fconsent{grid-column:1 / -1; margin:0; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--fg-2)}
.cform .fconsent a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
/* ---------- hero centred on mobile, 12 Sep 2026 (Samuel: "no sale centrado") ----------
Only <=900px. The buttons keep their current layout. */
@media (max-width:900px){
.hero .photo-3d{justify-self:center; margin-left:auto; margin-right:auto}
.hero .eyebrow{justify-content:center}
.hero h1, .hero .who, .hero .tag{text-align:center}
.hero .lede{text-align:center; margin-left:auto; margin-right:auto}
.hero .tools-row{justify-content:center}
.hero .tools-row > .mono{text-align:center}
}
/* ---------- timeline logos on mobile, 12 Sep 2026 ----------
A phone rule sets `.ev .card .lg` to a fixed 44px square; it has the same
specificity as `.ev .sublogos .lg` and comes later, so the sub-logo chip stayed
44px wide around a ~100px logo (ALERTA AV spilled over its link). Wide chips are
40px tall there with 6px padding, so their image is 28px. */
@media (max-width:760px){
.ev .card .sublogos .lg{width:auto; height:34px; padding:5px 9px}
.ev .card .lg.wide img{height:28px}
}
/* ---------- "me" token in How I work, 12 Sep 2026 ----------
Green (--ok) so it stands out from the blue boxes; red is reserved for leaks. */
.enter .me .halo{fill:color-mix(in srgb, var(--ok) 25%, transparent)}
.enter .me .tok{fill:var(--ok)}
.enter .me text{fill:var(--ok); font-size:12px; font-weight:700}
/* ---------- liquid glass on card surfaces, 12 Sep 2026 ----------
Same language as the top bar pill: translucent surface with blur + saturate. The
cards that already carry --card-shadow (which includes the pill's 1px --hi inner
highlight) keep their shadows untouched; the inner highlight is only added where
there was no shadow (press items) or combined with the existing one (CV modal).
Without backdrop-filter support every surface keeps its current background.
Light theme uses a near-white translucent surface and the dark press items a
page-tinted one, so text contrast is never below today's (measured from pixels).
Mobile: blur capped at 8px, and the timeline cards keep their current solid
background, because they slide/fade in as you scroll and glass on moving
elements is what flickers on iOS. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.press, .svc .tile, .metrics, .cform, .cvm .box{
background:color-mix(in srgb, var(--surface) 74%, transparent);
-webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
}
:root[data-theme="light"] :is(.press, .svc .tile, .metrics, .cform, .cvm .box){background:rgba(250,251,253,.80)}
:root:not([data-theme="light"]) .press{background:color-mix(in srgb, var(--bg) 60%, transparent)}
.press{box-shadow:0 1px 0 var(--hi) inset}
.cvm .box{box-shadow:0 1px 0 var(--hi) inset, var(--shadow)}
@media (min-width:901px){
.ev .card{background:color-mix(in srgb, var(--surface) 74%, transparent);
-webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4)}
:root[data-theme="light"] .ev .card{background:rgba(250,251,253,.80)}
}
@media (max-width:900px){
.press, .svc .tile, .metrics, .cform, .cvm .box{
-webkit-backdrop-filter:blur(8px) saturate(1.3); backdrop-filter:blur(8px) saturate(1.3);
}
}
}
/* ---------- Products built: symmetric on desktop, 12 Sep 2026 ----------
Samuel: "queda disparejo en compu". With two columns, an odd last card sat alone
with a hole next to it. On desktop it now spans the full row as a horizontal card:
screenshot on the left (about half, cropped to cover), text on the right, edges
aligned with the two cards above. Targets "odd last card", not a product name, so
it stays symmetric if products are added. Phones are unchanged (one column). */
@media (min-width:901px){
.prods > .pcard:last-child:nth-child(odd){grid-column:1 / -1; flex-direction:row}
.prods > .pcard:last-child:nth-child(odd) .shot{flex:0 0 50%; aspect-ratio:auto; min-height:300px;
border-bottom:0; border-right:1px solid var(--line)}
.prods > .pcard:last-child:nth-child(odd) .body{justify-content:center; padding:28px 32px}
}
/* ---------- "What can I do with AI?", 12 Sep 2026 ----------
Samuel: "más concisa, tecnológica, easy to read, íconos monocromos". The animated
mockups, coloured icons, auto-rotation and sticky list are gone: seven cards read
with a normal scroll. Line icons in currentColor at 1.5px. Symmetric with 7 cards:
desktop 4 columns with the first card spanning 2; tablet 2 columns with the first
full width; phones one column. */
.caps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.caps .cap:first-child{grid-column:span 2}
.cap{display:flex; flex-direction:column; gap:10px; padding:20px 20px 18px; border:1px solid var(--line); border-radius:14px;
background:var(--card-bg); box-shadow:var(--card-shadow)}
.cap-ico{width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--fg)}
.cap-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.cap h3{margin:4px 0 0; font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:-.015em; line-height:1.2}
.cap p{margin:0; color:var(--fg-2); font-size:.92rem; line-height:1.45}
.cap-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px}
.cap-chips span{font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2);
border:1px solid var(--line); border-radius:999px; padding:4px 9px}
@media (max-width:1100px){ .caps{grid-template-columns:repeat(2,minmax(0,1fr))} .caps .cap:first-child{grid-column:1 / -1} }
@media (max-width:760px){ .caps{grid-template-columns:minmax(0,1fr)} .caps .cap:first-child{grid-column:auto} .cap{padding:16px} }
/* ---------- What I do: before → after ledger, 14 Sep 2026 ----------
Samuel: the six icon tiles repeated the "What can I do with AI?" showcase right below.
This section now shows outcomes, not capabilities: what the company looks like before
and after, with a real reference per row. No boxes per row (hairlines only) so it reads
as one table; the connector line draws once when the rows come into view. */
.xf{margin-top:8px}
.xf-head, .xf-row{display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1.15fr) 230px; gap:0 18px; align-items:center}
.xf-head{padding:0 0 12px; border-bottom:1px solid var(--line-2)}
.xf-head span{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.xf-head span:nth-child(3){color:var(--accent)}
.xf-row{position:relative; padding:22px 0; border-bottom:1px solid var(--line)}
.xf-row::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .5s cubic-bezier(.2,.7,.2,1)}
.xf-row:hover::before{width:100%}
.xf-before, .xf-after{margin:0; display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start}
.xf-before{color:var(--muted); font-size:.98rem; line-height:1.5}
.xf-after{color:var(--fg); font-family:var(--display); font-weight:600; font-size:1.14rem; letter-spacing:-.015em; line-height:1.35}
.xf-mk{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px}
.xf-mk svg{width:12px; height:12px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.xf-before .xf-mk{border:1px solid var(--line-2)} .xf-before .xf-mk svg{stroke:var(--muted)}
.xf-after .xf-mk{background:color-mix(in srgb, var(--ok) 16%, transparent)} .xf-after .xf-mk svg{stroke:var(--ok)}
.xf-line{position:relative; height:2px; background:var(--line); border-radius:2px; overflow:visible}
.xf-line i{position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--line-2), var(--accent)); border-radius:2px; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.xf-line::after{content:""; position:absolute; right:-2px; top:50%; width:7px; height:7px; margin-top:-4px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); transform:rotate(45deg); opacity:0; transition:opacity .3s .5s}
.xf-body.in .xf-line i{transform:scaleX(1)} .xf-body.in .xf-line::after{opacity:1}
.xf-body.in .xf-row:nth-child(2) .xf-line i{transition-delay:.12s} .xf-body.in .xf-row:nth-child(3) .xf-line i{transition-delay:.24s}
.xf-body.in .xf-row:nth-child(4) .xf-line i{transition-delay:.36s} .xf-body.in .xf-row:nth-child(5) .xf-line i{transition-delay:.48s}
.xf-proof{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.xf-proof .lg{height:34px; width:auto; padding:6px 10px; border-radius:8px}
.xf-proof .lg img{height:100%; width:auto; max-width:120px}
.xf-proof small{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.4}
@media (prefers-reduced-motion: reduce){ .xf-line i{transform:none; transition:none} .xf-line::after{opacity:1; transition:none} .xf-row::before{transition:none} }
@media (max-width:1100px){ .xf-head, .xf-row{grid-template-columns:minmax(0,1fr) 48px minmax(0,1.2fr) 180px; gap:0 14px} }
@media (max-width:760px){
.xf-head{display:none}
.xf-row{grid-template-columns:minmax(0,1fr); gap:10px; padding:18px 0}
.xf-line{width:2px; height:18px; margin-left:10px; background:var(--line)}
.xf-line i{transform-origin:top; transform:scaleY(0); background:linear-gradient(180deg, var(--line-2), var(--accent))}
.xf-body.in .xf-line i{transform:scaleY(1)}
.xf-line::after{right:auto; left:-2.5px; top:auto; bottom:-3px; margin:0; transform:rotate(135deg)}
.xf-before{font-size:.92rem} .xf-after{font-size:1.05rem}
.xf-proof{flex-direction:row; align-items:center; gap:10px; padding-left:32px}
.xf-proof .lg{height:28px; padding:5px 8px} .xf-proof .lg img{max-width:96px}
}
/* languages: two cards now (Hebrew removed 14 Sep 2026) */
.langbar{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .langbar{grid-template-columns:minmax(0,1fr)} }
/* ---------- What I do: 3D word drum · What can I do with AI: 3D capability orb (14 Sep 2026) ----------
Samuel: the before/after table and the capability cards were text-heavy and templated.
"What I do" is now one sentence whose two words roll on a 3D drum as you scroll
("I turn manual work into work that runs itself"). "What can I do with AI?" is a particle
sphere with the seven capabilities orbiting as nodes; scroll brings one to the front and the
side panel shows it. Both are pinned (sticky) inside a tall track; no motion → static list. */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
#services.wid{padding:0}
.wid-track{position:relative; height:calc(100vh + 4 * 90vh)} /* ~90vh of scroll per pair so one wheel flick can't skip two */
.wid-pin{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden}
.wid-in{width:100%}
.wid-eyebrow{margin:0 0 26px; font-weight:500; font-size:.72rem; letter-spacing:.14em}
.wid-sentence{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,6.4vw,5.6rem); line-height:1.06; letter-spacing:-.045em}
.wid-static{display:block; font-size:.4em; font-weight:500; letter-spacing:-.02em; color:var(--muted); line-height:1.5}
.drum{display:block; position:relative; height:1.3em; overflow:hidden; margin:0 0 .1em} /* each word rolls inside its own row — no overlap with 'I turn' / 'into' mid-turn */
.drum-in{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform}
.face{position:absolute; left:0; right:0; top:0; height:1.3em; line-height:1.3em; white-space:nowrap; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.drum-a .face{color:var(--fg-2); text-decoration:line-through; text-decoration-thickness:.055em; text-decoration-color:color-mix(in srgb, var(--danger) 75%, transparent)}
.drum-b .face{color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.drum-b .face{background:linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
}
.wid-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-top:34px; flex-wrap:wrap}
.wid-sub{margin:0; max-width:46ch; color:var(--fg-2); font-size:1.02rem}
.wid-prog{display:flex; align-items:center; gap:14px}
.wid-prog .mono b{color:var(--fg); font-weight:500}
.wid-bars{display:flex; align-items:center; gap:6px}
.wid-bars i{display:block; width:22px; height:3px; border-radius:2px; background:var(--line-2); transition:background .3s, width .3s}
.wid-bars i.on{width:38px; background:linear-gradient(90deg, var(--accent), var(--accent-2))}
.wid-track.static{height:auto} .wid-track.static .wid-pin{position:static; height:auto; padding:88px 0}
.wid-track.static .wid-sentence, .wid-track.static .wid-prog{display:none}
.wid-track.static .wid-list{position:static!important; width:auto!important; height:auto!important; margin:0!important; clip:auto!important; overflow:visible!important; white-space:normal!important;
list-style:none; padding:0; display:grid; gap:10px; font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:-.02em}
.wid-track.static .wid-list li span:first-child{color:var(--muted); text-decoration:line-through}
#ai.orb{padding-bottom:0}
.orb-track{position:relative; height:calc(100vh + 6 * 48vh)}
.orb-pin{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden}
.orb-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; width:100%}
.orb-stage{position:relative; width:100%; height:min(74vh,680px)}
.orb-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.orb-labels{list-style:none; margin:0; padding:0; position:absolute; inset:0; pointer-events:none}
.orb-labels li{position:absolute; left:0; top:0; will-change:transform, opacity}
.orb-labels button{position:relative; display:block; transform:translate(-50%, calc(-100% - 14px)); pointer-events:auto; cursor:pointer; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
color:var(--fg-2); background:color-mix(in srgb, var(--bg) 72%, transparent); border:1px solid var(--line-2); border-radius:999px; padding:6px 11px; transition:color .2s, border-color .2s, background .2s}
.orb-labels button::after{content:""; position:absolute; inset:-9px}
.orb-labels button:hover{color:var(--fg); border-color:var(--ac)}
.orb-labels li.on button{color:var(--fg); border-color:var(--ac); background:color-mix(in srgb, var(--ac) 16%, var(--bg))}
.orb-labels li.back button{pointer-events:none}
.orb-labels button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.orb-side{position:relative}
.orb-count{font-size:.8rem; margin-bottom:14px} .orb-count b{color:var(--fg); font-weight:500; font-size:1.05rem}
.orb-panel{position:relative; min-height:250px}
.orb-item{position:absolute; left:0; right:0; top:0; opacity:0; transform:translateY(18px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.orb-item.on{opacity:1; transform:none; pointer-events:auto}
.orb-dot{display:block; width:12px; height:12px; border-radius:50%; background:var(--ac); box-shadow:0 0 0 6px color-mix(in srgb, var(--ac) 20%, transparent), 0 0 30px var(--ac); margin-bottom:22px}
.orb-item h3{margin:0 0 12px; font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,4vw,3.6rem); line-height:1; letter-spacing:-.045em; text-wrap:balance}
.orb-item p{margin:0 0 20px; color:var(--fg-2); font-size:1.18rem; line-height:1.45; max-width:30ch}
.orb-chips{display:flex; flex-wrap:wrap; gap:8px}
.orb-chips span{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2); border:1px solid color-mix(in srgb, var(--ac) 45%, var(--line)); background:color-mix(in srgb, var(--ac) 8%, transparent); border-radius:999px; padding:7px 11px}
.orb-bar{display:flex; gap:6px; margin-top:28px}
.orb-bar i{display:block; flex:1; max-width:44px; height:3px; border-radius:2px; background:var(--line-2); transition:background .3s}
.orb-bar i.on{background:var(--accent)}
.orb-track.static{height:auto} .orb-track.static .orb-pin{position:static; height:auto; padding:40px 0 80px}
.orb-track.static .orb-labels, .orb-track.static .orb-count, .orb-track.static .orb-bar{display:none}
.orb-track.static .orb-panel{min-height:0; display:grid; gap:26px} .orb-track.static .orb-item{position:static; opacity:1; transform:none}
.orb-track.static .orb-item h3{font-size:1.7rem} .orb-track.static .orb-stage{height:320px}
@media (max-width:900px){
.orb-pin{align-items:flex-start; padding-top:66px}
.orb-grid{grid-template-columns:minmax(0,1fr); gap:4px}
.orb-stage{height:44vh}
.orb-panel{min-height:200px}
.orb-item h3{font-size:2rem} .orb-item p{font-size:1rem; margin-bottom:14px} .orb-dot{margin-bottom:12px}
.orb-labels button{font-size:.56rem; padding:4px 8px}
.orb-labels li.back{visibility:hidden}
.orb-count{margin-bottom:8px} .orb-bar{margin-top:18px}
}
@media (max-width:760px){
.wid-pin{padding-top:40px}
.wid-sentence{font-size:7vw}
.wid-static{font-size:.56em}
.wid-foot{margin-top:24px; gap:16px} .wid-sub{font-size:.94rem}
}
/* ---------- How I work: isometric operation scene (14 Sep 2026) ----------
The flat SVG diagram is replaced by one canvas scene (six extruded department blocks on an
isometric floor) that eases to a new state per step; labels and captions stay DOM text. */
.stage #isoCanvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.iso-labels{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.iso-l{position:absolute; left:0; top:0; white-space:nowrap; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); opacity:0; will-change:transform, opacity}
.iso-l.dept{color:var(--fg); background:color-mix(in srgb, var(--bg) 72%, transparent); border:1px solid var(--line-2); border-radius:999px; padding:3px 8px}
.iso-l.me{color:var(--ok); font-weight:600; font-size:.72rem; letter-spacing:.14em}
.iso-l.leak{color:var(--danger); background:color-mix(in srgb, var(--danger) 16%, var(--bg)); border:1px solid color-mix(in srgb, var(--danger) 55%, transparent); border-radius:6px; padding:3px 7px; font-weight:600}
.iso-l.cmd{color:var(--fg); background:color-mix(in srgb, var(--violet) 18%, var(--bg)); border:1px solid color-mix(in srgb, var(--violet) 60%, transparent); border-radius:999px; padding:3px 9px}
.iso-l.out{font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:-.01em; text-transform:none; color:var(--fg); background:color-mix(in srgb, var(--bg) 62%, transparent); border:1px solid color-mix(in srgb, var(--accent-2) 55%, transparent); border-radius:10px; padding:6px 11px}
.iso-caps{position:absolute; left:18px; right:18px; bottom:14px; height:22px; pointer-events:none}
.iso-cap{position:absolute; left:0; right:0; bottom:0; margin:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--fg-2); opacity:0; transform:translateY(6px); transition:opacity .5s, transform .5s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stage[data-step="1"] .iso-cap[data-s="1"], .stage[data-step="2"] .iso-cap[data-s="2"], .stage[data-step="3"] .iso-cap[data-s="3"],
.stage[data-step="4"] .iso-cap[data-s="4"], .stage[data-step="5"] .iso-cap[data-s="5"],
.stage[data-step="6"] .iso-cap[data-s="6"]{opacity:1; transform:none}
@media (max-width:900px){
.iso-l{font-size:.5rem; letter-spacing:.06em} .iso-l.dept{padding:2px 6px} .iso-l.me{font-size:.6rem}
.iso-l.out{font-size:.7rem; padding:4px 7px} .iso-cap{font-size:.58rem; white-space:normal} .iso-caps{height:30px; bottom:10px}
}
/* What I do: one short description per pair, crossfading with the drum (14 Sep 2026) */
.wid-desc{display:grid; max-width:54ch}
.wid-d{grid-area:1 / 1; margin:0; color:var(--fg-2); font-size:1.1rem; line-height:1.5; opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease}
.wid-d.on{opacity:1; transform:none; transition:opacity .45s ease .16s, transform .55s cubic-bezier(.2,.7,.2,1) .16s} /* old line leaves fast, new one enters after it: no overlap */
.wid-track.static .wid-desc{display:none}
@media (max-width:760px){ .wid-d{font-size:.96rem} }
/* Capability orb: icon coins instead of dots, and a cloud that reads in the light theme (14 Sep 2026) */
.orb-ico{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; margin-bottom:20px;
background:radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--ac) 45%, #fff), var(--ac) 72%);
box-shadow:0 0 0 6px color-mix(in srgb, var(--ac) 18%, transparent), 0 14px 30px -10px var(--ac), inset 0 -3px 6px rgba(0,0,0,.18)}
.orb-ico svg{width:26px; height:26px; fill:none; stroke:#0B0F16; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:900px){ .orb-ico{width:40px; height:40px; margin-bottom:12px} .orb-ico svg{width:20px; height:20px} }
@media (max-width:900px){ .orb-labels li:not(.on){visibility:hidden} } /* phones: only the active label; the panel below names it anyway */
.way{justify-content:center; min-height:84px} .way b{font-size:1.2rem} /* title-only engagement cards (14 Sep 2026) */
/* ---------- Liquid glass + grain (14 Sep 2026) ----------
Premium pass: buttons, cards and panels become translucent blurred glass with a top specular sheen,
an inner highlight and a 1px rim that catches light (brighter at the corners); a very fine film grain
sits over the page. Per-theme tokens; lighter blur on phones and no glass on the animated timeline cards
there (glass on moving elements flickers on iOS). */
:root{ --lg-bg:rgba(26,36,58,.56); --lg-sheen:rgba(255,255,255,.075); --lg-hi:rgba(255,255,255,.16); --lg-lo:rgba(0,0,0,.34); --lg-rim-a:rgba(255,255,255,.30); --lg-rim-b:rgba(255,255,255,.05); --grain:.045 }
:root[data-theme="light"]{ --lg-bg:rgba(238,241,247,.58); --lg-sheen:rgba(255,255,255,.6); --lg-hi:rgba(255,255,255,.92); --lg-lo:rgba(10,14,22,.12); --lg-rim-a:rgba(255,255,255,1); --lg-rim-b:rgba(255,255,255,.28); --grain:.055 }
:is(.btn:not(.primary), .theme-btn, .lang-btn, .pcard, .feature, .kit .k, .way, .contact-grid a, .lang, .icons div, .press, .cform, .ev .card){ background:linear-gradient(160deg, var(--lg-sheen), transparent 44%), var(--lg-bg) !important;
-webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
border-color:transparent !important; position:relative; isolation:isolate;
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), 0 18px 40px -24px rgba(0,0,0,.7) !important }
:is(.btn:not(.primary), .theme-btn, .lang-btn, .pcard, .feature, .kit .k, .way, .contact-grid a, .lang, .icons div, .press, .cform, .ev .card)::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
background:linear-gradient(145deg, var(--lg-rim-a), var(--lg-rim-b) 36%, var(--lg-rim-b) 64%, var(--lg-rim-a));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
transition:opacity .25s }
:is(.btn:not(.primary), .pcard, .kit .k, .contact-grid a, .theme-btn, .lang-btn):hover::after{ background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent-2) 40%, transparent) 50%, var(--accent)) }
.btn.primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.18), 0 12px 28px -10px var(--accent-glow) }
.btn.btn-icon{ padding:11px 13px; justify-content:center } .btn.btn-icon svg{ width:20px; height:20px; display:block }
body::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:var(--grain);
background-image:url("data:image/svg+xml;utf8,") }
@media (max-width:900px){
:is(.btn:not(.primary), .theme-btn, .lang-btn, .pcard, .feature, .kit .k, .way, .contact-grid a, .lang, .icons div, .press, .cform, .ev .card){ -webkit-backdrop-filter:blur(9px) saturate(1.4); backdrop-filter:blur(9px) saturate(1.4) }
.ev .card{ -webkit-backdrop-filter:none; backdrop-filter:none }
.cta-row .btn.btn-icon{ flex:0 0 auto }
}
/* ---------- perf + fixes (14 Sep 2026) ---------- */
.press{padding:16px 18px; border-radius:14px} /* padding/radius had been left on a dead ".press-old" rule; glass made it visible */
@supports (height:100svh){ .wid-pin, .orb-pin{height:100svh} } /* phones: no jump when the URL bar hides */
.scales{opacity:0; transition:opacity 1.1s ease} .scales.on{opacity:1} /* background scales fade in on load (14 Sep 2026) */
@media (prefers-reduced-motion: reduce){ .scales{transition:none} }
/* ---------- No hard dividers between sections (14 Sep 2026) ----------
Samuel: no divider lines and no hard edges between sections — each should fade into the next.
Section borders are gone; "band" backgrounds fade in and out; the background scales canvases are
masked so they dissolve at their edges (the hero only at the bottom). */
section, .metrics, .trust{border-top:0 !important; border-bottom:0 !important}
section.band{background:linear-gradient(180deg, transparent 0%, var(--bg-2) 16%, var(--bg-2) 72%, transparent 100%) !important}
.scales{-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%)}
.hero .scales{-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%)}
.metrics{background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent) 22%, color-mix(in srgb, var(--surface) 70%, transparent) 78%, transparent) !important; box-shadow:none !important}
/* scales fade is drawn inside the canvas now (14 Sep 2026): no CSS mask on the animated canvas */
.scales, .hero .scales{-webkit-mask-image:none !important; mask-image:none !important}
/* metric-matched fallbacks (14 Sep 2026): while the web fonts load, Arial is resized to the same average width and
vertical metrics, so the swap to Plex / Bricolage does not reflow the hero text (it was the only layout shift) */
/* one face per weight range: with a single regular face each engine synthesised bold differently (Chrome vs Safari
disagreed by ~5%); real Arial Bold makes both engines match. size-adjust calibrated on glyph widths in both engines */
@font-face{font-family:"Plex Fallback"; font-weight:100 500; src:local("Arial"),local("ArialMT"),local("Helvetica"); size-adjust:101.6%; ascent-override:100.9%; descent-override:27.07%; line-gap-override:0%}
/* bold Plex fallback: same ratio, not separately measured (no bold Plex above the fold) */
@font-face{font-family:"Plex Fallback"; font-weight:600 900; src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"); size-adjust:101.6%; ascent-override:100.9%; descent-override:27.07%; line-gap-override:0%}
@font-face{font-family:"Bricolage Fallback"; font-weight:100 500; src:local("Arial"),local("ArialMT"),local("Helvetica"); size-adjust:93.5%; ascent-override:99.47%; descent-override:28.88%; line-gap-override:0%}
@font-face{font-family:"Bricolage Fallback"; font-weight:600 900; src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"); size-adjust:98%; ascent-override:94.9%; descent-override:27.55%; line-gap-override:0%}
/* What I do (14 Sep 2026): the description is the part people read, so it sits beside the sentence on wide screens,
larger and in full-contrast text, with an accent rule; on phones it stays below, also larger */
.wid-d{border-left:2px solid var(--accent); border-image:linear-gradient(180deg, var(--accent), var(--accent-2)) 1; padding-left:18px}
.wid-d{color:var(--fg); font-size:1.18rem; line-height:1.45}
@media (min-width:1000px){
.wid-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,31ch); column-gap:64px; align-items:center}
.wid-eyebrow{grid-column:1 / -1}
.wid-sentence{grid-column:1; font-size:clamp(2.2rem,4.1vw,3.8rem)} /* capped so the longest ES word ('una sola fuente de verdad') fits the column at 1920 */
.wid-foot{grid-column:2; flex-direction:column; align-items:flex-start; justify-content:center; margin-top:0; gap:30px}
.wid-desc{max-width:31ch}
.wid-d{font-size:clamp(1.2rem,1.5vw,1.45rem); line-height:1.42}
}
@media (max-width:760px){ .wid-d{font-size:1.04rem; padding-left:14px} }
/* AI panel (14 Sep 2026): items stack in one grid cell instead of being absolutely positioned, so the panel is as tall
as its tallest item and the progress bar can never sit on top of chips that wrapped to a second line */
.orb-track:not(.static) .orb-panel{display:grid; min-height:0}
.orb-track:not(.static) .orb-item{position:relative; grid-area:1 / 1}
/* ---------- Liquid glass, high-quality pass (14 Sep 2026) ----------
Inside the glass: a soft top-left bloom and a faint violet caustic at the bottom edge; a stronger backdrop on desktop
(more blur, saturation and a touch of brightness, like real glass lifting what is behind it); a finer two-layer
shadow; a gentle 2px lift on hover for the clickable cards. Moving elements (iso/orb labels) stay without backdrop. */
:root{ --lg-bloom:rgba(140,170,255,.10); --lg-caustic:rgba(155,123,255,.07) }
:root[data-theme="light"]{ --lg-bloom:rgba(255,255,255,.75); --lg-caustic:rgba(106,59,214,.05) }
:is(.btn:not(.primary), .theme-btn, .lang-btn, .pcard, .feature, .kit .k, .way, .contact-grid a, .lang, .icons div, .press, .cform, .ev .card){
background:radial-gradient(120% 70% at 12% 0%, var(--lg-bloom), transparent 62%), linear-gradient(160deg, var(--lg-sheen), transparent 44%), linear-gradient(0deg, var(--lg-caustic), transparent 38%), var(--lg-bg) !important;
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), 0 1px 2px rgba(0,0,0,.18), 0 22px 46px -26px rgba(0,0,0,.72) !important }
:root[data-theme="light"] :is(.pcard, .feature, .kit .k, .way, .contact-grid a, .press, .cform, .ev .card){
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), 0 1px 2px rgba(10,14,22,.06), 0 22px 46px -28px rgba(10,14,22,.28) !important }
@media (min-width:901px){
:is(.btn:not(.primary), .theme-btn, .lang-btn, .pcard, .feature, .kit .k, .way, .contact-grid a, .lang, .icons div, .press, .cform, .ev .card){
-webkit-backdrop-filter:blur(16px) saturate(1.7); backdrop-filter:blur(16px) saturate(1.7) } } /* 16px looks the same on these cards and costs far less while scrolling */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
:is(.pcard, .kit .k, .contact-grid a, .way){ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s }
:is(.pcard, .kit .k, .contact-grid a, .way):hover{ transform:translateY(-2px) } }
.orb-chips span{ -webkit-backdrop-filter:blur(10px) saturate(1.5); backdrop-filter:blur(10px) saturate(1.5); box-shadow:inset 0 1px 0 var(--lg-hi) }
.tl .spine b{ transition:opacity .35s ease } /* the timeline dot fades in/out at the ends instead of popping */
/* the floating nav pill gets the same glass (it is sticky, not animated, so the backdrop is cheap) */
.bar .pill{ background:radial-gradient(120% 90% at 10% 0%, var(--lg-bloom), transparent 60%), linear-gradient(160deg, var(--lg-sheen), transparent 50%), var(--lg-bg);
border-color:transparent; -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), inset 0 0 0 1px color-mix(in srgb, var(--lg-rim-a) 35%, transparent), 0 1px 2px rgba(0,0,0,.16), 0 20px 44px -24px rgba(0,0,0,.7) }
:root[data-theme="light"] .bar .pill{ box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 2px rgba(10,14,22,.06), 0 20px 44px -26px rgba(10,14,22,.3) }
/* light theme contrast for the visualizations (14 Sep 2026): on the grey ground the translucent grey pills and
labels washed out, so they become white pills with near-black text */
:root[data-theme="light"] .iso-l.dept{ color:#0A0E16; background:rgba(255,255,255,.9); border-color:rgba(10,14,22,.14); box-shadow:0 3px 10px -5px rgba(10,14,22,.3) }
:root[data-theme="light"] .iso-l.leak{ background:#fff; border-color:color-mix(in srgb, var(--danger) 60%, transparent) }
:root[data-theme="light"] .iso-l.cmd, :root[data-theme="light"] .iso-l.out{ background:rgba(255,255,255,.9) }
:root[data-theme="light"] .orb-labels button{ color:#1B2233; background:rgba(255,255,255,.86); border-color:rgba(10,14,22,.16); box-shadow:0 3px 10px -6px rgba(10,14,22,.3) }
:root[data-theme="light"] .orb-labels li.on button{ color:#0A0E16; background:#fff }
/* image skeletons (14 Sep 2026): shimmer on the frame of an image that is still loading, then a soft fade-in */
:root{ --sk-hi:rgba(255,255,255,.07) } :root[data-theme="light"]{ --sk-hi:rgba(255,255,255,.65) }
.sk{ background-image:linear-gradient(100deg, transparent 25%, var(--sk-hi) 50%, transparent 75%) !important; background-size:250% 100% !important; background-repeat:no-repeat !important; animation:sk-shine 1.35s ease-in-out infinite }
@keyframes sk-shine{ from{ background-position:130% 0 } to{ background-position:-130% 0 } }
.sk-img{ opacity:0; transition:opacity .5s ease } .sk-img.sk-in{ opacity:1 }
@media (prefers-reduced-motion: reduce){ .sk{ animation:none } .sk-img{ transition:none } }
/* language button: a small flag of the language it switches to (14 Sep 2026) */
.lang-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px }
.flag{ display:inline-block; width:16px; height:11px; border-radius:2px; flex:none; vertical-align:-1px; background-size:100% 100%; box-shadow:0 0 0 1px rgba(10,14,22,.18) }
#langBtn .flag{ margin-right:6px } .lang-btn .flag{ margin-right:0 }
.flag-es{ background-image:url("data:image/svg+xml;utf8,") }
.flag-gb{ background-image:url("data:image/svg+xml;utf8,") }
/* theme button: moon on dark, sun on light, crossfading with a small turn */
.theme-btn svg{ grid-area:1 / 1; transition:opacity .3s ease, transform .5s cubic-bezier(.2,.7,.2,1) }
.theme-btn .i-sun{ opacity:0; transform:rotate(-90deg) scale(.6) }
:root[data-theme="light"] .theme-btn .i-sun{ opacity:1; transform:none }
:root[data-theme="light"] .theme-btn .i-moon{ opacity:0; transform:rotate(90deg) scale(.6) }
@media (prefers-reduced-motion: reduce){ .theme-btn svg{ transition:none } }
/* timeline dot (14 Sep 2026): position:sticky keeps it on the focus line (55% of the viewport) on the browser's own
scroll, so it can't lag and jump like a JS-positioned dot did on phones; the lit bar is a line hanging from the dot,
clipped at the top of the spine. Only when overflow:clip is supported (JS adds .tl-sticky), else the JS dot stays. */
.tl.tl-sticky .spine{ overflow-x:visible; overflow-y:clip }
.tl.tl-sticky .spine i{ display:none }
.tl.tl-sticky .spine b{ position:sticky; top:calc(55vh - 8px); display:block; left:auto; margin:0 0 0 -7px; transform:none !important; will-change:auto }
.tl.tl-sticky .spine b::before{ content:""; position:absolute; left:7px; bottom:8px; width:2px; height:400vh; background:var(--accent); pointer-events:none }
/* nav fit (14 Sep 2026): with the flag and the longer Spanish labels the links overflowed the 1100px pill by 28px
("Herramientas" got cut); the pill may grow a little, links are slightly tighter, the language button narrower */
.bar .pill{ max-width:1180px }
.nav{ gap:2px } .nav a{ padding:8px 11px }
.lang-btn{ padding:0 10px; gap:6px; letter-spacing:.07em }
@media (min-width:901px) and (max-width:1240px){
.nav a{ padding:7px 8px; font-size:.85rem }
.bar .pill{ gap:10px; padding-left:14px }
}
@media (min-width:901px) and (max-width:1240px){ .brand span.full{ display:none } } /* mid widths: drop the second surname in the nav, the links need the room */
@media (min-width:901px) and (max-width:1023px){ .nav{ display:none } } /* 901-1023: the six links do not fit one row (ES needed 70px more); same as 761-900, where the nav is already hidden */
/* background scale wave (14 Sep 2026): fixed canvas behind all content (html has no background, so body's paints the
page ground and this sits right above it); coloured band sections cover it on purpose, so it shows where the page is plain */
.bgwave{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0; transition:opacity .6s ease }
.bgwave.on{ opacity:1 }
/* AI section (14 Sep 2026): the heading lives inside the pinned view, above the orb, so it stays on screen while you
scroll through the seven capabilities instead of scrolling away before the orb appears */
.orb-pin{ flex-direction:column; justify-content:center; align-items:stretch }
.orb-head{ width:100%; flex:none } .orb-head .sec-head{ margin-bottom:6px }
.orb-track:not(.static) .orb-stage{ height:min(62vh,600px) }
@media (max-width:900px){ .orb-pin{ justify-content:flex-start; align-items:stretch; padding-top:62px } .orb-head .sec-head{ margin-bottom:2px } .orb-track:not(.static) .orb-stage{ height:38vh } }
/* timeline cards settle in with a soft spring instead of a flat slide */
.ev .card{ transform:translateX(18px) scale(.985); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.34,1.45,.64,1), border-color .4s }
/* animated strike-through on the "before" words (14 Sep 2026): the line is drawn left to right when the word lands */
.drum-a .face{ text-decoration:none }
.drum-a .fw{ position:relative; display:inline-block }
.drum-a .fw::after{ content:""; position:absolute; left:-.02em; right:-.02em; top:54%; height:.06em; border-radius:1em; background:color-mix(in srgb, var(--danger) 80%, transparent);
transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.65,0,.35,1) .15s }
.drum-a .face.struck .fw::after{ transform:scaleX(1) }
@media (prefers-reduced-motion: reduce){ .drum-a .fw::after{ transform:scaleX(1); transition:none } }
/* timeline end (14 Sep 2026): the spine fades out over its last stretch instead of stopping dead, the dot fades with
it when it arrives there, and a quiet "to be continued…" closes the story */
.tl .spine{ -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 170px), transparent 100%); mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 170px), transparent 100%) }
.tl-more{ list-style:none; display:flex; align-items:center; gap:5px; padding:34px 0 64px 180px; color:var(--muted); opacity:.75 }
.tl-more .mono{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase }
.tl-more i{ display:block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.2; animation:tl-dots 1.6s ease-in-out infinite }
.tl-more i:nth-of-type(2){ animation-delay:.2s } .tl-more i:nth-of-type(3){ animation-delay:.4s }
@keyframes tl-dots{ 0%,100%{ opacity:.2 } 40%{ opacity:1 } }
@media (max-width:900px){ .tl-more{ padding-left:34px } }
@media (prefers-reduced-motion: reduce){ .tl-more i{ animation:none; opacity:.6 } }
.hap-sw{ position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden } /* hidden switch used for iPhone haptics */
/* engagement "ways" as compact pills (14 Sep 2026): the title-only cards were big empty boxes */
.ways{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px }
.way{ flex-direction:row; align-items:center; gap:10px; min-height:0; padding:11px 16px 11px 12px; border-radius:999px; width:auto }
.way svg{ width:18px; height:18px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.way b{ font-size:.98rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap }
@media (max-width:760px){ .way{ padding:10px 14px 10px 11px } .way b{ font-size:.92rem } }
/* timeline spine (14 Sep 2026): the lit line was 2px with no glow and got lost on the light ground */
.tl.tl-sticky .spine b::before{ width:3px; left:6.5px; background:linear-gradient(180deg, var(--accent-2), var(--accent) 30%, var(--accent)); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent) }
:root[data-theme="light"] .tl .spine{ background:rgba(10,14,22,.16) }
:root[data-theme="light"] .tl .spine b{ box-shadow:0 0 0 6px var(--accent-soft), 0 0 22px var(--accent) }
/* timeline year captions (14 Sep 2026): were .66rem muted and hard to read */
.year em{ font-size:.82rem; letter-spacing:.08em; color:var(--fg-2) }
@media (max-width:900px){ .year em{ font-size:.72rem } }
/* primary CTA (14 Sep 2026): bolder label, it read thin on the blue */
.btn.primary{ font-weight:700; letter-spacing:.12em }
/* logo carousel keeps moving on hover (15 Sep 2026, Samuel) */
.marquee:hover .track{ animation-play-state:running }
/* bare logos (15 Sep 2026): no white chips around the "Builds with" tools or the contact icons — just the mark */
.tools-row .lg{ background:none !important; border:0 !important; box-shadow:none !important; padding:0; width:30px; height:30px; border-radius:6px; overflow:hidden }
.tools-row .lg img{ width:100%; height:100%; object-fit:contain }
.tools-row .lg.wide{ width:auto; height:22px; padding:0; border-radius:4px } .tools-row .lg.wide img{ height:100%; width:auto; max-width:140px }
.tools-row .lg::after{ display:none }
.contact-grid .ico{ background:none !important; box-shadow:none !important; border:0; width:32px; height:32px }
.contact-grid .ico svg{ width:28px; height:28px }
.contact-grid .ico.pdf{ background:none !important } .contact-grid .ico.pdf svg{ stroke:var(--danger) }
/* liquid glass, more transparent (15 Sep 2026, "más Apple"): thinner fill, the blur does the work */
:root{ --lg-bg:rgba(26,36,58,.34) }
:root[data-theme="light"]{ --lg-bg:rgba(240,243,248,.38) }
/* glass sheen (15 Sep 2026): angle-dependent blue-white highlight on every glass surface + a soft spot under the pointer */
:root{ --sh-a:rgba(150,180,255,.16); --sh-b:rgba(155,123,255,.07); --sh-spot:rgba(170,195,255,.16) }
:root[data-theme="light"]{ --sh-a:rgba(255,255,255,.62); --sh-b:rgba(120,150,255,.16); --sh-spot:rgba(255,255,255,.55) }
:is(.btn:not(.primary), .theme-btn, .lang-btn, .pcard, .feature, .kit .k, .way, .contact-grid a, .lang, .icons div, .press, .cform, .chip, .bar .pill){ position:relative; isolation:isolate }
:is(.btn:not(.primary), .theme-btn, .lang-btn, .pcard, .feature, .kit .k, .way, .contact-grid a, .lang, .icons div, .press, .cform, .chip, .bar .pill)::before{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
background:linear-gradient(var(--ga,135deg), var(--sh-a), transparent 42%, var(--sh-b) 100%), radial-gradient(140px 110px at var(--mx,50%) var(--my,-40%), var(--sh-spot), transparent 70%);
transition:opacity .3s }
.chip{ overflow:hidden }
@media (hover:hover){ :is(.pcard, .kit .k, .way, .contact-grid a, .btn:not(.primary), .icons div):hover::before{ opacity:1 } }
/* photo galleries in timeline cards + lightbox (15 Sep 2026) */
.gal{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap }
.gal a{ display:block; width:112px; height:84px; border-radius:10px; overflow:hidden; border:1px solid var(--line-2); background:var(--surface-2); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s }
.gal a img{ width:100%; height:100%; object-fit:cover; display:block }
.gal a:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 28px -14px rgba(0,0,0,.6) }
.gal a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (max-width:760px){ .gal a{ width:88px; height:66px } }
.lb{ position:fixed; inset:0; z-index:70; background:rgba(4,6,10,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:56px 64px 64px }
.lb[hidden]{ display:none }
.lb img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); animation:lb-in .35s cubic-bezier(.2,.7,.2,1) }
@keyframes lb-in{ from{ opacity:0; transform:scale(.97) } to{ opacity:1; transform:none } }
.lb button{ position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:50%; width:44px; height:44px; font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.lb button:hover{ background:rgba(255,255,255,.16) }
.lb-x{ top:16px; right:16px } .lb-p{ left:14px; top:50%; transform:translateY(-50%) } .lb-n{ right:14px; top:50%; transform:translateY(-50%) }
.lb-cap{ position:absolute; left:16px; right:16px; bottom:18px; margin:0; text-align:center; color:rgba(255,255,255,.75); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase }
@media (max-width:760px){ .lb{ padding:56px 12px 60px } .lb-p, .lb-n{ display:none } }
/* keep the photos discreet: small, slightly faded until hover (Samuel: nice-to-have, not a focus) */
.gal{ gap:6px; margin-top:12px } .gal a{ width:72px; height:54px; border-radius:8px; opacity:.82 } .gal a:hover{ opacity:1 }
@media (max-width:760px){ .gal a{ width:60px; height:45px } }
/* ---------- testimonials (15 Sep 2026) ---------- */
.quotes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.quote{ margin:0; position:relative; isolation:isolate; border-radius:16px; padding:22px 24px 20px 26px; display:flex; flex-direction:column; gap:14px;
background:radial-gradient(120% 70% at 12% 0%, var(--lg-bloom), transparent 62%), linear-gradient(160deg, var(--lg-sheen), transparent 44%), var(--lg-bg);
-webkit-backdrop-filter:blur(16px) saturate(1.7); backdrop-filter:blur(16px) saturate(1.7);
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), 0 1px 2px rgba(0,0,0,.14), 0 22px 46px -26px rgba(0,0,0,.6) }
.quote::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(145deg, var(--lg-rim-a), var(--lg-rim-b) 36%, var(--lg-rim-b) 64%, var(--lg-rim-a));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) }
.quote::before{ content:"\201C"; position:absolute; left:18px; top:6px; font-family:var(--display); font-weight:700; font-size:3.4rem; line-height:1; color:var(--accent); opacity:.28; pointer-events:none }
.quote blockquote{ margin:0; padding-top:6px } .quote blockquote p{ margin:0; font-family:var(--display); font-weight:500; font-size:1.12rem; line-height:1.4; letter-spacing:-.012em; color:var(--fg); text-wrap:pretty }
.quote figcaption{ margin-top:auto; display:flex; flex-direction:column; gap:2px } .quote figcaption b{ font-size:.86rem; font-weight:600 } .quote figcaption span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.quote:first-child blockquote p{ font-size:1.28rem }
@media (max-width:760px){ .quotes{ grid-template-columns:1fr; gap:10px } .quote{ padding:18px 18px 16px 20px } .quote blockquote p, .quote:first-child blockquote p{ font-size:1.02rem } }
/* ---------- certifications (15 Sep 2026) ---------- */
.cred-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px }
.cred{ position:relative; isolation:isolate; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
background:radial-gradient(120% 70% at 12% 0%, var(--lg-bloom), transparent 62%), linear-gradient(160deg, var(--lg-sheen), transparent 44%), var(--lg-bg);
-webkit-backdrop-filter:blur(16px) saturate(1.7); backdrop-filter:blur(16px) saturate(1.7);
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), 0 1px 2px rgba(0,0,0,.14), 0 22px 46px -26px rgba(0,0,0,.6) }
.cred::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(145deg, var(--lg-rim-a), var(--lg-rim-b) 36%, var(--lg-rim-b) 64%, var(--lg-rim-a));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) }
.cred .lg{ width:44px; height:44px; padding:6px; flex:none } .cred .duo{ display:flex; align-items:center; gap:4px; flex:none } .cred .duo .lg{ width:38px; height:38px } .cred .plus{ color:var(--muted); font-size:.8rem }
.cred > div{ min-width:0; flex:1 } .cred b{ display:block; font-family:var(--display); font-weight:600; font-size:.98rem; letter-spacing:-.01em }
.cred span:not(.lg):not(.plus):not(.duo){ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:4px; line-height:1.5 }
.cred a{ flex:none; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-decoration:none; white-space:nowrap; padding:6px 9px; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:999px }
.cred a:hover{ background:var(--accent-soft) }
@media (max-width:760px){ .cred{ flex-wrap:wrap } .cred a{ margin-left:58px } }
/* testimonials, slimmer (15 Sep 2026) */
.quotes{ gap:10px }
.quote{ padding:14px 16px 13px 18px; gap:10px; border-radius:12px }
.quote::before{ font-size:2.4rem; left:12px; top:4px }
.quote blockquote{ padding-top:4px } .quote blockquote p{ font-size:.98rem; line-height:1.38 } .quote:first-child blockquote p{ font-size:1.06rem }
.quote figcaption b{ font-size:.8rem } .quote figcaption span{ font-size:.56rem }
@media (max-width:760px){ .quote{ padding:13px 14px 12px 16px } .quote blockquote p, .quote:first-child blockquote p{ font-size:.94rem } }
/* BitPulse card note under the live button (15 Sep 2026) */
.go-note{ display:block; margin-top:8px; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.5 }
/* contact intro paragraph: it got lost on the textured ground (15 Sep 2026) */
.contact > .wrap > p.rv, .contact p.rv{ color:var(--fg-2); font-weight:400; font-size:1.06rem; line-height:1.6 }
/* 23 Sep 2026: this was weight 500 in the darkest --fg, while every other body paragraph on the page is
400 in --fg-2. IBM Plex Sans at Medium reads as a different typeface next to Regular, which is exactly
what Samuel saw: "se siente out of place, out of font". Back in the page's voice; still a lead size. */
/* chill hero entrance (15 Sep 2026): the elements rise in, staggered, while the scale field's entrance band sweeps
across; transform/opacity only (no layout shift); disabled with reduced motion */
@media (prefers-reduced-motion: no-preference){
.hero .wrap > div > *, .hero .photo-3d{ animation:hero-in .7s cubic-bezier(.2,.7,.2,1) both }
.hero .photo-3d{ animation-delay:.05s } .hero .eyebrow{ animation-delay:.12s } .hero h1{ animation-delay:.2s } .hero .who{ animation-delay:.28s }
.hero .tag{ animation-delay:.34s } .hero .lede{ animation-delay:.4s } .hero .cta-row{ animation-delay:.48s } .hero .tools-row{ animation-delay:.56s }
@keyframes hero-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
}
/* the MeshCode wordmark is white/green pixels: it needs its dark plate in both themes (15 Sep 2026) */
.tools-row .lg.wide{ background:#0B0F16 !important; padding:4px 8px; height:26px; border-radius:6px }
/* whole product card is clickable (15 Sep 2026, v2): the card's own "Visit" link is stretched over the card with a
pseudo-element, so there is exactly one navigation (no JS, no window.open); other links/buttons inside sit above it */
.pcard{ position:relative }
.pcard a.go::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1 } /* above the card's positioned children, so the whole card really navigates */
.pcard a:not(.go), .pcard button, .pcard .shot a{ position:relative; z-index:2 }
.pcard:has(a.go){ cursor:pointer }
.pcard:has(a.go):hover .go{ text-decoration:underline; text-underline-offset:3px }
/* certification rows in the timeline: thin, slick, visibly different from work/education cards (15 Sep 2026) */
.ev.cert{ padding-bottom:14px }
.ev.cert .card{ padding:10px 14px 10px 14px; border-radius:10px; gap:12px; align-items:center; border-left-width:2px;
background:linear-gradient(90deg, color-mix(in srgb, var(--ok) 10%, transparent), transparent 60%), color-mix(in srgb, var(--lg-bg) 55%, transparent) !important;
box-shadow:inset 0 1px 0 var(--lg-hi) !important }
.ev.cert .card .lg{ width:34px; height:34px; padding:4px; border-radius:8px }
.ev.cert .card h3{ font-size:.95rem; margin:0 } .ev.cert .card .org{ font-size:.76rem; margin-top:2px } .ev.cert .card .kind{ display:inline-block; font-size:.52rem; padding:2px 7px; margin-bottom:4px; align-self:flex-start }
.ev.cert .card .chips{ margin-top:6px } .ev.cert .card .chip{ padding:3px 7px; font-size:.56rem }
.ev.cert .card > div{ display:flex; flex-direction:column }
/* BitPulse icon: point globe canvas inside the logo slot (15 Sep 2026) */
.pcard .lg.globe{ padding:2px; background:var(--chip) }
.globe-cv{ width:44px; height:44px; display:block }
/* MeshCode featured card: the measured facts row uses the same styling as the product cards (15 Sep 2026) */
.feature .fact{ display:flex; gap:26px; flex-wrap:wrap; margin:16px 0 14px; padding-top:12px; border-top:1px solid var(--line) }
.feature .fact div{ display:flex; flex-direction:column }
.feature .fact b{ font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.feature .fact span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px }
/* MeshCode heading with its green ">…" mark (15 Sep 2026) */
.feature h3.with-ico{ display:flex; align-items:center; gap:14px }
.feature h3 .mesh-ico{ width:52px; height:52px; padding:6px; border-radius:12px; flex:none; background:#0B0F16 }
.feature h3 .mesh-ico img{ width:100%; height:100%; object-fit:contain; display:block }
@media (max-width:760px){ .feature h3 .mesh-ico{ width:40px; height:40px; padding:5px; border-radius:10px } .feature h3.with-ico{ gap:10px } }
/* "Scroll" hint on the scroll-driven screens (15 Sep 2026): shown while inside the section, hidden near its end */
.scroll-hint{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--accent); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:3 }
.scroll-hint i{ display:block; width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); animation:hint-bob 1.5s ease-in-out infinite }
.hint-on > .scroll-hint{ opacity:.9 }
.stage .scroll-hint{ left:auto; right:18px; bottom:12px; transform:none }
@keyframes hint-bob{ 0%,100%{ transform:translateY(0) rotate(45deg); opacity:.55 } 50%{ transform:translateY(5px) rotate(45deg); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .scroll-hint i{ animation:none } }
@media (max-width:760px){ .scroll-hint{ bottom:10px; font-size:.54rem } .stage .scroll-hint{ right:12px } }
/* ---------- Just for fun: fruit-fly brain card + walking fly (15 Sep 2026) ---------- */
#products{ position:relative; overflow-x:clip } /* the fly canvas can poke past the card; clip sideways without creating a scroll container */
.fun{ margin-top:18px; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:34px; align-items:center; border-radius:22px; padding:30px 32px; overflow:hidden;
background:radial-gradient(120% 70% at 12% 0%, var(--lg-bloom), transparent 62%), linear-gradient(160deg, var(--lg-sheen), transparent 44%), var(--lg-bg);
-webkit-backdrop-filter:blur(16px) saturate(1.7); backdrop-filter:blur(16px) saturate(1.7);
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), 0 1px 2px rgba(0,0,0,.14), 0 22px 46px -26px rgba(0,0,0,.6) }
.fun::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(145deg, var(--lg-rim-a), var(--lg-rim-b) 36%, var(--lg-rim-b) 64%, var(--lg-rim-a));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) }
.fun-eyebrow{ display:inline-block; color:var(--accent-2); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; border:1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); border-radius:999px; padding:4px 10px; margin-bottom:16px }
.fun h3{ margin:0 0 14px; font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,2.8vw,2.3rem); letter-spacing:-.035em; line-height:1.05 } .fun h3 em{ font-style:normal; background:linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.fun p{ margin:0 0 12px; color:var(--fg-2); font-size:1rem; line-height:1.5; max-width:56ch }
.fun .fact{ display:flex; gap:26px; flex-wrap:wrap; margin:16px 0 12px; padding-top:12px; border-top:1px solid var(--line) } .fun .fact div{ display:flex; flex-direction:column }
.fun .fact b{ font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums } .fun .fact span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px }
.fun-src{ display:block; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.fun-brain{ position:relative; min-height:480px; border-radius:16px; overflow:hidden; background:radial-gradient(80% 60% at 50% 45%, #141c3c, #070a14); box-shadow:inset 0 0 0 1px rgba(140,170,255,.18), inset 0 0 80px rgba(60,90,200,.18) }
.brain-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s ease } .brain-cv.on{ opacity:1 }
/* legend: one pill per neuron class, grouped by which way the class carries signal. Real buttons, so the classes are
indexed, translated by the text walker and reachable with the keyboard; the canvas picking is the pointer shortcut. */
.brain-key{ position:absolute; left:14px; right:14px; top:12px; display:flex; flex-direction:column; gap:5px; pointer-events:none; z-index:2 }
/* the flow label sits out of the flex flow, so a pill that wraps still lines up under the first one */
.bk-row{ position:relative; padding-left:40px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 5px; min-height:17px }
.bk-h{ position:absolute; left:0; top:4px; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(150,166,205,.7) }
.bk{ pointer-events:auto; display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; border:1px solid rgba(140,170,255,.2); background:rgba(9,14,32,.5); color:rgba(222,230,255,.86); font-family:inherit; font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease }
.bk i{ width:7px; height:7px; border-radius:2px; flex:none }
.bk b{ font-weight:600; color:rgba(150,166,205,.8); font-variant-numeric:tabular-nums }
.bk:hover, .bk:focus-visible{ background:rgba(22,32,70,.86); border-color:rgba(150,180,255,.45) }
.bk.on{ background:rgba(34,50,104,.94); border-color:rgba(165,195,255,.62); color:#fff } .bk.on b{ color:rgba(210,224,255,.9) }
.brain-foot{ position:absolute; left:14px; right:14px; bottom:12px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; pointer-events:none; z-index:2 }
.brain-go{ pointer-events:auto; padding:6px 12px; border-radius:999px; border:1px solid rgba(150,180,255,.34); background:rgba(14,22,52,.72); color:rgba(226,234,255,.92); font-family:inherit; font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s ease, border-color .2s ease }
.brain-go:hover, .brain-go:focus-visible{ background:rgba(40,60,124,.9); border-color:rgba(175,200,255,.66) }
.brain-read{ font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(196,210,246,.86); min-height:1em }
.fun-cap{ font-size:.54rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.5 }
.fun-brain.brain-ready .brain-cv{ cursor:crosshair }
/* Vivario view: the recording of the real simulation, in the same panel as the clouds. `cover` because the
panel is taller than the 3:2 frame and the tracking camera keeps the fly centred, so the crop is at the edges. */
.brain-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .5s ease; pointer-events:none; background:#070a14 }
.fun-brain.is-viv .brain-vid{ opacity:1 }
.fun-brain.is-viv .brain-cv, .fun-brain.is-viv .brain-cv.on{ opacity:0 }
.fun-brain.is-viv .brain-go, .fun-brain.is-viv .brain-read{ display:none } /* both talk about the point cloud, not about this */
@media (prefers-reduced-motion: reduce){ .brain-go{ display:none } }
.fly-cv{ position:absolute; left:0; top:0; width:240px; height:240px; pointer-events:none; z-index:5; will-change:transform; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)) }
@media (max-width:900px){ .fun{ grid-template-columns:1fr; gap:22px; padding:22px 20px } .fun-brain{ min-height:480px } .fun p{ font-size:.95rem } }
/* phones: the counts go, the pills tighten — the legend must not eat the cloud */
@media (max-width:620px){ .bk b{ display:none } .bk{ padding:2px 6px; gap:4px; font-size:.46rem; letter-spacing:.04em } .bk i{ width:6px; height:6px }
.bk-row{ padding-left:32px; gap:3px 4px; min-height:15px } .bk-h{ font-size:.45rem; letter-spacing:.1em; top:3px } .brain-key{ gap:3px; left:11px; right:11px }
.brain-foot{ left:11px; right:11px; gap:6px } .brain-go{ padding:5px 10px; font-size:.5rem } .brain-read, .fun-cap{ font-size:.5rem } }
/* ---------- Worked-with logos: bare, B&W at rest, true colours on hover (15 Sep 2026) ---------- */
.trust .lg{ background:transparent; border-color:transparent; box-shadow:none; border-radius:12px; transition:background .35s ease, box-shadow .35s ease } .trust .lg::before,.trust .lg::after{ display:none }
.trust .lg img{ filter:grayscale(1) opacity(.72); transition:filter .35s ease }
:root[data-theme="dark"] .trust .lg img{ filter:grayscale(1) invert(1) brightness(1.15) opacity(.74) }
.trust .lg:hover img, :root[data-theme="dark"] .trust .lg:hover img{ filter:none }
:root[data-theme="dark"] .trust .lg:hover{ background:rgba(255,255,255,.94); box-shadow:0 10px 26px -12px rgba(0,0,0,.55) }
.trust .lg.wm i{ color:var(--fg); opacity:.78; transition:color .35s ease, opacity .35s ease } .trust .lg.wm:hover i{ opacity:1 } :root[data-theme="dark"] .trust .lg.wm:hover i{ color:#0C1018 }
.fun-gal{ margin:14px 0 12px } .fun-gal a{ width:96px; height:64px } @media (max-width:760px){ .fun-gal a{ width:80px; height:54px } }
.fun-hint{ display:block; margin-top:8px; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); opacity:.85 }
/* ---------- theme toggle: the new theme is revealed as a soft disc growing from the centre (View Transitions; browsers without it switch instantly) ---------- */
html.theme-vt::view-transition-old(root){ animation:none; mix-blend-mode:normal; z-index:0 }
html.theme-vt::view-transition-new(root){ animation:vt-reveal .95s cubic-bezier(.3,.7,.2,1) both; mix-blend-mode:normal; z-index:1 }
@keyframes vt-reveal{ from{ clip-path:circle(0% at 50% 50%) } to{ clip-path:circle(75% at 50% 50%) } }
@media (prefers-reduced-motion: reduce){ html.theme-vt::view-transition-new(root){ animation:none } }
.fun-brain, .fun-brain .brain-key{ color:rgba(222,230,255,.86) } .fun-brain .fun-cap{ color:rgba(170,184,220,.66) } /* the panel is dark in both themes */
/* press logos keep their colour and their plate (only the carousel goes B&W) */
.trust .press .lg{ background:var(--chip); border-color:var(--line-2) } .trust .press .lg img, :root[data-theme="dark"] .trust .press .lg img{ filter:none }
/* language switch: a short crossfade instead of a hard swap */
html.lang-vt::view-transition-old(root), html.lang-vt::view-transition-new(root){ animation-duration:.24s; animation-timing-function:ease }
/* ---------- sand fields behind the What-I-do description and the AI panel (17 Sep 2026) ---------- */
.wid-desc{ position:relative } .wid-desc > .wid-d{ position:relative; z-index:1 }
/* phones: the field is IN FLOW between the sentence and the copy (same order as desktop), never over the text */
.sand-cv{ display:block; margin:0 auto 16px; width:min(210px,58vw); height:min(210px,58vw); pointer-events:none }
@media (max-width:999px){ .wid-desc > .wid-d{ grid-area:2 / 1 } .sand-cv{ grid-area:1 / 1 } }
@media (min-width:1000px){ .sand-cv{ position:absolute; margin:0; width:300px; height:300px } }
/* wide screens: the sand gets its own column beside the description / the panel, so sentence, copy and field are all readable */
@media (min-width:1200px){
/* sentence | description | sand field: the sentence keeps the widest track and a type size that never clips the drum's longest word */
.wid-in{ grid-template-columns:minmax(0,1.25fr) 300px minmax(220px,27ch); column-gap:36px }
.wid-sentence{ font-size:clamp(1.7rem,2.45vw,3.2rem) }
.wid-foot{ grid-column:3 }
.wid-desc .sand-cv{ left:auto; right:calc(100% + 36px); top:50%; width:300px; height:300px; transform:translate(0,-50%) } /* sentence | sand | description */
}
/* ---------- MeshCode crew canvas (17 Sep 2026): replaces .critters ---------- */
.crew{ position:relative; width:100%; height:100%; min-height:320px; max-height:560px; overflow:visible } /* no frame: the scene fills the card's column */
.crew canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
@media (max-width:900px){ .crew{ height:300px; min-height:0 } }
/* ---------- section rail (17 Sep 2026): replaces the top progress line ---------- */
.rail{ position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:20; display:flex; flex-direction:column; align-items:center; gap:11px; padding:6px }
.rail-dot{ position:relative; width:16px; height:16px; display:grid; place-items:center; border-radius:50% }
.rail-dot::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--fg); opacity:.22; transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s, opacity .3s, box-shadow .3s }
.rail-dot.past::before{ opacity:.38 }
.rail-dot.on::before{ background:var(--accent); opacity:1; transform:scale(1.5); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent) }
.rail-dot span{ position:absolute; right:22px; top:50%; transform:translate(6px,-50%); white-space:nowrap; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); background:var(--card-bg); border:1px solid var(--line-2); border-radius:999px; padding:4px 9px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s }
.rail-dot:hover span, .rail-dot:focus-visible span{ opacity:1; transform:translate(0,-50%) }
.rail-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
:root[data-theme="light"] .rail-dot::before{ opacity:.45 }
@media (max-width:900px), (prefers-reduced-motion: reduce){ .rail{ display:none } }
#prog{ position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-2)); z-index:30; display:none }
@media (max-width:900px){ #prog{ display:block } } /* phones keep the thin top bar; the rail is desktop-only */
/* ---------- while scrolling: no live blur, no heavy shadows (restored 140 ms after the scroll stops) ---------- */
html.is-scrolling .glassy, html.is-scrolling .lg, html.is-scrolling .bar, html.is-scrolling .card, html.is-scrolling .pcard,
html.is-scrolling .feature, html.is-scrolling .fun, html.is-scrolling .cred, html.is-scrolling .quote, html.is-scrolling .stage,
html.is-scrolling .way, html.is-scrolling .chip, html.is-scrolling .press, html.is-scrolling .cform, html.is-scrolling .orb-item{
-webkit-backdrop-filter:none !important; backdrop-filter:none !important }
/* long, static sections are skipped entirely while they are off screen */
#certs, #voices{ content-visibility:auto }
#certs{ contain-intrinsic-size:auto 900px } #voices{ contain-intrinsic-size:auto 700px }
:root[data-theme="light"] .api{ --code-bg:#F4F6FB; --code-fg:#161D2C; --code-line:rgba(10,14,22,.15); --code-dim:rgba(22,29,44,.6) }
@keyframes apiPulse{ 0%,100%{ box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 14%, transparent) } 50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--ok) 0%, transparent) } }
@media (prefers-reduced-motion: reduce){ .api-strip.is-live .api-dot{ animation:none } }
@media (max-width:1000px){
.api-grid{ grid-template-columns:1fr; gap:18px }
.api-note{ flex-basis:100%; text-align:left }
}
@media (max-width:760px){
.api-box{ padding:14px 15px 16px }
.api-strip{ gap:10px 20px }
.api-lead{ font-size:.92rem } .api-q{ font-size:.78rem; padding:5px 11px }
.api-stats{ gap:12px 22px } .api-stats b{ font-size:1.1rem }
.api-pane{ font-size:.58rem; max-height:172px }
}
/* ---------- live scoreboard on the MeshCode card ---------- */
.live-fact .num{ font-variant-numeric:tabular-nums; transition:color .3s ease }
.live-fact .num.tick{ color:var(--accent); animation:live-pop .9s ease }
@keyframes live-pop{ 0%{ transform:translateY(0) } 24%{ transform:translateY(-2px) } 100%{ transform:translateY(0) } }
.live-line{ display:flex; align-items:center; gap:7px; margin:9px 0 0; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); opacity:0; transition:opacity .6s ease }
.live-line.on{ opacity:1 }
.live-dot{ width:6px; height:6px; border-radius:50%; background:#3EDB9A; animation:live-pulse 2.6s ease-out infinite }
@keyframes live-pulse{ 0%{ box-shadow:0 0 0 0 rgba(62,219,154,.55) } 70%{ box-shadow:0 0 0 7px rgba(62,219,154,0) } 100%{ box-shadow:0 0 0 0 rgba(62,219,154,0) } }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none } .live-fact .num.tick{ animation:none } }
/* the change has to be SEEN: the number goes green (amber if it fell), keeps a soft plate for 2.6 s,
and the delta floats up out of it. Colours are picked to read on both themes. */
.live-fact > div{ position:relative }
.live-fact .num{ border-radius:7px; padding:0 4px; margin:0 -4px; transition:background .45s ease, color .45s ease }
.live-fact .num.tick{ color:#12936A; background:rgba(31,169,122,.16) }
.live-fact .num.tick.down{ color:#B3651A; background:rgba(200,120,40,.16) }
:root[data-theme="dark"] .live-fact .num.tick{ color:#54E8AE; background:rgba(62,219,154,.18) }
:root[data-theme="dark"] .live-fact .num.tick.down{ color:#F5A04B; background:rgba(245,160,75,.18) }
.live-delta{ position:absolute; left:0; top:-4px; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.04em; color:#12936A; pointer-events:none; animation:live-float 1.9s cubic-bezier(.2,.7,.3,1) forwards }
.live-delta.down{ color:#B3651A }
:root[data-theme="dark"] .live-delta{ color:#54E8AE } :root[data-theme="dark"] .live-delta.down{ color:#F5A04B }
@keyframes live-float{ 0%{ opacity:0; transform:translateY(6px) } 16%{ opacity:1 } 70%{ opacity:1 } 100%{ opacity:0; transform:translateY(-20px) } }
@media (prefers-reduced-motion: reduce){ .live-delta{ animation:none; opacity:0 } }
/* ==========================================================================================================
Agent presence + live engineering pulse — append to styles.css (23 Sep 2026)
Both widgets sit on the site's own liquid-glass variables (--lg-bg / --lg-sheen / --lg-hi), which are defined
for BOTH themes, and on --surface / --line / --fg. They deliberately do NOT use --chip: that is #FFFFFF in
dark mode too (the plate behind a logo), and it is what made the first #api cards glow white at night.
Every font-family:var(--mono) rule re-states text-transform, because the .mono CLASS uppercases and these two
widgets carry code-like text (a protocol version, a UTC clock) that must not be shouted.
z-index 25: above page content and the section rail (20), below #prog (30), the CV/lightbox dialogs (50/70).
========================================================================================================== */
/* Both widgets ship with the `hidden` attribute and JS removes it. `display:flex` on .agp would OUTRANK the
browser's own [hidden]{display:none}, which measured as a real bug: for a human the banner stayed in the
layout at opacity 0, swallowed clicks in the bottom-left corner and put two focus stops in the tab order.
This rule is what makes "a human never sees it" true, so keep it above the display declarations. */
.agp[hidden]{ display:none !important }
/* ======================= MODULE 1 — agent presence ======================= */
.agp{ position:fixed; left:18px; bottom:18px; z-index:25; display:flex; align-items:center; gap:10px;
max-width:min(430px, calc(100vw - 36px)); padding:9px 9px 9px 14px; border-radius:15px;
background:linear-gradient(160deg, var(--lg-sheen), transparent 52%), var(--lg-bg);
-webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
border:1px solid var(--line-2);
box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), 0 20px 44px -24px rgba(0,0,0,.6);
opacity:0; transition:opacity .55s ease }
.agp.in{ opacity:1 } /* fade in only — no slide, no bounce, no pulse */
.agp-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ok);
box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent) } /* static: a live dot would compete with the page */
.agp-txt{ margin:0; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:5px;
font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; text-transform:none; line-height:1.5; color:var(--fg-2) }
.agp-who{ font-weight:600; color:var(--fg) }
.agp-p{ color:var(--muted) }
.agp-v{ font-variant-numeric:tabular-nums; color:var(--fg-2) }
.agp-s{ color:var(--faint) }
.agp-go{ flex:none; padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--accent);
font-family:var(--mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
transition:border-color .2s ease, background .2s ease }
.agp-go:hover, .agp-go:focus-visible{ border-color:var(--accent); background:var(--hi) }
.agp-x{ flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; padding:0;
border:0; border-radius:8px; background:transparent; color:var(--muted); font-family:var(--body); font-size:1.05rem;
line-height:1; cursor:pointer; transition:color .2s ease, background .2s ease }
.agp-x:hover{ color:var(--fg); background:var(--hi) }
/* ---- shared: phones, scrolling and reduced motion ---- */
/* Below 760px the two widgets share the bottom edge, so the banner is stacked ABOVE the collapsed pulse pill
instead of beside it — a floating card must not cover content, and two of them must not cover each other. */
@media (max-width:760px){
.agp{ left:12px; right:12px; bottom:70px; max-width:none; padding:8px 8px 8px 12px; border-radius:13px }
.agp-txt{ font-size:.6rem }
}
/* the site drops backdrop-filter while scrolling (it re-composites per frame on macOS) — these join that rule */
html.is-scrolling .agp{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important }
@media (prefers-reduced-motion: reduce){
.agp{ transition:none }
}
/* ---------- the live scoreboard, tidied (23 Sep 2026) ----------
Five figures in a wrapping flex row landed as a ragged 3 + 2 with uneven gutters, and the status
line below it broke into two columns with the dot orphaned beside them. Samuel, looking at it on a
phone: "no se ve clean organizada ni centrada". A grid gives every figure the same column, and the
status line is one sentence again with the dot set inline at its head. */
.feature .live-fact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:18px 24px; align-items:start }
.feature .live-fact > div{ display:flex; flex-direction:column; min-width:0 }
.feature .live-fact span{ hyphens:none }
.live-line{ display:block; margin:12px 0 0; line-height:1.7; text-wrap:pretty }
.live-dot{ display:inline-block; vertical-align:baseline; position:relative; top:-1px; margin-right:8px }
.live-at{ white-space:nowrap }
@media (max-width:620px){
.feature .live-fact{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px }
/* five figures never divide into two columns, so the headline one takes the top row on its own:
1 + 2 + 2 closes square instead of leaving an orphan hanging on the left */
.feature .live-fact > div:first-child{ grid-column:1 / -1 }
.feature .live-fact > div:first-child .num{ font-size:1.32rem }
.feature .live-fact .num{ font-size:1.05rem }
.feature .live-fact span{ font-size:.53rem; line-height:1.4 }
.live-line{ font-size:.53rem; line-height:1.75 }
}
/* ---------- the machine endpoint, as one line (23 Sep 2026) ----------
The full section was removed at Samuel's request — twice: "se me hace too much" and then
"no sirve de nada". He is right about the audience: a CTO never runs the curl, and the page
already says he is technical. Discoverability never depended on it — /llms.txt, robots.txt,
/.well-known/mcp.json, the head links and the JSON-LD WebAPI node all still point at /mcp. */
.mcp-note{ display:inline-block; margin-left:10px; font-size:.54rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted) }
.mcp-note a{ color:var(--accent-2); text-decoration:none; text-transform:none; letter-spacing:.01em; border-bottom:1px solid rgba(124,144,255,.35) }
.mcp-note a:hover{ color:var(--accent) }
@media (max-width:620px){ .mcp-note{ display:block; margin:6px 0 0 } }
/* ---------- brain / body tabs on the fruit-fly card (23 Sep 2026) ----------
Samuel: "puedes meter el vivario dentro de esta pagina que puedan ver la mosca?" — the simulated body
was already in the repo, interleaved in the old 272 KB FLY2 file and unread since September. It is its
own 112 KB file now, fetched only when someone picks the Body tab, and it shares the one canvas so the
scene governor still has exactly one heavy scene to arbitrate. */
.brain-tabs{ position:absolute; right:14px; top:12px; z-index:3; display:inline-flex; gap:3px; padding:3px; border-radius:999px; background:rgba(9,14,32,.62); border:1px solid rgba(140,170,255,.2) }
.brain-tab{ padding:4px 12px; border:0; border-radius:999px; background:transparent; color:rgba(190,204,238,.8); font-family:inherit; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s ease, color .2s ease }
.brain-tab:hover, .brain-tab:focus-visible{ color:#fff }
.brain-tab.on{ background:rgba(40,60,124,.95); color:#fff }
.fun-brain.brain-wait .brain-tab[data-view="body"]{ opacity:.55 }
.brain-key[hidden]{ display:none }
/* the body legend is one flat row of parts: it has no flow to group by, and pretending otherwise
would invent a structure the anatomy does not have */
.brain-key-body .bk-row{ padding-left:0 }
.fun-brain.is-body .brain-go{ display:none } /* the signal pulse is a statement about wiring, not about a body */
@media (max-width:620px){ .brain-tabs{ right:11px; top:10px; padding:2px } .brain-tab{ padding:3px 9px; font-size:.46rem } }
/* the first legend row must clear the Brain/Body tabs, which share its top edge */
.brain-key > .bk-row:first-child{ padding-right:148px }
@media (max-width:620px){ .brain-key > .bk-row:first-child{ padding-right:112px } }
/* ---------- the portrait, lifted off the page (29 Sep 2026) ----------
Samuel: "efecto 3d, sombra detrás, bordes liquid glass, que se vea popped out".
Built from the pieces the site already has — the same mask-composite rim as the glass cards and the same
--lg-* tokens — so it reads as the same material instead of a sticker. Three layers, cheapest first:
· the bezel (::before): a CONIC gradient ring, so the specular highlight travels around the rim the way
it does on a thick piece of glass. It is static on purpose. A ring that spins on its own re-composites
every frame, which is exactly the trap the logo marquee fell into on 24 Sep.
· the cast shadow (::after): a blurred ellipse UNDER the disc, offset down. This is what actually sells
"popped out" — the glow alone reads as a sticker with a halo.
· the tilt: rotateX/rotateY driven by two custom properties the pointer sets. Only the transform changes,
so the browser never re-lays-out anything.
The rim thickness scales with the photo, and everything degrades to the old flat disc under reduced-motion. */
/* Portrait-only rim stops. The card tokens are too faint on the dark ground (--lg-rim-a is .30 white there),
which came out as a dull grey band instead of glass, so the bezel gets its own pair per theme. */
:root{ --pr-a:rgba(255,255,255,.92); --pr-b:rgba(176,196,255,.10); --pr-edge:rgba(255,255,255,.55) }
:root[data-theme="light"]{ --pr-a:rgba(255,255,255,1); --pr-b:rgba(120,140,190,.22); --pr-edge:rgba(255,255,255,.95) }
.photo-3d{ position:relative; display:block; width:250px; height:250px; perspective:900px; --rim:13px;
/* a resting tilt, not zero: the object has to read as dimensional in a still screenshot, which is the state
almost everyone sees it in. The pointer moves it FROM here, and returns it here. */
--rx:3.2deg; --ry:-7deg }
/* the old flat ring lived on the image itself and left a ring of page background between photo and bezel */
.photo-3d .photo{ border-width:1px; outline:0 }
.photo-3d .photo{ width:100%; height:100%; position:relative; z-index:1;
transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1);
/* occlusion: the disc is RECESSED inside the housing, darkest where the glass wall meets it (bottom-right,
opposite the light). Without this the photo floats on top of the ring and the whole thing reads flat. */
box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),
inset -7px -9px 20px -8px rgba(0,0,0,.62),
inset 6px 7px 16px -10px var(--lg-hi),
0 14px 26px -18px rgba(0,0,0,.55) }
/* the glass bezel: content-box is exactly the photo, so the xor mask leaves only the ring */
.photo-3d::before{ content:""; position:absolute; inset:calc(var(--rim) * -1); border-radius:50%; padding:var(--rim); z-index:2; pointer-events:none;
/* a directional key light from the top-left sits OVER the conic travel. The conic alone spread the
highlight evenly around the rim, which is exactly what made it read as a flat sticker. */
background:
radial-gradient(60% 60% at 26% 18%, var(--pr-edge), transparent 62%),
radial-gradient(52% 52% at 76% 86%, color-mix(in srgb, var(--pr-a) 55%, transparent), transparent 64%),
conic-gradient(from -52deg,
var(--pr-a), var(--pr-b) 13%, var(--pr-a) 26%, var(--pr-b) 41%,
var(--pr-edge) 55%, var(--pr-b) 69%, var(--pr-a) 84%, var(--pr-b) 94%, var(--pr-a));
/* NO backdrop-filter here. It sat over the animated .scales canvas of the hero, forced that canvas to be
re-read every frame, and broke its compositing into visible colour bands (Samuel saw it immediately).
Measured at 4x CPU: with it 29.8 ms p50 / 37 slow frames, without it 23.3 ms / ZERO. The glass now comes
from the gradients and the bevel alone, which is where the look was actually coming from. */
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
box-shadow:inset 0 2px 1px -1px var(--lg-hi), inset 0 -2px 1px -1px var(--lg-lo),
inset 0 0 0 1px rgba(0,0,0,.22),
0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
inset 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(14px);
transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
filter:drop-shadow(0 0 18px var(--accent-glow)) }
/* the cast shadow — under the disc, not around it */
.photo-3d::after{ content:""; position:absolute; left:8%; right:8%; bottom:-11%; height:26%; z-index:0; pointer-events:none;
border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,.28) 55%, transparent 76%);
filter:blur(15px); opacity:.85; transform:translateY(var(--lift,0px)) scale(var(--sh,1));
transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease }
:root[data-theme="light"] .photo-3d::after{ background:radial-gradient(50% 50% at 50% 50%, rgba(10,14,22,.36), rgba(10,14,22,.15) 55%, transparent 76%) }
/* hover: the disc lifts, the shadow drops away and widens — the two together are what read as depth */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.photo-3d:hover .photo{ box-shadow:inset 0 2px 3px var(--lg-hi), inset 0 -2px 4px var(--lg-lo), 0 0 0 1px var(--line-2), 0 34px 60px -26px rgba(0,0,0,.78) }
.photo-3d:hover::before{ filter:drop-shadow(0 0 26px var(--accent-glow)) }
.photo-3d:hover::after{ --lift:12px; --sh:1.06; opacity:.6 }
}
@media (max-width:900px){ .photo-3d{ width:150px; height:150px; --rim:9px } }
@media (max-width:560px){ .photo-3d{ width:132px; height:132px; --rim:8px } }
/* it breathes: 7 s, 5 px. Enough that the eye reads it as a physical object sitting in space rather than a
pasted circle, small enough that it never competes with the headline next to it. */
@keyframes photo-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@media (prefers-reduced-motion:no-preference){
.photo-3d{ animation:photo-float 7s ease-in-out 1.2s infinite }
}
@media (prefers-reduced-motion:reduce){
.photo-3d{ animation:none }
.photo-3d .photo, .photo-3d::before{ transition:none }
.photo-3d::after{ transition:none }
}
/* ---------- 320 px: el Toolkit se salía de la pantalla (29 Sep 2026) ----------
Medido en producción: a 320 px el documento tenía scrollWidth 342 y el culpable era .kit .k, 319 px de
ancho dentro de una celda de ~274. Causa: por debajo de 560 px la tarjeta se vuelve una fila flex con
logo + título + descripción, y tanto los items de grid como los de flex traen min-width:auto, así que el
texto nunca se encoge. A 360 px ya no se notaba, por eso no había salido antes. */
.kit .k{ min-width:0 }
@media (max-width:560px){
.kit .k{ flex-wrap:wrap }
.kit .k > b{ min-width:0 }
.kit .k > span:not(.lg){ flex:1 0 100%; min-width:0; overflow-wrap:anywhere }
}