/* ==========================================================================
   Portfolio Design System
   Display: Bricolage Grotesque  |  Body: Manrope  |  Mono/labels: IBM Plex Mono
   Palette: Paper / Ink + one signature accent (Cobalt) + sparing Amber spark
   ========================================================================== */

:root{
  /* color */
  --paper:        #F6F5F1;
  --paper-2:      #ECEAE1;
  --paper-3:      #E2DFD3;
  --ink:          #14151A;
  --ink-2:        #54565F;
  --ink-3:        #8C8E94;
  --line:         #DCD8CC;
  --cobalt:       #2A33E0;
  --cobalt-bright:#4753FF;
  --cobalt-soft:  #E7E8FB;
  --amber:        #F2A93C;
  --amber-soft:   #FBE6C2;
  --on-dark:      #F6F5F1;
  --on-dark-dim:  rgba(246,245,241,.66);

  /* shape */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* shadow */
  --shadow-sm: 0 10px 24px -14px rgba(20,21,26,.22);
  --shadow-lg: 0 36px 70px -32px rgba(20,21,26,.30);

  /* motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --d-fast: .22s;
  --d: .45s;
  --d-slow: .8s;

  --container: 1260px;
}

[id]{ scroll-margin-top:120px; }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body,h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; padding:0; }
h1,h2,h3{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.02em;
  color:var(--ink);
}
strong{ font-weight:700; }

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

:focus-visible{
  outline:2px solid var(--cobalt);
  outline-offset:4px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:var(--r-sm); z-index:5000;
  font-family:'IBM Plex Mono',monospace; font-size:.8rem;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(20px,5vw,48px);
}
.section{ padding:clamp(72px,11vw,150px) 0; position:relative; }
.section--tight{ padding:clamp(48px,7vw,96px) 0; }
.section-head{ max-width:640px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-2);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); flex-shrink:0; }
.section-head h2{ font-size:clamp(2rem,3.6vw,3.1rem); margin-top:16px; }
.section-head p{ margin-top:18px; font-size:1.08rem; color:var(--ink-2); max-width:54ch; }

.mono-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  border-radius:var(--r-pill);
  font-family:'Manrope',sans-serif;
  font-weight:700; font-size:.95rem;
  transition:transform var(--d-fast) var(--ease), background var(--d) var(--ease),
             color var(--d) var(--ease), box-shadow var(--d) var(--ease), border-color var(--d);
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform var(--d) var(--ease); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--cobalt); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover svg{ transform:translate(3px,-3px); }
.btn-outline{ border:1.5px solid var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-on-dark{ background:var(--cobalt-bright); color:#fff; }
.btn-on-dark:hover{ background:#fff; color:var(--ink); }
.btn-on-dark:hover svg{ transform:translate(3px,-3px); }
.btn-sm{ padding:11px 22px; font-size:.86rem; }

/* ---------- top scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--cobalt); z-index:1200; transition:width .1s linear;
}

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1260;
  padding:26px 0;
  transition:transform var(--d-slow) var(--ease), background-color var(--d), box-shadow var(--d), padding var(--d);
}
.site-header.is-scrolled{
  padding:16px 0;
  background:rgba(246,245,241,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.site-header.is-hidden{ transform:translateY(-120%); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; font-size:1.12rem; letter-spacing:-0.01em;
}
.logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--cobalt); }
.logo-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:inline-flex; border:1.5px solid var(--line);
}
.logo-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  position:relative; font-size:.92rem; font-weight:600; padding:6px 0; color:var(--ink-2);
  transition:color var(--d-fast);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--cobalt);
  transition:width var(--d) var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }
.nav-links a.is-active{ color:var(--ink); }

.nav-right{ display:flex; align-items:center; gap:18px; }

.menu-toggle{
  display:none; position:relative; flex-direction:column; gap:5px; padding:8px; z-index:1300;
}
.menu-toggle span{ width:22px; height:2px; background:var(--ink); transition:transform var(--d), opacity var(--d); }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; background:var(--paper); z-index:1250;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:40px clamp(24px,8vw,60px);
  transform:translateY(-101%);
  transition:transform var(--d-slow) var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(2rem,9vw,3rem); padding:14px 0; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.mobile-menu .mono-tag{ margin-bottom:40px; }
.mobile-menu .mobile-cta{ margin-top:32px; }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(132px,17vw,196px); padding-bottom:64px; position:relative; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}
.hero-title{ font-size:clamp(2.6rem,5.6vw,5.1rem); }
.hero-title em{ font-style:normal; color:var(--cobalt); }
.hero-sub{ margin-top:24px; font-size:1.14rem; color:var(--ink-2); max-width:46ch; }
.hero-actions{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:44px; margin-top:68px; flex-wrap:wrap; }
.hero-stats .stat strong{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.7rem; font-weight:800;
}
.hero-stats .stat span{ font-size:.8rem; color:var(--ink-2); }

/* ---- hero canvas / signature "inspect mode" visual ---- */
.hero-canvas-wrap{ position:relative; }
.hero-canvas{
  position:relative;
  background-color:var(--paper-2);
  background-image:radial-gradient(circle,var(--paper-3) 1.2px,transparent 1.4px);
  background-size:20px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:38px;
  min-height:430px;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center;
}
.mock-app{
  width:100%; max-width:280px; background:#fff; border-radius:var(--r-md);
  border:1px solid var(--line); padding:20px; box-shadow:var(--shadow-sm);
  position:relative;
}
.mock-bar{ height:14px; width:46%; background:var(--cobalt); border-radius:5px; }
.mock-line{ height:9px; background:var(--paper-3); border-radius:5px; margin-top:14px; }
.mock-line.w-80{ width:80%; } .mock-line.w-60{ width:60%; } .mock-line.w-40{ width:40%; }
.mock-row{ display:flex; gap:10px; margin-top:18px; }
.mock-chart{ display:flex; align-items:flex-end; gap:6px; height:46px; flex:1; }
.mock-chart i{ flex:1; background:var(--cobalt-soft); border-radius:3px; }
.mock-chart i:nth-child(2){ background:var(--amber-soft); }
.mock-btn{
  margin-top:18px; height:34px; width:42%; background:var(--ink); border-radius:var(--r-pill);
}
.spec-chip{
  position:absolute;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 13px; display:flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.05em;
  box-shadow:var(--shadow-sm); white-space:nowrap;
  animation:float 7s ease-in-out infinite;
  opacity:0; transform:translateY(10px) scale(.92);
  transition:opacity .6s var(--ease) var(--chip-delay,0s), transform .6s var(--ease) var(--chip-delay,0s);
}
.hero-canvas.is-ready .spec-chip{ opacity:1; transform:translateY(0) scale(1); }
.spec-chip .swatch{ width:8px; height:8px; border-radius:50%; }
.chip-1{ top:6%; left:-6%; animation-delay:0s; }
.chip-2{ top:14%; right:-9%; animation-delay:1.4s; }
.chip-3{ bottom:18%; left:-10%; animation-delay:2.6s; }
.chip-4{ bottom:6%; right:-7%; animation-delay:.8s; }

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper-2); overflow:hidden; padding:24px 0;
}
.marquee-track{
  display:flex; gap:52px; width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; gap:52px; flex-shrink:0; }
