/* =========================================================
   MAHDI SAIAH — Portfolio
   Aesthetic: Exaggerated Minimalism
   Oversized type · warm paper · single hot accent · whitespace
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --paper:      #F5F4F2;   /* neutral near-white */
  --paper-2:    #E8E7E4;   /* raised grey surface */
  --ink:        #0F0F0F;   /* near-black */
  --ink-2:      #6C6C6C;   /* grey text */
  --ink-3:      #9E9E9E;   /* faint grey */
  --accent:     #0F0F0F;   /* mono: emphasis comes from value, not hue */
  --accent-ink: #0F0F0F;
  --line:       rgba(15,15,15,.13);
  --line-soft:  rgba(15,15,15,.07);
  --line-inv:   rgba(255,255,255,.14); /* dividers on dark sections */

  /* Connect brand: monochrome; logo is pure black */
  --teal:       #0F0F0F;
  --teal-2:     #3A3A3A;

  --maxw: 1360px;
  --gut: clamp(1.25rem, 5vw, 5.5rem);

  --f-display: 'Archivo', system-ui, sans-serif;
  --f-mono:    'Space Grotesk', ui-monospace, monospace;

  --sec-pad: clamp(5rem, 13vh, 11rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.15rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* faint paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
main,header,footer{ position:relative; z-index:1 }

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--accent); color:#fff }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.section{ padding-block:var(--sec-pad) }
.section--alt,.section--ink{
  max-width:none; width:100%; margin-inline:0;
  padding-inline:max(var(--gut), calc(50vw - (var(--maxw) / 2) + var(--gut)));
}
.section--alt{ background:var(--paper-2) }
.section--ink{ background:var(--ink); color:var(--paper) }

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--f-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow .idx{ color:var(--accent-ink) }
.section--ink .eyebrow{ color:#A9A9A9 } .section--ink .eyebrow .idx{ color:#FFFFFF }

.display{
  font-family:var(--f-display); font-weight:900;
  letter-spacing:-.045em; line-height:.86; text-transform:uppercase;
}
.h-sec{
  font-family:var(--f-display); font-weight:900; letter-spacing:-.04em;
  line-height:.9; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,6.5rem);
}
.lead{ font-size:clamp(1.2rem,1rem + 1.1vw,1.9rem); line-height:1.42; font-weight:500; letter-spacing:-.01em; max-width:22ch }
.muted{ color:var(--ink-2) }
.accent{ color:var(--accent-ink) }
.section--ink .accent{ color:#FFFFFF }
.serif-brand{ font-family:'Playfair Display',serif }

.reading{ max-width:60ch; color:var(--ink-2); font-size:1.06rem; line-height:1.7 }
.section--ink .reading{ color:#B2B2B2 }

/* ---------- Buttons / links ---------- */
.btn{
  --c:var(--ink);
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-weight:500; font-size:.85rem; letter-spacing:.04em;
  padding:.95rem 1.5rem; border-radius:999px; border:1.5px solid var(--c);
  color:var(--c); background:transparent; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--c); color:var(--paper); transform:translateY(-2px) }
.btn--accent{ --c:var(--ink); color:#fff; background:var(--ink); border-color:var(--ink) }
.btn--accent:hover{ background:#000; border-color:#000; color:#fff }
.section--ink .btn{ --c:var(--paper) }
.section--ink .btn:hover{ color:var(--ink) }
.section--ink .btn--accent{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.section--ink .btn--accent:hover{ background:#fff; border-color:#fff; color:var(--ink) }

.tlink{ position:relative; font-family:var(--f-mono); font-size:.9rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.45rem }
.tlink::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease) }
.tlink:hover{ color:var(--ink) }
.section--ink .tlink:hover{ color:#fff }
.tlink:hover::after{ transform:scaleX(1) }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gut);
  transform:translateY(0);
  transition:transform .45s var(--ease), background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.nav.scrolled{ background:rgba(245,244,242,.82); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line-soft); padding-block:.75rem }
.nav--hidden{ transform:translateY(-100%) }
body.menu-open .nav{ transform:none }
.nav__mark{ display:inline-flex; align-items:center; font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; font-size:1.2rem }
.nav__mark span{ color:var(--accent) }
.nav__logo{ height:28px; width:auto; display:block; transition:height .35s var(--ease) }
.nav.scrolled .nav__logo{ height:23px }
.nav__links{ display:flex; align-items:center; gap:clamp(1.05rem,1.7vw,2rem) }
.nav__links a{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); transition:color .2s }
.nav__links a:hover{ color:var(--ink) }
.nav__cta{ padding:.6rem 1.1rem; border:1.5px solid var(--ink); border-radius:999px; color:var(--ink)!important }
.nav__cta:hover{ background:var(--ink); color:var(--paper)!important }
.nav__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--ink); position:relative; transition:.3s var(--ease) }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:var(--ink); transition:.3s var(--ease) }
.nav__burger span::before{ top:-7px } .nav__burger span::after{ top:7px }
body.menu-open .nav__burger span{ background:transparent }
body.menu-open .nav__burger span::before{ top:0; transform:rotate(45deg) }
body.menu-open .nav__burger span::after{ top:0; transform:rotate(-45deg) }

