/* A more expressive visual layer over the production-safe base design. */
:root {
  --blue: #3157e6;
  --violet: #7651e6;
  --aqua: #1eb8aa;
  --coral: #ef6a5b;
  --gold: #e9ad36;
  --ink: #0b1930;
  --soft: #f5f7ff;
  --vivid-shadow: 0 24px 70px rgba(26, 43, 92, .16);
}

::selection { background: rgba(49, 87, 230, .2); }

body {
  background:
    radial-gradient(circle at 8% 22%, rgba(30, 184, 170, .055), transparent 21rem),
    radial-gradient(circle at 92% 48%, rgba(239, 106, 91, .05), transparent 24rem),
    var(--paper);
}

.site-header { box-shadow: 0 8px 30px rgba(14, 31, 64, .035); }

.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--aqua), var(--coral), var(--gold));
  content: "";
  opacity: .7;
}

.wordmark {
  background: linear-gradient(115deg, var(--ink) 12%, var(--blue) 64%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-nav a { position: relative; }

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -.42rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--aqua));
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 81% 20%, rgba(117, 81, 230, .2), transparent 24rem),
    radial-gradient(circle at 95% 82%, rgba(30, 184, 170, .2), transparent 22rem),
    radial-gradient(circle at 10% 70%, rgba(239, 106, 91, .09), transparent 25rem),
    linear-gradient(135deg, #fbfcff 0%, #edf3ff 48%, #f9f5ff 100%);
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(49, 87, 230, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 87, 230, .045) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  mask-image: linear-gradient(90deg, transparent, black 55%, black);
}

.hero-grid { min-height: 720px; gap: 4rem; }

.hero-content {
  position: relative;
  z-index: 2;
  animation: rise-in .75s ease-out both;
}

.hero-content h1 { position: relative; text-wrap: balance; }

.hero-content h1::after {
  display: block;
  width: 5.5rem;
  height: 6px;
  margin-top: 1.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--gold));
  content: "";
}

.hero-panel { min-height: 520px; perspective: 1000px; }

.hero-image-wrap {
  position: absolute;
  inset: 62px 8px 54px 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  background: rgba(255, 255, 255, .55);
  box-shadow: var(--vivid-shadow);
  transform: rotate(1.75deg);
  animation: picture-float 7s ease-in-out infinite;
}

.hero-image-wrap::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(49, 87, 230, .09));
  content: "";
}

.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); }
.glow-one { top: 10px; right: 7%; width: 150px; height: 150px; background: rgba(239, 106, 91, .25); }
.glow-two { bottom: 8px; left: 0; width: 190px; height: 190px; background: rgba(30, 184, 170, .23); }

.signal-card {
  z-index: 3;
  top: 18px;
  left: -10px;
  width: min(68%, 330px);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 18px 45px rgba(25, 37, 86, .18);
  transform: rotate(-3deg);
  animation: card-float 6s ease-in-out infinite;
}

.signal-card::before {
  display: block;
  width: 36px;
  height: 5px;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--gold));
  content: "";
}

.signal-card.offset {
  top: auto;
  right: -8px;
  bottom: 8px;
  left: auto;
  transform: rotate(3deg);
  animation: card-float-offset 6s -3s ease-in-out infinite;
}

.signal-card.offset::before { background: linear-gradient(90deg, var(--blue), var(--aqua)); }

.button {
  border-color: transparent;
  background: linear-gradient(120deg, var(--blue), var(--violet));
  box-shadow: 0 12px 28px rgba(49, 87, 230, .2);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button:hover,
.button:focus-visible {
  background: linear-gradient(120deg, #274acb, #6440d0);
  box-shadow: 0 16px 32px rgba(49, 87, 230, .3);
  transform: translateY(-2px);
}

.button.secondary {
  border-color: rgba(49, 87, 230, .18);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 28px rgba(34, 52, 102, .08);
  backdrop-filter: blur(10px);
}

.button.secondary:hover,
.button.secondary:focus-visible { background: white; }

.capability-ribbon {
  position: relative;
  z-index: 4;
  margin-bottom: -1.3rem;
  transform: translateY(-1.3rem);
}

.capability-ribbon ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid rgba(202, 213, 235, .85);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 45px rgba(25, 42, 83, .1);
  list-style: none;
  backdrop-filter: blur(16px);
}

.capability-ribbon li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 36px;
  padding-inline: 1rem;
  border-right: 1px solid var(--line);
  color: #34425a;
  font-size: .9rem;
  font-weight: 760;
}