.marquee span{
  font-family:'IBM Plex Mono',monospace; font-size:.84rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:14px;
  flex-shrink:0;
}
.marquee span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--cobalt); display:block; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- selected work ---------- */
.section-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:56px; }
.project-card{
  position:relative; border-radius:24px; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line);
  transition:transform var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
  display:block;
}
.project-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.project-cover{ position:relative; height:280px; overflow:hidden; }
.project-cover .bg{
  position:absolute; inset:0; transition:transform .8s var(--ease);
}
.project-card:hover .project-cover .bg{ transform:scale(1.07); }
.cover-1 .bg{ background:linear-gradient(135deg,#2A33E0 0%,#5b63f5 45%,#cfd2fb 100%); }
.cover-2 .bg{ background:linear-gradient(135deg,#14151A 0%,#3a3c46 55%,#2A33E0 100%); }
.cover-3 .bg{ background:linear-gradient(135deg,#F2A93C 0%,#f3c178 45%,#fbe6c2 100%); }
.cover-4 .bg{ background:linear-gradient(135deg,#ECEAE1 0%,#cfd2fb 60%,#2A33E0 130%); }
.cover-5 .bg{ background:linear-gradient(135deg,#14151A 0%,#F2A93C 60%,#FBE6C2 130%); }
.cover-shape{
  position:absolute; border-radius:50%; opacity:.5; mix-blend-mode:overlay;
  background:#fff;
}
.cover-1 .cover-shape{ width:220px; height:220px; right:-60px; bottom:-80px; }
.cover-2 .cover-shape{ width:180px; height:180px; left:-40px; top:-50px; }
.cover-3 .cover-shape{ width:200px; height:200px; right:10%; top:-70px; }
.cover-4 .cover-shape{ width:240px; height:240px; left:30%; bottom:-110px; }
.cover-5 .cover-shape{ width:200px; height:200px; right:8%; bottom:-90px; }
.project-cover .tag{
  position:absolute; top:18px; left:18px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  padding:6px 13px; border-radius:var(--r-pill);
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink);
}
.project-cover .view-tag{
  position:absolute; bottom:-40px; right:18px;
  background:var(--ink); color:var(--paper);
  padding:9px 16px; border-radius:var(--r-pill);
  font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:8px;
  transition:bottom var(--d) var(--ease);
}
.project-cover .view-tag svg{ width:13px; height:13px; }
.project-card:hover .view-tag{ bottom:18px; }
.project-info{ padding:26px 28px 30px; }
.project-info h3{ font-size:1.45rem; }
.project-info p{ color:var(--ink-2); margin-top:7px; font-size:.98rem; }
.project-meta-row{
  display:flex; justify-content:space-between; margin-top:20px;
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em;
}

/* ---------- gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px; }
.gallery-card{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--paper); transition:transform var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.gallery-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.gallery-visual{
  position:relative; min-height:188px; padding:26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background-color:var(--paper-2);
  background-image:radial-gradient(circle,var(--paper-3) 1.1px,transparent 1.3px);
  background-size:18px 18px;
}
.gallery-visual .mock-line{ width:100%; }
.gallery-visual .mock-line.w-80,.gallery-visual .mock-line.w-60,.gallery-visual .mock-line.w-40{ width:80%; }
.gallery-visual .mock-line.w-60{ width:60%; } .gallery-visual .mock-line.w-40{ width:40%; }
.gallery-caption{ padding:18px 22px 22px; }
.gallery-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px;
  padding:10px 20px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--ink);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.84rem;
  color:var(--ink); background:transparent;
  transition:background var(--d) var(--ease), color var(--d) var(--ease),
             border-color var(--d) var(--ease), transform var(--d) var(--ease),
             box-shadow var(--d) var(--ease);
}
.gallery-cta svg{ width:13px; height:13px; transition:transform var(--d) var(--ease); }
.gallery-cta:hover{
  background:var(--ink); color:var(--paper);
  box-shadow:var(--shadow-sm); transform:translateY(-2px);
}
.gallery-cta:hover svg{ transform:translate(3px,-3px); }
.gallery-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.02rem; }
.gallery-meta{ display:block; margin-top:5px; font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--ink-2); letter-spacing:.01em; }

.gallery-visual--img{
  padding:0; min-height:220px; background:var(--ink);
}
.gallery-visual--img img{
  width:100%; height:220px; object-fit:cover; object-position:top center;
  display:block; border-radius:0;
  transition:transform .8s var(--ease);
}
.gallery-card:hover .gallery-visual--img img{ transform:scale(1.04); }
.laptop-screen-frame{ background:var(--ink); border-radius:12px 12px 3px 3px; padding:8px 8px 5px; }
.laptop-screen{ background:#fff; border-radius:5px; overflow:hidden; min-height:118px; padding:14px; }
.laptop-base{ height:8px; width:114%; margin:0 auto; position:relative; left:-7%; background:var(--ink); border-radius:0 0 8px 8px; }
.laptop-base::after{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:44px; height:3px; background:var(--ink-2); border-radius:0 0 3px 3px; }

.g-banner{ height:16px; border-radius:4px; background:var(--amber); width:62%; }
.g-stat-row{ display:flex; gap:18px; margin-top:14px; }
.g-stat strong{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.92rem; color:var(--ink); }
.g-stat span{ display:block; margin-top:2px; font-family:'IBM Plex Mono',monospace; font-size:.56rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.g-pill-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.g-pill{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; padding:4px 9px; border-radius:var(--r-pill); background:var(--paper-2); color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.g-swatch-row{ display:flex; gap:8px; }
.g-swatch{ width:30px; height:30px; border-radius:7px; flex-shrink:0; }
.g-swatch.is-round{ border-radius:50%; }

/* ---------- about / process ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:84px; align-items:start; }
.about-copy p{ font-size:1.06rem; color:var(--ink-2); margin-top:18px; max-width:50ch; }
.about-copy p:first-of-type{ margin-top:20px; }
.about-stats{ display:flex; gap:40px; margin-top:44px; flex-wrap:wrap; }
.about-stats strong{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:2rem; font-weight:800; }
.about-stats span{ font-size:.8rem; color:var(--ink-2); }

.timeline{ position:relative; padding-left:34px; }
.timeline::before{
  content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line);
}
.timeline .step{ position:relative; padding-bottom:42px; }
.timeline .step:last-child{ padding-bottom:0; }
.timeline .step::before{
  content:''; position:absolute; left:-34px; top:3px; width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line);
  transition:background var(--d) var(--ease), border-color var(--d) var(--ease);
}
.timeline .step.is-visible::before{ background:var(--cobalt); border-color:var(--cobalt); }
.timeline .step-num{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-3); letter-spacing:.06em; }
.timeline .step h4{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.18rem; margin-top:6px; }
.timeline .step p{ margin-top:8px; color:var(--ink-2); font-size:.96rem; max-width:42ch; }

/* ---------- experience ---------- */
.experience-list{ margin-top:48px; border-top:1px solid var(--line); }
.experience-item{
  display:grid; grid-template-columns:190px 1fr; gap:40px;
  padding:32px 0; border-bottom:1px solid var(--line);
}
.experience-when{
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--ink-3);
  letter-spacing:.04em; padding-top:4px;
}
.experience-main h3{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.22rem;
}
.experience-main h3 .exp-company{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem; color:var(--ink-2);
}
.experience-main p{ margin-top:10px; color:var(--ink-2); font-size:.98rem; max-width:58ch; }

/* ---------- skills ---------- */
.skills-grid{ display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; }
.skill-pill{
  padding:13px 24px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-weight:600; font-size:.92rem; background:var(--paper);
  transition:background var(--d) var(--ease), color var(--d) var(--ease), transform var(--d) var(--ease), border-color var(--d);
}
.skill-pill:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-4px); }

/* ---------- brand wall ---------- */
.brand-wall{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:44px 64px; margin-top:48px; padding:38px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.brand-logo{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.3rem;
  letter-spacing:-0.01em; color:var(--ink-3);
  transition:color var(--d) var(--ease), transform var(--d) var(--ease);
}
.brand-logo:hover{ color:var(--ink); transform:translateY(-2px); }

/* ---------- testimonials ---------- */
.testimonial-wrap{ max-width:760px; margin:52px auto 0; text-align:center; position:relative; }
.testimonial-wrap .quote-mark{
  font-family:'Bricolage Grotesque',sans-serif; font-size:5rem; color:var(--cobalt-soft);
  line-height:1; margin-bottom:-18px;
}
.testimonial{ display:none; }
.testimonial.is-active{ display:block; animation:fadeUp .7s var(--ease-soft); }
.testimonial p.quote{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:clamp(1.2rem,2.4vw,1.55rem);
  line-height:1.45;
}
.testimonial .author{ margin-top:26px; }
.testimonial .author strong{ font-size:.95rem; }
.testimonial .author span{ display:block; margin-top:3px; font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.testimonial-nav{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.dot-btn{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:width var(--d), background var(--d); }
.dot-btn.is-active{ width:26px; border-radius:4px; background:var(--cobalt); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative; overflow:hidden; border-radius:32px;
  background:var(--ink); color:var(--on-dark);
  padding:clamp(56px,8vw,108px) clamp(28px,7vw,84px);
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(246,245,241,.16) 1.2px,transparent 1.4px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 70%);
}
.cta-glow{
  position:absolute; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle,var(--cobalt-bright) 0%,transparent 70%);
  opacity:.35; right:-160px; top:-160px; filter:blur(10px);
  animation:pulse 9s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
.cta-banner .inner{ position:relative; max-width:640px; }
.cta-banner h2{ font-size:clamp(2.1rem,4.6vw,3.4rem); color:var(--on-dark); max-width:15ch; }
.cta-banner p{ margin-top:18px; color:var(--on-dark-dim); font-size:1.08rem; max-width:48ch; }
.cta-actions{ display:flex; gap:28px; margin-top:48px; flex-wrap:wrap; align-items:center; }
.cta-email{ font-family:'IBM Plex Mono',monospace; font-size:1rem; position:relative; color:var(--on-dark); }
.cta-email::after{ content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:rgba(246,245,241,.4); transition:background var(--d); }
.cta-email:hover::after{ background:var(--on-dark); }

/* ---------- footer ---------- */
.footer{ padding:84px 0 32px; }
.footer-top{
  display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap;
  padding-bottom:56px; border-bottom:1px solid var(--line);
}
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{ color:var(--ink-2); max-width:32ch; }
.footer-cols{ display:flex; gap:72px; flex-wrap:wrap; }
.footer-col h4{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-3); margin-bottom:18px;
}
.footer-col a, .footer-col p{ display:block; margin-bottom:11px; color:var(--ink-2); font-size:.95rem; transition:color var(--d-fast), transform var(--d-fast); }
.footer-col a:hover{ color:var(--ink); transform:translateX(3px); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:.84rem; color:var(--ink-3); flex-wrap:wrap; gap:14px; }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--d), border-color var(--d), transform var(--d);
}
.social-row a:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-3px); }
.social-row a:hover svg{ stroke:var(--paper); }
.social-row svg{ width:17px; height:17px; stroke:var(--ink); transition:stroke var(--d); }

/* ---------- custom cursor ---------- */
.cursor-ring,.cursor-dot{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); border-radius:50%;
}
.cursor-dot{ width:7px; height:7px; background:var(--ink); transition:background var(--d-fast),opacity var(--d-fast); }
.cursor-ring{
  width:38px; height:38px; border:1.4px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:width var(--d) var(--ease), height var(--d) var(--ease), background var(--d), border-color var(--d), opacity var(--d-fast);
}
.cursor-ring .cursor-label{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--paper); opacity:0; transition:opacity var(--d-fast); white-space:nowrap;
}
.cursor-ring.is-active{ width:78px; height:78px; background:var(--ink); border-color:var(--ink); }
.cursor-ring.is-active .cursor-label{ opacity:1; }
html.has-cursor, html.has-cursor a, html.has-cursor button{ cursor:none; }
.cursor-ring,.cursor-dot{ opacity:0; }
html.has-cursor .cursor-ring, html.has-cursor .cursor-dot{ opacity:1; }

/* ---------- page transition overlay ---------- */
.page-veil{
  position:fixed; inset:0; background:var(--ink); z-index:3000;
  transform:translateY(0); pointer-events:none;
  transition:transform .6s var(--ease);
}
.page-veil.is-lifted{ transform:translateY(-101%); }

/* ---------- case study page ---------- */
.case-hero{ padding-top:clamp(120px,16vw,176px); padding-bottom:0; }
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3);
}
.breadcrumb a{ color:var(--ink-3); transition:color var(--d-fast); }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .current{ color:var(--ink); }

