/* ════════════════════════════════════════════════════
   CYRON TUPANG DESIGN SYSTEM  ·  cyron-design.css
   Typography: Futura (Nunito Sans web substitute) +
               Syne (display) + IBM Plex Mono (utility)
   Maintained: 2025
════════════════════════════════════════════════════ */

/* ── IMPORTS ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── TOKENS ── */
:root {
  /* Color palette */
  --bg:           #060606;   /* flat premium black */
  --bg-2:         #0E0E10;
  --bg-3:         #16161A;
  --ink:          #EDEAE3;
  --ink-soft:     #9B9790;
  --muted:        #5e5c57;
  --line:         #242430;
  --line-soft:    #18181f;

  /* Accent — electric violet */
  --accent:       #6E63FF;
  --accent-2:     #9A8CFF;
  --accent-soft:  rgba(110, 99, 255, .14);
  --accent-soft-2:rgba(110, 99, 255, .28);

  /* Typography — Futura system */
  --futura:       'Nunito Sans', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --display:      'Syne', 'Nunito Sans', system-ui, sans-serif;
  --body:         'Nunito Sans', system-ui, sans-serif;
  --mono:         'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing & layout */
  --maxw:  1180px;
  --pad:   clamp(24px, 5vw, 56px);
  --sec:   clamp(60px, 8vw, 110px);
  --r:     5px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { background: var(--bg); }
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Smoke canvas sits at z-index:-1 (behind content, above the html backdrop).
   Header and main are lifted above it so the page stays interactive. */
#fluid{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}
header.nav{position:sticky;z-index:60}
main{position:relative;z-index:1}
#prog{z-index:100}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* ── LAYOUT ── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ── TYPOGRAPHY CLASSES ── */
.mono  { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.disp  { font-family: var(--display); }
.futura{ font-family: var(--futura); }

/* Type scale */
.t-hero  { font-family: var(--futura); font-weight: 800; font-size: clamp(44px, 7vw, 90px); line-height: .94; letter-spacing: -.02em; }
.t-h1    { font-family: var(--futura); font-weight: 700; font-size: clamp(34px, 4.8vw, 58px); line-height: .98; letter-spacing: -.015em; }
.t-h2    { font-family: var(--futura); font-weight: 700; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.02; letter-spacing: -.01em; }
.t-h3    { font-family: var(--futura); font-weight: 600; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.1; }
.t-body  { font-family: var(--body);   font-size: clamp(15px, 1.4vw, 17px); line-height: 1.68; }
.t-small { font-family: var(--body);   font-size: clamp(13px, 1.2vw, 14.5px); color: var(--ink-soft); }
.t-label { font-family: var(--mono);   font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.t-acc   { font-family: var(--mono);   font-size: 12px; letter-spacing: .06em; color: var(--accent-2); }

/* ── BUTTONS ── */
.btn-primary {
  font-family: var(--futura);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--r);
  border: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .7ch;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s;
  box-shadow: 0 12px 32px -12px var(--accent);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px var(--accent); }

.btn-ghost {
  font-family: var(--futura);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 23px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  transition: border-color .22s, color .22s, transform .22s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-3px); }

/* ── CARDS ── */
.card-base {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .28s, transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
}
.card-base:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 28px 60px -28px rgba(110, 99, 255, .28);
}

/* ── FORM CONTROLS ── */
.input-base {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  font-family: var(--body);
  font-size: 14.5px;
  background: var(--bg-3);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.input-base:focus { border-color: var(--accent); }
.input-base::placeholder { color: var(--muted); }

.select-base {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 14px;
  font-family: var(--futura);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--bg-3);
  color: var(--ink);
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s;
}
.select-base:focus { border-color: var(--accent); }

