/* ═══════════════════════════════════════════════════════
   MIHAI PETICĂ — SIGNAL / SYSTEM
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:#0A0A0C;
  --ink-2:#111016;
  --bone:#EDE7DB;
  --bone-dim:rgba(237,231,219,.78);   /* 08.09 contrast pick C: was .70 */
  --bone-faint:rgba(237,231,219,.6);   /* 08.09 contrast pick C: was .32 (1.7:1), now 5.8:1 on ink */
  --line:rgba(237,231,219,.13);
  --accent:#FF3D1F;
  --accent-2:#FF6A3D;
  --secondary:#00E0D8;
  --secondary-2:#4FEFE8;
  --secondary-rgb:0,224,216;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1680px;

  --f-display:'Bricolage Grotesque', system-ui, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;
  --f-mono:'Space Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --accent-rgb:255,61,31;
}

/* ── Theme palettes · dev switcher: ?theme=NAME or Shift+Alt+T. Default (:root) = vermilion ── */
[data-theme="vermilion"]{ --accent:#FF3D1F; --accent-2:#FF6A3D; --accent-rgb:255,61,31; --secondary:#00E0D8; --secondary-2:#4FEFE8; --secondary-rgb:0,224,216; }
[data-theme="indigo"]{ --accent:#6E5EF0; --accent-2:#9488F5; --accent-rgb:110,94,240; --secondary:#F0926B; --secondary-2:#F6B398; --secondary-rgb:240,146,107; }
[data-theme="cyberpunk"]{ --accent:#E6FF1A; --accent-2:#F2FF66; --accent-rgb:230,255,26; --secondary:#FF2E97; --secondary-2:#FF6FB8; --secondary-rgb:255,46,151; }
[data-theme="cyan-amber"]{ --accent:#00E0D8; --accent-2:#4FEFE8; --accent-rgb:0,224,216; --secondary:#FFB23D; --secondary-2:#FFC76E; --secondary-rgb:255,178,61; }
[data-theme="magenta-lime"]{ --accent:#FF2E97; --accent-2:#FF6FB8; --accent-rgb:255,46,151; --secondary:#B6FF3D; --secondary-2:#CDFF7A; --secondary-rgb:182,255,61; }
[data-theme="gold"]{ --accent:#E8B14C; --accent-2:#F4CE82; --accent-rgb:232,177,76; --secondary:#C56A3A; --secondary-2:#D98C5E; --secondary-rgb:197,106,58; }
[data-theme="coral"]{ --accent:#FF6B5C; --accent-2:#FF9385; --accent-rgb:255,107,92; --secondary:#2BC9A8; --secondary-2:#5CD9BF; --secondary-rgb:43,201,168; }
[data-theme="violet"]{ --accent:#8B5CF6; --accent-2:#A78BFA; --accent-rgb:139,92,246; --secondary:#C7F23D; --secondary-2:#D6F778; --secondary-rgb:199,242,61; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.15;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

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

a{ color:inherit; text-decoration:none; }
/* Chrome's UA sheet gives links cursor:pointer, beating body's inherited none — override so the custom ring is the only cursor */
a, button{ cursor:none; }
@media (hover:none){ a, button{ cursor:auto; } }
/* redline accent device (B, 20.08.2026): annotation underline, word keeps its font and color */
em{ font-style:normal; font-weight:inherit; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:.18em; }
code{ font-family:var(--f-mono); font-size:.85em; color:var(--accent-2); }

.accent{ text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:.18em; }
em.rl-off{ text-decoration:none; }

/* ── shared section frame ── */
section{ position:relative; padding-left:var(--pad); padding-right:var(--pad); }
/* A2 rule-anchored section label: vermilion index · mono name · hairline runs out */
.sec-num{
  display:flex; align-items:center; gap:16px; width:100%;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:2.4rem;
}
.sec-num i{ font-style:normal; color:var(--accent); }
.sec-num b{ font-weight:400; color:rgba(237,231,219,.72); }
.sec-num s{ text-decoration:none; flex:1; height:1px; background:var(--line); }
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em;
  color:var(--bone-dim); line-height:1.5;
}

/* ═══ OVERLAYS ═══ */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-5%)} 60%{transform:translate(-2%,4%)}
  80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8990; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* editorial grid guides removed 26.08.2026 (homepage polish item 1) */

/* ═══ CURSOR ═══ */
.cursor{ position:fixed; top:0; left:0; z-index:10000; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--bone); transform:translate(-50%,-50%);
  transition:opacity .25s;
}
.cursor__ring{
  position:absolute; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--bone); transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), opacity .3s;
}
.cursor.is-hover .cursor__ring{ width:64px; height:64px; }
.cursor.is-view .cursor__ring{
  width:96px; height:96px; background:var(--bone); border-color:transparent;
}
/* lens: cursor fully hidden — the clipped reveal circle is the cursor */
.cursor.is-lens .cursor__ring{ width:110px; height:110px; opacity:0; }
.cursor.is-lens .cursor__dot{ opacity:0; }
.cursor__label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  color:var(--ink); opacity:0; transition:opacity .25s; white-space:nowrap;
}
.cursor.is-view .cursor__label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }


/* ═══ NAV ═══ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:5000;
  display:flex; align-items:center; justify-content:space-between;
  /* inset matches the centered max-width content container so MP aligns with the hero on wide screens */
  padding:22px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  mix-blend-mode:difference;
  transition:background-color .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled{
  mix-blend-mode:normal;
  background:rgba(10,10,12,.5);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:15px; padding-bottom:15px;
}
.nav.scrolled .nav__mark,
.nav.scrolled .nav__links a,
.nav.scrolled .nav__status{ color:var(--bone); }
.nav__mark{ font-family:var(--f-display); font-weight:800; font-size:20px; letter-spacing:-.02em; }
.nav__mark span{ display:inline-block; }
/* blinking caret on the mark — the "cursor" (concept D) */
.nav__mark span::after{ content:"_"; color:var(--accent); margin-left:1px; animation:caret 1.1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
/* MP hover/ambient glitch — chromatic split + jitter; colors follow the active theme */
.nav__mark span{ will-change:transform; }
.nav__mark span.gl-chroma{ animation:mpChroma .32s linear 1; }
.nav__mark span.gl-jit{ animation:mpJit .26s steps(3) 1; }
@keyframes mpChroma{
  0%,100%{ text-shadow:none; transform:translateX(0); clip-path:inset(0); }
  20%{ text-shadow:2px 0 var(--accent-2),-2px 0 var(--accent); transform:translateX(-1px); }
  40%{ text-shadow:-2px 0 var(--accent-2),2px 0 var(--accent); transform:translateX(1px); clip-path:inset(15% 0 35% 0); }
  60%{ text-shadow:1px 0 var(--accent-2),-2px 0 var(--accent); transform:translateX(-1px); clip-path:inset(55% 0 8% 0); }
  80%{ text-shadow:2px 0 var(--accent-2),-1px 0 var(--accent); transform:translateX(1px); clip-path:inset(0); }
}
@keyframes mpJit{
  0%,100%{ transform:translate(0) skewX(0); }
  33%{ transform:translate(1px,-1px) skewX(-7deg); }
  66%{ transform:translate(-1px,1px) skewX(5deg); }
}
.nav__links{ display:flex; gap:2.2rem; margin-left:2.6rem; margin-right:auto; }
.nav__links a{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; position:relative;
}
/* rising section number on hover (concept D) */
.nav__links a::before{
  content:attr(data-n); position:absolute; left:0; bottom:calc(100% + 1px);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--accent-2);
  opacity:0; transform:translateY(5px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.nav__links a:hover::before{ opacity:1; transform:translateY(0); }
/* vermilion underline that draws (concept D) */
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px;
  background:var(--accent); transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__status{ display:flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim); transition:color .3s; }
.nav__status:hover{ color:var(--bone); }
.nav__dl{ color:var(--accent); }
.nav__right{ display:flex; align-items:center; gap:1.4rem; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)} 100%{box-shadow:0 0 0 10px rgba(var(--accent-rgb),0)} }
@media (max-width:760px){
  .nav__links{ display:none; }
  .eyebrow--right{ display:none; }
}

/* ═══ MOBILE NAV — TOGGLE + OVERLAY ═══ */
.nav__toggle{ display:none; }                    /* desktop: hidden — inline links stay */

.mobile-menu{
  position:fixed; inset:0; z-index:4900;         /* below .nav (5000): MP + × stay on top */
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad) 48px;
  background:var(--ink);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
body.menu-open .mobile-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .5s var(--ease);
}

.mobile-menu__links{ display:flex; flex-direction:column; }
.mobile-menu__links a{
  display:flex; align-items:baseline; gap:1rem; padding:.16em 0;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.6rem, 12vw, 4.2rem); line-height:1.06; letter-spacing:-.02em;
  color:var(--bone);
}
.mobile-menu__idx{
  font-family:var(--f-mono); font-weight:400; font-size:13px; letter-spacing:.04em;
  color:var(--accent);
}