.case-tags{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.tag-pill{
  padding:7px 15px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-2);
}
.case-hero h1{ font-size:clamp(2.3rem,5vw,3.8rem); margin-top:20px; max-width:19ch; }
.case-hero .sub{ margin-top:20px; font-size:1.12rem; color:var(--ink-2); max-width:62ch; }

.meta-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:54px; padding:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.meta-item .label{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-3); margin-bottom:9px;
}
.meta-item .value{ font-weight:700; font-size:1.02rem; }

.case-cover{ margin-top:56px; }
.case-cover .hero-canvas{ min-height:480px; }
.phone-mock{
  width:230px; background:var(--ink); border-radius:34px; padding:9px;
  box-shadow:var(--shadow-lg);
}
.phone-screen{ background:#fff; border-radius:26px; padding:22px 16px; min-height:380px; }
.phone-status{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--ink-3); margin-bottom:16px; }
.balance-card{
  background:linear-gradient(135deg,var(--cobalt) 0%,var(--cobalt-bright) 100%);
  border-radius:16px; padding:18px; color:#fff;
}
.balance-card .b-label{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; font-family:'IBM Plex Mono',monospace; }
.balance-card .b-amount{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem; font-weight:800; margin-top:6px; }
.phone-list{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.phone-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--paper-2); }
.phone-row .ic{ width:30px; height:30px; border-radius:9px; background:var(--paper-2); flex-shrink:0; }
.phone-row .ic.amber{ background:var(--amber-soft); }
.phone-row .ln{ flex:1; }
.phone-row .ln .l1{ height:8px; width:70%; background:var(--paper-3); border-radius:4px; }
.phone-row .ln .l2{ height:6px; width:40%; background:var(--paper-2); border-radius:4px; margin-top:6px; }

