/* ==========================================================
   Dynamic Vishva — Portfolio Platform · Premium UI
   Dark-first · Aurora glass · Device-framed previews
   ========================================================== */

:root {
  --font-display:"Inter", sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  --teal: #f7ab40;
  --blue: #f7ab40;
  --violet: #8B5CF6;
  --amber: #F5A524;
  --danger: #F0565B;

  /* --grad: linear-gradient(120deg, var(--teal), var(--blue) 55%, var(--violet)); */
  --grad:linear-gradient(90deg, #F06C2C 0%, #F8C025 100%);
  --grad-soft: linear-gradient(120deg, rgba(16,200,188,.14), rgba(61,123,255,.14));

  --radius: 18px;
  --transition: 240ms cubic-bezier(.4, 0, .2, 1);
}

html[data-theme='light'],
html {
  --bg: #fff;
  --bg-soft: #EAF0F7;
  --surface: #FFFFFF;
  --surface-solid: #FFFFFF;
  --surface-2: #EEF3F9;
  --ink: #0C1526;
  --ink-soft: #7d7d7d;
  --ink-faint: #7E8DA5;
    --line: rgba(255, 255, 255, 0.16);
  --line-strong: #F8B95A;
  --header-bg: rgb(255, 255, 255);
  --glow: 0 0 44px rgba(61, 123, 255, 0.10);
    --shadow: 0 10px 12px -8px rgba(0, 0, 0, 0.28);
  --accent: #F8B95A;
  --accent-soft: rgba(10, 167, 156, 0.11);
   --grid-lines:#F3F3F3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ---------- Theme transition veil ---------- */
.theme-veil {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path, opacity;
}

body {
  font-family: var(--font-body);
  background: var(--bg);          /* ← add this */
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }



/* ---------- Aurora background ---------- */



.aurora {
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  transition: background var(--transition);
  pointer-events: none;
}

/* ---------- Column guide lines ---------- */
.aurora-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;

  background-image: linear-gradient(90deg, rgba(180, 180, 180, 0.25) 1px, transparent 1px);
  background-size: calc(100% / 5) 185%;
  background-position: 0 0;

  /* fade out top and bottom edges */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 100%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 100%, transparent 100%);
}

.aurora-grid.hide {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 720px) {
  .aurora-grid { display: none; }
}
/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  /* background: var(--header-bg); */
  background: #f7f7f7;
  border-bottom: 1px solid var(--grid-lines);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  background: var(--grad);
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px;
  box-shadow: 0 4px 18px rgba(16, 200, 188, .35);
}
.brand-text { line-height: 1.15; min-width: 0; }
.brand-text strong {
  font-family: var(--font-display); font-size: 15.5px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text span { font-size: 10.5px; color: var(--ink-faint); letter-spacing: .1em; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); display: grid; place-items: center;
  transition: var(--transition); backdrop-filter: blur(8px);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.92); }
.icon-btn svg { width: 20px; height: 20px; }


/* ---------- Pill buttons (interactive, responsive, touch-friendly) ---------- */
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 20px; border-radius: 13px; border: none;
  background: var(--grad); background-size: 160% 160%;
  color: #fff; font-weight: 600; font-size: 14px; text-decoration: none;
  min-height: 46px; line-height: 1;
  position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), background-position .5s, opacity var(--transition);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.pill-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(240, 108, 44, .35);
  background-position: 100% 50%;
}
.pill-btn:active { transform: translateY(0) scale(.96); }
.pill-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pill-btn[disabled], .pill-btn.is-loading {
  opacity: .6; pointer-events: none; transform: none !important; box-shadow: none !important;
}

.pill-btn.ghost {
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-strong); backdrop-filter: blur(8px);
}
.pill-btn.ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }

/* Icon-bearing pills (arrows, WA icon, chevrons, etc.) */
.pill-btn svg, .pill-btn .wa-icon {
  flex: 0 0 auto; width: 20px; height: 24px; color:#21C063
}
.pill-btn .chev {
  transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1);
}
.pill-btn:hover .chev { transform: translateY(2px); }

/* Small pills used inline on cards (Live ↗ etc.) — smaller footprint */
.pill-btn.pill-sm { padding: 8px 14px; min-height: 36px; font-size: 12.5px; gap: 6px; }

