/* Fandresena TIALALAINA - DA magenta 306 (clair = charte PDF, sombre = derive) */
:root{
--bg:#FFFFFF;--surface:#F5F5F5;--surface-2:#FAFAFA;--rule:#E5E5E5;--ink:#1A1A1A;--body:#4A4A4A;--muted:#6E6E6E;
--accent:#8C0B80;--accent-deep:#4F0248;--accent-hi:#6E0865;--accent-soft:#F5D3F2;--accent-wash:#FBEAFA;--accent-dim:#F5D3F2;--on-accent:#FFFFFF;
--ring-top:#F5D3F2;--ring-bot:#66025D;--th-bg:#F5D3F2;
--ok:#0F6B3F;--err:#A1162B;--info:#1C5A87;
--font-title:"Montserrat",system-ui,sans-serif;--font-body:"Inter",system-ui,-apple-system,sans-serif;
--radius:10px;--radius-card:12px;--ease:cubic-bezier(.22,.7,.3,1);--maxw:1120px;--maxw-prose:720px;
--sans:var(--font-body);--mono:var(--font-body);--serif:var(--font-body);
--gut:clamp(20px,5vw,48px);--nav-h:64px;--live:var(--ok);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--bg:#110C10;--surface:#191218;--surface-2:#241B23;--rule:#392D38;--ink:#F6F4F5;--body:#CFC9CE;--muted:#A399A2;
--accent:#E36DD7;--accent-deep:#EE96E5;--accent-hi:#EE96E5;--accent-soft:#6B2E65;--accent-wash:#2E192C;--accent-dim:#6B2E65;--on-accent:#110C10;
--ring-top:#E36DD7;--th-bg:#2E192C;--ok:#6ED79F;--err:#FF8A9B;--info:#7FC4F0;}}
:root[data-theme="dark"]{
--bg:#110C10;--surface:#191218;--surface-2:#241B23;--rule:#392D38;--ink:#F6F4F5;--body:#CFC9CE;--muted:#A399A2;
--accent:#E36DD7;--accent-deep:#EE96E5;--accent-hi:#EE96E5;--accent-soft:#6B2E65;--accent-wash:#2E192C;--accent-dim:#6B2E65;--on-accent:#110C10;
--ring-top:#E36DD7;--th-bg:#2E192C;--ok:#6ED79F;--err:#FF8A9B;--info:#7FC4F0;}
:root{--paper:var(--bg);--paper-2:var(--surface);--paper-3:var(--surface-2);--ink-2:var(--body);--ink-3:var(--muted);--line:var(--rule);--line-2:var(--rule);--accent-2:var(--accent-hi);}
.invert{background:var(--bg);color:var(--body);}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  transition: background .35s ease, color .35s ease;
}

::selection { background: var(--accent); color: var(--paper); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section + .section { border-top: 1px solid var(--line); }

/* section header: mono kicker + big title */
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.kicker .num { color: var(--accent); }
.kicker .bar { flex: 1; height: 1px; background: var(--line); }

.sec-title {
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.sec-sub { color: var(--ink-2); max-width: 56ch; margin: 18px 0 0; font-size: 17px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in oklch, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 28px; }
.brand { display: flex; align-items: baseline; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; transform: translateY(-1px); }
.brand small { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; font-weight: 400; white-space: nowrap; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  letter-spacing: 0.02em; position: relative; padding: 4px 0; transition: color .18s; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--accent); transition: width .22s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after, .nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 16px; }
.lang {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  font-family: var(--mono); font-size: 12px;
}
.lang button {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 6px 11px; color: var(--ink-3); font-family: inherit; font-size: inherit; letter-spacing: .04em;
  transition: background .18s, color .18s;
}
.lang button.on { background: var(--ink); color: var(--paper); }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .02em;
  padding: 10px 18px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, background .18s, color .18s, border-color .18s;
  background: var(--accent); color: oklch(0.98 0.01 274); white-space: nowrap;
}
.btn:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn svg { width: 15px; height: 15px; }

.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--ink); }
.nav-burger svg { width: 24px; height: 24px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 28px;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.hero-status .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 var(--live); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.70 0.16 150 / .5); }
  70% { box-shadow: 0 0 0 9px oklch(0.70 0.16 150 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.70 0.16 150 / 0); }
}

.hero h1 {
  font-size: clamp(40px, 7.2vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 6px;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--accent); }
.hero .role {
  font-family: var(--mono); font-size: clamp(13px, 1.6vw, 16px); color: var(--ink-2);
  letter-spacing: .02em; margin: 14px 0 0;
}
.hero .promise {
  font-size: clamp(18px, 2.1vw, 23px); color: var(--ink); max-width: 40ch; line-height: 1.45;
  margin: 28px 0 0; font-weight: 400;
}
.hero .promise b { font-weight: 600; box-shadow: inset 0 -0.5em 0 var(--accent-soft); }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.hero-meta {
  display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 44px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.hero-meta .stat .n { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.hero-meta .stat .l { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }

/* portrait */
.hero-portrait { position: relative; }
.hero-portrait .frame {
  position: relative; border: 1px solid var(--line); padding: 10px; background: var(--paper-2);
  aspect-ratio: 4 / 5;
}
.hero-portrait image-slot { position: absolute; inset: 10px; display: block; width: auto; height: auto; }
.hero-portrait .tag {
  position: absolute; left: -1px; bottom: 22px; white-space: nowrap;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px;
}
.hero-portrait .corner {
  position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--accent);
}
.hero-portrait .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-portrait .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* stack ticker */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 0; background: var(--paper);
}
.ticker-track { display: flex; gap: 0; width: max-content; animation: scroll-x 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  font-family: var(--mono); font-size: 13px; letter-spacing: .05em; color: var(--ink-2);
  padding: 16px 26px; white-space: nowrap; display: flex; align-items: center; gap: 26px;
}
.ticker-item::after { content: "/"; color: var(--accent); opacity: .6; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(36px, 6vw, 88px); }
.about-lead { font-family: var(--serif); font-size: clamp(20px, 2.5vw, 28px); line-height: 1.5; letter-spacing: -0.01em; margin: 0; }
.about-lead .hl { color: var(--accent); }
.about-body p { color: var(--ink-2); margin: 0 0 18px; }
.about-facts { border-top: 1px solid var(--line); }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.fact dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fact dd { margin: 0; text-align: right; font-size: 15px; font-weight: 500; }
.fact dd a:hover { color: var(--accent); }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc {
  background: var(--paper); padding: clamp(28px, 3.5vw, 44px); position: relative;
  transition: background .25s; display: flex; flex-direction: column; gap: 16px;
}
.svc:hover { background: var(--paper-2); }
.svc .svc-num { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.svc h3 { font-size: clamp(20px, 2.3vw, 26px); margin: 0; letter-spacing: -0.015em; font-weight: 600; }
.svc p { color: var(--ink-2); margin: 0; font-size: 15.5px; }
.svc ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.svc ul li {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--line); padding: 4px 9px; border-radius: 4px; letter-spacing: .02em;
}

