/* ==========================================================================
   KABEER DESIGN — Design System + Home page
   Dark-first, glassmorphism, glossy, violet glow. 60fps motion.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --violet:        #6B2EFF;
  --violet-2:      #8B5FFF;
  --violet-soft:   #A98BFF;
  --ink-0:         #0A0A14;  /* page base */
  --ink-1:         #0D0D1A;  /* sections */
  --ink-2:         #16122A;  /* cards */
  --ink-3:         #1E1838;  /* raised */
  --line:          rgba(255,255,255,.08);
  --line-2:        rgba(255,255,255,.14);

  /* Text */
  --txt:           #ECEAF6;
  --txt-dim:       #A9A4C4;
  --txt-faint:     #6E688C;

  /* Effects */
  --grad-violet:   linear-gradient(135deg, #8B5FFF 0%, #6B2EFF 50%, #4A1FCC 100%);
  --grad-text:     linear-gradient(120deg, #FFFFFF 0%, #C9B8FF 45%, #8B5FFF 100%);
  --glow:          0 0 60px rgba(107,46,255,.45);
  --glow-soft:     0 0 30px rgba(107,46,255,.25);
  --glass:         rgba(255,255,255,.04);
  --glass-2:       rgba(255,255,255,.06);
  --shadow:        0 24px 60px rgba(0,0,0,.5);

  /* Floating nav */
  --nav-bg:        rgba(20,18,40,.72);
  --nav-shadow:    0 14px 44px rgba(0,0,0,.45);
  --grain-opacity: .035;
  --blob-opacity:  .5;

  /* Layout */
  --maxw:          1200px;
  --radius:        20px;
  --radius-lg:     28px;
  --ease:          cubic-bezier(.22,.61,.36,1);

  /* Type */
  --f-display:     "Clash Display", "Satoshi", system-ui, sans-serif;
  --f-body:        "Satoshi", "Inter", system-ui, sans-serif;
}

/* ---------- LIGHT THEME ---------- */
html[data-theme="light"] {
  --ink-0:  #F3F1FB;   /* page base */
  --ink-1:  #FFFFFF;   /* sections */
  --ink-2:  #FFFFFF;   /* cards */
  --ink-3:  #EFEBFA;   /* raised */
  --line:   rgba(26,21,48,.10);
  --line-2: rgba(26,21,48,.16);

  --txt:       #1A1530;
  --txt-dim:   #4B4570;
  --txt-faint: #8A85A6;

  --grad-text: linear-gradient(120deg, #1A1530 0%, #6B2EFF 85%);
  --glow:      0 0 50px rgba(107,46,255,.30);
  --glow-soft: 0 0 26px rgba(107,46,255,.18);
  --glass:     rgba(26,21,48,.035);
  --glass-2:   rgba(26,21,48,.05);
  --shadow:    0 24px 60px rgba(80,60,160,.16);

  --nav-bg:        rgba(255,255,255,.82);
  --nav-shadow:    0 14px 44px rgba(80,60,160,.18);
  --grain-opacity: .02;
  --blob-opacity:  .22;
}
html { transition: background .4s ease; }
html[data-theme="light"] body { background: var(--ink-0); }

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--ink-0);
  color: var(--txt);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* Nicer keyboard focus (replaces the default black box); none on mouse click */
:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--violet); color: #fff; }

/* Subtle film grain over everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(70px, 10vw, 140px) 0; position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--violet-soft); font-weight: 600; margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--violet); }
.h-section {
  font-family: var(--f-display); font-weight: 600; line-height: 1.05;
  font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.02em;
}
.lead { color: var(--txt-dim); font-size: 1.08rem; max-width: 56ch; }
.text-grad {
  background: var(--grad-text); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 100px; font-weight: 600; font-size: .96rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--grad-violet); color: #fff; box-shadow: var(--glow-soft); }
.btn-primary:hover { box-shadow: var(--glow); }
.btn-ghost { background: var(--glass-2); color: var(--txt); border: 1px solid var(--line-2); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: var(--glass); border-color: var(--violet); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Glow blobs ---------- */
.glow-blob {
  position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: var(--blob-opacity); pointer-events: none; z-index: 0;
}

/* ==========================================================================
   NAVBAR — glossy floating pill (desktop)
   ========================================================================== */
.nav {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 1000;
  transition: top .4s var(--ease);
}
/* When logged in, the WordPress admin bar sits on top — push the nav below it. */
.admin-bar .nav { top: calc(22px + 32px); }
@media (max-width: 782px) { .admin-bar .nav { top: calc(16px + 46px); } }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 9px 9px 9px 22px; border-radius: 100px;
  background: var(--nav-bg); backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line-2); box-shadow: var(--nav-shadow);
  position: relative; overflow: hidden;
  transition: box-shadow .4s, transform .4s var(--ease);
}
/* glossy top sheen */
.nav__inner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent);
  pointer-events: none;
}
.nav.scrolled { top: 14px; }
.admin-bar .nav.scrolled { top: calc(14px + 32px); }
.nav.scrolled .nav__inner { box-shadow: var(--nav-shadow), 0 6px 20px rgba(107,46,255,.18); }

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; position: relative; z-index: 1; }
.brand .dot { width: 30px; height: 30px; border-radius: 9px; background: var(--grad-violet); box-shadow: var(--glow-soft); display: grid; place-items: center; font-size: .9rem; color: #fff; }
/* Uploaded logo mark (sits next to the brand name) */
.brand__logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.brand__name { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; white-space: nowrap; }
@media (max-width: 820px) { .brand__logo { height: 28px; } }

.nav__links { display: flex; gap: 4px; align-items: center; position: relative; z-index: 1; }
.nav__links a { color: var(--txt-dim); font-size: .94rem; font-weight: 500; padding: 9px 16px; border-radius: 100px; transition: color .25s, background .25s; }
.nav__links a:hover { color: var(--txt); background: var(--glass-2); }
.nav__links a.is-active,
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a { color: var(--violet-soft); background: rgba(139,95,255,.14); }
html[data-theme="light"] .nav__links a.is-active,
html[data-theme="light"] .nav__links .current-menu-item > a { color: var(--violet); }

.nav__cta { display: flex; gap: 10px; align-items: center; position: relative; z-index: 1; }
.nav__cta .btn { padding: 11px 20px; }

/* Theme toggle */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--line-2); font-size: 1.05rem;
  transition: border-color .25s, background .25s, transform .3s var(--ease);
}
.theme-toggle:hover { border-color: var(--violet); transform: rotate(18deg); }

.nav__burger { display: none; flex-direction: column; gap: 5px; }
.nav__burger span { width: 22px; height: 2px; background: var(--txt); transition: .3s; }

/* ==========================================================================
   MOBILE BOTTOM NAV — floating pill with raised active icon
   ========================================================================== */
.mobnav {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: none; align-items: center; gap: 6px; padding: 9px 12px;
  border-radius: 100px; background: var(--nav-bg); backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line-2); box-shadow: var(--nav-shadow);
}
.mobnav a {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--txt-faint); font-size: 1.25rem;
  transition: color .35s var(--ease), background .35s var(--ease), transform .4s var(--ease), box-shadow .35s;
}
.mobnav a:active { transform: scale(.9); }
.mobnav a.is-active {
  color: #fff; background: var(--grad-violet); box-shadow: var(--glow);
  transform: translateY(-16px) scale(1.06);
}
.mobnav a.is-active::after {
  content: attr(data-label); position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%);
  font-size: .6rem; font-weight: 600; letter-spacing: .04em; color: var(--violet-soft); white-space: nowrap;
}
html[data-theme="light"] .mobnav a.is-active::after { color: var(--violet); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: 200px 0 120px; overflow: hidden; }
.hero__grid { position: absolute; inset: 0; z-index: 0; opacity: .4;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); }
.hero .glow-blob.a { width: 560px; height: 560px; background: var(--violet); top: -180px; right: -120px; }
.hero .glow-blob.b { width: 420px; height: 420px; background: #4A1FCC; bottom: -160px; left: -100px; opacity: .35; }
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin-inline: auto; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 100px;
  background: var(--glass-2); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
  font-size: .85rem; color: var(--txt-dim); margin-bottom: 28px;
}
.hero__badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: #43e08a; box-shadow: 0 0 10px #43e08a; }
.hero h1 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; line-height: .98;
  font-size: clamp(2.6rem, 7vw, 5.4rem); margin-bottom: 22px;
}
.hero h1 .name { display: block; }
.hero__roles { font-size: clamp(1rem, 2.4vw, 1.5rem); color: var(--txt-dim); font-weight: 500; margin-bottom: 30px; }
.hero__roles b { color: var(--violet-soft); font-weight: 600; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__scroll { margin-top: 64px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--txt-faint); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }
.hero__scroll .mouse { width: 22px; height: 36px; border: 1.5px solid var(--line-2); border-radius: 12px; position: relative; }
.hero__scroll .mouse::after { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 7px; border-radius: 3px; background: var(--violet-soft); animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%,0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,12px); } }

/* ==========================================================================
   ABOUT STRIP
   ========================================================================== */
.about__wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.about__photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.about__photo .ph { width: 100%; height: 100%; }
.about__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,20,.6), transparent 50%); }
.about__sig { position: absolute; left: 22px; bottom: 18px; z-index: 2; font-family: var(--f-display); font-size: 1.1rem; }
.about p { margin-top: 18px; color: var(--txt-dim); }
.about__mini { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.about__mini div b { font-family: var(--f-display); font-size: 1.6rem; color: #fff; }
.about__mini div span { display: block; font-size: .85rem; color: var(--txt-faint); }

/* ==========================================================================
   SERVICES TEASER
   ========================================================================== */
.head-flex { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  position: relative; padding: 32px 28px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line);
  backdrop-filter: blur(8px); overflow: hidden; transition: transform .4s var(--ease), border-color .4s;
}
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(139,95,255,.16), transparent 60%); opacity: 0; transition: opacity .4s; }
.card:hover { transform: translateY(-6px); border-color: var(--line-2); }
.card:hover::before { opacity: 1; }
.card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--ink-3); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 20px; border: 1px solid var(--line); }
.card h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 10px; }
.card p { color: var(--txt-dim); font-size: .95rem; margin-bottom: 18px; }
.card__foot { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
.card__price { color: var(--violet-soft); font-weight: 600; }
.card__link { color: var(--txt-dim); display: inline-flex; gap: 6px; transition: color .25s; }
.card:hover .card__link { color: #fff; }

/* ==========================================================================
   FEATURED APP — LayerFlow
   ========================================================================== */
.app-feat { background: var(--ink-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.app-feat__wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px,5vw,64px); align-items: center; }
.app-feat__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow), var(--glow-soft); aspect-ratio: 16/11; }
.app-feat__media .ph { width: 100%; height: 100%; }
.app-feat__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; background: rgba(139,95,255,.12); border: 1px solid rgba(139,95,255,.3); color: var(--violet-soft); font-size: .82rem; font-weight: 600; margin-bottom: 18px; }
.app-feat h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem,4vw,3rem); line-height: 1.05; margin-bottom: 16px; letter-spacing: -.02em; }
.app-feat__list { display: grid; gap: 12px; margin: 24px 0 30px; }
.app-feat__list li { display: flex; gap: 12px; color: var(--txt-dim); }
.app-feat__list .tick { color: var(--violet-soft); flex-shrink: 0; }
.app-feat__dl { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.app-feat__count { font-size: .9rem; color: var(--txt-faint); }
.app-feat__count b { font-family: var(--f-display); color: #fff; font-size: 1.3rem; display: block; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.filters button { padding: 9px 20px; border-radius: 100px; border: 1px solid var(--line); color: var(--txt-dim); font-size: .9rem; font-weight: 500; transition: .25s; }
.filters button.active, .filters button:hover { background: var(--glass-2); color: #fff; border-color: var(--violet); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pf {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3;
  border: 1px solid var(--line); cursor: pointer; transition: transform .4s var(--ease);
}
.pf:nth-child(4n) { aspect-ratio: 4/5; }
.pf .ph { width: 100%; height: 100%; transition: transform .6s var(--ease); }
.pf:hover .ph { transform: scale(1.06); }
.pf__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,20,.92), transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; opacity: 0; transition: opacity .4s; }
.pf:hover .pf__overlay { opacity: 1; }
.pf__overlay span { font-size: .78rem; color: var(--violet-soft); letter-spacing: .1em; text-transform: uppercase; }
.pf__overlay h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin-top: 4px; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats { background: var(--ink-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat__num { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem,5vw,3.6rem); line-height: 1; }
.stat__num .plus { color: var(--violet); }
.stat__label { color: var(--txt-dim); margin-top: 10px; font-size: .95rem; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.tst { position: relative; }
.tst__track { display: flex; gap: 22px; transition: transform .6s var(--ease); }
.tst__card { min-width: calc(50% - 11px); padding: 34px; border-radius: var(--radius); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); }
.tst__stars { color: var(--violet-soft); margin-bottom: 16px; letter-spacing: 3px; }
.tst__quote { font-size: 1.12rem; color: var(--txt); line-height: 1.6; }
.tst__who { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.tst__who .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-2); }
.tst__who b { display: block; font-weight: 600; }
.tst__who span { color: var(--txt-faint); font-size: .88rem; }
.tst__nav { display: flex; gap: 10px; margin-top: 30px; justify-content: center; }
.tst__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: .25s; }
.tst__nav button:hover { background: var(--glass-2); border-color: var(--violet); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee { overflow: hidden; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* Seamless loop: two identical groups; translateX(-50%) = exactly one group
   width (trailing margin lives INSIDE each group, so halves are equal). */
.marquee__track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__track .logo { margin-right: 70px; font-family: var(--f-display); font-size: 1.6rem; font-weight: 500; color: var(--txt-faint); opacity: .7; white-space: nowrap; transition: color .3s, opacity .3s; }
.marquee__track .logo:hover { color: var(--violet-soft); opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   NEWSLETTER + CTA
   ========================================================================== */
.cta-final { position: relative; overflow: hidden; }
.cta-final .glow-blob { width: 600px; height: 600px; background: var(--violet); top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .25; }
.cta-box {
  position: relative; z-index: 2; text-align: center; padding: clamp(50px,7vw,90px);
  border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.cta-box h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem,5vw,3.4rem); letter-spacing: -.02em; margin-bottom: 18px; line-height: 1.05; }
.cta-box p { color: var(--txt-dim); max-width: 50ch; margin: 0 auto 32px; }
.cta-box .hero__cta { margin-bottom: 0; }
.newsletter { max-width: 480px; margin: 36px auto 0; }
.newsletter form { display: flex; gap: 10px; padding: 7px; border-radius: 100px; background: var(--ink-0); border: 1px solid var(--line-2); }
.newsletter input { flex: 1; background: none; border: none; outline: none; color: #fff; padding: 0 18px; font-size: .95rem; }
.newsletter input::placeholder { color: var(--txt-faint); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink-1); border-top: 1px solid var(--line); padding-top: 70px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer__brand p { color: var(--txt-dim); margin: 16px 0 22px; max-width: 32ch; font-size: .95rem; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a { width: 40px; height: 40px; border-radius: 11px; background: var(--glass-2); border: 1px solid var(--line); display: grid; place-items: center; transition: .25s; }
.footer__socials a:hover { background: var(--violet); transform: translateY(-3px); }
.footer__col h5 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-faint); margin-bottom: 18px; }
.footer__col a { display: block; color: var(--txt-dim); font-size: .95rem; padding: 6px 0; transition: color .2s, padding-left .2s; }
.footer__col a:hover { color: #fff; padding-left: 6px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--line); color: var(--txt-faint); font-size: .88rem; }

/* ---------- Placeholder graphics ---------- */
.ph {
  background:
    repeating-linear-gradient(45deg, rgba(139,95,255,.06) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  display: grid; place-items: center; color: var(--txt-faint); font-size: .82rem;
  letter-spacing: .05em; text-align: center; padding: 16px;
}
.ph::before { content: "▦ " attr(data-label); opacity: .8; }

/* ---------- Scroll reveals — CSS + IntersectionObserver, NOT dependent on
   GSAP/ScrollTrigger (so host caching can never leave content invisible).
   Content is VISIBLE BY DEFAULT; only hidden once JS confirms it can reveal
   it (html.js), and a 4s inline failsafe (html.kd-reveal-all) forces
   everything visible no matter what. ---------- */
.reveal, [data-stagger] > * { opacity: 1; transform: none; }
html.js .reveal,
html.js [data-stagger] > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js .reveal.is-in,
html.js [data-stagger] > *.is-in { opacity: 1; transform: none; }
/* Failsafe: if scripts never reveal them, show everything anyway. */
html.kd-reveal-all .reveal,
html.kd-reveal-all [data-stagger] > * { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   SUB-PAGE HEADER (shared by About, Services, etc.)
   ========================================================================== */
.page-hero { position: relative; padding: 180px 0 60px; overflow: hidden; text-align: center; }
.page-hero .glow-blob { width: 480px; height: 480px; background: var(--violet); top: -200px; left: 50%; transform: translateX(-50%); opacity: .3; }
.page-hero__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.page-hero h1 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.04; font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 18px; }
.page-hero p { color: var(--txt-dim); font-size: 1.1rem; max-width: 56ch; margin-inline: auto; }
.breadcrumb { display: inline-flex; gap: 8px; font-size: .85rem; color: var(--txt-faint); margin-bottom: 22px; }
.breadcrumb a { color: var(--violet-soft); }

/* ==========================================================================
   ABOUT / CV PAGE
   ========================================================================== */
/* Bio split */
.bio { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,64px); align-items: center; }
.bio__photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.bio__photo .ph { width: 100%; height: 100%; }
.bio__badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; background: rgba(10,10,20,.6); border: 1px solid var(--line-2); backdrop-filter: blur(10px); font-size: .82rem; }
.bio__badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: #43e08a; box-shadow: 0 0 10px #43e08a; }
.bio p { color: var(--txt-dim); margin-top: 16px; }
.bio__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Skills with proficiency bars */
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 50px; }
.skill { }
.skill__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.skill__top b { font-weight: 600; }
.skill__top span { color: var(--violet-soft); font-size: .88rem; font-family: var(--f-display); }
.skill__bar { height: 8px; border-radius: 100px; background: var(--ink-3); overflow: hidden; }
.skill__fill { height: 100%; width: 0; border-radius: 100px; background: var(--grad-violet); box-shadow: var(--glow-soft); transition: width 1.4s var(--ease); }

/* Tools chips */
.tools { display: flex; flex-wrap: wrap; gap: 12px; }
.tool { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); font-weight: 500; transition: transform .3s var(--ease), border-color .3s; }
.tool:hover { transform: translateY(-4px); border-color: var(--violet); }
.tool i { font-style: normal; width: 30px; height: 30px; border-radius: 9px; background: var(--ink-3); display: grid; place-items: center; font-size: 1rem; }