/* WhatsApp icon micro-interaction */
.pill-btn .wa-icon {
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.pill-btn:hover .wa-icon  { transform: rotate(-10deg) scale(1.15); }
.pill-btn:active .wa-icon { transform: scale(.88); }

/* Attention pulse — apply .pulse only to your primary WA CTAs, sparingly */
@keyframes waPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 11px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.pill-btn.pulse { animation: waPulseRing 2.4s ease-out infinite; }
.pill-btn.pulse:hover { animation-play-state: paused; }

/* Click ripple — works on any .pill-btn */
.pill-btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transform: scale(0); pointer-events: none;
  animation: rippleGrow 600ms ease-out;
}
@keyframes rippleGrow { to { transform: scale(2.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pill-btn.pulse { animation: none; }
  .pill-btn .wa-icon, .pill-btn .chev { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  /* max-width: 1600px;  */
  margin: 0 auto; padding: clamp(28px, 8vw, 20px) 20px 23px;
  overflow: hidden;
  text-align: center; position: relative;
   border-bottom: 1px solid rgba(180, 180, 180, 0.25);  /* horizontal line */
}


.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
  backdrop-filter: blur(8px);
}

.hero h1 {
  font-family: var(--font-display); font-size: clamp(34px, 6vw, 60px);
  line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 18px;
}
.hero h1 em {
  font-style: normal;
  background: var(--grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: var(--font-display);
  animation: gradShift 6s ease infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero p { color: var(--ink-soft); max-width: 580px; margin: 28px auto 18px; font-size: 15px; font-weight: 400; }

.hero-ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.hero-ctas .pill-btn { flex: 0 1 auto; }

/* ---------- Stats ---------- */
.stats-row {
  max-width: 900px; margin: 44px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.stat-pill {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 10px; backdrop-filter: blur(10px);
  transition: var(--transition);
}
.stat-pill:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--glow); }
.stat-pill .num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 32px);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-pill .lbl { font-size: 12px; color: var(--ink-faint); font-weight: 600; letter-spacing: .04em; margin-top: 2px; }

/* ---------- Marquee (client logos) ---------- */
.trust-label {
text-align: center; font-size: 12.5px !important; font-weight: 400 !important; letter-spacing: .08em;
  text-transform: capitalize; color: var(--ink-faint); margin: 26px 0 2px;
}
.marquee {
  margin: auto;
  max-width: 800px;
  overflow: hidden; white-space: nowrap; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin-bottom: 80px;
  margin-top: 80px;
}
.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
/* .marquee-track:hover { animation-play-state: paused; } */
.marquee-group { display: inline-flex; align-items: center; flex-shrink: 0; }
.mq-logo {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 5px; padding: 10px 22px; height: 120px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mq-logo:hover { transform: translateY(-3px);  }
.mq-logo img {
  height: 72px; max-width: 118px; width: auto; object-fit: contain;
  /* filter: grayscale(1) opacity(.6); */
  transition: filter var(--transition);
}
.mq-logo:hover img { filter: grayscale(0) opacity(1); }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 560px) {
  .mq-logo { padding: 8px 16px; height: 44px; margin: 0 8px; }
  .mq-logo img { height: 22px; max-width: 88px; }
}

/* ---------- Tabs ---------- */
.tabs-wrap { position: sticky; top: 66px; z-index: 40; padding: 14px 0 10px; 
border-bottom: 1px solid rgb(177 177 177 / 18%);}
.tabs-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header-bg); backdrop-filter: blur(14px);
  
}
.tabs-row {
  max-width: 1050px; margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 0 20px;
}

