/* =========================================================
   AQVA Studio — Creative Freelance Studio
   Design System  ·  Green × Blue  ·  Water-drop motif
   ========================================================= */

:root {
  /* Core palette — refined midnight · jewel emerald × sapphire */
  --ink:        #05080c;   /* deep midnight near-black */
  --ink-2:      #080d14;
  --ink-3:      #0c141d;
  --mist:       #eef3f2;   /* soft near-white */
  --mist-dim:   #8fa3a8;   /* muted slate */

  --green:      #36c9a0;   /* refined jade-emerald */
  --green-deep: #0c7a63;
  --blue:       #3f7fe8;   /* sapphire */
  --blue-deep:  #1b3da8;
  --cyan:       #4fb8c9;   /* muted teal */
  --champagne:  #cdb98f;   /* subtle metallic accent */

  --grad-aqua:  linear-gradient(120deg, #36c9a0 0%, #3f7fe8 100%);
  --grad-aqua-2:linear-gradient(135deg, #4fb8c9 0%, #1b3da8 100%);
  --grad-sheen: linear-gradient(120deg, #43d3aa 0%, #4d8ef0 50%, #2a59c4 100%);
  --grad-ink:   linear-gradient(180deg, #080d14 0%, #05080c 100%);

  --glass:      rgba(255,255,255,0.035);
  --glass-bd:   rgba(255,255,255,0.08);
  --glass-hi:   rgba(255,255,255,0.14);

  --shadow:     0 40px 100px -28px rgba(0,0,0,0.75);
  --shadow-glow:0 0 50px -14px rgba(54,201,160,0.35);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 48px;

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

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:  "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* easing — slow, weighted, premium */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; background: var(--ink); }

html { scroll-behavior: smooth; }

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 85% -5%, rgba(33,170,128,0.10) 0%, transparent 55%),
    radial-gradient(120% 80% at 10% 105%, rgba(46,110,220,0.11) 0%, transparent 55%),
    linear-gradient(180deg, #08111b 0%, var(--ink) 55%, #060c14 100%);
  pointer-events: none;
}

body {
  font-family: var(--sans);
  background: transparent;
  color: var(--mist);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
  position: relative;
}

/* ambient background blobs (the brand glow) */
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
  animation: drift 22s ease-in-out infinite alternate;
}
body::before {
  width: 40vw; height: 40vw;
  top: -16vw; right: -10vw;
  background: radial-gradient(circle, #2fe0ad 0%, rgba(47,224,173,0.35) 38%, transparent 70%);
}
body::after {
  width: 36vw; height: 36vw;
  bottom: -18vw; left: -12vw;
  background: radial-gradient(circle, #3f8bff 0%, rgba(63,139,255,0.35) 38%, transparent 70%);
  animation-delay: -11s;
}
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(4vw,3vw) scale(1.14); } }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); position: relative; z-index: 2; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }
.display { font-size: clamp(2.8rem, 8vw, 7.5rem); }
.h-xl    { font-size: clamp(2.2rem, 5.5vw, 4.5rem); }
.h-lg    { font-size: clamp(1.8rem, 3.5vw, 3rem); }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--green);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--green); display: inline-block; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--mist-dim); max-width: 60ch; }
.text-grad { background: var(--grad-aqua); -webkit-background-clip: text; background-clip: text; color: transparent; }
.serif-italic { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 32px; border-radius: 100px;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer; border: none;
  transition: box-shadow 0.6s var(--ease), color 0.5s var(--ease-soft), border-color 0.6s var(--ease);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn span, .btn { z-index: 1; }
/* sweeping fill layer */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.75s var(--ease);
}
.btn:hover::before { transform: translateX(0); }