.capability-ribbon li:last-child { border-right: 0; }

.capability-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(49, 87, 230, .08); }
.capability-dot.blue { background: var(--blue); }
.capability-dot.aqua { background: var(--aqua); box-shadow: 0 0 0 5px rgba(30, 184, 170, .1); }
.capability-dot.coral { background: var(--coral); box-shadow: 0 0 0 5px rgba(239, 106, 91, .1); }
.capability-dot.gold { background: var(--gold); box-shadow: 0 0 0 5px rgba(233, 173, 54, .12); }

.section-heading h2 { text-wrap: balance; }

.services-section .card {
  overflow: hidden;
  min-height: 315px;
  border: 0;
  box-shadow: 0 14px 40px rgba(30, 47, 90, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.services-section .card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  content: "";
}

.services-section .card:nth-child(2)::before { background: linear-gradient(90deg, var(--aqua), #56d5c9); }
.services-section .card:nth-child(3)::before { background: linear-gradient(90deg, var(--coral), #ff9a76); }
.services-section .card:nth-child(4)::before { background: linear-gradient(90deg, var(--gold), #f4d36a); }

.services-section .card:hover,
.services-section .card:focus-within { box-shadow: 0 22px 55px rgba(30, 47, 90, .15); transform: translateY(-7px); }

.services-section .card-index {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(49, 87, 230, .08);
  color: var(--blue);
}

.services-section .card:nth-child(2) .card-index { background: rgba(30, 184, 170, .1); color: #087f75; }
.services-section .card:nth-child(3) .card-index { background: rgba(239, 106, 91, .1); color: #c04b40; }
.services-section .card:nth-child(4) .card-index { background: rgba(233, 173, 54, .12); color: #9d6c0d; }

.text-link { gap: .3rem; text-decoration: none; }
.text-link::after { content: "→"; transition: transform .2s ease; }
.text-link:hover::after,
.text-link:focus-visible::after { transform: translateX(4px); }

.visual-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(30, 184, 170, .22), transparent 25rem),
    radial-gradient(circle at 88% 25%, rgba(118, 81, 230, .26), transparent 28rem),
    #091a33;
  color: white;
}

.visual-showcase::after {
  position: absolute;
  right: -10rem;
  bottom: -14rem;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255, 255, 255, .025), 0 0 0 160px rgba(255, 255, 255, .015);
  content: "";
}

.visual-showcase .section-heading { position: relative; z-index: 1; max-width: none; }
.visual-showcase .eyebrow { color: #6de1d6; }
.visual-showcase .section-heading > p.showcase-intro { max-width: 440px; color: #becce0; font-size: 1.05rem; }

.showcase-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  grid-template-rows: repeat(2, minmax(235px, 1fr));
  gap: 1.2rem;
}

.showcase-card {
  position: relative;
  overflow: hidden;
  min-height: 235px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: #eaf4ff;
  box-shadow: 0 25px 70px rgba(1, 8, 24, .35);
}

.showcase-primary { grid-row: 1 / 3; }
.showcase-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.showcase-card:hover img { transform: scale(1.035); }

.showcase-card figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 3.2rem 1.4rem 1.25rem;
  background: linear-gradient(transparent, rgba(7, 24, 46, .88));
  color: white;
}

.showcase-card figcaption span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  color: #8fe8df;
  font-size: .72rem;
  font-weight: 800;
}

.showcase-card figcaption strong { font-size: 1.05rem; }

.section.tinted {
  background:
    radial-gradient(circle at 10% 10%, rgba(30, 184, 170, .08), transparent 20rem),
    radial-gradient(circle at 90% 85%, rgba(118, 81, 230, .08), transparent 24rem),
    #f5f7ff;
}

.project-card { box-shadow: 0 12px 38px rgba(29, 45, 85, .075); transition: transform .25s ease, box-shadow .25s ease; }
.project-card:hover,
.project-card:focus-within { box-shadow: 0 22px 52px rgba(29, 45, 85, .14); transform: translateY(-5px); }

.empty {
  border-color: rgba(49, 87, 230, .3);
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.process {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 0%, rgba(30, 184, 170, .2), transparent 27rem),
    radial-gradient(circle at 86% 100%, rgba(118, 81, 230, .24), transparent 32rem),
    var(--navy);
}

.process-grid li {
  padding: 1.5rem 1rem 1rem;
  border: 1px solid rgba(147, 174, 208, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
}

.process-grid li > span {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 2rem;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 184, 170, .22), rgba(49, 87, 230, .26));
}

.contact-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--blue), var(--violet) 58%, var(--coral));
}

.contact-band::before {
  position: absolute;
  top: -8rem;
  right: 8%;
  width: 24rem;
  height: 24rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .05), 0 0 0 110px rgba(255, 255, 255, .03);
  content: "";
}

.contact-band .shell { position: relative; z-index: 1; }
.contact-band .eyebrow { color: #fff0b8; }
.button.light { background: white; box-shadow: 0 14px 35px rgba(11, 25, 48, .18); }

.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(118, 81, 230, .17), transparent 22rem),
    radial-gradient(circle at 92% 88%, rgba(30, 184, 170, .17), transparent 20rem),
    linear-gradient(145deg, #fbfcff, #edf3ff);
}

.page-hero::after {
  position: absolute;
  top: -6rem;
  right: 8%;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgba(49, 87, 230, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(49, 87, 230, .035), 0 0 0 116px rgba(30, 184, 170, .025);
  content: "";
}

.panel,
.metric,
.pricing-card { box-shadow: 0 16px 45px rgba(26, 43, 92, .085); }

.catalog-group + .catalog-group { margin-top: 5rem; }

.catalog-group .card-grid { align-items: stretch; }

.catalog-group .card {
  border-top: 4px solid var(--blue);
  box-shadow: 0 14px 38px rgba(26, 43, 92, .08);
}

.catalog-group:nth-child(2) .card { border-top-color: var(--aqua); }

.pricing-card .price { display: block; margin: 1.1rem 0 .6rem; color: var(--blue); }
.price-note { color: var(--muted); font-size: .92rem; }

.support-band {
  margin-top: 5rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(49, 87, 230, .16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 20%, rgba(30, 184, 170, .16), transparent 16rem),
    linear-gradient(135deg, #f7f9ff, #edf3ff);
  box-shadow: 0 18px 48px rgba(26, 43, 92, .09);
}

.support-band h2 { margin-bottom: .7rem; }
.support-band p:last-child { max-width: 760px; margin-bottom: 0; }

.site-footer {
  position: relative;
  background: radial-gradient(circle at 84% 10%, rgba(118, 81, 230, .18), transparent 24rem), #06162a;
}

.site-footer .wordmark {
  background: linear-gradient(115deg, #ffffff, #8fe8df 58%, #c9baff);
  -webkit-background-clip: text;
  background-clip: text;
}

.site-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--aqua), var(--coral), var(--gold));
  content: "";
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes picture-float {
  0%, 100% { transform: rotate(1.75deg) translateY(0); }
  50% { transform: rotate(.75deg) translateY(-8px); }
}

@keyframes card-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-6px); }
}