/* Experience timeline */
.timeline { position: relative; max-width: 820px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--violet), transparent); }
.tl-item { position: relative; padding: 0 0 38px 44px; }
.tl-item::before { content: ""; position: absolute; left: 2px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-0); border: 3px solid var(--violet); box-shadow: var(--glow-soft); }
.tl-item .yr { font-family: var(--f-display); color: var(--violet-soft); font-size: .9rem; letter-spacing: .05em; }
.tl-item h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; margin: 4px 0 2px; }
.tl-item .org { color: var(--txt-faint); font-size: .92rem; margin-bottom: 8px; }
.tl-item p { color: var(--txt-dim); font-size: .96rem; }

/* What I offer (small grid) */
.offer { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.offer__item { padding: 26px; border-radius: var(--radius); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); }
.offer__item .num { font-family: var(--f-display); color: var(--violet); font-size: 1.4rem; }
.offer__item h4 { font-family: var(--f-display); font-weight: 600; margin: 10px 0 8px; }
.offer__item p { color: var(--txt-dim); font-size: .94rem; }

/* Fun facts */
.facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.fact { text-align: center; padding: 30px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--glass); }
.fact .ico { font-size: 1.8rem; }
.fact b { display: block; font-family: var(--f-display); font-size: 1.05rem; margin-top: 12px; }
.fact span { color: var(--txt-faint); font-size: .88rem; }

/* ==========================================================================
   SERVICES LISTING PAGE
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.svc {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 34px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s;
}
.svc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(139,95,255,.14), transparent 60%); opacity: 0; transition: opacity .4s; }
.svc:hover { transform: translateY(-6px); border-color: var(--line-2); }
.svc:hover::before { opacity: 1; }
.svc__head { display: flex; align-items: center; gap: 16px; }
.svc__icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 15px; background: var(--ink-3); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.5rem; }
.svc__head h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1.1; }
.svc__head .from { color: var(--violet-soft); font-size: .9rem; font-weight: 600; }
.svc__desc { color: var(--txt-dim); font-size: .98rem; flex: 1; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc__tags span { font-size: .78rem; color: var(--txt-faint); padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line); }
.svc__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.svc__actions .btn { padding: 11px 20px; font-size: .9rem; }

/* Process steps */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.process__step { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); }
.process__step .n { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.process__step h4 { font-family: var(--f-display); font-weight: 600; margin: 14px 0 8px; }
.process__step p { color: var(--txt-dim); font-size: .94rem; }

/* FAQ accordion */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; background: var(--glass); overflow: hidden; transition: border-color .3s; }
.faq__item.open { border-color: var(--violet); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; font-family: var(--f-display); font-weight: 500; font-size: 1.06rem; }
.faq__q .ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .3s, background .3s; }
.faq__item.open .faq__q .ic { transform: rotate(45deg); background: var(--violet); border-color: var(--violet); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a p { padding: 0 24px 24px; color: var(--txt-dim); }

/* Generic two-col CTA banner */
.banner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; padding: clamp(34px,4vw,52px); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(107,46,255,.18), rgba(139,95,255,.06)); border: 1px solid var(--line-2); }
.banner h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.1; }
.banner p { color: var(--txt-dim); margin-top: 8px; }

/* ==========================================================================
   PRICING TIERS (service order pages + Pricing page)
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column;
  padding: 36px 30px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s;
}
.tier:hover { transform: translateY(-6px); border-color: var(--line-2); }
.tier.featured { border-color: var(--violet); background: linear-gradient(160deg, rgba(107,46,255,.16), rgba(139,95,255,.04)); box-shadow: var(--glow-soft); }
.tier__ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-violet); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; box-shadow: var(--glow-soft); }
.tier__name { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; }
.tier__blurb { color: var(--txt-faint); font-size: .9rem; margin: 6px 0 18px; min-height: 38px; }
.tier__price { font-family: var(--f-display); font-weight: 600; font-size: 2.6rem; line-height: 1; }
.tier__price small { font-size: .9rem; color: var(--txt-faint); font-weight: 400; font-family: var(--f-body); }
.tier__meta { color: var(--violet-soft); font-size: .86rem; margin: 12px 0 22px; }
.tier__list { display: grid; gap: 11px; margin-bottom: 26px; flex: 1; }
.tier__list li { display: flex; gap: 10px; color: var(--txt-dim); font-size: .94rem; }
.tier__list .tick { color: var(--violet-soft); flex-shrink: 0; }
.tier__list .off { opacity: .4; }
.tier__list .off .tick { color: var(--txt-faint); }
.tier .btn { width: 100%; justify-content: center; }

/* ==========================================================================
   FORMS (order brief, custom quote, contact)
   ========================================================================== */
.form-wrap { display: grid; grid-template-columns: 1.4fr .8fr; gap: 34px; align-items: start; }
.form-card { padding: clamp(26px,4vw,40px); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .88rem; color: var(--txt-dim); font-weight: 500; }
.field label .req { color: var(--violet-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px; font-family: inherit; font-size: .96rem;
  background: var(--ink-0); border: 1px solid var(--line-2); color: var(--txt); transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--txt-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(107,46,255,.18); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23A98BFF'%3E%3Cpath d='M7 10L2 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
/* File upload */
.filedrop { position: relative; border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 26px; text-align: center; color: var(--txt-faint); transition: border-color .25s, background .25s; cursor: pointer; }
.filedrop:hover { border-color: var(--violet); background: rgba(107,46,255,.05); }
.filedrop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.filedrop .big { color: var(--txt); font-weight: 500; }
.form-card .btn { margin-top: 6px; }
/* Order summary side */
.order-side { position: sticky; top: 100px; padding: 30px; border-radius: var(--radius-lg); background: var(--ink-2); border: 1px solid var(--line); }
.order-side h4 { font-family: var(--f-display); font-weight: 600; margin-bottom: 16px; }
.order-side .row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--txt-dim); font-size: .94rem; }
.order-side .row.total { border-bottom: none; color: #fff; font-family: var(--f-display); font-size: 1.2rem; padding-top: 16px; }
.order-side .note { margin-top: 16px; font-size: .85rem; color: var(--txt-faint); }
.order-side .trust { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: .85rem; color: var(--txt-dim); }

/* ==========================================================================
   APPS LISTING PAGE
   ========================================================================== */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.appc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.appc:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--shadow); }
.appc__shot { position: relative; aspect-ratio: 16/9; border-bottom: 1px solid var(--line); overflow: hidden; }
.appc__shot .ph { width: 100%; height: 100%; }
.appc__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.appc:hover .appc__shot img { transform: scale(1.05); }
.appc__status { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 100px; font-size: .76rem; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(10px); }
.appc__status.shipped { background: rgba(67,224,138,.14); border: 1px solid rgba(67,224,138,.4); color: #6ff0a8; }
.appc__status.shipped .pulse { width: 7px; height: 7px; border-radius: 50%; background: #43e08a; box-shadow: 0 0 8px #43e08a; }
.appc__status.soon { background: rgba(139,95,255,.16); border: 1px solid rgba(139,95,255,.4); color: var(--violet-soft); }
.appc__body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.appc__head { display: flex; align-items: center; gap: 14px; }
.appc__logo { width: 50px; height: 50px; border-radius: 14px; background: var(--grad-violet); display: grid; place-items: center; font-size: 1.4rem; box-shadow: var(--glow-soft); flex-shrink: 0; }
.appc__head h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; line-height: 1.05; }
.appc__head .cat { color: var(--txt-faint); font-size: .85rem; }
.appc__desc { color: var(--txt-dim); font-size: .96rem; flex: 1; }
.appc__platforms { display: flex; gap: 8px; flex-wrap: wrap; }
.appc__platforms span { font-size: .78rem; color: var(--txt-faint); padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line); }
.appc__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.appc__meta { font-size: .86rem; color: var(--txt-faint); }
.appc__meta b { color: var(--violet-soft); font-family: var(--f-display); }
.appc__price { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.appc__price small { font-size: .8rem; color: var(--txt-faint); font-weight: 400; }
.appc.is-soon { opacity: .96; }
.appc.is-soon .appc__shot { filter: saturate(.7); }

/* small section divider label */
.grid-label { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.grid-label h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; white-space: nowrap; }
.grid-label .count { color: var(--txt-faint); font-size: .9rem; }
.grid-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   APP PRODUCT PAGE (LayerFlow)
   ========================================================================== */
/* Cinematic hero */
.apphero { position: relative; padding: 170px 0 70px; overflow: hidden; text-align: center; }
.apphero .glow-blob.a { width: 600px; height: 600px; background: var(--violet); top: -240px; left: 50%; transform: translateX(-50%); opacity: .32; }
.apphero__inner { position: relative; z-index: 2; max-width: 860px; margin-inline: auto; }
.apphero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 100px; background: var(--glass-2); border: 1px solid var(--line-2); backdrop-filter: blur(10px); font-size: .85rem; color: var(--txt-dim); margin-bottom: 24px; }
.apphero__logo { width: 76px; height: 76px; border-radius: 20px; background: var(--grad-violet); display: grid; place-items: center; font-size: 2rem; box-shadow: var(--glow); margin: 0 auto 22px; }
.apphero h1 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-size: clamp(2.6rem, 6.5vw, 4.6rem); margin-bottom: 18px; }
.apphero p.tag { font-size: clamp(1.05rem,2.4vw,1.4rem); color: var(--txt-dim); max-width: 60ch; margin: 0 auto 30px; }
.apphero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.apphero__os { margin-top: 16px; color: var(--txt-faint); font-size: .86rem; }
.apphero__shot { position: relative; z-index: 2; margin: 56px auto 0; max-width: 1040px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow), var(--glow-soft); aspect-ratio: 16/9; }
.apphero__shot .ph { width: 100%; height: 100%; }

/* Trust bar of mini stats */
.appstats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align: center; }
.appstats .stat__num { font-size: clamp(1.8rem,4vw,2.6rem); }

