/* =========================================================
   About — JTDigital (matches your theme system)
   - SaaS (dark), Art (friendly light), Editorial (slate dark)
   - Minimal, no heavy wipe overlays; smooth, clean UI
   ========================================================= */

/* ========== Base tokens (SaaS default) ========== */
:root{
  --bg:#0b1016; --surface:#111826; --text:#e5e7eb; --muted:#9aa4b2; --border:#1f2a36;
  --accent:#0EA5A8; --accent-2:#24E5F5;

  --paper:#0f172a; --ink:#e6edf3; --line:#1f2a36;

  --mesh-a: rgba(14,165,168,.32);
  --mesh-b: rgba(36,229,245,.22);
  --mesh-c: rgba(124,58,237,.12);

  --ui-font: Inter, system-ui, sans-serif;
  --nav-font: Inter, system-ui, sans-serif;
  --heading-font: Inter, system-ui, sans-serif;

  --radius:16px; --hdr:64px;
  --shadow-1:0 10px 28px rgba(0,0,0,.16);
  --shadow-2:0 18px 60px rgba(0,0,0,.28);
  --elev-1:0 10px 28px rgba(0,0,0,.18);
  --elev-2:0 18px 60px rgba(0,0,0,.26);

  --rx:0deg; --ry:0deg;
}

/* Artistic Pastel (friendly light) */
html[data-site-theme="art"]{
  --bg:#fff8f4; --surface:#ffffff; --text:#0f172a; --muted:#475569; --border:#e9ded3;
  --accent:#f59e0b; --accent-2:#a78bfa;
  --paper:#ffffff; --ink:#0f172a; --line:#e9ded3;

  --mesh-a: rgba(253,230,138,.35);
  --mesh-b: rgba(147,197,253,.28);
  --mesh-c: rgba(249,168,212,.30);

  --ui-font:"DM Sans", Inter, system-ui, sans-serif;
  --nav-font:"DM Sans", Inter, system-ui, sans-serif;
  --heading-font:"Caveat", "DM Sans", Inter, system-ui, cursive;

  --elev-1: 0 8px 26px color-mix(in oklab, var(--accent), transparent 78%),
            0 2px 10px color-mix(in oklab, var(--accent-2), transparent 82%);
  --elev-2: 0 16px 60px color-mix(in oklab, var(--accent), transparent 76%),
            0 6px 22px color-mix(in oklab, var(--accent-2), transparent 84%);
}