/* ============================================================
   STACK
   ============================================================ */
.stack-grid { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 4vw, 56px); }
.stack-cat + .stack-cat { margin-top: 30px; }
.stack-cat h4 {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.stack-cat h4::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-family: var(--mono); font-size: 13.5px; padding: 9px 15px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink);
  transition: border-color .18s, color .18s, transform .15s; cursor: default; letter-spacing: .01em;
  background: var(--paper);
}
.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.stack-aside { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.stack-aside p { font-family: var(--mono); font-size: 13px; color: var(--ink-3); line-height: 1.7; margin: 0; }
.stack-aside .big { font-size: clamp(48px, 7vw, 84px); font-weight: 600; letter-spacing: -0.04em; color: var(--ink); line-height: 1; font-family: var(--sans); margin-bottom: 8px; }

/* ============================================================
   EXPERIENCE — timeline
   ============================================================ */
.exp-list { display: flex; flex-direction: column; }
.exp {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 4vw, 56px);
  padding: clamp(26px, 3vw, 38px) 0; border-top: 1px solid var(--line); position: relative;
  cursor: pointer; transition: background .2s;
}
.exp:hover { background: var(--paper-2); }
.exp:first-child { border-top: 0; }
.exp-aside { display: flex; flex-direction: column; gap: 8px; }
.exp-date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); letter-spacing: .02em; }
.exp-company { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.exp-loc { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }
.exp-tag {
  align-self: start; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft);
  padding: 3px 8px; border-radius: 4px;
}
.exp-main h3 { font-size: clamp(19px, 2.1vw, 25px); margin: 0 0 12px; letter-spacing: -0.015em; font-weight: 600; line-height: 1.15; }
.exp-main > p { color: var(--ink-2); margin: 0 0 16px; font-size: 15.5px; }
.exp-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s, margin .3s; }
.exp.open .exp-points { max-height: 600px; opacity: 1; margin-top: 4px; }
.exp-points li { font-size: 14.5px; color: var(--ink-2); padding-left: 22px; position: relative; line-height: 1.45; }
.exp-points li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); }
.exp-toggle {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
}
.exp-toggle .pm { display: inline-flex; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; align-items: center; justify-content: center; transition: transform .3s, border-color .2s; }
.exp:hover .exp-toggle .pm { border-color: var(--accent); }
.exp.open .exp-toggle .pm { transform: rotate(45deg); border-color: var(--accent); }
.exp.open .exp-toggle .lbl-more { display: none; }
.exp-toggle .lbl-less { display: none; }
.exp.open .exp-toggle .lbl-less { display: inline; }
.exp-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.exp-stack span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.exp-stack span:not(:last-child)::after { content: " ·"; }

/* education row */
.edu-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.edu { background: var(--paper); padding: clamp(24px,3vw,36px); }
.edu .exp-date { margin-bottom: 10px; display: block; }
.edu h4 { font-size: 19px; margin: 0 0 6px; letter-spacing: -0.01em; }
.edu p { color: var(--ink-2); font-size: 14.5px; margin: 6px 0 0; }