/* Feature zigzag rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; }
.feature + .feature { margin-top: clamp(50px,7vw,90px); }
.feature__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); aspect-ratio: 16/11; }
.feature__media .ph { width: 100%; height: 100%; }
.feature.flip .feature__text { order: 2; }
.feature__num { font-family: var(--f-display); color: var(--violet-soft); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
.feature h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem,3vw,2.2rem); line-height: 1.1; margin: 10px 0 14px; letter-spacing: -.01em; }
.feature p { color: var(--txt-dim); }
.feature__list { display: grid; gap: 10px; margin-top: 18px; }
.feature__list li { display: flex; gap: 10px; color: var(--txt-dim); font-size: .95rem; }
.feature__list .tick { color: var(--violet-soft); }

/* System requirements */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.spec { padding: 30px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); }
.spec h4 { font-family: var(--f-display); font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.spec h4 .os { width: 34px; height: 34px; border-radius: 10px; background: var(--ink-3); display: grid; place-items: center; }
.spec .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.spec .row:last-child { border-bottom: none; }
.spec .row span:first-child { color: var(--txt-faint); }
.spec .row span:last-child { color: var(--txt); text-align: right; }

/* Tutorial video grid */
.videos { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.video { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--glass); cursor: pointer; transition: transform .4s var(--ease), border-color .4s; }
.video:hover { transform: translateY(-5px); border-color: var(--violet); }
.video__thumb { position: relative; aspect-ratio: 16/9; }
.video__thumb .ph { width: 100%; height: 100%; }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video__play span { width: 56px; height: 56px; border-radius: 50%; background: rgba(107,46,255,.9); display: grid; place-items: center; font-size: 1.1rem; color: #fff; box-shadow: var(--glow); transition: transform .3s; }
.video:hover .video__play span { transform: scale(1.12); }
.video__info { padding: 16px 18px; }
.video__info b { font-family: var(--f-display); font-weight: 500; display: block; }
.video__info span { color: var(--txt-faint); font-size: .85rem; }

/* Changelog */
.changelog { max-width: 820px; }
.cl-item { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cl-item:last-child { border-bottom: none; }
.cl-ver { }
.cl-ver b { font-family: var(--f-display); font-size: 1.1rem; color: var(--violet-soft); }
.cl-ver span { display: block; color: var(--txt-faint); font-size: .84rem; margin-top: 4px; }
.cl-body h4 { font-family: var(--f-display); font-weight: 600; margin-bottom: 10px; }
.cl-body ul { display: grid; gap: 7px; }
.cl-body li { display: flex; gap: 10px; color: var(--txt-dim); font-size: .94rem; }
.cl-body .pill { flex-shrink: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 100px; height: fit-content; margin-top: 2px; }
.cl-body .pill.new { background: rgba(67,224,138,.16); color: #6ff0a8; }
.cl-body .pill.fix { background: rgba(139,95,255,.16); color: var(--violet-soft); }
.cl-body .pill.imp { background: rgba(255,200,80,.14); color: #ffce6b; }

/* ==========================================================================
   PORTFOLIO — masonry + lightbox + case study
   ========================================================================== */
.masonry { columns: 3; column-gap: 18px; }
.masonry .pf { break-inside: avoid; margin-bottom: 18px; aspect-ratio: auto; display: block; }
.masonry .pf .ph { width: 100%; aspect-ratio: 4/3; }
.masonry .pf.tall .ph { aspect-ratio: 3/4; }
.masonry .pf.wide .ph { aspect-ratio: 16/10; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center; padding: 30px; background: rgba(6,6,12,.92); backdrop-filter: blur(8px); }
.lightbox.open { display: grid; }
.lightbox__inner { position: relative; max-width: 1000px; width: 100%; }
.lightbox__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); aspect-ratio: 16/10; box-shadow: var(--shadow); }
.lightbox__media .ph, .lightbox__media img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; align-items: center; }
.lightbox__cap b { font-family: var(--f-display); font-size: 1.2rem; }
.lightbox__cap span { color: var(--violet-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.lightbox__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--line-2); color: #fff; font-size: 1.2rem; display: grid; place-items: center; }
.lightbox__close:hover { background: var(--violet); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--line-2); color: #fff; font-size: 1.3rem; display: grid; place-items: center; transition: background .25s; }
.lightbox__nav:hover { background: var(--violet); }
.lightbox__nav.prev { left: -64px; }
.lightbox__nav.next { right: -64px; }

/* Case study */
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-meta div span { display: block; color: var(--txt-faint); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.cs-meta div b { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; }
.cs-cover { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); aspect-ratio: 16/9; margin-bottom: 50px; }
.cs-cover .ph { width: 100%; height: 100%; }
.cs-block { max-width: 760px; margin: 0 auto clamp(40px,6vw,70px); }
.cs-block .eyebrow { justify-content: flex-start; }
.cs-block h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem,3.5vw,2.4rem); margin-bottom: 16px; letter-spacing: -.01em; }
.cs-block p { color: var(--txt-dim); margin-bottom: 14px; }
.cs-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0; }
.cs-gallery .ph { aspect-ratio: 4/3; border-radius: var(--radius); }
.cs-gallery .full { grid-column: 1 / -1; }
.cs-gallery .full .ph { aspect-ratio: 16/9; }
.cs-result { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; text-align: center; margin-top: 26px; }
.cs-result .stat__num { font-size: clamp(2rem,4vw,3rem); }
.cs-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 40px; border-top: 1px solid var(--line); }

/* ==========================================================================
   PRICING PAGE — segmented toggle + comparison tables
   ========================================================================== */
.seg { display: inline-flex; padding: 5px; border-radius: 100px; background: var(--ink-2); border: 1px solid var(--line-2); gap: 4px; }
.seg button { padding: 11px 26px; border-radius: 100px; font-weight: 600; font-size: .92rem; color: var(--txt-dim); transition: color .25s; position: relative; }
.seg button.active { color: #fff; }
.seg__pill { position: absolute; inset: 5px auto 5px 5px; border-radius: 100px; background: var(--grad-violet); box-shadow: var(--glow-soft); transition: transform .35s var(--ease), width .35s var(--ease); z-index: 0; }
.seg { position: relative; }
.seg button { z-index: 1; }

.pane { display: none; }
.pane.active { display: block; }

/* Comparison table */
.cmp-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; min-width: 680px; background: var(--glass); }
.cmp th, .cmp td { padding: 18px 22px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp thead th { background: var(--ink-2); position: sticky; top: 0; }
.cmp thead .plan { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.cmp thead .plan.featured { color: var(--violet-soft); }
.cmp thead .price { display: block; font-size: .9rem; color: var(--txt-faint); font-weight: 400; margin-top: 4px; }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--txt); background: rgba(255,255,255,.02); }
.cmp .group td, .cmp .group th { background: var(--ink-2); font-family: var(--f-display); color: var(--violet-soft); text-align: left; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.cmp .yes { color: #6ff0a8; font-size: 1.1rem; }
.cmp .no { color: var(--txt-faint); }
.cmp td.hl { background: rgba(107,46,255,.07); }
.cmp tfoot td { padding: 24px 22px; }

/* Services price rows */
.prow { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 20px; align-items: center; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); margin-bottom: 12px; transition: border-color .3s, transform .3s var(--ease); }
.prow:hover { border-color: var(--line-2); transform: translateX(4px); }
.prow__name { display: flex; align-items: center; gap: 14px; }
.prow__name .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.prow__name b { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; }
.prow__name span { display: block; color: var(--txt-faint); font-size: .85rem; }
.prow__price { font-family: var(--f-display); font-weight: 600; color: var(--violet-soft); }
.prow__turn { color: var(--txt-dim); font-size: .92rem; }
.prow__head { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 20px; padding: 0 26px 14px; color: var(--txt-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

/* ==========================================================================
   TUTORIALS / RESOURCES PAGE
   ========================================================================== */
/* Responsive 16:9 embed (YouTube/Vimeo) */
.embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--ink-2); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed .ph { width: 100%; height: 100%; }

/* Featured tutorial split */
.feat-tut { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.feat-tut__meta .eyebrow { justify-content: flex-start; }
.feat-tut__meta h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem,3vw,2.2rem); line-height: 1.1; margin-bottom: 14px; }
.feat-tut__meta p { color: var(--txt-dim); margin-bottom: 22px; }

/* Tip cards */
.tips { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tip { padding: 28px; border-radius: var(--radius); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s; }
.tip:hover { transform: translateY(-5px); border-color: var(--line-2); }
.tip .cat { font-size: .76rem; color: var(--violet-soft); letter-spacing: .1em; text-transform: uppercase; }
.tip h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 10px 0 8px; }
.tip p { color: var(--txt-dim); font-size: .94rem; }
.tip .read { display: inline-flex; gap: 6px; margin-top: 16px; color: var(--txt-dim); font-size: .9rem; transition: color .25s; }
.tip:hover .read { color: #fff; }

/* Filter chips reused via .filters; resource newsletter reuses .newsletter */

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.cinfo { display: grid; gap: 14px; }
.cinfo__item { display: flex; gap: 16px; padding: 22px; border-radius: var(--radius); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease); }
.cinfo__item:hover { border-color: var(--line-2); transform: translateX(4px); }
.cinfo__item .ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.2rem; }
.cinfo__item span { display: block; color: var(--txt-faint); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.cinfo__item b { font-family: var(--f-display); font-weight: 500; font-size: 1.02rem; }
.cinfo__item a { color: var(--txt); }
.cinfo__item a:hover { color: var(--violet-soft); }
.cinfo__socials { display: flex; gap: 10px; margin-top: 4px; }
.cinfo__socials a { width: 44px; height: 44px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--line); display: grid; place-items: center; transition: .25s; }
.cinfo__socials a:hover { background: var(--violet); transform: translateY(-3px); }
.resp-note { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 100px; background: rgba(67,224,138,.1); border: 1px solid rgba(67,224,138,.3); color: #6ff0a8; font-size: .9rem; font-weight: 500; }
.resp-note .pulse { width: 8px; height: 8px; border-radius: 50%; background: #43e08a; box-shadow: 0 0 10px #43e08a; }

/* ==========================================================================
   SUPPORT / HELP CENTER
   ========================================================================== */
.help-search { max-width: 620px; margin: 30px auto 0; position: relative; }
.help-search input { width: 100%; padding: 18px 22px 18px 54px; border-radius: 100px; background: var(--ink-2); border: 1px solid var(--line-2); color: #fff; font-size: 1rem; font-family: inherit; transition: border-color .25s, box-shadow .25s; }
.help-search input::placeholder { color: var(--txt-faint); }
.help-search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(107,46,255,.18); }
.help-search .ic { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--violet-soft); font-size: 1.1rem; }

.doc-cats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.doc-cat { padding: 30px; border-radius: var(--radius); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s; }
.doc-cat:hover { transform: translateY(-5px); border-color: var(--line-2); }
.doc-cat .ic { width: 50px; height: 50px; border-radius: 13px; background: var(--ink-3); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 16px; }
.doc-cat h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 6px; }
.doc-cat p { color: var(--txt-faint); font-size: .9rem; margin-bottom: 16px; }
.doc-cat a { display: block; color: var(--txt-dim); font-size: .94rem; padding: 7px 0; border-top: 1px solid var(--line); transition: color .2s, padding-left .2s; }
.doc-cat a:hover { color: #fff; padding-left: 6px; }
.doc-cat a::before { content: "›  "; color: var(--violet-soft); }

.no-results { display: none; text-align: center; color: var(--txt-faint); padding: 30px; }
.no-results.show { display: block; }

/* ==========================================================================
   LEGAL PAGES — sticky TOC + long-form document
   ========================================================================== */
.legal-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 50px; align-items: start; }
.legal-toc { position: sticky; top: 100px; display: grid; gap: 4px; }
.legal-toc a { padding: 10px 16px; border-radius: 10px; color: var(--txt-dim); font-size: .94rem; border-left: 2px solid transparent; transition: .25s; }
.legal-toc a:hover { color: #fff; background: var(--glass); }
.legal-toc a.active { color: #fff; background: var(--glass-2); border-left-color: var(--violet); }
.legal-toc .updated { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); color: var(--txt-faint); font-size: .8rem; }

.legal-doc { max-width: 760px; }
.legal-doc__block { padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.legal-doc__block:last-child { border-bottom: none; }
.legal-doc h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem,3.5vw,2.4rem); letter-spacing: -.01em; margin-bottom: 6px; }
.legal-doc .eff { color: var(--violet-soft); font-size: .86rem; margin-bottom: 24px; }
.legal-doc h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 28px 0 10px; }
.legal-doc p { color: var(--txt-dim); margin-bottom: 14px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 4px; display: grid; gap: 8px; }
.legal-doc li { display: flex; gap: 10px; color: var(--txt-dim); }
.legal-doc li::before { content: "—"; color: var(--violet-soft); flex-shrink: 0; }
.legal-doc a { color: var(--violet-soft); }
.legal-doc strong { color: var(--txt); }
.legal-note { padding: 18px 22px; border-radius: 14px; background: rgba(255,200,80,.08); border: 1px solid rgba(255,200,80,.25); color: #ffce6b; font-size: .9rem; margin-bottom: 30px; }

/* ==========================================================================
   ACCOUNT DASHBOARD (branded WooCommerce My Account)
   ========================================================================== */
.dash { display: grid; grid-template-columns: 270px 1fr; gap: 30px; align-items: start; }

/* Sidebar */
.dash-nav { position: sticky; top: 100px; padding: 24px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); }
.dash-user { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.dash-user .av { width: 52px; height: 52px; border-radius: 50%; background: var(--grad-violet); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.2rem; color: #fff; box-shadow: var(--glow-soft); }
.dash-user b { font-family: var(--f-display); font-weight: 600; display: block; }
.dash-user span { color: var(--txt-faint); font-size: .84rem; }
.dash-nav ul { display: grid; gap: 3px; }
.dash-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; color: var(--txt-dim); font-size: .95rem; font-weight: 500; cursor: pointer; transition: .2s; }
.dash-nav a .ic { width: 20px; text-align: center; }
.dash-nav a:hover { background: var(--glass); color: #fff; }
.dash-nav a.active { background: var(--ink-3); color: #fff; }
.dash-nav a.active .ic { color: var(--violet-soft); }
.dash-nav .logout { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--txt-faint); }

/* Content panes */
.dash-pane { display: none; }
.dash-pane.active { display: block; }
.dash-head { margin-bottom: 26px; }
.dash-head h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.9rem; }
.dash-head p { color: var(--txt-dim); margin-top: 4px; }

/* Stat cards */
.dash-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 30px; }
.dstat { padding: 22px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); }
.dstat .ic { font-size: 1.4rem; }
.dstat b { display: block; font-family: var(--f-display); font-size: 1.7rem; margin-top: 8px; }
.dstat span { color: var(--txt-faint); font-size: .85rem; }