.label-base {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.textarea-base {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  font-family: var(--body);
  font-size: 14px;
  background: var(--bg-3);
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color .2s;
}
.textarea-base:focus { border-color: var(--accent); }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 500;
}
.badge-accent { background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(110,99,255,.28); }
.badge-success{ background: rgba(55,211,153,.12); color: #37d399; border: 1px solid rgba(55,211,153,.24); }
.badge-warn   { background: rgba(251,191,36,.1);  color: #fbbf24; border: 1px solid rgba(251,191,36,.24); }
.badge-muted  { background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); }

/* ── DIVIDERS ── */
.rule { border: none; border-top: 1px solid var(--line-soft); margin: 0; }
.rule-strong { border-top-color: var(--line); }

/* ── SKILL LEVEL BAR ── */
.skill-bar-wrap { margin-top: 8px; }
.skill-bar-track { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.skill-bar-fill  { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) .2s; }

/* ── FOCUS RING ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── UTILITIES ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gap-grid-sm { gap: clamp(10px, 1.4vw, 16px); }
.gap-grid-md { gap: clamp(14px, 1.8vw, 22px); }
.gap-grid-lg { gap: clamp(22px, 3vw, 38px); }

/* ── RESPONSIVE HELPERS ── */
@media (max-width: 900px) { .hide-mobile { display: none !important; } }
@media (min-width: 901px) { .show-mobile { display: none !important; } }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════
   ADMIN DATABASE SPECIFIC STYLES  (used in DB file)
══════════════════════════════════════════════════ */

/* DB Layout */
.db-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.db-sidebar { background: var(--bg-2); border-right: 1px solid var(--line); padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.db-main   { padding: clamp(24px, 3vw, 40px); overflow-x: hidden; }

/* DB Sidebar */
.db-logo { padding: 22px 20px 18px; border-bottom: 1px solid var(--line-soft); }
.db-logo .name { font-family: var(--futura); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; }
.db-logo .tag  { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; margin-top: 2px; }
.db-nav { padding: 12px 10px; flex: 1; }
.db-section-head { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.db-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; font-family: var(--futura); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background .16s, color .16s; }
.db-link:hover, .db-link.active { background: var(--bg-3); color: var(--ink); }
.db-link.active { color: var(--accent-2); }
.db-link .ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.db-link .cnt { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: auto; }
.db-footer { padding: 16px 20px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* DB Header */
.db-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.db-page-title { font-family: var(--futura); font-weight: 800; font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -.01em; margin: 0; }
.db-page-sub   { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; margin-top: 4px; }

/* DB Search + Filter bar */
.db-bar { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.db-search { flex: 1; min-width: 200px; position: relative; }
.db-search input { padding-left: 38px; }
.db-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.db-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.db-filter-btn { font-family: var(--futura); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--bg-3); color: var(--ink-soft); cursor: pointer; transition: .18s; }
.db-filter-btn:hover, .db-filter-btn.on { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }

/* DB Table */
.db-table-wrap { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.db-table th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); background: var(--bg-3); font-weight: 500; white-space: nowrap; }
.db-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 14px; line-height: 1.5; }
.db-table tr:last-child td { border-bottom: 0; }
.db-table tr:hover td { background: rgba(110,99,255,.04); }
.db-table td.q  { max-width: 280px; color: var(--ink); font-weight: 500; }
.db-table td.a  { max-width: 340px; color: var(--ink-soft); font-size: 13.5px; }
.db-table td.sm { white-space: nowrap; }

/* DB Panels */
.db-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 2.5vw, 28px); margin-bottom: 22px; }
.db-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.db-panel-title { font-family: var(--futura); font-weight: 700; font-size: 16px; letter-spacing: .02em; margin: 0; }