/* ---------- Classic underline tabs ---------- */
.tabs-scroll {
  position: relative;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs-scroll::-webkit-scrollbar { display: none; }

.tabs {
  display: inline-flex; gap: 2px; position: relative;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.tab {
  position: relative; z-index: 1; border: none; background: transparent;
  padding: 13px 16px 15px; border-radius: 10px 10px 0 0;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 400; font-size: 14px; letter-spacing: .01em;
 min-height: 44px;
  transition: color var(--transition), background var(--transition);
}




.tab:hover { color: var(--ink); background: var(--surface); }
.tab.active { color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tab-count {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 7px; min-width: 20px; text-align: center; line-height: 1.5;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.tab-count:empty { display: none; }
.tab.active .tab-count { color: #fff; background: var(--grad); border-color: transparent; }

.tab-indicator {
  position: absolute; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--grad);
  transition: left 280ms cubic-bezier(.5, 0, .2, 1.15), width 280ms cubic-bezier(.5, 0, .2, 1.15);
  z-index: 2;
}

/* Edge fades hint that the strip scrolls on mobile */
.tabs-fade {
  position: absolute; top: 0; bottom: 1px; width: 28px;
  pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 3;
}
.tabs-fade-l { left: 0; background: linear-gradient(90deg, var(--header-bg), transparent); }
.tabs-fade-r { right: 0; background: linear-gradient(270deg, var(--header-bg), transparent); }
.tabs-row.can-scroll-l .tabs-fade-l,
.tabs-row.can-scroll-r .tabs-fade-r { opacity: 1; }

/* ---------- Filters ---------- */
.filters {
  display: flex; gap: 8px; align-items: center;
  margin-left: auto; flex-wrap: wrap;
}

.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  outline: none; border-radius: 12px; padding: 10px 34px 10px 14px; min-height: 44px;
  backdrop-filter: blur(8px);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font-display) !important;
  font-size: 14px;
}
.select-wrap select option { background: var(--surface-solid); font-family: var(--font-display) !important; }
.select-wrap select:hover { border-color: var(--accent); }
.select-wrap select:focus-visible { border-color: var(--accent); outline: none !important; }
.select-chevron {
  position: absolute; right: 11px; width: 15px; height: 15px; color: var(--ink-soft);
  pointer-events: none; transition: transform var(--transition), color var(--transition);
}
.select-wrap:hover .select-chevron { color: var(--accent); }
.select-wrap:focus-within .select-chevron { transform: rotate(180deg); color: var(--accent); }

.search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--ink-soft); pointer-events: none; z-index: 99999; }
.search-wrap input[type="search"] {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  outline: none !important; border-radius: 12px; min-height: 44px; backdrop-filter: blur(8px);
  padding: 10px 32px 10px 36px; width: 170px;
  transition: width var(--transition), border-color var(--transition), box-shadow var(--transition);
  font-size: 14px;
}
.search-wrap input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-wrap input[type="search"]:hover { border-color: var(--accent); }
.search-wrap input[type="search"]:focus { width: 240px; border-color: var(--accent); outline: none !important;  }

.search-clear {
  position: absolute; right: 7px; width: 21px; height: 21px; display: none;
  align-items: center; justify-content: center; border: none; border-radius: 999px;
  background: var(--line); color: var(--ink-soft); font-size: 14px; line-height: 1; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.search-wrap.has-value .search-clear { display: flex; }
.search-clear:hover { background: var(--accent); color: #fff; }



/* ---------- Project grid (masonry via CSS columns) ---------- */
.grid-section { max-width: 1200px; margin: 0 auto; padding: 26px 20px 60px; }
.count-line { color: var(--ink-faint); font-size: 13.5px; margin-bottom: 10px; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 0px;
  column-gap: 20px;
  align-items: start;
}

/* Staggered "brick" offsets for the 4-column desktop layout — each
   breakpoint below defines its own wave so the zig-zag always matches
   the current column count instead of drifting out of sync. */
.project-grid .card:nth-child(4n+2) { margin-top: 42px; }
.project-grid .card:nth-child(4n+3) { margin-top: 18px; }
.project-grid .card:nth-child(4n)   { margin-top: 58px; }

.card {
  width: 100%;
  margin-bottom: 0;
  cursor: pointer;

  /* card visuals */
  position: relative;
  /* background: var(--surface); */
  border: 1px solid rgba(180, 180, 180, 0.25);
  border-radius: 10px;
  /* transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); */
  opacity: 0;
  transform: translateY(22px);
  animation: cardIn 520ms cubic-bezier(.3, .7, .3, 1) forwards;
}

.card-body {
  display: flex;
  flex-direction: column;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  gap: 8px;
  position: relative;
}

.card::before {
  content: "";
  position: absolute; inset: 0; border-radius: 10px;
  opacity: 0; transition: opacity var(--transition); pointer-events: none;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow) }
.card:hover::before { opacity: 1; }
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }

.cat-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.card-body h3 { font-family: var(--font-display); font-size: 13px; letter-spacing: -.01em; }
.card-body p {
  color: var(--ink-soft); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tech-line { font-size: 12px; color: var(--ink-faint); letter-spacing: .02em; }

.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-faint); }
.empty-state svg { width: 56px; height: 56px; margin: 0 auto 14px; opacity: .5; }

@media (max-width: 1200px) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
  .project-grid .card:nth-child(4n+2),
  .project-grid .card:nth-child(4n+3),
  .project-grid .card:nth-child(4n) { margin-top: 0; }
  .project-grid .card:nth-child(3n+2) { margin-top: 46px; }
  .project-grid .card:nth-child(3n)   { margin-top: 22px; }
}
@media (max-width: 900px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px;  }
  /* re-target the zig-zag for a 2-column row: only col2 drops down */
  .project-grid .card:nth-child(3n+2),
  .project-grid .card:nth-child(3n) { margin-top: 0; }
  .project-grid .card:nth-child(2n)  { margin-top: 36px; }
}
@media (max-width: 720px) {
  /* single column below 720px (matches the existing responsive
     breakpoint further down) — no offsets make sense here */
  .project-grid .card { margin-top: 0 !important ; }

}