.btn-primary {
  background: var(--grad-aqua); color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(54,201,160,0.5), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.btn-primary::before { background: var(--grad-sheen); background-size: 200% 100%; }
.btn-primary:hover {
  box-shadow: 0 18px 44px -16px rgba(63,127,232,0.55), 0 0 0 1px rgba(255,255,255,0.22) inset;
}

.btn-ghost {
  background: var(--glass); color: var(--mist);
  border: 1px solid var(--glass-bd); backdrop-filter: blur(12px);
}
.btn-ghost::before { background: var(--grad-aqua); }
.btn-ghost:hover { color: var(--ink); border-color: transparent; box-shadow: var(--shadow-glow); }

.btn .arrow { transition: transform 0.6s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(6px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease), padding 0.5s var(--ease), border-color 0.5s var(--ease);
}
.nav.scrolled {
  border-bottom: 1px solid var(--glass-bd);
  padding-block: 16px;
}
.nav.scrolled::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(6,18,26,0.86);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.brand { display: flex; align-items: center; }
.brand svg { width: 34px; height: 34px; display: block; flex: none; }
.brand .drop-mark { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--mist-dim); position: relative; transition: color 0.5s var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; border-radius: 2px; background: var(--grad-aqua); transition: width 0.55s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--mist); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { padding: 11px 22px; font-size: 0.85rem; }
/* keep CTA text dark on its bright gradient, even as a nav link */
.nav-links a.nav-cta, .nav-links a.nav-cta:hover, .nav-links a.nav-cta.active { color: var(--ink); }
.nav-links a.nav-cta::after { display: none; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.burger span { width: 26px; height: 2px; background: var(--mist); transition: 0.3s; }

/* ---------- Sections ---------- */
section { padding-block: clamp(70px, 11vw, 150px); position: relative; z-index: 2; }
.section-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 60px; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 120px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; width: 100%; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { margin-bottom: 40px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stage { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scroll-cue { position: absolute; bottom: 34px; left: var(--pad); display: flex; align-items: center; gap: 12px; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist-dim); }
.scroll-cue .line { width: 50px; height: 1px; background: var(--mist-dim); position: relative; overflow: hidden; }
.scroll-cue .line::after { content:""; position:absolute; inset:0; background: var(--green); animation: scrollline 2s var(--ease) infinite; }
@keyframes scrollline { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ===== Premium liquid water-drop (hero) ===== */
@keyframes morph {
  0%,100% { border-radius: 56% 44% 60% 40% / 55% 48% 52% 45%; }
  33%     { border-radius: 42% 58% 45% 55% / 50% 60% 40% 50%; }
  66%     { border-radius: 60% 40% 52% 48% / 42% 45% 55% 58%; }
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-22px)} }
@keyframes spin { to { transform: rotate(360deg); } }

.liquid-wrap {
  position: relative; width: min(440px, 86%); aspect-ratio: 1;
  display: grid; place-items: center; isolation: isolate;
  animation: floaty 9s ease-in-out infinite;
}
.liquid { width: 100%; height: 100%; overflow: hidden; filter: drop-shadow(0 36px 70px rgba(22,70,150,0.5)); }

.ring { position: absolute; inset: -4%; border-radius: 50%; border: 1px solid var(--glass-bd); animation: spin 26s linear infinite; pointer-events: none; }
.ring.r2 { inset: -15%; border-style: dashed; animation-duration: 44s; animation-direction: reverse; opacity: 0.45; }

/* gloss / shading layers stacked over the liquid body */
.liq-layer { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.liq-shade { background: radial-gradient(circle at 64% 70%, rgba(3,10,32,0) 28%, rgba(3,10,32,0.5) 74%, rgba(3,10,32,0.62) 100%); mix-blend-mode: multiply; }
.liq-hi    { background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.35) 8%, rgba(255,255,255,0) 26%); mix-blend-mode: screen; }
.liq-spec  { background: radial-gradient(circle at 35% 29%, #ffffff 0%, rgba(255,255,255,0) 3.5%); mix-blend-mode: screen; }
.liq-rim   { width: 78%; background: radial-gradient(circle at 50% 86%, rgba(95,231,192,0.55) 0%, rgba(95,231,192,0) 16%); mix-blend-mode: screen; }

/* ---------- Featured / Work SHOWCASE ---------- */
.showcase { display: flex; flex-direction: column; gap: clamp(80px, 12vw, 170px); position: relative; }
.showcase-item { display: block; position: relative; width: min(86%, 980px); }
.showcase-item[data-side="left"]  { align-self: flex-start; }
.showcase-item[data-side="right"] { align-self: flex-end; }

.sc-visual {
  display: block; position: relative; aspect-ratio: 16/10; border-radius: var(--r-lg);
  transform: perspective(1200px) rotateY(0) rotateX(0);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
/* decorative glow shape behind */
.sc-visual::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  background: var(--grad-aqua); opacity: 0; filter: blur(50px);
  transition: opacity 0.8s var(--ease); transform: translateZ(-60px);
}
.showcase-item:hover .sc-visual::before { opacity: 0.28; }

.sc-index {
  position: absolute; top: -34px; font-family: var(--serif); font-style: italic;
  font-size: clamp(2.4rem, 5vw, 4.2rem); color: rgba(255,255,255,0.10);
  z-index: 5; pointer-events: none; transition: color 0.7s var(--ease);
}
.showcase-item[data-side="left"]  .sc-index { left: -10px; }
.showcase-item[data-side="right"] .sc-index { right: -10px; }
.showcase-item:hover .sc-index { color: rgba(54,201,160,0.55); }

/* browser mockup */
.mock-browser {
  position: absolute; inset: 0; border-radius: var(--r-md); overflow: hidden;
  background: #0a121a; border: 1px solid var(--glass-bd);
  box-shadow: 0 50px 110px -30px rgba(0,0,0,0.85);
  transition: box-shadow 0.8s var(--ease);
}
.showcase-item:hover .mock-browser { box-shadow: 0 60px 130px -28px rgba(0,0,0,0.9), var(--shadow-glow); }
.mock-bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--glass-bd); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.mock-bar i:first-child { background: #ff6058; } .mock-bar i:nth-child(2){ background: #ffbe2f; } .mock-bar i:nth-child(3){ background: #2bc840; }
.mock-url { margin-left: 14px; font-size: 0.72rem; color: var(--mist-dim); background: rgba(255,255,255,0.05); padding: 4px 14px; border-radius: 20px; letter-spacing: 0.03em; }
.mock-screen { position: absolute; inset: 38px 0 0; display: grid; place-items: center; overflow: hidden; }
.mock-screen::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%); }
.mock-screen.has-img { background-size: cover; background-position: top center; }

