.hero { position: relative; min-height: min(820px, calc(100svh - var(--header-height))); display: grid; align-items: center; padding: clamp(4rem, 7vw, 7rem) 0; color: rgba(255,255,255,.8); background: var(--gradient-hero); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero__grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__grid--single-visual { grid-template-columns: .88fr 1.12fr; }
.hero h1 { max-width: 780px; color: white; }
.hero .lead { color: rgba(255,255,255,.72); }
.hero__brandline { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; color: #8cecff; font-size: .82rem; font-weight: 900; letter-spacing: .15em; }
.hero__brandline img { width: 46px; height: 46px; object-fit: contain; }
.hero__visual { position: relative; min-height: 500px; perspective: 1200px; }
.hero__visual--single { min-height: 560px; }
.hero__visual::before { content: ""; position: absolute; inset: 12% 0 6% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(53,215,255,.22), rgba(255,79,200,.08) 45%, transparent 70%); filter: blur(25px); }
.hero-device { position: absolute; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.hero-device--laptop { z-index: 2; width: 82%; right: 1%; top: 11%; }
.hero-device--tablet { z-index: 3; width: 39%; left: 0; bottom: 7%; }
.hero-device--phone { z-index: 4; width: 38%; right: 1%; bottom: -1%; }
.hero-device--main { z-index: 3; width: min(100%, 920px); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hero__visual--single .mockup { padding: .8rem; border-radius: 1.45rem; box-shadow: 0 34px 100px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16); }
.hero__visual--single .mockup::before { width: 28%; height: 5px; margin: .2rem auto .75rem; }

.what-is__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: center; }
.what-is__statement { padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: var(--radius-lg); color: rgba(255,255,255,.78); background: var(--gradient-hero); box-shadow: var(--shadow-card); }
.what-is__statement h2 { color: white; }
.integration-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.integration-pill { padding: 1rem .8rem; text-align: center; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-sm); font-weight: 800; }