/* ============================================================
   PROJECTS
   ============================================================ */
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.proj {
  border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .25s, border-color .2s; overflow: hidden;
}
.proj:hover { transform: translateY(-3px); border-color: var(--ink-3); box-shadow: 0 18px 40px -28px oklch(0.2 0.01 65 / .5); }
.proj-top { padding: 26px 28px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.proj-kind { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.proj-year { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.proj h3 { font-size: clamp(21px, 2.4vw, 28px); margin: 14px 0 0; padding: 0 28px; letter-spacing: -0.02em; font-weight: 600; }
.proj p { color: var(--ink-2); padding: 12px 28px 0; margin: 0; font-size: 15px; flex: 1; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 28px 0; }
.proj-tags span { font-family: var(--mono); font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); padding: 3px 8px; border-radius: 4px; }
.proj-foot { padding: 20px 28px 24px; margin-top: 18px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; }
.proj-link { font-family: var(--mono); font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: gap .18s, color .18s; white-space: nowrap; }
.proj:hover .proj-link { color: var(--accent); gap: 12px; }
.proj-metric { text-align: right; }
.proj-metric .n { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.proj-metric .l { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.quote { border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 14px; background: var(--paper); }
.quote .mark { font-family: var(--serif); font-size: 40px; line-height: .5; color: var(--accent); height: 18px; }
.quote blockquote { font-family: var(--serif); font-size: 16px; line-height: 1.45; margin: 0; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote .av { width: 38px; height: 38px; border-radius: 50%; background: var(--paper-3); border: 1px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.quote .who b { display: block; font-size: 14.5px; font-weight: 600; }
.quote .who span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.note-ph { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 22px; letter-spacing: .02em; }

/* ============================================================
   ARTICLES
   ============================================================ */
.art-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.art { display: grid; grid-template-columns: 90px 1fr auto; gap: clamp(16px,3vw,40px); align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--line); transition: padding-left .2s, background .2s; }
.art:hover { padding-left: 12px; background: var(--paper-2); }
.art .art-date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.art h4 { font-size: clamp(18px, 2vw, 23px); margin: 0; font-weight: 500; letter-spacing: -0.015em; }
.art .art-cat { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 6px; letter-spacing: .04em; }
.art .art-go { color: var(--ink-3); transition: color .2s, transform .2s; }
.art:hover .art-go { color: var(--accent); transform: translate(4px,-4px); }
.art .art-go svg { width: 20px; height: 20px; }

/* ============================================================
   CONTACT (inverted)
   ============================================================ */
#contact { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(36px,6vw,80px); align-items: start; }
.contact-grid h2 { font-size: clamp(36px, 6vw, 72px); letter-spacing: -0.03em; line-height: 1; margin: 0; font-weight: 600; text-wrap: balance; }
.contact-grid h2 .accent { color: var(--accent); }
.contact-lead { color: var(--ink-2); font-size: 18px; max-width: 44ch; margin: 26px 0 0; }
.contact-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.contact-links { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.clink { background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; transition: background .2s; }
.clink:hover { background: var(--paper-2); }
.clink .ci { display: flex; align-items: center; gap: 14px; }
.clink .ci .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.clink .ci .val { font-size: 16px; font-weight: 500; margin-top: 2px; }
.clink .arrow { color: var(--ink-3); transition: transform .2s, color .2s; }
.clink:hover .arrow { color: var(--accent); transform: translate(3px,-3px); }
.clink svg { width: 18px; height: 18px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 36px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot .copy { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .03em; }
.foot .made { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.foot .made b { color: var(--ink-2); font-weight: 500; }

/* ---------- reveal ---------- */
/* transform-only entrance: content is always visible (opacity:1) so it can
   never be hidden if transitions don't run; .in just settles the offset. */
.reveal { opacity: 1; transform: translateY(16px); transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
  .ticker-track, .hero-status .pulse { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1320px) { .brand small { display: none; } }
@media (max-width: 1120px) { .nav-links { gap: 20px; } }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { max-width: 360px; }
  .about-grid, .stack-grid, .contact-grid { grid-template-columns: 1fr; }
  .stack-aside { position: static; }
  .exp { grid-template-columns: 1fr; gap: 14px; }
  .quotes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .svc-grid, .proj-grid, .edu-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-right .btn.ghost { display: none; }
  .art { grid-template-columns: 1fr auto; }
  .art .art-date { display: none; }
  .hero-meta { gap: 20px 28px; flex-wrap: wrap; }
  .hero-meta .stat { flex: 1 1 38%; }
}

/* mobile menu */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0; background: var(--paper); z-index: 90;
  display: none; flex-direction: column; padding: 32px var(--gut); gap: 4px;
  border-top: 1px solid var(--line);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mobile-menu a .mm-num { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-right: 14px; font-weight: 400; }

/* ============================================================
   PRINT — clean CV
   ============================================================ */
@media print {
  .nav, .nav-burger, .ticker, .hero-cta, .contact-cta, .mobile-menu, .lang, .hero-status, .exp-toggle, .reveal { all: revert; }
  .nav, .ticker, .hero-portrait .corner, .hero-portrait .tag, .mobile-menu, .art-go, .clink .arrow { display: none !important; }
  body { font-size: 11pt; background: #fff; color: #111; }
  .section { padding-block: 14pt; border: 0; }
  .exp-points { max-height: none !important; opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .invert { background: #fff !important; color: #111 !important; }
  a { color: #111 !important; }
  .proj, .svc, .quote { break-inside: avoid; }
  .hero-media, .theme-toggle, .cform { display: none !important; }
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center;
  transition: border-color .18s, color .18s, transform .15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* ============================================================
   HERO MEDIA COLLAGE (photo · macbook · studio)
   ============================================================ */
.hero-media { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / 1.04; }
.media-cell {
  position: relative; border: 1px solid var(--line); background: var(--paper-2); padding: 8px;
  overflow: hidden; transition: border-color .25s, background .35s;
}
.media-cell:hover { border-color: var(--accent); }
.media-cell.photo { grid-row: 1 / 3; }
.media-cell image-slot { position: absolute; inset: 8px; display: block; width: auto; height: auto; }
.media-cell .mlabel {
  position: absolute; left: 8px; bottom: 8px; z-index: 3; white-space: nowrap;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px;
}
.media-cell .corner { position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--accent); z-index: 3; }
.media-cell .corner.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.media-cell .corner.br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }

/* hero role + stats on a single line */
.hero .role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-meta { flex-wrap: nowrap; gap: clamp(10px, 1.8vw, 26px); overflow: visible; }
.hero-meta .stat { flex: 1 1 0; min-width: 0; }
.hero-meta .stat .n { font-size: clamp(19px, 2.3vw, 30px); }
.hero-meta .stat .l { font-size: 10px; letter-spacing: .05em; }
.sec-sub.oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* single generated workstation illustration */
.hero-art {
  position: relative; border: 1px solid var(--line); background: var(--paper-2);
  aspect-ratio: 1 / 0.92; display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5%, 44px); overflow: hidden; color: var(--ink);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-art svg { width: 100%; height: auto; display: block; }
.hero-art svg .a { stroke: var(--accent); }
.hero-art svg .af { fill: var(--accent); }
.hero-art .corner { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--accent); z-index: 3; }
.hero-art .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-art .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px;
  border: 1px solid var(--line); border-radius: 0; padding: 0;
}
.trust-item { flex: 1 1 0; min-width: 150px; padding: 22px 24px; border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: 0; }
.trust-item .tn { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.trust-item .tn .accent { color: var(--accent); }
.trust-item .tl { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 9px; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.cform { display: grid; gap: 16px; margin-top: 8px; }
.cform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; width: 100%;
  transition: border-color .18s, box-shadow .18s; resize: vertical;
}
.field textarea { min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.cform .btn { justify-self: start; border: 0; }
.cform-note { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.cform-ok {
  border: 1px solid var(--accent); background: var(--accent-soft); padding: 16px 18px;
  font-size: 15px; display: none; align-items: center; gap: 12px;
}
.cform-ok.show { display: flex; }
.cform-ok svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }

/* ============================================================
   SUBPAGE HEADER (projets / blog)
   ============================================================ */
.page-hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(36px, 5vw, 64px); }
.back-link { font-family: var(--mono); font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; transition: gap .18s, color .18s; }
.back-link:hover { color: var(--accent); gap: 12px; }
.back-link svg { width: 15px; height: 15px; }
.page-title { font-size: clamp(38px, 7vw, 80px); letter-spacing: -0.035em; line-height: 0.98; font-weight: 600; margin: 0; text-wrap: balance; }
.page-title .accent { color: var(--accent); }
.page-lead { color: var(--ink-2); font-size: clamp(17px, 2vw, 20px); max-width: 56ch; margin: 22px 0 0; }

/* ============================================================
   PROJECTS GALLERY (projets.html)
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter {
  font-family: var(--mono); font-size: 13px; padding: 9px 16px; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; color: var(--ink-2); background: transparent;
  transition: all .18s; letter-spacing: .01em;
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gcard { border: 1px solid var(--line); background: var(--paper); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .25s, border-color .2s; }
.gcard:hover { transform: translateY(-3px); border-color: var(--ink-3); box-shadow: 0 18px 40px -28px oklch(0.2 0.01 65 / .45); }
.gcard .shot { position: relative; aspect-ratio: 16 / 10; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.gcard .shot image-slot { position: absolute; inset: 0; display: block; width: auto; height: auto; }
.gcard .gcat { position: absolute; top: 10px; left: 10px; z-index: 3; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 4px 8px; }
.gcard .ginfo { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gcard h3 { font-size: 18px; margin: 0; letter-spacing: -0.015em; font-weight: 600; }
.gcard .gurl { font-family: var(--mono); font-size: 12px; color: var(--ink-3); word-break: break-all; }
.gcard .gtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.gcard .gtags span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); border: 1px solid var(--line); padding: 3px 7px; }
.gcard.hide { display: none; }
.gcard a.gvisit { font-family: var(--mono); font-size: 12px; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }

/* ============================================================
   BLOG / ARTICLE MACHINE (blog.html)
   ============================================================ */
.gen-grid { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start; }
.gen-panel { border: 1px solid var(--line); background: var(--paper-2); padding: 26px; position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
.gen-panel h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
.gen-panel h3 .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { flex: 1; appearance: none; background: transparent; border: 0; cursor: pointer; font-family: var(--mono);
  font-size: 12px; padding: 9px; color: var(--ink-2); transition: background .18s, color .18s; }
.seg button.on { background: var(--ink); color: var(--paper); }
.gen-out { display: flex; flex-direction: column; gap: 18px; min-height: 300px; }
.gen-empty { border: 1px dashed var(--line); padding: 48px 32px; text-align: center; color: var(--ink-3); font-family: var(--mono); font-size: 13px; }
.article {
  border: 1px solid var(--line); background: var(--paper); padding: clamp(24px, 3vw, 40px); position: relative;
}
.article .ameta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.article .abadge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); padding: 3px 9px; }
.article .acopy { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); background: transparent; padding: 7px 12px; cursor: pointer; transition: all .18s; display: inline-flex; gap: 7px; align-items: center; }
.article .acopy:hover { border-color: var(--accent); color: var(--accent); }
.article h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.1; }
.article .adesc { color: var(--ink-2); font-style: italic; font-family: var(--serif); margin: 0 0 22px; font-size: 16px; }
.article-body h3 { font-size: 21px; letter-spacing: -0.01em; margin: 26px 0 10px; }
.article-body p { color: var(--ink); margin: 0 0 14px; line-height: 1.7; }
.article-body ul { margin: 0 0 14px; padding-left: 22px; }
.article-body li { margin-bottom: 7px; color: var(--ink); }
.article-body strong { font-weight: 600; }
.gen-loading { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); padding: 20px; border: 1px solid var(--line); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.kw-list { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

@media (max-width: 900px) {
  .gen-grid { grid-template-columns: 1fr; }
  .gen-panel { position: static; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; }
  .cform .frow { grid-template-columns: 1fr; }
  .trust-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-media { aspect-ratio: 1 / 1; }
}

/* ============================================================
   DA OVERRIDES
   ============================================================ */
body{background:var(--bg);color:var(--body);font-family:var(--font-body);font-size:16px;line-height:1.6;transition:background-color .2s,color .2s;}
h1,h2,h3,h4,.sec-title,.page-title,.contact-grid h2{font-family:var(--font-title);color:var(--ink);letter-spacing:0;}
::selection{background:var(--accent);color:var(--on-accent);}
a{color:inherit;}a:hover{color:var(--accent);}
.about-body a,.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.section{padding-block:96px;}
.section + .section{border-top:0;}
.sec-head{margin-bottom:48px;}
.kicker{font-family:var(--font-title);font-size:13px;font-weight:800;letter-spacing:.7px;line-height:1.2;text-transform:uppercase;color:var(--accent);gap:14px;margin:0 0 24px;}
.kicker::before{content:"";width:40px;height:1px;background:var(--rule);flex:0 0 auto;order:-1;}
.kicker .bar{display:none;}
.kicker .num{color:var(--muted);font-weight:700;}
.sec-title{font-size:clamp(26px,3.2vw,36px);font-weight:700;line-height:1.2;max-width:24ch;}
.sec-sub{color:var(--body);font-size:16px;}

/* nav */
.nav{background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--rule);}
.brand{font-family:var(--font-title);font-weight:800;font-style:italic;text-transform:uppercase;font-size:15px;color:var(--accent-deep);align-items:center;}
.brand small{font-family:var(--font-body);font-style:normal;text-transform:none;font-weight:400;font-size:13px;color:var(--muted);letter-spacing:0;}
.nav-links a{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--body);letter-spacing:0;}
.nav-links a:hover,.nav-links a.active{color:var(--accent);}
.nav-links a::after{background:var(--accent);height:1px;}
.lang{border-radius:var(--radius);border-color:var(--rule);font-family:var(--font-body);font-size:13px;font-weight:500;}
.lang button{color:var(--muted);transition:background-color .18s,color .18s;}
.lang button.on{background:var(--accent-wash);color:var(--accent);}
.theme-toggle{border-radius:var(--radius);border-color:var(--rule);transition:border-color .18s,color .18s;}
.theme-toggle:hover{transform:none;}
.mobile-menu{background:var(--bg);}
.mobile-menu a{font-family:var(--font-title);font-weight:700;font-size:22px;color:var(--ink);}
.mobile-menu a .mm-num{font-family:var(--font-body);color:var(--muted);}

/* buttons */
.btn{font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:0;border-radius:var(--radius);padding:12px 20px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);box-shadow:none;transition:background-color .18s,border-color .18s,color .18s;}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent);transform:none;}
:root[data-theme="dark"] .btn:hover{background:var(--accent-hi);border-color:var(--accent-hi);}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent);}
.btn.ghost:hover{background:var(--accent-wash);color:var(--accent);border-color:var(--accent);}
.btn-text{color:var(--accent);text-decoration:underline;text-underline-offset:4px;font-weight:600;}

/* hero */
.hero{padding-top:88px;padding-bottom:72px;}
.hero-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;}
.hero-status{font-family:var(--font-body);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--body);border-color:var(--rule);border-radius:999px;}
.hero-status .pulse{background:var(--ok);animation:none;box-shadow:none;}
.hero h1{font-family:var(--font-title);font-size:clamp(40px,6vw,64px);font-weight:800;font-style:italic;text-transform:uppercase;line-height:1.05;letter-spacing:0;color:var(--accent-deep);margin:0;}
.hero h1 .accent{color:var(--accent);}
.hero .role{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;}
.hero .promise{font-family:var(--font-title);font-style:italic;font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.34;color:var(--ink);max-width:34ch;}
.hero .promise b{font-weight:700;box-shadow:none;color:var(--accent);}
.hero-meta{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--rule);padding-top:28px;margin-top:44px;}
.hero-meta .stat{padding-inline:16px;border-left:1px solid var(--rule);min-width:0;}
.hero-meta .stat:first-child{padding-left:0;border-left:0;}
.hero-meta .stat .n{font-family:var(--font-title);font-weight:800;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;}
.hero-meta .stat .l{font-family:var(--font-body);font-size:13.5px;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:6px;}
.hero-media{display:flex;justify-content:center;align-items:center;aspect-ratio:auto;grid-template-columns:none;}
.avatar-ring{width:min(100%,360px);aspect-ratio:1;border-radius:50%;padding:8px;background:linear-gradient(180deg,var(--ring-top) 0 50%,var(--ring-bot) 50% 100%);}
.avatar-ring .avatar-in{width:100%;height:100%;border-radius:50%;padding:6px;background:var(--bg);}
.avatar-in{overflow:hidden;}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scale(1.04);}
.avatar-ring image-slot{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;}
.ticker{display:none;}