@media (max-width: 720px) {
  .aurora-grid{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; animation: none; }
}

/* Device frames */
/* .device {} */
/* .browser-frame {
  border: 1px solid var(--line-strong); border-radius: 12px 12px 0 0; overflow: hidden;
  background: var(--surface-solid);
} */
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.browser-bar b { width: 9px; height: 9px; border-radius: 50%; opacity: .9; }
.browser-bar b:nth-child(1) { background: #FF5F57; }
.browser-bar b:nth-child(2) { background: #FEBC2E; }
.browser-bar b:nth-child(3) { background: #28C840; }
.browser-url {
  flex: 1; margin-left: 6px; font-size: 10.5px; color: var(--ink-faint);
  background: var(--surface); border-radius: 6px; padding: 3px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.shot {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--bg-soft);
  border-radius: 10px 10px 0 0;
}
.shot img {
  position: relative; z-index: 1;   /* keep the image above the art overlay (fixes hidden-preview bug) */
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; transition: opacity .5s ease, transform .6s ease;
}
.shot img.ld { opacity: 1; }
.card:hover .shot img { transform: scale(1.06); }

.phone-wrap {
  display: flex; justify-content: center; background: var(--grad-soft); border-radius: 12px 12px 0 0; padding: 18px 0 0; border: 1px solid var(--line); border-bottom: 0;
  overflow: hidden;
}
.phone-frame {
  width: 46%; min-width: 130px; border: 3px solid var(--line-strong);
  border-bottom: 0; border-radius: 22px 22px 0 0; overflow: hidden;
  background: var(--surface-solid); position: relative;
}
.phone-notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 9px; background: var(--line-strong); border-radius: 999px; z-index: 2;
}
.phone-shot { aspect-ratio: 9 / 12; position: relative; overflow: hidden; background: var(--bg-soft); }
.phone-shot img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; transition: opacity .5s ease, transform .6s ease;
}
.phone-shot img.ld { opacity: 1; }
.card:hover .phone-shot img { transform: scale(1.06); }

/* Fallback art when no image/live preview */
.art {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(circle at 20% 25%, rgba(16,200,188,.28), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(139,92,246,.25), transparent 55%),
    var(--surface-solid);
}
.art { z-index: 0;}
.art svg { width: 46px; height: 46px; color: var(--accent); opacity: .95; }
.art::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 16px 16px; opacity: .5;
}

.badge-row { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(8px);
  background: rgba(5, 8, 15, .68); color: #fff; border: 1px solid rgba(255,255,255,.15);
}
.badge.amber { background: var(--amber); color: #241700; border: 0; text-decoration: none; cursor: pointer; }
.badge.violet { background: var(--violet); border: 0; }

.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1;  }
.cat-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.card-body p {
  color: var(--ink-soft); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tech-line { font-size: 12px; color: var(--ink-faint); letter-spacing: .02em; }

.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-faint); }
.empty-state svg { width: 56px; height: 56px; margin: 0 auto 14px; opacity: .5; }
/* ================================================================
   Dynamic Vishva — CTA + Footer section (interactive additions)
   Appends to the existing stylesheet — reuses the site's tokens:
   --grad, --surface-solid, --line-strong, --accent, --ink-soft, etc.
   Pairs with cta-footer.html + cta-footer.js
   ================================================================ */
/* ================================================================
   Dynamic Vishva — CTA + Footer section (interactive additions)
   Appends to the existing stylesheet — reuses the site's tokens:
   --grad, --surface-solid, --line-strong, --accent, --ink-soft, etc.
   Pairs with cta-footer.html + cta-footer.js
   ================================================================ */
/* ================================================================
   Dynamic Vishva — CTA + Footer section (interactive additions)
   Appends to the existing stylesheet — reuses the site's tokens:
   --grad, --surface-solid, --line-strong, --accent, --ink-soft, etc.
   Pairs with cta-footer.html + cta-footer.js
   ================================================================ */

/* ---------- CTA section ---------- */
.cta-section {
  max-width: 1200px;
  margin: 20px auto 70px;
  padding: 0 20px;
  position: relative;
  /* prevent a parent flex/grid row from stretching this section's
     height to match a taller sibling — the card should only ever
     be as tall as its own content */
  align-self: start;
  height: auto;
}

.cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 26px;
  padding: 48px 24px;
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  isolation: isolate;

  /* flex-center the content so if the card is ever taller than its
     content (e.g. from an inherited min-height), everything stays
     vertically centered instead of collapsing to the bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: auto;
}

/* Two ambient orbs, animated by GSAP instead of sitting static.
   Positioned via ID + !important on top of the class rule — if
   anything else in the stylesheet ever wins the cascade on
   .cta-orb, these still take the orbs out of flow so they can
   never stack as block elements and inflate the card's height. */