.solution-tabs { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.4rem; align-items: stretch; }
.solution-tab-list { display: grid; gap: .65rem; align-content: start; }
.solution-tab { width: 100%; padding: 1rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(255,255,255,.8); cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.solution-tab:hover { transform: translateX(3px); }
.solution-tab[aria-selected="true"] { border-color: rgba(0,191,232,.45); background: #eafcff; box-shadow: inset 4px 0 0 var(--color-cyan-strong); }
.solution-tab strong { display: block; color: var(--color-ink); }
.solution-panel { min-height: 420px; padding: clamp(1.5rem, 3vw, 2.8rem); border-radius: var(--radius-lg); background: var(--color-ink); color: rgba(255,255,255,.74); box-shadow: var(--shadow-card); }
.solution-panel h3 { color: white; }
.solution-panel .chip { color: #d6f7ff; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); }

.ecosystem { position: relative; min-height: 620px; display: grid; place-items: center; }
.ecosystem__core { z-index: 2; display: grid; place-items: center; width: clamp(190px, 25vw, 280px); aspect-ratio: 1; padding: 2rem; text-align: center; border-radius: 50%; color: white; background: radial-gradient(circle at 35% 30%, #133e5d, #06111d 72%); border: 1px solid rgba(53,215,255,.34); box-shadow: 0 0 0 20px rgba(53,215,255,.03), 0 0 90px rgba(53,215,255,.14); }
.ecosystem__core img { width: 86px; margin: 0 auto .7rem; }
.ecosystem__core strong { display: block; font-size: 1rem; letter-spacing: .05em; }
.ecosystem__orbit { position: absolute; inset: 8%; border: 1px dashed rgba(20,184,166,.24); border-radius: 50%; }
.ecosystem__item { position: absolute; z-index: 3; min-width: 115px; padding: .65rem .85rem; text-align: center; border-radius: var(--radius-pill); background: white; border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); font-size: .78rem; font-weight: 850; }

.feature-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.feature-card { min-height: 245px; display: flex; flex-direction: column; }
.feature-card .chip-list { margin-top: auto; padding-top: 1rem; }
.feature-card--wide { grid-column: span 2; min-height: auto; }

.routes-band { overflow: hidden; background: var(--gradient-hero); }
.routes-band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.routes-band h2 { color: white; }
.routes-band p { color: rgba(255,255,255,.72); }
.routes-band .flow__node { color: white; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); box-shadow: none; }
.routes-band .flow__arrow { color: #7ae8f8; }

.roles-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 1.2rem; }
.role-tabs { display: grid; gap: .6rem; align-content: start; }
.role-tab { padding: .9rem 1rem; text-align: left; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: white; cursor: pointer; font-weight: 800; }
.role-tab[aria-selected="true"] { color: #075f68; border-color: rgba(0,191,232,.42); background: #e8fbff; }
.role-panel { padding: clamp(1.5rem, 3vw, 2.5rem); }

.growth-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.growth-step { position: relative; padding-top: 4rem; }
.growth-step__number { position: absolute; top: 1rem; left: 1.2rem; color: #8aa1b2; font-weight: 900; letter-spacing: .14em; }

.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.compare-card { padding: 1.5rem; }
.compare-card__before { color: #7a4850; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.compare-card__after { margin-top: .45rem; color: #087f6d; font-weight: 900; }

.trust-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: center; }
.trust-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.trust-point { padding: 1rem; border-radius: var(--radius-md); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.trust-point strong { display: block; color: white; }

.devices-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: start; }
.device-carousel {
  position: relative;
  padding: 1rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.28));
  border: 1px solid rgba(17,48,72,.08);
  box-shadow: 0 24px 70px rgba(10,29,46,.08);
  overflow: hidden;
}
.device-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(92,231,255,.12), transparent 32%), radial-gradient(circle at bottom left, rgba(255,79,200,.08), transparent 28%);
  pointer-events: none;
}
.device-carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 1.7rem;
}
.device-carousel__track {
  display: flex;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.device-slide {
  position: relative;
  z-index: 1;
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  gap: 1rem;
}
.device-slide__mockup {
  padding: .8rem;
  border-radius: 1.5rem;
}
.device-slide__mockup img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
}
.device-slide__content {
  padding: .25rem .5rem 0;
}
.device-slide__eyebrow {
  display: inline-flex;
  margin-bottom: .55rem;
  padding: .38rem .72rem;
  border-radius: 999px;
  color: #0a6d7a;
  background: rgba(92,231,255,.14);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.device-slide__content h3 {
  margin-bottom: .45rem;
  color: #0f2638;
}
.device-slide__content p {
  margin-bottom: 0;
  color: var(--color-muted);
}
.device-carousel__controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.device-carousel__arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,48,72,.1);
  border-radius: 50%;
  color: #173149;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,248,252,.94));
  box-shadow: 0 14px 26px rgba(10,29,46,.08);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.device-carousel__arrow:hover {
  transform: translateY(-2px);
  border-color: rgba(92,231,255,.3);
  box-shadow: 0 18px 32px rgba(10,29,46,.12);
}
.device-carousel__dots {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.device-carousel__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(23,49,73,.18);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.device-carousel__dot.is-active,
.device-carousel__dot[aria-selected="true"] {
  transform: scale(1.1);
  background: linear-gradient(135deg, var(--color-cyan-strong), var(--color-teal));
  box-shadow: 0 0 0 4px rgba(92,231,255,.18);
}

.final-cta { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius-lg); color: rgba(255,255,255,.78); background: var(--gradient-hero); box-shadow: var(--shadow-card); }
.final-cta::before { content: ""; position: absolute; width: 20rem; height: 20rem; right: -5rem; top: -8rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,79,200,.2), transparent 70%); }
.final-cta h2 { max-width: 760px; color: white; }
.final-cta p { max-width: 700px; }

