/* QTI Labs V4 — visual rhythm, connected sections and branded header */
:root{
  --v4-navy:#061827;
  --v4-navy-2:#0b2a4b;
  --v4-blue:#0d5ca8;
  --v4-cyan:#45c7f3;
  --v4-teal:#15c7bd;
  --v4-ink:#132840;
  --v4-muted:#66798e;
  --v4-soft:#eff7fb;
  --v4-soft-2:#e7f3f9;
  --v4-line:rgba(20,78,126,.14);
  --v4-shadow:0 22px 60px rgba(5,31,58,.13);
}

/* Header brand lock-up */
.site-header .brand{
  display:inline-flex!important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  min-width:132px;
}
.site-header .brand-logo-horizontal{
  display:block;
  height:42px;
  width:auto;
  max-width:170px;
}
.brand-tagline{
  display:block;
  margin-left:45px;
  color:#8fe8f5;
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.15em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.site-footer .brand-tagline{
  margin:8px 0 0;
  color:#69d8eb;
  font-size:.62rem;
}
.site-header{
  backdrop-filter:saturate(140%) blur(12px);
}

/* Shared visual continuity */
main > section{
  position:relative;
  isolation:isolate;
}
main > section:not(:first-child)::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1180px,88vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(43,132,194,.2),transparent);
}
.v2-section,
.section{
  overflow:hidden;
}
.v2-section::after,
.section:not(.product-hero):not(.v3-pulse)::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:320px;
  height:320px;
  border-radius:50%;
  right:-180px;
  top:12%;
  background:radial-gradient(circle,rgba(69,199,243,.12),transparent 67%);
  pointer-events:none;
}
.v2-section:nth-of-type(even)::after,
.section:nth-of-type(even)::after{
  right:auto;
  left:-190px;
  background:radial-gradient(circle,rgba(21,199,189,.11),transparent 67%);
}