.mobile-menu{
  position:fixed; inset:0; z-index:90; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem; padding:var(--gut);
  transform:translateY(-100%); transition:transform .5s var(--ease); pointer-events:none;
}
body.menu-open .mobile-menu{ transform:translateY(0); pointer-events:auto }
.mobile-menu a{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; font-size:clamp(2.2rem,10vw,3.4rem); line-height:1.1; color:var(--ink) }
.mobile-menu a:hover{ color:var(--ink-2) }
.mobile-menu .idx{ font-family:var(--f-mono); font-weight:500; font-size:.8rem; color:var(--ink-3); letter-spacing:.2em; vertical-align:super; margin-right:.6rem }

/* ---------- Hero ---------- */
.hero{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:8rem 4rem; position:relative }
.hero__eyebrow{ margin-bottom:clamp(1.5rem,4vh,2.6rem) }
.hero__name{ font-size:clamp(3.4rem,16vw,14rem) }
.hero__name .ln{ display:block; overflow:hidden }
.hero__role{
  margin-top:clamp(1.6rem,4vh,2.8rem);
  font-family:var(--f-mono); font-weight:500; font-size:clamp(.72rem,.6rem + .8vw,1.05rem);
  letter-spacing:.28em; text-transform:uppercase;
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center;
}
.hero__role .sep{ color:var(--ink-3) }
.hero__sub{ margin-top:clamp(2rem,5vh,3rem); max-width:34ch }
.hero__scroll{ position:absolute; bottom:2rem; left:var(--gut); display:flex; align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2) }
.hero__scroll .bar{ width:44px; height:1.5px; background:var(--ink-2); position:relative; overflow:hidden }
.hero__scroll .bar::after{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateX(-100%); animation:scrollbar 2.4s var(--ease) infinite }
@keyframes scrollbar{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ---------- Statement ---------- */
.statement__big{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; line-height:.98; font-size:clamp(2rem,6.2vw,5.2rem); max-width:20ch }
.statement__big .accent{ color:var(--accent) }
.section--ink .statement__big{ color:#C9C9C7 }
.section--ink .statement__big .accent{ color:#FFFFFF }
.roles{ margin-top:clamp(3rem,7vh,5.5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem) }
.role h3{ font-family:var(--f-display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; margin-bottom:.9rem; display:flex; align-items:baseline; gap:.7rem }
.role h3 .no{ font-family:var(--f-mono); font-weight:500; font-size:.8rem; color:#8C8C8C }
.role p{ color:#A6A6A6; font-size:1rem; line-height:1.6; max-width:34ch }

/* ---------- Section head ---------- */
.sec-head{ display:flex; flex-direction:column; gap:1.4rem; margin-bottom:clamp(2.5rem,6vh,4.5rem) }
.sec-head .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.rule{ height:1px; background:var(--line); width:100%; margin-top:1.6rem }

/* ---------- Connect ---------- */
.connect__intro{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:end }
.connect__wordmark{ font-family:'Playfair Display',serif; font-weight:700; color:var(--ink); font-size:clamp(3rem,9vw,7rem); line-height:1; letter-spacing:-.01em }
.connect__wordmark .dot{ color:var(--ink) }
.connect__tag{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--ink-2); margin-top:1.4rem }
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem }
.pill{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.05em; padding:.5rem .85rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-2) }
.pill--live{ border-color:var(--ink); color:var(--ink) }
.pill--live::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink); margin-right:.5rem; vertical-align:middle }

/* App Store badge */
.appstore{ display:inline-flex; align-items:center; gap:.8rem; margin-top:1.6rem; padding:.62rem 1.4rem .62rem 1.1rem; background:var(--ink); color:var(--paper); border-radius:13px; transition:transform .25s var(--ease), background .25s var(--ease) }
.appstore:hover{ transform:translateY(-2px); background:#000 }
.appstore__logo{ width:21px; height:21px; flex:none }
.appstore__txt{ display:flex; flex-direction:column; justify-content:center; gap:2px }
.appstore__sub{ font-family:var(--f-mono); font-size:.56rem; line-height:1; letter-spacing:.14em; text-transform:uppercase; opacity:.85 }
.appstore__store{ font-family:var(--f-display); font-weight:800; font-size:1.18rem; line-height:1; letter-spacing:-.01em }

/* feature grid */
.features{ margin-top:clamp(3rem,7vh,5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.feature{ background:var(--paper); padding:clamp(1.5rem,2.4vw,2.4rem); display:flex; flex-direction:column; gap:.9rem; transition:background .3s var(--ease) }
.section--alt .feature{ background:var(--paper-2) }
.feature:hover{ background:var(--ink); color:var(--paper) }
.feature:hover .feature__ico{ border-color:rgba(255,255,255,.4); color:#fff }
.feature:hover p{ color:#B0B0B0 }
.feature__ico{ width:46px; height:46px; border:1.5px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.3s var(--ease) }
.feature__ico svg{ width:22px; height:22px }
.feature h4{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em }
.feature p{ font-size:.92rem; line-height:1.55; color:var(--ink-2); transition:color .3s }

/* craft / tokens */
.craft{ margin-top:clamp(4rem,9vh,7rem); display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,2vw,2rem) }
.craft__lead{ grid-column:span 12; margin-bottom:1rem }
.card{ border:1px solid var(--line); border-radius:18px; padding:clamp(1.4rem,2.2vw,2rem); background:var(--paper); display:flex; flex-direction:column; gap:1.1rem }
.section--alt .card{ background:var(--paper) }
.card__label{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3) }
.card h4{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em }

.c-color{ grid-column:span 5 } .c-type{ grid-column:span 7 }
.c-space{ grid-column:span 4 } .c-icons{ grid-column:span 4 } .c-motion{ grid-column:span 4 }

.swatches{ display:flex; flex-wrap:wrap; gap:.6rem }
.sw{ flex:1 1 90px; min-width:90px; border-radius:12px; padding:.7rem .8rem; height:88px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line-soft) }
.sw b{ font-family:var(--f-mono); font-size:.66rem; font-weight:500; letter-spacing:.04em }
.sw span{ font-family:var(--f-mono); font-size:.62rem; opacity:.7 }

.typescale{ display:flex; flex-direction:column; gap:.55rem }
.typescale .t{ display:flex; align-items:baseline; gap:1rem; border-bottom:1px solid var(--line-soft); padding-bottom:.5rem }
.typescale .t .tag{ font-family:var(--f-mono); font-size:.64rem; color:var(--ink-3); width:74px; flex:none; letter-spacing:.06em }
.typescale .big{ font-family:'Playfair Display',serif; color:var(--teal); font-weight:700; font-size:1.9rem; line-height:1 }
.typescale .mid{ font-family:var(--f-display); font-weight:800; font-size:1.3rem }
.typescale .bod{ font-family:var(--f-display); font-weight:400; font-size:1rem; color:var(--ink-2) }
.typescale .lab{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2) }

.spacescale{ display:flex; align-items:flex-end; gap:.5rem; height:96px }
.spacescale .u{ background:var(--teal); border-radius:4px 4px 0 0; width:26px; opacity:.85; display:flex; align-items:flex-start; justify-content:center }
.spacescale .u i{ font-family:var(--f-mono); font-size:.58rem; color:#fff; font-style:normal; margin-top:.3rem }

.iconset{ display:flex; flex-wrap:wrap; gap:.7rem }
.iconset .i{ width:44px; height:44px; border:1px solid var(--line); border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--ink) }
.iconset .i svg{ width:20px; height:20px }

.motion-list{ display:flex; flex-direction:column; gap:.7rem }
.motion-list li{ list-style:none; font-family:var(--f-mono); font-size:.82rem; color:var(--ink-2); display:flex; gap:.6rem; align-items:center }
.motion-list li::before{ content:""; width:6px; height:6px; background:var(--accent); border-radius:50%; flex:none }

/* stack + stats */
.connect__foot{ margin-top:clamp(3.5rem,8vh,6rem); display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:start }
.stack-label{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.2rem }
.stack{ display:flex; flex-wrap:wrap; gap:.5rem }
.stack .t{ font-family:var(--f-mono); font-size:.82rem; padding:.55rem .9rem; border:1px solid var(--line); border-radius:8px; color:var(--ink) }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 2rem }
.stat b{ display:block; font-family:var(--f-display); font-weight:900; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.04em; line-height:1 }
.stat span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }

/* ---------- Work ---------- */
.work-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.8rem,4vh,3rem); border-top:1px solid var(--line-inv);
  transition:padding-left .4s var(--ease); position:relative;
}
.work-row:last-child{ border-bottom:1px solid var(--line-inv) }
.work-row:hover{ padding-left:1.2rem }
.work-row__no{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink-3); letter-spacing:.1em; transition:color .3s }
.work-row:hover .work-row__no{ color:#fff }
.work-row__mid{ display:flex; flex-direction:column; gap:.5rem }
.work-row__title{ font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; text-transform:uppercase; font-size:clamp(1.8rem,5.5vw,4rem); line-height:.95; transition:opacity .3s }
.work-row:hover .work-row__title{ opacity:.55 }
.work-row__desc{ color:#A6A6A6; max-width:52ch; font-size:1rem }
.work-row__meta{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-self:end }
.work-row__meta .t{ font-family:var(--f-mono); font-size:.72rem; color:#B0B0B0; padding:.4rem .7rem; border:1px solid var(--line-inv); border-radius:999px }
.work-row__arrow{ width:26px; height:26px; color:var(--ink-3); transition:.3s var(--ease); flex:none }
.work-row:hover .work-row__arrow{ color:#fff; transform:translate(4px,-4px) }
.work-note{ margin-top:2.4rem; font-family:var(--f-mono); font-size:.8rem; color:var(--ink-3); letter-spacing:.04em }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid rgba(245,244,242,.16); padding-block:1.6rem; margin-top:clamp(3rem,7vh,5rem) }
.marquee__track{ display:flex; gap:3.5rem; width:max-content; animation:marq 32s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee span{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.6rem,4vw,3rem); color:transparent; -webkit-text-stroke:1.3px rgba(245,244,242,.5); white-space:nowrap }
.marquee span.on{ color:var(--paper); -webkit-text-stroke:0 }
@keyframes marq{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none } .hero__scroll .bar::after{ animation:none } }

/* ---------- Toolkit ---------- */
.disciplines{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(2.5rem,6vh,4rem) }
.disc{ background:var(--paper); padding:clamp(1.6rem,2.6vw,2.6rem); display:flex; flex-direction:column; gap:1rem }
.disc h4{ font-family:var(--f-display); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; display:flex; align-items:center; gap:.8rem }
.disc h4 svg{ width:24px; height:24px; color:var(--accent) }
.disc__tools{ display:flex; flex-wrap:wrap; gap:.5rem }
.disc__tools .t{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-2); padding:.45rem .8rem; background:var(--paper-2); border-radius:7px }

/* ---------- About / Career ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); margin-top:clamp(2rem,5vh,3.5rem) }
.timeline{ display:flex; flex-direction:column }
.tl-head{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.4rem }
.tl-item{ padding-block:1.1rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.3rem }
.tl-item:first-of-type{ border-top:none }
.tl-item .yr{ font-family:var(--f-mono); font-size:.74rem; color:var(--ink-2) }
.tl-item .ti{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em }
.tl-item .pl{ color:var(--ink-2); font-size:.92rem }

/* ---------- Process (How I work) ---------- */
.process{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(3rem,7vh,5rem) }
.pstep{ background:var(--paper); padding:clamp(1.4rem,2.4vw,2.2rem); display:flex; flex-direction:column; gap:.6rem }
.pstep__no{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink-3); letter-spacing:.12em }
.pstep h4{ font-family:var(--f-display); font-weight:800; font-size:1.25rem; letter-spacing:-.02em }
.pstep p{ font-size:.94rem; line-height:1.55; color:var(--ink-2) }
@media (max-width:820px){ .process{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .process{ grid-template-columns:1fr } }

/* ---------- Experience (About) ---------- */
.exp{ padding-block:1.3rem; border-top:1px solid var(--line) }
.exp:first-of-type{ border-top:none; padding-top:.2rem }
.exp__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap }
.exp__co{ font-family:var(--f-display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em }
.exp__yr{ font-family:var(--f-mono); font-size:.74rem; color:var(--ink-2); white-space:nowrap }
.exp__role{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink-2); margin:.4rem 0 .9rem }
.exp__list{ list-style:none; display:flex; flex-direction:column; gap:.55rem }
.exp__list li{ position:relative; padding-left:1.1rem; font-size:.95rem; line-height:1.55; color:var(--ink-2) }
.exp__list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; background:var(--ink); border-radius:50% }