.cta-orb {
  position: absolute;
  width: 32vw; max-width: 360px; aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .3;
  pointer-events: none;
  z-index: -1;
}
#orb1, #orb2 {
  position: absolute !important;
  margin: 0 !important;
}
.cta-orb.o1 { top: -18%; left: -12%; background: radial-gradient(circle, #F06C2C, transparent 70%); }
.cta-orb.o2 { bottom: -22%; right: -10%; background: radial-gradient(circle, #F8C025, transparent 70%); }

/* Fine conic border glow that sweeps around the card on hover */
.cta-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, var(--accent) 72%, #F06C2C 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 420ms ease;
  z-index: 0;
}
.cta-card:hover::before { opacity: .9; }

.cta-card > * { position: relative; z-index: 1; }

.cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.cta-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: ctaDot 2s ease-out infinite;
}
@keyframes ctaDot {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.cta-card h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 42px);
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
/* word-by-word reveal target, built by cta-footer.js */
.cta-card h2 .word {
  display: inline-block;
  overflow: hidden;
  color: var(--ink);
}

.cta-card h2 .word span {
  display: inline-block;
  will-change: transform;
  color: var(--ink);
}

.cta-card p {
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 30px;
}

/* Magnetic wrapper — JS nudges the button toward the cursor */
.magnetic {
  display: inline-block;
  will-change: transform;
}

.magnetic .pill-btn {
  will-change: transform;
  color: #fff;
  background: var(--teal);
  border: 1px solid var(--teal);
}

.magnetic .pill-btn .label {
  display: inline-block;
  will-change: transform;
  color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 46px 20px 40px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  position: relative;
  overflow: hidden;
}

/* thin animated gradient hairline drawn across the top on scroll-in */
.footer-rule {
  position: absolute; top: 0; left: 50%; height: 1px; width: 0;
  background: var(--grad);
  transform: translateX(-50%);
}

.footer-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: center; }

.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 13px; }
.footer-links a {
  position: relative; text-decoration: none; color: var(--ink-soft);
  padding: 2px 0; transition: color var(--transition);
}
.footer-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent); transition: right 280ms cubic-bezier(.4,0,.2,1);
}
.footer-links a:hover { color: var(--ink); }
.footer-links a:hover::after { right: 0; }
.footer-links .sep { color: var(--line-strong); opacity: .6; }

.footer-addr { max-width: 520px; margin: 4px auto 0; font-size: 12px; color: var(--ink-faint); }

.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.footer-brand strong { color: var(--ink); font-family: var(--font-display); font-weight: 600; }

/* back-to-top, appears once you scroll, driven from JS */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-solid); border: 1px solid var(--line-strong);
  color: var(--accent); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(14px) scale(.85);
  pointer-events: none;
}
.to-top svg { width: 18px; height: 18px; }
.to-top:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .cta-orb, .cta-eyebrow::before { animation: none !important; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3, 6, 12, .7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface-solid); border: 1px solid var(--line-strong);
  border-radius: 22px; width: min(980px, 100%); max-height: 92vh;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(24px) scale(.97); transition: transform var(--transition);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 0; }
