/* Xyberverse Nexus V7 — cinematic amber / dark-brown visual system
   Dark brown and near-black surfaces dominate. Amber/gold is the primary light source.
   Cool accents are intentionally sparse and reflective, not the base palette. */
:root {
  --bg: #090705;
  --bg-2: #110c08;
  --nav: #140e0a;
  --panel: #17100c;
  --panel-2: #1e1510;
  --panel-3: #281a12;
  --text: #fbf5ec;
  --muted: #c8b7a5;
  --soft: #907966;
  --line: #3d2a1e;
  --line-soft: rgba(144, 99, 60, .30);
  --amber: #d98d4e;
  --gold: #f3b467;
  --gold-2: #ffd597;
  --ember: #9a4f24;
  --brown: #452716;
  --brown-2: #2a150b;
  --cyan: #72b9cf;
  --blue: #6386a6;
  --violet: #8e6e9f;
  --green: #6d7658;
  --pink: #b65c68;
  --accent: linear-gradient(90deg, #c87235 0%, #e59a55 46%, #ffd39a 100%);
  --accent-soft: linear-gradient(135deg, rgba(217, 141, 78, .20), rgba(81, 51, 30, .08));
  --shadow: 0 30px 95px rgba(0, 0, 0, .48);
}

html {
  background: var(--bg)
}

body {
  background: var(--bg);
  color: var(--text)
}

body::before {
  background:
    radial-gradient(circle at 10% 8%, rgba(220, 139, 67, .18), transparent 22%),
    radial-gradient(circle at 86% 28%, rgba(120, 68, 32, .13), transparent 26%),
    radial-gradient(circle at 52% 92%, rgba(75, 43, 24, .14), transparent 30%),
    linear-gradient(180deg, #0c0806 0%, #090705 48%, #0d0906 100%);
}

body::after {
  opacity: .11;
  background-image: radial-gradient(circle, rgba(226, 151, 78, .58) .8px, transparent 1px);
  background-size: 37px 37px;
  mask-image: linear-gradient(180deg, transparent 0, black 15%, black 80%, transparent 100%);
}

.text,
.card p,
.panel p,
.lead {
  color: var(--muted)
}

.status,
.mini,
.meta {
  color: #9d8874
}

.gradient-text,
.home-hero-copy h1 .accent-line {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.crumb {
  color: #8e7865
}

.crumb a:hover {
  color: var(--gold)
}

.text-link {
  color: #ead5bd
}

.text-link span {
  color: var(--gold)
}

/* localized ambient light rather than uniformly distributed blue glow */
.ambient-orbs i {
  background: radial-gradient(circle at 38% 34%, #ffd084 0%, #d47c34 18%, #6b3519 45%, rgba(35, 18, 9, .2) 67%, transparent 74%);
  filter: drop-shadow(0 0 28px rgba(225, 139, 61, .34));
  opacity: .54;
}

.ambient-orbs i:nth-child(1) {
  width: 58px;
  height: 58px;
  left: 2%;
  top: 48%
}

.ambient-orbs i:nth-child(2) {
  width: 30px;
  height: 30px;
  left: 57%;
  top: 15%;
  opacity: .34
}

.ambient-orbs i:nth-child(3) {
  width: 72px;
  height: 72px;
  right: 1.5%;
  top: 58%;
  opacity: .42
}

.ambient-orbs i:nth-child(4) {
  background: radial-gradient(circle at 40% 35%, #acd2df 0%, #477388 24%, #13252b 58%, transparent 73%);
  filter: drop-shadow(0 0 18px rgba(106, 171, 195, .28));
  opacity: .28
}

.ambient-orbs i:nth-child(5) {
  width: 44px;
  height: 44px;
  right: 18%;
  bottom: 7%;
  opacity: .30
}

/* navigation: dark-brown glass with amber edge light */
.site-header {
  background: rgba(18, 12, 8, .96);
  border-bottom: 1px solid rgba(229, 154, 85, .10)
}

.site-header.is-scrolled {
  background: rgba(17, 11, 7, .79);
  backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .42), 0 1px 0 rgba(239, 170, 103, .08) inset
}

.brandmark span {
  color: #f7efe6
}

.brandmark b {
  color: #e7a05e
}

.navlinks a {
  color: #eee5db
}

.navlinks a::after {
  background: linear-gradient(90deg, #a85e2d, #e6a35f, #8fb7c4)
}

.nav-utility {
  color: #aa9480 !important
}

.nav-cta {
  border-color: #59402f;
  background: rgba(212, 130, 61, .025)
}

.nav-cta:hover {
  border-color: #c77a3c;
  background: rgba(205, 121, 54, .10);
  box-shadow: 0 10px 35px rgba(168, 82, 31, .16)
}

/* buttons */
.btn,
.cta-pill {
  border-color: #5a402d;
  background: rgba(255, 243, 222, .018)
}

.btn:hover,
.cta-pill:hover {
  border-color: #b9713e;
  box-shadow: 0 14px 35px rgba(139, 72, 31, .22)
}

.btn.primary {
  background: #d48448;
  color: #1c0f08;
  box-shadow: 0 16px 40px rgba(167, 88, 38, .25);
  font-weight: 850
}

.btn.primary:hover {
  box-shadow: 0 21px 50px rgba(195, 106, 45, .34)
}

.btn.inverse {
  background: #fff4e6;
  color: #21130b;
  border-color: #fff4e6
}

/* editorial headings and hero lighting */
.page-hero::after {
  width: 680px;
  height: 310px;
  background: radial-gradient(ellipse, rgba(211, 126, 54, .16), rgba(81, 43, 21, .06) 44%, transparent 72%)
}

.home-hero {
  min-height: 790px;
  padding-top: 105px
}

.home-hero::before {
  left: -130px;
  top: 70px;
  width: 650px;
  height: 450px;
  background: radial-gradient(circle, rgba(213, 126, 55, .26), rgba(104, 54, 24, .10) 44%, transparent 70%);
  filter: blur(18px)
}

.home-hero::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 8%;
  width: 420px;
  height: 90px;
  background: linear-gradient(90deg, transparent, rgba(239, 169, 95, .17), transparent);
  filter: blur(34px);
  transform: rotate(-8deg);
  pointer-events: none
}

.home-hero-copy h1 {
  color: #fff8ef;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .18)
}

.home-hero-copy .lead {
  color: #cdbba7
}

.home-hero-index {
  color: #8f7965
}

.typed-signal {
  color: #f0d9bd
}

.signal-caret {
  background: var(--gold)
}

/* icon-first product hero: no product screenshots */
.product-identity-board {
  min-height: 640px;
  position: relative;
  isolation: isolate
}

.product-identity-board::before {
  width: 570px;
  height: 570px;
  left: 53%;
  top: 48%;
  background: radial-gradient(circle at 48% 44%, rgba(217, 132, 60, .28) 0%, rgba(93, 46, 22, .12) 42%, rgba(9, 7, 5, 0) 73%)
}

.product-identity-board::after {
  inset: 70px 36px 38px 80px;
  background-image: radial-gradient(circle, rgba(224, 151, 83, .22) 1px, transparent 1.3px);
  background-size: 25px 25px;
  opacity: .48
}

.board-halo {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(237, 169, 102, .17);
  box-shadow: 0 0 0 72px rgba(145, 77, 32, .035), 0 0 0 145px rgba(145, 77, 32, .018), 0 0 85px rgba(200, 111, 44, .15);
  z-index: -1
}

.product-emblem {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(183, 124, 76, .34);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(35, 23, 16, .90), rgba(18, 12, 9, .76));
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .40), 0 1px 0 rgba(255, 222, 178, .05) inset;
  transition: transform .28s cubic-bezier(.2, .75, .2, 1), border-color .28s, box-shadow .28s;
  z-index: 2
}

.product-emblem:hover {
  border-color: rgba(232, 161, 94, .60);
  box-shadow: 0 34px 85px rgba(0, 0, 0, .46), 0 0 35px rgba(201, 112, 46, .10)
}

.product-emblem-art {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: #120d09;
  border: 1px solid rgba(225, 158, 95, .18);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .30)
}

.product-emblem-art img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.product-emblem-copy {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.product-emblem-copy small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: #a98d72
}

.product-emblem-copy strong {
  font-size: 19px;
  line-height: 1.15;
  color: #fff5e9;
  margin-top: 4px
}

.product-emblem-copy em {
  font-style: normal;
  color: #c5aa91;
  font-size: 12px;
  margin-top: 4px
}


.product-emblem-main .product-emblem-art {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  box-shadow: 0 0 42px rgba(217, 126, 55, .18)
}

.product-emblem-main .product-emblem-copy strong {
  font-size: 19px
}

.product-emblem-main {
  width: 280px;
  right: 10%;
  top: 210px;
  transform: translate(calc(var(--board-x)*-8px), calc(var(--board-y)*-7px));
  border-color: rgba(229, 153, 86, .42)
}

.product-emblem-phys {
  width: 280px;
  left: -20;
  top: 92px;
  transform: translate(calc(var(--board-x)*8px), calc(var(--board-y)*7px))
}

.product-emblem-medflow {
  width: 280px;
  left: -25;
  bottom: 128px;
  transform: translate(calc(var(--board-x)*12px), calc(var(--board-y)*8px))
}

.product-emblem-pharm {
  width: 280px;
  right: 0;
  bottom: 88px;
  transform: translate(calc(var(--board-x)*14px), calc(var(--board-y)*-8px))
}

.product-emblem-medflow .product-emblem-art {
  background: #f4f1e9
}

/* company/product constellation: replaces generic screenshot slabs */
.cinematic-company-panel {
  position: relative
}

.cinematic-company-panel::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: 8%;
  bottom: 8%;
  background: radial-gradient(circle at 25% 45%, rgba(180, 92, 35, .10), transparent 34%), radial-gradient(circle at 68% 45%, rgba(80, 45, 25, .12), transparent 42%);
  z-index: -1
}