/* Editorial Minimal (slate dark) */
html[data-site-theme="editorial"]{
  --bg:#0b0e12; --surface:#0f141a; --text:#e5e7eb; --muted:#a5b4c0; --border:#1b2632;
  --accent:#94a3b8; --accent-2:#cbd5e1;
  --paper:#0f141a; --ink:#e5e7eb; --line:#1b2632;

  --mesh-a: rgba(148,163,184,.22);
  --mesh-b: rgba(100,116,139,.18);
  --mesh-c: rgba(51,65,85,.16);

  --nav-font:"EB Garamond", Georgia, serif;
  --heading-font:"EB Garamond", Georgia, serif;

  --elev-1: 0 8px 24px color-mix(in oklab, #64748b, transparent 76%);
  --elev-2: 0 16px 52px color-mix(in oklab, #94a3b8, transparent 75%);
}

/* ========== Resets & base ========== */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--text); font-family:var(--ui-font);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.wrap{ width:min(1200px,94vw); margin-inline:auto; }

/* ========== Background layers ========== */
#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.8; }
.bg-overlays>*{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-grain{
  opacity:.05;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAMUlEQVQYV2NkwA7+Z2BgYGB4wMDA8J8B8c9gYGBg+M8gEw0MQ8QYxgYGBrgYg4oGAAy8wP8c0wJywAAAABJRU5ErkJggg==');
  mix-blend-mode:overlay;
}
.bg-mesh{
  opacity:.18; filter:blur(18px);
  background:
    radial-gradient(60% 60% at 20% 30%, var(--mesh-a), transparent 60%) 0% 0% / 140% 140% no-repeat,
    radial-gradient(50% 50% at 80% 70%, var(--mesh-b), transparent 60%) 0% 0% / 140% 140% no-repeat,
    radial-gradient(40% 50% at 50% 10%, var(--mesh-c), transparent 70%) 0% 0% / 160% 160% no-repeat;
}
.bg-vignette{ opacity:.22; background: radial-gradient(60% 60% at 50% 50%, transparent 60%, rgba(0,0,0,.6) 100%); }
html[data-site-theme="art"] #stars{ opacity:.22; }
html[data-site-theme="editorial"] .bg-grain{ opacity:.04; }

/* ========== Header / Navbar ========== */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: saturate(130%) blur(8px);
  -webkit-backdrop-filter: saturate(130%) blur(8px);
  transition: background .35s, border-color .35s, box-shadow .35s;
  font-family:var(--nav-font);
}
.site-header .wrap{ padding:12px 0; display:flex; align-items:center; gap:16px; }
.site-header.is-transparent{
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 10%), transparent);
  border-bottom: 1px solid transparent;
}
html[data-site-theme="art"] .site-header.is-transparent{
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 4%), transparent);
}
.site-header.is-solid{
  background: color-mix(in oklab, var(--bg), #000 12%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
html[data-site-theme="art"] .site-header.is-solid{
  background: color-mix(in oklab, var(--surface), #000 6%);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.brand{ font-weight:900; letter-spacing:-.02em; white-space:nowrap; }
.site-nav{ margin-left:auto; display:flex; gap:18px; }
.site-nav a{ color: color-mix(in oklab, var(--text), transparent 20%); font-weight:700; font-size:.95rem; }
.site-nav a:hover{ color: var(--text); }
.site-nav a{ position:relative; padding:.35rem .2rem; }
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--accent); transform: scaleX(0); transform-origin:left; transition: transform .2s ease;
}
.site-nav a:hover::after, .site-nav a.is-active::after{ transform: scaleX(1); }
.hdr-ctas{ display:flex; gap:10px; margin-left:16px; }
.scrollbar{ height:2px; background: color-mix(in oklab, var(--text) 12%, transparent); }
.scrollbar span{ display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width .2s; }

/* Mobile nav */
.hamburger{ display:none; background:transparent; border:none; width:44px; height:44px; margin-left:8px; }
.hamburger span{ display:block; width:22px; height:2px; background:var(--text); margin:5px auto; transition: transform .2s, opacity .2s; }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburger[aria-expanded="true"] span:first-child{ transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:last-child{ transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px){
  .site-nav, .hdr-ctas{ display:none; }
  .hamburger{ display:block; padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--surface); }
  .site-header.is-open .wrap{ position:relative; z-index:3; }
  .site-header.is-open::after{ content:""; position:fixed; inset:0; background:color-mix(in oklab, var(--bg) 85%, #000 15%); z-index:2; }
  .site-header.is-open .site-nav, .site-header.is-open .hdr-ctas{
    position:fixed; left:0; right:0; top:calc(var(--header-height, 64px));
    background: var(--bg); border-top:1px solid var(--border);
    box-shadow:0 20px 60px rgba(0,0,0,.35); padding:16px; z-index:4; animation: navSlide .18s ease forwards;
  }
  .site-header.is-open .site-nav{ display:grid; gap:8px; }
  .site-header.is-open .hdr-ctas{ display:flex; gap:.5rem; padding: 12px 16px 20px; border-top:1px dashed var(--border); }
  @keyframes navSlide{ from{ transform: translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } }
}

/* ========== Buttons ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; border-radius:12px;
  padding:10px 14px; font-weight:800;
  transition: transform .08s, box-shadow .2s, border-color .2s, background .2s;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-1); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn-primary.outline{ background:transparent; border:2px solid var(--accent); color:var(--accent); }
.btn-primary.outline:hover{ background: color-mix(in oklab, var(--accent), transparent 85%); }
.btn-secondary{ border:2px solid color-mix(in oklab, var(--accent), var(--border) 65%); color:var(--accent); }
.btn-secondary:hover{ border-color:var(--accent); transform:translateY(-1px); }

/* ========== Sections & hero ========== */
.section{ position:relative; padding: clamp(36px, 8vw, 80px) 0; }
.section-hd h2{ font-family: var(--heading-font); font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0 0 .25rem; }
.section-hd p{ margin:0 0 1rem; color: color-mix(in oklab, var(--text), transparent 24%); }

.hero{ position:relative; min-height: calc(60svh - var(--hdr)); display:grid; place-items:center; text-align:center; overflow:hidden; perspective:1000px; }
.hero .wrap{ display:grid; place-items:center; }
.hero-inner{
  width:100%; padding: clamp(24px, 6vh, 80px) 0 clamp(16px, 4vh, 60px);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .12s ease-out;
}
.hero-copy h1{
  margin:.1rem 0 .25rem; line-height:1.02;
  font-size: clamp(2.2rem, 6.2vw, 3.6rem); font-weight:900; letter-spacing:-.02em;
  font-family: var(--heading-font);
}
.hero p{ margin:.25rem auto .8rem; color: color-mix(in oklab, var(--text), transparent 18%); max-width: 780px; }
.btn-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-notes{ opacity:.75; margin-top:.6rem; }

/* ========== Bio ========== */
.bio{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:16px; align-items:center;
  background: color-mix(in oklab, var(--surface), transparent 8%);
  border:1px solid color-mix(in oklab, var(--border), transparent 28%);
  border-radius:18px; padding:16px; box-shadow: var(--elev-2);
}
@media (max-width: 900px){ .bio{ grid-template-columns: 1fr; } }
.bio .bio-copy p{ margin:.4rem 0; color: color-mix(in oklab, var(--text), transparent 14%); }
.quick-facts{ list-style:none; padding:0; margin:.6rem 0; display:grid; gap:6px; }
.quick-facts li{ color: color-mix(in oklab, var(--text), transparent 8%); }
.bio-cta{ margin-top:.6rem; display:flex; gap:10px; flex-wrap:wrap; }

.portrait{
  position:relative; width:min(380px, 88%); aspect-ratio: 4 / 5; margin: 0 auto;
  border-radius:16px; overflow:hidden; box-shadow: var(--elev-2);
  background: color-mix(in oklab, var(--surface), transparent 8%);
  border:1px solid color-mix(in oklab, var(--border), transparent 24%);
}
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(105%); }
.portrait .ring{
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:.45;
  background: conic-gradient(from 220deg, color-mix(in oklab, var(--accent), transparent 0%) 0 18%,
                                      transparent 18% 58%,
                                      color-mix(in oklab, var(--accent-2), transparent 0%) 58% 78%,
                                      transparent 78% 100%);
  filter: blur(12px) saturate(115%);
}

/* ========== Values ========== */
.grid{ display:grid; gap:14px; align-items:stretch; }
.grid.three{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px){ .grid.three{ grid-template-columns: 1fr; } }

.card{
  border-radius:14px; padding:16px;
  background: color-mix(in oklab, var(--surface), transparent 12%);
  border:1px solid color-mix(in oklab, var(--border), transparent 35%);
  box-shadow: var(--elev-1);
}
.card h3{ margin:.1rem 0 .25rem; display:flex; align-items:center; gap:10px; font-family: var(--heading-font); }
.card p{ margin:0; color: color-mix(in oklab, var(--text), transparent 22%); }
.step-badge{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background: color-mix(in oklab, var(--accent), #fff 80%); color:#082f32; font-weight:900; }

/* ========== Timeline ========== */
.timeline{ list-style:none; margin:0; padding:0; border-left:1px dashed color-mix(in oklab, var(--border), transparent 35%); margin-left:10px; }
.timeline li{ position:relative; margin: 12px 0 12px 16px; }
.timeline .dot{
  position:absolute; left:-19px; top:4px; width:10px; height:10px; border-radius:999px;
  background: var(--accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), transparent 80%);
}
.timeline .content strong{ display:block; font-family: var(--heading-font); }
.timeline .content p{ margin:.1rem 0 0; color: color-mix(in oklab, var(--text), transparent 18%); }

/* ========== Capabilities ========== */
.cap-grid{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px){ .cap-grid{ grid-template-columns: 1fr; } }
.cap-grid li{
  border-radius:14px; padding:14px;
  border:1px solid color-mix(in oklab, var(--border), transparent 35%);
  background: color-mix(in oklab, var(--surface), transparent 10%);
  box-shadow: var(--elev-1);
}
.cap-grid strong{ display:block; font-family: var(--heading-font); }
.cap-grid small{ opacity:.85; }

/* ========== CTA band ========== */
.section-cta-band{
  background: linear-gradient(120deg, color-mix(in oklab, var(--accent), #1a2a32 55%), color-mix(in oklab, var(--accent-2), #16222a 70%));
  border-block: 1px solid rgba(255,255,255,.08);
}
html[data-site-theme="art"] .section-cta-band{
  background: linear-gradient(120deg, color-mix(in oklab, var(--accent), #fff 65%), color-mix(in oklab, var(--accent-2), #fff 72%));
  border-block: 1px solid rgba(0,0,0,.06);
}
.cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
@media (max-width: 860px){ .cta-band-inner{ flex-direction:column; text-align:center; } }
.section-cta-band h2{ margin:.1rem 0 .25rem; font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-family: var(--heading-font); }
.section-cta-band p{ margin:0; opacity:.9; }

/* ========== Footer ========== */
.site-footer{ border-top:1px solid var(--border); margin-top: 36px; background: color-mix(in oklab, var(--bg), #000 6%); }
html[data-site-theme="art"] .site-footer{ background: color-mix(in oklab, var(--bg), #000 2%); border-top-color: var(--line); }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; padding: 24px 0; align-items:start; }
.f-brand .brand{ font-weight:900; margin: 0 0 6px; font-family: var(--nav-font); }
.f-brand p{ margin:.2rem 0 .6rem; color: color-mix(in oklab, var(--text), transparent 20%); }
.f-nav h4, .f-contact h4{ margin:.2rem 0 .4rem; font-family: var(--heading-font); }
.f-nav a, .f-contact a{ display:block; color: color-mix(in oklab, var(--text), transparent 20%); margin:.14rem 0; }
.f-nav a:hover, .f-contact a:hover{ color: var(--text); }
.socials{ display:flex; gap:10px; }
.legal{ border-top:1px solid color-mix(in oklab, var(--border), transparent 35%); padding: 10px 0 18px; }

/* ========== Focus & transitions ========== */
.site-nav a:focus-visible, .hamburger:focus-visible, .btn:focus-visible{
  outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 10px;
}
@media (prefers-reduced-motion: no-preference){
  html, body, .site-header, .card, .btn, .cap-grid li, .bio, .portrait, .footer-grid, .hero, .bg-overlays > * {
    transition: background-color .35s ease, color .35s ease,
                border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
  }
}

/* ========== Theme picker ========== */
.theme-picker{
  position: fixed; right: 16px; bottom: 16px; z-index: 10000; display: grid; gap: 8px;
}
.theme-trigger{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--surface), transparent 0%);
  color:var(--text); font-weight:800; box-shadow: var(--shadow-1);
  cursor: pointer; position:relative;
}
.theme-trigger:hover{ box-shadow: var(--shadow-2); }
.theme-trigger .dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.dot-saas{ background:#0ea5a8; } .dot-art{ background:#f59e0b; } .dot-editorial{ background:#94a3b8; }
.theme-trigger-label{ opacity:.9; }

.theme-panel{
  position:absolute; right:0; bottom:calc(100% + 8px); width:240px;
  background: var(--paper); color: var(--ink); border:1px solid var(--line);
  border-radius:14px; box-shadow: var(--shadow-2); padding:8px;
}
.theme-panel[hidden]{ display:none !important; }

.theme-option{
  display:grid; grid-template-columns:36px 1fr; align-items:center;
  gap:8px; padding:8px; border-radius:10px; cursor:pointer; user-select:none;
}
.theme-option:hover, .theme-option:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 60%);
}
.theme-option[aria-current="true"]{
  background: color-mix(in oklab, var(--paper), transparent 0%);
  border:1px solid color-mix(in oklab, var(--accent), var(--line) 60%);
}
.swatch{ border-radius:8px; height:28px; width:100%; border:1px solid color-mix(in oklab, var(--line), transparent 20%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.swatch-saas{ background: linear-gradient(135deg, #0ea5a8, #24e5f5); }
.swatch-art{ background: linear-gradient(135deg, #fde68a, #f9a8d4 50%, #93c5fd); }
.swatch-editorial{ background: linear-gradient(135deg, #0b1016, #334155); }

/* first-visit nudge */
.theme-nudge{
  position:absolute; right:0; bottom:calc(100% + 10px);
  width:min(320px, 88vw);
  background: var(--paper); color: var(--ink);
  border:1px solid var(--line);
  border-radius:12px; box-shadow: var(--shadow-2);
  padding:10px 12px; z-index:10002;
}
.theme-nudge[hidden]{ display:none !important; }
.theme-nudge strong{ display:block; font:700 .95rem var(--nav-font); margin:0 0 2px; }
.theme-nudge p{ margin:0; font:400 .85rem/1.35 var(--ui-font); opacity:.9; }
.theme-nudge .nudge-actions{ display:flex; gap:8px; margin-top:8px; }
.theme-nudge .nudge-try{
  background: var(--accent); color:#fff; border:0; border-radius:999px; padding:6px 10px; font-weight:800; cursor:pointer;
}
.theme-nudge .nudge-dismiss{
  background: transparent; color: inherit; border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer;
}
/* Typewriter for the About hero */
.typewriter{
  display:inline-block;
  white-space:nowrap;
  border-right: 2px solid var(--accent);
  padding-right: 2px;
  animation: caretBlink 1s step-end infinite;
  /* prevents layout shift while typing */
  min-width: 8ch; /* enough for short flash before JS runs */
}
@keyframes caretBlink { 50% { border-color: transparent; } }

/* When typing finishes, hide the caret cleanly */
.typewriter.done{
  border-right-color: transparent;
  animation: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .typewriter{ animation: none; border-right: 0; }
}