.mobile-menu__foot{
  position:absolute; left:var(--pad); right:var(--pad); bottom:48px;
  display:flex; flex-direction:column; gap:.7rem;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
}
.mobile-menu__status{ display:flex; align-items:center; gap:.6rem; color:var(--bone); }
.mobile-menu__status i{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2.4s infinite; }
.mobile-menu__mail{ color:var(--bone-dim); }

@media (max-width:760px){
  .nav__status{ display:none; }                  /* relocated into the overlay */
  .nav__toggle{
    display:flex; align-items:center; justify-content:flex-end;
    width:44px; height:44px; margin-right:-10px;  /* 44px tap target; optical edge-align */
    background:none; border:0; padding:0; cursor:pointer; color:inherit;
  }
  .nav__toggle-box{ position:relative; display:block; width:26px; height:12px; }
  .nav__toggle-box i{
    position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
    transition:transform .35s var(--ease), opacity .2s var(--ease);
  }
  .nav__toggle-box i:nth-child(1){ top:0; }
  .nav__toggle-box i:nth-child(2){ bottom:0; }
}

/* open state */
body.menu-open{ overflow:hidden; }                         /* scroll-lock fallback (no-Lenis) */
body.menu-open .nav{ mix-blend-mode:normal; }              /* keep bar legible over overlay */
body.menu-open .nav__mark,
body.menu-open .nav__toggle{ color:var(--bone); }
body.menu-open .nav__toggle-box i:nth-child(1){ transform:translateY(5.25px) rotate(45deg); }
body.menu-open .nav__toggle-box i:nth-child(2){ transform:translateY(-5.25px) rotate(-45deg); }

/* ═══ HERO ═══ */
main{ position:relative; z-index:2; }
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:120px; padding-bottom:0;
  max-width:var(--maxw); margin:0 auto;
}
/* legibility scrim — darkens dots behind the (left-aligned) text, fades over open area */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.55) 32%, rgba(10,10,12,0) 60%),
    linear-gradient(to top, rgba(10,10,12,0.6) 0%, rgba(10,10,12,0) 16%);
}
@media (max-width:760px){
  /* text spans more of the width on mobile → broaden the scrim */
  .hero::before{ background:
    linear-gradient(100deg, rgba(10,10,12,0.92) 0%, rgba(10,10,12,0.7) 55%, rgba(10,10,12,0.15) 90%),
    linear-gradient(to top, rgba(10,10,12,0.6) 0%, rgba(10,10,12,0) 16%); }
}
.hero__bottom, .marquee{ position:relative; z-index:2; }
.eyebrow--right{ text-align:right; }
.hero__center{ margin:auto 0; position:relative; z-index:2; }
.hero__title{
  font-weight:800; font-size:clamp(72px,15vw,220px); line-height:.84;
  letter-spacing:-.04em; margin:0;
}

/* rotating role */
.hero__role{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin-top:clamp(18px,2.4vw,34px); }
.hero__role-at{ font-family:var(--f-mono); font-weight:400; font-size:clamp(12px,1.2vw,14px); letter-spacing:.12em; text-transform:uppercase; color:var(--bone-faint); margin-left:.35em; }
.roles{
  font-family:var(--f-display); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(26px,4.2vw,40px); line-height:1; color:var(--accent);
}
.hero__metric{ margin-top:clamp(14px,1.6vw,22px); font-family:var(--f-mono); font-size:clamp(11px,1.1vw,13px); letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); }
.nowrap{ white-space:nowrap; }
@media (max-width:700px){
  .hero__metric{ display:none; }
  /* small phones: air between hero blocks so the fold lands before the last logo row */
  .hero__role{ margin-top:30px; }
  .hero__bottom{ margin-top:40px; }
  .marquee__kicker{ margin-top:34px; }
}

/* registration marks */
.reg{ position:absolute; width:16px; height:16px; z-index:3; pointer-events:none; opacity:.45; }
.reg::before,.reg::after{ content:""; position:absolute; background:var(--bone-faint); }
.reg::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.reg::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.reg--tl{ top:96px; left:0; }
.reg--tr{ top:96px; right:0; }
.reg--bl{ bottom:84px; left:0; }
.reg--br{ bottom:84px; right:0; }
@media (max-width:760px){
  .reg--tl, .reg--tr{ top:80px; }
  .reg--bl, .reg--br{ bottom:70px; }
}