.case-body{ display:grid; grid-template-columns:220px 1fr; gap:64px; align-items:start; }
.case-nav{ position:sticky; top:130px; display:flex; flex-direction:column; gap:3px; }
.case-nav .mono-tag{ margin-bottom:14px; }
.case-nav a{
  padding:10px 14px; border-radius:10px; font-size:.86rem; font-weight:600; color:var(--ink-3);
  display:flex; align-items:center; gap:11px; transition:color var(--d-fast), background var(--d-fast);
}
.case-nav a::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--line); flex-shrink:0; transition:background var(--d-fast); }
.case-nav a:hover{ color:var(--ink); }
.case-nav a.is-active{ color:var(--ink); background:var(--paper-2); }
.case-nav a.is-active::before{ background:var(--cobalt); }

.case-content > section{ padding-top:8px; padding-bottom:72px; }
.case-content > section:last-child{ padding-bottom:0; }
.case-content h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.case-content > section > .mono-tag{ display:block; margin-bottom:14px; }
.case-content p{ margin-top:18px; font-size:1.05rem; color:var(--ink-2); max-width:64ch; }

.pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.pain-card{
  border:1px solid var(--line); border-radius:var(--r-md); padding:22px;
  transition:transform var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.pain-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.pain-card .num{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--ink-3); }