.product-constellation {
  min-height: 560px;
  border: 1px solid rgba(157, 105, 67, .28);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(30, 20, 14, .74), rgba(11, 8, 6, .88));
  overflow: hidden;
  box-shadow: var(--shadow);
  isolation: isolate
}

.product-constellation::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 52% 48%, rgba(217, 135, 62, .19), transparent 26%), radial-gradient(circle at 48% 50%, transparent 0 27%, rgba(240, 179, 109, .10) 27.3% 27.7%, transparent 28% 45%, rgba(151, 91, 48, .07) 45.3% 45.7%, transparent 46%);
  z-index: 0
}

.product-constellation::after {
  content: "";
  position: absolute;
  inset: 20px;
  background-image: radial-gradient(circle, rgba(208, 141, 82, .18) 1px, transparent 1.1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, black, transparent 73%);
  opacity: .55;
  z-index: 0
}

.constellation-mark,
.constellation-app {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(202, 137, 80, .26);
  background: rgba(18, 12, 8, .76);
  backdrop-filter: blur(13px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
  overflow: hidden
}

.constellation-mark {
  width: 170px;
  height: 170px;
  border-radius: 38px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(38, 25, 17, .92), rgba(14, 9, 7, .92));
  box-shadow: 0 0 70px rgba(205, 116, 46, .15), 0 26px 60px rgba(0, 0, 0, .36)
}