/* faux website UI inside the screen */
.mock-ui { position: relative; z-index: 1; width: 78%; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.mock-ui span { display: block; border-radius: 6px; background: rgba(255,255,255,0.85); }
.ui-logo { width: 42px; height: 42px; border-radius: 50%!important; background: rgba(255,255,255,0.92)!important; }
.ui-h   { width: 70%; height: 16px; }
.ui-sub { width: 50%; height: 9px; background: rgba(255,255,255,0.55)!important; }
.ui-btn { width: 110px; height: 26px; border-radius: 40px!important; background: rgba(255,255,255,0.95)!important; }
.ui-row { display: flex; gap: 12px; margin-top: 8px; width: 100%; justify-content: center; }
.ui-row b { width: 26%; height: 46px; border-radius: 8px; background: rgba(255,255,255,0.18); display: block; }

/* phone mockup overlapping the corner */
.mock-phone {
  position: absolute; bottom: -7%; width: 17%; aspect-ratio: 9/19; z-index: 6;
  border-radius: 22px; border: 3px solid rgba(8,14,20,0.9); overflow: hidden;
  box-shadow: 0 30px 60px -16px rgba(0,0,0,0.8); transform: translateZ(40px);
  transition: transform 0.7s var(--ease);
}
.mock-phone.has-img { background-size: cover; background-position: top center; }
.showcase-item[data-side="left"]  .mock-phone { right: -3%; }
.showcase-item[data-side="right"] .mock-phone { left: -3%; }
.showcase-item:hover .mock-phone { transform: translateZ(60px) translateY(-6px); }
.mp-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 32%; height: 6px; border-radius: 6px; background: rgba(0,0,0,0.5); z-index: 2; }
.mp-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.mp-ui span { width: 56%; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.85); }
.mp-ui span:nth-child(2){ width: 40%; background: rgba(255,255,255,0.5); }
.mp-ui span:nth-child(3){ width: 64px; height: 20px; border-radius: 30px; }