.modal-head h2 { font-family: var(--font-display); font-size: 23px; letter-spacing: -.01em; }
.modal-head .icon-btn { margin-left: auto; flex: 0 0 auto; }
.modal-body { padding: 14px 22px 26px; }
.modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; }
.chip {
  font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.chip.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.figma-frame {
  width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--line-strong);
  border-radius: 14px; background: var(--surface-2); margin-top: 14px;
}
.modal-shot { border-radius: 14px; margin-top: 14px; border: 1px solid var(--line-strong); width: 100%; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- Lead gate ---------- */
.gate .modal { width: min(450px, 100%); }
.gate-head { text-align: center; padding: 30px 26px 0; }
.gate-logo {
  width: 60px; height: 60px; border-radius: 17px; margin: 0 auto 15px;
  background: var(--grad);
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  box-shadow: 0 8px 26px rgba(61, 123, 255, .4);
}
.gate-head h2 { font-family: var(--font-display); font-size: 22px; }
.gate-head p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.gate-form { padding: 22px 26px 30px; display: grid;  }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field select {
  width: 100%; border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: 13px; padding: 13px 15px; min-height: 50px;
  outline: none !important;
}
.field input:focus, .field select:focus {
  border-color: var(--line-strong); outline: none;
  
}
.field select option { background: var(--surface-solid); color: var(--ink); }
.hint { font-size: 12.5px; margin-top: 6px; }
.hint.ok { color: var(--accent); }
.hint.err { color: var(--danger); }
.gate-form .pill-btn { padding: 15px; font-size: 15px; margin-top: 4px; }
.gate-note { text-align: center; font-size: 12px; color: var(--ink-faint); margin-top: 10px; }
.welcome-back {
  display: none; align-items: center; gap: 10px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 12px; padding: 11px 14px; font-size: 13.5px; font-weight: 600;
}
.welcome-back.show { display: flex; animation: cardIn 300ms ease forwards; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg); padding: 13px 22px; border-radius: 13px;
  font-size: 14px; font-weight: 600; z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Skeletons ---------- */
.card.skel { pointer-events: none; opacity: 1; transform: none; animation: none; }
.skel-thumb { aspect-ratio: 16 / 11; }
.skel-line { height: 14px; border-radius: 6px; margin-bottom: 10px; }
.skel-shimmer {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite linear;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Admin ---------- */
.admin-shell { max-width: 1200px; margin: 0 auto; padding: 26px 20px 80px; }
.admin-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-title-row h1 { font-family: var(--font-display); font-size: 27px; }
.admin-title-row .spacer { flex: 1; }
.stat-grid { display: grid; gap: 14px; margin-bottom: 26px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 16px; backdrop-filter: blur(8px); }
.stat .num {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; letter-spacing: .03em; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-tab {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; min-height: 44px;
  transition: var(--transition);
}
.admin-tab.active { background: var(--grad); color: #fff; border-color: transparent; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; padding: 20px; backdrop-filter: blur(8px); }
.panel h2 { font-family: var(--font-display); font-size: 18px; margin-bottom: 14px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.form-grid textarea {
  width: 100%; min-height: 84px; resize: vertical; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px;
}
.form-grid textarea:focus { border-color: var(--accent); outline: none; }
.seg { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.seg button {
  border: none; background: transparent; color: var(--ink-soft);
  padding: 11px 16px; font-weight: 600; font-size: 13.5px; min-height: 46px;
  transition: var(--transition);
}
.seg button.active { background: var(--accent); color: #04211E; }
.seg button.active.admin-only { background: var(--amber); color: #241700; }
.table-wrap { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.admin-table th {
  text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr:hover td { background: var(--surface-2); }
.mini-chip {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink-soft);
  margin: 2px 3px 2px 0; border: 1px solid var(--line);
}
.mini-chip.hot { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tiny-btn {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  transition: var(--transition); min-height: 36px;
}
.tiny-btn:hover { border-color: var(--accent); color: var(--accent); }
.tiny-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  width: min(410px, 100%); background: var(--surface-solid); border: 1px solid var(--line-strong);
  border-radius: 22px; padding: 36px 30px; box-shadow: var(--shadow);
}
.login-card h1 { font-family: var(--font-display); font-size: 23px; text-align: center; }
.login-card .sub { text-align: center; color: var(--ink-faint); font-size: 13.5px; margin: 6px 0 20px; }
.login-card form { display: grid; gap: 14px; }
.err-box {
  background: rgba(240, 86, 91, .13); color: var(--danger);
  border-radius: 11px; padding: 11px 14px; font-size: 13.5px; font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .brand-text span { display: none; }
  .hero { padding-top: 32px; padding-bottom: 18px; }
  .hero h1 { font-size: clamp(28px, 8vw, 38px); margin-bottom: 14px; font-weight: 600 !important; }
  .hero p { font-size: 15px; margin-bottom: 22px; padding: 0 6px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .tabs-wrap { top: 63px; }
  .tabs-row { padding: 0 16px; gap: 10px; }
  .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .filters { width: 100%; margin-left: 13px; }
  .filters select { flex: 1 1 40%; min-width: 120px; }
  .filters input[type="search"] { flex: 1 1 55%; min-width: 140px; }
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .modal { max-height: 94vh; border-radius: 18px; }
  .card-actions { flex-wrap: wrap; }
  .browser-url { max-width: 120px; }
}

/* Stack hero CTAs full-width only on very narrow phones */
@media (max-width: 400px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .pill-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .card { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}


/* ---------- Version pills ---------- */
.ver-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.ver-pill {
  border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--ink-soft); padding: 8px 16px; border-radius: 999px;
  font-weight: 600; font-size: 13px; min-height: 40px; transition: var(--transition);
}
.ver-pill:hover { border-color: var(--accent); color: var(--accent); }
.ver-pill.active { background: var(--grad); color: #fff; border-color: transparent; }
.ver-note {
  font-size: 13px; color: var(--ink-soft); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; margin-top: 12px;
}

/* ---------- Figma loading overlay ---------- */
.figma-wrap { position: relative; margin-top: 14px; }
.figma-wrap .figma-frame { margin-top: 0; display: block; }
.figma-loading {
  position: absolute; inset: 0; z-index: 2; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--surface-2); color: var(--ink-soft); font-size: 13.5px; font-weight: 600;
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Gate step reveal ---------- */
#extraFields.slide-in { animation: slideDown .35s cubic-bezier(.3,.7,.3,1); }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---------- Brand logo (theme-aware) ---------- */
.logo-white { display: none; }
.logo-black { height: 40px; width: auto; display: block; }
.gate-logo-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.gate-logo-img { height: 52px; width: auto; }
@media (max-width: 720px) { .brand-logo { height: 32px; } }

/* ---------- Thumbnail drop zone ---------- */
.drop-zone {
  border: 2px dashed var(--line-strong); border-radius: 14px;
  background: var(--surface-2); min-height: 128px; padding: 16px;
  display: grid; place-items: center; text-align: center; cursor: pointer;
  transition: var(--transition); overflow: hidden;
}
.drop-zone:hover, .drop-zone:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone.over { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.drop-zone #dropText strong { display: block; font-size: 14px; margin-bottom: 4px; }
.drop-zone #dropText span { font-size: 12px; color: var(--ink-faint); }
.drop-zone img { max-height: 172px; width: auto; border-radius: 10px; }

/* ---------- Bulk import / export ---------- */
.bulk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bulk-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 8px;
}
.bulk-card strong { font-family: var(--font-display); font-size: 14.5px; }
.bulk-card .hint { margin: 0; }
.bulk-card code {
  font-size: 11.5px; background: var(--surface); padding: 2px 6px;
  border-radius: 5px; border: 1px solid var(--line);
}
.uploaded-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px;
}
.uploaded-row .fname {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink-faint);
}
.import-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.import-problems { margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.import-problems summary { cursor: pointer; font-weight: 600; color: var(--amber); }
.import-problems ul { margin: 8px 0 0 18px; }
.import-problems li { margin-bottom: 4px; }


/* ==========================================================
   Additions for main.js
   1) Tech-stack SVG icon badges on cards + modal
   2) 3D-tilt readiness for .card (main.js sets transform inline)
   ========================================================== */

/* Give the grid perspective so the mousemove tilt in main.js reads as real 3D */
.project-grid { perspective: 1400px; }
.card { transform-style: preserve-3d; will-change: transform; }

/* ---------- Tech-stack icon row ----------
   Normal document flow (not absolute) — this class is reused both on
   grid cards (after the description) and inside the project modal's
   meta row, so pulling it out of flow used to make it float on top of
   whichever content sat underneath it in either context. */
.tech-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tech-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  cursor: default;
  z-index: 1;
}
.tech-icon svg { width: 20px; height: 20px; }
.tech-icon:hover,
.tech-icon:focus-visible {
  transform: translateY(-3px) scale(1.08);
  border-color: var(--ic, var(--accent));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25), 0 0 0 1px var(--ic, var(--accent)) inset;
  outline: none;
  z-index: 5;
}
.tech-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 50;
}
.tech-icon:hover .tech-tip,
.tech-icon:focus-visible .tech-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Slightly larger, non-clipped variant used inside the project modal meta row */
.modal-meta .tech-icons { margin-top: 0; margin-left: 2px; }
.modal-meta .tech-icon { width: 30px; height: 30px; }
.modal-meta .tech-icon svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .tech-icon, .tech-icon:hover { transform: none !important; }
}


/* ---------- Card footer ---------- */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  margin-top: auto;
}

.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }



/* ==========================================================
   LIVE BUTTON — Premium Interactive
   Uses existing Dynamic Vishva theme
   ========================================================== */

.Live_Btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  border: 1px solid rgba(248, 185, 90, .45);
  border-radius: 999px;

  background: rgba(248, 185, 90, .08);
  color: var(--accent);

  font-size: 11px;
  font-weight: 700;
  text-decoration: none;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform .3s cubic-bezier(.34, 1.56, .64, 1),
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .3s ease;

  overflow: hidden;
}

.Live_Btn:hover {
  transform: translateY(-2px);
  background: var(--grad);
  border-color: transparent;
  color: #fff;

  box-shadow:
    0 8px 22px rgba(240, 108, 44, .28);
}

.Live_Btn:active {
  transform: translateY(0) scale(.94);
}

/* Interactive arrow */
.Live_Btn .live-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;

  transition:
    transform .35s cubic-bezier(.34, 1.56, .64, 1),
    filter .25s ease;
}

.Live_Btn:hover .live-icon {
  transform: translate(3px, -3px) rotate(8deg) scale(1.12);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .55));
}