/* Generic dash card / table */
.dash-card { padding: 26px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); margin-bottom: 18px; }
.dash-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 14px; flex-wrap: wrap; }
.dash-card__head h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }

/* License card */
.lic { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--ink-2); margin-bottom: 16px; }
.lic__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lic__app { display: flex; align-items: center; gap: 12px; }
.lic__app .logo { width: 42px; height: 42px; border-radius: 11px; background: var(--grad-violet); display: grid; place-items: center; box-shadow: var(--glow-soft); }
.lic__app b { font-family: var(--f-display); font-weight: 600; }
.lic__app span { color: var(--txt-faint); font-size: .84rem; }
.badge { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }
.badge.ok { background: rgba(67,224,138,.14); color: #6ff0a8; border: 1px solid rgba(67,224,138,.3); }
.badge.warn { background: rgba(255,200,80,.12); color: #ffce6b; border: 1px solid rgba(255,200,80,.3); }
.keyrow { display: flex; align-items: center; gap: 10px; background: var(--ink-0); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px 6px 6px 16px; margin-bottom: 16px; }
.keyrow code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem; letter-spacing: .06em; color: var(--violet-soft); flex: 1; overflow-x: auto; white-space: nowrap; }
.copy-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 9px; background: var(--glass-2); border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; transition: .2s; flex-shrink: 0; }
.copy-btn:hover { background: var(--violet); border-color: var(--violet); }
.copy-btn.copied { background: rgba(67,224,138,.18); border-color: rgba(67,224,138,.4); color: #6ff0a8; }
.lic__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.devices { flex: 1; min-width: 200px; }
.devices__bar { height: 8px; border-radius: 100px; background: var(--ink-3); overflow: hidden; margin-top: 8px; }
.devices__fill { height: 100%; border-radius: 100px; background: var(--grad-violet); }
.devices__label { display: flex; justify-content: space-between; font-size: .84rem; color: var(--txt-dim); }

/* Orders table */
.otable { width: 100%; border-collapse: collapse; }
.otable th, .otable td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.otable th { color: var(--txt-faint); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.otable .badge { font-size: .68rem; }
.otable .badge.proc { background: rgba(139,95,255,.16); color: var(--violet-soft); border: 1px solid rgba(139,95,255,.3); }

/* Order tracking stepper */
.stepper { display: flex; gap: 0; margin: 8px 0 10px; }
.step { flex: 1; text-align: center; position: relative; }
.step::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--violet); }
.step .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 10px; background: var(--ink-2); border: 2px solid var(--line-2); display: grid; place-items: center; font-size: .8rem; }
.step.done .dot { background: var(--violet); border-color: var(--violet); color: #fff; }
.step.current .dot { border-color: var(--violet); color: var(--violet-soft); box-shadow: var(--glow-soft); }
.step span { font-size: .85rem; color: var(--txt-faint); }
.step.done span, .step.current span { color: var(--txt); }

/* Message thread */
.thread { display: grid; gap: 12px; margin-top: 16px; }
.msg { padding: 14px 18px; border-radius: 14px; max-width: 80%; }
.msg.them { background: var(--ink-2); border: 1px solid var(--line); }
.msg.me { background: rgba(107,46,255,.16); border: 1px solid rgba(139,95,255,.3); margin-left: auto; }
.msg .who { font-size: .78rem; color: var(--txt-faint); margin-bottom: 4px; }

/* Ticket list */
.ticket { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); margin-bottom: 10px; flex-wrap: wrap; }
.ticket b { font-family: var(--f-display); font-weight: 500; }
.ticket span { color: var(--txt-faint); font-size: .84rem; }

/* Empty state */
.dash-empty { text-align: center; padding: 50px 20px; color: var(--txt-faint); }
.dash-empty .ic { font-size: 2.4rem; opacity: .6; }

/* ---- Live order chat ---- */
.kd-chat { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; }
.kd-chat__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.kd-presence { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--txt-dim); }
.kd-presence em { font-style: normal; color: var(--txt); font-weight: 600; }
.kd-presence .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--txt-faint); transition: background .3s, box-shadow .3s; }
.kd-presence.online .dot { background: #43e08a; box-shadow: 0 0 10px #43e08a; }
.kd-presence__txt { color: var(--txt-faint); font-size: .82rem; }
.kd-chat__msgs { max-height: 360px; overflow-y: auto; padding: 18px; display: grid; gap: 10px; }
.kd-chat__msgs .msg { padding: 11px 15px; border-radius: 14px; max-width: 82%; font-size: .94rem; }
.kd-chat__msgs .msg p { margin: 0; }
.kd-chat__msgs .msg.them { background: var(--ink-3); border: 1px solid var(--line); }
.kd-chat__msgs .msg.me { background: rgba(107,46,255,.18); border: 1px solid rgba(139,95,255,.3); margin-left: auto; }
.kd-chat__msgs .msg .who { font-size: .74rem; color: var(--txt-faint); margin-bottom: 4px; }
.kd-chat__msgs .msg a { color: var(--violet-soft); text-decoration: underline; }
.kd-chat__empty { color: var(--txt-faint); text-align: center; font-size: .92rem; padding: 14px; }
/* typing indicator */
.kd-chat__typing { display: flex; align-items: center; gap: 5px; padding: 4px 18px 10px; color: var(--txt-faint); font-size: .82rem; }
.kd-chat__typing span:not(:last-of-type), .kd-chat__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-soft); display: inline-block; animation: kdblink 1.2s infinite; }
.kd-chat__typing span:nth-child(2) { animation-delay: .2s; }
.kd-chat__typing span:nth-child(3) { animation-delay: .4s; }
@keyframes kdblink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
/* input bar */
.kd-chat__input { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.kd-chat__file { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line-2); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; transition: border-color .25s, background .25s; }
.kd-chat__file:hover { border-color: var(--violet); background: var(--glass); }
.kd-chat__file input { display: none; }
.kd-chat__input textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 11px 14px; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line-2); color: var(--txt); font-family: inherit; font-size: .95rem; }
.kd-chat__input textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(107,46,255,.18); }
.kd-chat__send { width: 42px; height: 42px; flex-shrink: 0; padding: 0; justify-content: center; font-size: 1.1rem; }
.kd-chat__send:disabled { opacity: .5; }
.kd-chat__file-name { padding: 0 14px 12px; color: var(--violet-soft); font-size: .84rem; }

/* ---- Bridge: make real WooCommerce My Account markup use the dash layout ---- */
.woocommerce-account .woocommerce {
  display: grid; grid-template-columns: 270px 1fr; gap: 30px; align-items: start;
  width: min(100% - 40px, var(--maxw)); margin: 130px auto 80px;
}
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
/* Style WooCommerce's default tables/buttons to match the brand */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  width: 100%; border-collapse: collapse; background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; color: var(--txt-dim);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th { color: var(--txt-faint); font-weight: 500; }
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 100px;
  background: var(--grad-violet); color: #fff; font-weight: 600; box-shadow: var(--glow-soft);
}
.woocommerce-account form .input-text,
.woocommerce-account form select {
  width: 100%; padding: 13px 16px; border-radius: 12px; background: var(--ink-0);
  border: 1px solid var(--line-2); color: var(--txt); font-family: inherit;
}
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 { font-family: var(--f-display); font-weight: 600; margin-bottom: 14px; }
@media (max-width: 860px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; margin-top: 110px; }
}

/* ---- Premium styling for default WooCommerce account sub-pages ---- */
/* Notices */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
  background: var(--glass-2); border: 1px solid var(--line-2); border-left: 3px solid var(--violet);
  color: var(--txt); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; list-style: none;
}
.woocommerce-account .woocommerce-error { border-left-color: #ff6b6b; }
.woocommerce-account .woocommerce-message { border-left-color: #43e08a; }
/* Order/download tables get the dash look */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-downloads,
.woocommerce-account .shop_table { border-radius: var(--radius); overflow: hidden; }
.woocommerce-account .woocommerce-orders-table__cell,
.woocommerce-account .shop_table td,
.woocommerce-account .shop_table th { vertical-align: middle; }
.woocommerce-account .woocommerce-orders-table__cell a,
.woocommerce-account .shop_table a { color: var(--violet-soft); }
/* Status pills */
.woocommerce-account .order-status,
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 100px; font-size: .78rem;
  font-weight: 600; background: rgba(139,95,255,.16); color: var(--violet-soft); border: 1px solid rgba(139,95,255,.3);
}
.woocommerce-account .status-completed { background: rgba(67,224,138,.14); color: #6ff0a8; border-color: rgba(67,224,138,.3); }
.woocommerce-account .status-processing { background: rgba(255,200,80,.12); color: #ffce6b; border-color: rgba(255,200,80,.3); }
/* The .button used as actions */
.woocommerce-account .woocommerce-button.button,
.woocommerce-account .woocommerce-Button.button { padding: 9px 16px; font-size: .85rem; }
.woocommerce-account .button.view { background: var(--glass-2); color: var(--txt); border: 1px solid var(--line-2); box-shadow: none; }
.woocommerce-account .button.view:hover { border-color: var(--violet); }
/* Addresses */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.woocommerce-account .woocommerce-Address { padding: 24px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); }
.woocommerce-account .woocommerce-Address-title h3 { font-family: var(--f-display); margin-bottom: 10px; }
.woocommerce-account .woocommerce-Address address { color: var(--txt-dim); font-style: normal; line-height: 1.7; }
.woocommerce-account .edit { color: var(--violet-soft); }
/* Edit-account / address forms */
.woocommerce-account form .woocommerce-form-row,
.woocommerce-account .form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.woocommerce-account form label { color: var(--txt-dim); font-size: .9rem; font-weight: 500; }
.woocommerce-account fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-top: 18px; }
.woocommerce-account fieldset legend { font-family: var(--f-display); font-weight: 600; padding: 0 8px; }
.woocommerce-account .woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; margin-top: 18px; }
.woocommerce-account .woocommerce-pagination a,
.woocommerce-account .woocommerce-pagination span { display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); }
.woocommerce-account .woocommerce-pagination .current { background: var(--violet); color: #fff; border-color: var(--violet); }

@media (max-width: 640px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } }

/* CV / résumé full-screen PDF viewer */
.cv-viewer { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--ink-2); }
.cv-viewer iframe { width: 100%; height: 82vh; min-height: 520px; border: 0; display: block; }
.cv-viewer__fs { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 9px 16px; border-radius: 100px; background: var(--nav-bg); backdrop-filter: blur(10px); border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; color: var(--txt); }
.cv-viewer__fs:hover { border-color: var(--violet); color: var(--violet-soft); }
.cv-viewer:fullscreen { background: #1a1530; }
.cv-viewer:fullscreen iframe { height: 100vh; }

/* Coming-soon apps: blur text + thumbnail (only LayerFlow is live) */
.appc.is-soon { pointer-events: none; }
.appc.is-soon:hover { transform: none; box-shadow: none; }
.appc.is-soon .appc__shot .ph,
.appc.is-soon .appc__shot img { filter: blur(8px) saturate(.55); transform: scale(1.06); }
.appc.is-soon .appc__body { filter: blur(3px); opacity: .55; user-select: none; }
.appc.is-soon .appc__status { pointer-events: auto; } /* keep the date badge readable */

/* Editable client logos (image variant) */
.marquee__track .logo--img { display: inline-flex; align-items: center; }
.marquee__track .logo--img img { height: 34px; width: auto; object-fit: contain; opacity: .65; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.marquee__track .logo--img:hover img { opacity: 1; filter: none; }

/* Interactive cursor-follow background glow (desktop) */
.cursor-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background: radial-gradient(460px circle at var(--cx, 50%) var(--cy, 30%), rgba(139,95,255,.12), transparent 62%);
  transition: opacity .4s ease;
}
html[data-theme="light"] .cursor-glow { background: radial-gradient(460px circle at var(--cx,50%) var(--cy,30%), rgba(107,46,255,.10), transparent 62%); }

/* ==========================================================================
   LOGIN / REGISTER (auth)
   ========================================================================== */
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); min-height: 600px; }