.pain-card p{ margin-top:10px; font-size:.96rem; color:var(--ink); max-width:none; }

.case-content .timeline{ margin-top:34px; }

.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  margin-top:48px; padding-top:48px; border-top:1px solid var(--line);
}
.feature-row:first-of-type{ margin-top:30px; padding-top:0; border-top:none; }
.feature-row.is-rev{ direction:rtl; }
.feature-row.is-rev > *{ direction:ltr; }
.feature-copy .num{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--ink-3); }
.feature-copy h3{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.4rem; margin-top:8px; }
.feature-copy p{ margin-top:12px; }
.feature-visual{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-2);
  min-height:200px; display:flex; align-items:center; justify-content:center; padding:28px;
  background-image:radial-gradient(circle,var(--paper-3) 1.1px,transparent 1.3px);
  background-size:18px 18px;
}
.feature-visual .mock-app{ max-width:220px; }

.result-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:32px; }
.result-stat{ border:1px solid var(--line); border-radius:var(--r-md); padding:28px; }
.result-stat strong{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(2rem,4vw,2.6rem); color:var(--cobalt);
}
.result-stat span{ display:block; margin-top:8px; font-size:.92rem; color:var(--ink-2); }

.next-project{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:44px 0; border-top:1px solid var(--line); margin-top:24px; flex-wrap:wrap;
}
.next-project .label{ display:block; }
.next-project .title{
  font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.6rem,3.4vw,2.4rem); margin-top:8px;
}
.next-project .arrow{
  width:58px; height:58px; border-radius:50%; border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background var(--d) var(--ease), transform var(--d) var(--ease);
}
.next-project .arrow svg{ width:20px; height:20px; transition:transform var(--d) var(--ease); }
.next-project:hover .arrow{ background:var(--ink); transform:rotate(45deg); }
.next-project:hover .arrow svg{ stroke:var(--paper); }