/* ---------- Languages (About) ---------- */
.langs{ margin-top:2.6rem }
.lang-row{ display:flex; justify-content:space-between; align-items:baseline; padding-block:.7rem; border-top:1px solid var(--line) }
.lang-row:first-of-type{ border-top:none }
.lang-name{ font-family:var(--f-display); font-weight:600; font-size:1.02rem }
.lang-lvl{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink-2) }

/* ---------- Language toggle ---------- */
.lang-toggle{ display:inline-flex; align-items:center; gap:.25rem; font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em }
.lang-toggle button{ background:none; border:none; cursor:pointer; color:var(--ink-3); font:inherit; letter-spacing:inherit; padding:.2rem .15rem; transition:color .2s }
.lang-toggle button:hover{ color:var(--ink) }
.lang-toggle button.on{ color:var(--ink); font-weight:600 }
.lang-toggle .lsep{ color:var(--ink-3) }
.mobile-menu__lang{ margin-top:2.4rem; font-size:1.15rem; gap:.4rem }

/* ---------- Contact ---------- */
.contact__big{ font-family:var(--f-display); font-weight:900; letter-spacing:-.045em; line-height:.88; text-transform:uppercase; font-size:clamp(2.8rem,12vw,10rem) }
.contact__big a:hover{ color:#fff }
.contact__row{ margin-top:clamp(2.5rem,6vh,4rem); display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; align-items:center }
.contact__links{ display:flex; flex-wrap:wrap; gap:1.6rem }

/* ---------- Footer ---------- */
.footer{ padding-block:3rem; border-top:1px solid rgba(245,244,242,.14); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem }
.footer .m{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; color:#8A8A8A }
.footer .m a:hover{ color:#fff }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .connect__intro{ grid-template-columns:1fr; gap:2rem }
  .connect__foot{ grid-template-columns:1fr }
  .c-color,.c-type,.c-space,.c-icons,.c-motion{ grid-column:span 6 }
  .about-grid{ grid-template-columns:1fr }
}
@media (max-width: 820px){
  .nav__links{ display:none }
  .nav__burger{ display:flex }
  .roles{ grid-template-columns:1fr; gap:2rem }
  .features{ grid-template-columns:1fr 1fr }
  .features .feature:last-child{ grid-column:1 / -1 }
  .disciplines{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .features{ grid-template-columns:1fr }
  .c-color,.c-type,.c-space,.c-icons,.c-motion{ grid-column:span 12 }
  .stats{ grid-template-columns:1fr 1fr }
  .work-row{ grid-template-columns:1fr; gap:.8rem }
  .work-row__meta{ justify-self:start } .work-row__arrow{ display:none }
  .contact__row{ flex-direction:column; align-items:flex-start }
}

/* =========================================================
   PROJECT / CASE-STUDY PAGES
   (Empreintes · 3D Craft · Mémoire — same system, own pages)
   ========================================================= */
.proj{ padding-top:clamp(6.5rem,14vh,9rem) }

/* back link */
.proj-back{
  display:flex; width:max-content; max-width:100%; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); transition:color .2s var(--ease), gap .25s var(--ease);
}
.proj-back svg{ width:16px; height:16px }
.proj-back:hover{ color:var(--ink); gap:.9rem }

/* hero */
.proj-hero{ padding-top:clamp(1.6rem,4vh,2.6rem); padding-bottom:clamp(2.5rem,6vh,4.5rem) }
.proj-hero .eyebrow{ margin-bottom:clamp(1.4rem,3.5vh,2.2rem) }
.proj-title{
  font-family:var(--f-display); font-weight:900; letter-spacing:-.045em;
  line-height:.86; text-transform:uppercase; font-size:clamp(3rem,13vw,10rem);
}
.proj-title .serif-brand{ text-transform:none; font-weight:700; letter-spacing:-.01em }
.proj-role{
  margin-top:clamp(1.2rem,3vh,2rem);
  font-family:var(--f-mono); font-weight:500; font-size:clamp(.72rem,.6rem + .7vw,1rem);
  letter-spacing:.26em; text-transform:uppercase;
  display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; align-items:center;
}
.proj-role .sep{ color:var(--ink-3) }
.proj-lead{ margin-top:clamp(1.8rem,4.5vh,2.8rem); max-width:56ch }
.proj-meta{
  margin-top:clamp(2.2rem,5vh,3.4rem);
  display:grid; grid-template-columns:repeat(3,minmax(0,auto)); gap:1.4rem 3.4rem;
  border-top:1px solid var(--line); padding-top:clamp(1.4rem,3vh,2rem);
}
.proj-meta .pm span{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem }
.proj-meta .pm b{ font-family:var(--f-display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em }

/* generic section head inside a project page */
.proj-sec{ padding-block:clamp(2rem,5vh,3.5rem) }
.proj-sec__head{ margin-bottom:clamp(2rem,5vh,3.2rem); display:flex; flex-direction:column; gap:1rem }
.proj-sec__head h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; text-transform:uppercase; line-height:.92; font-size:clamp(1.8rem,5.5vw,3.6rem) }

/* ---------- Empreintes: chaptered video figures ---------- */
.vfigs{ display:flex; flex-direction:column; gap:clamp(3rem,8vh,6rem) }
.vfig__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.1rem }
.vfig__ch{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.14em; color:var(--ink-3); flex:none }
.vfig__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,3.5vw,2.2rem); letter-spacing:-.02em; line-height:1 }
.vframe{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line); cursor:pointer;
}
.section--ink .vframe{ border-color:var(--line-inv); background:#1a1a1a }
.vframe video{ width:100%; height:100%; object-fit:cover; display:block }
.vframe__badge{
  position:absolute; left:1rem; bottom:1rem; z-index:3;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .8rem; border-radius:999px;
  background:rgba(15,15,15,.62); color:#fff; backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.vframe:hover .vframe__badge{ opacity:1 }
.vframe__badge svg{ width:13px; height:13px }
.vfig__cap{ margin-top:1rem; color:var(--ink-2); max-width:60ch; font-size:1rem; line-height:1.6 }
.section--ink .vfig__cap{ color:#B2B2B2 }

/* ---------- 3D Craft: editorial gallery + lightbox ---------- */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.7rem,1.4vw,1.1rem) }
.shot{
  position:relative; grid-column:span 6; aspect-ratio:16/9; overflow:hidden;
  border-radius:12px; border:1px solid var(--line); background:var(--paper-2);
  cursor:zoom-in;
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .4s var(--ease) }
.shot::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.shot:hover img{ transform:scale(1.045) }
.shot__zoom{
  position:absolute; top:.7rem; right:.7rem; z-index:2; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; border-radius:9px;
  background:rgba(15,15,15,.55); color:#fff; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-4px); transition:.3s var(--ease);
}
.shot__zoom svg{ width:16px; height:16px }
.shot:hover .shot__zoom{ opacity:1; transform:none }
.shot--feature{ grid-column:span 12; aspect-ratio:21/9 }
.shot--wide{ grid-column:span 7 } .shot--narrow{ grid-column:span 5 }

/* immersive lightbox */
.lb{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3.5rem);
  background:rgba(12,12,12,.72); backdrop-filter:blur(20px) saturate(1.05);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lb.open{ opacity:1; visibility:visible }
.lb__img{ max-width:min(1400px,100%); max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.97); transition:transform .45s var(--ease) }
.lb.open .lb__img{ transform:scale(1) }
.lb__btn{
  position:absolute; width:52px; height:52px; border:none; cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px); transition:background .25s var(--ease), transform .25s var(--ease);
}
.lb__btn:hover{ background:rgba(255,255,255,.22) }
.lb__btn svg{ width:22px; height:22px }
.lb__close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem) }
.lb__prev{ left:clamp(.6rem,2vw,1.6rem); top:50%; transform:translateY(-50%) }
.lb__next{ right:clamp(.6rem,2vw,1.6rem); top:50%; transform:translateY(-50%) }
.lb__prev:hover{ transform:translateY(-50%) scale(1.06) } .lb__next:hover{ transform:translateY(-50%) scale(1.06) }
.lb__count{
  position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; color:rgba(255,255,255,.8);
}
@media (prefers-reduced-motion: reduce){ .lb,.lb__img,.shot img{ transition:none } }