.constellation-mark img {
  position: static !important;
  width: 112px !important;
  height: 112px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important
}

.constellation-app {
  width: 112px;
  height: 112px;
  border-radius: 26px
}

.constellation-app img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  box-shadow: none !important
}

.app-quiyo {
  right: 11%;
  top: 12%;
  border-radius: 26px
}

.app-phys {
  left: 8%;
  top: 14%
}

.app-med {
  left: 12%;
  bottom: 11%;
  background: #f6f0e8
}

.app-pharm {
  right: 8%;
  bottom: 12%
}

.company-constellation {
  min-height: 520px
}

/* section surfaces */
.section-heading h2 {
  color: #fff5ea
}

.section-heading p {
  color: #ad9884
}

.capability-card {
  border-color: #3d2b20;
  background: linear-gradient(155deg, rgba(30, 20, 14, .82), rgba(13, 9, 7, .92));
  box-shadow: 0 15px 45px rgba(0, 0, 0, .16)
}

.capability-card::before {
  background: radial-gradient(circle, rgba(218, 137, 66, .20), transparent 68%)
}

.capability-card:hover {
  border-color: #86532f;
  background: linear-gradient(155deg, rgba(37, 24, 16, .92), rgba(16, 10, 7, .94));
  box-shadow: 0 24px 65px rgba(0, 0, 0, .28), 0 0 28px rgba(173, 87, 34, .06)
}