/* DB Stats row */
.db-stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; }
.db-stat-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; transition: border-color .2s; }
.db-stat-card:hover { border-color: var(--accent); }
.db-stat-card .num { font-family: var(--futura); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -.02em; background: linear-gradient(120deg, var(--accent-2), #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.db-stat-card .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* DB Image Gallery */
.db-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.db-img-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color .22s, transform .22s; cursor: pointer; }
.db-img-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.db-img-thumb { aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.db-img-thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.db-img-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.db-img-meta { padding: 10px 12px; }
.db-img-meta .name { font-family: var(--futura); font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-img-meta .dest { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .06em; margin-top: 3px; }

/* DB Upload area */
.db-upload-zone { border: 2px dashed var(--line); border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: border-color .22s, background .22s; }
.db-upload-zone:hover, .db-upload-zone.drag { border-color: var(--accent); background: var(--accent-soft); }
.db-upload-zone .ico { font-size: 36px; margin-bottom: 12px; }
.db-upload-zone .title { font-family: var(--futura); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.db-upload-zone .sub  { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }

/* DB Q&A record rows */
.qa-row { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.qa-row:last-child { border-bottom: 0; }
.qa-row .qtext { font-family: var(--futura); font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.qa-row .atext { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; }
.qa-row .qa-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.qa-row .var-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.qa-row .var-list .v { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding-left: 14px; position: relative; }
.qa-row .var-list .v::before { content: "↳"; position: absolute; left: 0; color: var(--accent); }

/* DB Responsive */
@media (max-width: 800px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 100; transition: left .28s; width: 240px; height: 100vh; }
  .db-sidebar.open { left: 0; box-shadow: 4px 0 40px -8px #000; }
  .db-main { padding: 16px; }
}

/* ── SKILL TOOL SECTION ── */
.tool-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tool-skill-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; transition: border-color .22s; }
.tool-skill-card:hover { border-color: var(--accent); }
.tool-skill-card .t-name { font-family: var(--futura); font-weight: 700; font-size: 15px; letter-spacing: .02em; margin-bottom: 6px; }
.tool-skill-card .t-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 12px; }
.tool-skill-card .t-level { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tool-skill-card .t-level .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tool-skill-card .t-level .val   { font-family: var(--futura); font-weight: 800; font-size: 16px; color: var(--accent-2); }

/* Company card */
.company-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; transition: border-color .22s, transform .22s; }
.company-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.company-card .c-name { font-family: var(--futura); font-weight: 800; font-size: 18px; letter-spacing: .01em; margin-bottom: 4px; }
.company-card .c-role { font-family: var(--mono); font-size: 11px; color: var(--accent-2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.company-card .c-year { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .06em; }
.company-card .c-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 10px; }
.company-logo-area { aspect-ratio: 3/1; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.company-logo-area:hover { border-color: var(--accent); }
.company-logo-area img { max-width: 80%; max-height: 80%; object-fit: contain; }
.company-logo-area .ph-label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.35); text-transform: uppercase; }


/* ── PHASE 4 FRONT-END POLISH: fluid cursor, refined placeholders, no duplicate Q input ── */
#syz-question-search,.syz-question-search{display:none!important}.syz-picker{gap:10px}.syz-picker select{margin-top:0}.syz-input input::placeholder{color:rgba(237,234,227,.36)}
.lb-img span{font-family:var(--mono);font-size:clamp(10px,1.2vw,13px)!important;letter-spacing:.08em!important;text-transform:uppercase;color:rgba(255,255,255,.48)!important;max-width:240px;text-align:center;line-height:1.5}.lb-card{max-width:min(92vw,1100px)}.lb-img{min-height:min(70vh,680px)}
/* The WebGL build draws its own mix-blend-mode "negative" dot (#cursor-neg) as the
   pointer — the dark dot seen in the reference — so hide the native OS cursor. */
.has-fluid-cursor,.has-fluid-cursor *{cursor:none!important}
@media (pointer:coarse),(max-width:900px){.has-fluid-cursor,.has-fluid-cursor *{cursor:auto!important}.has-fluid-cursor a,.has-fluid-cursor button{cursor:pointer!important}}
.tile,.wcard,.hcard,.tcard,.hero-img,.logoBox{position:relative;overflow:hidden}.tile::after,.wcard::after,.hcard::after,.tcard::after,.hero-img::after,.logoBox::after{content:"";position:absolute;inset:-1px;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(154,140,255,.22),rgba(31,182,201,.10) 34%,transparent 68%);opacity:0;transition:opacity .22s ease;mix-blend-mode:screen;z-index:4}.tile:hover::after,.wcard:hover::after,.hcard:hover::after,.tcard:hover::after,.hero-img:hover::after,.logoBox:hover::after{opacity:1}
@media (pointer:coarse),(max-width:900px){.fluid-cursor,.fluid-trail{display:none!important}.has-fluid-cursor body,.has-fluid-cursor a,.has-fluid-cursor button{cursor:auto!important}}

/* ════════════════════════════════════════════════════════════
   PHASE 5 — Canvas fluid cursor, clean dropdown, back button,
   parallax section, contact form
════════════════════════════════════════════════════════════ */

/* ── Cursor: glowing fluid orb (soft luminous blob that trails) ── */
.cur-glow{position:fixed;left:0;top:0;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,rgba(154,140,255,.55) 0%,rgba(110,99,255,.35) 35%,rgba(31,182,201,.18) 60%,rgba(110,99,255,0) 78%);
  filter:blur(8px);mix-blend-mode:screen;pointer-events:none;z-index:99991;opacity:0;
  transition:opacity .3s ease,width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1);
  will-change:transform}
.cur-glow.on{opacity:1}
.cur-core{position:fixed;left:0;top:0;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#cabfff 45%,rgba(154,140,255,0) 75%);
  box-shadow:0 0 10px rgba(154,140,255,.95),0 0 22px rgba(110,99,255,.6);
  mix-blend-mode:screen;pointer-events:none;z-index:99992;opacity:0;
  transition:opacity .3s ease,width .25s ease,height .25s ease;
  will-change:transform}
.cur-core.on{opacity:1}
/* hover: the glow swells gently, core brightens */
.cur-glow.is-hover{width:78px;height:78px}
.cur-core.is-hover{width:12px;height:12px}
/* click: glow flares brighter/bigger for a moment */
.cur-glow.click{width:96px;height:96px;filter:blur(10px)}
/* hide the system cursor everywhere so only the glow shows */
.has-fluid-cursor,.has-fluid-cursor *{cursor:none!important}
/* hide any older cursor systems */
.cursor-ring,.cursor-dot,.fluid-trail,.fluid-cursor,.fluid-cursor-canvas,.fluid-core,.cur-ring,.cur-dot{display:none!important}
@media (pointer:coarse),(max-width:900px){
  .cur-glow,.cur-core{display:none!important}
  .has-fluid-cursor,.has-fluid-cursor *{cursor:auto!important}
  .has-fluid-cursor a,.has-fluid-cursor button,.has-fluid-cursor select,.has-fluid-cursor [role="button"]{cursor:pointer!important}
  .has-fluid-cursor input,.has-fluid-cursor textarea{cursor:text!important}
}

/* ── Clean Samyaza question dropdown (native select restyle) ── */
.syz-picker select option{background:#171722;color:var(--ink);padding:8px}
/* hide the count entirely for a clean look */
#syz-qa-count{display:none!important}
.syz-picker-top{justify-content:flex-start}
.syz-picker-top span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ── Back button: remove awkward chip bg, glow on hover ── */
.backlink{background:none!important;border:0!important;padding:0!important;border-radius:0!important;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink-soft);
  cursor:pointer;display:inline-flex;gap:.55ch;align-items:center;margin-bottom:8px;
  transition:color .2s ease,text-shadow .2s ease,transform .2s ease}
.backlink:hover{color:var(--accent-2);text-shadow:0 0 14px rgba(154,140,255,.65);transform:translateX(-2px)}
.backlink:hover .bk-arrow{transform:translateX(-3px)}
.bk-arrow{display:inline-block;transition:transform .2s ease}

/* ── PARALLAX creative section (between tools & about) ── */
.parallax-band{position:relative;min-height:clamp(360px,46vw,560px);display:grid;place-items:center;
  overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);isolation:isolate}