/* about */
.about-lead{font-family:var(--font-title);font-style:italic;font-weight:700;font-size:clamp(20px,2.2vw,24px);line-height:1.34;color:var(--ink);letter-spacing:0;max-width:var(--maxw-prose);}
.about-lead .hl{color:var(--accent);}
.about-body p{color:var(--body);max-width:var(--maxw-prose);}
.fact{border-color:var(--rule);}
.fact dt{font-family:var(--font-body);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted);}
.fact dd{color:var(--ink);font-weight:600;}

/* services as cards */
.svc-grid{background:none;border:0;gap:20px;}
.svc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);transition:border-color .18s,transform .18s;}
.svc:hover{background:var(--surface);border-color:var(--accent);transform:translateY(-2px);}
.svc .svc-num{font-family:var(--font-title);font-weight:800;font-size:13px;letter-spacing:.7px;color:var(--accent);}
.svc h3{font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.25;}
.svc p{color:var(--body);font-size:16px;}
.svc ul li,.proj-tags span,.gcard .gtags span,.exp-tag,.article .abadge{font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;background:var(--accent-wash);color:var(--accent);border:0;border-radius:999px;padding:4px 11px;}

/* stack chips */
.stack-cat h4{font-family:var(--font-title);font-size:13px;font-weight:800;letter-spacing:.7px;color:var(--accent);}
.stack-cat h4::before{background:var(--rule);width:24px;}
.chip{font-family:var(--font-body);font-size:14px;font-weight:500;background:var(--accent-wash);color:var(--accent);border:0;border-radius:999px;padding:7px 14px;transition:background-color .18s,color .18s;}
.chip:hover{transform:none;color:var(--accent);background:var(--accent-soft);}
:root[data-theme="dark"] .chip:hover{color:var(--accent-hi);}
.stack-aside .big{font-family:var(--font-title);font-weight:800;font-size:clamp(32px,4vw,44px);line-height:1.1;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;}
.stack-aside p{font-family:var(--font-body);font-size:13.5px;color:var(--muted);}