/* Left brand panel */
.auth__brand { position: relative; overflow: hidden; padding: clamp(36px,4vw,56px); background: linear-gradient(160deg, #2A1A66, #16122A 60%, #0D0D1A); display: flex; flex-direction: column; justify-content: space-between; }
.auth__brand .glow-blob { width: 380px; height: 380px; background: var(--violet); top: -120px; right: -100px; opacity: .5; }
.auth__brand .brand { font-size: 1.4rem; position: relative; z-index: 1; }
.auth__brand h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem,3vw,2.2rem); line-height: 1.1; margin: 30px 0 14px; position: relative; z-index: 1; color: #fff; }
.auth__brand p { color: rgba(236,234,246,.7); position: relative; z-index: 1; max-width: 36ch; }
.auth__perks { display: grid; gap: 14px; margin-top: 30px; position: relative; z-index: 1; }
.auth__perks li { display: flex; gap: 12px; color: rgba(236,234,246,.85); font-size: .96rem; }
.auth__perks .tick { width: 26px; height: 26px; border-radius: 50%; background: rgba(139,95,255,.25); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; font-size: .8rem; }
.auth__brand .quote { position: relative; z-index: 1; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(236,234,246,.8); font-size: .94rem; }

/* Right form panel */
.auth__form { padding: clamp(34px,4vw,56px); background: var(--ink-1); display: flex; flex-direction: column; justify-content: center; }
.auth__form h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; margin-bottom: 6px; }
.auth__form > p { color: var(--txt-dim); margin-bottom: 24px; }
.auth__form .seg { width: 100%; margin-bottom: 26px; }
.auth__form .seg button { flex: 1; }
.auth .field { margin-bottom: 16px; }
.auth__row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 20px; font-size: .9rem; flex-wrap: wrap; gap: 8px; }
.auth__row label { display: flex; align-items: center; gap: 8px; color: var(--txt-dim); cursor: pointer; }
.auth__row a { color: var(--violet-soft); }
.auth__social { display: grid; gap: 10px; margin-top: 18px; }
.auth__divider { text-align: center; color: var(--txt-faint); font-size: .84rem; margin: 22px 0 16px; position: relative; }
.auth__divider::before, .auth__divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--line); }
.auth__divider::before { left: 0; } .auth__divider::after { right: 0; }
.auth__switch { text-align: center; margin-top: 20px; color: var(--txt-dim); font-size: .92rem; }
.auth__switch a { color: var(--violet-soft); font-weight: 600; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .about__wrap, .app-feat__wrap, .bio { grid-template-columns: 1fr; }
  .cards, .portfolio-grid, .stats__grid, .offer { grid-template-columns: repeat(2,1fr); }
  .tst__card { min-width: calc(100% - 0px); }
  .footer__grid, .facts { grid-template-columns: 1fr 1fr; }
  .process, .appstats, .videos, .specs { grid-template-columns: repeat(2,1fr); }
  .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .form-wrap { grid-template-columns: 1fr; }
  .order-side { position: static; }
  .feature { grid-template-columns: 1fr; }
  .feature.flip .feature__text { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__brand { display: none; }
  .dash { grid-template-columns: 1fr; }
  .dash-nav { position: static; }
  .dash-stats { grid-template-columns: repeat(2,1fr); }
  .legal-wrap { grid-template-columns: 1fr; }
  .legal-toc { position: static; display: flex; flex-wrap: wrap; }
  .masonry { columns: 2; }
  .feat-tut { grid-template-columns: 1fr; }
  .tips { grid-template-columns: repeat(2,1fr); }
  .doc-cats { grid-template-columns: repeat(2,1fr); }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-result { grid-template-columns: 1fr; }
  .lightbox__nav.prev { left: 8px; }
  .lightbox__nav.next { right: 8px; }
}
/* Bottom mobile nav takes over on phones + tablets (below 820px) */
@media (max-width: 820px) {
  .nav__links, .nav__burger { display: none; }
  .nav__cta .btn { display: none; }      /* keep only the theme toggle in the top pill */
  .nav__inner { padding: 8px 12px 8px 18px; }
  .mobnav { display: flex; }
  body { padding-bottom: 90px; }          /* room for the floating bottom nav */
}
@media (max-width: 640px) {
  .cards, .portfolio-grid, .stats__grid, .footer__grid, .skills, .offer, .svc-grid, .process, .form-grid, .app-grid, .appstats, .videos, .specs { grid-template-columns: 1fr; }
  .cl-item { grid-template-columns: 1fr; gap: 10px; }
  .masonry { columns: 1; }
  .tips { grid-template-columns: 1fr; }
  .doc-cats { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: 1fr; }
  .step span { font-size: .72rem; }
  .cs-meta, .cs-gallery { grid-template-columns: 1fr; }
  .prow, .prow__head { grid-template-columns: 1fr; gap: 8px; }
  .prow__head { display: none; }
  .prow__turn { color: var(--txt-faint); }
  .hero { padding-top: 150px; }
  .about__mini { gap: 20px; }
}

/* ==========================================================================
   V1 LAUNCH — HOME ("The Search" hero, intro, product card, contact strip)
   ========================================================================== */

/* ---------- Hero ---------- */
.fhero { position: relative; padding: 200px 0 130px; overflow: hidden; min-height: 92vh; display: flex; align-items: center; }
.fhero .hero__grid { position: absolute; inset: 0; z-index: 0; opacity: .4;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%); }
.fhero .glow-blob.a { width: 560px; height: 560px; background: var(--violet); top: -180px; right: -120px; }
.fhero .glow-blob.b { width: 420px; height: 420px; background: #4A1FCC; bottom: -160px; left: -100px; opacity: .35; }
.fhero__inner { position: relative; z-index: 3; text-align: center; max-width: 880px; margin-inline: auto; width: 100%; }
.fhero__h1 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(2.7rem, 7.2vw, 5.6rem); margin-bottom: 34px;
}
.fhero__line { display: block; }
.fhero__line--b { padding-bottom: .08em; /* keep gradient descenders un-clipped */ }
.fhero__badge { margin-bottom: 30px; }
.fhero__cta { margin-top: 34px; }
.fhero__scroll { margin-top: 56px; }

