:root{
  --bg:#081019;
  --bg-2:#0b1420;
  --panel:#0d1622cc;
  --panel-strong:#0f1a28;
  --panel-soft:#111d2c;
  --line:rgba(113, 157, 209, .18);
  --line-strong:rgba(108, 179, 255, .28);
  --text:#edf3fb;
  --muted:#9db0c9;
  --blue:#34c4ff;
  --blue-2:#6ae6ff;
  --copper:#f3a75b;
  --copper-2:#e5895d;
  --white:#f7f9fc;
  --success:#9ef6d2;
  --shadow:0 24px 80px rgba(0,0,0,.36);
  --radius:28px;
  --radius-sm:18px;
  --container:min(1180px, calc(100% - 2rem));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  background: radial-gradient(circle at 15% 0%, rgba(31,95,175,.23), transparent 22%), radial-gradient(circle at 90% 20%, rgba(48,196,255,.13), transparent 20%), linear-gradient(180deg,#06101a 0%, #08111c 28%, #090e15 100%);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
.site-backdrop{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.2));
  opacity:.24;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
p{margin:0 0 1rem}
.container{width:var(--container); margin:0 auto}
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:1rem; top:1rem; z-index:1000; background:#fff; color:#000; padding:.5rem .75rem; border-radius:10px}
.reading-progress{position:fixed; left:0; top:0; height:3px; background:linear-gradient(90deg,var(--blue), var(--copper)); width:0; z-index:1000}

.site-header{
  position:sticky; top:0; z-index:99; backdrop-filter: blur(20px);
  background:rgba(5,10,16,.72); border-bottom:1px solid rgba(110,147,192,.12);
}
.nav-shell{display:flex; align-items:center; gap:1rem; justify-content:space-between; min-height:84px}
.brand{display:flex; align-items:center; gap:1rem; font-weight:700; letter-spacing:-.02em}
.brand img{height:28px; width:auto}
.brand span{font-size:1.02rem; white-space:nowrap}
.nav-links{display:flex; gap:1.25rem; align-items:center}
.nav-links a{color:var(--muted); font-weight:600; padding:.5rem 0; position:relative}
.nav-links a.active, .nav-links a:hover{color:var(--white)}
.nav-links a.active::after, .nav-links a:hover::after{content:''; position:absolute; left:0; bottom:-1rem; width:100%; height:2px; background:linear-gradient(90deg,var(--blue),var(--copper)); opacity:.9}
.nav-toggle{display:none; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--text); padding:.8rem 1rem; border-radius:18px; font:inherit; font-weight:700}

.hero-section{padding:clamp(3rem, 4vw, 5rem) 0 2rem; position:relative}
.hero-home{padding-top:4rem}
.hero-grid, .page-hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center}
.hero-copy{max-width:760px}
.eyebrow, .kicker{display:inline-flex; align-items:center; gap:.8rem; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); font-weight:800; margin-bottom:1rem}
.eyebrow::before{content:''; width:42px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); display:inline-block}
.hero-copy h1, .page-hero h1{font-family:'Space Grotesk','Inter',system-ui,sans-serif; font-size:clamp(3.3rem, 8vw, 6.2rem); line-height:.95; letter-spacing:-.05em; margin:0 0 1.2rem}
.hero-copy h1 span{color:var(--blue)}
.lead{font-size:clamp(1.06rem, 1.8vw, 1.28rem); color:#d9e3f1; max-width:62ch}
.hero-actions, .actions, .book-links{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.6rem}
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.85rem 1.2rem; border-radius:16px; font-weight:700;
  border:1px solid rgba(255,255,255,.09); color:var(--white); background:rgba(255,255,255,.03);
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.button:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.22); box-shadow:0 14px 30px rgba(0,0,0,.22)}
.button.primary{background:linear-gradient(180deg, rgba(20,46,84,.98), rgba(10,26,47,.98)); border-color:rgba(74,181,255,.48); box-shadow:0 0 0 1px rgba(74,181,255,.1), 0 10px 28px rgba(28,122,184,.18)}
.button.secondary{background:linear-gradient(180deg, rgba(38,28,23,.96), rgba(22,15,12,.96)); border-color:rgba(243,167,91,.38)}
.button.copper{background:linear-gradient(180deg, #c57552, #a45f46); border-color:rgba(255,198,151,.35); color:#fff}
.button.tertiary{background:transparent; border-color:var(--line-strong)}
.text-link{display:inline-flex; align-items:center; gap:.4rem; color:var(--blue); font-weight:700; margin-top:.75rem}
.text-link::after{content:'→'; transition:transform .2s ease}
.text-link:hover::after{transform:translateX(4px)}

.signal-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.7rem}
.signal-meta div, .stat-strip article, .signal-strip div{
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(12,20,31,.72), rgba(11,17,26,.46)); border-radius:18px; padding:1rem 1rem .95rem;
}
.signal-meta span, .stat-strip span, .signal-strip span{display:block; color:var(--muted); font-size:.82rem; margin-bottom:.2rem}
.signal-meta strong, .stat-strip strong{font-size:1rem}

.hero-visual{display:flex; justify-content:flex-end}
.hero-portrait-card, .portrait-spotlight{
  position:relative; width:min(100%, 460px); border-radius:36px; overflow:hidden;
  border:1px solid rgba(87,140,201,.25);
  background: radial-gradient(circle at 50% 20%, rgba(54,196,255,.18), transparent 35%), linear-gradient(180deg, rgba(10,18,28,.95), rgba(7,12,20,.95));
  box-shadow:var(--shadow);
}
.hero-portrait-card picture, .portrait-spotlight picture{position:relative; z-index:2}
.hero-portrait-card img, .portrait-spotlight img{width:100%; height:auto; object-fit:cover}
.hero-rings{position:absolute; inset:0; z-index:1; pointer-events:none; background:
  radial-gradient(circle at 50% 42%, rgba(75,179,255,.28), transparent 16%),
  radial-gradient(circle at 50% 42%, transparent 23%, rgba(75,179,255,.22) 23.3%, transparent 24%),
  radial-gradient(circle at 50% 42%, transparent 34%, rgba(75,179,255,.18) 34.3%, transparent 35%),
  radial-gradient(circle at 50% 42%, transparent 45%, rgba(75,179,255,.14) 45.3%, transparent 46%);
  mix-blend-mode:screen;
}

.section{padding:4.2rem 0}
.section.compact{padding:2.2rem 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.6rem}
.section-head h2{font-family:'Space Grotesk',sans-serif; font-size:clamp(1.9rem, 3vw, 3rem); letter-spacing:-.04em; margin:.2rem 0 .4rem}
.section-head p{max-width:42ch; color:var(--muted)}

.feature-grid, .cards-grid, .capability-grid, .media-grid{display:grid; gap:1.2rem}
.feature-grid{grid-template-columns:repeat(4,1fr)}
.cards-grid{grid-template-columns:repeat(2,1fr)}
.capability-grid{grid-template-columns:repeat(3,1fr)}
.media-grid{grid-template-columns:repeat(3,1fr)}

.feature-card, .book-card, .project-card, .capability-card, .prose-card, .contact-panel, .book-detail-card, .profile-panel, .statement-panel, .split-panel, .project-feature, .audiobook-banner, .contact-card, .cv-side .profile-panel, .hero-home .chapter-nav a, .visual-card, .sticky-card, .stat-strip article, .signal-strip, .project-system-map{
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(15,23,35,.88), rgba(10,16,24,.76)); border-radius:var(--radius); box-shadow:var(--shadow);
}
.feature-card, .capability-card, .book-card{padding:1.3rem}
.feature-card:hover, .project-card:hover, .capability-card:hover, .book-card:hover{transform:translateY(-4px); border-color:var(--line-strong)}
.feature-card, .project-card, .book-card, .capability-card{transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.card-number{font-family:'Space Grotesk'; font-size:1.1rem; color:var(--copper); margin-bottom:.8rem; font-weight:700}
.feature-card h3, .book-card h3, .project-card h2, .capability-card h3, .book-detail-card h2, .profile-panel h2, .contact-panel h2, .prose-card h2, .split-panel h2{font-family:'Space Grotesk'; font-size:1.45rem; margin:.15rem 0 .7rem; line-height:1.08; letter-spacing:-.03em}
.feature-card p, .book-card p, .project-card p, .capability-card p, .prose-card p, .contact-panel p{color:#d2ddec}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.split-panel{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; padding:1.2rem}
.split-panel.reverse-mobile{grid-template-columns:1fr 1fr}
.statement-panel{padding:1.6rem 1.5rem}
.statement-panel p{font-family:'Space Grotesk'; font-size:clamp(1.25rem, 2.6vw, 2rem); line-height:1.18; letter-spacing:-.04em; margin:0}
.visual-card{padding:.8rem}
.framed-image picture{display:block; overflow:hidden; border-radius:24px; position:relative}
.framed-image img{width:100%; height:100%; object-fit:cover}
.framed-image picture::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,10,16,.18)), radial-gradient(circle at 20% 15%, rgba(48,196,255,.18), transparent 30%); pointer-events:none}

.book-card .cover-frame, .detail-cover, .book-detail-card .cover-frame{padding:.5rem; background:linear-gradient(180deg, rgba(14,22,35,.96), rgba(8,13,21,.96)); border-radius:24px; border:1px solid rgba(106,147,201,.18)}
.cover-frame img{width:100%; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.32)}
.books-preview .book-card .media-frame{aspect-ratio: .68 / 1; overflow:hidden}
.books-preview .book-card img{height:100%; object-fit:cover}
.book-detail-card{display:grid; grid-template-columns:280px 1fr; gap:1.4rem; padding:1.2rem}
.book-detail-card .cover-frame.large{max-width:280px}
.books-grid{grid-template-columns:1fr; gap:1.2rem}
.book-stack{position:relative; height:460px; min-width:260px}
.stack-card{position:absolute; width:270px; padding:.55rem; border-radius:22px; background:rgba(10,16,25,.92); border:1px solid rgba(103,150,205,.24); box-shadow:var(--shadow)}
.stack-card img{border-radius:16px}
.stack-one{right:8%; top:0; transform:rotate(4deg)}
.stack-two{left:8%; top:72px; transform:rotate(-8deg)}
.stack-three{right:18%; top:180px; transform:rotate(8deg)}

.profile-panel{padding:1rem}
.compact-profile{display:flex; gap:1rem; align-items:center}
.profile-photo-wrap{width:122px; min-width:122px; aspect-ratio:1/1; overflow:hidden; border-radius:22px; background:linear-gradient(180deg, rgba(30,49,78,.96), rgba(16,23,34,.96)); border:1px solid rgba(104,147,200,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.profile-photo-wrap img{width:100%; height:100%; object-fit:cover}
.contact-list{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.7rem}
.contact-list li{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.contact-list span{color:var(--muted); font-size:.88rem}
.contact-list a{font-weight:600}

.prose-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem}
.prose-card{padding:1.4rem}
.principles-panel{padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(15,22,33,.86), rgba(11,16,24,.75));}
.principle-list{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:1rem}
.principle-list li{padding:1rem 1rem; border:1px solid rgba(106,147,201,.16); border-radius:20px; background:rgba(255,255,255,.02)}
.principle-list strong{display:block; margin-bottom:.35rem; font-size:1rem}
.principle-list span{color:var(--muted)}

.projects-grid .project-card{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; padding:1.1rem}
.project-visual{padding:.4rem; border-radius:24px; background:linear-gradient(180deg, rgba(13,18,28,.94), rgba(7,11,18,.92)); border:1px solid rgba(106,147,201,.18)}
.project-visual img{width:100%; border-radius:18px}
.project-highlight-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.project-feature{display:grid; grid-template-columns:210px 1fr; gap:1.2rem; padding:1rem}
.project-thumb{padding:.4rem; border-radius:20px; background:rgba(255,255,255,.02); border:1px solid rgba(106,147,201,.16)}

.capability-card{padding:1.25rem}
.capability-card img{width:56px; height:56px; color:var(--blue); margin-bottom:.9rem; opacity:.95}
.chip-row, .quiet-facts{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem}
.chip-row span, .quiet-facts span{display:inline-flex; padding:.6rem .9rem; border-radius:999px; border:1px solid rgba(105,146,200,.2); color:var(--muted); background:rgba(255,255,255,.02)}
.engineering-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.engineering-profile-panel{max-width:400px; margin-left:auto}
.portrait-spotlight{padding:.7rem; max-width:360px; margin:0 auto 1rem; border-radius:34px}
.portrait-spotlight img{border-radius:24px}
.small-frame{max-width:500px}

.contact-panels{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.contact-panel{padding:1.4rem}
.contact-rows{display:grid; gap:.9rem; margin-top:.8rem}
.contact-rows a{padding:1rem 1rem; border-radius:18px; border:1px solid rgba(106,147,201,.16); background:rgba(255,255,255,.02)}
.contact-rows span{display:block; color:var(--muted); font-size:.84rem}
.wrap-actions{align-items:flex-start}

.cv-layout{display:grid; grid-template-columns:320px 1fr; gap:1.2rem}
.sticky-card{position:sticky; top:100px}
.cv-main{display:grid; gap:1.2rem}
.bullet-grid{margin:0; padding-left:1.1rem; columns:2; gap:1rem}
.bullet-grid li{margin-bottom:.6rem; break-inside:avoid}

.site-footer{padding:3.5rem 0 5rem; border-top:1px solid rgba(108,147,200,.12); margin-top:3rem; background:linear-gradient(180deg, rgba(7,12,20,.26), rgba(6,10,16,.7))}
.footer-grid{display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:1.5rem}
.footer-brand img{height:24px}
.footer-brand span{font-weight:700}
.site-footer h3{font-size:1rem; margin:0 0 .7rem; color:var(--white)}
.footer-links{display:grid; gap:.45rem}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--white)}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; align-items:center; border-top:1px solid rgba(108,147,200,.12); margin-top:1.6rem; padding-top:1rem; color:var(--muted)}
.footer-bottom a{color:var(--blue)}
.mobile-actionbar{display:none}

.lightbox{position:fixed; inset:0; background:rgba(1,5,10,.82); display:none; place-items:center; padding:1rem; z-index:200}
.lightbox.is-open{display:grid}
.lightbox-panel{width:min(860px, 100%); background:#0c1623; border:1px solid rgba(106,147,201,.26); border-radius:26px; padding:1rem; box-shadow:var(--shadow)}
.lightbox-panel img{width:100%; max-height:78vh; object-fit:contain; border-radius:18px; background:#09111b}
.lightbox-panel p{color:var(--muted); margin:.75rem .3rem .1rem}
.lightbox-close{position:absolute; transform:translate(0,0); background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:999px; width:44px; height:44px; font-size:1.5rem; margin:1rem 1rem 0 auto; display:block; cursor:pointer}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .75s ease, transform .75s ease}
.reveal.is-visible{opacity:1; transform:none}

@media (max-width: 1080px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute; left:1rem; right:1rem; top:78px; display:none; padding:1rem; border-radius:22px; border:1px solid var(--line); background:rgba(8,13,21,.96); box-shadow:var(--shadow); flex-direction:column; align-items:flex-start}
  .nav-links.is-open{display:flex}
  .nav-links a.active::after, .nav-links a:hover::after{bottom:-.35rem}
  .hero-grid, .page-hero-grid, .engineering-hero-grid, .split-panel, .projects-grid .project-card, .project-feature, .contact-panels, .cv-layout{grid-template-columns:1fr}
  .hero-home{padding-top:2.5rem}
  .hero-visual{order:-1; justify-content:stretch}
  .hero-portrait-card{max-width:none; width:100%;}
  .signal-meta, .stat-strip{grid-template-columns:repeat(2,1fr)}
  .book-stack{height:300px}
  .stack-card{width:190px}
  .project-highlight-grid, .prose-grid, .cards-grid{grid-template-columns:1fr}
  .book-detail-card{grid-template-columns:1fr}
  .book-detail-card .cover-frame.large{max-width:260px}
  .compact-profile{align-items:flex-start}
}
@media (max-width: 640px){
  .container{width:min(100% - 1rem, 100%)}
  .nav-shell{min-height:76px}
  .brand span{font-size:.98rem; max-width:160px; overflow:hidden; text-overflow:ellipsis}
  .hero-copy h1, .page-hero h1{font-size:clamp(2.6rem, 13vw, 4rem)}
  .lead{font-size:1.03rem}
  .signal-meta, .stat-strip, .capability-grid, .media-grid, .feature-grid{grid-template-columns:1fr}
  .section{padding:3rem 0}
  .section.compact{padding:1.5rem 0}
  .hero-section{padding:2rem 0 1.2rem}
  .profile-photo-wrap{width:88px; min-width:88px; border-radius:18px}
  .compact-profile{gap:.8rem}
  .profile-meta h2{font-size:1.4rem}
  .book-stack{height:250px}
  .stack-card{width:155px}
  .statement-panel p{font-size:1.2rem}
  .contact-list li{display:grid}
  .button{width:100%}
  .hero-actions .button, .book-links .button, .actions .button{width:auto}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start}
  .mobile-actionbar{position:fixed; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background:rgba(6,10,16,.92); backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,.08); z-index:90}
  .mobile-actionbar a{display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); font-weight:700}
  body{padding-bottom:90px}
}