/* experience */
.exp{border-top-color:var(--rule);transition:background-color .18s;}
.exp:hover{background:transparent;}
.exp-date{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.exp-company{color:var(--accent);font-family:var(--font-title);font-weight:700;}
.exp-loc{font-family:var(--font-body);font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--muted);}
.exp-main h3{font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.25;}
.exp-main > p,.exp-points li{color:var(--body);}
.exp-points li::before{content:"-";font-family:var(--font-body);}
.exp-toggle{font-family:var(--font-body);font-size:13.5px;color:var(--accent);font-weight:500;}
.exp-toggle .pm{border-color:var(--accent-dim);}
.exp-stack span{font-family:var(--font-body);font-size:13.5px;color:var(--muted);}
.edu-grid{background:none;border:0;gap:16px;}
.edu{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);}
.edu h4{font-size:20px;font-weight:700;}
.edu p{color:var(--body);}

/* project cards */
.proj,.gcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);box-shadow:none;transition:border-color .18s,transform .18s;}
.proj:hover,.gcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:none;}
.proj-kind,.proj-year{font-family:var(--font-body);font-size:13.5px;letter-spacing:0;text-transform:none;}
.proj-kind{color:var(--accent);font-weight:600;}.proj-year{color:var(--muted);font-variant-numeric:tabular-nums;}
.proj h3,.gcard h3{font-weight:700;font-size:clamp(20px,2vw,24px);line-height:1.25;}
.gcard h3{font-size:18px;}
.proj p{color:var(--body);font-size:16px;}
.proj-tags span{font-size:12.5px;}
.proj-foot{border-top-color:var(--rule);}
.proj-link{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--accent);}
.proj-metric .n{font-family:var(--font-title);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.proj-metric .l{font-family:var(--font-body);font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--muted);}
.gcard .shot{background:var(--surface-2);border-bottom:1px solid var(--rule);border-radius:var(--radius-card) var(--radius-card) 0 0;overflow:hidden;}
.gcard .gcat{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;background:var(--bg);color:var(--accent);border:1px solid var(--rule);border-radius:999px;padding:3px 10px;}
.gcard .gurl{font-family:var(--font-body);font-size:13.5px;color:var(--muted);}
.gcard a.gvisit{font-family:var(--font-body);font-weight:600;font-size:13.5px;}
.filter{font-family:var(--font-body);font-size:14px;font-weight:500;border-radius:999px;border-color:var(--rule);color:var(--body);transition:background-color .18s,color .18s,border-color .18s;}
.filter:hover{border-color:var(--accent);color:var(--accent);}
.filter.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

/* testimonials */
.quote{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);}
.quote .mark{font-family:var(--font-title);font-weight:800;color:var(--accent);}
.quote blockquote{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink);}
.quote .av{background:var(--accent-wash);border:0;color:var(--accent);font-family:var(--font-title);font-weight:800;}
.quote .who b{color:var(--ink);}
.quote .who span{font-family:var(--font-body);font-size:13.5px;color:var(--muted);}
.trust-bar{border:1px solid var(--rule);border-radius:var(--radius-card);gap:0;background:var(--bg);}
.trust-item{border-right-color:var(--rule);}
.trust-item .tn{font-family:var(--font-title);font-weight:800;font-size:clamp(32px,3.4vw,44px);line-height:1.1;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;}
.trust-item .tl{font-family:var(--font-body);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted);}