/* ---------- Mémoire: full title, structure, reader ---------- */
.proj-fulltitle{
  margin-top:clamp(1.4rem,3.5vh,2.2rem); max-width:22ch;
  font-family:'Playfair Display',serif; font-weight:600; font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2.6rem); line-height:1.12; letter-spacing:-.01em; color:var(--ink);
}
.mem-structure{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(2rem,5vh,3rem) }
.mem-part{ background:var(--paper); padding:clamp(1.4rem,2.4vw,2.2rem); display:flex; flex-direction:column; gap:.7rem }
.section--alt .mem-part{ background:var(--paper) }
.mem-part__no{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; color:var(--ink-3) }
.mem-part h4{ font-family:var(--f-display); font-weight:800; font-size:1.12rem; letter-spacing:-.01em; line-height:1.15 }
.mem-part p{ font-size:.92rem; line-height:1.55; color:var(--ink-2) }
@media (max-width:820px){ .mem-structure{ grid-template-columns:1fr } }

/* Heritage callout */
.heritage-note{
  margin-top:clamp(2rem,5vh,3rem); border:1px solid var(--line); border-radius:16px;
  padding:clamp(1.6rem,3vw,2.4rem); background:var(--paper);
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start;
}
.section--alt .heritage-note{ background:var(--paper-2) }
.heritage-note__ico{ width:46px; height:46px; border:1.5px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--ink) }
.heritage-note__ico svg{ width:24px; height:24px }
.heritage-note b{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; display:block; margin-bottom:.4rem }
.heritage-note p{ color:var(--ink-2); font-size:.98rem; line-height:1.6; max-width:60ch }