/* Richer V2 section rhythm across marketing pages */
.v2-section{
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,254,.96));
}
.v2-section-soft{
  background:
    radial-gradient(circle at 10% 10%,rgba(69,199,243,.12),transparent 30%),
    linear-gradient(135deg,#eef7fb 0%,#f8fbfd 58%,#e8f5f8 100%)!important;
}
.v2-section-dark{
  background:
    radial-gradient(circle at 88% 18%,rgba(21,199,189,.17),transparent 28%),
    radial-gradient(circle at 12% 82%,rgba(53,112,220,.24),transparent 32%),
    linear-gradient(135deg,#061827,#0b2d52 58%,#102f55)!important;
}
.v2-card,
.company-card,
.portfolio-card,
.process-step{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#fff,#f8fbfd);
  box-shadow:0 14px 38px rgba(6,38,69,.08);
}
.v2-card::before,
.company-card::before,
.portfolio-card::before,
.process-step::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(var(--v4-teal),var(--v4-cyan));
  opacity:.75;
}
.v2-card:hover::before,
.company-card:hover::before,
.portfolio-card:hover::before,
.process-step:hover::before{
  width:7px;
}

/* StatusDeck — connected premium visual rhythm */
.statusdeck-hero{
  border-bottom:1px solid rgba(77,201,240,.2);
}
.statusdeck-hero + .v3-pulse{
  box-shadow:0 20px 40px rgba(5,27,53,.18);
}
.problem-section{
  padding-top:112px!important;
  padding-bottom:112px!important;
  background:
    radial-gradient(circle at 82% 20%,rgba(53,163,226,.18),transparent 28%),
    linear-gradient(145deg,#eaf5fb 0%,#f8fbfd 55%,#e7f3f8 100%)!important;
}
.problem-section .section-heading h2,
.product-capabilities-section .section-heading h2,
.workflow-section .section-heading h2,
.audience-section .section-heading h2,
.trust-section .section-heading h2,
.product-docs-section .section-heading h2{
  letter-spacing:-.04em;
}
.comparison-grid{
  gap:24px!important;
}
.comparison-card{
  position:relative;
  overflow:hidden;
  border-radius:24px!important;
  border:1px solid rgba(14,82,136,.14)!important;
  box-shadow:var(--v4-shadow)!important;
}
.comparison-card::after{
  content:"";
  position:absolute;
  inset:auto -55px -65px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(69,199,243,.2),transparent 68%);
}
.comparison-card-before{
  background:linear-gradient(145deg,#fff,#f6f8fb)!important;
}
.comparison-card-after{
  color:#fff!important;
  background:
    radial-gradient(circle at 85% 10%,rgba(69,199,243,.22),transparent 27%),
    linear-gradient(145deg,#071c32,#0d3d6b)!important;
}
.comparison-card-after h3,
.comparison-card-after li{
  color:#fff!important;
}
.comparison-card-after .comparison-label{
  color:#71e6ef!important;
}

.product-capabilities-section{
  padding-top:116px!important;
  padding-bottom:116px!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(21,199,189,.12),transparent 26%),
    linear-gradient(180deg,#fff,#edf7fb)!important;
}
.capability-grid{
  gap:20px!important;
}
.capability-card{
  position:relative;
  overflow:hidden;
  min-height:245px;
  border:1px solid rgba(23,92,146,.13)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fff,#f7fbfd)!important;
  box-shadow:0 16px 42px rgba(6,39,72,.08)!important;
}
.capability-card:nth-child(2n){
  background:
    radial-gradient(circle at 88% 10%,rgba(69,199,243,.15),transparent 32%),
    linear-gradient(145deg,#f8fcfe,#edf7fb)!important;
}
.capability-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:linear-gradient(90deg,var(--v4-teal),var(--v4-cyan),#4378dc);
  transform:scaleX(.18);
  transform-origin:left;
  transition:transform .26s ease;
}
.capability-card:hover::after{transform:scaleX(1)}
.capability-number{
  color:#118fa1!important;
}

.screenshots-section{
  padding-top:116px!important;
  padding-bottom:122px!important;
  color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 84% 22%,rgba(34,190,211,.2),transparent 28%),
    linear-gradient(145deg,#061827,#0b3159 62%,#0a2440)!important;
  background-size:64px 64px,64px 64px,auto,auto!important;
}
.screenshots-section .section-heading h2,
.screenshots-section .section-heading p{
  color:#fff!important;
}
.screenshots-section .eyebrow{
  color:#7fe7f2!important;
}
.statusdeck-carousel{
  padding:20px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:28px!important;
  background:rgba(3,18,35,.5)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px);
}

.workflow-section{
  padding-top:110px!important;
  padding-bottom:110px!important;
  background:
    radial-gradient(circle at 8% 65%,rgba(33,174,193,.12),transparent 28%),
    linear-gradient(180deg,#f7fbfd,#eaf5fa)!important;
}
.workflow-section .process-step{
  border-radius:22px!important;
  box-shadow:0 16px 42px rgba(6,39,72,.08)!important;
}
.workflow-section .process-step:nth-child(2n){
  transform:translateY(18px);
}

.audience-section{
  padding-top:110px!important;
  padding-bottom:110px!important;
  color:#fff;
  background:
    radial-gradient(circle at 14% 18%,rgba(69,199,243,.16),transparent 26%),
    radial-gradient(circle at 82% 80%,rgba(21,199,189,.16),transparent 30%),
    linear-gradient(145deg,#071829,#0d355f)!important;
}
.audience-section h2,
.audience-section h3,
.audience-section p{
  color:#fff!important;
}
.audience-section article{
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.07)!important;
  backdrop-filter:blur(12px);
}

.trust-section{
  padding-top:108px!important;
  padding-bottom:108px!important;
  background:
    radial-gradient(circle at 92% 14%,rgba(69,199,243,.12),transparent 27%),
    linear-gradient(180deg,#fff,#eff7fb)!important;
}
.trust-section article{
  border-radius:20px!important;
  box-shadow:0 14px 36px rgba(5,38,70,.07)!important;
}

.product-docs-section{
  padding-top:108px!important;
  padding-bottom:108px!important;
  color:#fff;
  background:
    radial-gradient(circle at 76% 15%,rgba(58,125,230,.22),transparent 28%),
    linear-gradient(145deg,#071827,#0b2c4f)!important;
}
.product-docs-section h2,
.product-docs-section h3,
.product-docs-section p{
  color:#fff!important;
}
.product-docs-section article,
.product-docs-section a{
  border-color:rgba(255,255,255,.14)!important;
}
.product-docs-section article{
  background:rgba(255,255,255,.07)!important;
  backdrop-filter:blur(12px);
}

.cta-section{
  padding-top:96px!important;
  padding-bottom:96px!important;
  color:#061827;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.42),transparent 26%),
    linear-gradient(115deg,#5ae0dc,#44c7ef 48%,#70a8ff)!important;
}
.cta-section h2,
.cta-section p{
  color:#061827!important;
}
.cta-section .button-primary{
  background:#061827!important;
  color:#fff!important;
}
.cta-section .button-secondary{
  border-color:rgba(6,24,39,.35)!important;
  color:#061827!important;
}

/* Motion card polish */
.v3-rail{
  padding-top:34px!important;
  padding-bottom:42px!important;
  background:
    linear-gradient(180deg,rgba(236,247,251,.85),rgba(255,255,255,.95));
}
.v3-rail-card{
  border-color:rgba(24,100,156,.16)!important;
  background:
    radial-gradient(circle at 88% 5%,rgba(69,199,243,.11),transparent 28%),
    linear-gradient(145deg,#fff,#f8fbfd)!important;
}
.v3-rail-card:hover{
  transform:translateY(-7px) scale(1.01);
  box-shadow:var(--v4-shadow);
}
.v3-pulse{
  position:relative;
  z-index:4;
}

/* Section entrance accent */
.v4-section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
  color:#0d8797;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.v4-section-kicker::before{
  content:"";
  width:26px;
  height:2px;
  background:linear-gradient(90deg,var(--v4-teal),var(--v4-cyan));
}

/* Footer brand */
.site-footer .brand{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
}

/* Mobile */
@media(max-width:900px){
  .workflow-section .process-step:nth-child(2n){transform:none}
  .brand-tagline{margin-left:39px}
}
@media(max-width:650px){
  .site-header .brand-logo-horizontal{height:39px;max-width:145px}
  .brand-tagline{display:none}
  .problem-section,
  .product-capabilities-section,
  .screenshots-section,
  .workflow-section,
  .audience-section,
  .trust-section,
  .product-docs-section{
    padding-top:78px!important;
    padding-bottom:78px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .capability-card::after{transition:none}
}