/* limit box (encadre de limite) */
.limit,.note-ph{background:var(--surface);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--body);letter-spacing:0;max-width:var(--maxw-prose);}
.note-ph:empty{display:none;}

/* articles */
.art-list{border-top-color:var(--rule);}
.art{border-bottom-color:var(--rule);transition:background-color .18s;}
.art:hover{padding-left:0;background:transparent;}
.art:hover h4{color:var(--accent);}
.art .art-date,.art .art-cat{font-family:var(--font-body);font-size:13.5px;color:var(--muted);letter-spacing:0;font-variant-numeric:tabular-nums;}
.art h4{font-family:var(--font-title);font-weight:700;font-size:clamp(18px,2vw,22px);transition:color .18s;}

/* contact */
#contact{background:var(--surface);}
.contact-grid h2{font-weight:800;font-size:clamp(32px,4.4vw,48px);line-height:1.1;}
.contact-grid h2 .accent{color:var(--accent);}
.contact-lead{color:var(--body);font-size:16px;}
.contact-links{background:none;border:0;gap:12px;}
.clink{background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius-card);transition:border-color .18s;}
.clink:hover{background:var(--bg);border-color:var(--accent);}
.clink .ci{color:var(--accent);}
.clink .ci .lbl{display:block;font-family:var(--font-body);font-size:13.5px;line-height:1.3;text-transform:none;letter-spacing:0;color:var(--muted);}
.clink .ci .val{display:block;margin-top:4px;color:var(--ink);}
.clink .ci > svg{flex:0 0 auto;}
.field label{font-family:var(--font-body);font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius);transition:border-color .18s,box-shadow .18s;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);}
.cform-note{font-family:var(--font-body);font-size:13.5px;color:var(--muted);}
.cform-ok{border:1px solid var(--ok);border-left-width:3px;background:var(--surface);color:var(--ok);border-radius:0 var(--radius) var(--radius) 0;}
.cform-ok svg{color:var(--ok);}
.foot{border-top:1px solid var(--rule);background:var(--bg);}
.foot .copy,.foot .made{font-family:var(--font-body);font-size:13.5px;color:var(--muted);letter-spacing:0;}
.foot .made b{color:var(--accent);}

/* subpages */
.back-link{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--accent);}
.page-title{font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(36px,6vw,64px);line-height:1.05;letter-spacing:0;color:var(--accent-deep);}
.page-title .accent{color:var(--accent);}
.page-lead{color:var(--body);font-size:clamp(17px,1.8vw,19px);}
.gen-panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);}
.gen-panel h3{font-weight:700;}
.gen-panel h3 .pulse{background:var(--ok);}
.seg{border-color:var(--rule);border-radius:var(--radius);}
.seg button{font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--body);}
.seg button.on{background:var(--accent);color:var(--on-accent);}
.gen-empty{border:1px dashed var(--rule);border-radius:var(--radius-card);font-family:var(--font-body);font-size:14px;color:var(--muted);}
.gen-loading{font-family:var(--font-body);border-color:var(--rule);border-radius:var(--radius);}
.spinner{border-color:var(--rule);border-top-color:var(--accent);}
.article{background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius-card);}
.article h2{font-weight:800;letter-spacing:0;}
.article .adesc{font-family:var(--font-title);font-style:italic;font-weight:700;color:var(--body);}
.article .acopy{font-family:var(--font-body);font-size:13.5px;border-radius:var(--radius);border-color:var(--rule);}
.article-body h3{font-weight:700;}
.article-body p,.article-body li{color:var(--body);}
.article-body strong{color:var(--ink);}
.kw-list{font-family:var(--font-body);font-size:13.5px;color:var(--muted);}
image-slot{border-radius:var(--radius);}

/* tables (charte documentaire) */
table{width:100%;border-collapse:collapse;font-size:15px;}
th,td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--rule);border-left:0;border-right:0;}
thead th{background:var(--th-bg);color:var(--ink);font-weight:700;}
tbody tr:nth-child(even){background:var(--surface-2);}
tr.total td{background:var(--accent-wash);font-weight:700;color:var(--ink);}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal:nth-child(2){transition-delay:60ms}.reveal:nth-child(3){transition-delay:120ms}.reveal:nth-child(4){transition-delay:180ms}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{transition-duration:0ms!important;animation:none!important;}
.reveal{opacity:1;transform:none;}
html{scroll-behavior:auto;}}

@media (max-width:980px){.hero-grid{grid-template-columns:1fr;}.hero-media{justify-content:flex-start;}.avatar-ring{width:min(100%,280px);}}
@media (max-width:720px){
.section{padding-block:56px;}.hero{padding-top:48px;padding-bottom:40px;}
.hero-meta{grid-auto-flow:row;grid-template-columns:1fr 1fr;row-gap:20px;}
.hero-meta .stat{border-left:0;padding-left:0;padding-right:8px;}
.trust-item{border-right:0;border-bottom:1px solid var(--rule);}
.trust-item:last-child{border-bottom:0;}}
@media print{body{background:#fff;color:#4A4A4A;}.reveal{opacity:1!important;}}

/* hero texture */
.hero{position:relative;isolation:isolate;overflow:visible;}
.hero::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 26%,transparent) 1px,transparent 1.5px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);opacity:.55;}
.hero::after{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;background:radial-gradient(ellipse 40% 60% at 75% 40%,color-mix(in srgb,var(--accent-soft) 45%,transparent),transparent 70%);}
body{overflow-x:clip;}
:root[data-theme="dark"] .hero::before{opacity:.45;}
:root[data-theme="dark"] .hero::after{background:radial-gradient(ellipse 45% 55% at 82% 38%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);}

/* ============================================================
   CARDS PREMIUM
   ============================================================ */
.ic{width:24px;height:24px;display:block;}
.ic-tile{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;flex:0 0 auto;color:var(--accent);background:linear-gradient(145deg,var(--accent-wash),color-mix(in srgb,var(--accent-soft) 70%,var(--bg)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent);transition:background .2s,color .2s,box-shadow .2s;}
.ic-tile.sm{width:40px;height:40px;border-radius:10px;}
.ic-tile.sm .ic{width:20px;height:20px;}
.card-art{position:relative;height:128px;overflow:hidden;border-bottom:1px solid var(--rule);background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1.6px) 0 0/18px 18px,linear-gradient(135deg,var(--accent-wash),var(--surface-2) 70%);display:flex;align-items:center;padding-inline:24px;}
.card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,var(--surface-2));opacity:.6;pointer-events:none;}
.card-art .ca-tile{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--bg);color:var(--accent);box-shadow:0 1px 0 var(--rule),0 10px 24px -14px color-mix(in srgb,var(--accent) 60%,transparent);transition:transform .25s var(--ease),background .2s,color .2s;}
.card-art .ca-tile .ic{width:26px;height:26px;}
.card-art .ca-ghost{position:absolute;right:-18px;bottom:-34px;width:150px;height:150px;color:var(--accent);opacity:.13;stroke-width:1;transition:transform .5s var(--ease);}