@keyframes card-float-offset {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(6px); }
}

@media (max-width: 900px) {
  .hero-grid { min-height: auto; gap: 2rem; }
  .hero-panel { min-height: 430px; }
  .capability-ribbon ul { grid-template-columns: repeat(2, 1fr); }
  .capability-ribbon li:nth-child(2) { border-right: 0; }
  .capability-ribbon li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .showcase-grid { grid-template-columns: 1fr; grid-template-rows: 360px repeat(2, 260px); }
  .showcase-primary { grid-row: auto; }
  .visual-showcase .split { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
  .hero-grid { padding-top: 3.6rem; }
  .hero-panel { min-height: 340px; }
  .hero-image-wrap { inset: 54px 0 44px 10px; border-radius: 22px; }
  .signal-card { left: 0; width: 72%; padding: 1rem; }
  .signal-card.offset { right: 0; bottom: 0; left: auto; top: auto; }
  .signal-card b { font-size: 1rem; }
  .signal-card span { font-size: .82rem; line-height: 1.45; }
  .capability-ribbon ul { padding: .65rem; }
  .capability-ribbon li { justify-content: flex-start; padding: .65rem; font-size: .8rem; }
  .services-section .card { min-height: auto; }
  .showcase-grid { grid-template-rows: repeat(3, 245px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-image-wrap,
  .signal-card,
  .signal-card.offset { animation: none; }
}