.parallax-band .px-layer{position:absolute;inset:-12% 0;background-size:cover;background-position:center;
  will-change:transform;z-index:-2}
.parallax-band .px-fallback{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 120% at 18% 12%,rgba(110,99,255,.5),transparent 52%),
             radial-gradient(120% 120% at 82% 78%,rgba(31,182,201,.42),transparent 55%),
             linear-gradient(135deg,#15121f,#0c0c14 60%,#0a1417)}
.parallax-band .px-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,6,6,.62),rgba(6,6,6,.46) 50%,rgba(6,6,6,.72))}
.parallax-band .px-grain{position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px}
.parallax-inner{position:relative;z-index:2;text-align:center;max-width:760px;padding:clamp(48px,8vw,90px) var(--pad)}
.parallax-inner .px-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-2);display:inline-flex;gap:.7em;align-items:center;justify-content:center;margin-bottom:18px}
.parallax-inner .px-eyebrow::before,.parallax-inner .px-eyebrow::after{content:"";width:24px;height:1px;background:var(--accent)}
.parallax-inner h2{font-family:var(--futura);font-weight:800;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(28px,4.6vw,52px);margin:0}
.parallax-inner h2 em{font-style:normal;background:linear-gradient(120deg,var(--accent) 10%,var(--accent-2) 55%,#c77dff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.parallax-inner p{color:var(--ink-soft);font-size:clamp(15px,1.5vw,18.5px);line-height:1.65;margin:20px auto 0;max-width:56ch}
.parallax-inner .px-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);justify-content:center;margin-top:34px}
.parallax-inner .px-stat .n{font-family:var(--futura);font-weight:800;font-size:clamp(26px,3.6vw,40px);
  background:linear-gradient(120deg,var(--accent-2),#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.parallax-inner .px-stat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}

/* ── Contact form ── */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:start;margin-top:8px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.cform{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px);box-shadow:0 30px 70px -50px #000}
.cform .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.cform .cf-row{grid-template-columns:1fr}}
.cform .cf-field{margin-bottom:14px}
.cform label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.cform input,.cform textarea,.cform select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  background:var(--bg-3);color:var(--ink);font-family:var(--futura);font-size:14px;outline:none;transition:border-color .2s,background .2s}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--accent);background:#171722}
.cform textarea{min-height:120px;resize:vertical;line-height:1.6}
.cform .cf-submit{width:100%;justify-content:center;margin-top:4px;border:0;cursor:pointer}
.cform .cf-note{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:12px;text-align:center;letter-spacing:.03em}
.cform-status{font-family:var(--mono);font-size:12px;padding:10px 14px;border-radius:8px;margin-top:12px;display:none}
.cform-status.show{display:block}
.cform-status.ok{background:rgba(55,211,153,.12);border:1px solid rgba(55,211,153,.3);color:#37d399}
.cform-status.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#f87171}
.contact-side .cs-block{margin-bottom:26px}
.contact-side .cs-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-side .cs-mail{font-family:var(--futura);font-weight:800;font-size:clamp(18px,2.4vw,24px);color:var(--ink);word-break:break-all;transition:.25s;display:inline-block}
.contact-side .cs-mail:hover{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.contact-side .cs-links{display:flex;flex-wrap:wrap;gap:10px}

/* FINAL WORK PAGE NAVIGATION FIXES */
.work-backbar{padding-top:clamp(42px,6vw,76px);margin-bottom:18px;display:flex;align-items:center;justify-content:flex-start}
.work-backbar + .page-head{padding-top:0}
.page-head .eyebrow{display:inline-flex;margin-top:0}
.backlink{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
.backlink:hover{color:var(--accent-2)!important;text-shadow:0 0 14px rgba(154,140,255,.72),0 0 30px rgba(110,99,255,.25);transform:translateX(-2px)}
.category-scroll{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px;margin-top:10px;max-width:min(100%,920px)}
.category-scroll .catindex{margin-top:0;padding:16px 0 8px;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.cat-scroll-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:rgba(20,20,28,.62);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;font-family:var(--mono);font-size:16px;line-height:1;transition:border-color .2s,color .2s,background .2s,box-shadow .2s,transform .2s}
.cat-scroll-btn:hover{border-color:var(--accent);color:var(--accent-2);background:rgba(110,99,255,.12);box-shadow:0 0 20px rgba(110,99,255,.22);transform:translateY(-1px)}
.cat-scroll-btn:active{transform:translateY(0) scale(.96)}
@media(max-width:760px){.work-backbar{padding-top:34px}.category-scroll{grid-template-columns:30px minmax(0,1fr) 30px;gap:6px}.cat-scroll-btn{width:30px;height:30px}.category-scroll .catindex{padding-top:12px}}

/* Last fix: MP4 front-end gallery support */
.tile video,.hero-img video,.portrait-img video{width:100%;height:100%;object-fit:cover;display:block;background:#050508}
.tile.is-video .ph:after{content:'▶';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;color:#fff;z-index:3;pointer-events:none}
.video-badge{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 7px;text-transform:uppercase;z-index:4}
.lb-img video{max-width:96vw;max-height:92vh;object-fit:contain;background:#000}

/* ══════════════════════════════════════════════════════════════
   Chrome spacing — the navbar and footer sat flush against the
   adjacent sections with no breathing room on any page.
   ══════════════════════════════════════════════════════════════ */

/* navbar: real vertical padding, and horizontal gutters that hold up on
   narrow screens instead of a fixed 56px */
header.nav .nav-in{padding-top:14px;padding-bottom:14px;
  padding-left:clamp(18px,4vw,56px);padding-right:clamp(18px,4vw,56px)}

/* clear the sticky navbar before a sub-page starts. The home hero is
   deliberately left flush — it is a full-bleed section. */
main > .page.fadepage{padding-top:clamp(28px,4vw,56px)}

/* last section must not butt into the footer */
main > .page{padding-bottom:clamp(40px,5vw,72px)}
footer.mv-foot{margin-top:clamp(32px,5vw,72px);
  border-top:1px solid var(--line-soft,rgba(255,255,255,.08));
  padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(32px,4vw,48px)}
footer.mv-foot .wrap{padding-left:clamp(18px,4vw,56px);padding-right:clamp(18px,4vw,56px)}