/* V33 logo, portrait blend and corrected project links */
.brand img{
  height:34px;
}
.hero-portrait-card,
.portrait-spotlight{
  border-color:rgba(84, 210, 255, .34);
  background:
    radial-gradient(circle at 55% 35%, rgba(72,203,255,.18), transparent 28%),
    radial-gradient(circle at 24% 72%, rgba(243,167,91,.14), transparent 34%),
    linear-gradient(180deg, rgba(9,18,29,.96), rgba(5,10,17,.96));
  box-shadow:
    0 26px 85px rgba(0,0,0,.44),
    0 0 60px rgba(43,169,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.045);
}
.hero-portrait-card::after,
.portrait-spotlight::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(5,10,17,.32)),
    radial-gradient(circle at 68% 28%, rgba(82,212,255,.18), transparent 26%);
  mix-blend-mode:screen;
}
.hero-portrait-card picture,
.portrait-spotlight picture{
  position:relative;
  z-index:2;
}
.hero-portrait-card img,
.portrait-spotlight img{
  filter:saturate(1.05) contrast(1.04);
}


/* V41 transparent profile portrait optimization */
.hero-portrait-card picture, .portrait-spotlight picture{display:block}
.hero-portrait-card img, .portrait-spotlight img{display:block; width:100%; height:auto; object-fit:contain; object-position:center bottom}
.profile-photo-wrap picture{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; padding:.2rem}
.profile-photo-wrap img{width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block}


/* V42 dynamic experience + mobile height optimization */
[data-experience-years]{
  white-space:nowrap;
}
@media (max-width: 900px){
  .hero-visual{
    order:0;
    margin-top:1rem;
  }
  .hero-portrait-card{
    width:100%;
    max-height:280px;
    min-height:210px;
    border-radius:26px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .hero-portrait-card picture{
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .hero-portrait-card img{
    max-height:270px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center bottom;
  }
}
@media (max-width: 640px){
  .hero-home{
    padding-top:1.35rem;
  }
  .hero-section{
    padding-bottom:.8rem;
  }
  .hero-copy h1,
  .page-hero h1{
    margin-bottom:.85rem;
  }
  .lead{
    line-height:1.48;
  }

  /* Home hero meta becomes compact one-row chips instead of tall cards. */
  .signal-meta{
    display:flex!important;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:.45rem;
    margin-top:1rem;
    padding-bottom:.15rem;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .signal-meta::-webkit-scrollbar{
    display:none;
  }
  .signal-meta div{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:.38rem;
    min-height:38px;
    max-width:230px;
    padding:.48rem .62rem;
    border-radius:999px;
    white-space:nowrap;
  }
  .signal-meta span{
    display:inline;
    margin:0;
    font-size:.64rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--blue);
  }
  .signal-meta strong{
    display:inline;
    font-size:.72rem;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Portrait becomes a compact banner instead of a full-height section. */
  .hero-visual{
    margin-top:.8rem;
  }
  .hero-portrait-card{
    min-height:0;
    height:clamp(175px, 32vh, 245px);
    max-height:245px;
    border-radius:22px;
  }
  .hero-portrait-card img{
    max-height:235px;
  }
  .hero-rings{
    opacity:.75;
  }

  /* Stats become a horizontal compressed strip instead of stacked tall cards. */
  .stat-strip{
    display:flex!important;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:.5rem;
    padding-bottom:.1rem;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .stat-strip::-webkit-scrollbar{
    display:none;
  }
  .stat-strip article{
    flex:0 0 auto;
    min-width:150px;
    max-width:190px;
    padding:.58rem .72rem;
    border-radius:16px;
    min-height:58px;
  }
  .stat-strip strong{
    display:block;
    font-size:.9rem;
    line-height:1.12;
  }
  .stat-strip span{
    font-size:.7rem;
    line-height:1.22;
    margin:0;
  }

  /* Remove excess vertical rhythm around the first stat strip. */
  .hero-home + .section.compact{
    padding-top:.65rem;
    padding-bottom:1.15rem;
  }
}


/* V45 dedicated mobile homepage rebuild */
.mobile-identity-note{
  display:none;
}
@media (max-width: 820px){
  html, body{
    max-width:100%;
    overflow-x:hidden;
  }

  .container{
    width:min(100% - 1.4rem, 100%);
  }

  .site-header{
    overflow:hidden;
  }
  .nav-shell{
    min-height:68px;
    gap:.7rem;
  }
  .brand img{
    height:30px;
    max-width:145px;
    object-fit:contain;
  }
  .nav-toggle{
    padding:.72rem .95rem;
    border-radius:18px;
    min-height:48px;
  }

  .hero-section.hero-home{
    padding-top:1.4rem;
    padding-bottom:.75rem;
  }
  .hero-grid{
    display:block;
  }
  .hero-copy{
    max-width:100%;
    overflow:hidden;
  }
  .hero-copy .eyebrow{
    max-width:100%;
    display:flex;
    align-items:center;
    gap:.55rem;
    font-size:.68rem;
    line-height:1.25;
    letter-spacing:.16em;
    margin-bottom:.8rem;
    white-space:normal;
  }
  .hero-copy .eyebrow::before{
    flex:0 0 38px;
    width:38px;
  }

  .hero-copy h1,
  .page-hero h1{
    font-size:clamp(2.45rem, 11.4vw, 4.25rem);
    line-height:.95;
    letter-spacing:-.065em;
    max-width:100%;
    margin-bottom:.9rem;
    overflow-wrap:normal;
  }
  .hero-copy h1 br{
    display:none;
  }
  .hero-copy .lead{
    max-width:100%;
    font-size:1rem;
    line-height:1.48;
    color:#dce6f2;
    margin-bottom:0;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem;
    margin-top:1.15rem;
  }
  .hero-actions .button{
    width:100%;
    min-height:46px;
    padding:.7rem .65rem;
    font-size:.88rem;
    border-radius:16px;
    text-align:center;
  }

  .mobile-identity-note{
    display:block;
    margin-top:.85rem;
    padding:.72rem .82rem;
    border:1px solid rgba(90, 190, 255, .22);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(12,20,31,.72), rgba(8,14,23,.58));
  }
  .mobile-identity-note strong{
    display:block;
    font-size:.92rem;
    line-height:1.2;
    color:var(--text);
  }
  .mobile-identity-note span{
    display:block;
    color:var(--muted);
    font-size:.74rem;
    line-height:1.35;
    margin-top:.2rem;
  }

  /* Hide the hero portrait on mobile homepage. It took too much height and broke the first impression. */
  .hero-home .hero-visual{
    display:none!important;
  }

  /* Replace desktop chips/cards with compact, non-overflowing mobile rows. */
  .signal-meta{
    display:grid!important;
    grid-template-columns:1fr;
    gap:.42rem;
    margin-top:.75rem;
    overflow:visible;
    padding:0;
  }
  .signal-meta div{
    min-height:0;
    max-width:none;
    width:100%;
    padding:.48rem .62rem;
    border-radius:14px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:.45rem;
    align-items:center;
    white-space:normal;
  }
  .signal-meta span{
    margin:0;
    font-size:.62rem;
    line-height:1;
    letter-spacing:.12em;
    color:var(--blue);
    text-transform:uppercase;
  }
  .signal-meta strong{
    display:block;
    font-size:.75rem;
    line-height:1.18;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero-home + .section.compact{
    padding-top:.7rem;
    padding-bottom:1.1rem;
  }
  .stat-strip{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    overflow:visible;
    padding:0;
  }
  .stat-strip article{
    min-width:0;
    max-width:none;
    min-height:0;
    padding:.62rem .62rem;
    border-radius:15px;
  }
  .stat-strip strong{
    font-size:.9rem;
    line-height:1.05;
  }
  .stat-strip span{
    font-size:.68rem;
    line-height:1.18;
  }

  .section{
    padding:2.75rem 0;
  }
  .section.compact{
    padding:1.35rem 0;
  }
  .section-head{
    display:block;
    margin-bottom:1rem;
  }
  .section-head p{
    max-width:100%;
    font-size:.96rem;
  }
  .feature-grid{
    grid-template-columns:1fr;
  }
  .feature-card{
    padding:1rem;
    border-radius:20px;
  }
}

@media (max-width: 390px){
  .hero-copy h1,
  .page-hero h1{
    font-size:clamp(2.2rem, 10.8vw, 3.55rem);
  }
  .hero-actions{
    grid-template-columns:1fr;
  }
}


/* V46 mobile-first experience template */
.mobile-home-experience{
  display:none;
}
@media (max-width: 820px){
  /* Replace the desktop-style opening with a mobile-native launch view. */
  .home-desktop-hero,
  .home-desktop-stats,
  .home-desktop-entry{
    display:none!important;
  }

  .mobile-home-experience{
    display:block;
    padding:0.8rem 0 1.1rem;
  }

  .mobile-experience-card{
    min-height:calc(100svh - 92px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.82rem;
    padding:1rem;
    border:1px solid rgba(86, 203, 255, .25);
    border-radius:28px;
    background:
      radial-gradient(circle at 90% 8%, rgba(57, 198, 255, .22), transparent 32%),
      radial-gradient(circle at 5% 78%, rgba(243, 167, 91, .13), transparent 36%),
      linear-gradient(180deg, rgba(10, 21, 34, .92), rgba(6, 12, 20, .96));
    box-shadow:
      0 22px 70px rgba(0,0,0,.36),
      inset 0 0 0 1px rgba(255,255,255,.035);
    overflow:hidden;
    position:relative;
  }

  .mobile-experience-card::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:48px 48px;
    opacity:.28;
    pointer-events:none;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.25));
  }

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

  .mobile-experience-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
  }

  .mobile-kicker{
    display:block;
    color:var(--blue);
    font-size:.68rem;
    line-height:1.1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.16em;
  }

  .mobile-experience-top strong{
    display:block;
    margin-top:.18rem;
    color:#edf5ff;
    font-size:.8rem;
    line-height:1.25;
    max-width:25ch;
  }

  .mobile-avatar{
    width:54px;
    height:54px;
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    border:1px solid rgba(86, 203, 255, .24);
    border-radius:18px;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 20%, rgba(86,203,255,.24), transparent 52%),
      rgba(255,255,255,.035);
  }

  .mobile-avatar img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
  }

  .mobile-experience-card h1{
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
    font-size:clamp(2.15rem, 9.8vw, 3.55rem);
    line-height:.95;
    letter-spacing:-.06em;
    margin:.15rem 0 0;
    color:var(--text);
  }

  .mobile-experience-card h1 span{
    color:var(--blue);
  }

  .mobile-lead{
    font-size:.94rem;
    line-height:1.42;
    color:#d7e4f3;
    margin:0;
    max-width:100%;
  }

  .mobile-route-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.55rem;
    margin-top:.05rem;
  }

  .mobile-route-grid a{
    min-height:86px;
    padding:.72rem;
    border:1px solid rgba(118, 167, 220, .2);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(14, 25, 40, .84), rgba(7, 13, 22, .72));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  }

  .mobile-route-grid span{
    display:block;
    color:var(--copper);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.14em;
  }

  .mobile-route-grid strong{
    display:block;
    color:var(--text);
    font-size:.86rem;
    line-height:1.15;
    margin:.22rem 0 .18rem;
  }

  .mobile-route-grid em{
    display:block;
    color:var(--muted);
    font-style:normal;
    font-size:.66rem;
    line-height:1.2;
  }

  .mobile-proof-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.45rem;
  }

  .mobile-proof-strip div{
    min-width:0;
    border:1px solid rgba(118, 167, 220, .18);
    border-radius:16px;
    background:rgba(255,255,255,.025);
    padding:.55rem .48rem;
  }

  .mobile-proof-strip strong{
    display:block;
    color:var(--text);
    font-size:.78rem;
    line-height:1.05;
    white-space:nowrap;
  }

  .mobile-proof-strip span{
    display:block;
    color:var(--muted);
    font-size:.62rem;
    line-height:1.1;
    margin-top:.2rem;
  }

  .mobile-contact-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.7rem;
    padding-top:.15rem;
  }

  .mobile-contact-row a{
    color:var(--blue);
    font-weight:800;
    font-size:.76rem;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .mobile-contact-row span{
    color:var(--muted);
    font-size:.72rem;
    white-space:nowrap;
  }

  /* Keep the rest of the page more compact after the mobile launch view. */
  .section{
    padding:2.45rem 0;
  }

  .section.compact{
    padding:1.25rem 0;
  }

  .feature-grid,
  .media-grid,
  .project-highlight-grid,
  .prose-grid,
  .cards-grid{
    gap:.85rem;
  }

  .feature-card,
  .book-card,
  .project-feature,
  .prose-card{
    border-radius:20px;
  }
}

@media (max-width: 390px){
  .mobile-experience-card{
    gap:.68rem;
    padding:.82rem;
    border-radius:24px;
  }

  .mobile-experience-card h1{
    font-size:clamp(1.98rem, 9.5vw, 3.1rem);
  }

  .mobile-lead{
    font-size:.87rem;
  }

  .mobile-route-grid a{
    min-height:78px;
    padding:.6rem;
  }

  .mobile-route-grid strong{
    font-size:.8rem;
  }

  .mobile-route-grid em{
    font-size:.61rem;
  }

  .mobile-proof-strip strong{
    font-size:.7rem;
  }

  .mobile-proof-strip span{
    font-size:.57rem;
  }

  .mobile-contact-row span{
    display:none;
  }
}


/* V47 mobile menu visibility fix */
@media (max-width: 900px){
  .nav-links[data-nav-links]{
    z-index:120;
  }
  .nav-links[data-nav-links].is-open,
  .nav-links[data-nav-links].open,
  .nav-links[data-nav-links].active{
    display:flex!important;
  }
  .nav-toggle{
    position:relative;
    z-index:130;
    touch-action:manipulation;
    cursor:pointer;
  }
  body.nav-is-open{
    overflow-x:hidden;
  }
}