/* windowed page reader (no download, images only) */
.reader{ position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper-2) }
.reader__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.2rem; border-bottom:1px solid var(--line); background:var(--paper);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.reader__bar .doc{ display:inline-flex; align-items:center; gap:.55rem }
.reader__bar .doc svg{ width:15px; height:15px }
.reader__scroll{
  max-height:82vh; overflow-y:auto; scroll-behavior:smooth; overscroll-behavior:contain;
  padding:clamp(.9rem,2.2vw,1.8rem); display:flex; flex-direction:column; gap:clamp(.9rem,2vw,1.5rem);
  scrollbar-width:thin; scrollbar-color:var(--ink-3) transparent;
}
.reader__scroll::-webkit-scrollbar{ width:9px }
.reader__scroll::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:9px; border:2px solid var(--paper-2) }
.reader__page{ flex:0 0 auto; border-radius:5px; overflow:hidden; box-shadow:0 6px 26px rgba(0,0,0,.1); background:#fff }
.reader__page img{ width:100%; display:block; min-height:60px }
.reader__ind{
  position:absolute; bottom:1.1rem; right:1.1rem; z-index:3; pointer-events:none;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  padding:.45rem .8rem; border-radius:999px; background:rgba(15,15,15,.82); color:#fff; backdrop-filter:blur(6px);
}

/* CV read-only viewer */
.cv-view{
  margin-top:clamp(2rem,5vh,3.5rem); max-width:820px;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.08);
  background:#fff;
}
.cv-view img{ width:100%; display:block }
.cv-view.zoomable{ cursor:zoom-in }
.cv-note{ margin-top:1.1rem; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em; color:var(--ink-3) }