/* services */
.svc{gap:14px;padding:28px;}
.svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.svc .svc-num{font-family:var(--font-title);font-weight:800;font-size:13px;color:var(--muted);letter-spacing:.7px;}
.svc:hover .ic-tile{background:var(--accent);color:var(--on-accent);box-shadow:none;}

/* education */
.edu{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;padding:24px;}
.edu .ic-tile{grid-row:span 3;}
.edu .exp-date{margin-bottom:6px;}

/* projects */
.proj{overflow:hidden;}
.proj-top{padding:22px 28px 0;}
.proj:hover .ca-tile,.pcard:hover .ca-tile{transform:translateY(-3px);background:var(--accent);color:var(--on-accent);}
.proj:hover .ca-ghost,.pcard:hover .ca-ghost{transform:rotate(-8deg) scale(1.06);}

/* testimonials */
.quotes{gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));}
.quote{margin:0;padding:28px;gap:18px;transition:border-color .18s,transform .18s;}
.quote:hover{border-color:var(--accent);transform:translateY(-2px);}
.quote .q-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.quote .q-co{font-size:12.5px;font-weight:600;color:var(--accent);background:var(--accent-wash);border-radius:999px;padding:4px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;}
.quote blockquote{font-size:16px;line-height:1.6;text-wrap:pretty;}
.quote figcaption{padding-top:18px;border-top:1px solid var(--rule);gap:12px;}
.quote .av{width:42px;height:42px;padding:2px;background:linear-gradient(180deg,var(--ring-top) 0 50%,var(--accent) 50% 100%);border:0;}
.quote .av span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--bg);color:var(--accent);font-family:var(--font-title);font-weight:800;font-size:13px;}
.quote .who{min-width:0;}
.quote .who b{font-size:14.5px;line-height:1.3;}

/* project thumbnails (style vignette) */
.gcard .thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border-radius:var(--radius-card) var(--radius-card) 0 0;background:linear-gradient(135deg,#4F0248 0%,#8C0B80 62%,#B0249F 100%);color:#fff;container-type:inline-size;}
.gcard .thumb::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.22) 1px,transparent 1.6px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%);}
.gcard .thumb::after{content:"";position:absolute;width:70%;aspect-ratio:1;right:-20%;top:-30%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(245,211,242,.35),transparent 65%);}
.th-text{position:absolute;left:6%;top:0;bottom:0;width:44%;display:flex;flex-direction:column;justify-content:center;gap:6px;z-index:2;}
.th-cat{align-self:flex-start;font-family:var(--font-body);font-size:max(10px,3.2cqi);font-weight:600;line-height:1;padding:.45em .8em;border-radius:999px;background:#fff;color:#8C0B80;}
.th-name{font-family:var(--font-title);font-weight:800;font-style:italic;text-transform:uppercase;font-size:var(--thf,6.4cqi);line-height:1.05;color:#fff;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none;text-shadow:0 2px 14px rgba(40,0,36,.35);margin-top:4px;}
.th-url{font-family:var(--font-body);font-size:max(10px,3.1cqi);font-weight:500;color:#F5D3F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.th-browser{position:absolute;left:56%;top:16%;width:56%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -12px rgba(30,0,28,.6),0 0 0 1px rgba(255,255,255,.18);transform:rotate(-4deg);transition:transform .4s var(--ease);}
.th-bar{display:flex;align-items:center;gap:4px;height:9%;padding:0 6%;background:#F1EEF0;border-bottom:1px solid #E5E5E5;}
.th-bar i{width:5px;height:5px;border-radius:50%;background:#D7CED5;flex:0 0 auto;}
.th-bar span{margin-left:6px;font-family:var(--font-body);font-size:max(7px,1.8cqi);color:#6E6E6E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.th-screen{position:relative;height:91%;background:linear-gradient(180deg,#FBEAFA,#F5F5F5);}
.th-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;opacity:0;transition:opacity .3s;}
.th-screen img.ok{opacity:1;}
.th-screen::before{content:attr(data-host);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-title);font-weight:800;font-style:italic;font-size:4cqi;color:#8C0B80;opacity:.35;padding:8%;text-align:center;}
.gcard:hover .th-browser{transform:rotate(-2deg) translateY(-4px) scale(1.03);}
.gcard .shot{display:none;}

/* CTA system */
.svc{display:flex;flex-direction:column;}
.svc ul{margin-bottom:4px;}
.svc-cta{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--accent);}
.svc-cta .ic{width:16px;height:16px;transition:transform .18s;}
.svc-cta:hover .ic{transform:translate(2px,-2px);}
.cta-band{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:28px 32px;border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--surface);}
.cta-band .cb-text{flex:1 1 420px;min-width:0;}
.cta-band .cb-t{margin:0;font-family:var(--font-title);font-weight:700;font-size:clamp(19px,2vw,22px);line-height:1.3;color:var(--ink);text-wrap:balance;}
.cta-band .cb-s{margin:8px 0 0;font-size:15px;color:var(--body);max-width:62ch;text-wrap:pretty;}
.cta-band .cb-actions{display:flex;gap:12px;flex-wrap:wrap;}
.cta-band .btn svg,.contact-cta .btn svg,.sticky-cta .btn svg{width:16px;height:16px;}
.cta-band.strong{position:relative;overflow:hidden;isolation:isolate;border:0;background:linear-gradient(135deg,#4F0248,#8C0B80 70%,#A31896);padding:40px;}
.cta-band.strong::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.2) 1px,transparent 1.6px) 0 0/18px 18px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);}
.cta-band.strong .cb-t{color:#fff;font-size:clamp(24px,2.8vw,32px);font-weight:800;}
.cta-band.strong .cb-s{color:#F5D3F2;}
.cta-band.strong .btn{background:#fff;color:#8C0B80;border-color:#fff;}
.cta-band.strong .btn:hover{background:#F5D3F2;border-color:#F5D3F2;color:#4F0248;}
.cta-band.strong .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.cta-band.strong .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;}
.tz-note{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;color:var(--muted);}
.tz-note svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto;}
.sticky-cta{display:none;}
@media (max-width:720px){
.cta-band{padding:24px;}.cta-band.strong{padding:28px 24px;}
.cta-band .cb-actions,.cta-band .cb-actions .btn{width:100%;justify-content:center;}
.sticky-cta{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:80;padding:10px;border:1px solid var(--rule);border-radius:14px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);box-shadow:0 12px 32px -12px rgba(30,0,28,.35);transform:translateY(140%);transition:transform .3s var(--ease);}
.sticky-cta.on{transform:none;}
.sticky-cta .btn{flex:1;justify-content:center;}
.sticky-cta .btn.sq{flex:0 0 48px;padding:0;}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:56px;align-items:start;}
.faq-grid .sec-head{position:sticky;top:calc(var(--nav-h) + 32px);margin-bottom:0;}
.faq-list{border-top:1px solid var(--rule);}
.faq-item{border-bottom:1px solid var(--rule);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--font-title);font-weight:700;font-size:clamp(17px,1.7vw,19px);line-height:1.35;color:var(--ink);transition:color .18s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--accent);}
.faq-pm{position:relative;flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);transition:background-color .18s,border-color .18s,transform .25s var(--ease);}
.faq-pm::before,.faq-pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--accent);transition:transform .25s var(--ease),background-color .18s;}
.faq-pm::after{transform:rotate(90deg);}
.faq-item[open] .faq-pm{background:var(--accent);border-color:var(--accent);}
.faq-item[open] .faq-pm::before,.faq-item[open] .faq-pm::after{background:var(--on-accent);}
.faq-item[open] .faq-pm::after{transform:rotate(0);}
.faq-a{padding:0 52px 24px 0;color:var(--body);font-size:16px;line-height:1.65;}
.faq-a p{margin:0;}
.faq-a ul,.faq-a ol{margin:10px 0 0;padding-left:22px;}
.faq-a li+li{margin-top:6px;}
.faq-a li::marker{color:var(--accent);font-weight:600;}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr);gap:32px;}.faq-grid .sec-head{position:static;}.faq-a{padding-right:0;}}