/* V48 Omnibus book + individual book buttons */
.omnibus-highlight-section{
  padding-top:0;
}
.omnibus-banner{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr) auto;
  gap:1.2rem;
  align-items:center;
  padding:1.15rem;
  border:1px solid rgba(243, 210, 126, .26);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 15% 10%, rgba(243,210,126,.12), transparent 38%),
    radial-gradient(circle at 90% 85%, rgba(52,196,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(18,25,36,.92), rgba(8,14,22,.88));
  box-shadow:var(--shadow);
}
.omnibus-mini-cover{
  padding:.35rem;
  border-radius:18px;
  border:1px solid rgba(243,210,126,.22);
  background:rgba(0,0,0,.22);
}
.omnibus-mini-cover img{
  width:100%;
  border-radius:13px;
  box-shadow:0 16px 32px rgba(0,0,0,.36);
  cursor:zoom-in;
}
.omnibus-banner h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.35rem, 2.4vw, 2.35rem);
  letter-spacing:-.04em;
  line-height:1.05;
  margin:.15rem 0 .45rem;
}
.omnibus-banner p{
  margin:0;
  color:var(--muted);
}
.premium-book-card{
  border-color:rgba(243,210,126,.28);
  background:
    radial-gradient(circle at 8% 4%, rgba(243,210,126,.10), transparent 30%),
    radial-gradient(circle at 95% 85%, rgba(52,196,255,.10), transparent 38%),
    linear-gradient(180deg, rgba(15,23,35,.90), rgba(8,13,21,.80));
}
.book-links{
  gap:.65rem;
}
.stack-four{
  left:30%;
  top:245px;
  transform:rotate(-3deg);
}
@media (max-width: 1060px){
  .omnibus-banner{
    grid-template-columns:90px 1fr;
  }
  .omnibus-banner .hero-actions{
    grid-column:1 / -1;
    margin-top:.2rem;
  }
  .stack-four{
    display:none;
  }
}
@media (max-width: 640px){
  .omnibus-banner{
    grid-template-columns:72px 1fr;
    gap:.8rem;
    padding:.85rem;
    border-radius:22px;
  }
  .omnibus-banner h2{
    font-size:1.05rem;
  }
  .omnibus-banner p{
    font-size:.78rem;
    line-height:1.35;
  }
  .omnibus-banner .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.55rem;
  }
  .book-links{
    display:grid;
    grid-template-columns:1fr;
    gap:.55rem;
  }
  .book-links .button{
    width:100%;
  }
}


/* V49 Omnibus single placement */
#origin-omnibus{
  scroll-margin-top:110px;
}


/* V50 Books hero showcase redesign */
.book-showcase{
  position:relative;
  min-height:470px;
  border:1px solid rgba(86, 203, 255, .22);
  border-radius:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(52,196,255,.16), transparent 32%),
    radial-gradient(circle at 85% 85%, rgba(243,167,91,.10), transparent 34%),
    linear-gradient(180deg, rgba(12,22,35,.82), rgba(6,12,20,.92));
  box-shadow:var(--shadow);
  padding:1.1rem;
}
.showcase-orbit{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 42%, transparent 0 21%, rgba(86,203,255,.14) 21.2% 21.7%, transparent 22%),
    radial-gradient(circle at 50% 42%, transparent 0 34%, rgba(86,203,255,.10) 34.2% 34.7%, transparent 35%),
    radial-gradient(circle at 50% 42%, transparent 0 48%, rgba(243,167,91,.08) 48.2% 48.7%, transparent 49%);
  opacity:.9;
  pointer-events:none;
}
.showcase-feature{
  position:relative;
  z-index:2;
  width:min(58%, 255px);
  margin:0 auto;
  padding:.55rem;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(12,20,31,.92), rgba(4,8,14,.92));
  border:1px solid rgba(243,210,126,.24);
  transform:translateY(4px);
  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    0 0 46px rgba(52,196,255,.11);
}
.showcase-feature picture{
  display:block;
  cursor:zoom-in;
}
.showcase-feature img{
  width:100%;
  border-radius:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.40);
}
.showcase-feature span{
  display:block;
  color:var(--copper);
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  margin-top:.65rem;
}
.showcase-strip{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:.55rem;
  align-items:end;
  margin-top:-1.1rem;
}
.showcase-strip picture{
  display:block;
  padding:.26rem;
  border-radius:14px;
  background:rgba(2,8,14,.72);
  border:1px solid rgba(86,203,255,.16);
  box-shadow:0 16px 32px rgba(0,0,0,.32);
  cursor:zoom-in;
  transition:transform .22s ease, border-color .22s ease;
}
.showcase-strip picture:hover{
  transform:translateY(-5px);
  border-color:rgba(86,203,255,.42);
}
.showcase-strip img{
  width:100%;
  border-radius:10px;
  aspect-ratio:.68 / 1;
  object-fit:cover;
}
.showcase-caption{
  position:relative;
  z-index:3;
  margin-top:.95rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  padding:.85rem .9rem;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.showcase-caption strong{
  color:var(--text);
  line-height:1.15;
}
.showcase-caption span{
  color:var(--muted);
  font-size:.82rem;
}
.book-stack{
  display:none;
}
@media(max-width:1060px){
  .book-showcase{
    min-height:auto;
  }
  .showcase-feature{
    width:min(44%, 220px);
  }
  .showcase-strip{
    margin-top:.9rem;
  }
}
@media(max-width:760px){
  .book-showcase{
    padding:.85rem;
    border-radius:24px;
  }
  .showcase-feature{
    width:min(52%, 180px);
  }
  .showcase-strip{
    grid-template-columns:repeat(5, 74px);
    overflow-x:auto;
    padding-bottom:.25rem;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .showcase-strip::-webkit-scrollbar{
    display:none;
  }
  .showcase-caption{
    display:block;
    padding:.75rem;
  }
  .showcase-caption span{
    display:block;
    margin-top:.15rem;
  }
}


/* V51 cinematic site background enhancement */
body{
  background:
    radial-gradient(circle at 12% -6%, rgba(44,118,214,.28), transparent 22%),
    radial-gradient(circle at 88% 7%, rgba(52,196,255,.19), transparent 18%),
    radial-gradient(circle at 50% 34%, rgba(18,58,106,.10), transparent 28%),
    radial-gradient(circle at 50% 120%, rgba(24,87,151,.14), transparent 32%),
    linear-gradient(180deg, #050b14 0%, #06101a 22%, #07111b 52%, #060d16 100%);
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%, rgba(44,118,214,.12), transparent 18%),
    radial-gradient(circle at 76% 12%, rgba(52,196,255,.10), transparent 14%),
    radial-gradient(circle at 82% 76%, rgba(243,167,91,.05), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 24%, transparent 78%, rgba(255,255,255,.02));
}
.site-backdrop{
  z-index:-1;
  opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    radial-gradient(circle at 80% 10%, rgba(52,196,255,.12), transparent 18%),
    radial-gradient(circle at 12% 22%, rgba(62,122,212,.10), transparent 16%);
  background-size:78px 78px, 78px 78px, auto, auto;
  background-position:center center, center center, center top, left top;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.45));
}
.site-backdrop::before,
.site-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.site-backdrop::before{
  background:
    linear-gradient(118deg, transparent 0 26%, rgba(52,196,255,.05) 26.2%, transparent 26.6%),
    linear-gradient(152deg, transparent 0 62%, rgba(98,170,255,.04) 62.2%, transparent 62.55%),
    linear-gradient(90deg, transparent 0 84%, rgba(243,167,91,.04) 84.2%, transparent 84.45%);
  opacity:.9;
}
.site-backdrop::after{
  background:
    radial-gradient(circle at 82% 11%, rgba(52,196,255,.12), transparent 0 9%, rgba(52,196,255,.08) 9.3%, transparent 9.7%),
    radial-gradient(circle at 82% 11%, transparent 0 16%, rgba(52,196,255,.06) 16.25%, transparent 16.55%),
    radial-gradient(circle at 17% 68%, rgba(243,167,91,.09), transparent 0 7%, rgba(243,167,91,.06) 7.25%, transparent 7.55%),
    radial-gradient(circle at 17% 68%, transparent 0 13%, rgba(243,167,91,.05) 13.2%, transparent 13.55%);
  mix-blend-mode:screen;
  opacity:.72;
}
.site-header{
  background:rgba(5,10,16,.78);
  border-bottom:1px solid rgba(110,147,192,.16);
  box-shadow:0 10px 34px rgba(0,0,0,.18);
}
.section,
.hero-section,
.site-footer{
  position:relative;
}
.hero-section::before,
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(52,196,255,.035), transparent),
    radial-gradient(circle at 88% 14%, rgba(52,196,255,.07), transparent 16%);
  opacity:.65;
}
.feature-card, .book-card, .project-card, .capability-card, .prose-card, .contact-panel, .book-detail-card, .profile-panel, .statement-panel, .split-panel, .project-feature, .audiobook-banner, .contact-card, .cv-side .profile-panel, .hero-home .chapter-nav a, .visual-card, .sticky-card, .stat-strip article, .signal-strip, .project-system-map{
  backdrop-filter:blur(8px);
}
@media (max-width: 820px){
  body{
    background:
      radial-gradient(circle at 50% -4%, rgba(44,118,214,.23), transparent 28%),
      radial-gradient(circle at 100% 10%, rgba(52,196,255,.14), transparent 24%),
      radial-gradient(circle at 0% 72%, rgba(243,167,91,.06), transparent 24%),
      linear-gradient(180deg, #050b14 0%, #06101a 32%, #060d16 100%);
    background-attachment:scroll;
  }
  .site-backdrop{
    opacity:.34;
    background-size:52px 52px, 52px 52px, auto, auto;
  }
  .site-backdrop::before{
    background:
      linear-gradient(135deg, transparent 0 34%, rgba(52,196,255,.045) 34.2%, transparent 34.55%),
      linear-gradient(90deg, transparent 0 88%, rgba(243,167,91,.03) 88.15%, transparent 88.4%);
  }
  .site-backdrop::after{
    opacity:.52;
    background:
      radial-gradient(circle at 88% 10%, rgba(52,196,255,.10), transparent 0 8%, rgba(52,196,255,.06) 8.3%, transparent 8.65%),
      radial-gradient(circle at 88% 10%, transparent 0 14%, rgba(52,196,255,.05) 14.2%, transparent 14.5%);
  }
  .hero-section::before,
  .site-footer::before{
    opacity:.42;
  }
}


/* V52 homepage hero second pass */
.hero-home{
  overflow:hidden;
  isolation:isolate;
}
.hero-home::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 72% 26%, rgba(52,196,255,.12), transparent 0 17%, rgba(52,196,255,.08) 17.25%, transparent 17.7%),
    radial-gradient(circle at 72% 26%, transparent 0 28%, rgba(52,196,255,.05) 28.25%, transparent 28.7%),
    radial-gradient(circle at 68% 44%, rgba(38,92,165,.12), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 16%, transparent 78%, rgba(255,255,255,.012));
  opacity:.95;
}
.hero-home .container{
  position:relative;
}
.hero-home .container::before,
.hero-home .container::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.hero-home .container::before{
  left:44%;
  right:1%;
  top:6%;
  bottom:10%;
  z-index:0;
  border-radius:40px;
  background:
    linear-gradient(135deg, rgba(52,196,255,.07), transparent 18%, transparent 68%, rgba(52,196,255,.04) 100%),
    linear-gradient(90deg, transparent 0 52%, rgba(52,196,255,.045) 52.15%, transparent 52.4%),
    linear-gradient(90deg, transparent 0 76%, rgba(243,167,91,.04) 76.15%, transparent 76.4%),
    radial-gradient(circle at 62% 26%, rgba(52,196,255,.16), transparent 13%),
    radial-gradient(circle at 55% 50%, rgba(36,83,148,.13), transparent 24%),
    radial-gradient(circle at 84% 68%, rgba(243,167,91,.06), transparent 14%);
  opacity:.95;
}
.hero-home .container::after{
  left:6%;
  right:6%;
  bottom:4%;
  height:34%;
  z-index:0;
  background:
    radial-gradient(circle at 72% 4%, rgba(52,196,255,.11), transparent 14%),
    linear-gradient(180deg, transparent 0 36%, rgba(8,14,22,.12) 36.2%, rgba(7,11,18,.62) 100%),
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(116,160,209,.09) 8.12% 8.34%, transparent 8.5% 16%),
    linear-gradient(90deg,
      transparent 0 6%, rgba(52,196,255,.22) 6.12% 6.26%, transparent 6.4% 14%,
      rgba(52,196,255,.14) 14.18% 14.32%, transparent 14.46% 24%,
      rgba(243,167,91,.12) 24.16% 24.28%, transparent 24.42% 33%,
      rgba(52,196,255,.18) 33.22% 33.36%, transparent 33.5% 42%,
      rgba(52,196,255,.13) 42.14% 42.3%, transparent 42.45% 50%,
      rgba(243,167,91,.12) 50.14% 50.26%, transparent 50.38% 58%,
      rgba(52,196,255,.16) 58.12% 58.28%, transparent 58.42% 68%,
      rgba(52,196,255,.15) 68.2% 68.36%, transparent 68.5% 78%,
      rgba(243,167,91,.08) 78.12% 78.24%, transparent 78.35% 100%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.2) 18%, rgba(255,255,255,.96) 72%, rgba(255,255,255,.72) 100%);
  opacity:.56;
}
.hero-home .hero-copy,
.hero-home .hero-visual{
  position:relative;
  z-index:2;
}
.hero-home .hero-copy{
  padding:1.4rem 0;
}
.hero-home .hero-copy::after{
  content:"";
  position:absolute;
  left:0;
  right:26%;
  bottom:.1rem;
  height:1px;
  background:linear-gradient(90deg, rgba(52,196,255,.45), rgba(52,196,255,.12), transparent);
  opacity:.7;
}
.hero-home .eyebrow{
  text-shadow:0 0 18px rgba(52,196,255,.08);
}
.hero-home .lead{
  text-shadow:0 1px 0 rgba(0,0,0,.16);
}
.hero-home .hero-actions{
  margin-top:1.8rem;
}
.hero-home .hero-portrait-card{
  box-shadow:
    0 30px 90px rgba(0,0,0,.46),
    0 0 72px rgba(43,169,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.hero-home .hero-rings{
  background:
    radial-gradient(circle at 50% 42%, rgba(75,179,255,.3), transparent 14%),
    radial-gradient(circle at 50% 42%, transparent 21%, rgba(75,179,255,.24) 21.25%, transparent 22%),
    radial-gradient(circle at 50% 42%, transparent 31%, rgba(75,179,255,.18) 31.25%, transparent 32%),
    radial-gradient(circle at 50% 42%, transparent 41%, rgba(75,179,255,.12) 41.25%, transparent 42%),
    linear-gradient(135deg, transparent 0 58%, rgba(52,196,255,.05) 58.2%, transparent 58.45%);
  opacity:.92;
}
.home-desktop-entry,
.home-desktop-stats{
  overflow:hidden;
}
.home-desktop-entry .container,
.home-desktop-stats .container{
  position:relative;
}
.home-desktop-entry .container::before{
  content:"";
  position:absolute;
  inset:-6% -2% auto -2%;
  height:60%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 24%, rgba(52,196,255,.08), transparent 18%),
    linear-gradient(90deg, transparent, rgba(52,196,255,.03), transparent);
  opacity:.8;
}
@media (max-width: 820px){
  .mobile-experience-card{
    background:
      radial-gradient(circle at 88% 14%, rgba(57,198,255,.28), transparent 0 20%, rgba(57,198,255,.12) 20.3%, transparent 20.8%),
      radial-gradient(circle at 12% 86%, rgba(243,167,91,.10), transparent 32%),
      linear-gradient(180deg, rgba(10,21,34,.95), rgba(6,12,20,.98));
  }
  .mobile-experience-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 86% 18%, transparent 0 10%, rgba(86,203,255,.12) 10.25%, transparent 10.55%),
      radial-gradient(circle at 86% 18%, transparent 0 18%, rgba(86,203,255,.08) 18.25%, transparent 18.55%),
      linear-gradient(140deg, transparent 0 56%, rgba(86,203,255,.06) 56.2%, transparent 56.55%),
      linear-gradient(90deg, transparent 0 86%, rgba(243,167,91,.05) 86.2%, transparent 86.5%),
      repeating-linear-gradient(90deg, transparent 0 13%, rgba(255,255,255,.035) 13.15% 13.35%, transparent 13.5% 26%);
    opacity:.75;
    z-index:0;
    mask-image:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
  }
  .mobile-experience-card > *{
    position:relative;
    z-index:1;
  }
}