.capability-icon {
  background: linear-gradient(135deg, #7e411f, #bc6e34 58%, #e8aa66);
  color: #fff7ed;
  box-shadow: 0 12px 32px rgba(139, 72, 31, .30)
}

.capability-card p {
  color: #bca995
}

.check-item {
  color: #f2e9df
}

.check-item i {
  border-color: #9f6137;
  color: #e7a05e;
  background: rgba(208, 122, 55, .06)
}

/* selected product cards: icon-led */
.feature-work {
  border-color: #3e2c21;
  background: linear-gradient(145deg, #17100c, #21160f);
  box-shadow: 0 30px 85px rgba(0, 0, 0, .26)
}

.feature-work:hover {
  border-color: #865633;
  box-shadow: 0 35px 95px rgba(0, 0, 0, .36)
}

.feature-work-media.product-icon-stage,
.project-showcase-media.product-icon-stage {
  position: relative;
  background: radial-gradient(circle at 50% 45%, rgba(219, 136, 60, .22), rgba(52, 29, 15, .20) 36%, #0f0a07 74%);
  display: grid;
  place-items: center;
  overflow: hidden
}

.feature-work-media.product-icon-stage::before,
.project-showcase-media.product-icon-stage::before {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px solid rgba(226, 157, 94, .18);
  box-shadow: 0 0 0 65px rgba(181, 99, 40, .025), 0 0 0 135px rgba(181, 99, 40, .014)
}

.feature-work-media.product-icon-stage::after,
.project-showcase-media.product-icon-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(218, 145, 80, .18) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: radial-gradient(circle at center, black, transparent 69%);
  opacity: .44
}

.feature-work-media .feature-work-icon {
  position: relative;
  z-index: 2;
  width: min(58%, 330px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover !important;
  padding: 0;
  border-radius: 30px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .48), 0 0 45px rgba(218, 128, 54, .13)
}

.feature-work-copy {
  background: linear-gradient(145deg, rgba(33, 22, 15, .92), rgba(17, 11, 8, .98))
}

.feature-work-copy p {
  color: #bca895
}

.work-meta span,
.tag {
  border-color: #533a29;
  color: #bca38c;
  background: rgba(255, 246, 232, .015)
}

.work-row {
  border-color: #3c2a1f;
  background: linear-gradient(145deg, #17100c, #110c09)
}

.work-row::after {
  background: linear-gradient(#7d4322, #d18445, #f1b56f)
}

.work-row:hover {
  border-color: #80512f;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .26)
}

.work-row-id img {
  border: 1px solid rgba(234, 167, 103, .13);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .25)
}

.work-row>span:not(.text-link) {
  color: #8e7865
}

.work-row p {
  color: #af9b88
}

/* Quiyo spotlight */
.quiyo-feature.cinematic-quiyo {
  grid-template-columns: 230px 1fr;
  background: linear-gradient(115deg, #25160e 0%, #6c371b 40%, #b6632d 73%, #d38d52 100%);
  border: 1px solid rgba(255, 210, 159, .16);
  box-shadow: 0 30px 95px rgba(85, 38, 14, .40)
}

.quiyo-feature.cinematic-quiyo::before {
  background-image: radial-gradient(circle, rgba(255, 230, 199, .18) 1px, transparent 1.3px);
  background-size: 20px 20px;
  opacity: .42
}

.quiyo-feature.cinematic-quiyo::after {
  border-color: rgba(255, 226, 192, .12);
  box-shadow: 0 0 0 70px rgba(255, 227, 193, .025), 0 0 0 150px rgba(255, 227, 193, .015)
}

.quiyo-feature-icon {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .34), 0 0 45px rgba(255, 190, 117, .18)
}

.quiyo-copy p {
  color: #f1ddc7
}

.quiyo-copy h2 {
  color: #fff7ed
}

.quiyo-feature .gradient-text {
  background: linear-gradient(90deg, #fff5e6, #ffd19a, #ffc078);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

/* collections / products */
.collection-ledger>a,
.collection-link,
.product-row {
  border-color: #3b2a20;
  background: linear-gradient(145deg, rgba(28, 19, 14, .90), rgba(14, 9, 7, .96))
}

.collection-ledger>a::before,
.collection-link::before {
  background: radial-gradient(circle at 85% 20%, rgba(208, 123, 52, .15), transparent 35%)
}

.collection-ledger>a:hover,
.collection-link:hover,
.product-row:hover {
  border-color: #805130;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .26)
}

.collection-ledger span {
  color: #c47b43
}

.collection-ledger b {
  color: #e7a35f
}

.collection-ledger p,
.collection-link p,
.product-row p {
  color: #ae9a87
}

.portfolio-intro-note {
  border-left-color: #c67a42;
  background: #1a120e;
  color: #bba48f
}

.collection-no {
  color: #5c3824
}

.category {
  color: #8f7965
}

.product-row img {
  border: 1px solid rgba(231, 163, 98, .13);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22)
}

.sigil {
  background: linear-gradient(135deg, #6f391d, #c5793f)
}

/* stats now remain in the same cinematic palette instead of pastel cards */
.stats-stage::before {
  background-image: radial-gradient(circle, #85502e 1.2px, transparent 1.3px);
  opacity: .45
}

.stat-card {
  color: #f6ecdf;
  background: linear-gradient(145deg, #1d140f, #281910);
  border: 1px solid #4b3324;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
  position: relative;
  overflow: hidden
}

.stat-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -70px;
  top: -80px;
  background: radial-gradient(circle, rgba(217, 136, 62, .18), transparent 70%)
}

.stat-card:nth-child(2),
.stat-card:nth-child(3),
.stat-card:nth-child(4) {
  background: linear-gradient(145deg, #1d140f, #281910)
}

.stat-card strong,
.stat-card:nth-child(2) strong,
.stat-card:nth-child(3) strong,
.stat-card:nth-child(4) strong {
  color: #e6a15e
}

.stat-card span {
  color: #c5b09a
}

/* founder: directional amber lighting over the new portrait */
.founder-brief-media {
  background: #120d09;
  border: 1px solid #3e2a1e;
  box-shadow: 0 30px 85px rgba(0, 0, 0, .36)
}

.founder-brief-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(223, 140, 61, .14), transparent 40% 72%, rgba(4, 3, 2, .24));
  pointer-events: none;
  z-index: 1
}

.founder-brief-media img {
  filter: saturate(.94) contrast(1.03)
}

.founder-brief-copy {
  border-color: #60412e;
  border-left-color: #d28a50;
  border-image: none;
  background: rgba(29, 19, 13, .82);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .36);
  backdrop-filter: blur(16px) saturate(1.05)
}

.founder-card>div:last-child {
  border-color: #4b3426;
  background: rgba(28, 19, 14, .80)
}

/* medical product identity panel */
.medicine-product-icons {
  min-height: 560px;
  position: relative;
  border: 1px solid rgba(157, 105, 67, .28);
  border-radius: 26px;
  background: radial-gradient(circle at 48% 45%, rgba(209, 127, 53, .17), transparent 34%), linear-gradient(145deg, #1b120d, #0e0a07);
  overflow: hidden;
  box-shadow: var(--shadow)
}

.medicine-product-icons::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(214, 145, 79, .18) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  opacity: .46
}

.medicine-product-icons::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(228, 158, 94, .16);
  box-shadow: 0 0 0 70px rgba(171, 89, 33, .025), 0 0 0 145px rgba(171, 89, 33, .012)
}

.medicine-icon-card {
  position: absolute;
  z-index: 2;
  width: 270px;
  padding: 16px;
  border: 1px solid #5a3b28;
  border-radius: 24px;
  background: rgba(26, 17, 12, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .35);
  display: grid;
  gap: 13px
}

.medicine-icon-card img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .30) !important
}

.medicine-icon-card span {
  display: flex;
  flex-direction: column
}

.medicine-icon-card strong {
  font-size: 18px
}

.medicine-icon-card small {
  color: #aa927b
}

.medicine-icon-phys {
  left: 7%;
  top: 8%;
  transform: rotate(-2deg)
}

.medicine-icon-pharm {
  right: 7%;
  bottom: 8%;
  transform: rotate(2deg)
}

/* project page: icon first, screenshots only in dedicated screenshot gallery */
.project-showcase {
  border-color: #3e2b20;
  background: #15100c;
  box-shadow: 0 30px 85px rgba(0, 0, 0, .24)
}

.project-showcase-media.product-icon-stage {
  min-height: 620px
}

.project-showcase-media .project-app-icon {
  position: relative;
  z-index: 2;
  width: min(56%, 360px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  border-radius: 34px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 0 55px rgba(216, 127, 53, .13)
}

.project-showcase-copy {
  background: linear-gradient(145deg, #20150f, #120c09)
}

.project-facts {
  border-top-color: #4b3325;
  border-left-color: #4b3325
}

.project-facts>div {
  border-right-color: #4b3325;
  border-bottom-color: #4b3325
}

.project-facts small {
  color: #8f7965
}

.article-body {
  color: #c2ad98
}

.article-body a {
  color: #e6a35f
}

.product-gallery-grid a {
  border-color: #4a3224;
  background: #100b08;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .20)
}

/* broad secondary surfaces */
.panel,
.card,
.policy-section,
.comment,
.comment-empty,
.comment-form,
.auth-card,
.account-details,
.search-result,
.contact-primary,
.contact-product,
.video-card {
  background: #17100c;
  border-color: #3e2b20
}

.policy-meta,
.policy-toc,
.policy-contact>div {
  background: #17100c;
  border-color: #3e2b20
}

.policy-rule {
  background: #15100c;
  border-color: #3d2a1f
}

.policy-rule>span {
  background: linear-gradient(135deg, #81441f, #cf8044)
}

.policy-callout {
  background: #23170f;
  border-left-color: #c77a42
}

.policy-contact {
  background: #4a3224;
  border-color: #4a3224
}

.policy-contact a {
  color: #e7a35f
}

.news-card {
  border-color: #3c2a20;
  background: #15100c
}

.news-card:hover {
  border-color: #805130
}

.news-card-image {
  background: #0c0806
}

input,
textarea,
select {
  background: #17100c !important;
  border-color: #4a3426 !important;
  color: #f9f1e6 !important
}

input:focus,
textarea:focus,
select:focus {
  border-color: #b56b37 !important;
  box-shadow: 0 0 0 3px rgba(192, 105, 47, .12) !important
}

/* footer */
.footer-cta {
  background: linear-gradient(105deg, #2c190f 0%, #6e3518 36%, #aa5a2a 68%, #d18b50 100%);
  box-shadow: 0 -1px 0 rgba(255, 220, 180, .06) inset
}

.footer-cta::before {
  background-image: radial-gradient(circle, rgba(30, 14, 5, .42) 1.4px, transparent 1.7px), repeating-radial-gradient(circle at 80% 48%, transparent 0 42px, rgba(255, 238, 218, .08) 43px 45px)
}

.cta-pill {
  background: #fff2e2;
  color: #21130b;
  border-color: #fff2e2
}

.cta-pill b {
  background: #b76532;
  color: #fff6eb
}

.footer {
  background: #080604
}

.footer-grid p,
.footer-grid a {
  color: #aa9683
}

.footer-grid a:hover {
  color: #f6e9dc
}

.footer-social a {
  border-color: #4a3425;
  color: #d89150
}

.footer-bottom {
  border-top-color: #2d2018;
  color: #786755
}

/* mobile / tablet */
@media(max-width:1100px) {
  .navlinks {
    background: rgba(19, 12, 8, .97);
    border-color: #4b3426
  }

  .product-identity-board {
    min-height: 650px;
    max-width: 850px
  }

  .product-emblem-main {
    right: 7%
  }

  .product-emblem-phys {
    left: 3%
  }

  .product-emblem-medflow {
    left: 5%
  }
}

@media(max-width:760px) {
  .site-header {
    background: #130d09
  }

  .home-hero {
    padding-top: 62px
  }

  .product-identity-board {
    min-height: 590px
  }

  .product-emblem {
    padding: 10px;
    border-radius: 17px;
    gap: 10px
  }

  .product-emblem-art {
    width: 72px;
    height: 72px;
    border-radius: 18px
  }

  .product-emblem-copy small {
    font-size: 8px
  }

  .product-emblem-copy strong {
    font-size: 14px
  }

  .product-emblem-copy em {
    font-size: 10px
  }

  .product-emblem-main .product-emblem-art {
    width: 86px;
    height: 86px
  }

  .product-emblem-main .product-emblem-copy strong {
    font-size: 18px
  }

  .product-emblem-phys {
    width: 215px;
    left: 25;
    top: 94px
  }

  .product-emblem-main {
    width: 230px;
    right: 0;
    top: 175px
  }

  .product-emblem-medflow {
    width: 205px;
    left: 30;
    bottom: 168px
  }

  .product-emblem-pharm {
    width: 220px;
    right: 0;
    bottom: 90px
  }

  .board-halo {
    width: 330px;
    height: 330px
  }

  .product-constellation {
    min-height: 460px
  }

  .constellation-mark {
    width: 130px;
    height: 130px;
    border-radius: 30px
  }

  .constellation-mark img {
    width: 86px !important;
    height: 86px !important
  }

  .constellation-app {
    width: 82px;
    height: 82px;
    border-radius: 20px
  }

  .medicine-product-icons {
    min-height: 520px
  }

  .medicine-icon-card {
    width: 205px
  }

  .medicine-icon-phys {
    left: 3%
  }

  .medicine-icon-pharm {
    right: 3%
  }

  .quiyo-feature.cinematic-quiyo {
    grid-template-columns: 1fr
  }

  .quiyo-feature-icon {
    width: 128px;
    height: 128px
  }

  .project-showcase-media .project-app-icon {
    width: min(62%, 300px) !important
  }
}

@media(max-width:480px) {
  .product-identity-board {
    min-height: 510px
  }

  .product-emblem-main {
    width: 195px;
    top: 138px
  }

  .product-emblem-main .product-emblem-art {
    width: 78px;
    height: 78px
  }

  .product-emblem-main .product-emblem-copy strong {
    font-size: 17px
  }

  .product-emblem-phys {
    width: 190px;
    left: 2%;
    top: 12px
  }

  .product-emblem-medflow {
    width: 183px;
    bottom: 88px
  }

  .product-emblem-pharm {
    width: 195px;
    bottom: 8px
  }

  .product-emblem-copy em {
    display: none
  }

  .medicine-product-icons {
    min-height: 470px
  }

  .medicine-icon-card {
    width: 175px;
    padding: 11px
  }

  .medicine-icon-card strong {
    font-size: 14px
  }

  .medicine-icon-phys {
    left: 2%;
    top: 7%
  }

  .medicine-icon-pharm {
    right: 2%;
    bottom: 7%
  }

  .founder-brief-copy {
    background: rgba(28, 18, 12, .92)
  }
}

@media(prefers-reduced-motion:reduce) {

  .product-emblem,
  .constellation-app,
  .medicine-icon-card {
    transform: none !important
  }
}


/* V7 final integration — directional tungsten light and icon-led product identity */
::selection {
  background: #d1884d;
  color: #170b05
}

.section {
  position: relative
}

.section::before {
  pointer-events: none
}

.home-hero-copy,
.home-about-copy,
.project-showcase-copy,
.founder-brief-copy {
  isolation: isolate
}

.home-hero-copy::before {
  content: "";
  position: absolute;
  left: -60px;
  top: -80px;
  width: 360px;
  height: 260px;
  background: radial-gradient(ellipse, rgba(242, 173, 99, .12), rgba(124, 61, 25, .05) 43%, transparent 72%);
  filter: blur(14px);
  z-index: -1;
  pointer-events: none
}

.capability-section::after,
.work-section::after,
.stats-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 42%;
  height: 220px;
  right: -8%;
  top: 18%;
  background: radial-gradient(ellipse, rgba(191, 99, 39, .09), transparent 72%);
  filter: blur(14px);
  z-index: -1
}

.capability-card:hover {
  transform: translateY(-5px);
  border-color: #755033;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .30), 0 0 34px rgba(216, 131, 59, .07)
}

.product-emblem-art,
.constellation-app,
.medicine-icon-card img,
.project-app-icon {
  filter: saturate(.98) contrast(1.03)
}

.product-emblem-main::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 215, 160, .04) inset, 28px -16px 80px rgba(218, 130, 54, .08);
  pointer-events: none
}

.product-constellation {
  background: linear-gradient(152deg, #25170f 0%, #120c08 48%, #090705 100%)
}

.product-constellation::before {
  background: radial-gradient(circle at 52% 48%, rgba(236, 159, 84, .22), transparent 24%), radial-gradient(circle at 48% 50%, transparent 0 27%, rgba(240, 179, 109, .10) 27.3% 27.7%, transparent 28% 45%, rgba(151, 91, 48, .07) 45.3% 45.7%, transparent 46%)
}

.founder-brief-media {
  overflow: hidden
}

.founder-brief-media::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 120px;
  background: linear-gradient(180deg, rgba(240, 163, 86, .17), transparent);
  filter: blur(18px);
  z-index: 1;
  pointer-events: none
}

.founder-brief-media img {
  object-position: center 24%
}

.project-showcase-media.product-icon-stage {
  background: radial-gradient(circle at 50% 43%, rgba(226, 145, 69, .22), rgba(92, 45, 21, .08) 36%, transparent 64%), linear-gradient(145deg, #21150e, #0d0906)
}

.project-showcase-media.product-icon-stage::before {
  background-image: radial-gradient(circle, rgba(229, 156, 89, .18) 1px, transparent 1.2px);
  background-size: 23px 23px;
  opacity: .5
}

.product-gallery-grid {
  padding-top: 6px
}

.product-gallery-grid a {
  overflow: hidden
}

.product-gallery-grid img {
  transition: transform .35s ease
}

.product-gallery-grid a:hover img {
  transform: scale(1.018)
}

.contact-primary,
.auth-card,
.account-details,
.policy-section,
.search-result,
.news-card,
.video-card {
  box-shadow: 0 16px 48px rgba(0, 0, 0, .14)
}

@media(max-width:760px) {
  .founder-brief-media img {
    object-position: center 20%
  }

  .product-emblem {
    backdrop-filter: blur(12px) saturate(1.04)
  }
}

/* V7.1 — independent suspended motion for the four homepage product emblems. */
.product-identity-board .product-emblem {
  --float-x: 2px;
  --float-y: -10px;
  --float-tilt: .22deg;
  --float-duration: 8s;
  --float-delay: 0s;
  animation: xn-product-float var(--float-duration) cubic-bezier(.45, .05, .55, .95) var(--float-delay) infinite;
  transform-origin: 50% 50%;
  will-change: translate, rotate;
}

.product-identity-board .product-emblem-main {
  --float-x: 3px;
  --float-y: -12px;
  --float-tilt: .28deg;
  --float-duration: 8.6s;
  --float-delay: -2.7s;
}

.product-identity-board .product-emblem-phys {
  --float-x: -2px;
  --float-y: -9px;
  --float-tilt: -.20deg;
  --float-duration: 7.3s;
  --float-delay: -5.1s;
}

.product-identity-board .product-emblem-medflow {
  --float-x: 2px;
  --float-y: -11px;
  --float-tilt: .18deg;
  --float-duration: 9.2s;
  --float-delay: -1.4s;
}

.product-identity-board .product-emblem-pharm {
  --float-x: -3px;
  --float-y: -8px;
  --float-tilt: -.25deg;
  --float-duration: 7.9s;
  --float-delay: -6.3s;
}

@keyframes xn-product-float {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg
  }

  30% {
    translate: 0 -4px;
    rotate: 0deg
  }

  58% {
    translate: var(--float-x) var(--float-y);
    rotate: var(--float-tilt)
  }

  82% {
    translate: 0 -3px;
    rotate: 0deg
  }
}

@media (hover:hover) and (pointer:fine) {
  .product-identity-board .product-emblem:hover {
    animation-play-state: paused;
    translate: 0 -4px
  }
}

@media (prefers-reduced-motion:reduce) {
  .product-identity-board .product-emblem {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
    will-change: auto
  }
}


/* V7.2 — official app-store developer profiles. */
.store-presence {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(38px, 6vw, 76px);
  padding-bottom: clamp(38px, 6vw, 76px);
}

.store-presence::before {
  content: "";
  position: absolute;
  width: min(590px, 60vw);
  height: 260px;
  left: -8%;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse, rgba(227, 145, 69, .14), rgba(112, 57, 25, .055) 43%, transparent 72%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.store-presence-copy h2 {
  margin: 0;
  color: #fff4e7;
  font-size: clamp(31px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.045em
}

.store-presence-copy p {
  max-width: 520px;
  margin: 18px 0 0;
  color: #b9a28c;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.65
}

.store-profile-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.store-profile-card {
  position: relative;
  min-height: 162px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(197, 132, 76, .34);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(38, 25, 17, .94), rgba(16, 11, 8, .96));
  box-shadow: 0 22px 66px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 227, 194, .045) inset;
  color: #fff5e9;
  text-decoration: none;
  transition: transform .28s cubic-bezier(.2, .75, .2, 1), border-color .28s, box-shadow .28s, background .28s;
}

.store-profile-card::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  right: -72px;
  top: -82px;
  background: radial-gradient(circle, rgba(236, 161, 91, .18), rgba(152, 77, 32, .055) 48%, transparent 70%);
  pointer-events: none;
}

.store-profile-card:hover {
  transform: translateY(-5px);
  border-color: rgba(231, 162, 98, .62);
  box-shadow: 0 28px 78px rgba(0, 0, 0, .36), 0 0 34px rgba(206, 116, 48, .085)
}

.store-profile-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #f0b16d;
  background: linear-gradient(145deg, #2c1c13, #17100c);
  border: 1px solid rgba(232, 162, 96, .21);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30)
}