/* Floating glass file chips */
.fhero__scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fchip {
  position: absolute; left: var(--x); top: var(--y);
  will-change: transform; transform: translate3d(0,0,0);
}
.fchip__card {
  display: grid; gap: 3px; padding: 14px 18px; border-radius: 16px; min-width: 190px;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12), 0 0 34px rgba(107,46,255,.10);
  animation: chipDrift var(--dur, 10s) ease-in-out var(--d, 0s) infinite alternate;
}
html[data-theme="light"] .fchip__card {
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow: 0 18px 44px rgba(80,60,160,.16), inset 0 1px 0 rgba(255,255,255,.8), 0 0 34px rgba(107,46,255,.08);
}
.fchip__ext {
  justify-self: start; font-family: var(--f-display); font-weight: 600; font-size: .68rem; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 7px; color: #fff;
}
.ext-psd { background: rgba(49,168,255,.22);  color: #6cc4ff; border: 1px solid rgba(49,168,255,.4); }
.ext-ai  { background: rgba(255,154,0,.18);   color: #ffb54d; border: 1px solid rgba(255,154,0,.4); }
.ext-jpg { background: rgba(67,224,138,.16);  color: #6ff0a8; border: 1px solid rgba(67,224,138,.4); }
.ext-pdf { background: rgba(255,107,107,.16); color: #ff9a9a; border: 1px solid rgba(255,107,107,.4); }
.ext-mp4 { background: rgba(139,95,255,.2);   color: var(--violet-soft); border: 1px solid rgba(139,95,255,.45); }
.ext-fig { background: rgba(255,255,255,.1);  color: var(--txt-dim); border: 1px solid var(--line-2); }
html[data-theme="light"] .ext-psd { color: #1272b8; } html[data-theme="light"] .ext-ai { color: #b56a00; }
html[data-theme="light"] .ext-jpg { color: #1d9457; } html[data-theme="light"] .ext-pdf { color: #c74848; }
html[data-theme="light"] .ext-fig { color: var(--txt-dim); }
.fchip__name { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; color: var(--txt); white-space: nowrap; }
.fchip__meta { font-size: .72rem; color: var(--txt-faint); }
.fchip--far { opacity: .55; filter: blur(1.5px); transform: scale(.85); }
@keyframes chipDrift {
  from { translate: 0 -10px; rotate: -1.2deg; }
  to   { translate: 0  14px; rotate:  1.2deg; }
}

/* Glowing search-bar visual */
.fsearch { max-width: 560px; margin: 0 auto; position: relative; }
.fsearch__bar {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 100px;
  background: var(--nav-bg); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(139,95,255,.45); text-align: left;
  box-shadow: 0 14px 44px rgba(0,0,0,.4), 0 0 44px rgba(107,46,255,.28), inset 0 1px 0 rgba(255,255,255,.1);
  animation: searchGlow 3.2s ease-in-out infinite alternate;
}
html[data-theme="light"] .fsearch__bar { box-shadow: 0 14px 44px rgba(80,60,160,.16), 0 0 44px rgba(107,46,255,.2), inset 0 1px 0 rgba(255,255,255,.85); }
@keyframes searchGlow {
  from { box-shadow: 0 14px 44px rgba(0,0,0,.4), 0 0 30px rgba(107,46,255,.2), inset 0 1px 0 rgba(255,255,255,.1); }
  to   { box-shadow: 0 14px 44px rgba(0,0,0,.4), 0 0 58px rgba(107,46,255,.4), inset 0 1px 0 rgba(255,255,255,.1); }
}
.fsearch__ic { color: var(--violet-soft); font-size: 1.25rem; flex-shrink: 0; }
.fsearch__text { flex: 1; min-width: 0; font-size: .98rem; color: var(--txt); white-space: nowrap; overflow: hidden; }
.fsearch__caret { display: inline-block; width: 2px; height: 1.05em; background: var(--violet-soft); vertical-align: text-bottom; margin-left: 2px; animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.fsearch__kbd { flex-shrink: 0; font-size: .74rem; color: var(--txt-faint); border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 8px; }
.fsearch__result {
  display: flex; align-items: center; gap: 10px; margin: 12px auto 0; padding: 11px 16px; border-radius: 14px;
  max-width: 470px; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
html[data-theme="light"] .fsearch__result { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); box-shadow: 0 10px 30px rgba(80,60,160,.12); }
.fsearch__ext { font-family: var(--f-display); font-weight: 600; font-size: .66rem; letter-spacing: .1em; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.fsearch__file { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86rem; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsearch__time { flex-shrink: 0; font-size: .78rem; font-weight: 600; color: #6ff0a8; }
html[data-theme="light"] .fsearch__time { color: #1d9457; }
/* JS toggles this while retyping */
.fsearch__result { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.fsearch__result.is-hidden { opacity: 0; transform: translateY(8px); }

/* Scanning sweep on primary buttons */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: none; pointer-events: none;
}
.btn-primary:hover::after { animation: btnScan .7s var(--ease); }
@keyframes btnScan { to { left: 120%; } }

/* ---------- Intro ---------- */
.intro__wrap { text-align: center; max-width: 780px; }
.intro__text { margin: 22px auto 0; }
.intro__cta { margin-top: 32px; }

/* ---------- Product card ---------- */
.prodwrap { padding-top: 0; }
.prodcard {
  position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,4vw,60px); align-items: center;
  padding: clamp(36px,5vw,64px); border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
html[data-theme="light"] .prodcard { background: linear-gradient(160deg, #FFFFFF, #F5F2FD); }
.prodcard__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--violet); filter: blur(110px); opacity: .18; top: -220px; right: -160px; pointer-events: none; }
.prodcard__body { position: relative; z-index: 1; }
.prodcard__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem,4vw,3rem); letter-spacing: -.02em; margin-top: 16px; }
.prodcard__tag { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem,2.6vw,1.7rem); margin: 6px 0 16px; }
.prodcard__desc { color: var(--txt-dim); max-width: 52ch; }
.prodcard__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.prodcard__note { font-size: .88rem; color: var(--txt-faint); }
.prodcard__visual { position: relative; z-index: 1; }
.prodmini { position: relative; display: grid; gap: 10px; padding: 22px; border-radius: var(--radius); background: var(--ink-0); border: 1px solid var(--line-2); overflow: hidden; }
html[data-theme="light"] .prodmini { background: #F3F1FB; }
.prodmini__row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; color: var(--txt); }
.prodmini__row--dim { opacity: .45; }
.prodmini__row--hit { border-color: rgba(139,95,255,.55); background: rgba(107,46,255,.1); box-shadow: 0 0 24px rgba(107,46,255,.18); }
.prodmini__row--hit b { margin-left: auto; color: #6ff0a8; font-size: .74rem; font-family: var(--f-body); }
html[data-theme="light"] .prodmini__row--hit b { color: #1d9457; }
.prodmini__scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--violet-2), transparent); box-shadow: 0 0 14px var(--violet-2); animation: miniScan 3s ease-in-out infinite; }
@keyframes miniScan { 0% { top: 8%; } 50% { top: 92%; } 100% { top: 8%; } }

/* ---------- About line + contact strip ---------- */
.strip { overflow: hidden; }
.strip .glow-blob { width: 560px; height: 560px; background: var(--violet); top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .18; }
.strip__inner { position: relative; z-index: 1; text-align: center; }
.strip__line { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(1.9rem,4.4vw,3.2rem); max-width: 20ch; margin-inline: auto; }
.strip__sub { color: var(--txt-dim); margin: 16px 0 30px; }
.strip__links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.strip__pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 100px;
  background: var(--glass-2); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
  font-weight: 600; font-size: .95rem; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.strip__pill:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--glow-soft); }

/* ---------- Home responsive ---------- */
@media (max-width: 980px) {
  .prodcard { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  /* Fewer, smaller chips on touch — parallax off, drift stays */
  .fchip__card { min-width: 0; padding: 10px 13px; }
  .fchip__name { font-size: .68rem; }
  .fchip__meta { display: none; }
  .fchip--far { display: none; }
}
@media (max-width: 640px) {
  .fhero { padding: 150px 0 90px; min-height: 0; }
  .fsearch__kbd { display: none; }
  .fsearch__bar { padding: 13px 16px; }
}

/* ==========================================================================
   V1 LAUNCH — HOME hero (designer identity + rotating roles + craft cards)
   ========================================================================== */
.chero { position: relative; padding: 200px 0 130px; overflow: hidden; min-height: 92vh; display: flex; align-items: center; }
.chero .hero__grid { position: absolute; inset: 0; z-index: 0; opacity: .4;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%); }
.chero .glow-blob.a { width: 560px; height: 560px; background: var(--violet); top: -180px; right: -120px; }
.chero .glow-blob.b { width: 420px; height: 420px; background: #4A1FCC; bottom: -160px; left: -100px; opacity: .35; }
.chero__inner { text-align: center; }
.chero__h1 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.04;
  font-size: clamp(2.6rem, 6.8vw, 5.2rem); margin-bottom: 22px;
}
.chero__line1, .chero__line2 { display: block; }
.chero__line2 { padding-bottom: .08em; }
.chero__sub { font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--txt-dim); max-width: 58ch; margin: 0 auto 6px; }

/* Rotating role word */
.rot { display: inline-grid; text-align: left; vertical-align: baseline; }
.rot__word {
  grid-area: 1 / 1; font-weight: inherit; white-space: nowrap;
  opacity: 0; transform: translateY(.6em); filter: blur(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rot__word.is-on { opacity: 1; transform: none; filter: none; }
.rot__word.is-off { opacity: 0; transform: translateY(-.6em); filter: blur(6px); }
.rot__dot { font-style: normal; color: var(--violet); -webkit-text-fill-color: var(--violet); }

/* Craft cards (skills floating in the hero scene) */
.kcard { min-width: 168px; }
.kcard__ico {
  justify-self: start; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  margin-bottom: 4px; border: 1px solid var(--line-2);
}
.kcard__ico--brand   { color: #ffb54d; background: rgba(255,154,0,.14); }
.kcard__ico--motion  { color: #6cc4ff; background: rgba(49,168,255,.14); }
.kcard__ico--video   { color: #6ff0a8; background: rgba(67,224,138,.13); }
.kcard__ico--graphic { color: #ff9a9a; background: rgba(255,107,107,.13); }
.kcard__ico--app     { color: var(--violet-soft); background: rgba(139,95,255,.16); }
html[data-theme="light"] .kcard__ico--brand   { color: #b56a00; }
html[data-theme="light"] .kcard__ico--motion  { color: #1272b8; }
html[data-theme="light"] .kcard__ico--video   { color: #1d9457; }
html[data-theme="light"] .kcard__ico--graphic { color: #c74848; }
.kcard__title { font-family: var(--f-display); font-weight: 600; font-size: .92rem; color: var(--txt); white-space: nowrap; }
.kcard__num { font-size: 1.5rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kcard__meta { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--txt-faint); white-space: nowrap; }
.kcard__meta .pulse { width: 7px; height: 7px; border-radius: 50%; background: #43e08a; box-shadow: 0 0 8px #43e08a; }
.kcard .sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.kcard .sw-a { background: #8B5FFF; } .kcard .sw-b { background: #43e08a; } .kcard .sw-c { background: #ffb54d; }
.kcard--app { border-color: rgba(139,95,255,.5); box-shadow: 0 18px 44px rgba(0,0,0,.35), 0 0 40px rgba(107,46,255,.28), inset 0 1px 0 rgba(255,255,255,.12); }

/* ==========================================================================
   V1 LAUNCH — NAV refinements (mobile: no top "white bar", bottom bar rules)
   ========================================================================== */
.brand .dot svg { display: block; }
.mobnav a .ico svg { display: block; }
@media (max-width: 820px) {
  /* Collapse the top pill into a floating brand chip + round theme toggle. */
  .nav__inner {
    background: transparent; border: none; box-shadow: none; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
  }
  .nav__inner::before { display: none; }
  .brand {
    padding: 9px 16px; border-radius: 100px; font-size: 1.05rem;
    background: var(--nav-bg); border: 1px solid var(--line-2); box-shadow: var(--nav-shadow);
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .nav__cta .theme-toggle {
    background: var(--nav-bg); box-shadow: var(--nav-shadow);
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  /* Hide the top bar when scrolling down — the bottom bar is the nav. */
  .nav.hide-mob { transform: translateY(-120%); }
  .nav { transition: top .4s var(--ease), transform .45s var(--ease); }
}

/* ==========================================================================
   V1 LAUNCH — LAYERFLOW page
   ========================================================================== */
.fhero--lf { min-height: 88vh; }
.fhero__sub { font-size: clamp(1rem, 2.2vw, 1.3rem); color: var(--txt-dim); max-width: 56ch; margin: 0 auto 30px; }
.fhero__os { display: block; margin-top: 18px; color: var(--txt-faint); font-size: .86rem; }
.fhero__badge .dot-mark { display: inline-grid; place-items: center; color: var(--violet-soft); }
.fsearch__ic { display: grid; place-items: center; }

/* Demo video frame */
.lf-demo__frame {
  position: relative; max-width: 940px; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--shadow), var(--glow-soft); aspect-ratio: 16/9; background: var(--ink-2);
}
.lf-demo__frame video, .lf-demo__frame .ph { width: 100%; height: 100%; object-fit: cover; }

/* Problem section */
.lf-problem { background: var(--ink-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lf-problem__inner { text-align: center; max-width: 780px; }
.lf-problem__stats { display: flex; justify-content: center; gap: clamp(24px,5vw,64px); flex-wrap: wrap; margin-top: 40px; }
.lf-problem__stats b { display: block; font-family: var(--f-display); font-size: clamp(1.6rem,3.4vw,2.4rem); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lf-problem__stats span { color: var(--txt-faint); font-size: .88rem; }

/* Living feature cards */
.lff { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lff__card {
  position: relative; padding: 26px 26px 30px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line);
  backdrop-filter: blur(8px); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.lff__card:hover { transform: translateY(-6px); border-color: rgba(139,95,255,.45); box-shadow: var(--glow-soft); }
.lff__card h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.22rem; margin: 20px 0 8px; display: flex; align-items: center; gap: 10px; }
.lff__ico { font-size: 1.05rem; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--ink-3); border: 1px solid var(--line); display: grid; place-items: center; }
.lff__card p { color: var(--txt-dim); font-size: .96rem; }
.lff__card--wide { grid-column: 1 / -1; }
.lff__card--hero { border-color: rgba(139,95,255,.4); background: linear-gradient(160deg, rgba(107,46,255,.12), rgba(139,95,255,.03)); }
.lff__wide-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px,4vw,50px); align-items: center; }
.lff__wide-grid h3 { margin-top: 16px; }

/* Shared stage (the little animation theater on each card) */
.lff__stage {
  position: relative; height: 150px; border-radius: 14px; overflow: hidden;
  background: var(--ink-0); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
html[data-theme="light"] .lff__stage { background: #F3F1FB; }

/* 1 · Visual source search: image → scan → PSD found */
.anim-vsearch .vs__img { position: relative; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(135deg, #6B2EFF, #31A8FF 70%, #43e08a); }
.anim-vsearch .vs__scan { position: absolute; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.9); box-shadow: 0 0 14px #fff, 0 0 30px var(--violet-2); animation: vsScan 3.6s ease-in-out infinite; }
@keyframes vsScan { 0%,10% { top: 0; opacity: 0; } 15% { opacity: 1; } 45% { top: calc(100% - 3px); opacity: 1; } 55%,100% { top: calc(100% - 3px); opacity: 0; } }
.anim-vsearch .vs__arrow { color: var(--txt-faint); font-size: 1.2rem; }
.anim-vsearch .vs__found {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: .82rem; color: var(--txt);
  border: 1px solid rgba(49,168,255,.45); background: rgba(49,168,255,.08); box-shadow: 0 0 22px rgba(49,168,255,.18);
  animation: vsFound 3.6s ease-in-out infinite;
}
@keyframes vsFound { 0%,50% { opacity: 0; transform: scale(.9); } 62%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }

/* 2 · Screenshot → video finder (killer feature) */
.anim-vfind { height: 190px; flex-direction: row; gap: 18px; padding: 18px; }
.vf__shot { position: relative; width: 92px; height: 66px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--line-2); background: linear-gradient(135deg, #1E1838, #4A1FCC 60%, #8B5FFF); box-shadow: 0 0 20px rgba(107,46,255,.25); }
.vf__shotlabel { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--txt-faint); font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.vf__timeline { flex: 1; min-width: 0; }
.vf__status { display: block; font-size: .8rem; margin-bottom: 10px; height: 1.2em; position: relative; }
.vf__status em { font-style: normal; position: absolute; left: 0; top: 0; white-space: nowrap; }
.vf__searching { color: var(--txt-dim); animation: vfSearching 6s ease-in-out infinite; }
.vf__foundmsg { color: #6ff0a8; font-weight: 600; opacity: 0; animation: vfFoundMsg 6s ease-in-out infinite; }
html[data-theme="light"] .vf__foundmsg { color: #1d9457; }
@keyframes vfSearching { 0%,55% { opacity: 1; } 62%,95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vfFoundMsg  { 0%,58% { opacity: 0; transform: translateY(4px); } 65%,92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.vf__track { position: relative; display: flex; gap: 4px; height: 34px; border-radius: 9px; overflow: hidden; }
.vf__clip { width: var(--w); height: 100%; border-radius: 6px; background: var(--ink-3); border: 1px solid var(--line); }
.vf__head { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px var(--violet-2); animation: vfSeek 6s ease-in-out infinite; }
@keyframes vfSeek {
  0%   { left: 0; opacity: 0; }
  6%   { opacity: 1; }
  20%  { left: 38%; }
  34%  { left: 12%; }
  52%  { left: 71%; }
  60%,92% { left: 71%; opacity: 1; }
  100% { left: 71%; opacity: 0; }
}
.vf__match { position: absolute; top: 0; bottom: 0; left: 66%; width: 10%; border-radius: 6px; border: 1.5px solid var(--violet-2); background: rgba(139,95,255,.25); box-shadow: 0 0 18px rgba(139,95,255,.5); opacity: 0; animation: vfMatch 6s ease-in-out infinite; }
@keyframes vfMatch { 0%,55% { opacity: 0; } 62%,92% { opacity: 1; } 100% { opacity: 0; } }
.vf__file { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--txt-dim); }
.vf__file b { color: var(--violet-soft); font-family: inherit; }

/* 3 · PDF workspace: pages split → merge → compress */
.anim-pdf { gap: 0; }
.pdfp { position: absolute; width: 44px; height: 58px; border-radius: 7px; background: linear-gradient(160deg, #fff, #d9d2f0); border: 1px solid var(--line-2); box-shadow: 0 8px 20px rgba(0,0,0,.3); left: 50%; top: 50%; }
html[data-theme="light"] .pdfp { background: linear-gradient(160deg, #fff, #ece7fb); box-shadow: 0 8px 20px rgba(80,60,160,.18); }
.pdfp::before { content: ""; position: absolute; inset: 10px 8px auto; height: 4px; border-radius: 2px; background: rgba(107,46,255,.4); box-shadow: 0 9px 0 rgba(107,46,255,.22), 0 18px 0 rgba(107,46,255,.22); }
.pdfp--a { animation: pdfA 7s ease-in-out infinite; }
.pdfp--b { animation: pdfB 7s ease-in-out infinite; }
.pdfp--c { animation: pdfC 7s ease-in-out infinite; }
@keyframes pdfA {
  0%,8%   { transform: translate(-50%,-50%) rotate(0); }
  22%,36% { transform: translate(-135%,-50%) rotate(-8deg); }   /* split */
  50%,64% { transform: translate(-50%,-50%) rotate(-3deg); }    /* merge */
  76%,92% { transform: translate(-50%,-50%) rotate(-3deg) scale(.72); } /* compress */
  100%    { transform: translate(-50%,-50%) rotate(0); }
}
@keyframes pdfB {
  0%,8%   { transform: translate(-50%,-50%); }
  22%,36% { transform: translate(-50%,-50%); }
  50%,64% { transform: translate(-50%,-50%); }
  76%,92% { transform: translate(-50%,-50%) scale(.72); }
  100%    { transform: translate(-50%,-50%); }
}
@keyframes pdfC {
  0%,8%   { transform: translate(-50%,-50%) rotate(0); }
  22%,36% { transform: translate(35%,-50%) rotate(8deg); }
  50%,64% { transform: translate(-50%,-50%) rotate(3deg); }
  76%,92% { transform: translate(-50%,-50%) rotate(3deg) scale(.72); }
  100%    { transform: translate(-50%,-50%) rotate(0); }
}
.pdf__label { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: .76rem; height: 1.2em; }
.pdf__label em { font-style: normal; position: absolute; left: 0; right: 0; opacity: 0; color: var(--txt-faint); }
.pdf__label .l-split    { animation: pdfL1 7s ease-in-out infinite; }
.pdf__label .l-merge    { animation: pdfL2 7s ease-in-out infinite; }
.pdf__label .l-compress { animation: pdfL3 7s ease-in-out infinite; color: var(--violet-soft); }
@keyframes pdfL1 { 18%,38% { opacity: 1; } 0%,14%,44%,100% { opacity: 0; } }
@keyframes pdfL2 { 48%,66% { opacity: 1; } 0%,44%,72%,100% { opacity: 0; } }
@keyframes pdfL3 { 76%,94% { opacity: 1; } 0%,72%,100% { opacity: 0; } }

/* 4 · OCR: doc scan → text lines extracted */
.anim-ocr { gap: 18px; }
.ocr__doc { position: relative; width: 70px; height: 88px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(160deg, #f5f2ea, #e4ddca); }
.ocr__doclabel { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: .58rem; color: #7a7260; font-family: ui-monospace, Menlo, monospace; }
.ocr__scan { position: absolute; left: 0; right: 0; height: 3px; background: var(--violet-2); box-shadow: 0 0 12px var(--violet-2); animation: ocrScan 5s ease-in-out infinite; }
@keyframes ocrScan { 0%,6% { top: 0; opacity: 0; } 10% { opacity: 1; } 46% { top: calc(100% - 3px); opacity: 1; } 54%,100% { top: calc(100% - 3px); opacity: 0; } }
.ocr__out { display: grid; gap: 8px; width: 44%; }
.ocr__line { display: block; height: 7px; border-radius: 4px; background: var(--ink-3); position: relative; overflow: hidden; }
.ocr__line::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 4px; background: var(--grad-violet); transform: scaleX(0); transform-origin: left; animation: ocrLine 5s ease-in-out infinite; }
.ocr__line:nth-child(2)::after { animation-delay: .18s; }
.ocr__line:nth-child(3)::after { animation-delay: .36s; }
@keyframes ocrLine { 0%,48% { transform: scaleX(0); } 62%,94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.ocr__done { font-size: .74rem; color: #6ff0a8; font-weight: 600; opacity: 0; animation: ocrDone 5s ease-in-out infinite; }
html[data-theme="light"] .ocr__done { color: #1d9457; }
@keyframes ocrDone { 0%,64% { opacity: 0; } 72%,94% { opacity: 1; } 100% { opacity: 0; } }

/* 5 · Creative tools: tiles pulse in sequence */
.anim-tools { gap: 12px; }
.tool-tile {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.1rem; color: var(--txt-dim);
  background: var(--ink-3); border: 1px solid var(--line);
  animation: toolPulse 4s ease-in-out calc(var(--i) * .5s) infinite;
}
@keyframes toolPulse {
  0%, 24%, 100% { transform: none; border-color: var(--line); color: var(--txt-dim); box-shadow: none; }
  10% { transform: translateY(-6px) scale(1.08); border-color: var(--violet); color: var(--violet-soft); box-shadow: 0 0 22px rgba(107,46,255,.35); }
}

/* 6 · Offline first: device pulses, cloud crossed out */
.anim-offline { gap: 26px; }
.off__device { position: relative; width: 64px; height: 64px; border-radius: 17px; display: grid; place-items: center; color: var(--violet-soft); background: rgba(139,95,255,.12); border: 1px solid rgba(139,95,255,.4); }
.off__ring { position: absolute; inset: -1px; border-radius: 17px; border: 1px solid var(--violet-2); opacity: 0; animation: offRing 3s ease-out infinite; }
.off__ring--2 { animation-delay: 1.5s; }
@keyframes offRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.off__cloud { position: relative; font-size: 1.7rem; color: var(--txt-faint); opacity: .55; }
.off__cloud i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: #ff9a9a; font-size: 1rem; font-weight: 700; }
.off__label { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: .74rem; color: var(--txt-faint); }

/* Who it's for */
.who { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.who__chip {
  text-align: center; padding: 24px 14px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .3s;
}
.who__chip:hover { transform: translateY(-4px); border-color: var(--violet); }
.who__ico { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--line); font-size: 1.1rem; }
.who__chip b { display: block; font-family: var(--f-display); font-weight: 600; font-size: .98rem; }
.who__chip span:last-child { display: block; color: var(--txt-faint); font-size: .8rem; margin-top: 4px; }

/* Early access form */
.lf-ea { position: relative; overflow: hidden; }
.lf-ea .glow-blob { width: 620px; height: 620px; background: var(--violet); top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .2; }
.lf-ea__card {
  position: relative; z-index: 1; max-width: 720px; margin-inline: auto;
  padding: clamp(34px,5vw,60px); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
html[data-theme="light"] .lf-ea__card { background: linear-gradient(160deg, #FFFFFF, #F5F2FD); }
.lf-ea__head { text-align: center; margin-bottom: 30px; }
.lf-ea__head .eyebrow { justify-content: center; }
.lf-ea__form .form-grid { margin-bottom: 20px; }
.lf-ea__submit { width: 100%; justify-content: center; padding: 16px 26px; font-size: 1.02rem; }
.lf-ea__note { text-align: center; color: var(--txt-faint); font-size: .84rem; margin-top: 14px; }
.lf-ea__ok, .lf-ea__err { padding: 14px 20px; border-radius: 14px; margin-bottom: 22px; font-weight: 500; text-align: center; }
.lf-ea__ok  { background: rgba(67,224,138,.12); border: 1px solid rgba(67,224,138,.4); color: #6ff0a8; }
html[data-theme="light"] .lf-ea__ok { color: #1d9457; }
.lf-ea__err { background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.4); color: #ff9a9a; }
html[data-theme="light"] .lf-ea__err { color: #c74848; }
/* Honeypot — visually gone, still in the DOM for bots */
.kd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Real project thumbnails inside portfolio tiles (CPT featured images) */
.pf > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pf:hover > img { transform: scale(1.06); }
.masonry .pf > img { height: auto; aspect-ratio: 4/3; }
.masonry .pf.tall > img { aspect-ratio: 3/4; }
.masonry .pf.wide > img { aspect-ratio: 16/10; }

/* LayerFlow + Home hero responsive */
@media (max-width: 980px) {
  .lff { grid-template-columns: 1fr; }
  .lff__wide-grid { grid-template-columns: 1fr; }
  .who { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .chero { padding: 140px 0 90px; min-height: 0; }
  .who { grid-template-columns: repeat(2, 1fr); }
  .anim-vfind { flex-direction: column; height: auto; align-items: stretch; }
  .vf__shot { margin-inline: auto; margin-bottom: 24px; }
}

/* ==========================================================================
   V1 LAUNCH — polish round 2
   ========================================================================== */

/* --- Floating cards: solid, readable glass (text never mixes with the bg) --- */
.fchip__card {
  background: linear-gradient(160deg, rgba(34,28,62,.88), rgba(22,18,42,.78));
  border-color: rgba(255,255,255,.16);
}
html[data-theme="light"] .fchip__card {
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  border-color: rgba(26,21,48,.12);
}

/* --- Real-image floating cards (drop JPG/PNG/GIF into assets/img/) --- */
.fchip--img { z-index: 0; }
.fchip__imgcard { padding: 6px; width: 190px; }
.fchip__imgcard img, .fchip__imgcard .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 11px; font-size: .62rem; }
.fchip--img[data-depth="0.50"] .fchip__imgcard,
.fchip--img[data-depth="0.45"] .fchip__imgcard,
.fchip--img[data-depth="0.40"] .fchip__imgcard { width: 150px; opacity: .85; }

/* --- Rotating word: JS animates the width so the line stays centered --- */
.rot { transition: width .5s var(--ease); overflow: visible; vertical-align: bottom; }

/* --- Magnetic elements: transform is driven by GSAP only (no CSS fighting) --- */
[data-magnetic] { transition-property: box-shadow, background, border-color, color, opacity; }
[data-magnetic]:hover { transform: none; }

/* --- LayerFlow nav item gets the product mark --- */
.nav__lf-ico { display: inline-grid; place-items: center; vertical-align: -4px; margin-right: 6px; color: var(--violet-soft); }
.nav__lf-ico svg { width: 15px; height: 15px; }
html[data-theme="light"] .nav__lf-ico { color: var(--violet); }

/* --- LayerFlow hero: blurred logo watermark, slow drift + scroll parallax --- */
.lf-mark {
  position: absolute; z-index: 0; top: 6%; left: 50%; transform: translateX(-50%);
  width: clamp(320px, 44vw, 620px); aspect-ratio: 1; display: grid; place-items: center;
  opacity: .1; filter: blur(7px); pointer-events: none; color: var(--violet-2);
  animation: lfMarkFloat 14s ease-in-out infinite alternate;
}
.lf-mark svg { width: 100%; height: 100%; }
.lf-mark img { width: 100%; height: 100%; object-fit: contain; }
html[data-theme="light"] .lf-mark { opacity: .08; }
@keyframes lfMarkFloat { from { translate: 0 -14px; rotate: -2deg; } to { translate: 0 14px; rotate: 2deg; } }

/* --- Search mode chips ("how it really works") --- */
.fsearch__modes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.fsearch__mode {
  font-size: .8rem; padding: 7px 14px; border-radius: 100px; color: var(--txt-dim);
  background: var(--glass-2); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
}
.fsearch__mode.is-live { color: var(--violet-soft); border-color: rgba(139,95,255,.5); background: rgba(139,95,255,.1); }

/* --- Main feature card: premium highlight + animated glow border --- */
.lff__card--main { position: relative; }
.lff__card--main::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius-lg); padding: 1px;
  background: linear-gradient(120deg, rgba(139,95,255,.7), rgba(49,168,255,.35), rgba(139,95,255,.7));
  background-size: 220% 220%; animation: mainGlow 5s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
@keyframes mainGlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.lff__card--main .lff__ico { background: var(--grad-violet); border-color: transparent; box-shadow: var(--glow-soft); }

/* Visual Source Search — big stage: drop image → scan → ranked matches */
.anim-vsx { height: 200px; flex-direction: row; gap: 20px; padding: 20px; }
.vsx__drop { text-align: center; flex-shrink: 0; }
.vsx__img {
  position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; margin-inline: auto;
  border: 1.5px dashed rgba(139,95,255,.6);
  background: linear-gradient(135deg, #6B2EFF, #31A8FF 65%, #43e08a);
  box-shadow: 0 0 26px rgba(107,46,255,.3);
  animation: vsxDrop 6s ease-in-out infinite;
}
@keyframes vsxDrop { 0% { transform: translateY(-8px) scale(.94); opacity: 0; } 6% { opacity: 1; } 12%,96% { transform: none; opacity: 1; } 100% { transform: translateY(-8px) scale(.94); opacity: 0; } }
.vsx__grid { position: absolute; inset: 0; opacity: 0;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 16px 16px; animation: vsxGrid 6s ease-in-out infinite; }
@keyframes vsxGrid { 0%,12% { opacity: 0; } 18%,42% { opacity: 1; } 50%,100% { opacity: 0; } }
.vsx__scan { position: absolute; left: 0; right: 0; height: 3px; background: #fff; box-shadow: 0 0 14px #fff, 0 0 30px var(--violet-2); animation: vsxScan 6s ease-in-out infinite; }
@keyframes vsxScan { 0%,14% { top: 0; opacity: 0; } 18% { opacity: 1; } 44% { top: calc(100% - 3px); opacity: 1; } 50%,100% { top: calc(100% - 3px); opacity: 0; } }
.vsx__droplabel { display: block; margin-top: 10px; font-size: .72rem; color: var(--txt-faint); font-family: ui-monospace, Menlo, monospace; }
.vsx__results { flex: 1; min-width: 0; display: grid; gap: 8px; }
.vsx__row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line); font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--txt);
  opacity: 0; transform: translateX(14px); animation: vsxRow 6s ease-in-out infinite;
}
.vsx__row:nth-child(2) { animation-delay: .15s; opacity: 0; }
.vsx__row:nth-child(3) { animation-delay: .3s; opacity: 0; }
@keyframes vsxRow { 0%,48% { opacity: 0; transform: translateX(14px); } 56%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.vsx__row b { margin-left: auto; font-family: var(--f-body); font-size: .74rem; color: var(--txt-faint); flex-shrink: 0; }
.vsx__row--hit { border-color: rgba(139,95,255,.6); background: rgba(107,46,255,.12); box-shadow: 0 0 22px rgba(107,46,255,.2); }
.vsx__row--hit b { color: #6ff0a8; font-weight: 700; }
html[data-theme="light"] .vsx__row--hit b { color: #1d9457; }
.vsx__row .vsx__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Case study (single portfolio): rich, editable content looks designed --- */
.cs-content { max-width: 820px; }
.cs-content h2, .cs-content h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; margin: 40px 0 14px; }
.cs-content h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.cs-content h3 { font-size: 1.25rem; }
.cs-content p { color: var(--txt-dim); margin-bottom: 16px; }
.cs-content ul, .cs-content ol { color: var(--txt-dim); margin: 0 0 16px 20px; display: grid; gap: 8px; }
.cs-content a { color: var(--violet-soft); }
.cs-content img, .cs-content video {
  width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line-2);
  box-shadow: var(--shadow); margin: 26px 0;
}
.cs-content figure { margin: 26px 0; }
.cs-content figure img, .cs-content figure video { margin: 0; }
.cs-content figcaption { text-align: center; color: var(--txt-faint); font-size: .85rem; margin-top: 10px; }
.cs-content .wp-block-gallery { margin: 26px 0; }
.cs-content .wp-block-gallery img { margin: 0; }
.cs-content .wp-block-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: var(--radius); border: 1px solid var(--line-2); }
.cs-content blockquote { border-left: 3px solid var(--violet); padding: 6px 0 6px 22px; margin: 26px 0; font-family: var(--f-display); font-size: 1.15rem; color: var(--txt); }

/* Prev / next project pager */
.cs-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; max-width: 820px; margin: 50px auto 0; padding-top: 34px; border-top: 1px solid var(--line); }
.cs-pager__link { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); transition: border-color .3s, transform .3s var(--ease); }
.cs-pager__link:hover { border-color: var(--violet); transform: translateY(-3px); }
.cs-pager__link span { font-size: .78rem; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .08em; }
.cs-pager__link b { font-family: var(--f-display); font-weight: 600; }
.cs-pager__link--next { text-align: right; }
.cs-pager__all { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--txt-dim); transition: .25s; }
.cs-pager__all:hover { border-color: var(--violet); color: var(--violet-soft); }

/* --- Mobile: hero text always wins over the floating scene ---
   Show only TWO cards, pinned to opposite corners for a balanced, uncluttered
   look: an image card bottom-left + one accent card top-right. Everything
   else is hidden so nothing overlaps or crowds the headline. --- */
@media (max-width: 820px) {
  .fhero__scene { opacity: .6; }
  .fhero__scene .fchip { display: none; }
  /* image card → bottom-left (fills the empty left side) */
  .fhero__scene .fchip--img-1 {
    display: block; opacity: .95;
    left: 3% !important; right: auto !important; top: auto !important; bottom: 5% !important;
  }
  /* one accent card → top-right */
  .fhero__scene .fchip:nth-child(3) {
    display: block; opacity: .85;
    left: auto !important; right: 3% !important; top: 11% !important;
  }
  .lf-mark { width: 78vw; opacity: .07; }
  .fsearch__modes { gap: 6px; }
  .fsearch__mode { font-size: .72rem; padding: 6px 11px; }
  .anim-vsx { flex-direction: column; height: auto; align-items: stretch; }
  .vsx__drop { margin-bottom: 6px; }
  .cs-pager { grid-template-columns: 1fr; }
  .cs-pager__all { display: none; }
  .cs-pager__link--next { text-align: left; }
}

/* ==========================================================================
   V1 LAUNCH — polish round 3 (vertical cards, contrast, testimonials strip)
   ========================================================================== */

/* --- Floating image cards: VERTICAL poster format, clickable, captioned --- */
.fhero__scene .fchip--img { pointer-events: auto; }
.fchip__imgcard {
  display: block; position: relative; width: 150px; padding: 6px; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s;
}
a.fchip__imgcard:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 24px 54px rgba(0,0,0,.45), 0 0 40px rgba(107,46,255,.3); }
.fchip__imgcard img, .fchip__imgcard .ph {
  width: 100%; aspect-ratio: 3/4; height: auto; object-fit: cover; border-radius: 11px; font-size: .6rem;
}
/* Prettier empty slots (until real work images/projects exist) */
.fchip__imgcard .ph {
  background:
    radial-gradient(120px circle at 30% 20%, rgba(139,95,255,.35), transparent 70%),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px dashed rgba(139,95,255,.35);
}
html[data-theme="light"] .fchip__imgcard .ph { background: radial-gradient(120px circle at 30% 20%, rgba(139,95,255,.2), transparent 70%), linear-gradient(160deg, #EFEBFA, #FFFFFF); }
.fchip__cap {
  position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 18px 10px 8px;
  border-radius: 0 0 11px 11px; font-size: .7rem; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(8,8,18,.85), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fchip--img[data-depth="0.50"] .fchip__imgcard,
.fchip--img[data-depth="0.45"] .fchip__imgcard,
.fchip--img[data-depth="0.40"] .fchip__imgcard { width: 118px; opacity: .9; }

/* --- Contrast & readability pass (dark AND light, no hardcoded whites) --- */
:root { --txt-faint: #837DA6; }           /* was #6E688C — clearly readable on ink */
html[data-theme="light"] { --txt-faint: #6F6A8E; }
.filters button.active, .filters button:hover { color: var(--txt); }
.card:hover .card__link { color: var(--txt); }
.footer__col a:hover { color: var(--txt); }
.about__mini div b { color: var(--txt); }
.app-feat__count b { color: var(--txt); }
.newsletter input { color: var(--txt); }
.help-search input { color: var(--txt); }
.tip:hover .read { color: var(--txt); }
.stat__num { color: var(--txt); }
.kcard__meta, .fchip__meta { color: var(--txt-dim); }   /* card metas step up from faint */

/* --- Contact strip: catchier primary pill --- */
.strip__pill--go { background: var(--grad-violet); border-color: transparent; color: #fff; box-shadow: var(--glow-soft); }
.strip__pill--go:hover { box-shadow: var(--glow); border-color: transparent; }
.strip__pill--go .arrow { transition: transform .3s var(--ease); }
.strip__pill--go:hover .arrow { transform: translateX(4px); }

@media (max-width: 820px) {
  .fchip__imgcard { width: 108px; }
}

/* ==========================================================================
   V1 LAUNCH — polish round 4 (centering, icons, motion quality)
   ========================================================================== */

/* --- Rotating word: its own line, always dead-center --- */
.rot { display: grid; justify-items: center; width: 100%; transition: none; }
.rot__word { text-align: center; }

/* --- Gradient headlines shimmer toward the cursor --- */
.grad-live { background-size: 220% auto; background-position: 50% 50%; transition: background-position .6s var(--ease); }

/* --- Tilt cards: GSAP owns the transform (no CSS transition fighting) --- */
[data-tilt] { transition-property: border-color, box-shadow, opacity; will-change: transform; }

/* --- Experience timeline: company logo + related-project link --- */
.tl-item__head { display: flex; align-items: center; gap: 14px; }
.tl-item__logo {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
  background: var(--ink-3); border: 1px solid var(--line-2); display: grid; place-items: center;
}
.tl-item__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.tl-item p { margin-top: 10px; }
.tl-item__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: .88rem; font-weight: 600; color: var(--violet-soft);
}
.tl-item__link:hover .arrow { transform: translateX(4px); }
.tl-item__link .arrow { transition: transform .3s var(--ease); }

/* --- Client marquee: pause on hover --- */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --- SVG icon plumbing (everywhere emojis used to be) --- */
.lff__ico svg, .who__ico svg { color: var(--violet-soft); }
html[data-theme="light"] .lff__ico svg, html[data-theme="light"] .who__ico svg { color: var(--violet); }
.fact .ico-svg { display: grid; place-items: center; }
.fact .ico-svg svg { width: 26px; height: 26px; color: var(--violet-soft); }
html[data-theme="light"] .fact .ico-svg svg { color: var(--violet); }
.ic-inline { display: inline-grid; place-items: center; vertical-align: -4px; }
.ic-inline svg { width: 14px; height: 14px; }
.btn svg { flex-shrink: 0; }
.strip__pill svg { width: 16px; height: 16px; }
.prodcard__note { display: inline-flex; align-items: center; gap: 8px; }
.prodcard__note svg { width: 15px; height: 15px; color: var(--violet-soft); }
.fsearch__mode { display: inline-flex; align-items: center; gap: 7px; }
.fsearch__mode svg { width: 14px; height: 14px; }
.cinfo__item .ic svg { width: 19px; height: 19px; color: var(--violet-soft); }
.off__cloud { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--txt-faint); font-size: 0; opacity: .8; }
.off__cloud svg { width: 24px; height: 24px; }
.off__cloud i { display: none; }

/* --- LayerFlow hero: natural height, breathing room before the video --- */
.fhero--lf { min-height: 0; padding: 190px 0 90px; }
.lf-demo { padding-top: 10px; }
.fhero__inner, .chero__inner { width: 100%; }

@media (max-width: 640px) {
  .fhero--lf { padding: 140px 0 70px; }
  .tl-item__head { align-items: flex-start; }
}

/* ==========================================================================
   V1 LAUNCH — polish round 5 (overflow fix, testimonials scroll, blur cards,
   watermark, gradient-hover headlines, About projects)
   ========================================================================== */

/* --- THE mobile bug: nothing may widen the page sideways, ever.
   (The testimonial track was wider than the screen, so the fixed top chip
   and bottom nav looked shifted while the page scrolled horizontally.) --- */
html, body { overflow-x: clip; }

/* --- Testimonials: real horizontal scroller (wheel / drag / arrows) --- */
.tst__track {
  overflow-x: auto; scroll-snap-type: x proximity; cursor: grab;
  scrollbar-width: none; -ms-overflow-style: none; transition: none;
  padding-bottom: 4px; /* keeps card shadows un-clipped */
}
.tst__track::-webkit-scrollbar { display: none; }
.tst__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.tst__track.is-dragging .tst__card { user-select: none; }
.tst__card { scroll-snap-align: start; }

/* --- Hero floating cards: soft-focus until you hover them --- */
.fhero__scene .fchip { pointer-events: auto; }
.fhero__scene .fchip__card { filter: blur(1.4px) saturate(.97); transition: filter .35s var(--ease), box-shadow .35s var(--ease); }
.fhero__scene .fchip:hover .fchip__card { filter: none; box-shadow: 0 22px 50px rgba(0,0,0,.4), 0 0 36px rgba(107,46,255,.25), inset 0 1px 0 rgba(255,255,255,.14); }
html[data-theme="light"] .fhero__scene .fchip:hover .fchip__card { box-shadow: 0 22px 50px rgba(80,60,160,.2), 0 0 36px rgba(107,46,255,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.fchip--far:hover { filter: none; opacity: .95; }

/* --- LayerFlow watermark: clearly present, still behind everything --- */
.lf-mark { opacity: .17; filter: blur(4.5px); }
html[data-theme="light"] .lf-mark { opacity: .13; }

/* --- Gradient-hover headlines (Home "I design", LayerFlow "Find the file…") --- */
.grad-hover {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% auto; background-position: 50% 50%; transition: background-position .6s var(--ease);
  padding-bottom: .06em;
}

/* --- Experience: logo fallback initial + rich description body --- */
.tl-item__logo b { font-family: var(--f-display); font-size: 1.05rem; color: var(--violet-soft); }
.tl-item__body { margin-top: 10px; }
.tl-item__body p { color: var(--txt-dim); font-size: .96rem; margin-bottom: 10px; }
.tl-item__body img, .tl-item__body video {
  width: 100%; max-width: 420px; height: auto; border-radius: 12px;
  border: 1px solid var(--line-2); box-shadow: var(--shadow); margin: 12px 0 4px;
}
.tl-item__body .wp-block-gallery, .tl-item__body figure { margin: 12px 0 4px; }

/* --- About: Projects (products & tools) cards --- */
.prj { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.prj__card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.prj__card:hover { transform: translateY(-6px); border-color: rgba(139,95,255,.45); box-shadow: var(--glow-soft); }
.prj__thumb { aspect-ratio: 16/8; border-bottom: 1px solid var(--line); overflow: hidden; }
.prj__thumb img, .prj__thumb .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.prj__card:hover .prj__thumb img { transform: scale(1.04); }
.prj__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prj__body h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; }
.prj__meta { color: var(--violet-soft); font-size: .84rem; font-weight: 600; }
.prj__desc { flex: 1; }
.prj__desc p { color: var(--txt-dim); font-size: .95rem; }

@media (max-width: 820px) {
  .prj { grid-template-columns: 1fr; }
  /* Touch devices: hero cards stay crisp (no hover to unblur them) */
  .fhero__scene .fchip__card { filter: none; }
}

/* ==========================================================================
   V1 LAUNCH — polish round 6 (transitions, templates, spacing, word strip)
   ========================================================================== */

/* --- Page-transition: CENTER CLOUD-BURST ---
   Leaving a page: a violet cloud blooms out from the center of the screen
   with the glowing brand mark. Arriving: the cloud bursts open from the
   middle and the new page appears behind it. Fast (~.5s), GPU-only. --- */
.pt-veil {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  display: grid; place-items: center;
  /* layered soft "cloud" gradients — pure paint, no filters, stays 60fps */
  background:
    radial-gradient(38% 30% at 42% 44%, rgba(169,139,255,.35), transparent 100%),
    radial-gradient(42% 34% at 60% 56%, rgba(107,46,255,.4), transparent 100%),
    radial-gradient(closest-side circle at 50% 50%, rgba(139,95,255,.5), rgba(37,22,86,.97) 58%, #0A0A14 100%);
  clip-path: circle(141% at 50% 50%);
  transition: clip-path .5s cubic-bezier(.65,0,.35,1);
}
.pt-veil__mark {
  position: relative; z-index: 1; color: #fff;
  opacity: 0; transform: scale(.5); transition: opacity .22s, transform .3s cubic-bezier(.34,1.4,.64,1);
  filter: drop-shadow(0 0 26px rgba(169,139,255,.9));
}
.pt-veil__mark svg, .pt-veil__mark img { width: 92px; height: 92px; display: block; }
.pt-veil__mark img { object-fit: contain; }
/* Soft expanding cloud "puffs" behind the mark — pure transform/opacity, 60fps */
.pt-veil::before, .pt-veil::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 74vmax; height: 74vmax; margin: -37vmax 0 0 -37vmax; border-radius: 50%;
  opacity: 0; transform: scale(.25); pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
}
.pt-veil::before { background: radial-gradient(circle, rgba(169,139,255,.4), rgba(107,46,255,.16) 46%, transparent 68%); }
.pt-veil::after  { background: radial-gradient(circle, rgba(201,184,255,.34), transparent 60%); }
body.pt-out .pt-veil::before { transform: scale(1.55); opacity: .9; }
body.pt-out .pt-veil::after  { transform: scale(1.15); opacity: 1; transition-delay: .04s; }
body.pt-in  .pt-veil::before,
body.pt-in  .pt-veil::after  { transform: scale(2.1); opacity: 0; transition-duration: .5s; }
/* arriving: the cloud bursts open from the center — quick and clean */
body.pt-in  .pt-veil { clip-path: circle(0% at 50% 50%); transition-duration: .48s; }
body.pt-in  .pt-veil__mark { opacity: 0; transform: scale(1.5); transition: opacity .18s, transform .26s var(--ease); }
/* leaving: the cloud blooms out from the center */
body.pt-out .pt-veil { clip-path: circle(141% at 50% 50%); pointer-events: all; }
body.pt-out .pt-veil__mark { opacity: 1; transform: scale(1); }

/* --- Custom scrollbar: slim violet, premium feel --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-0); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--violet-2), var(--violet)); border-radius: 100px; border: 2.5px solid var(--ink-0); }
::-webkit-scrollbar-thumb:hover { background: var(--violet-2); }
* { scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }

/* --- Word strip: big auto-scrolling roles --- */
.wordmq { overflow: hidden; padding: clamp(22px, 3.5vw, 40px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wordmq__track { display: flex; align-items: center; width: max-content; animation: marquee 30s linear infinite; }
.wordmq__group { display: flex; align-items: center; flex-shrink: 0; } /* two equal groups → seamless -50% loop */
.wordmq__group > * { margin-right: clamp(22px, 3vw, 40px); }
.wordmq:hover .wordmq__track { animation-play-state: paused; }
.wordmq__item {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.8rem); letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px var(--txt-faint); white-space: nowrap; transition: color .35s, -webkit-text-stroke-color .35s;
}
.wordmq__item:hover { color: var(--violet-soft); -webkit-text-stroke-color: transparent; }
.wordmq__star { color: var(--violet); display: grid; place-items: center; }
.wordmq__star svg { width: clamp(16px, 2vw, 24px); height: auto; }

/* --- LayerFlow spacing: symmetric air around the demo video + problem --- */
.fhero--lf { padding-bottom: clamp(40px, 6vw, 70px); }
.lf-demo { padding: clamp(50px, 7vw, 90px) 0 clamp(60px, 8vw, 110px); }
.lf-problem { padding: clamp(70px, 9vw, 120px) 0; }

/* --- Experience: logo aligned with year/role + hover life --- */
.tl-item__head { align-items: center; }
.tl-item__logo { transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.tl-item:hover .tl-item__logo { transform: translateY(-3px) rotate(-3deg) scale(1.06); border-color: var(--violet); box-shadow: var(--glow-soft); }
.tl-item h4 { transition: color .3s; }
.tl-item:hover h4 { color: var(--violet-soft); }
html[data-theme="light"] .tl-item:hover h4 { color: var(--violet); }

/* --- Tools: real logo slots (drop files in assets/img/tools/) --- */
.tool__logo { background: transparent; border: none; }
.tool__logo img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* --- Project cards: fully clickable areas --- */
.prj__thumb { display: block; }
.prj__body h3 a { transition: color .3s; }
.prj__body h3 a:hover { color: var(--violet-soft); }

/* ==========================================================================
   CASE-STUDY TEMPLATES (Showcase / Slider / Split / Minimal add-ons)
   ========================================================================== */
/* Showcase: taller cinematic cover + full-width image stack */
.cs-cover--tall { aspect-ratio: 21/9; }
.cs-stack { display: grid; gap: clamp(18px, 3vw, 34px); margin: clamp(30px, 5vw, 60px) 0; }
.cs-stack__item { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.cs-stack__item img { width: 100%; height: auto; display: block; }

/* Slider: draggable, snap-scrolling gallery */
.cs-slider {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; cursor: grab;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px;
  border-radius: var(--radius-lg);
}
.cs-slider::-webkit-scrollbar { display: none; }
.cs-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cs-slider__item { flex: 0 0 min(78%, 860px); scroll-snap-align: center; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.cs-slider__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; display: block; user-select: none; -webkit-user-drag: none; }
.cs-slider__hint { text-align: center; color: var(--txt-faint); font-size: .82rem; margin: 12px 0 30px; letter-spacing: .08em; text-transform: uppercase; }

/* Split: sticky info sidebar + story */
.cs-split { display: grid; grid-template-columns: 280px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.cs-split__side { position: sticky; top: 110px; padding: 26px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line-2); }
.cs-split__row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cs-split__row:last-of-type { border-bottom: none; }
.cs-split__row span { display: block; color: var(--txt-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.cs-split__row b { font-family: var(--f-display); font-weight: 500; }

/* Minimal: bigger type, more air */
.page-hero--minimal h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.cs-content--minimal { max-width: 720px; }
.cs-content--minimal p { font-size: 1.08rem; }

@media (max-width: 860px) {
  .cs-split { grid-template-columns: 1fr; }
  .cs-split__side { position: static; }
  .cs-slider__item { flex-basis: 88%; }
}

/* --- Mobile: Visual Search card — result rows fit fully, nothing clipped --- */
@media (max-width: 640px) {
  .anim-vsx { padding: 14px; gap: 14px; }
  .vsx__results { width: 100%; min-width: 0; gap: 7px; }
  .vsx__row { padding: 8px 10px; gap: 8px; font-size: .7rem; }
  .vsx__row b { font-size: .66rem; }
  .vsx__img { width: 78px; height: 78px; }
  .lff__card { padding: 20px 18px 24px; }
}

/* --- Mobile / tablet hero breathing room (nothing touches the edges) --- */
@media (max-width: 640px) {
  .fhero .container, .chero .container { width: min(100% - 36px, var(--maxw)); }
  .fhero__h1 { font-size: clamp(2.1rem, 10.5vw, 2.8rem); }
  .chero__h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .fhero__sub, .chero__sub { font-size: .98rem; }
  .fsearch { max-width: 100%; }
  .fsearch__result { max-width: 100%; }
  .fhero__cta .btn, .chero .hero__cta .btn { padding: 13px 22px; font-size: .92rem; }
  .fhero__os { padding-inline: 10px; }
  .wordmq__item { -webkit-text-stroke-width: .8px; }
}
/* Tablets: slightly tighter type so lines don't kiss the edges */
@media (min-width: 641px) and (max-width: 900px) {
  .fhero__h1 { font-size: clamp(2.4rem, 6.4vw, 3.6rem); }
  .chero__h1 { font-size: clamp(2.3rem, 6.2vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal, [data-stagger] > *,
  html.js .reveal, html.js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .fhero__scene .fchip__card { filter: none; }
  .pt-veil { display: none; }
}