/* dot-matrix elevation field — full-bleed across the header */
.hero-art{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; z-index:0; pointer-events:none; display:block; }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero__title .word{ display:inline-block; transform:translateY(110%); }
.hero__title .accent{ text-decoration:none; }
.hero__bottom{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  padding-bottom:2rem;
}
.hero__lede{
  max-width:44ch; font-size:clamp(15px,1.5vw,20px); line-height:1.45;
  color:var(--bone); font-weight:400;
}
.hero__lede em{ color:var(--bone); }
.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:.8rem; font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; color:var(--bone-dim); }
.scroll-cue__dot{ animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(12px);opacity:0} 100%{opacity:0} }

/* client logos — hairline cell grid (same drawing language as the principles grid) */
.marquee__kicker{
  position:relative; z-index:2; display:block;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-faint); margin-bottom:12px;
}
.marquee{
  display:grid; grid-template-columns:repeat(8,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.marquee__cell{
  display:flex; align-items:center; justify-content:center;
  height:clamp(64px,6.5vw,84px); padding:0 10px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.marquee__logo{
  width:auto; height:auto; max-height:24px; max-width:78%;
  filter:brightness(0) invert(.85);          /* unify all logos to one bone tone */
  opacity:.55; transition:opacity .35s var(--ease), filter .35s var(--ease);
}
/* marks with internal two-tone detail (arch on tile, crest line work, reversed-out glyphs)
   keep their texture via luminance instead of being flattened to a silhouette */
.marquee__logo[alt="Real Madrid"],
.marquee__logo[alt="1&1"]{ filter:grayscale(1) brightness(1.25); opacity:.62; }
@media (hover:hover){
  /* one hover for all: brighter, still monochrome */
  .marquee__cell:hover .marquee__logo{ filter:brightness(0) invert(1); opacity:1; }
  .marquee__cell:hover .marquee__logo[alt="Real Madrid"],
  .marquee__cell:hover .marquee__logo[alt="1&1"]{ filter:grayscale(1) brightness(1.7); opacity:1; }
}
/* optical normalization — dense symbols run taller, heavy wordmarks run shorter */
.marquee__logo[alt="McDonald's"]{ max-height:20px; max-width:92%; }
.marquee__logo[alt="Real Madrid"]{ max-height:38px; }
.marquee__logo[alt="1&1"]{ max-height:26px; }
.marquee__logo[alt="Deloitte"]{ max-height:17px; }
.marquee__logo[alt="OMV Petrom"]{ max-height:17px; max-width:88%; }
.marquee__logo[alt="Cognizant"]{ max-height:20px; }
.marquee__logo[alt="Deutsche Bank"]{ max-height:24px; }
@media (max-width:1100px){ .marquee{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:600px){ .marquee{ grid-template-columns:repeat(2,1fr); } .marquee__cell{ height:64px; } }


[data-reveal-lines] .rl-line{ overflow:hidden; display:block; }
[data-reveal-lines] .rl-inner{ display:block; transform:translateY(110%); }

/* ═══ WORK ═══ */
.work{ max-width:var(--maxw); margin:0 auto; padding-top:8vh; padding-bottom:14vh; }
.work__head{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:1.2rem; }
.work__head .sec-num{ margin-bottom:0; flex:1; width:auto; }
.work__count{ font-family:var(--f-mono); font-size:12px; color:var(--bone-faint); letter-spacing:.1em; }
.work__list{ list-style:none; }
.work__item{ border-bottom:1px solid var(--line); }
.work__item a{
  display:grid; grid-template-columns:80px 1fr auto auto; align-items:center; gap:1.5rem;
  padding:clamp(20px,3.4vw,46px) 0; position:relative;
}
.work__idx{ font-family:var(--f-mono); font-size:13px; color:var(--bone-faint); }
.work__title{
  font-size:clamp(28px,5vw,80px); font-weight:500; letter-spacing:-.03em; line-height:.98; /* 08.09: was 5.4vw/86px, one-row titles */
  transition:transform .6s var(--ease), color .4s;
}
.work__meta{ font-family:var(--f-mono); font-size:12px; line-height:1.5; color:var(--bone-dim); text-align:right; }
.work__meta em{ color:var(--bone); font-size:13px; text-decoration:none; }
.work__arrow{ font-size:24px; color:var(--bone-faint); justify-self:end; margin-right:clamp(14px,2vw,28px); transition:transform .5s var(--ease), color .4s; }
@media (hover:hover){
  .work__item a:hover .work__title{ transform:translateX(28px); color:var(--accent); }
  .work__item a:hover .work__arrow{ transform:translate(8px,-8px); color:var(--accent); }
}
/* row imagery (26.08.2026, item 10): dimmed grayscale background, hover brings it up */
.work__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:grayscale(1) brightness(.62) contrast(.9); opacity:.18; pointer-events:none; /* 08.09 item 15: was .14 */
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.work__item a::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(10,10,12,.82) 38%, rgba(10,10,12,.3) 100%);
}
@media (hover:hover){
  .work__item a:hover .work__bg{ opacity:.5; filter:grayscale(.35) brightness(.75) contrast(.95); } /* 08.09 item 15: was .38 */
}
/* coming-soon row (08.09: McDonald's only, not shipping at launch): dimmed, no href, pill instead of arrow */
.work__item--soon .work__bg{ opacity:.08; }
.work__soon{
  justify-self:end; margin-right:clamp(14px,2vw,28px); font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  color:var(--bone-faint); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; white-space:nowrap;
}
.work__item--soon .work__title{ color:var(--bone-dim); }
@media (hover:hover){
  .work__item--soon a:hover .work__title{ transform:none; color:var(--bone); }
  .work__item--soon a:hover .work__bg{ opacity:.14; filter:grayscale(.8) brightness(.68) contrast(.9); }
}
@media (max-width:760px){ .work__soon{ grid-area:arrow; } }
@media (max-width:760px){
  .work__item a{
    grid-template-columns:1fr auto;
    grid-template-areas:"idx arrow" "title title" "meta meta";
    gap:.7rem 1rem; padding:30px 0; align-items:start;
  }
  .work__idx{ grid-area:idx; }
  .work__title{ grid-area:title; font-size:clamp(34px,9vw,52px); line-height:1.02; }
  .work__meta{ grid-area:meta; text-align:left; }
  .work__arrow{ grid-area:arrow; }
}

/* floating preview removed 26.08.2026 (homepage polish item 11) */

/* ═══ SPOTLIGHT ═══ */
.spot{ max-width:var(--maxw); margin:0 auto; padding-top:12vh; padding-bottom:14vh; }
.spot__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:start; }
.spot__title{ font-size:clamp(28px,3.1vw,48px); font-weight:500; letter-spacing:-.025em; line-height:1.06; margin-bottom:1.6rem; }
#ppanel4 .spot__title{ font-size:clamp(27px,2.93vw,45px); } /* ~5% smaller so "with the AI ... runs it." holds one row */
.spot__title em{ color:var(--bone-dim); }
.spot__body{ font-size:clamp(15px,1.4vw,18px); line-height:1.5; color:var(--bone-dim); max-width:none; margin-bottom:3rem; }
.spot__facts{ display:flex; flex-direction:column; gap:1.4rem; }
.fact{ border-top:1px solid var(--line); padding-top:1.1rem; }
.fact__k{ display:block; font-weight:700; font-size:15px; margin-bottom:.4rem; }
.fact__v{ display:block; font-size:14px; line-height:1.5; color:var(--bone-dim); }
.spot__right{ position:sticky; top:14vh; }
.spot__diagram{ width:100%; border:1px solid var(--line); border-radius:6px; display:block; }
.spot__caption{ display:block; margin-top:1rem; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:rgba(237,231,219,.72); }
.spot__caption i{ font-style:normal; color:rgba(var(--accent-rgb),.85); }
@media (max-width:900px){
  .spot__grid{ grid-template-columns:1fr; }
  .spot__right{ position:static; }
}

/* ═══ APPROACH ═══ */
.approach{ max-width:var(--maxw); margin:0 auto; padding-top:7vh; padding-bottom:14vh; }
.approach__intro{ font-size:clamp(20px,2.4vw,34px); font-weight:500; line-height:1.25; letter-spacing:-.02em; max-width:none; margin:1.2rem 0 2.4rem; }
.principles{ list-style:none; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.principle{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(20px,2vw,30px); position:relative; }
.principle__head{ display:flex; align-items:center; gap:14px; margin-bottom:.7rem; }
.principle__idx{ display:block; font-family:var(--f-mono); font-size:12px; color:rgba(var(--accent-rgb),.85); width:15px; flex:none; }
.principle__title{ font-size:clamp(18px,1.8vw,24px); font-weight:500; letter-spacing:-.01em; flex:1; }
.principle__icon{ width:96px; height:96px; position:absolute; top:clamp(14px,1.4vw,22px); right:clamp(16px,1.6vw,26px); }
.principle__head{ padding-right:104px; }
.principle__body{ font-size:15px; line-height:1.5; color:var(--bone-dim); max-width:42ch; text-wrap:pretty; margin-left:29px; }
/* tiles are real tabs: the proof panel below follows the selected tile */
.principle{ cursor:none; -webkit-tap-highlight-color:transparent; transition:background .3s var(--ease); }
@media (hover:none){ .principle{ cursor:pointer; } }
.principle:hover{ background:rgba(255,255,255,.02); }
.principle:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.principle.is-active{ box-shadow:inset 0 0 0 1px var(--accent); }
.principle__bar{ position:absolute; left:0; bottom:0; width:100%; height:2px; overflow:hidden; }
.principle__bar i{ display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left center; }
.principle.is-playing .principle__bar i{ animation:principleBar 10s linear forwards; }
.principle.is-paused .principle__bar i{ animation-play-state:paused; }
@keyframes principleBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (max-width:700px){
  .principles{ grid-template-columns:1fr; }
  /* keep the mini-mesh clear of the text on one-column cards */
  .principle{ padding-right:96px; }
  .principle__icon{ width:64px; height:64px; top:14px; right:14px; }
  .principle__head{ padding-right:0; }
}

.proof{ max-width:none; margin:clamp(22px,3vw,40px) 0 0; padding:clamp(24px,3vw,44px); border:1px solid var(--line); border-radius:8px; background-color:rgba(255,255,255,.018); background-image:radial-gradient(rgba(237,231,219,.05) 1px, transparent 1px); background-size:22px 22px; }
/* stacked tab panels: grid-area trick keeps container height = tallest panel, so switching never reflows the page */
.proof__panels{ display:grid; }
.proof__panel{ grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s linear .5s; }
.proof__panel.is-open{ opacity:1; visibility:visible; transition:opacity .5s var(--ease); }
/* mobile interleave (JS moves each panel into its card and sets body.proof-mobile) */
body.proof-mobile .proof{ display:none; }
body.proof-mobile .principle .proof__panel{
  opacity:1; visibility:visible; transition:none;
  margin:18px -82px 0 0; border-top:1px solid var(--line); padding-top:18px;
}
body.proof-mobile .principle .proof__label{ margin-bottom:1.1rem; }
.proof__label{ display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:1.6rem; }
/* inline Claude logo in the spotlight 04 headline */
.spot__claude{ display:inline-block; width:.82em; height:.82em; vertical-align:-.08em; margin:0 .04em; }
.proof__cta{ display:inline-flex; align-items:center; gap:.55em; margin-top:2.6rem; font-family:var(--f-mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; -webkit-text-stroke:.4px #fff; text-decoration:none; background:var(--accent); border-radius:8px; padding:12px 18px; transition:gap .25s, background .25s; } /* 08.09: a real button (same family as the case pages' .tl__cta), the arrow still slides on hover */
.proof__cta:hover{ background:var(--accent-2); gap:.85em; }
/* proof: two diagrams stacked in the right column */
.proof .spot__right{ position:static; top:auto; display:flex; flex-direction:column; gap:clamp(26px,3vw,46px); }
.proof__fig{ margin:0; }
.proof__zoom{ position:relative; display:block; width:100%; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:none; }
.proof__zoom:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.spot__hint{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--bone-faint); }

/* magnifier loupe (desktop pointer only) */
.loupe{ position:absolute; display:none; border-radius:50%; border:1.5px solid var(--accent); box-shadow:0 10px 40px rgba(0,0,0,.55); background-color:var(--ink); background-repeat:no-repeat; pointer-events:none; z-index:5; }

/* skip link (08.09, pick A): keyboard-only, first Tab stop on every page */
.skip{ position:fixed; left:16px; top:-60px; z-index:9999; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--bone); color:var(--ink); padding:12px 16px; border-radius:999px; text-decoration:none; transition:top .15s; }
.skip:focus{ top:16px; outline:2px solid var(--accent); outline-offset:3px; }
main:focus{ outline:none; }
/* focus ring (08.09, pick B): the accent ring the site already uses, on every focusable control */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* the Claude logo as a tooltip term (08.09, item 7): no redline, just the tip */
.term.term--logo, .term.term--logo:hover, .term.term--logo:focus-visible{ background:none; border:0; text-decoration:none; box-shadow:none; }

/* screen-reader-only text (heading levels fix, 08.09) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* diagram lightbox */
.lightbox{ position:fixed; inset:0; z-index:5100; display:none; background:rgba(8,8,10,.95); } /* above .nav (5000): the Close button must be hittable (08.09) */
.lightbox.is-open{ display:block; }
.lightbox__scroll{ position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; }
.lightbox__inner{ min-width:100%; min-height:100%; display:flex; padding:24px; box-sizing:border-box; }
.lightbox__img{ margin:auto; flex:none; width:clamp(1000px,88vw,1600px); max-width:none; height:auto; border:1px solid var(--line); border-radius:6px; }
.lightbox__close{ position:fixed; top:16px; right:20px; z-index:210; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(20,18,22,.85); color:var(--bone); font-size:24px; line-height:1; cursor:pointer; }
.lightbox__close:hover{ border-color:var(--accent); color:var(--accent); }
.lightbox__hint{ position:fixed; bottom:16px; left:0; right:0; text-align:center; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--bone-faint); pointer-events:none; }

/* ═══ ABOUT ═══ */
.about{ max-width:var(--maxw); margin:0 auto; padding-top:8vh; padding-bottom:7vh; }
.about__kicker{ display:block; font-family:var(--f-mono); font-size:clamp(12px,1vw,14px); letter-spacing:.04em; color:var(--accent); margin-bottom:1.4rem; }
/* head row rides the 4-col guide grid: statement (1-2) · portrait (3) · belief (4) */
.about__head{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; margin-bottom:clamp(44px,6vw,90px); }
.about__say{ grid-column:1/3; grid-row:1; padding-right:clamp(20px,3vw,52px); }

.about__statement{
  font-size:clamp(21px,2.9vw,46px); line-height:1.14; letter-spacing:-.02em;
  font-weight:500; max-width:25.2ch;
}
.about__statement em{ color:var(--accent); }

/* hoverable expertise terms + tooltip */
.term{
  color:var(--accent);
  border-bottom:1px dashed rgba(var(--accent-rgb),.45);
  cursor:none; white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
/* footnote marker: the "this is interactive" affordance */
.term::after{
  content:attr(data-fn);
  font-family:var(--f-mono); font-size:.42em; font-weight:700; letter-spacing:.08em;
  vertical-align:super; margin-left:.3em; color:var(--accent); opacity:.8;
}
.term:hover, .term:focus-visible{
  background:rgba(var(--accent-rgb),.13);
  border-bottom-style:solid; border-bottom-color:var(--accent);
}
.term--flow{ white-space:normal; }
@media (hover:none){ .term{ cursor:pointer; } }
.term:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.tooltip{
  position:fixed; z-index:1000; max-width:38ch;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events:none;
}
.tooltip.is-visible{ opacity:1; transform:translateY(0); }
.tooltip__kick{
  display:block; font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:7px;
}
.tooltip__body{ font-size:14px; line-height:1.55; white-space:pre-line; } /* pre-line: a tip can force its own line break (08.09, item 1) */

/* the terminal: SIGNAL territory, mono + scanlines + glow */
.tooltip--b{
  display:flex; align-items:flex-start; gap:14px;
  max-width:min(440px, 92vw);
  background:#0C0C10;
  background-image:repeating-linear-gradient(0deg, rgba(237,231,219,.03) 0 1px, transparent 1px 22px);
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:4px; padding:13px 17px 14px;
  box-shadow:0 10px 28px rgba(0,0,0,.45), 0 22px 52px rgba(0,0,0,.35);
}
/* rotating wireframe, drawn by main.js in the mesh-face language */
.tooltip__mesh{
  flex:0 0 auto; width:76px; height:76px;
  border:1px solid rgba(var(--accent-rgb),.28); border-radius:2px;
  background:radial-gradient(60% 60% at 50% 42%, rgba(var(--accent-rgb),.09), transparent 75%);
}
.tooltip__text{ min-width:0; }
.tooltip--b .tooltip__kick{ color:var(--accent); }
.tooltip--b .tooltip__kick::before{ content:"▮"; display:inline-block; width:14px; animation:tipBlink 1.1s steps(1) infinite; }
.tooltip--b .tooltip__body{ padding-left:14px; }
.tooltip--b .tooltip__body{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.65;
  letter-spacing:.01em; color:var(--bone);
}
@keyframes tipBlink{ 50%{ opacity:.15; } }

@media (prefers-reduced-motion:reduce){
  .tooltip--b .tooltip__kick::before{ animation:none; }
}
.about__band{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.about__cell{ padding:clamp(22px,2.6vw,40px) clamp(20px,2.2vw,36px); border-right:1px solid var(--line); }
.about__cell--bio{ padding-left:0; }
.about__cell--exp{ border-right:0; padding-right:0; }
.about__portrait{ margin:0; grid-column:3/5; grid-row:1; width:100%; }
/* teardrop: round everywhere, square at top-right */
.about__portrait-frame{ position:relative; width:min(440px,86%); margin-inline:auto; }
.about__portrait img{ display:block; width:100%; height:auto; aspect-ratio:1; border-radius:50% 0 50% 50%; border:1px solid var(--line); filter:grayscale(1) contrast(.92) brightness(.96); }
/* wireframe layer, revealed through a cursor-following lens (clip-path driven from main.js);
   the inner img is transformed so the render's features line up with the photo */
.about__portrait-mesh{
  position:absolute; inset:0; overflow:hidden; background:#050505;
  border-radius:50% 0 50% 50%;
  clip-path:circle(0px at 50% 50%);
}
/* wireframe painted in the theme accent through an alpha mask (white+alpha PNG) */
.about__portrait-mesh-ink{
  width:100%; aspect-ratio:1; background:var(--accent);
  -webkit-mask-image:url('public/mihai-petica-mesh-mask.png');
  mask-image:url('public/mihai-petica-mesh-mask.png');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  /* placement hand-calibrated by Mihai (06.08.2026) over a 50% blend of mesh and photo.
     NOTE: scale/translate are % of the frame — re-exporting the asset at another pixel
     size does NOT change these; only edit the numbers or re-frame the canvas content */
  transform-origin:0 0; transform:translate(7.75%,16.28%) scale(.8497);
}
@media (hover:none){ .about__portrait-mesh{ display:none; } }

.about__cell--bio p{ font-size:clamp(15px,1.3vw,17px); line-height:1.62; color:rgba(237,231,219,.78); margin:0; max-width:52ch; }
@media (max-width:900px){
  .about__head{ grid-template-columns:1fr; gap:24px; }
  .about__say{ grid-column:1; grid-row:1; padding-right:0; }
  .about__portrait{ grid-column:1; grid-row:2; }
  .about__statement{ max-width:none; }
  .about__portrait-frame{ width:min(440px,100%); margin-inline:0; }
  .about__band{ grid-template-columns:1fr; }
  .about__cell{ border-right:0; border-bottom:1px solid var(--line); padding-left:0; padding-right:0; }
  .about__cell--exp{ border-bottom:0; }
}
.about__expertise{ margin-top:0; }
.about__expertise-label{ display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:1.3rem; }
/* expertise ledger (variant A, 26.08.2026): numbered ruled rows */
.exp{ list-style:none; display:flex; flex-direction:column; max-width:620px; }
.exp li{ display:grid; grid-template-columns:26px 190px 1fr; gap:1.1rem; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); }
.exp__n{ font-family:var(--f-mono); font-size:12px; color:rgba(var(--accent-rgb),.85); }
.exp__group{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
.exp__items{ font-family:var(--f-mono); font-size:12.5px; line-height:1.75; color:rgba(237,231,219,.62); }
@media (max-width:520px){ .exp li{ grid-template-columns:26px 1fr; } .exp__items{ grid-column:2; } }



/* ═══ CONTACT ═══ */
.contact{ max-width:var(--maxw); margin:0 auto; padding-top:10vh; padding-bottom:6vh; }
.contact__big{
  display:block; font-size:clamp(48px,12vw,200px); font-weight:800; letter-spacing:-.04em; line-height:.86;
}
.contact__big .line{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.contact__big .word{ display:inline-block; }
.contact__big em{ color:var(--accent); }
@media (hover:hover){ .contact__big:hover em{ color:var(--bone); } }
.contact__row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:clamp(30px,6vw,80px); border-top:1px solid var(--line); padding-top:1.4rem; }
.contact__link{ font-family:var(--f-mono); font-size:clamp(14px,1.6vw,18px); letter-spacing:.02em; position:relative; }
.contact__link::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--accent); transition:width .4s var(--ease); }
.contact__link:hover::after{ width:100%; }

/* ═══ FOOTER ═══ */
.footer{
  max-width:var(--maxw); margin:0 auto; padding:2rem var(--pad);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; color:var(--bone-faint);
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .hero__title .word, [data-reveal-lines] .rl-inner{ transform:none !important; }
}