/* ============================== responsive ============================== */
@media (max-width:1080px){
  .hero-grid{ gap:44px; }
  .about-grid{ gap:56px; }
}
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-canvas-wrap{ order:2; margin-top:24px; }
  .hero-copy{ order:1; }
  .about-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .case-body{ grid-template-columns:1fr; }
  .case-nav{ position:static; flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:8px; top:auto; }
  .case-nav .mono-tag{ display:none; }
  .case-nav a{ white-space:nowrap; }
  .feature-row{ grid-template-columns:1fr; }
  .feature-row.is-rev{ direction:ltr; }
  .feature-row .feature-visual{ order:-1; }
}
@media (max-width:768px){
  .meta-grid{ grid-template-columns:repeat(2,1fr); }
  .pain-grid{ grid-template-columns:1fr; }
  .result-stats{ grid-template-columns:1fr; }
  .experience-item{ grid-template-columns:1fr; gap:8px; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-right .btn{ display:none; }
  .menu-toggle{ display:flex; }
}
@media (max-width:640px){
  .section{ padding:clamp(56px,12vw,88px) 0; }
  .spec-chip{ display:none; }
  .gallery-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:28px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-actions{ width:100%; }
  .footer-cols{ gap:40px; }
  .footer-top{ flex-direction:column; }
  .cta-actions{ flex-direction:column; align-items:flex-start; gap:20px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .page-veil{ display:none; }
  html.has-cursor{ cursor:auto; }
  html.has-cursor a, html.has-cursor button{ cursor:pointer; }
  .cursor-ring,.cursor-dot{ display:none; }
}