/* caption */
.sc-cap { margin-top: 30px; }
.showcase-item[data-side="right"] .sc-cap { text-align: right; }
.sc-title-row { display: flex; align-items: baseline; gap: 16px; }
.showcase-item[data-side="right"] .sc-title-row { justify-content: flex-end; }
.sc-title-row a { text-decoration: none; color: inherit; }
.sc-cap h3 { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3.4rem); transition: color 0.6s var(--ease); }
.showcase-item:hover .sc-cap h3 { color: transparent; background: var(--grad-aqua); -webkit-background-clip: text; background-clip: text; }
.sc-ext {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; border: 1px solid var(--glass-bd); color: var(--mist-dim);
  font-style: normal; text-decoration: none; transition: 0.4s var(--ease);
}
.sc-ext:hover { background: var(--grad-aqua); border-color: transparent; color: var(--ink); transform: rotate(-45deg); }
.sc-meta { display: flex; gap: 18px; align-items: center; margin-top: 8px; }
.showcase-item[data-side="right"] .sc-meta { justify-content: flex-end; }
.sc-meta .tags { font-size: 0.9rem; color: var(--mist-dim); }
.sc-meta .yr { font-size: 0.78rem; color: var(--green); letter-spacing: 0.12em; }
.sc-view { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist-dim); transition: color 0.6s var(--ease); text-decoration: none; }
.sc-view i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--glass-bd); font-style: normal; transition: 0.6s var(--ease); }
.showcase-item:hover .sc-view, .sc-view:hover { color: var(--mist); }
.showcase-item:hover .sc-view i, .sc-view:hover i { background: var(--grad-aqua); border-color: transparent; color: var(--ink); transform: rotate(-45deg); }

.work-list { display: flex; flex-direction: column; }
.work-row {
  display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 30px;
  padding: 34px 10px; border-top: 1px solid var(--glass-bd);
  transition: padding 0.7s var(--ease), background 0.7s var(--ease);
  position: relative; cursor: pointer; overflow: hidden;
}
.work-row::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(54,201,160,0.07), transparent 60%); opacity: 0; transition: opacity 0.7s var(--ease); }
.work-row:hover::before { opacity: 1; }
.work-row > * { position: relative; z-index: 1; }
.work-row:last-child { border-bottom: 1px solid var(--glass-bd); }
.work-row .num { font-family: var(--serif); font-size: 1rem; color: var(--mist-dim); transition: color 0.6s var(--ease); }
.work-row .title { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 3rem); transition: transform 0.7s var(--ease), color 0.6s var(--ease); transform-origin: left; }
.work-row .tags { font-size: 0.85rem; color: var(--mist-dim); justify-self: end; text-align: right; max-width: 260px; transition: color 0.6s var(--ease); }
.work-row .go { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--glass-bd); display: grid; place-items: center; transition: transform 0.7s var(--ease), background 0.6s var(--ease), border-color 0.6s var(--ease), color 0.6s var(--ease); justify-self: end; }
.work-row:hover { padding-left: 30px; background: rgba(255,255,255,0.012); }
.work-row:hover .num { color: var(--green); }
.work-row:hover .title { color: transparent; background: var(--grad-aqua); -webkit-background-clip: text; background-clip: text; transform: translateX(6px); }
.work-row:hover .go { background: var(--grad-aqua); border-color: transparent; color: var(--ink); transform: rotate(-45deg) scale(1.08); }

/* card grid (work page) */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.card {
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer;
  transition: transform 0.8s var(--ease), border-color 0.7s var(--ease), box-shadow 0.8s var(--ease);
  backdrop-filter: blur(10px); will-change: transform;
}
.card:hover { transform: translateY(-10px); border-color: var(--glass-hi); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 16/11; position: relative; overflow: hidden; display: grid; place-items: center; }
.card-media .gfx { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.card-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(5,8,12,0.55)); z-index:1; }
.card:hover .card-media .gfx { transform: scale(1.08); }
.card-media .badge { position: relative; z-index: 2; font-family: var(--serif); font-size: 2.6rem; color: rgba(255,255,255,0.9); }
.card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; }
.card-body h3 { font-size: 1.7rem; }
.card-body .meta { font-size: 0.82rem; color: var(--mist-dim); }
.card-body .yr { font-size: 0.78rem; color: var(--green); letter-spacing: 0.15em; }

