/* Clavenix premium experience layer */
:root {
  --pfx-cyan: #77d5ff;
  --pfx-ink: #04070e;
  --pfx-panel: rgba(13, 21, 40, .76);
  --pfx-line: rgba(148, 211, 255, .14);
  --pfx-shadow: 0 26px 80px rgba(0, 0, 0, .30);
}

html { background: var(--pfx-ink); }

body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  inset: 0;
  opacity: .32;
  background:
    radial-gradient(circle at 82% 8%, rgba(55, 156, 255, .12), transparent 23rem),
    radial-gradient(circle at 7% 70%, rgba(58, 119, 255, .08), transparent 28rem),
    linear-gradient(115deg, transparent 0 46%, rgba(147, 217, 255, .025) 46.1%, transparent 46.3%);
}

body::after {
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(rgba(198, 230, 255, .52) .55px, transparent .7px);
  background-size: 9px 9px;
  mask-image: linear-gradient(to bottom, black, transparent 45%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 45%);
}

body > * { position: relative; }
.c-dot, .c-ring, .nav, .mmenu { position: fixed; }

/* A slim progress signal makes longer technical pages feel more intentional. */
.pfx-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 1200;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bv), var(--pfx-cyan), rgba(119, 213, 255, .35));
  box-shadow: 0 0 14px rgba(61, 170, 255, .55);
  transform: scaleX(var(--pfx-progress, 0));
  transform-origin: left center;
}

