/* ============================================================
   Z Dev.IT — Design System
   Palette (locked): mint #DBE8D8 · teal #01949A · charcoal #18383A
                     sand #F3EDE2 · white #FFFFFF
   Type: Plus Jakarta Sans (display) · Inter (body) · JetBrains Mono (labels)
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Jakarta';src:url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JBMono';src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JBMono';src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --white:#ffffff;
  --sand:#f3ede2;
  --mint:#dbe8d8;
  --mint-tint:#eef4ec;         /* very soft mint wash */
  --mint-border:#cde0c8;
  --teal:#01949a;
  --teal-dark:#017a80;
  --teal-deep:#036065;
  --charcoal:#18383a;
  --charcoal-deep:#102a2c;     /* deeper layer for dark sections */
  --charcoal-soft:#1f4547;

  --ink:#18383a;               /* headings */
  --body:#4b6163;              /* body text */
  --muted:#7c9093;             /* captions / meta */
  --line:#e7e2d6;              /* hairline on light */
  --line-dark:rgba(219,232,216,.16);

  --font-display:'Jakarta','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JBMono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-xl:26px; --r-lg:20px; --r:14px; --r-sm:10px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(16,42,44,.06),0 1px 3px rgba(16,42,44,.05);
  --shadow:0 10px 30px -12px rgba(16,42,44,.18),0 4px 10px -6px rgba(16,42,44,.10);
  --shadow-lg:0 30px 60px -20px rgba(16,42,44,.28),0 12px 24px -12px rgba(16,42,44,.16);

  --container:1200px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:var(--font-body);
  color:var(--body);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;padding:0}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);line-height:1.08;font-weight:800;letter-spacing:-.02em}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:4px}