/* gradient gfx fills for placeholder media */
.gfx-1 { background: radial-gradient(circle at 30% 30%, #1fd6a6, #0f9c7c 55%, #06121a); }
.gfx-2 { background: radial-gradient(circle at 70% 30%, #46e0e0, #1454c8 60%, #06121a); }
.gfx-3 { background: linear-gradient(135deg, #2b8cff, #1fd6a6); }
.gfx-4 { background: conic-gradient(from 200deg at 60% 40%, #1fd6a6, #2b8cff, #46e0e0, #1fd6a6); }
.gfx-5 { background: radial-gradient(circle at 50% 120%, #46e0e0, #1454c8 50%, #06121a); }
.gfx-6 { background: linear-gradient(160deg, #0f9c7c, #2b8cff 70%, #06121a); }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card { padding: 34px 28px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-bd); transition: transform 0.7s var(--ease), background 0.7s var(--ease), border-color 0.7s var(--ease), box-shadow 0.7s var(--ease); position: relative; overflow: hidden; }
.value-card::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 100% at 0% 0%, rgba(54,201,160,0.10), transparent 55%); opacity:0; transition: opacity 0.7s var(--ease); }
.value-card:hover { transform: translateY(-8px); border-color: var(--glass-hi); box-shadow: var(--shadow); }
.value-card:hover::before { opacity: 1; }
.value-card .vicon { width: 46px; height: 46px; margin-bottom: 22px; transition: transform 0.7s var(--ease); position: relative; }
.value-card:hover .vicon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.value-card h4 { font-size: 1.45rem; margin-bottom: 10px; }
.value-card p { font-size: 0.92rem; color: var(--mist-dim); }

/* ---------- Expertise marquee / tags ---------- */
.exp-tags { display: flex; flex-wrap: wrap; gap: 14px; }
.exp-tag { padding: 12px 22px; border-radius: 100px; border: 1px solid var(--glass-bd); font-size: 0.92rem; color: var(--mist-dim); transition: color 0.55s var(--ease-soft), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); position: relative; overflow: hidden; isolation: isolate; }
.exp-tag::before { content:""; position:absolute; inset:0; z-index:-1; background: var(--grad-aqua); border-radius: inherit; transform: translateX(-101%); transition: transform 0.6s var(--ease); }
.exp-tag:hover::before { transform: translateX(0); }
.exp-tag:hover { color: var(--ink); border-color: transparent; box-shadow: var(--shadow-glow); }

/* ---------- Members (about) ---------- */
.members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.member {
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg);
  overflow: hidden; transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease), border-color 0.7s var(--ease);
  will-change: transform;
}
.member:hover { transform: translateY(-10px); box-shadow: var(--shadow); border-color: var(--glass-hi); }
.member-photo { aspect-ratio: 3/3.6; position: relative; display: grid; place-items: center; overflow: hidden; }
.member-photo .av { width: 100%; height: 100%; position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.member:hover .member-photo .av { transform: scale(1.07); }
.member-photo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(5,8,12,0.6)); z-index:1; }
.member-photo .initials { position: relative; z-index: 2; font-family: var(--serif); font-size: 4rem; color: rgba(255,255,255,0.92); }
.member-body { padding: 24px 26px 28px; }
.member-body h3 { font-size: 1.6rem; }
.member-body .role { font-size: 0.82rem; color: var(--green); letter-spacing: 0.12em; text-transform: uppercase; margin: 4px 0 14px; }
.member-body p { font-size: 0.9rem; color: var(--mist-dim); }
.member-body .bgline { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-bd); font-size: 0.82rem; color: var(--mist-dim); }
.member-body .bgline span { color: var(--mist); }

/* ---------- Team — button carousel ---------- */
.team-sec { padding-block: clamp(70px, 10vw, 130px); }
.team-head { margin-bottom: clamp(36px, 5vh, 60px); }
.team-head h2 { margin-top: 16px; }

.team-stage { position: relative; height: min(58vh, 520px); }
.tm {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(34px, 6vw, 80px);
  align-items: stretch;
  opacity: 0; pointer-events: none;
  transition: opacity 0.55s var(--ease);
}
.tm.active { opacity: 1; pointer-events: auto; }

.tm-photo {
  position: relative; width: 100%; max-width: 420px; justify-self: start;
  border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center;
  background: var(--ink-2);
  transform: translateX(-50px) scale(0.96); opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
}
.tm.active .tm-photo { transform: none; opacity: 1; }
.tm-photo .av { position: absolute; inset: 0; }
.tm-photo .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tm-photo.has-img .av, .tm-photo.has-img .initials { display: none; }
.tm-photo .initials { position: relative; z-index: 2; font-family: var(--serif); font-size: clamp(3rem, 7vw, 5.5rem); color: rgba(255,255,255,0.92); }
.tm-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,8,12,0.55)); }

.tm-info {
  display: flex; flex-direction: column; justify-content: center;
  transform: translateX(50px); opacity: 0;
  transition: transform 0.9s var(--ease) 0.1s, opacity 0.9s var(--ease) 0.1s;
}
.tm.active .tm-info { transform: none; opacity: 1; }
.tm-num { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 4vw, 3.4rem); color: rgba(54,201,160,0.5); display: block; margin-bottom: 6px; }
.tm-info h3 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.tm-info .role { font-size: 0.82rem; color: var(--green); letter-spacing: 0.16em; text-transform: uppercase; margin: 10px 0 22px; }
.tm-info p { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--mist); max-width: 46ch; line-height: 1.6; }
.tm-info .bgline { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--glass-bd); font-size: 0.9rem; color: var(--mist-dim); max-width: 46ch; }
.tm-info .bgline span { color: var(--mist); }