/* V53 integrated portrait halo + mobile experience refinement */
.hero-home{
  position:relative;
}
.hero-home::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 73% 24%, rgba(71,198,255,.10), transparent 0 14%, rgba(71,198,255,.06) 14.2%, transparent 14.7%),
    radial-gradient(circle at 73% 24%, transparent 0 24%, rgba(71,198,255,.05) 24.25%, transparent 24.75%),
    radial-gradient(circle at 78% 58%, rgba(13,24,39,.55), transparent 30%),
    linear-gradient(90deg, transparent 0 58%, rgba(71,198,255,.035) 58.15%, transparent 58.35%),
    linear-gradient(0deg, rgba(255,255,255,.01), transparent 20%, transparent 80%, rgba(255,255,255,.012));
  z-index:0;
  opacity:.92;
}
.hero-home .hero-visual{
  align-self:stretch;
}
.hero-home .hero-portrait-card{
  min-height:clamp(520px, 62vw, 760px);
  border:1px solid rgba(88, 206, 255, .26);
  border-radius:38px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 24%, rgba(86,210,255,.20), transparent 20%),
    radial-gradient(circle at 50% 46%, rgba(34,86,152,.18), transparent 30%),
    radial-gradient(circle at 82% 76%, rgba(243,167,91,.06), transparent 18%),
    linear-gradient(180deg, rgba(9,18,29,.98), rgba(4,9,16,.98));
  box-shadow:
    0 36px 90px rgba(0,0,0,.46),
    0 0 80px rgba(44,179,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.hero-home .hero-portrait-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(98,220,255,.30), rgba(98,220,255,.10) 24%, rgba(98,220,255,.04) 42%, transparent 62%),
    radial-gradient(ellipse at 50% 102%, rgba(6,10,16,.86), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 24%, transparent 72%, rgba(255,255,255,.03));
  filter:blur(10px);
  opacity:.95;
}
.hero-home .hero-portrait-card::after{
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%, transparent 70%, rgba(5,10,17,.46)),
    radial-gradient(circle at 64% 22%, rgba(108,219,255,.16), transparent 24%),
    linear-gradient(130deg, transparent 0 66%, rgba(72,198,255,.07) 66.2%, transparent 66.5%),
    linear-gradient(90deg, transparent 0 84%, rgba(243,167,91,.05) 84.15%, transparent 84.45%);
  mix-blend-mode:screen;
  opacity:.95;
}
.hero-home .hero-portrait-card picture{
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  z-index:2;
}
.hero-home .hero-portrait-card picture::before{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  top:12%;
  bottom:18%;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(128,230,255,.34), rgba(74,190,255,.16) 24%, rgba(41,120,194,.08) 42%, transparent 60%);
  filter:blur(14px);
  opacity:.92;
}
.hero-home .hero-portrait-card img{
  width:100%;
  max-width:92%;
  max-height:none;
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(1.04) contrast(1.05) drop-shadow(0 30px 40px rgba(0,0,0,.25));
}
.hero-home .hero-rings{
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 50% 29%, rgba(72,196,255,.18), transparent 0 12%, rgba(72,196,255,.18) 12.2%, transparent 12.7%),
    radial-gradient(circle at 50% 29%, transparent 0 21%, rgba(72,196,255,.16) 21.25%, transparent 21.8%),
    radial-gradient(circle at 50% 29%, transparent 0 30%, rgba(72,196,255,.11) 30.2%, transparent 30.8%),
    radial-gradient(circle at 50% 29%, transparent 0 39%, rgba(72,196,255,.08) 39.2%, transparent 39.8%),
    linear-gradient(135deg, transparent 0 61%, rgba(72,196,255,.05) 61.2%, transparent 61.5%);
  opacity:.9;
}
.hero-home .hero-copy{
  padding:1.8rem 0 1.3rem;
}
.hero-home .hero-copy::before{
  content:"";
  position:absolute;
  left:-2%;
  right:18%;
  top:-4%;
  bottom:18%;
  pointer-events:none;
  border-radius:34px;
  background:radial-gradient(circle at 20% 22%, rgba(52,196,255,.06), transparent 18%);
  z-index:-1;
}
.hero-home .hero-actions .button{
  min-width:190px;
}

@media (max-width: 820px){
  .mobile-home-experience{
    padding:.75rem 0 .95rem;
  }
  .mobile-experience-card{
    min-height:auto;
    gap:.72rem;
    padding:.9rem;
    border-radius:26px;
    justify-content:flex-start;
    background:
      radial-gradient(circle at 88% 16%, rgba(57,198,255,.30), transparent 0 18%, rgba(57,198,255,.12) 18.3%, transparent 18.8%),
      radial-gradient(circle at 8% 86%, rgba(243,167,91,.10), transparent 26%),
      linear-gradient(180deg, rgba(10,21,34,.96), rgba(6,12,20,.98));
    box-shadow:
      0 22px 70px rgba(0,0,0,.34),
      0 0 36px rgba(52,196,255,.06),
      inset 0 0 0 1px rgba(255,255,255,.035);
  }
  .mobile-experience-card::before{
    background-size:44px 44px;
    opacity:.24;
  }
  .mobile-experience-card::after{
    background:
      radial-gradient(circle at 86% 16%, transparent 0 8%, rgba(86,203,255,.12) 8.15%, transparent 8.5%),
      radial-gradient(circle at 86% 16%, transparent 0 15%, rgba(86,203,255,.07) 15.15%, transparent 15.5%),
      linear-gradient(140deg, transparent 0 58%, rgba(86,203,255,.05) 58.15%, transparent 58.45%),
      repeating-linear-gradient(90deg, transparent 0 13%, rgba(255,255,255,.03) 13.1% 13.28%, transparent 13.4% 26%);
  }
  .mobile-experience-top{
    gap:.7rem;
    align-items:flex-start;
  }
  .mobile-experience-top strong{
    font-size:.76rem;
    max-width:24ch;
  }
  .mobile-avatar{
    width:56px;
    height:56px;
    border-radius:17px;
    background:
      radial-gradient(circle at 50% 12%, rgba(86,203,255,.32), transparent 52%),
      radial-gradient(circle at 50% 92%, rgba(8,12,18,.72), transparent 44%),
      rgba(255,255,255,.035);
    box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .mobile-experience-card h1{
    font-size:clamp(2rem, 9.3vw, 3.25rem);
    line-height:.96;
    margin:0;
  }
  .mobile-lead{
    font-size:.9rem;
    line-height:1.38;
    max-width:35ch;
  }
  .mobile-route-grid{
    gap:.48rem;
  }
  .mobile-route-grid a{
    min-height:82px;
    padding:.68rem;
    border-radius:17px;
  }
  .mobile-route-grid strong{
    font-size:.83rem;
  }
  .mobile-route-grid em{
    font-size:.64rem;
  }
  .mobile-proof-strip{
    gap:.42rem;
  }
  .mobile-proof-strip div{
    padding:.5rem .44rem;
    border-radius:15px;
  }
  .mobile-proof-strip strong{
    font-size:.75rem;
  }
  .mobile-proof-strip span{
    font-size:.6rem;
  }
  .mobile-contact-row{
    padding-top:.05rem;
  }
  .mobile-contact-row a{
    font-size:.72rem;
  }
  .mobile-contact-row span{
    font-size:.68rem;
  }
}

@media (max-width: 640px){
  .hero-home::before,
  .hero-home::after,
  .hero-home .container::before,
  .hero-home .container::after{
    opacity:.75;
  }
}

@media (max-width: 390px){
  .mobile-experience-card{
    padding:.8rem;
    gap:.62rem;
  }
  .mobile-experience-top strong{
    font-size:.72rem;
  }
  .mobile-experience-card h1{
    font-size:clamp(1.9rem, 9vw, 2.85rem);
  }
  .mobile-route-grid a{
    min-height:74px;
    padding:.58rem;
  }
  .mobile-proof-strip strong{
    font-size:.68rem;
  }
  .mobile-proof-strip span{
    font-size:.56rem;
  }
}



/* V54 books-page coherence + global page-hero polish */
.page-hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(2.8rem, 4vw, 4rem);
  padding-bottom:2.3rem;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 18%, rgba(52,196,255,.10), transparent 16%),
    radial-gradient(circle at 18% 82%, rgba(243,167,91,.06), transparent 18%),
    linear-gradient(118deg, transparent 0 58%, rgba(52,196,255,.045) 58.15%, transparent 58.45%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%, transparent 82%, rgba(255,255,255,.018));
  opacity:.9;
}
.page-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:36%;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 0%, rgba(52,196,255,.08), transparent 15%),
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(120,170,220,.05) 8.12% 8.3%, transparent 8.45% 16%);
  mask-image:linear-gradient(180deg, transparent, rgba(255,255,255,.62));
  opacity:.42;
}
.page-hero .container{
  position:relative;
  z-index:1;
}
.page-hero-grid,
.engineering-hero-grid{
  align-items:center;
  gap:1.6rem;
}
.page-hero .hero-copy{
  position:relative;
  padding:1.2rem 0;
}
.page-hero .hero-copy::before{
  content:"";
  position:absolute;
  inset:-6% 14% -10% -2%;
  border-radius:34px;
  pointer-events:none;
  background:radial-gradient(circle at 18% 20%, rgba(52,196,255,.05), transparent 18%);
  z-index:-1;
}
.page-hero .hero-actions{
  margin-top:1.5rem;
}

.books-hero-grid{
  grid-template-columns: minmax(0, .96fr) minmax(330px, .94fr);
  align-items:start;
}
.books-hero .hero-copy{
  padding-top:1.4rem;
}
.books-hero .lead{
  max-width:58ch;
}

.collection-overview{
  padding-top:.9rem;
}
.collection-overview-shell{
  display:grid;
  gap:1rem;
}
.collection-signal-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.collection-signal-strip article,
.collection-jump-nav{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,23,35,.86), rgba(10,16,24,.74));
  border-radius:22px;
  box-shadow:var(--shadow);
}
.collection-signal-strip article{
  padding:1rem;
}
.collection-signal-strip strong{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.02rem;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--white);
}
.collection-signal-strip span{
  display:block;
  margin-top:.32rem;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.3;
}
.collection-jump-nav{
  padding:1rem;
}
.collection-jump-nav .jump-label{
  display:block;
  margin-bottom:.85rem;
  color:var(--blue);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.collection-jump-links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.collection-jump-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.68rem .95rem;
  border-radius:999px;
  border:1px solid rgba(106,147,201,.18);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:.9rem;
  font-weight:700;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.collection-jump-links a:hover{
  transform:translateY(-2px);
  border-color:rgba(86,203,255,.34);
  background:rgba(255,255,255,.05);
}

.book-showcase{
  min-height:520px;
}
.book-detail-card{
  position:relative;
  overflow:hidden;
}
.book-detail-card::after{
  content:"";
  position:absolute;
  right:-8%;
  top:-8%;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(52,196,255,.06), transparent 68%);
  pointer-events:none;
}
.book-detail-card .cover-frame.large{
  align-self:start;
}
.book-detail-card .eyebrow{
  margin-bottom:.55rem;
}
.book-detail-card h2{
  max-width:20ch;
}
.book-detail-card .lead{
  margin-bottom:.75rem;
}
.book-links{
  margin-top:1rem;
}
.book-links .button{
  min-width:170px;
}
.premium-book-card::after{
  background:radial-gradient(circle, rgba(243,210,126,.10), transparent 68%);
}

.books-grid{
  gap:1.25rem;
}
.books-grid > .book-detail-card{
  scroll-margin-top:110px;
}

@media (max-width: 1080px){
  .collection-signal-strip{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width: 900px){
  .page-hero{
    padding-bottom:1.7rem;
  }
  .books-hero-grid{
    grid-template-columns:1fr;
  }
  .books-hero .hero-copy{
    padding-top:.25rem;
  }
  .book-showcase{
    min-height:auto;
  }
}
@media (max-width: 640px){
  .page-hero{
    padding-top:1.85rem;
    padding-bottom:1.3rem;
  }
  .page-hero .hero-copy{
    padding:.35rem 0 .15rem;
  }
  .collection-overview{
    padding-top:.2rem;
  }
  .collection-overview-shell{
    gap:.75rem;
  }
  .collection-signal-strip{
    grid-template-columns:1fr 1fr;
    gap:.65rem;
  }
  .collection-signal-strip article{
    padding:.78rem;
    border-radius:18px;
  }
  .collection-signal-strip strong{
    font-size:.9rem;
  }
  .collection-signal-strip span{
    font-size:.72rem;
  }
  .collection-jump-nav{
    padding:.8rem;
    border-radius:18px;
  }
  .collection-jump-links{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:.15rem;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .collection-jump-links::-webkit-scrollbar{
    display:none;
  }
  .collection-jump-links a{
    flex:0 0 auto;
    min-height:40px;
    padding:.62rem .86rem;
    font-size:.82rem;
  }
  .book-detail-card{
    padding:1rem;
    border-radius:22px;
  }
  .book-detail-card h2{
    max-width:none;
  }
  .book-links{
    display:grid;
    grid-template-columns:1fr;
  }
  .book-links .button{
    min-width:0;
    width:100%;
  }
}
@media (max-width: 390px){
  .collection-signal-strip{
    grid-template-columns:1fr;
  }
}


/* V55 premium individual book pages + unified site sections */
.book-focus-hero{
  overflow:hidden;
}
.book-focus-grid{
  display:grid;
  grid-template-columns:minmax(260px, 420px) minmax(0, 1fr);
  gap:clamp(1.4rem, 3vw, 2.4rem);
  align-items:center;
}
.book-focus-cover{
  position:relative;
  padding:.72rem;
  border:1px solid rgba(86,203,255,.24);
  border-radius:32px;
  background:
    radial-gradient(circle at 50% 20%, rgba(52,196,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(12,22,35,.90), rgba(5,10,17,.94));
  box-shadow:var(--shadow), 0 0 64px rgba(52,196,255,.08);
}
.book-focus-cover::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 34%, rgba(52,196,255,.18), transparent 30%),
    radial-gradient(circle at 15% 90%, rgba(243,167,91,.08), transparent 20%);
  filter:blur(10px);
}
.book-focus-cover picture{
  display:block;
  cursor:zoom-in;
}
.book-focus-cover img{
  width:100%;
  border-radius:22px;
  box-shadow:0 24px 54px rgba(0,0,0,.42);
}
.delay-focus .book-focus-cover{
  border-color:rgba(243,167,91,.22);
  background:
    radial-gradient(circle at 50% 20%, rgba(243,167,91,.11), transparent 28%),
    linear-gradient(180deg, rgba(14,20,30,.93), rgba(5,10,17,.96));
}
.detail-signal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.detail-signal-grid article{
  border:1px solid var(--line);
  border-radius:22px;
  padding:1rem;
  background:
    radial-gradient(circle at 86% 14%, rgba(52,196,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(15,23,35,.86), rgba(10,16,24,.74));
  box-shadow:var(--shadow);
}
.detail-signal-grid span{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  margin-bottom:.24rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.detail-signal-grid strong{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  color:var(--white);
  font-size:1.08rem;
  line-height:1.1;
}
.story-panel{
  position:relative;
  overflow:hidden;
}
.story-panel::after{
  content:"";
  position:absolute;
  right:-10%;
  bottom:-20%;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(52,196,255,.08), transparent 68%);
  pointer-events:none;
}
.collection-series-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.collection-series-grid article{
  position:relative;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(15,23,35,.86), rgba(10,16,24,.74));
  padding:.7rem;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.collection-series-grid article::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 80% 12%, rgba(52,196,255,.08), transparent 24%);
}
.collection-series-grid picture{
  display:block;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  z-index:1;
  cursor:zoom-in;
}
.collection-series-grid img{
  width:100%;
  aspect-ratio:.68 / 1;
  object-fit:cover;
}
.collection-series-grid strong,
.collection-series-grid span{
  position:relative;
  z-index:1;
  display:block;
}
.collection-series-grid strong{
  margin-top:.75rem;
  font-family:'Space Grotesk',sans-serif;
  line-height:1.1;
}
.collection-series-grid span{
  color:var(--muted);
  font-size:.8rem;
  margin-top:.18rem;
}
.collection-series-grid .premium-series{
  border-color:rgba(243,210,126,.26);
}
.collection-series-grid .premium-series::after{
  background:radial-gradient(circle at 80% 12%, rgba(243,210,126,.10), transparent 24%);
}

