/* Inxi Labs company website — approved Dark Monochrome design. */










.hero { padding-top: 22px; }
.hero-meta { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.hero-meta > .eyebrow:first-child { padding: 7px 12px; background: var(--lime); }
.hero-composition { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 54px; align-items: center; padding-block: 40px; }
h1 { font-size: clamp(44px,5.65vw,82px); line-height: 1.045; letter-spacing: -.06em; font-weight: 700; margin-bottom: 32px; }
.headline-line { display: block; }
.software-word { color: var(--blue); }
.media-word { color: var(--orange); }
.hero-description { max-width: 430px; font-size: 17px; line-height: 1.65; margin-bottom: 26px; }
.explore-link { display: inline-flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 600; padding: 16px 21px; background: var(--ink); color: var(--paper); transition: background .25s, transform .25s; }
.explore-link:hover { background: var(--blue); transform: translateY(-2px); }
.explore-link span { transition: transform .25s; }
.explore-link:hover span { transform: translateY(3px); }
.signal-poster { aspect-ratio: .92; min-height: 450px; align-self: stretch; overflow: hidden; position: relative; background: linear-gradient(150deg,#202126,#f5f5f7 60%,#08090b); }
.poster-grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff20 1px,transparent 1px),linear-gradient(90deg,#ffffff20 1px,transparent 1px); background-size: 52px 52px; }
.poster-disc { width: 80%; aspect-ratio: 1; position: absolute; top: 9%; left: -17%; border-radius: 50%; background: linear-gradient(135deg,#4d4f56,#4d4f56 55%,#202126); animation: disc-shift 24s ease-in-out infinite alternate; }
.poster-window { width: 65%; aspect-ratio: 1; position: absolute; top: 24%; right: -8%; border-radius: 50%; background: var(--lime); overflow: hidden; animation: window-shift 28s ease-in-out infinite alternate; }
.poster-stripes { position: absolute; inset: -35%; background: repeating-linear-gradient(90deg,transparent 0 13px,var(--ink) 13px 14px); transform: rotate(-35deg); animation: stripe-shift 30s ease-in-out infinite alternate; }
.poster-square { width: 12%; aspect-ratio: 1; position: absolute; top: 7%; right: 9%; background: var(--paper); animation: square-turn 32s ease-in-out infinite; }
.poster-x { position: absolute; width: 58%; left: 19%; top: 18%; opacity: .68; transition: opacity .5s, transform .5s; }
.poster-x svg { width: 100%; stroke: #fff; stroke-width: 18; }
.signal-poster:hover .poster-x { opacity: .95; transform: scale(1.035); }
.poster-plus { position: absolute; top: 5%; left: 7%; font: 30px/1 var(--mono); color: #fff; }
.poster-caption { position: absolute; left: 7%; bottom: 7%; color: #fff; font-size: clamp(34px,3.1vw,46px); font-weight: 700; line-height: .97; letter-spacing: -2px; }
.poster-corner { position: absolute; right: 7%; bottom: 7%; color: #fff; font-size: 40px; }
.section { padding-block: 85px; }
.section-label { display: block; }
h2 { font-size: clamp(37px,4vw,57px); line-height: 1.12; letter-spacing: -.048em; font-weight: 500; margin-bottom: 27px; }
.section p { font-size: 17px; line-height: 1.75; color: var(--muted); }
.studio { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; border-top: 1px solid var(--line); }
.studio-content { max-width: 785px; }
.studio-content > p { max-width: 665px; margin-bottom: 18px; }
/* Quiet orbital sketch; the product visuals retain the visual emphasis. */
.studio-orbits { width: 100%; max-width: 310px; height: auto; margin-top: 40px; color: var(--blue); overflow: hidden; }
.studio-orbits .orbit-motion { stroke: currentColor; stroke-width: 1.2; stroke-opacity: .2; transform-origin: 180px 140px; animation: orbit-sketch-drift 48s ease-in-out infinite alternate; }
.studio-orbits .orbit-guide { stroke-opacity: .08; stroke-dasharray: 3 7; }
.studio-orbits .orbit-nodes { fill: currentColor; fill-opacity: .28; stroke: none; }
.build { border-top: 1px solid var(--line); }
.build-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 70px; margin: 28px 0 43px; }
.build-intro h2 { margin-bottom: 0; }
.build-jump { max-width: 330px; justify-self: end; width: 100%; font-size: 14px; }
.build-jump a { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.build-jump a:hover { color: var(--blue); }
.product-compositions { display: grid; gap: 72px; }
.product-composition { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); overflow: hidden; }
.software-composition { background: var(--blue); color: #fff; }
.media-composition { background: #101114; color: var(--ink); }
.product-copy { position: relative; z-index: 1; padding: 46px 42px; }
.product-copy h3 { font-size: clamp(44px,4.7vw,68px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; margin-bottom: 23px; scroll-margin-top: 24px; }
.product-copy .product-lead { font-size: 26px; line-height: 1.3; letter-spacing: -.65px; margin-bottom: 24px; color: inherit; }
.product-copy .product-description { font-size: 16px; line-height: 1.75; margin-bottom: 18px; color: inherit; }
.product-copy .product-ownership { font-size: 15px; line-height: 1.75; margin-bottom: 25px; color: inherit; }
.product-visual { position: relative; min-height: 510px; overflow: hidden; }
.logic-visual { background: #17181c; }
.logic-grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff20 1px,transparent 1px),linear-gradient(90deg,#ffffff20 1px,transparent 1px); background-size: 48px 48px; }
.logic-disc { width: 85%; aspect-ratio: 1; position: absolute; right: -15%; top: 7%; border-radius: 50%; background: linear-gradient(140deg,#4d4f56,#4d4f56 70%); animation: logic-float 26s ease-in-out infinite alternate; }
.logic-bar { position: absolute; background: var(--lime); }
.logic-bar.horizontal { height: 44px; width: 75%; left: -7%; top: calc(50% - 22px); }
.logic-bar.vertical { height: 64%; width: 44px; top: 18%; left: 25%; }
.logic-cut { position: absolute; width: 51%; aspect-ratio: 1; left: 15%; top: 29%; border: 1px solid #fff; border-radius: 50%; animation: logic-turn 44s linear infinite; }
.logic-cut::after { content: ""; position: absolute; left: 12%; top: 12%; width: 14px; height: 14px; background: #fff; }
.logic-network { position: absolute; inset: 17% 15% 25%; }
.logic-network i { position: absolute; width: 34px; height: 34px; border: 2px solid #fff; background: #17181c; }
.logic-network i:first-child { left: 0; top: 0; }.logic-network i:nth-child(2) { right: 0; top: 41%; }.logic-network i:last-child { left: 0; bottom: 0; }
.logic-connector { position: absolute; left: 18%; right: 19%; top: 23%; height: 43%; border-block: 1px solid #fff9; border-right: 1px solid #fff9; }
.logic-connector::after { content: ""; position: absolute; top: -2px; left: 0; width: 12px; height: 3px; background: #fff; animation: connector-flow 16s ease-in-out infinite alternate; }
.visual-plus { position: absolute; left: 24px; top: 20px; font: 24px/1 var(--mono); }
.visual-caption { position: absolute; bottom: 23px; left: 23px; right: 23px; font: 12px/1.65 var(--mono); letter-spacing: .15px; }
.publication-visual { background: #17181c; }
.publication-sheet { position: absolute; width: 56%; height: 70%; top: 15%; left: 17%; border: 1px solid var(--ink); }
.sheet-back { transform: rotate(-12deg); background: var(--blue); }
.sheet-front { transform: rotate(5deg); background: var(--paper); overflow: hidden; animation: publication-float 28s ease-in-out infinite alternate; }
.publication-circle { position: absolute; width: 95%; aspect-ratio: 1; top: -7%; right: -13%; border-radius: 50%; background: var(--orange-art); }
.publication-lines { position: absolute; inset: 61% 15% 12%; background: repeating-linear-gradient(transparent 0 14px,var(--ink) 14px 15px); }
.publication-type { position: absolute; left: 12%; top: 19%; font: 76px/.95 Georgia,serif; letter-spacing: -7px; }
.publication-dot { position: absolute; width: 38px; height: 38px; left: 13%; bottom: 18%; border-radius: 50%; background: var(--ink); }
.approach { padding-block: 80px; }
.approach > .section-label { margin-bottom: 28px; }
.approach h2 { max-width: 780px; font-size: 42px; margin-bottom: 44px; }
.principles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; }
.principle { position: relative; border-top: 1px solid var(--ink); padding-top: 23px; }
.principle::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); transition: width .3s; }
.principle:not(:last-child)::after { content: "→"; position: absolute; top: -15px; right: -24px; color: var(--blue); font-size: 22px; }
.principle h3 { font-size: 27px; line-height: 1.25; letter-spacing: -.8px; font-weight: 500; margin: 4px 0 16px; }
.principle p { font-size: 15px; margin: 0; }
.principle-glyph { position: absolute; right: 0; top: 27px; color: var(--orange); font: 26px var(--mono); transition: transform .3s; }
.principle:hover::before { width: 22px; border-radius: 0; }.principle:hover .principle-glyph { transform: translateY(-3px); }
.perspective { position: relative; overflow: hidden; background: var(--lime); padding-block: 70px 85px; }
.perspective .container { position: relative; z-index: 1; }
.perspective-copy { max-width: 1120px; margin-top: 45px; }
.perspective h2 { font-size: clamp(60px,7.1vw,104px); line-height: 1.02; letter-spacing: -.065em; font-weight: 600; max-width: 1120px; margin-bottom: 37px; }
.perspective h2 span, .perspective h2 em { display: block; }
.perspective h2 em { font-style: normal; margin-top: 9px; color: var(--blue); }
.perspective p { max-width: 650px; color: var(--ink); font-size: 17px; margin-bottom: 14px; }
.perspective-art { position: absolute; width: 710px; height: 710px; top: -80px; right: -180px; opacity: .16; }
.perspective-art span { position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 50%; animation: perspective-drift 34s ease-in-out infinite alternate; }
.perspective-art span:nth-child(2) { inset: 70px; animation-delay: -12s; }.perspective-art span:nth-child(3) { inset: 140px; animation-delay: -23s; }
.closing { padding-block: 75px; }
.closing-stage { display: grid; grid-template-columns: 1fr 1.1fr; margin-top: 34px; border: 1px solid var(--line); }
.closing-brand { min-height: 440px; position: relative; overflow: hidden; background: var(--blue); color: #fff; }
.closing-brand-grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff15 1px,transparent 1px),linear-gradient(90deg,#ffffff15 1px,transparent 1px); background-size: 48px 48px; }
.closing-words { position: relative; z-index: 1; display: grid; align-content: center; padding: 47px; height: 100%; font-size: clamp(84px,8.4vw,126px); line-height: .93; font-weight: 750; letter-spacing: -.075em; }
.closing-words span:last-child { color: transparent; -webkit-text-stroke: 1px #fff; margin-top: 13px; }
.closing-brand-x { position: absolute; width: 65%; top: 7%; right: -12%; opacity: .24; animation: closing-float 32s ease-in-out infinite alternate; }
.closing-brand-x svg { stroke: var(--lime); stroke-width: 22; }
.closing-traces { position: absolute; inset: 0; }
.closing-traces i { position: absolute; width: 1px; top: 0; height: 100%; left: 16%; background: #ffffff25; }.closing-traces i:nth-child(2) { left: 50%; }.closing-traces i:nth-child(3) { left: 84%; }
.closing-contact { padding: 52px 46px; align-self: center; }
.closing-contact h2 { font-size: clamp(44px,4.7vw,68px); line-height: 1.04; letter-spacing: -.055em; margin-bottom: 25px; }
.closing-contact > p { max-width: 390px; font-size: 16px; line-height: 1.7; margin-bottom: 30px; }
.contact-email { display: inline-block; color: var(--blue); font-size: clamp(22px,2.1vw,30px); line-height: 1.5; letter-spacing: -.6px; padding-bottom: 8px; overflow-wrap: anywhere; max-width: 100%; }
.contact-page-link { display: flex; align-items: center; width: fit-content; gap: 30px; color: var(--muted); margin-top: 23px; font-size: 13px; }
.contact-page-link:hover { color: var(--blue); }





@keyframes disc-shift { to { transform: translate(6%,4%); } }
@keyframes window-shift { to { transform: translate(-5%,-3%); } }
@keyframes stripe-shift { to { transform: translateX(18px) rotate(-35deg); } }
@keyframes square-turn { 0%,25% { transform: rotate(0); } 65%,100% { transform: rotate(90deg); } }
@keyframes orbit-sketch-drift { to { transform: translate(3px,-2px) rotate(6deg); } }
@keyframes connector-flow { to { left: calc(100% - 12px); } }
@keyframes logic-float { to { transform: translate(-12px,14px); } }
@keyframes logic-turn { to { transform: rotate(360deg); } }
@keyframes publication-float { to { transform: translate(6px,-6px) rotate(2deg); } }
@keyframes perspective-drift { to { transform: translate(-24px,16px); } }
@keyframes closing-float { to { transform: translate(-12px,12px); } }
@media (max-width: 1100px) {
  .hero-composition { gap: 32px; }
  .signal-poster { min-height: 430px; }.studio { grid-template-columns: 170px minmax(0,1fr); gap: 40px; }
  .product-copy { padding: 36px 29px; }.product-copy h3 { font-size: 49px; }.product-copy .product-lead { font-size: 24px; }
  .build-intro { gap: 40px; }.principles { gap: 24px; }.principle:not(:last-child)::after { right: -22px; }
  .closing-words { padding: 37px; }.closing-contact { padding: 38px 32px; }.closing-contact h2 { font-size: 51px; }
  .contact-email { font-size: 24px; }
}
@media (max-width: 700px) {
  
  
  
  .hero { padding-top: 12px; }.hero-location { display: none; }.hero-composition { grid-template-columns: 1fr; padding-block: 30px; gap: 32px; }
  h1 { font-size: clamp(44px,11.4vw,70px); line-height: 1.06; margin-bottom: 25px; }.hero-description { font-size: 16px; }
  .explore-link { padding: 14px 18px; gap: 25px; }.signal-poster { min-height: 0; aspect-ratio: 1.15; }
  .poster-disc { width: 72%; top: 1%; left: -12%; }.poster-window { width: 59%; top: 17%; }.poster-x { top: 11%; }.poster-caption { font-size: 35px; }
  
  .section { padding-block: 60px; }.studio { grid-template-columns: 1fr; gap: 29px; }h2 { font-size: 38px; }.section p { font-size: 16px; }
  .studio > .section-label { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.studio-orbits { flex: 0 0 112px; width: 112px; margin-top: 0; }
  .build-intro { grid-template-columns: 1fr; gap: 23px; margin: 27px 0 32px; }.build-jump { max-width: none; justify-self: start; }
  .product-compositions { gap: 44px; }.product-composition { grid-template-columns: 1fr; margin-inline: 0; }.product-copy { padding: 32px 26px; }.product-copy h3 { font-size: 47px; }.product-copy .product-lead { font-size: 25px; }.product-copy .product-description { font-size: 16px; }
  .product-visual { min-height: 0; height: 310px; }.media-composition .product-copy { grid-row: 1; }.media-composition .product-visual { grid-row: 2; }
  .logic-disc { width: 72%; top: -8%; right: -8%; }.logic-cut { width: 47%; top: 23%; }.logic-bar.horizontal { height: 35px; top: calc(50% - 17.5px); }.logic-bar.vertical { width: 35px; }
  .visual-caption { left: 20px; right: 20px; bottom: 18px; font-size: 12px; }.visual-plus { left: 20px; top: 17px; }
  .publication-sheet { width: 47%; height: 73%; left: 28%; top: 9%; }.publication-dot { width: 30px; height: 30px; left: 21%; bottom: 18%; }.publication-type { font-size: 56px; letter-spacing: -5px; }
  .approach h2 { font-size: 35px; margin-bottom: 35px; }.principles { grid-template-columns: 1fr 1fr; gap: 36px 23px; }
  .principle h3 { font-size: 25px; margin-top: 4px; }.principle p { font-size: 15px; }.principle:nth-child(2)::after { content: ""; }.principle:nth-child(3)::after { right: -22px; }
  .perspective { padding-block: 55px 65px; }.perspective-copy { margin-top: 35px; }.perspective h2 { font-size: clamp(48px,13vw,72px); }.perspective p { font-size: 16px; }.perspective-art { right: -390px; opacity: .12; }
  .closing-stage { grid-template-columns: 1fr; margin-top: 30px; }.closing-brand { min-height: 300px; }.closing-words { padding: 32px; font-size: 93px; }.closing-brand-x { width: 65%; top: -3%; }
  .closing-contact { padding: 35px 26px 40px; }.closing-contact h2 { font-size: 49px; }.closing-contact > p { font-size: 16px; }.contact-email { font-size: 24px; }
  
}
@media (max-width: 380px) {
  h1 { font-size: 43px; }
  
  .studio-orbits { flex-basis: 96px; width: 96px; }
  .product-copy { padding: 29px 22px; }.product-copy h3 { font-size: 42px; }.product-visual { height: 290px; }
  .closing-contact { padding-inline: 23px; }.contact-email { font-size: 22px; }.closing-contact h2 { font-size: 45px; }.closing-words { font-size: 85px; }
}

/* Mobile touch targets; the approved type and compositions stay unchanged. */
@media (max-width: 700px) {
  .build-jump a { min-height: 44px; align-items: center; }
  .contact-email, .contact-page-link { min-height: 44px; }
}

/* Tablet widths: let the hero poster follow its column width instead of a fixed min-height (prevents horizontal overflow at ~700-900px). */
@media (max-width: 900px) { .signal-poster { min-height: 0; width: 100%; align-self: center; } }
/* Very small phones (~320px): keep the closing contact block inside the viewport. */
@media (max-width: 380px) { .closing-stage { grid-template-columns: minmax(0,1fr); } .closing-contact h2 { font-size: 40px; } .contact-email { overflow-wrap: anywhere; } }