.Live_Btn:active .live-icon {
  transform: translate(1px, -1px) scale(.9);
}


/* ---------- Live status dot ---------- */

.Live_Btn::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;

  border-radius: 50%;
  background: #22c55e;

  box-shadow:
    0 0 0 0 rgba(34, 197, 94, .55);

  animation: liveDotPulse 2s ease-out infinite;
}

/* ---------- Animated shine ---------- */

.Live_Btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, .28),
    transparent
  );

  transform: skewX(-20deg);
  transition: left .65s ease;

  pointer-events: none;
  z-index: -1;
}

/* ---------- Hover ---------- */

.Live_Btn:hover {
  transform: translateY(-2px);

  color: #fff;

  border-color: #F8B95A;

  background: var(--grad);

  box-shadow:
    0 8px 24px rgba(240, 108, 44, .25),
    0 0 0 1px rgba(248, 185, 90, .12);
}

.Live_Btn:hover::after {
  left: 140%;
}

/* ---------- Active ---------- */

.Live_Btn:active {
  transform: translateY(0) scale(.94);

  box-shadow:
    0 3px 10px rgba(240, 108, 44, .18);
}

/* ---------- Keyboard accessibility ---------- */

.Live_Btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Live dot animation ---------- */

@keyframes liveDotPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, .55);
  }

  70% {
    box-shadow:
      0 0 0 7px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .Live_Btn {
    transition: none;
  }

  .Live_Btn::before {
    animation: none;
  }

  .Live_Btn::after {
    display: none;
  }
}