/* Unify About / Engineering / Projects / Contact panels with the same cinematic language */
.about-hero .profile-panel,
.engineering-profile-panel,
.projects-grid .project-card,
.contact-panel,
.cv-layout .profile-panel,
.cv-main .prose-card,
.principles-panel,
.collection-jump-nav,
.collection-signal-strip article{
  background:
    radial-gradient(circle at 88% 12%, rgba(52,196,255,.055), transparent 28%),
    linear-gradient(180deg, rgba(15,23,35,.88), rgba(10,16,24,.76));
  border-color:rgba(106,147,201,.20);
}
.prose-card,
.capability-card,
.project-feature,
.project-card,
.contact-rows a,
.principle-list li{
  box-shadow:0 18px 60px rgba(0,0,0,.24);
}
.about-hero .profile-panel,
.engineering-profile-panel{
  position:relative;
  overflow:hidden;
}
.about-hero .profile-panel::after,
.engineering-profile-panel::after{
  content:"";
  position:absolute;
  right:-12%;
  top:-12%;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(52,196,255,.10), transparent 68%);
  pointer-events:none;
}
.projects-grid .project-card{
  overflow:hidden;
  position:relative;
}
.projects-grid .project-card::after{
  content:"";
  position:absolute;
  right:-12%;
  bottom:-20%;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(52,196,255,.08), transparent 68%);
  pointer-events:none;
}
.engineering-hero .portrait-spotlight{
  box-shadow:var(--shadow), 0 0 70px rgba(52,196,255,.08);
}
.section-head{
  position:relative;
}
.section-head::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.7rem;
  height:1px;
  background:linear-gradient(90deg, rgba(52,196,255,.28), rgba(52,196,255,.08), transparent);
  pointer-events:none;
}

@media (max-width: 900px){
  .book-focus-grid{
    grid-template-columns:1fr;
  }
  .book-focus-cover{
    width:min(360px, 100%);
    margin:0 auto;
    order:-1;
  }
  .detail-signal-grid,
  .collection-series-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width: 640px){
  .book-focus-cover{
    width:min(250px, 74vw);
    border-radius:24px;
    padding:.5rem;
  }
  .book-focus-cover img{
    border-radius:17px;
  }
  .detail-signal-grid{
    grid-template-columns:1fr;
    gap:.65rem;
  }
  .detail-signal-grid article{
    padding:.78rem;
    border-radius:18px;
  }
  .collection-series-grid{
    grid-template-columns:1fr 1fr;
    gap:.65rem;
  }
  .collection-series-grid article{
    border-radius:18px;
    padding:.5rem;
  }
  .collection-series-grid strong{
    font-size:.86rem;
  }
  .collection-series-grid span{
    font-size:.72rem;
  }
}


/* V56 mobile menu reliability fix */
@media (max-width: 900px){
  .nav-links[data-nav-links],
  #nav-links{
    display:none!important;
    position:absolute;
    left:1rem;
    right:1rem;
    top:78px;
    z-index:160;
  }
  .nav-links[data-nav-links].is-open,
  .nav-links[data-nav-links].open,
  .nav-links[data-nav-links].active,
  #nav-links.is-open,
  #nav-links.open,
  #nav-links.active{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .nav-toggle[data-nav-toggle]{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:180;
    cursor:pointer;
  }
}


/* V57 final mobile menu visibility fix + root zip package */
@media (max-width: 900px){
  .site-header,
  .nav-shell{
    overflow:visible!important;
  }
  .nav-shell{
    position:relative!important;
  }
  .nav-links[data-nav-links],
  #nav-links{
    display:none!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + .55rem)!important;
    width:100%!important;
    z-index:9999!important;
    padding:1rem!important;
    border-radius:22px!important;
    border:1px solid rgba(108,179,255,.28)!important;
    background:rgba(6,11,18,.98)!important;
    box-shadow:0 24px 80px rgba(0,0,0,.55)!important;
    backdrop-filter:blur(18px)!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:.85rem!important;
  }
  .nav-links[data-nav-links].is-open,
  .nav-links[data-nav-links].open,
  .nav-links[data-nav-links].active,
  #nav-links.is-open,
  #nav-links.open,
  #nav-links.active{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .nav-links[data-nav-links] a,
  #nav-links a{
    width:100%!important;
    padding:.78rem .85rem!important;
    border-radius:14px!important;
  }
  .nav-links[data-nav-links] a.active,
  #nav-links a.active{
    background:rgba(52,196,255,.08)!important;
  }
  .nav-toggle[data-nav-toggle]{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    z-index:10000!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    user-select:none!important;
  }
  body.nav-is-open{
    overflow-x:hidden!important;
  }
}


/* V58 session cache-bust menu safeguard */
@media (max-width: 900px){
  .site-header,.nav-shell{overflow:visible!important}
  .nav-shell{position:relative!important}
  .nav-links[data-nav-links],#nav-links{
    display:none!important;position:absolute!important;left:0!important;right:0!important;
    top:calc(100% + .55rem)!important;width:100%!important;z-index:99999!important;
  }
  .nav-links[data-nav-links].is-open,#nav-links.is-open{display:flex!important}
}


/* V59 CSS-only mobile menu - removes dependency on JS for mobile navigation */
.mobile-details-nav{
  display:none;
}
@media (max-width: 900px){
  .site-header,
  .nav-shell{
    overflow:visible!important;
  }
  .nav-shell{
    position:relative!important;
  }

  /* Hide the old JS-driven mobile button/nav on mobile. Desktop nav remains unchanged above 900px. */
  .site-header .nav-toggle[data-nav-toggle]{
    display:none!important;
  }
  .site-header .nav-links[data-nav-links],
  .site-header #nav-links{
    display:none!important;
  }

  .mobile-details-nav{
    display:block!important;
    margin-left:auto;
    position:relative;
    z-index:100000;
  }
  .mobile-details-nav summary{
    list-style:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:.72rem .95rem;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font:inherit;
    font-weight:800;
    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
  }
  .mobile-details-nav summary::-webkit-details-marker{
    display:none;
  }
  .mobile-details-nav[open] summary{
    border-color:rgba(86,203,255,.35);
    background:rgba(52,196,255,.08);
  }
  .mobile-details-panel{
    position:absolute;
    top:calc(100% + .6rem);
    right:0;
    width:min(320px, calc(100vw - 2rem));
    display:grid;
    gap:.55rem;
    padding:1rem;
    border-radius:22px;
    border:1px solid rgba(108,179,255,.30);
    background:rgba(6,11,18,.985);
    box-shadow:0 24px 80px rgba(0,0,0,.58);
    backdrop-filter:blur(18px);
  }
  .mobile-details-panel a{
    display:block;
    width:100%;
    padding:.82rem .85rem;
    border-radius:14px;
    color:var(--muted);
    font-weight:800;
  }
  .mobile-details-panel a.active,
  .mobile-details-panel a:hover{
    color:var(--white);
    background:rgba(52,196,255,.08);
  }
}
@media (min-width: 901px){
  .mobile-details-nav{
    display:none!important;
  }
}


/* V60 polish, conversion paths, SEO-stable cleanup */
@media (max-width: 900px){
  .mobile-details-nav{z-index:100000}
  .mobile-details-nav summary{
    gap:.55rem; min-width:92px;
    background:radial-gradient(circle at 80% 12%, rgba(52,196,255,.10), transparent 42%), linear-gradient(180deg, rgba(16,28,44,.86), rgba(8,14,24,.92));
    border-color:rgba(86,203,255,.22);
    box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .mobile-details-nav summary::after{content:"+"; color:var(--blue); font-weight:900; font-size:1rem; line-height:1}
  .mobile-details-nav[open] summary::after{content:"–"; color:var(--copper)}
  .mobile-details-panel{
    overflow:hidden;
    background:radial-gradient(circle at 88% 8%, rgba(52,196,255,.13), transparent 32%), radial-gradient(circle at 12% 100%, rgba(243,167,91,.08), transparent 34%), linear-gradient(180deg, rgba(7,13,22,.985), rgba(4,8,15,.985));
  }
  .mobile-details-panel::before{content:""; display:block; height:1px; width:100%; margin:0 0 .2rem; background:linear-gradient(90deg, rgba(52,196,255,.55), rgba(243,167,91,.22), transparent)}
}
.next-step-cta,.reading-path-card,.contact-route-card,.store-route-card,.error-route-grid a{
  position:relative; overflow:hidden; border:1px solid rgba(106,147,201,.20);
  background:radial-gradient(circle at 88% 12%, rgba(52,196,255,.07), transparent 28%), radial-gradient(circle at 10% 100%, rgba(243,167,91,.045), transparent 30%), linear-gradient(180deg, rgba(15,23,35,.88), rgba(10,16,24,.76));
  box-shadow:var(--shadow);
}
.next-step-cta{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.2rem; align-items:center; padding:1.2rem; border-radius:var(--radius)}
.next-step-cta::after,.reading-path-card::after,.contact-route-card::after,.store-route-card::after{content:""; position:absolute; right:-10%; top:-20%; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle, rgba(52,196,255,.08), transparent 68%); pointer-events:none}
.next-step-cta h2,.reading-path-card h3,.contact-route-card h2,.store-route-card h2{font-family:'Space Grotesk',sans-serif; letter-spacing:-.035em; line-height:1.08; margin:.15rem 0 .65rem}
.next-step-cta h2{font-size:clamp(1.45rem,2.4vw,2.35rem)}
.next-step-cta p,.reading-path-card p,.contact-route-card p,.store-route-card p{color:#d2ddec; max-width:64ch}
.reading-path-grid,.contact-route-grid,.store-route-grid{display:grid; gap:1rem}
.reading-path-grid{grid-template-columns:repeat(4,1fr)}
.contact-route-grid,.store-route-grid{grid-template-columns:repeat(3,1fr)}
.reading-path-card,.contact-route-card,.store-route-card{display:block; padding:1.1rem; border-radius:24px}
.reading-path-card span,.contact-route-card span,.error-route-grid span{display:block; color:var(--copper); font-weight:900; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.55rem}
.reading-path-card strong{display:block; color:var(--blue); margin-top:.8rem; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase}
.reading-path-card:hover,.contact-route-card:hover,.store-route-card:hover,.error-route-grid a:hover{transform:translateY(-3px); border-color:rgba(86,203,255,.32)}
.error-route-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.error-route-grid a{padding:1rem; border-radius:22px}
.error-route-grid strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; margin-bottom:.25rem}
.error-route-grid em{display:block; color:var(--muted); font-style:normal; font-size:.88rem}
.collection-overview-shell,.audiobook-banner,.book-detail-card,.projects-grid .project-card,.contact-panel,.cv-layout .profile-panel,.cv-main .prose-card,.capability-card,.prose-card{backdrop-filter:blur(8px)}
.store-route-card .hero-actions{margin-top:1rem}
@media (max-width:1080px){.reading-path-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.next-step-cta{grid-template-columns:1fr}.next-step-cta .hero-actions{margin-top:.2rem}.contact-route-grid,.store-route-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .reading-path-grid,.error-route-grid{grid-template-columns:1fr}
  .next-step-cta,.reading-path-card,.contact-route-card,.store-route-card,.error-route-grid a{border-radius:20px}
  .next-step-cta{padding:1rem}
  .next-step-cta .hero-actions,.store-route-card .hero-actions{display:grid; grid-template-columns:1fr}
  .next-step-cta .button,.store-route-card .button{width:100%}
}


/* V61 mobile homepage avatar tuning */
@media (max-width: 820px){
  .mobile-experience-top{
    align-items:flex-start;
    gap:.85rem;
  }

  /* Larger mobile portrait without changing the actual image file or breaking the card rhythm. */
  .mobile-avatar{
    width:clamp(74px, 17vw, 88px);
    height:clamp(74px, 17vw, 88px);
    flex:0 0 clamp(74px, 17vw, 88px);
    border-radius:24px;
    border-color:rgba(86,203,255,.34);
    background:
      radial-gradient(circle at 50% 12%, rgba(86,203,255,.38), transparent 54%),
      radial-gradient(circle at 50% 92%, rgba(8,12,18,.76), transparent 44%),
      rgba(255,255,255,.04);
    box-shadow:
      0 14px 34px rgba(0,0,0,.28),
      0 0 34px rgba(52,196,255,.12),
      inset 0 0 0 1px rgba(255,255,255,.04);
  }

  .mobile-avatar img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
  }

  .mobile-experience-top strong{
    max-width:22ch;
  }
}

@media (max-width: 390px){
  .mobile-avatar{
    width:68px;
    height:68px;
    flex-basis:68px;
    border-radius:21px;
  }

  .mobile-experience-top{
    gap:.65rem;
  }

  .mobile-experience-top strong{
    max-width:20ch;
  }
}


/* V62 books page simplification + mobile-first reading flow */
.books-quick-entry{
  padding-top:.35rem;
}
.books-quick-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.1rem;
  align-items:center;
  padding:1.05rem;
  border:1px solid rgba(106,147,201,.20);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(52,196,255,.07), transparent 28%),
    linear-gradient(180deg, rgba(15,23,35,.86), rgba(10,16,24,.74));
  box-shadow:var(--shadow);
}
.books-quick-card h2{
  font-family:'Space Grotesk',sans-serif;
  margin:.12rem 0 .45rem;
  letter-spacing:-.035em;
}
.books-quick-card p{
  color:var(--muted);
  margin:0;
  max-width:62ch;
}
.books-quick-card .hero-actions{
  margin:0;
}
.books-grid{
  gap:1rem;
}