.page-hero { padding: clamp(4rem, 7vw, 7rem) 0 clamp(3rem, 5vw, 5rem); color: rgba(255,255,255,.78); background: var(--gradient-hero); }
.page-hero h1 { max-width: 850px; color: white; }
.page-hero .lead { color: rgba(255,255,255,.72); }
.solution-page-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: start; }
.status-note { padding: 1rem 1.15rem; border-left: 4px solid var(--color-cyan-strong); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: #eaf9fd; }
.legal-copy { max-width: 850px; }
.legal-copy h2 { margin-top: 2.3rem; }

/* v1.0.1 layout refinements */
.solution-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
.solution-tab-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.solution-tab {
  position: relative;
  min-height: 182px;
  padding: 1.2rem 1.1rem 1rem;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: .75rem;
  border-radius: calc(var(--radius-md) + 4px);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,251,255,.96));
  box-shadow: 0 16px 34px rgba(15,37,54,.06);
}
.solution-tab:hover { transform: translateY(-2px); }
.solution-tab[aria-selected="true"] {
  border-color: rgba(0,191,232,.38);
  background: linear-gradient(180deg, #effcff, #e7f8ff);
  box-shadow: 0 22px 50px rgba(0,191,232,.12), inset 4px 0 0 var(--color-cyan-strong);
}
.solution-tab__body {
  display: grid;
  gap: .6rem;
  width: 100%;
}
.solution-tab__title {
  display: block;
  color: #12283b;
  font-size: 1rem;
  line-height: 1.2;
}
.solution-tab__desc {
  display: -webkit-box;
  overflow: hidden;
  color: #385166;
  font-size: .9rem;
  line-height: 1.55;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.solution-tab .badge {
  margin-top: auto;
}
.solution-panels {
  min-width: 0;
}
.solution-panel {
  min-height: 0;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: calc(var(--radius-lg) + 4px);
  background:
    radial-gradient(circle at top right, rgba(92,231,255,.16), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255,79,200,.12), transparent 26%),
    linear-gradient(135deg, #04111f, #08253b 58%, #051726 100%);
}
.solution-panel__top {
  display: grid;
  gap: .8rem;
}
.solution-panel__intro {
  max-width: 60ch;
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
}
.solution-flow {
  margin-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.solution-panel__chips {
  margin-top: .2rem;
}
.solution-panel__actions {
  margin-top: 1.55rem;
}
.solution-panel .flow__node {
  min-width: 132px;
  color: #10293a;
  background: linear-gradient(180deg, #ffffff, #edf8fd);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.solution-panel .flow__arrow {
  color: #7ae8f8;
}
.solution-panel .chip {
  color: #f3fbff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.ecosystem {
  min-height: 680px;
}
.ecosystem__core {
  position: relative;
  width: clamp(220px, 28vw, 320px);
  padding: 0;
  background: radial-gradient(circle at 35% 28%, #16496c, #06111d 72%);
  box-shadow: 0 0 0 20px rgba(53,215,255,.04), 0 30px 80px rgba(3,14,22,.18), 0 0 110px rgba(53,215,255,.12);
}
.ecosystem__core-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(92,231,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.ecosystem__core-content {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: .35rem;
  padding: 2rem 1.75rem;
}
.ecosystem__core img {
  width: 96px;
  margin: 0 auto .6rem;
  filter: drop-shadow(0 10px 24px rgba(92,231,255,.18));
}
.ecosystem__core strong {
  font-size: 1.08rem;
  letter-spacing: .06em;
}
.ecosystem__subtitle {
  display: block;
  margin-top: .1rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}
.ecosystem__microcopy {
  display: block;
  margin-top: .4rem;
  color: rgba(220,244,255,.72);
  font-size: .78rem;
  line-height: 1.5;
}
.ecosystem__orbit {
  inset: 7%;
  border-style: solid;
  border-color: rgba(92,231,255,.22);
}
.ecosystem__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 148px;
  min-height: 54px;
  padding: .8rem 1rem;
  color: #183147;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,249,253,.96));
  box-shadow: 0 14px 34px rgba(15,37,54,.07);
}
.ecosystem__item-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #5ce7ff, #31d2bc);
  box-shadow: 0 0 0 4px rgba(92,231,255,.16);
}

/* v1.0.2 premium cards and framed screenshots */
.integration-strip {
  gap: 1rem;
}
.integration-pill {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 136px;
  padding: 1.15rem 1rem;
  text-align: center;
  border: 1px solid rgba(17,48,72,.1);
  border-radius: 1.6rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,248,252,.93)),
    radial-gradient(circle at top right, rgba(92,231,255,.14), transparent 42%);
  box-shadow:
    0 18px 38px rgba(13,34,52,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  font-size: 1rem;
  font-weight: 900;
  color: #173149;
  overflow: hidden;
}
.integration-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(92,231,255,.42), rgba(255,255,255,.18), rgba(255,79,200,.18));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.integration-pill::after {
  content: "";
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  right: -1rem;
  top: -1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,231,255,.16), transparent 68%);
  pointer-events: none;
}
.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1rem;
  border: 1px solid rgba(17,48,72,.08);
  border-radius: 1.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,252,.96));
  box-shadow: 0 24px 60px rgba(10,29,46,.08);
  transition: transform var(--transition-fast), box-shadow var(--transition), border-color var(--transition-fast);
}
.gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(92,231,255,.34);
  box-shadow: 0 28px 70px rgba(10,29,46,.12);
}
.gallery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(92,231,255,.28), rgba(255,255,255,.08), rgba(255,79,200,.16));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.gallery-card__frame {
  position: relative;
  display: block;
  padding: .55rem;
  border-radius: 1.5rem;
  background: linear-gradient(160deg, rgba(18,53,82,.18), rgba(18,53,82,.06));
  border: 1px solid rgba(17,48,72,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 18px 40px rgba(10,29,46,.09);
  overflow: hidden;
}
.gallery-card__frame::before {
  content: "";
  display: block;
  width: 34%;
  height: 5px;
  margin: .1rem auto .6rem;
  border-radius: 999px;
  background: rgba(110,136,160,.55);
}
.gallery-card__glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 24%, transparent 78%, rgba(255,255,255,.08));
  pointer-events: none;
}
.gallery-card img {
  aspect-ratio: 16/10;
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.gallery-card__meta {
  display: block;
  padding: 1rem .4rem .25rem;
}
.gallery-card__title {
  display: block;
  color: var(--color-ink);
  font-weight: 900;
  font-size: 1rem;
}
.gallery-card__hint {
  display: block;
  margin-top: .3rem;
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.55;
}

/* v1.0.3 device gallery 2+1 premium layout */
.devices-layout {
  grid-template-columns: .82fr 1.18fr;
}
.device-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  grid-template-areas:
    "featured tablet"
    "featured mobile";
  gap: 1rem;
  align-items: stretch;
}
.device-gallery__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .9rem;
  border-radius: 1.6rem;
  border: 1px solid rgba(17,48,72,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,252,.96));
  box-shadow: 0 22px 52px rgba(10,29,46,.08);
}
.device-gallery__card--featured { grid-area: featured; }
.device-gallery__card:nth-child(2) { grid-area: tablet; }
.device-gallery__card:nth-child(3) { grid-area: mobile; }
.device-gallery__mockup {
  padding: .65rem;
  border-radius: 1.35rem;
}
.device-gallery__mockup img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.device-gallery__card--featured .device-gallery__mockup img {
  aspect-ratio: 16 / 11.2;
}
.device-gallery__content {
  padding: .95rem .2rem .2rem;
}
.device-gallery__eyebrow {
  display: inline-flex;
  margin-bottom: .5rem;
  padding: .38rem .72rem;
  border-radius: 999px;
  color: #0a6d7a;
  background: rgba(92,231,255,.14);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.device-gallery__content h3 {
  margin-bottom: .45rem;
  color: #0f2638;
  font-size: 1.06rem;
}
.device-gallery__card--featured .device-gallery__content h3 {
  font-size: 1.18rem;
}
.device-gallery__content p {
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: .92rem;
  line-height: 1.55;
}