/* interactive 3D model (model-viewer) */
.model3d{
  position:relative; margin-top:clamp(2rem,5vh,3rem);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; aspect-ratio:16/10;
  background:radial-gradient(120% 120% at 50% 15%, var(--paper) 0%, var(--paper-2) 70%, #dcdbd7 100%);
}
.model3d model-viewer{ width:100%; height:100%; background:transparent; --poster-color:transparent }
.model3d__hint{
  position:absolute; left:1rem; bottom:1rem; z-index:2; pointer-events:none;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .85rem; border-radius:999px; background:rgba(15,15,15,.72); color:#fff; backdrop-filter:blur(8px);
  opacity:1; transition:opacity .4s var(--ease);
}
.model3d.interacted .model3d__hint{ opacity:0 }
.model3d__hint svg{ width:14px; height:14px }
.model3d__tag{
  position:absolute; right:1rem; top:1rem; z-index:2;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  padding:.4rem .75rem; border:1px solid var(--line); border-radius:999px; background:rgba(245,244,242,.7); backdrop-filter:blur(6px);
}

/* ---------- Mémoire: document layout ---------- */
.memoire-abstract{ max-width:64ch }
.memoire-abstract p{ color:var(--ink-2); font-size:1.08rem; line-height:1.75; margin-bottom:1.1rem }
.memoire-abstract p:last-child{ margin-bottom:0 }
.mem-topics{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:clamp(1.6rem,4vh,2.4rem) }
.mem-topics .t{ font-family:var(--f-mono); font-size:.8rem; padding:.5rem .9rem; border:1px solid var(--line); border-radius:999px; color:var(--ink) }
.pdf-frame{
  margin-top:clamp(2.5rem,6vh,4rem); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--paper-2); aspect-ratio:1/1.29; max-height:90vh;
}
.pdf-frame iframe{ width:100%; height:100%; border:0; display:block }
.pdf-pending{
  margin-top:clamp(2.5rem,6vh,4rem); border:1.5px dashed var(--line); border-radius:16px;
  padding:clamp(2rem,6vw,4rem); text-align:center; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.pdf-pending svg{ width:38px; height:38px; color:var(--ink-3) }
.pdf-pending b{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; letter-spacing:-.01em }
.pdf-pending p{ color:var(--ink-2); max-width:44ch; font-size:.98rem }

/* ---------- next-project pager ---------- */
.next-proj{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(2rem,5vh,3.4rem); border-top:1px solid var(--line-inv);
  transition:padding-left .4s var(--ease);
}
.next-proj:hover{ padding-left:1.2rem }
.next-proj__kick{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3) }
.next-proj__title{ font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; text-transform:uppercase; font-size:clamp(1.8rem,5.5vw,4rem); line-height:.95; transition:opacity .3s }
.next-proj:hover .next-proj__title{ opacity:.55 }
.next-proj__arrow{ width:30px; height:30px; color:var(--ink-3); transition:.3s var(--ease); flex:none }
.next-proj:hover .next-proj__arrow{ color:#fff; transform:translate(5px,-5px) }

@media (max-width: 900px){
  .gallery{ gap:.7rem }
  .shot,.shot--wide,.shot--narrow{ grid-column:span 12 }
  .shot--feature{ grid-column:span 12; aspect-ratio:16/9 }
}
@media (max-width: 640px){
  .proj-meta{ grid-template-columns:1fr 1fr; gap:1.4rem 2rem }
  .next-proj__arrow{ display:none }
}

/* =========================================================
   CONNECT FLAGSHIP SHOWCASE (real app screenshots)
   ========================================================= */
/* phone frame */
.phone{
  position:relative; aspect-ratio:1206/2622; border-radius:clamp(20px,2.6vw,34px);
  overflow:hidden; background:#fff; border:1px solid rgba(15,15,15,.10);
  box-shadow:0 26px 54px -16px rgba(15,15,15,.34), 0 4px 14px -6px rgba(15,15,15,.16);
  cursor:zoom-in; transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.phone img{ width:100%; height:100%; object-fit:cover; display:block }
.phone:hover{ transform:translateY(-10px); box-shadow:0 40px 80px -18px rgba(15,15,15,.42), 0 6px 16px -6px rgba(15,15,15,.18) }
.phone--dark{ background:#0b0b0b }
.section--ink .phone{ border-color:rgba(255,255,255,.12); box-shadow:0 30px 60px -18px rgba(0,0,0,.6) }

/* hero fan */
.connect-hero{ padding-bottom:0 }
.hero-fan{
  margin-top:clamp(2.5rem,7vh,5rem); display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,2.4rem); align-items:center; max-width:940px;
}
.hero-fan .phone{ transition:transform .6s var(--ease), box-shadow .55s var(--ease) }
@media (min-width:820px){
  .hero-fan .phone{ transform:rotate(-5deg) }
  .hero-fan .phone:nth-child(2){ transform:translateY(-2.4rem) scale(1.06); z-index:3 }
  .hero-fan .phone:nth-child(3){ transform:rotate(5deg) }
  .hero-fan .phone:hover{ transform:translateY(-12px) rotate(0deg) scale(1.02); z-index:5 }
}

/* feature block */
.feat__lead{ max-width:56ch }
.phones{ margin-top:clamp(2.4rem,6vh,4rem); display:grid; gap:clamp(1.1rem,2.4vw,2rem); align-items:start }
.phones--2{ grid-template-columns:repeat(2,1fr); max-width:620px }
.phones--3{ grid-template-columns:repeat(3,1fr) }
.phones--4{ grid-template-columns:repeat(4,1fr) }
.phone-card{ display:flex; flex-direction:column; gap:1rem }
.phone-card .cap{ display:flex; flex-direction:column; gap:.35rem }
.phone-card .cap .n{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--ink-3) }
.phone-card .cap .n b{ color:var(--ink); font-weight:600 }
.section--ink .phone-card .cap .n b{ color:#fff }
.phone-card .cap p{ font-size:.9rem; line-height:1.5; color:var(--ink-2) }
.section--ink .phone-card .cap p{ color:#B0B0B0 }
/* desktop rhythm */
@media (min-width:900px){
  .phones--3 .phone-card:nth-child(2){ transform:translateY(-2rem) }
  .phones--4 .phone-card:nth-child(2){ transform:translateY(-1.6rem) }
  .phones--4 .phone-card:nth-child(4){ transform:translateY(-1.6rem) }
}

/* solo (chat) */
.phone-solo{ margin-top:clamp(2rem,5vh,3.5rem); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:center }
.phone-solo .phone{ max-width:320px }
.solo-copy h3{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.5rem,3.5vw,2.4rem); letter-spacing:-.02em; line-height:1.05 }
.solo-copy .reading{ margin-top:1.2rem }
.solo-facts{ margin-top:clamp(1.6rem,4vh,2.4rem); display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line) }
.solo-facts > div{ background:var(--paper); padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.3rem }
.section--alt .solo-facts > div{ background:var(--paper-2) }
.solo-facts dt{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3) }
.solo-facts dd{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em }