/* carousel controls */
.team-ctrl { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 3.5vh, 38px); }
.tc-btn {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--glass-bd); background: transparent;
  color: var(--mist); cursor: pointer; display: grid; place-items: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.tc-btn:hover { background: rgba(54,201,160,0.08); border-color: var(--cyan); color: var(--cyan); }
.tc-btn svg { pointer-events: none; }
.tc-dots { display: flex; align-items: center; gap: 8px; }
.tc-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,0.18); border: none; cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.tc-dot.active { background: var(--cyan); transform: scale(1.5); }
.tc-count { margin-left: auto; font-family: var(--serif); color: var(--mist-dim); font-size: 0.9rem; letter-spacing: 0.04em; }
.tc-cur { color: var(--mist); font-size: 1.2rem; }

/* ---------- Project detail ---------- */
.proj-hero { padding-top: 160px; padding-bottom: 40px; }
.proj-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 0; border-top: 1px solid var(--glass-bd); border-bottom: 1px solid var(--glass-bd); margin: 50px 0; }
.proj-meta .item .k { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.proj-meta .item .v { font-size: 1.05rem; }
.proj-cover { aspect-ratio: 16/8; border-radius: var(--r-lg); overflow: hidden; position: relative; display: grid; place-items: center; }
.proj-cover.has-img { background-size: cover; background-position: top center; }
.proj-cover .label { position: relative; z-index: 2; font-family: var(--serif); font-size: clamp(2rem,6vw,5rem); color: rgba(255,255,255,0.92); }
.proj-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; align-items: start; }
.proj-body .sticky { position: sticky; top: 120px; }
.proj-body p { color: var(--mist-dim); margin-bottom: 20px; font-size: 1.02rem; }
.proj-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.proj-gallery .g { aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; background-size: cover; background-position: top center; }
.proj-gallery .g.wide { grid-column: 1 / -1; aspect-ratio: 16/7; }

/* mobile-app project gallery — grid of phone-shaped screenshots instead of desktop crops */
.proj-gallery.gallery-mobile { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.proj-gallery.gallery-mobile .g { aspect-ratio: 9/19.5; background-color: #0b0f14; background-size: contain; background-repeat: no-repeat; background-position: center; }
.proj-nav { display: flex; justify-content: space-between; align-items: center; padding: 50px 0; border-top: 1px solid var(--glass-bd); margin-top: 60px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist-dim); margin-bottom: 10px; }
.field input, .field textarea {
  width: 100%; padding: 16px 18px; border-radius: var(--r-sm);
  background: var(--glass); border: 1px solid var(--glass-bd); color: var(--mist);
  font-family: var(--sans); font-size: 1rem; transition: 0.3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); background: rgba(31,214,166,0.06); }
.field textarea { min-height: 140px; resize: vertical; }
.field .opt { text-transform: none; letter-spacing: normal; opacity: 0.6; font-size: 0.78em; }
.contact-info .line { display: flex; flex-direction: column; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--glass-bd); }
.contact-info .line .k { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); }
.contact-info .line .v { font-size: 1.2rem; font-family: var(--serif); }

/* honeypot — off-screen so real users never see or fill it, bots that blanket-fill forms will */
.field.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* contact form submit / error states */
.contact-form-wrap { position: relative; }
.btn-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; display: none; animation: spin 0.7s linear infinite; margin-right: 2px; }
#contactSubmit.is-loading .btn-spinner { display: inline-block; }
#contactSubmit.is-loading .arrow { display: none; }
#contactSubmit.is-loading { pointer-events: none; opacity: 0.85; }
.form-error {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--r-sm);
  background: rgba(227,93,93,0.1); border: 1px solid rgba(227,93,93,0.35);
  color: #f0a3a3; font-size: 0.92rem;
}