.store-profile-icon svg {
  width: 35px;
  height: 35px;
  display: block
}

.store-profile-icon-apple {
  color: #fff2e3
}

.store-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.store-profile-text small {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #927d69
}

.store-profile-text strong {
  margin-top: 5px;
  font-size: 22px;
  line-height: 1.08;
  color: #fff5e9
}

.store-profile-text em {
  margin-top: 6px;
  font-size: 12px;
  font-style: normal;
  color: #bca48e
}

.store-profile-arrow {
  align-self: start;
  color: #d98b4d;
  font-size: 18px;
  transition: transform .25s ease
}

.store-profile-card:hover .store-profile-arrow {
  transform: translate(3px, -3px)
}

.store-presence-products {
  padding-top: 14px;
  padding-bottom: 42px
}

.store-presence-products::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 111, 61, .28), transparent)
}

@media(max-width:900px) {
  .store-presence {
    grid-template-columns: 1fr
  }

  .store-presence-copy p {
    max-width: 650px
  }
}

@media(max-width:620px) {
  .store-profile-links {
    grid-template-columns: 1fr
  }

  .store-profile-card {
    min-height: 132px;
    padding: 18px
  }

  .store-profile-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px
  }

  .store-profile-text strong {
    font-size: 20px
  }
}

@media(prefers-reduced-motion:reduce) {

  .store-profile-card,
  .store-profile-arrow {
    transition: none !important
  }

  .store-profile-card:hover {
    transform: none !important
  }
}

