/* =========================================================
   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 { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  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%);
  background-attachment: fixed;
  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(120px);
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate;
}
body::before {
  width: 52vw; height: 52vw;
  top: -16vw; right: -10vw;
  background: radial-gradient(circle, #2fe0ad 0%, rgba(47,224,173,0.35) 38%, transparent 70%);
}
body::after {
  width: 48vw; height: 48vw;
  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: all 0.5s var(--ease);
}
.nav.scrolled {
  background: rgba(6,18,26,0.7);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--glass-bd);
  padding-block: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(120deg, #5fe7c0 0%, #2f9fd6 50%, #2a55c2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.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; }
.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; }
.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: visible; 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); cursor: pointer; }
.showcase-item[data-side="left"]  { align-self: flex-start; }
.showcase-item[data-side="right"] { align-self: flex-end; }

.sc-visual {
  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%); }

/* 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);
}
.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-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-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); }
.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 { color: var(--mist); }
.showcase-item:hover .sc-view 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 — pinned scroll reveal ---------- */
.team-pin { position: relative; height: calc(var(--count, 6) * 90vh); padding-block: 0; }
.team-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.team-sticky .wrap { width: 100%; }
.team-head { margin-bottom: clamp(24px, 4vh, 50px); }
.team-head h2 { margin-top: 16px; }

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

.tm-photo {
  position: relative; aspect-ratio: 3/3.7; width: 100%; max-height: 56vh; max-width: 380px; justify-self: start;
  border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center;
  background: var(--ink-2);
  transform: translateX(-60px) scale(0.94); opacity: 0;
  transition: transform 1s var(--ease), opacity 1s 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 {
  transform: translateX(60px); opacity: 0;
  transition: transform 1s var(--ease) 0.18s, opacity 1s var(--ease) 0.18s;
}
.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); }

.team-counter { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 4vh, 46px); font-family: var(--serif); }
.team-counter .cur { font-size: 1.6rem; color: var(--mist); }
.team-counter .sep, .team-counter .tot { color: var(--mist-dim); }
.team-progress { width: clamp(120px, 22vw, 240px); height: 2px; background: var(--glass-bd); position: relative; border-radius: 2px; overflow: hidden; }
.team-progress i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--grad-aqua); transition: width 0.2s linear; }
.team-hint { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist-dim); margin-left: auto; }

/* ---------- 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 .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; }
.proj-gallery .g.wide { grid-column: 1 / -1; aspect-ratio: 16/7; }
.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; }
.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); }

/* ---------- 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}

/* ---------- Cursor drop follower ---------- */
.cursor-drop { position: fixed; top: 0; left: 0; width: 22px; height: 22px; border-radius: 56% 44% 60% 40% / 55% 48% 52% 45%; background: radial-gradient(circle at 35% 30%, #7defd4, #2f9fd6 60%, #2a55c2); box-shadow: inset -3px -3px 7px rgba(8,40,110,0.5), inset 2px 2px 5px rgba(255,255,255,0.7); pointer-events: none; z-index: 9999; transition: opacity 0.4s var(--ease); opacity: 0.85; animation: morph 6s ease-in-out infinite; }
@media (hover: none) { .cursor-drop { display: none; } }

/* 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 ---------- */
@media (max-width: 980px) {
  .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%; }

  /* unpin team: stack members normally */
  .team-pin { height: auto !important; padding-block: clamp(70px, 11vw, 150px); }
  .team-sticky { position: static; height: auto; overflow: visible; }
  .team-stage { height: auto; display: flex; flex-direction: column; gap: 70px; }
  .tm { position: static; opacity: 1; pointer-events: auto; grid-template-columns: 0.9fr 1.1fr; gap: 34px; }
  .tm-photo, .tm-info { transform: none; opacity: 1; transition: none; }
  .team-counter { display: none; }
}
@media (max-width: 620px) {
  .nav-links { position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 340px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; padding: 40px; background: rgba(8,24,32,0.96); backdrop-filter: blur(20px); transform: translateX(100%); transition: transform 0.5s var(--ease); }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 1.4rem; font-family: var(--serif); }
  .burger { display: flex; z-index: 101; }
  .cards, .members, .values, .proj-meta, .footer-grid { grid-template-columns: 1fr; }
  .nav-cta { display: none; }
  .sc-cap h3 { font-size: 1.7rem; }
  .mock-phone { width: 22%; }
  .tm { grid-template-columns: 1fr !important; gap: 24px !important; }
  .tm-photo { max-width: none; aspect-ratio: 4/3; max-height: 50vh; }
}