/* success panel — replaces the form, brand-consistent celebratory reveal */
.form-success { text-align: left; padding-top: 4px; }
.form-success h3 { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; margin: 22px 0 10px; }
.form-success p { color: var(--mist-dim); max-width: 40ch; margin-bottom: 26px; }
.fs-badge { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.fs-circle { stroke-dasharray: 176; stroke-dashoffset: 176; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: ring-draw 0.9s cubic-bezier(0.4,0,0.2,1) 0.05s forwards; }
.fs-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fs-check-draw 0.5s ease-out 0.65s forwards; }
.fs-ripple {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--green); opacity: 0;
  animation: fs-ripple 1.6s ease-out 0.5s infinite;
}
.fs-ripple-2 { animation-delay: 0.9s; }
@keyframes fs-check-draw { to { stroke-dashoffset: 0; } }
@keyframes fs-ripple {
  0%   { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; position: relative; }
.cta-band h2 { margin-bottom: 30px; }
.cta-band .big-word { font-size: clamp(3rem, 12vw, 12rem); line-height: 0.9; }

/* ---------- Footer ---------- */
.footer { padding: 70px var(--pad) 40px; border-top: 1px solid var(--glass-bd); position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 50px; }
.footer h4 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist-dim); margin-bottom: 18px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer ul a { color: var(--mist-dim); font-size: 0.95rem; transition: color 0.3s; }
.footer ul a:hover { color: var(--green); }
.footer .brand { margin-bottom: 16px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid var(--glass-bd); font-size: 0.82rem; color: var(--mist-dim); flex-wrap: wrap; gap: 14px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ---------- Creative cursor ---------- */
body, body * { cursor: none; }
@media (hover: none), (pointer: coarse) { body, body * { cursor: auto !important; } }

.cur-dot {
  position: fixed;
  top: 0; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}

.cur-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(79,184,201,0.75);
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
  box-shadow: 0 0 10px rgba(63,127,232,0.25);
  transition: border-color 0.35s, box-shadow 0.35s;
}
.cur-ring.is-hover {
  border-color: rgba(54,201,160,0.65);
  box-shadow: 0 0 16px rgba(54,201,160,0.3);
}