/* Give book cards an easier, direct rhythm on mobile without removing the book text. */
@media (max-width: 900px){
  .books-hero-grid{
    gap:1rem;
  }
  .books-hero .hero-copy{
    padding-bottom:0;
  }
  .book-showcase{
    min-height:auto;
  }
  .books-quick-card{
    grid-template-columns:1fr;
  }
  .books-quick-card .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.65rem;
  }
}
@media (max-width: 760px){
  .books-hero .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.65rem;
  }
  .books-hero .hero-actions .button{
    width:100%;
    min-height:46px;
  }
  .book-showcase{
    padding:.72rem;
    border-radius:22px;
  }
  .showcase-feature{
    width:min(46%, 154px);
    padding:.42rem;
  }
  .showcase-feature span{
    font-size:.62rem;
    margin-top:.48rem;
  }
  .showcase-strip{
    grid-template-columns:repeat(5, 58px);
    gap:.45rem;
    margin-top:.75rem;
  }
  .showcase-caption{
    margin-top:.7rem;
    padding:.68rem;
    border-radius:16px;
  }
  .showcase-caption strong{
    font-size:.88rem;
  }
  .showcase-caption span{
    font-size:.72rem;
  }

  .audiobook-banner{
    display:grid;
    gap:.85rem;
    padding:.9rem;
    border-radius:20px;
  }
  .audiobook-banner h2{
    font-size:1.05rem;
  }
  .audiobook-banner p{
    font-size:.83rem;
    line-height:1.42;
  }
  .audiobook-banner .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.55rem;
  }
  .audiobook-banner .button{
    width:100%;
  }

  #books-grid{
    padding-top:1.5rem;
  }
  #books-grid .section-head{
    margin-bottom:.75rem;
  }
  #books-grid .section-head h2{
    font-size:1.45rem;
  }
  #books-grid .section-head p{
    font-size:.9rem;
    line-height:1.45;
  }

  .book-detail-card{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:.8rem;
    align-items:start;
    padding:.82rem;
    border-radius:20px;
  }
  .book-detail-card .media-frame.cover-frame.large{
    width:92px;
    min-width:92px;
    padding:.28rem;
    border-radius:14px;
  }
  .book-detail-card .media-frame.cover-frame.large img{
    border-radius:10px;
  }
  .book-detail-card h2{
    font-size:1.05rem;
    line-height:1.08;
    margin:.1rem 0 .45rem;
  }
  .book-detail-card .eyebrow{
    font-size:.62rem;
    margin-bottom:.32rem;
  }
  .book-detail-card .lead{
    font-size:.86rem;
    line-height:1.35;
    margin-bottom:.45rem;
  }
  .book-detail-card p:not(.lead){
    font-size:.8rem;
    line-height:1.42;
    margin:.35rem 0 0;
  }
  .book-links{
    margin-top:.7rem;
    gap:.45rem;
  }
  .book-links .button{
    min-height:40px;
    padding:.62rem .68rem;
    font-size:.78rem;
    border-radius:14px;
  }
  .books-final-cta{
    padding-top:1.2rem;
  }
}
@media (max-width: 430px){
  .books-hero .hero-actions,
  .books-quick-card .hero-actions{
    grid-template-columns:1fr;
  }
  .book-detail-card{
    grid-template-columns:82px minmax(0,1fr);
    gap:.72rem;
  }
  .book-detail-card .media-frame.cover-frame.large{
    width:82px;
    min-width:82px;
  }
  .book-detail-card p:not(.lead){
    display:block;
  }
}


/* V63 books page premium mobile simplification */
.book-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:0 0 .55rem;
  padding:.32rem .56rem;
  border-radius:999px;
  border:1px solid rgba(86,203,255,.22);
  background:rgba(52,196,255,.065);
  color:var(--blue);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#origin-omnibus .book-badge{
  border-color:rgba(243,210,126,.28);
  background:rgba(243,167,91,.08);
  color:var(--copper);
}
.book-secondary-links{
  display:flex;
  flex-wrap:wrap;
  gap:.58rem .8rem;
  align-items:center;
  margin-top:.64rem;
}
.book-secondary-links a{
  color:var(--muted);
  font-size:.86rem;
  font-weight:800;
  text-decoration:none;
}
.book-secondary-links a:hover{
  color:var(--blue);
}
.books-grid .premium-book-card{
  border-color:rgba(243,210,126,.34);
  box-shadow:var(--shadow), 0 0 62px rgba(243,167,91,.06);
}
.books-quick-entry{
  display:none!important;
}

@media (max-width: 900px){
  .books-hero{padding-bottom:1rem;}
  .books-hero .hero-copy{padding:.15rem 0 0;}
  .books-hero .eyebrow{margin-bottom:.55rem;}
  .books-hero h1{
    font-size:clamp(2.05rem, 9vw, 3.15rem);
    line-height:.96;
    max-width:10ch;
  }
  .books-hero .lead{
    font-size:.96rem;
    line-height:1.42;
    max-width:34ch;
    margin-top:.8rem;
  }
  .books-hero .hero-actions{margin-top:1rem;}
}

@media (max-width: 760px){
  .books-hero{
    padding-top:1.35rem;
    padding-bottom:.75rem;
  }
  .books-hero-grid{gap:.75rem;}
  .books-hero h1{
    font-size:clamp(1.9rem, 8.4vw, 2.7rem);
    max-width:11ch;
  }
  .books-hero .lead{
    font-size:.88rem;
    line-height:1.36;
    max-width:32ch;
  }
  .books-hero .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.55rem;
    margin-top:.85rem;
  }
  .books-hero .hero-actions .button{
    min-height:42px;
    padding:.62rem .7rem;
    font-size:.78rem;
    border-radius:14px;
  }

  .book-showcase{
    padding:.58rem;
    border-radius:20px;
    min-height:0;
  }
  .showcase-orbit{opacity:.45;}
  .showcase-feature{
    width:min(42%, 136px);
    padding:.35rem;
    border-radius:18px;
    transform:none;
  }
  .showcase-feature img{border-radius:12px;}
  .showcase-feature span{
    font-size:.58rem;
    margin-top:.38rem;
  }
  .showcase-strip{
    grid-template-columns:repeat(5, 50px);
    gap:.36rem;
    margin-top:.58rem;
  }
  .showcase-strip picture{
    padding:.18rem;
    border-radius:10px;
  }
  .showcase-strip img{border-radius:7px;}
  .showcase-caption{
    margin-top:.55rem;
    padding:.58rem .62rem;
    border-radius:14px;
  }
  .showcase-caption strong{font-size:.82rem;}
  .showcase-caption span{font-size:.67rem;}

  .audiobook-banner{
    padding:.78rem;
    border-radius:18px;
    gap:.7rem;
  }
  .audiobook-banner .eyebrow{font-size:.62rem;}
  .audiobook-banner h2{
    font-size:.98rem;
    line-height:1.12;
    margin:.1rem 0 .32rem;
  }
  .audiobook-banner p{
    font-size:.78rem;
    line-height:1.36;
  }
  .audiobook-banner .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.45rem;
  }
  .audiobook-banner .button{
    width:100%;
    min-height:40px;
    padding:.58rem .7rem;
    font-size:.76rem;
    border-radius:14px;
  }

  #books-grid{padding-top:1.15rem;}
  #books-grid .section-head{margin-bottom:.55rem;}
  #books-grid .section-head::after{bottom:-.38rem;}
  #books-grid .section-head h2{font-size:1.35rem;}
  #books-grid .section-head p{
    font-size:.82rem;
    line-height:1.38;
    max-width:34ch;
  }

  .books-grid{gap:.72rem;}
  .book-detail-card{
    grid-template-columns:86px minmax(0,1fr);
    gap:.72rem;
    padding:.72rem;
    border-radius:18px;
  }
  .book-detail-card::after{
    width:120px;
    height:120px;
    opacity:.8;
  }
  .book-detail-card .media-frame.cover-frame.large{
    width:86px;
    min-width:86px;
    padding:.22rem;
    border-radius:12px;
  }
  .book-detail-card .media-frame.cover-frame.large img{border-radius:8px;}
  .book-badge{
    margin-bottom:.36rem;
    padding:.25rem .46rem;
    font-size:.54rem;
    letter-spacing:.10em;
  }
  .book-detail-card .eyebrow{
    font-size:.58rem;
    line-height:1.2;
    margin-bottom:.24rem;
  }
  .book-detail-card h2{
    font-size:1rem;
    line-height:1.06;
    margin:.06rem 0 .36rem;
  }
  .book-detail-card .lead{
    font-size:.8rem;
    line-height:1.32;
    margin:0;
  }
  .book-detail-card .book-support{display:none;}
  .book-links{
    margin-top:.58rem;
    display:block;
  }
  .book-links .button{
    width:100%;
    min-height:38px;
    padding:.56rem .62rem;
    font-size:.72rem;
    border-radius:12px;
  }
  .book-secondary-links{
    gap:.46rem .62rem;
    margin-top:.48rem;
  }
  .book-secondary-links a{font-size:.68rem;}

  #origin-omnibus{
    border-color:rgba(243,210,126,.38);
    background:radial-gradient(circle at 8% 4%, rgba(243,210,126,.13), transparent 30%), radial-gradient(circle at 95% 85%, rgba(52,196,255,.09), transparent 38%), linear-gradient(180deg, rgba(15,23,35,.94), rgba(8,13,21,.86));
  }
  #origin-omnibus .lead{color:#f2d9a8;}

  .books-final-cta{padding-top:.95rem;}
  .books-final-cta .next-step-cta{
    padding:.78rem;
    border-radius:18px;
  }
  .books-final-cta .next-step-cta h2{font-size:1.08rem;}
  .books-final-cta .next-step-cta p{
    font-size:.78rem;
    line-height:1.35;
  }
  .books-final-cta .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.45rem;
  }
  .books-final-cta .button{
    width:100%;
    min-height:39px;
    padding:.55rem .7rem;
    font-size:.74rem;
    border-radius:13px;
  }
}

@media (max-width: 430px){
  .books-hero .hero-actions{grid-template-columns:1fr;}
  .book-detail-card{
    grid-template-columns:78px minmax(0,1fr);
    gap:.62rem;
  }
  .book-detail-card .media-frame.cover-frame.large{
    width:78px;
    min-width:78px;
  }
  .book-detail-card h2{font-size:.94rem;}
  .book-detail-card .lead{font-size:.76rem;}
}


/* V64 books cleanup */
.books-final-cta{
  display:none!important;
}
@media (max-width: 760px){
  #books-grid .section-head h2{
    font-size:1.42rem;
    max-width:16ch;
  }
  #books-grid .section-head p{
    max-width:31ch;
  }
}


/* V65 DraftEcho integration + UX polish */
.tool-cta-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem;border-radius:24px;border:1px solid rgba(106,147,201,.22);background:radial-gradient(circle at 12% 12%,rgba(52,196,255,.10),transparent 26%),radial-gradient(circle at 94% 88%,rgba(243,167,91,.06),transparent 30%),linear-gradient(180deg,rgba(15,23,35,.88),rgba(10,16,24,.76));box-shadow:var(--shadow);overflow:hidden;position:relative}
.tool-cta-card::after{content:"";position:absolute;right:-80px;top:-90px;width:210px;height:210px;border-radius:999px;background:radial-gradient(circle,rgba(52,196,255,.09),transparent 68%);pointer-events:none}
.tool-cta-icon,.tool-mark{display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:900;letter-spacing:-.06em;color:var(--white);border:1px solid rgba(86,203,255,.28);background:radial-gradient(circle at 70% 24%,rgba(52,196,255,.34),transparent 34%),linear-gradient(135deg,rgba(13,28,48,.96),rgba(5,10,18,.98));box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 36px rgba(52,196,255,.10)}
.tool-cta-icon{width:64px;height:64px;border-radius:20px;font-size:1.25rem}
.tool-mark{width:100%;min-height:190px;border-radius:22px;font-size:clamp(2.4rem,6vw,4.5rem)}
.tool-cta-card h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:.1rem 0 .45rem}
.tool-cta-card p{color:var(--muted);max-width:66ch}
.featured-project{border-color:rgba(86,203,255,.30)!important}
.draftecho-visual{background:radial-gradient(circle at 50% 28%,rgba(52,196,255,.14),transparent 30%),linear-gradient(180deg,rgba(7,17,30,.96),rgba(5,9,16,.96))}
@media (max-width:900px){.tool-cta-card{grid-template-columns:auto minmax(0,1fr)}.tool-cta-card .hero-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.2rem}.tool-cta-card .button{width:100%}}
@media (max-width:640px){.tool-cta-card{grid-template-columns:1fr;padding:.85rem;border-radius:20px}.tool-cta-icon{width:56px;height:56px;border-radius:18px;font-size:1.05rem}.tool-cta-card h2{font-size:1.1rem}.tool-cta-card p{font-size:.84rem;line-height:1.42}.tool-cta-card .hero-actions{grid-template-columns:1fr}.tool-mark{min-height:128px;border-radius:18px}}


/* V66 UX hub and clarity pass */
.featured-now-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.featured-now-card{position:relative;overflow:hidden;display:block;min-height:100%;padding:1.1rem;border-radius:24px;border:1px solid rgba(106,147,201,.22);background:radial-gradient(circle at 88% 12%,rgba(52,196,255,.08),transparent 28%),radial-gradient(circle at 10% 100%,rgba(243,167,91,.045),transparent 30%),linear-gradient(180deg,rgba(15,23,35,.88),rgba(10,16,24,.76));box-shadow:var(--shadow)}
.featured-now-card::after{content:"";position:absolute;right:-70px;top:-80px;width:180px;height:180px;border-radius:999px;background:radial-gradient(circle,rgba(52,196,255,.10),transparent 68%);pointer-events:none}
.feature-number,.project-type-badge{display:inline-flex;width:max-content;align-items:center;margin-bottom:.7rem;padding:.3rem .52rem;border-radius:999px;border:1px solid rgba(86,203,255,.22);background:rgba(52,196,255,.065);color:var(--blue);font-size:.66rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.feature-icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:.9rem;border-radius:18px;border:1px solid rgba(86,203,255,.28);background:radial-gradient(circle at 70% 24%,rgba(52,196,255,.32),transparent 34%),linear-gradient(135deg,rgba(13,28,48,.96),rgba(5,10,18,.98));font-family:'Space Grotesk',sans-serif;font-weight:900;letter-spacing:-.06em;color:var(--white)}
.delay-icon{border-color:rgba(243,167,91,.30);background:radial-gradient(circle at 70% 24%,rgba(243,167,91,.24),transparent 34%),linear-gradient(135deg,rgba(31,20,13,.96),rgba(5,10,18,.98))}
.featured-now-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;letter-spacing:-.035em;margin:0 0 .45rem}
.featured-now-card p{color:var(--muted);line-height:1.5}.featured-now-card strong{display:inline-flex;margin-top:.85rem;color:var(--blue);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.project-type-badge{margin-bottom:.55rem;color:var(--copper);border-color:rgba(243,167,91,.24);background:rgba(243,167,91,.075)}
.current-focus-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:center;padding:1.1rem;border-radius:24px;border:1px solid rgba(106,147,201,.22);background:radial-gradient(circle at 88% 12%,rgba(52,196,255,.08),transparent 28%),linear-gradient(180deg,rgba(15,23,35,.88),rgba(10,16,24,.76));box-shadow:var(--shadow)}
.current-focus-card h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:.15rem 0 .5rem}.current-focus-card p{color:var(--muted);max-width:72ch}.focus-links{display:flex;flex-wrap:wrap;gap:.55rem}.focus-links a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.65rem .9rem;border-radius:999px;border:1px solid rgba(106,147,201,.18);background:rgba(255,255,255,.035);color:var(--text);font-weight:800}
.store-hub-section .store-route-grid{grid-template-columns:repeat(4,1fr)}.site-footer{padding-bottom:calc(2.5rem + env(safe-area-inset-bottom))}
@media(max-width:1080px){.store-hub-section .store-route-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.featured-now-grid{grid-template-columns:1fr}.current-focus-card{grid-template-columns:1fr}.store-hub-section .store-route-grid{grid-template-columns:1fr}.site-footer{padding-bottom:calc(7.2rem + env(safe-area-inset-bottom))}}@media(max-width:640px){.featured-now-card{padding:.9rem;border-radius:20px}.feature-icon{width:50px;height:50px;border-radius:16px}.featured-now-card h3{font-size:1.08rem}.featured-now-card p{font-size:.84rem}.current-focus-card{padding:.9rem;border-radius:20px}.focus-links{display:grid;grid-template-columns:1fr}}


/* V67 desktop homepage portrait alignment */
@media (min-width: 901px){
  /*
    Moves the desktop homepage portrait/card upward so its visual start aligns
    closer to the main headline line "Engineer of..." instead of sitting low.
    Mobile is intentionally untouched.
  */
  .hero-home .hero-grid{
    align-items:start;
  }

  .hero-home .hero-visual{
    align-self:start;
    margin-top:clamp(-3.9rem, -4.8vw, -2.4rem);
  }

  .hero-home .hero-portrait-card{
    transform:translateY(0);
  }
}

@media (min-width: 1200px){
  .hero-home .hero-visual{
    margin-top:clamp(-4.7rem, -5.2vw, -3.2rem);
  }
}