/* AI list */
.ai-pull{ margin-top:1rem; max-width:60ch }
.ai-pull .big{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.4rem,3.6vw,2.4rem); letter-spacing:-.02em; line-height:1.1 }
.ai-pull .big em{ font-style:normal; color:var(--ink) }
.section--ink .ai-pull .big{ color:#C9C9C7 } .section--ink .ai-pull .big em{ color:#fff }
.ai-pull .sub{ margin-top:1rem; font-family:var(--f-mono); font-size:.82rem; line-height:1.6; color:var(--ink-2) }
.ai-list{ margin-top:clamp(2.4rem,6vh,4rem); border-top:1px solid var(--line-inv) }
.ai-row{ display:grid; grid-template-columns:minmax(150px,.5fr) 1fr; gap:clamp(1rem,4vw,4rem); padding-block:clamp(1.6rem,3.5vh,2.6rem); border-bottom:1px solid var(--line-inv) }
.ai-key{ display:flex; align-items:baseline; gap:.8rem }
.ai-key span{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink-3) }
.ai-key b{ font-family:var(--f-display); font-weight:800; font-size:1.4rem; letter-spacing:-.02em }
.section--ink .ai-key b{ color:#fff }
.ai-body h4{ font-family:var(--f-display); font-weight:700; font-size:1.14rem; letter-spacing:-.01em; margin-bottom:.6rem; line-height:1.25 }
.ai-body p{ font-size:.98rem; line-height:1.6; color:var(--ink-2); max-width:62ch }
.section--ink .ai-body p{ color:#AEAEAE }
.ai-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
.ai-tags span{ font-family:var(--f-mono); font-size:.72rem; padding:.4rem .75rem; border:1px solid var(--line-inv); border-radius:999px; color:var(--ink-2) }
.section--ink .ai-tags span{ color:#B0B0B0 }

/* pricing */
.price-grid{ margin-top:clamp(2.4rem,6vh,4rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.5vw,2rem) }
.price-col{ border:1px solid var(--line); border-radius:18px; padding:clamp(1.6rem,3vw,2.4rem); background:var(--paper) }
.section--alt .price-col{ background:var(--paper-2) }
.price-col--pro{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.price-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:1.2rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line) }
.price-col--pro .price-head{ border-color:var(--line-inv) }
.price-head h3{ font-family:var(--f-display); font-weight:900; font-size:1.5rem; letter-spacing:-.02em; text-transform:uppercase }
.price-head .amt{ font-family:var(--f-display); font-weight:900; font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.03em }
.price-list{ list-style:none; display:flex; flex-direction:column; gap:1.1rem }
.price-list li{ display:flex; flex-direction:column; gap:.3rem }
.price-list .k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.price-col--pro .price-list .k{ color:#9A9A9A }
.price-list b{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em }
.price-list p{ font-size:.92rem; line-height:1.5; color:var(--ink-2) }
.price-col--pro .price-list p{ color:#B0B0B0 }

/* home flagship link card */
.flagship-cta{
  margin-top:clamp(2.5rem,6vh,4rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line); border-radius:16px;
  background:var(--paper); transition:background .3s var(--ease), transform .3s var(--ease);
}
.flagship-cta:hover{ background:var(--ink); transform:translateY(-3px) }
.flagship-cta:hover *{ color:var(--paper) }
.flagship-cta:hover .flagship-cta__sub{ color:#B0B0B0 }
.flagship-cta__t{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.2rem,3vw,1.7rem); letter-spacing:-.02em }
.flagship-cta__sub{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-2); margin-top:.35rem }
.flagship-cta__arrow{ width:30px; height:30px; color:var(--ink); flex:none; transition:transform .3s var(--ease) }
.flagship-cta:hover .flagship-cta__arrow{ color:#fff; transform:translate(4px,-4px) }

@media (max-width:900px){
  .ai-row{ grid-template-columns:1fr; gap:.8rem }
}
@media (max-width:760px){
  /* phones become a swipeable row on mobile */
  .phones--3, .phones--4{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:1rem; padding-bottom:1rem; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  }
  .phones--3 .phone-card, .phones--4 .phone-card{ flex:0 0 66%; scroll-snap-align:center; transform:none !important }
  .phones--2{ grid-template-columns:1fr; max-width:340px }
  .phone-solo{ grid-template-columns:1fr; gap:2rem }
  .phone-solo .phone{ max-width:260px }
  .price-grid{ grid-template-columns:1fr }
  .hero-fan{ grid-template-columns:repeat(3,1fr); gap:.6rem }
}