::selection{background:var(--teal);color:#fff}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative}
.section--tight{padding-block:clamp(2.75rem,5vw,4.25rem)}
.section--mint{background:var(--mint-tint)}
.section--mint-solid{background:var(--mint)}
.section--sand{background:var(--sand)}
.section--dark{background:var(--charcoal);color:#d7e3df}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--deep{background:var(--charcoal-deep);color:#cfdedb}
.section--deep h2,.section--deep h3,.section--deep h4{color:#fff}

/* ---------- Type scale ---------- */
.display{font-size:clamp(2.5rem,6vw,4.25rem);line-height:1.02;letter-spacing:-.03em}
.h1{font-size:clamp(2.1rem,4.6vw,3.25rem)}
.h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.h3{font-size:clamp(1.3rem,2.2vw,1.65rem);letter-spacing:-.015em}
.h4{font-size:1.15rem;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.6;color:var(--body)}
.section--dark .lead,.section--deep .lead{color:#b7c9c5}
.muted{color:var(--muted)}
.measure{max-width:62ch}
.measure-sm{max-width:46ch}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- Signature: bracket eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  margin-bottom:1.1rem;
}
.eyebrow::before{content:"</>";font-weight:600;color:var(--teal);letter-spacing:0;opacity:.9}
.section--dark .eyebrow,.section--deep .eyebrow{color:#5fd0c9}
.section--dark .eyebrow::before,.section--deep .eyebrow::before{color:#5fd0c9}

.section-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head.center{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:var(--pill);
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  will-change:transform;white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--primary{background:var(--teal);color:#fff;box-shadow:0 8px 20px -8px rgba(1,148,154,.6)}
.btn--primary:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(1,148,154,.65)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--mint-border)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--charcoal)}
.btn--light:hover{background:var(--mint);transform:translateY(-2px)}
.btn--onDark{background:transparent;color:#eaf3ef;border:1.5px solid var(--line-dark)}
.btn--onDark:hover{border-color:#5fd0c9;color:#fff;transform:translateY(-2px)}
.btn--lg{padding:1rem 1.8rem;font-size:1.02rem}
.btn--block{width:100%}
.arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow,.link-arrow:hover .arrow{transform:translateX(3px)}

.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--teal);font-size:.96rem}
.link-arrow:hover{color:var(--teal-dark)}
.section--dark .link-arrow,.section--deep .link-arrow{color:#5fd0c9}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 22px -18px rgba(16,42,44,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:74px}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{position:relative;font-weight:500;font-size:.95rem;color:var(--charcoal-soft);padding:.5rem .8rem;border-radius:var(--r-sm);transition:color .2s var(--ease),background .2s var(--ease)}
.nav-links a:hover{color:var(--teal)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-links a.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;background:var(--teal);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.hamburger{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1.5px solid var(--mint-border);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.hamburger span{display:block;width:20px;height:2px;background:var(--charcoal);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav panel */
.mobile-nav{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--white);z-index:120;transform:translateX(100%);transition:transform .38s var(--ease);display:flex;flex-direction:column;padding:1.4rem;box-shadow:var(--shadow-lg);visibility:hidden}
.mobile-nav.open{transform:translateX(0);visibility:visible}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.mobile-nav__top img{height:34px}
.mobile-close{width:44px;height:44px;border-radius:var(--r-sm);border:1.5px solid var(--mint-border);display:grid;place-items:center;font-size:1.4rem;color:var(--charcoal)}
.mobile-nav a.m-link{padding:.9rem .4rem;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-nav a.m-link.active{color:var(--teal)}
.mobile-nav .btn{margin-top:1.4rem}
.mobile-nav__meta{margin-top:auto;font-family:var(--font-mono);font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.backdrop{position:fixed;inset:0;background:rgba(16,42,44,.5);z-index:110;opacity:0;visibility:hidden;transition:opacity .35s var(--ease)}
.backdrop.show{opacity:1;visibility:visible}

/* ---------- Hero ---------- */
.hero{background:var(--charcoal-deep);color:#cfdedb;position:relative;overflow:clip}
.hero__glow{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 55% at 82% 8%,rgba(1,148,154,.28),transparent 60%),
  radial-gradient(50% 50% at 8% 92%,rgba(219,232,216,.12),transparent 60%)}
.hero .container{position:relative;z-index:2;padding-block:clamp(3.5rem,8vw,6rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{color:#fff;font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.0;letter-spacing:-.035em}
.hero h1 .accent{color:#8fd6cf}
.hero__sub{margin-top:1.4rem;font-size:clamp(1.05rem,1.5vw,1.22rem);color:#a9bfbb;max-width:48ch}
.hero__cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.85rem}
.hero__stats{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:2rem;padding-top:1.6rem;border-top:1px solid var(--line-dark)}
.hero__stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:#fff;letter-spacing:-.02em}
.hero__stat span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#7f9895}

/* ==========================================================================
   Hero Showcase Composition (Geometric / Pure CSS Representation)
   ========================================================================== */
.hero-composition {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Layered organic wave forms */
.composition-blob {
  position: absolute;
  pointer-events: none;
}

.composition-blob--back {
  top: 0;
  right: -8%;
  width: 105%;
  height: 100%;
  background: radial-gradient(circle at 60% 40%, rgba(1, 148, 154, 0.18), rgba(219, 232, 216, 0.05) 70%);
  border-radius: 43% 57% 68% 32% / 38% 46% 54% 62%;
  filter: blur(10px);
  z-index: 1;
}

.composition-blob--front {
  bottom: 2%;
  right: -2%;
  width: 90%;
  height: 85%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 58% 42% 35% 65% / 51% 57% 43% 49%;
  z-index: 2;
}

:root {
  --circle-size: 420px;
  --border-width: 6px;
  --bg-dark: #0d1518;
}

/* Outer wrapper */
.animated-circle-container {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}
/* Update .animated-circle-container with margin-left: auto */
.animated-circle-container {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  
  /* --- ADD THESE RULES TO PUSH IT TO THE RIGHT --- */
  margin-left: auto;
  margin-right: 0;
}

/* Continuously rotating colorful conic border */
.animated-border {
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background: conic-gradient(
    from 0deg,
    #ff0055,
    #7a00ff,
    #00e5ff,
    #00ff66,
    #ffea00,
    #ff0055
  );
  animation: rotateBorder 3s linear infinite;
  z-index: 1;
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Inner dark circle masked over the rotating gradient */
.circle-inner-canvas {
  position: relative;
  z-index: 2;
  width: calc(var(--circle-size) - (var(--border-width) * 2));
  height: calc(var(--circle-size) - (var(--border-width) * 2));
  border-radius: 50%;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.85);
}

/* Styled code interface inside the circle */
.code-card {
  width: 86%;
  height: 78%;
  background: rgba(14, 23, 27, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.code-card__header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dot--red { background: #ff5f56; }
.dot--yellow { background: #ffbd2e; }
.dot--green { background: #27c93f; }

.code-title {
  margin-left: auto;
  font-family: monospace;
  font-size: 0.7rem;
  color: #7d969c;
}

.code-card__content {
  margin: 0;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #c9d1d9;
  overflow: hidden;
  white-space: pre-wrap;
}

/* Syntax Highlighting Colors */
.c-kw   { color: #ff7b72; font-weight: bold; } /* Keywords: import, return, const */
.c-fn   { color: #d2a8ff; }                    /* Functions: useState, useEffect */
.c-str  { color: #a5d6ff; }                    /* Strings */
.c-prop { color: #7ee787; }                    /* Object keys / properties */
.c-tag  { color: #79c0ff; }                    /* JSX tags */
.c-num  { color: #ffa657; }                    /* Numbers */

/* Responsive adjustment for tablets/mobiles */
@media (max-width: 600px) {
  :root {
    --circle-size: 320px;
    --border-width: 5px;
  }
  .code-card__content {
    font-size: 0.62rem;
    padding: 10px;
  }
}
/* Hero terminal (signature) */
.terminal{background:#0b2123;border:1px solid rgba(219,232,216,.14);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;font-family:var(--font-mono)}
.terminal__bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(219,232,216,.1)}
.terminal__dot{width:11px;height:11px;border-radius:50%}
.terminal__dot--r{background:#e26d5c}.terminal__dot--y{background:#e9b949}.terminal__dot--g{background:#5fd0c9}
.terminal__title{margin-left:.5rem;font-size:.74rem;color:#7f9895;letter-spacing:.04em}
.terminal__body{padding:1.25rem 1.35rem;font-size:.83rem;line-height:1.85;color:#bcd3ce;overflow-x:auto}
.terminal__body .kw{color:#8fd6cf}.terminal__body .str{color:#c7e7b8}.terminal__body .prop{color:#e9d9a8}.terminal__body .fn{color:#7ec8ff}.terminal__body .cm{color:#5c7b78}
.terminal__body .ln{display:block;white-space:pre}
.caret{display:inline-block;width:.55ch;background:#5fd0c9;animation:blink 1.1s steps(1) infinite;color:transparent}
@keyframes blink{50%{opacity:0}}
.hero__emblem{position:absolute;right:-4%;bottom:-8%;width:min(38vw,420px);opacity:.05;z-index:1;pointer-events:none}

/* ---------- Marquee / credibility ---------- */
.cred{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cred__item{background:var(--white);padding:clamp(1.4rem,3vw,2.1rem)}
.cred__item b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--ink);letter-spacing:-.02em;line-height:1}
.cred__item span{display:block;margin-top:.45rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Cards grid ---------- */
.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.6rem)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}


/* Service card */
.svc{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem 1.6rem 1.5rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);overflow:hidden}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--mint-border)}
.svc__num{position:absolute;top:1.3rem;right:1.5rem;font-family:var(--font-mono);font-size:.8rem;color:var(--muted);letter-spacing:.05em}
.svc__icon{width:52px;height:52px;border-radius:14px;background:var(--mint);color:var(--teal-deep);display:grid;place-items:center;margin-bottom:1.15rem;transition:background .3s var(--ease),color .3s var(--ease)}
.svc__icon svg{width:26px;height:26px}
.svc:hover .svc__icon{background:var(--teal);color:#fff}
.svc h3{margin-bottom:.5rem;font-size:1.2rem}
.svc p{font-size:.95rem}
.svc__line{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--teal);transition:width .35s var(--ease)}
.svc:hover .svc__line{width:100%}

/* ---------- Work / portfolio ---------- */
.work-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.work-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--mint-border)}
.work-preview{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.work-preview__frame{position:absolute;inset:0;display:flex;flex-direction:column}
.work-preview__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;background:rgba(255,255,255,.7);backdrop-filter:blur(4px)}
.work-preview__bar i{width:9px;height:9px;border-radius:50%;background:#cdd9d5;display:block}
.work-preview__url{margin-left:.5rem;font-family:var(--font-mono);font-size:.66rem;color:#5a716f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-preview__canvas{flex:1;position:relative;overflow:hidden;background:var(--mint-tint)}
.work-preview__canvas img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s var(--ease)}
.work-card:hover .work-preview__canvas img{transform:scale(1.03)}
.work-body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.work-cat{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem}
.work-body h3{font-size:1.25rem;margin-bottom:.55rem}
.work-body p{font-size:.94rem;margin-bottom:1.1rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.tag{font-family:var(--font-mono);font-size:.7rem;color:var(--charcoal-soft);background:var(--mint-tint);border:1px solid var(--mint-border);padding:.28rem .6rem;border-radius:var(--pill)}
.work-body .work-foot{margin-top:auto}
.work-links{display:flex;align-items:center;gap:1.15rem;margin-top:auto;padding-top:.4rem;flex-wrap:wrap}
.work-code{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.8rem;color:var(--muted);transition:color .2s var(--ease)}
.work-code:hover{color:var(--teal)}
.work-code svg{width:15px;height:15px}

/* Featured project (large) */
.work-featured{display:grid;grid-template-columns:1.12fr .88fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.work-featured:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.wf-media{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--mint-tint);min-height:340px}
.wf-media__img{flex:1;overflow:hidden}
.wf-media__img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s var(--ease)}
.work-featured:hover .wf-media__img img{transform:scale(1.03)}
.wf-body{padding:clamp(1.5rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.wf-body .work-cat{margin-top:.2rem}
@media (max-width:768px){
  .work-featured{grid-template-columns:1fr}
  .wf-media{border-right:0;border-bottom:1px solid var(--line);min-height:220px}
}

/* ---------- Why us ---------- */
.feature{display:flex;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line-dark)}
.feature__ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(95,208,201,.14);color:#8fd6cf;display:grid;place-items:center}
.feature__ic svg{width:22px;height:22px}
.feature h4{color:#fff;margin-bottom:.35rem;font-size:1.08rem}
.feature p{font-size:.94rem;color:#a7bdb9;margin:0}

/* ---------- Process timeline ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;position:relative}
.process::before{content:"";position:absolute;top:34px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--mint-border),var(--teal),var(--mint-border));z-index:0}
.proc{position:relative;z-index:1;text-align:left}
.proc__dot{width:70px;height:70px;border-radius:18px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--teal);margin-bottom:1.2rem;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.proc__dot svg{width:30px;height:30px}
.proc:hover .proc__dot{background:var(--teal);color:#fff;transform:translateY(-4px)}
.proc__step{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:.4rem}
.proc h3{font-size:1.15rem;margin-bottom:.5rem}
.proc p{font-size:.92rem}
.section--dark .proc__dot{background:var(--charcoal-soft);border-color:var(--line-dark);color:#8fd6cf}
.section--dark .proc:hover .proc__dot{background:var(--teal);color:#fff}
.section--dark .proc p{color:#a7bdb9}
.section--dark .process::before{background:linear-gradient(90deg,transparent,rgba(95,208,201,.5),transparent)}

/* ---------- Founder ---------- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.founder__photo{position:relative}
.founder__photo img{width:100%;border-radius:var(--r-xl);position:relative;z-index:2;box-shadow:var(--shadow-lg)}
.founder__photo::before{content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:70%;background:var(--mint);border-radius:var(--r-xl);z-index:1}
.founder__badge{position:absolute;z-index:3;left:-16px;bottom:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:.85rem 1.1rem;display:flex;align-items:center;gap:.7rem}
.founder__badge b{font-family:var(--font-display);font-size:1.4rem;color:var(--ink);line-height:1}
.founder__badge span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.founder__sig{display:flex;flex-wrap:wrap;gap:1.4rem;margin:1.6rem 0}
.founder__sig div b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink);line-height:1}
.founder__sig div span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- Team ---------- */
.team-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.team-card::before{content:"";display:block;height:4px;background:transparent}
.team-card.is-founder::before{background:linear-gradient(90deg,var(--teal),#5fd0c9)}
.team-card.is-founder{border-color:var(--mint-border)}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.team-tag{display:inline-block;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);background:var(--mint);border:1px solid var(--mint-border);padding:.22rem .6rem;border-radius:var(--pill);margin-bottom:.7rem}
.team-card__img{aspect-ratio:3/4;overflow:hidden;background:var(--mint)}
.team-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.team-card:hover .team-card__img img{transform:scale(1.04)}
.team-card__body{padding:1.2rem 1.35rem 1.4rem}
.team-card__body h3{font-size:1.15rem;margin-bottom:.3rem}
.team-card__role{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;color:var(--teal)}
.team-card__note{font-size:.86rem;color:var(--muted);margin-top:.5rem}

/* ---------- Testimonial ---------- */
.quote{max-width:900px;margin-inline:auto;text-align:center}
.quote__mark{font-family:var(--font-display);font-size:4rem;line-height:.5;color:var(--teal);opacity:.5}
.quote blockquote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.4;letter-spacing:-.015em;color:#fff;margin:1.2rem 0 1.8rem}
.quote__author{display:flex;align-items:center;justify-content:center;gap:.9rem}
.quote__avatar{width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.2rem}
.quote__meta{text-align:left}
.quote__meta b{color:#fff;font-family:var(--font-display);font-size:1.02rem}
.quote__meta span{display:block;font-size:.85rem;color:#a7bdb9;max-width:38ch}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--teal-deep),var(--teal));border-radius:var(--r-xl);padding:clamp(2.2rem,5vw,3.6rem);text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"</>";position:absolute;right:-.1em;bottom:-.35em;font-family:var(--font-mono);font-size:12rem;color:rgba(255,255,255,.06);font-weight:600;pointer-events:none}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem)}
.cta-band p{color:rgba(255,255,255,.9);max-width:52ch;margin:1rem auto 1.8rem}
.cta-band .btn--light{color:var(--teal-deep)}

/* ---------- Page hero (inner) ---------- */
.page-hero{background:var(--charcoal-deep);color:#cfdedb;position:relative;overflow:clip}
.page-hero__glow{position:absolute;inset:0;background:radial-gradient(55% 60% at 88% 12%,rgba(1,148,154,.26),transparent 62%);pointer-events:none}
.page-hero .container{position:relative;z-index:2;padding-block:clamp(3rem,7vw,5rem)}
.page-hero h1{color:#fff;font-size:clamp(2.3rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.03}
.page-hero p{margin-top:1.1rem;color:#a9bfbb;font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:56ch}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-family:var(--font-mono);font-size:.76rem;color:#7f9895;margin-bottom:1.2rem;letter-spacing:.04em}
.breadcrumb a:hover{color:#8fd6cf}
.breadcrumb span{opacity:.5}

/* ---------- Forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:600;font-size:.88rem;color:var(--ink);margin-bottom:.45rem}
.field label .req{color:var(--teal)}
.field input,.field select,.field textarea{
  width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
  padding:.8rem .95rem;font-size:.95rem;color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);min-width:0;
}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:#a9b6b6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(1,148,154,.12)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#d9534f;box-shadow:0 0 0 4px rgba(217,83,79,.1)}
.field .err{display:none;color:#c9302c;font-size:.8rem;margin-top:.4rem;font-weight:500}
.field.invalid .err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.form-success{display:none;text-align:center;padding:1.2rem;background:var(--mint-tint);border:1px solid var(--mint-border);border-radius:var(--r);margin-bottom:1.3rem;color:var(--charcoal)}
.form-success.show{display:block}
.form-success b{color:var(--teal-deep);font-family:var(--font-display)}
.form-note{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin-top:.9rem;letter-spacing:.02em}

/* Contact info list */
.info-list{display:flex;flex-direction:column;gap:.35rem}
.info-item{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line)}
.info-item:last-child{border-bottom:0}
.info-item__ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--teal-deep);display:grid;place-items:center}
.info-item__ic svg{width:20px;height:20px}
.info-item span{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.info-item a,.info-item p{color:var(--ink);font-weight:500;font-size:.98rem;word-break:break-word}
.info-item a:hover{color:var(--teal)}

/* ---------- Footer ---------- */
.footer{background:var(--charcoal-deep);color:#a7bdb9;padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer__brand-lockup{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.footer__brand-lockup img{height:44px;width:auto}
.footer__brand-lockup b{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:-.02em}
.footer__tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#5fd0c9;margin-bottom:1rem}
.footer p{font-size:.92rem;color:#8ba4a0;max-width:34ch}
.footer h4{color:#fff;font-family:var(--font-display);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:700}
.footer__col a:not(.btn){display:block;padding:.32rem 0;color:#a7bdb9;font-size:.94rem;transition:color .2s var(--ease)}
.footer__col a:not(.btn):hover{color:#fff}
.footer__col a.btn{color:#fff;margin-top:1rem}
.footer__social{display:flex;gap:.6rem;margin-top:1.2rem}
.footer__social a{width:40px;height:40px;border-radius:10px;border:1px solid var(--line-dark);display:grid;place-items:center;color:#a7bdb9;transition:all .25s var(--ease)}
.footer__social a:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-2px)}
.footer__social svg{width:18px;height:18px}
.footer__bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer__bottom p{font-family:var(--font-mono);font-size:.76rem;color:#6f8885;max-width:none}
.footer__cta{display:flex;gap:.8rem;align-items:center}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Work filter ---------- */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filter button{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;padding:.5rem 1rem;border-radius:var(--pill);border:1.5px solid var(--line);color:var(--charcoal-soft);transition:all .2s var(--ease)}
.filter button:hover{border-color:var(--mint-border);color:var(--teal)}
.filter button.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}

/* ---------- Value list (about) ---------- */
.approach{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.approach-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.approach-item h4{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;font-size:1.08rem}
.approach-item h4 .n{font-family:var(--font-mono);font-size:.82rem;color:var(--teal)}
.approach-item p{font-size:.94rem;margin:0}

/* stack chips */
.stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.stack .chip{font-family:var(--font-mono);font-size:.78rem;color:var(--charcoal-soft);background:var(--white);border:1px solid var(--line);padding:.4rem .8rem;border-radius:var(--pill)}
.section--dark .stack .chip,.section--deep .stack .chip{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:#bcd3ce}

/* helpers */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}
.flex-cta{display:flex;flex-wrap:wrap;gap:.85rem}
.hidden{display:none !important}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .founder{grid-template-columns:1fr;gap:2.5rem}
  .founder__photo{max-width:460px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr);gap:2rem}
  .process::before{display:none}
}
@media (max-width:820px){
  .nav-links,.nav-cta .btn{display:none}
  .hamburger{display:flex}
  .cred{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav{height:64px}
  .brand img{height:34px}
  .grid--3,.grid--2,.approach{grid-template-columns:1fr}
  .grid--4{grid-template-columns:1fr}
  .process{grid-template-columns:1fr;gap:1.5rem}
  .field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .hero__stats{gap:1.4rem}
  .cred{grid-template-columns:1fr 1fr}
  .cred__item{padding:1.2rem}
  .quote__author{flex-direction:column;text-align:center}
  .quote__meta{text-align:center}
}
@media (max-width:380px){
  .cred{grid-template-columns:1fr}
  .hero__cta .btn,.flex-cta .btn{width:100%}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  html.js .reveal{opacity:1;transform:none}
  .caret{animation:none}
}