/* V68 desktop homepage portrait higher alignment + stronger visual blend */
@media (min-width: 901px){
  /*
    Pushes the desktop hero portrait higher than V67 and blends it into the
    homepage atmosphere using CSS-only layers. The actual portrait image file
    is unchanged.
  */
  .hero-home .hero-grid{
    align-items:start;
  }

  .hero-home .hero-visual{
    align-self:start;
    margin-top:clamp(-6.4rem, -7.4vw, -4.6rem);
    position:relative;
  }

  .hero-home .hero-visual::before{
    content:"";
    position:absolute;
    inset:-18% -12% -8% -18%;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 50% 28%, rgba(86,203,255,.26), transparent 0 18%, rgba(86,203,255,.11) 18.3%, transparent 18.9%),
      radial-gradient(circle at 50% 28%, transparent 0 31%, rgba(86,203,255,.10) 31.2%, transparent 31.8%),
      radial-gradient(circle at 50% 28%, transparent 0 45%, rgba(86,203,255,.06) 45.2%, transparent 45.8%),
      linear-gradient(128deg, transparent 0 58%, rgba(86,203,255,.07) 58.15%, transparent 58.5%),
      linear-gradient(26deg, transparent 0 42%, rgba(243,167,91,.055) 42.15%, transparent 42.45%);
    filter:blur(.25px);
    opacity:.95;
    transform:translateY(-1.2rem);
  }

  .hero-home .hero-portrait-card{
    position:relative;
    z-index:1;
    border-color:rgba(105,216,255,.34);
    background:
      radial-gradient(circle at 50% 18%, rgba(93,218,255,.24), transparent 23%),
      radial-gradient(circle at 46% 42%, rgba(34,112,190,.20), transparent 38%),
      radial-gradient(circle at 80% 86%, rgba(243,167,91,.08), transparent 22%),
      linear-gradient(180deg, rgba(8,17,29,.98), rgba(3,8,15,.98));
    box-shadow:
      0 40px 105px rgba(0,0,0,.50),
      0 0 92px rgba(44,179,255,.16),
      0 0 42px rgba(243,167,91,.045),
      inset 0 0 0 1px rgba(255,255,255,.055);
  }

  .hero-home .hero-portrait-card::before{
    background:
      radial-gradient(ellipse at 50% 22%, rgba(110,226,255,.34), rgba(98,220,255,.13) 26%, rgba(41,120,194,.07) 48%, transparent 66%),
      radial-gradient(ellipse at 50% 102%, rgba(6,10,16,.90), transparent 50%),
      linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%, transparent 70%, rgba(255,255,255,.035));
    filter:blur(9px);
    opacity:1;
  }

  .hero-home .hero-portrait-card::after{
    background:
      radial-gradient(circle at 50% 22%, rgba(100,222,255,.18), transparent 26%),
      radial-gradient(circle at 72% 18%, rgba(52,196,255,.10), transparent 22%),
      linear-gradient(180deg, rgba(255,255,255,.045), transparent 20%, transparent 64%, rgba(5,10,17,.55)),
      linear-gradient(118deg, transparent 0 63%, rgba(72,198,255,.075) 63.15%, transparent 63.55%),
      linear-gradient(90deg, rgba(52,196,255,.07), transparent 18%, transparent 82%, rgba(243,167,91,.05));
    opacity:.98;
    mix-blend-mode:screen;
  }

  .hero-home .hero-portrait-card picture::before{
    left:10%;
    right:10%;
    top:4%;
    bottom:16%;
    background:
      radial-gradient(circle at 50% 22%, rgba(128,230,255,.42), rgba(74,190,255,.18) 24%, rgba(41,120,194,.10) 46%, transparent 64%);
    filter:blur(16px);
    opacity:1;
  }

  .hero-home .hero-portrait-card img{
    filter:
      saturate(1.06)
      contrast(1.06)
      drop-shadow(0 30px 42px rgba(0,0,0,.28))
      drop-shadow(0 0 22px rgba(74,190,255,.10));
  }

  .hero-home .hero-rings{
    opacity:1;
    background:
      radial-gradient(circle at 50% 24%, rgba(72,196,255,.22), transparent 0 12%, rgba(72,196,255,.18) 12.2%, transparent 12.7%),
      radial-gradient(circle at 50% 24%, transparent 0 22%, rgba(72,196,255,.16) 22.25%, transparent 22.8%),
      radial-gradient(circle at 50% 24%, transparent 0 33%, rgba(72,196,255,.11) 33.2%, transparent 33.75%),
      radial-gradient(circle at 50% 24%, transparent 0 46%, rgba(72,196,255,.075) 46.2%, transparent 46.75%),
      linear-gradient(135deg, transparent 0 61%, rgba(72,196,255,.06) 61.2%, transparent 61.5%),
      linear-gradient(25deg, transparent 0 46%, rgba(243,167,91,.045) 46.15%, transparent 46.45%);
  }
}

@media (min-width: 1200px){
  .hero-home .hero-visual{
    margin-top:clamp(-7.6rem, -8.2vw, -5.6rem);
  }
}

@media (min-width: 1500px){
  .hero-home .hero-visual{
    margin-top:-7.9rem;
  }
}


/* V73 site-wide ambient background system */
:root{
  --ambient-blue-soft: rgba(54, 196, 255, .13);
  --ambient-blue-faint: rgba(54, 196, 255, .055);
  --ambient-copper-soft: rgba(243, 167, 91, .085);
}

/*
  Site-wide atmosphere:
  CSS gradients only. No large background image, no video and no constant animation.
  This gives the whole site a connected premium/technical glow without meaningful load cost.
*/
.site-backdrop{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 74% 7%, rgba(54,196,255,.15), transparent 0 18rem),
    radial-gradient(circle at 17% 18%, rgba(54,196,255,.08), transparent 0 20rem),
    radial-gradient(circle at 88% 62%, rgba(243,167,91,.06), transparent 0 18rem),
    radial-gradient(circle at 44% 112%, rgba(54,196,255,.07), transparent 0 24rem),
    linear-gradient(180deg, #07101a 0%, #050a12 48%, #03070d 100%);
}

.site-backdrop::before,
.site-backdrop::after{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
}

.site-backdrop::before{
  z-index:-2;
  opacity:.70;
  background:
    linear-gradient(112deg, transparent 0 39%, rgba(54,196,255,.055) 39.15%, transparent 39.55%),
    linear-gradient(24deg, transparent 0 61%, rgba(243,167,91,.045) 61.15%, transparent 61.45%),
    repeating-linear-gradient(90deg, rgba(154,220,255,.028) 0 1px, transparent 1px 126px),
    repeating-linear-gradient(0deg, rgba(154,220,255,.018) 0 1px, transparent 1px 126px);
  mask:radial-gradient(ellipse at 50% 24%, black 0 54%, transparent 82%);
}

.site-backdrop::after{
  z-index:-1;
  opacity:.64;
  background:
    radial-gradient(circle at 72% 18%, transparent 0 7.8rem, rgba(75,179,255,.12) 7.85rem 7.92rem, transparent 8rem),
    radial-gradient(circle at 72% 18%, transparent 0 14rem, rgba(75,179,255,.075) 14.05rem 14.13rem, transparent 14.2rem),
    radial-gradient(circle at 72% 18%, transparent 0 21rem, rgba(75,179,255,.045) 21.05rem 21.13rem, transparent 21.2rem),
    radial-gradient(circle at 22% 72%, rgba(54,196,255,.075), transparent 0 18rem),
    radial-gradient(circle at 86% 84%, rgba(243,167,91,.055), transparent 0 16rem);
  filter:blur(.25px);
}

/* Let cards/sections sit on the atmosphere rather than fighting it. */
.hero-section,
.section{
  position:relative;
}

/* Restore a tasteful hero atmosphere without returning the thin cyan outline around the portrait. */
@media (min-width:1024px){
  .home-desktop-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 72% 24%, rgba(54,196,255,.16), transparent 0 18rem),
      radial-gradient(circle at 73% 36%, rgba(54,196,255,.075), transparent 0 29rem),
      linear-gradient(120deg, transparent 0 58%, rgba(54,196,255,.055) 58.15%, transparent 58.5%);
    opacity:.82;
  }

  .home-desktop-hero .hero-grid{
    position:relative;
    z-index:1;
  }

  .home-desktop-hero .hero-visual::before{
    opacity:.86!important;
    background:
      radial-gradient(circle at 58% 37%, rgba(54,196,255,.20), transparent 18%),
      radial-gradient(circle at 59% 42%, rgba(24,85,155,.32), transparent 39%),
      radial-gradient(circle at 71% 60%, rgba(243,167,91,.045), transparent 26%),
      linear-gradient(180deg, rgba(7,15,26,0), rgba(7,15,26,.28) 58%, rgba(7,15,26,.78))!important;
  }

  .home-desktop-hero .hero-rings{
    opacity:.68!important;
  }

  .home-desktop-hero .hero-rings::after{
    opacity:.48!important;
  }
}

/* Keep mobile lighter and cheaper visually. */
@media (max-width:760px){
  .site-backdrop{
    background:
      radial-gradient(circle at 86% 0%, rgba(54,196,255,.11), transparent 0 14rem),
      radial-gradient(circle at 16% 16%, rgba(54,196,255,.06), transparent 0 16rem),
      radial-gradient(circle at 50% 108%, rgba(54,196,255,.06), transparent 0 18rem),
      linear-gradient(180deg, #07101a 0%, #050a12 52%, #03070d 100%);
  }

  .site-backdrop::before{
    opacity:.26;
    background:
      linear-gradient(112deg, transparent 0 42%, rgba(54,196,255,.045) 42.15%, transparent 42.55%);
  }

  .site-backdrop::after{
    opacity:.28;
    filter:none;
  }
}


/* V74 darkened portrait integration + richer desktop hero atmosphere */
@media (min-width: 901px){
  .home-desktop-hero{
    overflow:hidden;
  }

  .home-desktop-hero::before{
    inset:-2% -4% -6% -4%!important;
    background:
      radial-gradient(circle at 73% 20%, rgba(46,190,255,.20), transparent 0 17rem),
      radial-gradient(circle at 72% 28%, rgba(21,70,130,.36), transparent 0 33rem),
      radial-gradient(circle at 18% 78%, rgba(46,190,255,.07), transparent 0 18rem),
      linear-gradient(118deg, transparent 0 54%, rgba(46,190,255,.07) 54.15%, transparent 54.55%),
      linear-gradient(22deg, transparent 0 58%, rgba(243,167,91,.04) 58.15%, transparent 58.45%),
      linear-gradient(180deg, rgba(255,255,255,.015), transparent 18%, transparent 82%, rgba(255,255,255,.02))!important;
    opacity:.96!important;
  }

  .home-desktop-hero::after{
    content:"";
    position:absolute;
    inset:-6% -6% -8% -6%;
    z-index:0;
    pointer-events:none;
    background:
      repeating-linear-gradient(90deg, rgba(120,205,255,.028) 0 1px, transparent 1px 132px),
      repeating-linear-gradient(0deg, rgba(120,205,255,.018) 0 1px, transparent 1px 132px),
      radial-gradient(circle at 70% 24%, transparent 0 10rem, rgba(70,176,255,.10) 10.05rem 10.12rem, transparent 10.2rem),
      radial-gradient(circle at 70% 24%, transparent 0 18rem, rgba(70,176,255,.07) 18.05rem 18.12rem, transparent 18.2rem),
      radial-gradient(circle at 70% 24%, transparent 0 27rem, rgba(70,176,255,.04) 27.05rem 27.12rem, transparent 27.2rem);
    opacity:.34;
    mask:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.72));
  }

  .hero-home .hero-grid{
    position:relative;
    z-index:1;
  }

  .hero-home .hero-visual{
    position:relative;
    isolation:isolate;
  }

  .hero-home .hero-visual::before{
    inset:-12% -10% -8% -14%!important;
    background:
      radial-gradient(circle at 54% 26%, rgba(72,196,255,.18), transparent 0 17%),
      radial-gradient(circle at 55% 28%, rgba(24,85,155,.26), transparent 0 34%),
      radial-gradient(circle at 70% 62%, rgba(243,167,91,.04), transparent 0 22%),
      linear-gradient(180deg, rgba(7,15,26,0), rgba(7,15,26,.24) 54%, rgba(7,15,26,.72))!important;
    opacity:.94!important;
    transform:none!important;
    filter:blur(.2px)!important;
  }

  .hero-home .hero-portrait-card{
    border-color:rgba(96,196,255,.16)!important;
    background:
      radial-gradient(circle at 50% 16%, rgba(72,196,255,.14), transparent 22%),
      radial-gradient(circle at 46% 42%, rgba(28,84,150,.18), transparent 40%),
      radial-gradient(circle at 80% 84%, rgba(243,167,91,.05), transparent 22%),
      linear-gradient(180deg, rgba(7,15,26,.985), rgba(4,8,14,.992))!important;
    box-shadow:
      0 42px 110px rgba(0,0,0,.58),
      0 0 62px rgba(44,179,255,.10),
      inset 0 0 0 1px rgba(255,255,255,.032)!important;
  }

  .hero-home .hero-portrait-card::before{
    background:
      radial-gradient(ellipse at 50% 18%, rgba(90,214,255,.18), rgba(90,214,255,.08) 25%, rgba(41,120,194,.05) 44%, transparent 64%),
      radial-gradient(ellipse at 50% 102%, rgba(6,10,16,.94), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,.012), transparent 20%, transparent 70%, rgba(255,255,255,.022))!important;
    filter:blur(8px)!important;
    opacity:.92!important;
  }

  .hero-home .hero-portrait-card::after{
    background:
      linear-gradient(180deg, rgba(5,10,17,.10), rgba(5,10,17,.02) 28%, rgba(5,10,17,.18) 56%, rgba(5,10,17,.48) 100%),
      radial-gradient(circle at 64% 18%, rgba(90,214,255,.06), transparent 24%),
      linear-gradient(118deg, transparent 0 66%, rgba(72,198,255,.035) 66.15%, transparent 66.45%)!important;
    mix-blend-mode:normal!important;
    opacity:.82!important;
  }

  .hero-home .hero-portrait-card picture::before{
    left:12%!important;
    right:12%!important;
    top:6%!important;
    bottom:18%!important;
    background:
      radial-gradient(circle at 50% 24%, rgba(105,222,255,.22), rgba(74,190,255,.10) 24%, rgba(41,120,194,.05) 44%, transparent 62%),
      radial-gradient(circle at 50% 65%, rgba(8,14,22,.16), transparent 58%)!important;
    filter:blur(18px)!important;
    opacity:.72!important;
  }

  .hero-home .hero-portrait-card img{
    filter:
      brightness(.90)
      saturate(.94)
      contrast(1.03)
      drop-shadow(0 26px 40px rgba(0,0,0,.34))!important;
  }

  .home-desktop-hero .hero-rings,
  .hero-home .hero-rings{
    opacity:.82!important;
    background:
      radial-gradient(circle at 50% 24%, rgba(72,196,255,.18), transparent 0 11%, rgba(72,196,255,.16) 11.2%, transparent 11.7%),
      radial-gradient(circle at 50% 24%, transparent 0 20%, rgba(72,196,255,.13) 20.2%, transparent 20.7%),
      radial-gradient(circle at 50% 24%, transparent 0 30%, rgba(72,196,255,.09) 30.2%, transparent 30.7%),
      radial-gradient(circle at 50% 24%, transparent 0 42%, rgba(72,196,255,.06) 42.2%, transparent 42.7%),
      linear-gradient(135deg, transparent 0 61%, rgba(72,196,255,.05) 61.2%, transparent 61.5%)!important;
  }
}


/* V76 logo sizing, spacing and favicon polish */
.brand{
  gap:.85rem;
  min-width:max-content;
}
.brand img{
  height:38px;
  width:auto;
  max-width:174px;
  object-fit:contain;
}
.site-header .brand{
  padding:.15rem 0;
}
.footer-brand img{
  height:30px;
  max-width:152px;
}
@media (min-width: 901px){
  .nav-shell{
    min-height:82px;
  }
  .site-header .brand img{
    height:38px;
  }
}
@media (max-width: 900px){
  .nav-shell{
    min-height:72px;
  }
  .brand img{
    height:34px;
    max-width:156px;
  }
  .site-header .brand{
    max-width:48vw;
  }
}
@media (max-width: 420px){
  .brand img{
    height:31px;
    max-width:142px;
  }
}