/* ---------- Cursor ambient glow ---------- */
#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at center,
    rgba(47,159,214,0.42) 0%,
    rgba(63,127,232,0.26) 35%,
    rgba(54,201,160,0.10) 60%,
    transparent 75%
  );
  filter: blur(46px);
  will-change: transform;
  transform: translateZ(0);
}
@media (hover: none), (pointer: coarse) { #cursor-glow { display: none !important; } }
@media (hover: none), (pointer: coarse) { .cur-dot, .cur-ring { display: none !important; } }


/* page intro loader */
.loader { position:fixed; inset:0; background:var(--ink); z-index:9998; display:grid; place-items:center; transition:opacity 0.7s var(--ease), visibility 0.7s; }
.loader.hide { opacity:0; visibility:hidden; }
.loader::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 50% 100%, rgba(47,159,214,0.28) 0%, rgba(42,85,194,0.16) 40%, transparent 68%); pointer-events:none; animation:glow-breathe 4s ease-in-out infinite alternate; }
@keyframes glow-breathe { from{opacity:0.55} to{opacity:1} }
.loader .drop { width:64px; height:64px; animation:morph 2.6s ease-in-out infinite, floaty 2.6s ease-in-out infinite; border-radius:56% 44% 60% 40% / 55% 48% 52% 45%; background:radial-gradient(circle at 36% 30%, #6fead0, #2f9fd6 55%, #2a55c2); box-shadow:inset -10px -10px 26px rgba(8,40,110,0.5), inset 8px 8px 20px rgba(255,255,255,0.55), 0 18px 40px -10px rgba(22,70,150,0.6); position:relative; }
.loader .drop::after { content:""; position:absolute; top:18%; left:24%; width:20%; height:26%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.95), transparent 70%); }
.loader-inner { display:flex; flex-direction:column; align-items:center; gap:32px; }
.loader-ring { width:88px; height:88px; }
.ring-bg { fill:none; stroke:rgba(255,255,255,0.06); stroke-width:2.5; }
.ring-arc { fill:none; stroke:url(#ringGrad); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:239; stroke-dashoffset:239; transform-box:fill-box; transform-origin:center; transform:rotate(-90deg); animation:ring-draw 1.9s cubic-bezier(0.4,0,0.2,1) 0.1s forwards; }
@keyframes ring-draw { from{stroke-dashoffset:239} to{stroke-dashoffset:0} }
.loader-text { display:flex; align-items:baseline; gap:0.28em; font-family:var(--serif); font-size:clamp(2.8rem,6vw,4.5rem); font-style:italic; font-weight:600; line-height:1; }
.lt-we { color:#fff; opacity:0; animation:lt-fade 0.6s ease 0.2s forwards; }
.lt-word-wrap { display:inline-block; }
.lt-freelancer { display:inline-block; background:linear-gradient(135deg,#5fe7c0 0%,#2f9fd6 65%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:0; animation:lt-fade 0.7s ease 0.75s forwards; }
@keyframes lt-fade { from{opacity:0} to{opacity:1} }

/* ---------- Responsive ---------- */
/* ---------- Nav overlay + burger-X ---------- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.burger span { transition: transform 0.3s var(--ease), opacity 0.3s, background 0.3s; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* Nav → slide drawer for tablet + mobile */
  .nav-links {
    position: fixed; inset: 0 0 0 auto; z-index: 99;
    width: 72%; max-width: 300px;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 0; padding: 80px 36px 36px;
    background: rgba(6,14,22,0.97); backdrop-filter: blur(24px);
    transform: translateX(100%); transition: transform 0.5s var(--ease);
    overflow-y: auto; counter-reset: nav-item;
  }
  .nav-links.open { transform: none; }

  /* Domino items — start hidden, slide from left */
  .nav-links a {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-family: var(--serif); font-weight: 600; line-height: 1;
    color: var(--mist);
    display: flex; flex-direction: column; gap: 3px;
    opacity: 0; transform: translateX(-36px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), color 0.3s;
    counter-increment: nav-item;
  }
  /* numbered eyebrow */
  .nav-links a::before {
    content: "0" counter(nav-item);
    font-family: var(--sans); font-size: 0.55rem;
    letter-spacing: 0.14em; font-weight: 500;
    color: var(--mist-dim);
  }
  .nav-links a::after { display: none; }
  .nav-links a:hover { color: var(--cyan); }

  /* domino stagger — each item 80ms later */
  .nav-links.open a:nth-child(1) { opacity:1; transform:none; transition-delay:0.08s; }
  .nav-links.open a:nth-child(2) { opacity:1; transform:none; transition-delay:0.16s; }
  .nav-links.open a:nth-child(3) { opacity:1; transform:none; transition-delay:0.24s; }
  .nav-links.open a:nth-child(4) { opacity:1; transform:none; transition-delay:0.32s; }
  .nav-links.open a:nth-child(5) { opacity:1; transform:none; transition-delay:0.40s; }

  .nav-links .nav-cta {
    font-size: 1rem;
    padding: 12px 24px;
    margin-top: 20px;
    align-self: flex-start;
    counter-increment: none;
    border-bottom: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    opacity: 0; transform: translateX(-36px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  }
  .nav-links .nav-cta::before { display: none; }
  .nav-links.open .nav-cta { opacity: 1; transform: none; transition-delay: 0.40s; }
  .burger { display: flex; z-index: 101; }

  /* Layout */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { height: 360px; order: -1; }
  .cards, .members, .values { grid-template-columns: 1fr 1fr; }
  .proj-body, .contact-grid { grid-template-columns: 1fr; }
  .proj-meta { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .work-row { grid-template-columns: 40px 1fr; }
  .work-row .tags, .work-row .go { display: none; }
  .showcase-item { width: 100%; }

  /* Team carousel mobile */
  .team-stage { height: min(62vw, 400px); }
  .tm { grid-template-columns: 0.9fr 1.1fr; gap: 24px; }
  .tm-photo { max-width: none; aspect-ratio: 3/3.7; }
}

@media (max-width: 620px) {
  .nav-links { width: 82%; }
  .cards, .members, .values, .proj-meta, .footer-grid { grid-template-columns: 1fr; }
  .sc-cap h3 { font-size: 1.7rem; }
  .mock-phone { width: 22%; }
  .team-stage { height: auto; min-height: 520px; }
  .tm { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; }
  .tm-photo { max-width: none !important; aspect-ratio: 4/3; }
  .tm-info { justify-content: flex-start; }
}