/* Portfolio visual system | October 2026
   Opt-in homepage only. The existing semantic document, case studies,
   search metadata, ARIA controls and JavaScript retain their behavior. */
:root {
  --bg: #f4f9fd;
  --bg-2: #eaf4fa;
  --surface: rgba(255, 255, 255, .94);
  --surface-solid: #ffffff;
  --surface-raised: #ffffff;
  --text: #16304d;
  --heading: #081b38;
  --muted: #455b74;
  --muted-2: #526982;
  --border: rgba(25, 68, 111, .17);
  --border-strong: rgba(19, 83, 139, .3);
  --primary: #1355bb;
  --primary-2: #087d9b;
  --cyan: #0d8199;
  --teal: #087765;
  --glow-primary: rgba(28, 120, 192, .10);
  --glow-cyan: rgba(11, 146, 156, .12);
  --shadow-sm: 0 8px 24px rgba(18, 53, 93, .075);
  --shadow-md: 0 18px 42px rgba(18, 53, 93, .10);
  --shadow-lg: 0 24px 60px rgba(18, 53, 93, .13);
}
html.dark {
  --bg: #081426;
  --bg-2: #101f34;
  --surface: rgba(16, 32, 53, .92);
  --surface-solid: #102139;
  --surface-raised: #152940;
  --text: #e3f0ff;
  --heading: #ffffff;
  --muted: #bed2e7;
  --muted-2: #a7bdd5;
  --border: rgba(142, 196, 220, .24);
  --border-strong: rgba(142, 215, 228, .40);
  --primary: #72baff;
  --primary-2: #65dbcf;
  --cyan: #7edbff;
  --teal: #71e4c8;
  --glow-primary: rgba(43, 109, 177, .14);
  --glow-cyan: rgba(39, 185, 175, .13);
}
/* Brighter atmosphere without neon or motion-dependent content. */
body {
  background:
    radial-gradient(ellipse 33rem 23rem at 6% 11%, rgba(106,198,232,.15), transparent 73%),
    radial-gradient(ellipse 34rem 28rem at 97% 13%, rgba(79,204,177,.12), transparent 76%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, var(--bg-2) 100%);
}
html.dark body {
  background: radial-gradient(ellipse 35rem 24rem at 8% 10%, rgba(45,108,185,.10), transparent 76%),
              radial-gradient(ellipse 36rem 24rem at 93% 7%, rgba(27,142,137,.12), transparent 78%),
              linear-gradient(180deg,var(--bg),var(--bg-2));
}
.gradient-text {
  background: linear-gradient(106deg, #1b5fd1 7%, #087a9e 62%, #087e69 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.dark .gradient-text {
  background: linear-gradient(105deg,#8bc3ff 4%,#6bd5fa 57%,#67e5c7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
::selection { background: rgba(40,130,193,.24); }
/* Header reads as a single floating navigation surface on both themes. */
.site-header { background:transparent; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
.site-header .nav {
  margin-top: max(7px, env(safe-area-inset-top));
  min-height: 70px;
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 95%, transparent);
  box-shadow: 0 14px 38px rgba(24,63,97,.09);
  border-radius: 22px;
  backdrop-filter: blur(15px);
}
html.dark .site-header .nav { background:rgba(14,31,51,.97); }
.brand { gap: .7rem; min-width: 0; }
.brand-mark { border-radius: 12px; background:#111a30; box-shadow:0 5px 13px rgba(8,24,47,.16); }
.brand-mark img { display:block; object-fit:cover; }
.site-header .brand small { color: var(--muted); font-size: .73rem; }
.nav-links { box-shadow: none; background: color-mix(in srgb,var(--bg-2) 31%,var(--surface-solid)); }
.nav-links a { color:var(--text); font-weight:750; }
.nav-links a:hover,.nav-links a:focus-visible {
  color:var(--heading); background:color-mix(in srgb,var(--cyan) 12%,transparent);
}
.button.primary {
  color:#fff;
  background:linear-gradient(105deg,#1457bf 12%,#0c68b0 64%,#08786f 100%);
  box-shadow:0 15px 30px rgba(17,92,171,.20);
}
.button.primary:hover,.button.primary:focus-visible {
  background:linear-gradient(110deg,#104697,#12699e 64%,#086b61 100%);
}
html.dark .button.primary { color:#06182c; background:linear-gradient(110deg,#90cbff,#68ddcb); }
html.dark .button.primary:hover,html.dark .button.primary:focus-visible { background:linear-gradient(110deg,#a6d8ff,#85ecd7); }
.button.secondary,.button.ghost,.icon-button { border-color:var(--border); box-shadow:0 5px 14px rgba(18,53,93,.045); }
/* Prevent hover-induced mouse-target oscillation while clicking theme/navigation icons. */
.site-header .icon-button,.site-header .icon-button:hover {transform:none;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;}
.button:focus-visible,.icon-button:focus-visible,.nav-links a:focus-visible {
  outline:3px solid #0d8890 !important; outline-offset:3px;
}
html.dark .button:focus-visible,html.dark .icon-button:focus-visible,
html.dark .nav-links a:focus-visible { outline-color:#77e2d5!important; }
/* Hero: less visual sprawl, stronger hierarchy, refined navy/teal portrait. */
.hero {
  min-height:min(780px,100svh);
  padding-top:calc(var(--nav) + clamp(2.75rem,6vw,5rem));
  padding-bottom:clamp(2.2rem,4vw,3.5rem);
}
.hero::before { opacity:.27!important; filter:blur(25px)!important; background:conic-gradient(from 180deg,rgba(14,114,172,.13),rgba(14,170,155,.16),transparent 68%);animation:none!important; }
.hero::after { opacity:.36; }
.hero-grid { grid-template-columns:minmax(0,1.12fr) minmax(305px,.88fr); gap:clamp(1.8rem,4vw,4rem); }
.hero h1 { font-size:clamp(3rem,5.15vw,4.65rem); max-width:19ch; line-height:1.05; letter-spacing:-.052em; }
.hero-subtitle { font-weight:500; color:var(--text); max-width:57ch; line-height:1.57; }
.hero-positioning { color:var(--muted); line-height:1.55; max-width:60ch; }
.availability { background:var(--surface-solid); border-color:var(--border); color:var(--text); }
.availability i {background:#0d9b70;box-shadow:0 0 0 5px rgba(22,168,123,.13);}
.hero-actions { gap:.65rem; margin:1.6rem 0 1.3rem; }
.hero-actions .button { min-height:48px; }
.hero-links { font-size:.9rem; }
.hero-links .button { min-height:44px; }
.hero-showcase-clean { width:100%; max-width:500px; justify-self:center; }
.hero-showcase::before { background:rgba(60,150,214,.13); }
.hero-showcase::after { background:rgba(61,184,160,.15); }
.portrait-card {
  border:1px solid rgba(55,140,186,.28);
  border-radius:26px; gap:1.15rem; padding:1.2rem;
  background:linear-gradient(145deg,rgba(255,255,255,.98) 8%,rgba(230,245,252,.96) 72%,rgba(226,249,242,.93));
  box-shadow:0 24px 56px rgba(23,68,104,.12);
}
html.dark .portrait-card {
  background:linear-gradient(135deg,#182c45,#13273e 74%,#103a3d);
  border-color:rgba(91,196,207,.32);
}
.portrait-card::after { background:rgba(40,189,161,.12); }
.portrait-frame { border-radius:20px; border-color:rgba(46,127,169,.27); box-shadow:0 12px 30px rgba(20,51,86,.14); }
.portrait-tags span { min-height:32px; display:inline-flex; align-items:center; padding:.35rem .65rem; border-color:var(--border); font-size:.79rem; }
.portrait-copy p { font-size:.96rem; line-height:1.5; }
/* Static, accessible capability strip instead of duplicated moving keywords. */
.expertise-wrap { border-block:1px solid var(--border); background:color-mix(in srgb,var(--surface-solid) 76%,transparent); }
.expertise-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:center;margin-inline:auto;padding:0; }
.expertise-item { display:flex;align-items:center;gap:.85rem;padding:1.15rem .9rem;min-width:0;position:relative; }
.expertise-item + .expertise-item::before { content:"";height:42px;width:1px;background:var(--border);position:absolute;left:0;top:calc(50% - 21px); }
.expertise-icon { display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:12px;background:color-mix(in srgb,var(--cyan) 10%,var(--surface-solid));color:var(--primary);border:1px solid var(--border); }
.expertise-icon svg { width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.expertise-item strong { display:block; color:var(--heading);font-size:.91rem;line-height:1.25;letter-spacing:-.02em; }
.expertise-item span:not(.expertise-icon) { display:block;color:var(--muted);font-size:.79rem;line-height:1.35;margin-top:.15rem; }
.card,.project-card,.proof-card,.snapshot-card { border-color:var(--border); }
#creator .creator-panel-tech { border-top-color:var(--primary-2); }
#creator .creator-panel-family { border-top-color:var(--teal); }
/* Footer gets a deliberate, shared identity with the navigation brand. */
.enhanced-footer,
html.dark .enhanced-footer {
  padding-block:clamp(3rem,5vw,4.4rem) 1.5rem!important;
  background:radial-gradient(ellipse 33rem 22rem at 0 80%,rgba(24,108,142,.22),transparent 76%),
             radial-gradient(ellipse 24rem 20rem at 100% 15%,rgba(16,135,115,.12),transparent 75%),
             linear-gradient(135deg,#0c223b,#0a192f 65%,#0b2234)!important;
  border-top:1px solid rgba(129,202,223,.34)!important;
  color:#eaf4ff!important;
}
.enhanced-footer .footer-grid { gap:clamp(1.5rem,3vw,3rem); }
.enhanced-footer .brand { gap:.75rem; color:#f4f9ff!important; }
.enhanced-footer .brand span:not(.brand-mark) { color:#f4f9ff!important; }
.enhanced-footer .brand small { color:#b6ccde!important; }
.enhanced-footer .brand-mark { border:1px solid rgba(144,210,229,.4);background:#111a30;box-shadow:0 8px 24px rgba(0,0,0,.23); }
.enhanced-footer .footer-brand p,
.enhanced-footer .footer-updated,
.enhanced-footer .footer-bottom,
.enhanced-footer .footer-bottom a,
.enhanced-footer .footer-links a,
.enhanced-footer .footer-copy-email,
html.dark .enhanced-footer .footer-brand p,
html.dark .enhanced-footer .footer-updated,
html.dark .enhanced-footer .footer-bottom,
html.dark .enhanced-footer .footer-bottom a,
html.dark .enhanced-footer .footer-links a,
html.dark .enhanced-footer .footer-copy-email {
  color:#d0e0ed!important;
}
.enhanced-footer .footer-status,
html.dark .enhanced-footer .footer-status { color:#ffffff!important; font-weight:750; }
.enhanced-footer .footer-links h3,
html.dark .enhanced-footer .footer-links h3 { color:#f7fbff!important; letter-spacing:.11em; font-size:.84rem; }
.enhanced-footer .footer-links { gap:.18rem; }
.enhanced-footer .footer-links a,
.enhanced-footer .footer-copy-email { display:flex;align-items:center;min-height:40px;padding:.4rem .3rem!important;border-radius:8px;font-size:.93rem;line-height:1.4; }
.enhanced-footer .footer-links a:hover,
.enhanced-footer .footer-links a:focus-visible,
.enhanced-footer .footer-copy-email:hover,
.enhanced-footer .footer-copy-email:focus-visible,
html.dark .enhanced-footer .footer-links a:hover,
html.dark .enhanced-footer .footer-links a:focus-visible {
  color:#a8f3da!important; background:rgba(115,204,218,.11);text-decoration:underline;text-underline-offset:.2em;
}
.enhanced-footer .footer-links a:focus-visible,
.enhanced-footer .footer-copy-email:focus-visible { outline:2px solid #a8f3da;outline-offset:2px; }
.enhanced-footer .footer-bottom { margin-top:2.4rem; border-top-color:rgba(180,221,237,.25)!important; }
@media(min-width:761px){.enhanced-footer .footer-bottom {padding-right:175px;}}
@media(max-width:760px){.enhanced-footer .footer-bottom {padding-bottom:5rem;}}
.enhanced-footer .footer-updated { font-size:.86rem; }
/* Floating actions use the same blue/teal identity rather than old violet. */
.back-to-top, html.dark .back-to-top {
  background:#0d2b48!important;color:#ffffff!important;
  border:1px solid rgba(96,204,211,.48)!important;
  box-shadow:0 13px 32px rgba(6,25,42,.25)!important;
}
.back-to-top:hover,.back-to-top:focus-visible { background:#126080!important;color:#ffffff!important; }
#tabbyLauncher {background:linear-gradient(135deg,#155bbd,#087a8a)!important;color:#fff!important;box-shadow:0 14px 30px rgba(13,78,125,.26)!important;}
#tabbyLauncher:hover,#tabbyLauncher:focus-visible {background:linear-gradient(135deg,#1b6ac8,#087a73)!important;}
@media(max-width:1080px) {
  .site-header .nav { width:min(100% - 1.2rem,var(--max)); }
  .hero-grid {grid-template-columns:1fr;}
  .hero h1 { max-width:13ch; }
  .expertise-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .expertise-item:nth-child(3)::before {display:none;}
}
@media(max-width:720px) {
  .site-header .nav { min-height:68px; margin-top:5px; padding:.5rem .65rem;border-radius:18px; }
  .hero {min-height:auto;padding-top:calc(var(--nav) + 2.2rem);}
  .hero h1 {font-size:clamp(2.6rem,12vw,4.15rem);max-width:12ch;line-height:1.08;}
  .hero-actions {gap:.6rem;}
  .hero-actions .button {white-space:normal;text-align:center;}
  .portrait-card {padding:.95rem;border-radius:22px;gap:.8rem;}
  .expertise-grid {grid-template-columns:1fr 1fr;}
  .expertise-item {padding:.85rem .5rem;gap:.5rem;}
  .expertise-item::before {display:none!important;}
  .expertise-item strong {font-size:.82rem;}
  .expertise-item span:not(.expertise-icon) {font-size:.74rem;}
  .expertise-icon {width:32px;height:32px;border-radius:10px;}
  .expertise-icon svg {width:19px;height:19px;}
  .enhanced-footer .footer-grid { gap:1.65rem; }
  .enhanced-footer .footer-links a,.enhanced-footer .footer-copy-email {min-height:44px;}
}
@media(max-width:390px){
  .expertise-grid {grid-template-columns:1fr;}
  .expertise-item {padding:.65rem .4rem;}
  .hero h1 {font-size:clamp(2.45rem,12vw,3.1rem);}
}
@media(prefers-reduced-motion:reduce) {
 .button,.icon-button,.creator-tech-picture img {transition:none!important;}
}

/* Footer contact polish — grouped links, balanced spacing and minimum 44px touch targets. */
.enhanced-footer .footer-grid{align-items:start;}
.enhanced-footer .footer-connect{gap:.45rem;}
.enhanced-footer .footer-connect h3{margin-bottom:.4rem;}
.enhanced-footer .footer-connect .footer-subtitle{margin:1rem 0 .2rem;color:#b3e9e2;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:850;line-height:1.4;}
.enhanced-footer .footer-email-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;min-width:0;}
.enhanced-footer .footer-email-row a{display:inline-flex;align-items:center;min-width:0;min-height:44px;padding:.45rem .2rem!important;}
.enhanced-footer .footer-email-row .footer-copy-email{min-width:0;min-height:44px;max-width:140px;justify-self:end;justify-content:center;text-align:center;padding:.5rem .7rem!important;border-radius:999px;border:1px solid rgba(136,206,230,.44);background:rgba(47,135,173,.14);color:#f0fbff!important;}
.enhanced-footer .footer-email-row .footer-copy-email:hover,.enhanced-footer .footer-email-row .footer-copy-email:focus-visible{border-color:#a8f3da;background:rgba(98,202,193,.22);}
.enhanced-footer .footer-link-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .65rem;align-items:start;min-width:0;}
.enhanced-footer .footer-link-pair a{min-width:0;overflow-wrap:anywhere;min-height:44px;display:flex;align-items:center;padding:.45rem .2rem!important;line-height:1.45;}
.enhanced-footer .footer-links a,.enhanced-footer .footer-copy-email{font-size:.92rem;}
.enhanced-footer .footer-brand p{max-width:46ch;line-height:1.55;}
@media(max-width:760px){
 .enhanced-footer .footer-grid{gap:1.5rem;}
 .enhanced-footer .footer-connect{border-top:1px solid rgba(174,218,231,.2);padding-top:1.35rem;}
 .enhanced-footer .footer-link-pair{column-gap:1rem;}
 .enhanced-footer .footer-email-row .footer-copy-email{padding:.6rem .85rem!important;}
}
@media(max-width:350px){.enhanced-footer .footer-link-pair{grid-template-columns:1fr;}}