/* ==========================================================
   Bottom Drawer Mode — Dynamic Vishva Portfolio
   Add  .drawer-mode  to  .modal-backdrop  to activate.
   All existing IDs and class names are preserved.
   ========================================================== */

/* ── Backdrop: drawer variant overrides center-align ── */
.modal-backdrop.drawer-mode {
  align-items: flex-end;        /* anchor to bottom */
  padding: 0;                   /* no side gutters — drawer goes edge-to-edge */
}

/* ── Drawer shell ── */
.modal-backdrop.drawer-mode .modal {
  max-height: 92vh;

  /* top-left | top-right | bottom-right | bottom-left */
  border-radius: 22px 22px 0 0 !important;

  border-bottom: none;
  width: 100% !important;
  max-width: 100% !important;
  border-left: none !important;
  border-right: none !important;

  transform: translateY(100%);
  transition:
    transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity var(--transition);
}

.modal-backdrop.drawer-mode.open .modal {
  transform: translateY(0);
}

/* ── Pull handle ── */
.modal-backdrop.drawer-mode .modal::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  margin: 14px auto 0;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Constrain drawer width on large screens (feels more native) ── */
@media (min-width: 720px) {
  .modal-backdrop.drawer-mode {
    justify-content: center;
  }
  .modal-backdrop.drawer-mode .modal {
    width: min(760px, 100%);
    border-radius: 22px 22px 0 0;
    border-left: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
  }
}

/* ── Wide project drawer (replaces min(980px,100%) on desktop) ── */
@media (min-width: 720px) {
  .modal-backdrop.drawer-mode.drawer-wide .modal {
    width: min(980px, 100%);
  }
}

/* ── Drag-dismiss visual feedback ── */
.modal-backdrop.drawer-mode .modal.is-dragging {
  transition: none;
  cursor: grabbing;
  user-select: none;
}

/* ── modal-head: keep close btn but add grab cursor on handle area ── */
.modal-backdrop.drawer-mode .modal-head {
  cursor: grab;
  padding-top: 8px;   /* handle already adds top space via ::before */
}
.modal-backdrop.drawer-mode .modal-head:active { cursor: grabbing; }

/* ── Gate (lead form) drawer — narrower ── */
.modal-backdrop.drawer-mode.gate .modal {
  width: min(520px, 100%);
}

/* ── Reduced motion: skip the slide, keep fade ── */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.drawer-mode .modal {
    transform: none !important;
    transition: opacity var(--transition) !important;
  }
}


@media (min-width: 1401px) {
  .grid-section {
    width: 1600px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 26px 20px 60px;
  }
}
@media (min-width: 1401px) {
  .cta-section {
    width: 1600px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    /* padding: 26px 20px 60px; */
  }
}
@media (min-width: 1401px) {
  .header-inner {
    width: 1600px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    /* padding: 26px 20px 60px; */
  }
}