/* v7.11 — reduce homepage founder portrait footprint on desktop */
@media (min-width: 981px) {
  .founder-brief {
    grid-template-columns: minmax(280px, .66fr) minmax(0, 1.34fr);
    gap: 56px;
  }

  .founder-brief-media {
    min-height: 460px;
    max-width: 470px;
    justify-self: start;
    width: 100%;
  }

  .founder-brief-media img {
    min-height: 460px;
  }

  .founder-brief-copy {
    margin-left: -82px;
  }
}

/* V7.12 — Selected Products Quiyo feature height reduction */
@media (min-width: 981px) {
  .feature-work {
    min-height: 302px;
  }

  .feature-work-media {
    min-height: 302px;
  }

  .feature-work-copy {
    padding-top: 38px;
    padding-bottom: 38px;
  }
}

/* V7.13 — enforce the 30% desktop height reduction on the Quiyo Selected Product card.
   V7.12 only changed min-height; the square feature image's intrinsic size still expanded the grid row. */
@media (min-width: 981px) {
  .work-section .feature-work {
    height: 302px;
    min-height: 302px;
    max-height: 302px;
    align-items: stretch;
  }

  .work-section .feature-work-media {
    height: 302px;
    min-height: 0;
    max-height: 302px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f2f2f0;
  }

  .work-section .feature-work-media img,
  .work-section .feature-work-media .feature-work-image {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 302px !important;
    object-fit: contain !important;
    display: block;
  }

  .work-section .feature-work-copy {
    height: 302px;
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 32px;
    overflow: hidden;
  }
}