/* Navigation */
.nav {
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.nav::after {
  content: '';
  position: absolute;
  inset: auto 5vw 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(119, 213, 255, .20), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}

.nav.on {
  background: linear-gradient(120deg, rgba(4, 7, 14, .88), rgba(10, 19, 38, .80));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.nav.on::after { opacity: 1; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { filter: drop-shadow(0 0 12px rgba(61, 170, 255, .12)); }
.nav-a { letter-spacing: .015em; }
.nav-cta, .btn-b {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(110deg, #1768d8 0%, #187fea 52%, #2a9ee9 100%);
  box-shadow: 0 10px 24px rgba(20, 101, 215, .18), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.nav-cta::before, .btn-b::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .35) 48%, transparent 70%);
  transform: translateX(-125%);
  transition: transform .65s var(--ease);
}

.nav-cta:hover::before, .btn-b:hover::before { transform: translateX(125%); }
.nav-cta:hover, .btn-b:hover { background: linear-gradient(110deg, #1768d8, #2a9ee9); box-shadow: 0 14px 32px rgba(35, 126, 231, .30), inset 0 1px 0 rgba(255,255,255,.24); }
.btn-g { backdrop-filter: blur(10px); background: rgba(255, 255, 255, .018); }
.btn-g:hover { background: rgba(61, 170, 255, .07); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }

/* Shared dimension, surface and typographic refinements. */
.hero, .ph { isolation: isolate; }
.hero::after, .ph::after {
  content: '';
  position: absolute;
  z-index: 1;
  right: max(5vw, 32px);
  top: 32%;
  height: 145px;
  width: 1px;
  opacity: .75;
  background: linear-gradient(to bottom, transparent, rgba(119, 213, 255, .5), transparent);
}

.hero-bg, .ph-bg {
  transform: translate3d(var(--pfx-parallax-x, 0), var(--pfx-parallax-y, 0), 0) scale(1.035);
  transition: transform 1.35s cubic-bezier(.16, 1, .3, 1);
}

.hero-grid, .ph-grid { opacity: .82; }
.hero-badge, .ol {
  text-shadow: 0 0 18px rgba(61, 170, 255, .26);
}
.hero-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 28px rgba(0, 0, 0, .13);
  backdrop-filter: blur(10px);
}

.hero-h1, .hd, .hs, .mission-q, .fcta-h {
  text-wrap: balance;
}

.hero-h1 em, .hd em, .hs em, .mission-q em {
  text-shadow: 0 0 28px rgba(61, 170, 255, .20);
}

.term, .fst {
  border-color: rgba(126, 201, 255, .13);
}

.term {
  box-shadow: 0 32px 85px rgba(0, 0, 0, .62), 0 0 0 1px rgba(61, 170, 255, .035), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.term::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background: linear-gradient(120deg, rgba(119, 213, 255, .08), transparent 26%, transparent 76%, rgba(119, 213, 255, .04));
}

.fst { box-shadow: var(--pfx-shadow); }
.mq { background: linear-gradient(90deg, rgba(9, 17, 33, .96), rgba(14, 29, 57, .96), rgba(9, 17, 33, .96)); }
.mq-item { color: #7585a5; }
.mq-item::after { background: var(--bv); box-shadow: 0 0 10px rgba(61,170,255,.65); }

.card, .dcard, .lcard, .svc-row, .checklist, .wizard, .faq-item, .contact-card, .contact-form, .results-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.card, .lcard, .dcard {
  position: relative;
  border-color: rgba(140, 192, 238, .10);
}

.card::after, .dcard::after, .lcard::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 27px;
  height: 27px;
  border-top: 1px solid rgba(119, 213, 255, .0);
  border-right: 1px solid rgba(119, 213, 255, .0);
  transition: border-color .3s ease, width .3s ease, height .3s ease;
  pointer-events: none;
}

.card:hover::after, .dcard:hover::after, .lcard:hover::after {
  width: 36px;
  height: 36px;
  border-color: rgba(119, 213, 255, .62);
}

.card:hover, .dcard:hover, .lcard:hover {
  box-shadow: 0 22px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.srow { overflow: hidden; }
.srow::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, var(--pfx-cyan), transparent);
  transition: opacity .28s ease;
}
.srow:hover::before { opacity: 1; }

/* Keep engagement rows connected while giving the whole section breathing room. */
.engagement-shell {
  margin-inline: 5vw;
  border-inline: 1px solid rgba(119, 213, 255, .11);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.engagement-shell .srow:first-child { border-top-color: rgba(119, 213, 255, .15); }
.engagement-shell .srow:last-child { border-bottom-color: rgba(119, 213, 255, .15); }
.engagement-shell .srow-l,
.engagement-shell .srow-r,
.engagement-shell .svc-row-l,
.engagement-shell .svc-row-r {
  padding-inline: clamp(1.5rem, 3vw, 3.75rem);
}

/* Blog cards are editorial previews, so each summary remains visible at rest. */
.blog-page .lcard { cursor: default; }
.blog-page .lcard-arr { display: none; }
.blog-page .lcard-exc { opacity: 1; transform: none; }
.blog-page .lcard:hover .lcard-img { transform: scale(1.035); }
.blog-page .lst-stat-v { font-size: clamp(24px, 3vw, 38px); }

.tav { box-shadow: 0 0 0 6px rgba(61, 170, 255, .045), 0 14px 28px rgba(0, 0, 0, .20); }
.tq { text-wrap: pretty; }

.fcta {
  background:
    radial-gradient(ellipse 55% 65% at 50% 110%, rgba(31, 124, 230, .18), transparent 72%),
    linear-gradient(125deg, #091222 0%, #0d1930 55%, #08111f 100%);
}

.fcta::before, .fcta::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(119, 213, 255, .11);
  transform: rotate(45deg);
}
.fcta::before { top: -108px; left: 8%; }
.fcta::after { bottom: -114px; right: 8%; }
.fcta .btn { margin-top: .4rem; }

.foot { background: linear-gradient(180deg, #06080f 0%, #03050a 100%); }
.foot-email { text-shadow: 0 0 14px rgba(61, 170, 255, .28); }

/* Bespoke visual direction: a deployment-control-room hero rather than generic SaaS decoration. */
.home-page .hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .78;
  background-image:
    linear-gradient(90deg, #06080f 0%, rgba(6, 8, 15, .98) 22%, rgba(6, 8, 15, .70) 47%, rgba(6, 8, 15, .26) 74%, rgba(6, 8, 15, .18) 100%),
    linear-gradient(0deg, rgba(6, 8, 15, .56), transparent 37%, rgba(6, 8, 15, .16)),
    url('assets/clavenix-deployment-core.png');
  background-position: center;
  background-size: cover;
  filter: saturate(.92) contrast(1.05);
  mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 91%, transparent 100%);
}

.home-page .hero-bg { opacity: .46; }
.home-page .hero-grid { opacity: .5; }
.home-page .hero-i { z-index: 3; }
.home-page .hero-right { filter: drop-shadow(0 32px 52px rgba(0, 0, 0, .42)); }
.home-page .term { background: rgba(5, 11, 23, .78); backdrop-filter: blur(16px); }
.home-page .term-body { background: linear-gradient(145deg, rgba(11, 23, 46, .42), transparent 58%); }

.home-page .hero-acts::after {
  content: 'GCP  •  AWS  •  HIPAA-GRADE';
  display: block;
  flex-basis: 100%;
  margin-top: .75rem;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .15em;
  color: rgba(194, 203, 223, .55);
}

/* More editorial depth and stronger section rhythm. */
.ben, .tst, .svp, .hiw, .faq, .tools-teaser, .lst-grid-wrap, .checklist-section, .wizard-section {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(rgba(113, 181, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 181, 255, .028) 1px, transparent 1px);
  background-size: 72px 72px;
}

.ben::after, .tst::after, .hiw::after, .faq::after, .lst-grid-wrap::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(36vw, 520px);
  height: min(36vw, 520px);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(27, 126, 232, .09), transparent 69%);
  filter: blur(3px);
}

.ben::after { top: -220px; right: -180px; }
.tst::after { left: -240px; bottom: -280px; }
.hiw::after { right: -250px; top: 12%; }
.faq::after { left: -270px; top: 14%; }
.lst-grid-wrap::after { right: -230px; bottom: -260px; }
.ben .wrap, .tst .wrap, .hiw-i, .faq-i, .lst-grid-i { position: relative; z-index: 1; }

.ol {
  width: fit-content;
  padding: .48rem .74rem;
  border: 1px solid rgba(119, 213, 255, .13);
  background: rgba(14, 35, 67, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.ol::before { width: 14px; }

.hd, .hs, .hero-h1, .mission-q, .fcta-h { text-shadow: 0 18px 50px rgba(0, 0, 0, .26); }
.bt, .hero-sub { color: #9eacc7; }

.card, .tool-teaser-card, .ret-card, .faq-item, .check-item, .cat-card, .wiz-step, .result-card {
  background-color: rgba(12, 22, 43, .84);
  backdrop-filter: blur(10px);
}

.card, .tool-teaser-card, .ret-card {
  border: 1px solid rgba(129, 192, 244, .10);
  border-radius: 6px;
}

.card::before, .tool-teaser-card::before, .ret-card::before {
  background: linear-gradient(145deg, rgba(111, 205, 255, .10), transparent 42%);
}

.card-ico, .tool-teaser-icon {
  filter: drop-shadow(0 8px 16px rgba(32, 151, 247, .22));
}

.tst-sl {
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid rgba(123, 185, 239, .10);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(13, 29, 57, .64), rgba(8, 16, 31, .52));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.abp { border-block: 1px solid rgba(119, 213, 255, .08); }
.abp-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(13, 82, 167, .2), transparent 48%); pointer-events: none; }

/* The forms and tools become more tactile without losing their technical clarity. */
.fi, .ft, select.fi {
  background-color: rgba(5, 12, 25, .72);
  border-color: rgba(137, 192, 240, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .10);
}

.fi:focus, .ft:focus, select.fi:focus {
  border-color: var(--pfx-cyan);
  box-shadow: 0 0 0 4px rgba(61, 170, 255, .11), 0 14px 30px rgba(0, 0, 0, .16);
}

.choice, .check-item, .wiz-option, .cat-card {
  border-color: rgba(137, 192, 240, .12);
  background: linear-gradient(145deg, rgba(17, 35, 66, .60), rgba(8, 15, 30, .68));
}

.choice.selected, .wiz-option.selected, .check-item.checked, .cat-card:hover {
  border-color: rgba(119, 213, 255, .58);
  box-shadow: 0 12px 34px rgba(23, 125, 223, .13), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.results-section, .fcta { isolation: isolate; }
.results-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(39, 149, 240, .16), transparent 32%);
}

/* Blog and portfolio cards now read as visual editorial pieces. */
.lcard {
  border: 1px solid rgba(136, 198, 247, .09);
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}
.lcard-img { filter: brightness(.47) saturate(.88) contrast(1.08); }
.lcard-ov { background: linear-gradient(to top, rgba(4, 8, 17, .98) 0%, rgba(5, 11, 23, .54) 55%, rgba(5, 11, 23, .06) 100%); }
.lcard-t { text-wrap: balance; }
.blog-page .lst-filter { background: rgba(7, 16, 31, .84); backdrop-filter: blur(16px); }
.blog-page .lst-stats { background: linear-gradient(110deg, rgba(9, 24, 48, .95), rgba(12, 36, 70, .82)); }

.foot { position: relative; overflow: hidden; }
.foot::before {
  content: '';
  position: absolute;
  width: 760px;
  height: 360px;
  right: -280px;
  bottom: -280px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(24, 117, 211, .15), transparent 70%);
  pointer-events: none;
}
.foot-i { position: relative; z-index: 1; }

/* A visual bridge from the service-led home page into the new resource library. */
.home-guide {
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 10vw, 138px) 5vw;
  background:
    radial-gradient(circle at 78% 44%, rgba(50, 147, 239, .16), transparent 26%),
    linear-gradient(108deg, #071225 0%, #0b2142 58%, #07162d 100%);
  border-block: 1px solid rgba(132, 208, 255, .11);
}
.home-guide::before,
.home-guide::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(123, 201, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}
.home-guide::before { width: min(72vw, 940px); aspect-ratio: 1; right: -35vw; top: -46%; }
.home-guide::after { width: min(45vw, 590px); aspect-ratio: 1; right: -14vw; top: -4%; border-color: rgba(123, 201, 255, .08); }
.home-guide-i {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(300px, .72fr);
  gap: clamp(3rem, 10vw, 9rem);
  align-items: center;
}
.home-guide .hd { max-width: 710px; margin: 1rem 0 1.15rem; }
.home-guide .bt { max-width: 595px; margin: 0 0 1.45rem; line-height: 1.72; }
.home-guide-points { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; }
.home-guide-points span {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d8efff;
  padding: .58rem .7rem;
  border: 1px solid rgba(149, 218, 255, .20);
  background: rgba(91, 176, 240, .08);
}
.home-guide-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  text-decoration: none;
  isolation: isolate;
}
.home-guide-art img {
  position: relative;
  z-index: 2;
  width: min(70%, 300px);
  border-radius: 4px;
  box-shadow: -25px 31px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(173, 228, 255, .18);
  transform: rotate(5.4deg) translateY(4px);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.home-guide-art:hover img { transform: rotate(1.5deg) translateY(-9px) scale(1.025); box-shadow: -31px 41px 80px rgba(0, 0, 0, .52), 0 0 0 1px rgba(173, 228, 255, .32); }
.home-guide-orbit { position: absolute; z-index: 1; width: min(90%, 405px); aspect-ratio: 1; border: 1px solid rgba(125, 205, 255, .29); border-radius: 50%; box-shadow: 0 0 70px rgba(39, 150, 246, .13), inset 0 0 55px rgba(39, 150, 246, .08); }
.home-guide-orbit::before { content: ''; position: absolute; width: 9px; height: 9px; top: 12%; right: 9%; border-radius: 50%; background: #91ddff; box-shadow: 0 0 20px #68cbff; }
.home-guide-badge { position: absolute; z-index: 3; right: 3%; bottom: 15%; display: flex; align-items: center; gap: .6rem; padding: .75rem .85rem; color: #e7f8ff; background: rgba(9, 31, 61, .88); border: 1px solid rgba(142, 216, 255, .25); box-shadow: 0 18px 45px rgba(0,0,0,.27); backdrop-filter: blur(10px); }
.home-guide-badge strong { font-family: var(--D); font-size: 26px; line-height: 1; color: #8bdcff; }
.home-guide-badge span { font-family: var(--M); font-size: 9px; letter-spacing: .09em; line-height: 1.35; text-transform: uppercase; }

@media (min-width: 1025px) {
  .home-page .hero-right { transform: translateX(18px) scale(1.035); }
  .home-page .term { transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
  .home-page .hero-right:hover .term { transform: translateY(-7px) rotateX(1deg) rotateY(-1deg); box-shadow: 0 38px 94px rgba(0, 0, 0, .66), 0 0 0 1px rgba(94, 191, 255, .12); }
}

/* Tools retain their clarity while feeling part of the same system. */
.wizard-section, .checklist-section { position: relative; }
.choice, .check-item, .wiz-option, .cat-card, .faq-q {
  transition: border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.choice:hover, .check-item:hover, .wiz-option:hover, .cat-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  transform: translateY(-2px);
}
.progress-fill, .result-bar-fill { box-shadow: 0 0 18px rgba(61, 170, 255, .45); }

/* Respect motion preferences and keep the premium details restrained on phones. */
@media (max-width: 768px) {
  .hero::after, .ph::after { right: 22px; height: 90px; }
  .fcta::before, .fcta::after { width: 105px; height: 105px; }
  .engagement-shell { margin-inline: 5vw; }
  .home-page .hero::before { opacity: .48; background-position: 66% center; }
  .home-page .hero-acts::after { font-size: 9px; }
  .home-guide-i { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-guide-art { min-height: 335px; max-width: 430px; width: 100%; margin: 0 auto; }
  .home-guide-badge { right: 4%; bottom: 10%; }
}

@media (max-width: 480px) {
  .engagement-shell { margin-inline: 1.25rem; }
  .engagement-shell .srow-l,
  .engagement-shell .srow-r,
  .engagement-shell .svc-row-l,
  .engagement-shell .svc-row-r { padding-inline: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pfx-progress { display: none; }
}