/* V77 real logo raster optimization */
.brand img{image-rendering:auto;}


/* V78 header logo polish: cleaner header fit, darker logo rail, responsive sizing */
.site-header{
  background:linear-gradient(180deg, rgba(4,9,15,.90), rgba(5,10,16,.78));
  border-bottom:1px solid rgba(118,156,206,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.site-header .nav-shell{
  gap:1.15rem;
}
.site-header .brand{
  position:relative;
  padding:.48rem .82rem;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
    radial-gradient(circle at 12% 50%, rgba(52,196,255,.10), transparent 34%),
    linear-gradient(90deg, rgba(7,14,22,.92), rgba(8,16,25,.82));
  border:1px solid rgba(113,157,209,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.14);
  overflow:hidden;
}
.site-header .brand::before{
  content:'';
  position:absolute;
  inset:10px 14px;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(52,196,255,.10), transparent 30%, transparent 72%, rgba(120,150,255,.05));
  filter:blur(10px);
  opacity:.85;
  pointer-events:none;
}
.site-header .brand img{
  position:relative;
  z-index:1;
  height:41px;
  width:auto;
  max-width:188px;
  object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.10));
}
.footer-brand{
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
}
.footer-brand::before{display:none;}
.footer-brand img{
  height:30px;
  max-width:152px;
  filter:none;
}
@media (min-width: 901px){
  .nav-shell{min-height:86px;}
  .site-header .brand img{height:42px; max-width:192px;}
}
@media (max-width: 900px){
  .nav-shell{min-height:72px;}
  .site-header .brand{padding:.4rem .66rem; border-radius:16px;}
  .site-header .brand::before{inset:8px 10px;}
  .site-header .brand img{height:34px; max-width:156px;}
  .site-header .brand{max-width:50vw;}
}
@media (max-width: 420px){
  .site-header .brand{padding:.34rem .54rem;}
  .site-header .brand img{height:30px; max-width:140px;}
}


/* V79 project and product logo integration */
.logo-project-visual,
.logo-thumb,
.tool-cta-logo,
.feature-logo-wrap,
.store-card-logo,
.contact-card-logo,
.feature-card-logo{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(106,147,201,.18);
  background:
    radial-gradient(circle at 50% 35%, rgba(52,196,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(7,12,20,.94), rgba(3,7,13,.98));
}

.logo-project-visual::after,
.logo-thumb::after,
.tool-cta-logo::after,
.feature-logo-wrap::after,
.store-card-logo::after,
.contact-card-logo::after,
.feature-card-logo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 36%),
    radial-gradient(circle at 78% 18%, rgba(52,196,255,.10), transparent 28%);
  mix-blend-mode:screen;
}

.project-logo,
.brand-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:1;
}

.logo-project-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  padding:1rem;
  border-radius:24px;
}

.project-logo-wide{
  max-height:170px;
}

.project-logo-square{
  max-height:250px;
}

.draftecho-logo-visual{
  background:
    radial-gradient(circle at 50% 38%, rgba(37,145,255,.22), transparent 48%),
    linear-gradient(180deg, rgba(6,10,18,.98), rgba(2,5,10,.98));
}

.fsfp-logo-visual{
  background:
    radial-gradient(circle at 50% 32%, rgba(232,201,68,.12), transparent 38%),
    linear-gradient(180deg, rgba(25,11,48,.96), rgba(12,7,26,.98));
}

.access-logo-visual{
  background:
    radial-gradient(circle at 26% 50%, rgba(52,196,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(4,8,14,.98), rgba(2,5,10,.98));
}

.logo-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:150px;
  padding:.75rem;
  border-radius:20px;
}

.feature-logo-wrap{
  width:100%;
  min-height:94px;
  margin:0 0 .9rem;
  padding:.55rem;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.feature-logo-img{
  width:100%;
  max-height:86px;
  object-fit:contain;
  position:relative;
  z-index:1;
  border-radius:14px;
}

.tool-cta-logo{
  width:122px;
  height:122px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.25rem;
  flex:0 0 122px;
}

.tool-logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
  position:relative;
  z-index:1;
}

.store-card-logo{
  width:100%;
  min-height:96px;
  border-radius:18px;
  margin:0 0 .85rem;
  padding:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.store-card-logo.wide{
  min-height:88px;
}

.store-logo-img{
  width:100%;
  max-height:112px;
  object-fit:contain;
  border-radius:14px;
  position:relative;
  z-index:1;
}

.store-logo-img.wide{
  max-height:82px;
}

.contact-card-logo{
  width:100%;
  min-height:82px;
  border-radius:16px;
  margin:0 0 .8rem;
  padding:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-logo-img{
  width:100%;
  max-height:80px;
  object-fit:contain;
  border-radius:12px;
  position:relative;
  z-index:1;
}

.feature-card-with-logo{
  padding-top:1rem;
}

.feature-card-logo{
  width:100%;
  min-height:78px;
  margin:0 0 .9rem;
  border-radius:16px;
  padding:.45rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.feature-card-logo-img{
  width:100%;
  max-height:72px;
  object-fit:contain;
  border-radius:12px;
  position:relative;
  z-index:1;
}

@media (max-width:900px){
  .logo-project-visual{
    min-height:180px;
  }
  .project-feature{
    grid-template-columns:1fr;
  }
  .logo-thumb{
    min-height:120px;
  }
  .tool-cta-logo{
    width:100%;
    height:auto;
    min-height:116px;
    flex:initial;
  }
  .tool-logo-img{
    width:min(100%, 260px);
    height:auto;
    aspect-ratio:1/1;
  }
}

@media (max-width:640px){
  .logo-project-visual{
    min-height:150px;
    padding:.7rem;
  }
  .project-logo-wide{
    max-height:118px;
  }
  .project-logo-square{
    max-height:170px;
  }
  .feature-logo-wrap{
    min-height:78px;
  }
  .tool-cta-logo{
    min-height:102px;
  }
}


/* V80 Släktarkivet real logo integration */
.slaktarkivet-logo-visual{
  background:
    radial-gradient(circle at 18% 50%, rgba(224,198,132,.12), transparent 28%),
    linear-gradient(180deg, rgba(4,8,14,.98), rgba(2,5,10,.98));
}

.slaktarkivet-thumb{
  background:
    radial-gradient(circle at 18% 50%, rgba(224,198,132,.10), transparent 26%),
    linear-gradient(180deg, rgba(5,10,16,.96), rgba(3,7,13,.98));
}


/* V81 mobile homepage avatar enlargement */
@media (max-width: 760px){
  .mobile-experience-card{
    position:relative;
    overflow:hidden;
  }

  .mobile-experience-top{
    align-items:flex-start;
    gap:.9rem;
  }

  .mobile-avatar{
    flex:0 0 clamp(96px, 24vw, 124px);
    width:clamp(96px, 24vw, 124px);
    height:clamp(96px, 24vw, 124px);
    border-radius:26px;
    margin-top:.05rem;
    margin-right:.05rem;
    box-shadow:
      0 20px 46px rgba(0,0,0,.32),
      0 0 34px rgba(52,196,255,.12),
      inset 0 0 0 1px rgba(255,255,255,.05);
  }

  .mobile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transform:scale(1.08);
  }

  .mobile-avatar::before{
    opacity:.70;
  }

  .mobile-avatar::after{
    opacity:.62;
  }
}

@media (max-width: 420px){
  .mobile-avatar{
    flex-basis:clamp(88px, 23vw, 104px);
    width:clamp(88px, 23vw, 104px);
    height:clamp(88px, 23vw, 104px);
    border-radius:24px;
  }

  .mobile-avatar img{
    transform:scale(1.06);
  }
}


/* V83 mobile impression, project ecosystem and conversion polish */
@media (max-width: 900px){
  .site-header{
    background:linear-gradient(180deg, rgba(4,9,15,.86), rgba(5,10,16,.70));
  }
  .site-header .brand{
    padding:.32rem .48rem;
    background:
      radial-gradient(circle at 12% 50%, rgba(52,196,255,.055), transparent 32%),
      linear-gradient(90deg, rgba(7,14,22,.54), rgba(8,16,25,.40));
    border-color:rgba(113,157,209,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 6px 16px rgba(0,0,0,.10);
  }
  .site-header .brand::before{
    opacity:.38;
    filter:blur(14px);
  }
  .site-header .brand img{
    height:32px;
    max-width:148px;
  }
  .mobile-experience-card{
    padding-top:1.05rem;
    background:
      radial-gradient(circle at 86% 10%, rgba(52,196,255,.14), transparent 32%),
      radial-gradient(circle at 8% 88%, rgba(243,167,91,.055), transparent 30%),
      linear-gradient(180deg, rgba(13,22,35,.91), rgba(7,12,20,.82));
  }
  .mobile-experience-card h1{
    max-width:11ch;
    letter-spacing:-.065em;
  }
  .mobile-lead{
    max-width:36ch;
  }
}

.mobile-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin:1rem 0 1.05rem;
}
.mobile-hero-actions .button{
  min-height:42px;
  padding:.7rem .86rem;
  border-radius:14px;
  font-size:.88rem;
}
@media (min-width: 761px){
  .mobile-hero-actions{display:none;}
}
@media (max-width: 420px){
  .site-header .brand img{
    height:29px;
    max-width:136px;
  }
  .mobile-hero-actions .button{
    flex:1 1 100%;
  }
}

/* Project ecosystem structure */
.project-ecosystem-overview{
  padding-top:1.8rem;
}
.ecosystem-route-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.ecosystem-route-card{
  position:relative;
  overflow:hidden;
  min-height:142px;
  padding:1rem;
  border-radius:22px;
  border:1px solid rgba(106,147,201,.20);
  background:
    radial-gradient(circle at 88% 12%, rgba(52,196,255,.09), transparent 30%),
    linear-gradient(180deg, rgba(15,23,35,.86), rgba(9,15,24,.76));
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.ecosystem-route-card span{
  display:inline-flex;
  margin-bottom:.85rem;
  color:var(--blue);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ecosystem-route-card strong{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.18rem;
  letter-spacing:-.035em;
}
.ecosystem-route-card em{
  display:block;
  margin-top:.35rem;
  color:var(--muted);
  font-style:normal;
  font-size:.9rem;
}
.ecosystem-route-card:hover{
  transform:translateY(-2px);
  border-color:rgba(86,203,255,.28);
}

.project-system-section{
  padding-top:2.2rem;
}
.project-system-grid{
  display:grid;
  gap:1.4rem;
}
.project-group{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);
  gap:1.2rem;
  align-items:stretch;
}
.project-group-head{
  position:relative;
  padding:1.1rem;
  border-radius:24px;
  border:1px solid rgba(106,147,201,.18);
  background:
    radial-gradient(circle at 12% 12%, rgba(52,196,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(12,20,31,.80), rgba(8,14,22,.66));
}
.project-group-head span{
  display:inline-flex;
  margin-bottom:.7rem;
  color:var(--blue);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.project-group-head h2{
  margin:.1rem 0 .5rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.45rem,2.2vw,2rem);
  letter-spacing:-.045em;
}
.project-group-head p{
  color:var(--muted);
  line-height:1.55;
}
.project-system-grid .project-card{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:1.2rem;
  padding:1.05rem;
}

/* More consistent logo frames */
.logo-project-visual{
  min-height:224px;
  padding:1.05rem;
}
.project-system-grid .project-logo-wide{
  max-height:148px;
}
.project-system-grid .project-logo-square{
  max-height:205px;
}
.slaktarkivet-logo-visual .project-logo-wide{
  max-height:168px;
}
.access-logo-visual .project-logo-wide{
  max-height:136px;
}
.fsfp-logo-visual .project-logo-wide{
  max-height:138px;
}
.draftecho-logo-visual .project-logo-square{
  border-radius:24px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.project-thumb.logo-thumb{
  min-height:142px;
}
.project-highlight-grid .project-logo-wide{
  max-height:104px;
}

.feature-card,
.featured-now-card,
.store-route-card,
.contact-route-card{
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.feature-card:hover,
.featured-now-card:hover,
.store-route-card:hover,
.contact-route-card:hover{
  transform:translateY(-2px);
  border-color:rgba(86,203,255,.26);
  box-shadow:0 22px 62px rgba(0,0,0,.28);
}

@media (max-width: 980px){
  .ecosystem-route-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .project-group{
    grid-template-columns:1fr;
  }
  .project-system-grid .project-card{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .ecosystem-route-grid{
    grid-template-columns:1fr;
  }
  .ecosystem-route-card{
    min-height:auto;
  }
  .project-system-section{
    padding-top:1.4rem;
  }
  .project-group{
    gap:.8rem;
  }
  .project-group-head{
    padding:1rem;
    border-radius:20px;
  }
  .project-system-grid .project-card{
    padding:.85rem;
  }
  .logo-project-visual{
    min-height:158px;
    padding:.75rem;
  }
  .project-system-grid .project-logo-wide,
  .slaktarkivet-logo-visual .project-logo-wide,
  .access-logo-visual .project-logo-wide,
  .fsfp-logo-visual .project-logo-wide{
    max-height:112px;
  }
  .project-system-grid .project-logo-square{
    max-height:154px;
  }
}


/* V93 clickable book covers and project/logo images */
[data-lightbox-src]{
  cursor:zoom-in;
}

[data-lightbox-src]:focus-visible,
.logo-image-link:focus-visible,
.project-logo-link:focus-visible{
  outline:2px solid rgba(52,196,255,.82);
  outline-offset:4px;
}

.lightbox-panel img{
  cursor:zoom-out;
}

.logo-image-link,
.project-logo-link{
  width:100%;
  height:100%;
  min-height:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  color:inherit;
  text-decoration:none;
  position:relative;
  z-index:1;
}

.logo-image-link img,
.project-logo-link img{
  transition:transform .22s ease, filter .22s ease;
}

.logo-image-link:hover img,
.project-logo-link:hover img{
  transform:scale(1.025);
  filter:brightness(1.08);
}

.project-thumb.logo-image-link{
  display:flex;
}

@media (prefers-reduced-motion: reduce){
  .logo-image-link img,
  .project-logo-link img{
    transition:none;
  }
}


/* V96 CV selected-assignment switcher */
.assignment-switcher h2{
  margin-top:.35rem;
  margin-bottom:.65rem;
}

.assignment-intro{
  margin-top:0;
  color:var(--muted);
}

.assignment-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:1.15rem 0 1rem;
}

.assignment-tab{
  appearance:none;
  border:1px solid rgba(106,147,201,.22);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  border-radius:999px;
  padding:.62rem .88rem;
  font:inherit;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.assignment-tab:hover,
.assignment-tab:focus-visible{
  color:var(--white);
  border-color:rgba(52,196,255,.52);
  background:rgba(52,196,255,.08);
  outline:none;
}

.assignment-tab.is-active{
  color:var(--white);
  border-color:rgba(201,145,74,.55);
  background:linear-gradient(135deg, rgba(201,145,74,.18), rgba(52,196,255,.08));
}

.assignment-panel{
  border:1px solid rgba(106,147,201,.18);
  border-radius:22px;
  padding:1.05rem;
  background:rgba(255,255,255,.025);
}

.assignment-panel[hidden]{
  display:none;
}

.assignment-panel h3{
  margin:0 0 .7rem;
  font-size:1.02rem;
}

.assignment-panel p{
  margin:0;
  color:var(--muted);
}

.assignment-focus{
  margin-top:.9rem;
}

@media (max-width:700px){
  .assignment-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .assignment-tab{
    width:100%;
    text-align:center;
    padding:.7rem .55rem;
  }
}

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