/* form validation */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.field .ferr{display:block;min-height:0;font-size:13px;line-height:1.4;color:var(--err);margin-top:6px;}
.field .ferr:empty{display:none;}
.field input.invalid,.field textarea.invalid,.field select.invalid{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 14%,transparent);}
.cform-err{margin:4px 0 16px;padding:12px 16px;border:1px solid var(--err);border-left-width:3px;border-radius:0 var(--radius) var(--radius) 0;background:color-mix(in srgb,var(--err) 7%,var(--bg));color:var(--err);font-size:14.5px;line-height:1.5;}
.cform-err[hidden]{display:none;}
#cform-btn[disabled]{opacity:.7;cursor:progress;}
#cform-btn .spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   MOBILE PASS
   ============================================================ */
html,body{overflow-x:clip;}
img,svg,video{max-width:100%;}
input,select,textarea{font-size:16px;}
.btn,.filter,.chip,.lang button,.theme-toggle,.nav-burger,.faq-item summary{min-height:44px;}
.theme-toggle,.nav-burger{min-width:44px;}
.section{content-visibility:auto;contain-intrinsic-size:auto 900px;}
#hero,#contact{content-visibility:visible;}
@media (max-width:980px){
.faq-grid{grid-template-columns:minmax(0,1fr);}
.svc-grid,.edu-grid{grid-template-columns:minmax(0,1fr);}
.contact-grid{grid-template-columns:minmax(0,1fr);gap:40px;}}
@media (max-width:720px){
:root{--gut:20px;}
.nav .btn.ghost{display:none;}
.brand small{display:none;}
.hero{padding-top:32px;}
.hero h1{font-size:clamp(34px,10.5vw,48px);}
.hero .promise{font-size:19px;}
.hero-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.hero-cta .btn{justify-content:center;width:100%;}
.hero-media{order:-1;justify-content:center;}
.avatar-ring{width:min(62vw,240px);}
.hero-meta{margin-top:32px;}
.sec-head{margin-bottom:32px;}
.sec-title{font-size:clamp(24px,7vw,30px);}
.svc{padding:22px;}
.proj-grid,.quotes,.gallery,.post-cards{grid-template-columns:minmax(0,1fr)!important;}
.proj-top,.proj-body{padding-inline:20px;}
.quote{padding:22px;}
.quote .q-co{max-width:70%;}
.exp{grid-template-columns:minmax(0,1fr)!important;gap:8px;}
.edu{grid-template-columns:auto minmax(0,1fr);padding:20px;}
.trust-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}
.trust-item{border-right:0;}
.frow{grid-template-columns:minmax(0,1fr)!important;gap:0;}
#cform-btn{width:100%;justify-content:center;}
.clink{padding:14px 16px;}
.clink .ci .val{overflow-wrap:anywhere;}
.faq-item summary{padding:18px 0;font-size:16.5px;}
.foot .wrap{flex-direction:column;align-items:flex-start;gap:8px;}
body:has(.sticky-cta.on) .foot{padding-bottom:96px;}
.page-title{font-size:clamp(32px,9.5vw,44px);}
.blog-title{font-size:clamp(30px,9vw,40px);}
.post-title{font-size:clamp(28px,8.4vw,38px);}
.filters,.blog-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);}
.filters::-webkit-scrollbar,.blog-filters::-webkit-scrollbar{display:none;}
.filter{flex:0 0 auto;}
.table-wrap{margin-inline:calc(var(--gut)*-1);border-radius:0;border-inline:0;}
.prose pre{margin-inline:calc(var(--gut)*-1);border-radius:0;border-inline:0;}}
@media (max-width:380px){.hero-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.hero-meta .stat .n{font-size:26px;}}

@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)!important;}.hero-left,.hero-media{min-width:0;}}
@media (max-width:720px){
.nav .wrap{gap:10px;}
.brand{min-width:0;flex:1 1 auto;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.brand .dot{display:none;}
.nav-right{flex:0 0 auto;gap:6px;}
.lang button{padding-inline:8px;}
.hero h1{font-size:clamp(28px,9vw,44px);overflow-wrap:anywhere;}
.hero .role,.hero .promise{overflow-wrap:break-word;}}
@media (max-width:360px){.nav .lang{display:none;}}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--radius);font-weight:600;transition:top .18s;}
.skip:focus{top:12px;color:var(--on-accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}