:root {

  --bg: #03070b;

  --bg-soft: #060c12;

  --panel: #09111a;

  --text: #f4fbff;

  --muted: #8394a2;

  --muted-dark: #586a78;

  --cyan: #57d8e8;

  --cyan-bright: #76eaf5;

  --cyan-soft: rgba(87, 216, 232, 0.09);

  --cyan-line: rgba(87, 216, 232, 0.17);

  --line: rgba(255, 255, 255, 0.08);

  --line-bright: rgba(255, 255, 255, 0.14);

  --container: 1180px;

  --radius: 22px;

  --radius-large: 32px;

  --shadow:

    0 40px 100px rgba(0, 0, 0, 0.5);

}



/* RESET */

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  font-family:

    "Inter",

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif;

  color: var(--text);

  background: var(--bg);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}

body.menu-open {

  overflow: hidden;

}

a {

  color: inherit;

  text-decoration: none;

}

button {

  font: inherit;

}

.container {

  width: min(calc(100% - 40px), var(--container));

  margin: 0 auto;

}



/* HEADER */

.site-header {

  position: fixed;

  inset: 0 0 auto 0;

  z-index: 1000;

  border-bottom: 1px solid transparent;

  background:

    rgba(3, 7, 11, 0.72);

  backdrop-filter: blur(22px);

  -webkit-backdrop-filter: blur(22px);

  transition: 0.25s ease;

}

.site-header.scrolled {

  border-bottom-color: var(--line);

  background:

    rgba(3, 7, 11, 0.94);

}

.nav {

  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}

.brand {

  font-size: 0.97rem;

  font-weight: 700;

  letter-spacing: -0.03em;

}

.site-nav {

  display: flex;

  align-items: center;

  gap: 28px;

  color: var(--muted);

  font-size: 0.88rem;

}

.site-nav a:hover {

  color: var(--text);

}

.nav-buy {

  padding: 10px 17px;

  border: 1px solid var(--cyan-line);

  border-radius: 999px;

  color: var(--cyan-bright) !important;

  background: var(--cyan-soft);

}

.menu-button {

  display: none;

  width: 44px;

  height: 44px;

  padding: 10px;

  border: 1px solid var(--line);

  border-radius: 12px;

  background:

    rgba(255,255,255,0.03);

}

.menu-button span {

  display: block;

  height: 2px;

  margin: 5px 0;

  background: var(--text);

}



/* SHARED */

.eyebrow {

  display: inline-block;

  margin-bottom: 18px;

  color: var(--cyan);

  font-size: 0.69rem;

  font-weight: 700;

  letter-spacing: 0.18em;

}

.section-heading {

  max-width: 820px;

  margin: 0 auto 60px;

  text-align: center;

}

.section-heading h2 {

  margin: 0;

  font-size:

    clamp(2.5rem, 5vw, 4.7rem);

  line-height: 1;

  letter-spacing: -0.06em;

}



/* BUTTONS */

.button {

  min-height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 23px;

  border: 1px solid transparent;

  border-radius: 13px;

  font-weight: 700;

  transition: 0.2s ease;

}

.button:hover {

  transform: translateY(-2px);

}

.button-primary {

  color: #031014;

  background:

    linear-gradient(

      135deg,

      #94f5ff,

      #46cbdc

    );

  box-shadow:

    0 15px 45px

    rgba(68, 210, 225, 0.15);

}

.button-secondary {

  border-color: var(--line-bright);

  background:

    rgba(255,255,255,0.035);

}



/* HERO */

.hero {

  position: relative;

  min-height: 1050px;

  padding: 180px 0 0;

  overflow: hidden;

}

.hero-grid {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(

      rgba(87,216,232,0.025) 1px,

      transparent 1px

    ),

    linear-gradient(

      90deg,

      rgba(87,216,232,0.025) 1px,

      transparent 1px

    );

  background-size: 70px 70px;

  mask-image:

    linear-gradient(

      black,

      transparent 90%

    );

}

.hero::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 230px;

  background:

    linear-gradient(

      transparent,

      var(--bg)

    );

  pointer-events: none;

}

.hero-glow {

  position: absolute;

  border-radius: 50%;

  filter: blur(120px);

  pointer-events: none;

}

.glow-one {

  width: 500px;

  height: 500px;

  top: 160px;

  left: -220px;

  background:

    rgba(54,190,207,0.13);

}

.glow-two {

  width: 600px;

  height: 600px;

  top: 220px;

  right: -280px;

  background:

    rgba(49,167,185,0.09);

}

.hero-content {

  position: relative;

  z-index: 3;

  max-width: 1000px;

  text-align: center;

}

.hero-brandline {

  display: inline-flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 25px;

  color: var(--cyan);

  font-size: 0.69rem;

  font-weight: 700;

  letter-spacing: 0.17em;

}

.hero-logo {

  width: 34px;

  height: 34px;

  object-fit: contain;

}

.hero h1 {

  max-width: 980px;

  margin: 0 auto;

  font-size:

    clamp(3.7rem, 8vw, 7.5rem);

  line-height: 0.94;

  letter-spacing: -0.075em;

}

.hero h1 span {

  display: block;

  color: #78909f;

}

.hero-content > p {

  max-width: 700px;

  margin: 30px auto 0;

  color: var(--muted);

  font-size:

    clamp(1rem, 2vw, 1.2rem);

}

.hero-actions {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 13px;

  margin-top: 35px;

}

.availability {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  margin-top: 25px;

  color: var(--muted-dark);

  font-size: 0.78rem;

}

.availability-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:

    0 0 15px

    rgba(87,216,232,0.6);

}



/* REAL TERVA PRODUCT SCREENSHOT */

.product-stage {
  position: relative;
  z-index: 4;
  margin-top: 78px;
}

.real-product-shot {
  max-width: 1180px;
  margin: 0 auto;

  border: 1px solid var(--cyan-line);
  border-radius: 24px 24px 0 0;

  background: #02070b;

  box-shadow:
    0 45px 120px rgba(0, 0, 0, 0.68),
    0 0 110px rgba(87, 216, 232, 0.05);

  overflow: hidden;
}

.product-shot-bar {
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 0 18px;

  border-bottom: 1px solid var(--line);

  color: var(--muted-dark);
  background: rgba(255,255,255,0.012);

  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.product-shot-bar > div {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--cyan);
}

.status-light {
  width: 6px;
  height: 6px;

  display: inline-block;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 12px rgba(87,216,232,0.72);
}

.terva-screen-image {
  width: 100%;
  height: auto;

  display: block;

  object-fit: contain;

  background: #02070b;
}

/* COMPANY */

.company-section {

  padding: 150px 0;

}

.company-inner {

  max-width: 900px;

}

.company-inner h2 {

  margin: 0;

  font-size:

    clamp(2.7rem, 5vw, 5rem);

  line-height: 1;

  letter-spacing: -0.06em;

}

.company-inner p {

  max-width: 700px;

  margin: 28px 0 0;

  color: var(--muted);

  font-size: 1.05rem;

}



/* PRODUCT */

.product-section {

  padding: 140px 0;

  border-block: 1px solid var(--line);

  background: var(--bg-soft);

}

.product-intro {

  max-width: 900px;

  margin: 0 auto 80px;

  text-align: center;

}

.product-logo-wrap img {

  width: 82px;

  height: 82px;

  margin-bottom: 26px;

  object-fit: contain;

  filter:

    drop-shadow(

      0 0 24px

      rgba(87,216,232,0.18)

    );

}

.product-intro h2 {

  margin: 0;

  font-size:

    clamp(3rem, 7vw, 6.4rem);

  line-height: 0.96;

  letter-spacing: -0.07em;

}

.product-intro h2 span {

  display: block;

  color: #7c909e;

}

.product-intro p {

  max-width: 600px;

  margin: 25px auto 0;

  color: var(--muted);

  font-size: 1.08rem;

}



/* KEY */

.key-visual-card {

  min-height: 460px;

  display: grid;

  grid-template-columns:

    1.1fr 0.9fr;

  gap: 80px;

  align-items: center;

  padding: 70px;

  border: 1px solid var(--cyan-line);

  border-radius: var(--radius-large);

  background:

    radial-gradient(

      circle at 20% 30%,

      rgba(67,195,211,0.08),

      transparent 38%

    ),

    #071019;

}

.key-device {

  display: flex;

  align-items: center;

  justify-content: center;

}

.key-body {

  width: 330px;

  height: 112px;

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 0 27px;

  border: 1px solid rgba(255,255,255,0.16);

  border-radius: 25px;

  background:

    linear-gradient(

      145deg,

      #121e29,

      #05090d

    );

  box-shadow:

    inset 0 1px 0

    rgba(255,255,255,0.08),

    0 35px 70px

    rgba(0,0,0,0.55);

}

.key-body img {

  width: 55px;

  height: 55px;

  object-fit: contain;

}

.key-body strong,

.key-body small {

  display: block;

}

.key-body strong {

  font-size: 0.77rem;

  letter-spacing: 0.12em;

}

.key-body small {

  margin-top: 5px;

  color: #566775;

  font-size: 0.48rem;

  letter-spacing: 0.12em;

}

.usb {

  width: 80px;

  height: 57px;

  display: flex;

  justify-content: center;

  gap: 20px;

  margin-right: -5px;

  border: 1px solid #66747f;

  background:

    linear-gradient(

      #aeb9c1,

      #59646d

    );

}

.usb span {

  width: 8px;

  height: 5px;

  margin-top: 12px;

  background: #45505a;

}

.micro-label {

  color: var(--cyan);

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.16em;

}

.key-description h3 {

  margin: 12px 0 19px;

  font-size:

    clamp(2.4rem, 4vw, 4rem);

  line-height: 1;

  letter-spacing: -0.055em;

}

.key-description p {

  margin: 0;

  color: var(--muted);

}



/* WHY */

.why-section {

  padding: 140px 0;

}

.reason-grid {

  display: grid;

  grid-template-columns:

    repeat(3,1fr);

  gap: 17px;

}

.reason-grid article {

  min-height: 350px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 29px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background:

    rgba(255,255,255,0.018);

}

.reason-number {

  color: var(--cyan);

  font-size: 0.66rem;

  font-weight: 700;

}

.reason-grid h3 {

  margin: 0 0 12px;

  font-size: 1.6rem;

  letter-spacing: -0.04em;

}

.reason-grid p {

  margin: 0;

  color: var(--muted);

  font-size: 0.91rem;

}



/* SHOWCASE */

.showcase-section {

  padding: 140px 0;

  border-block: 1px solid var(--line);

  background: var(--bg-soft);

}

.showcase-grid {

  display: grid;

  grid-template-columns:

    0.8fr 1.2fr;

  gap: 100px;

}

.showcase-copy h2 {

  margin: 0;

  font-size:

    clamp(2.8rem, 5vw, 4.8rem);

  line-height: 1;

  letter-spacing: -0.06em;

}

.showcase-copy p {

  margin: 24px 0 0;

  color: var(--muted);

}

.capability-list {

  border-top: 1px solid var(--line);

}

.capability-list div {

  display: flex;

  justify-content: space-between;

  gap: 25px;

  padding: 20px 0;

  border-bottom: 1px solid var(--line);

}

.capability-list span {

  color: var(--cyan);

  font-size: 0.76rem;

  font-weight: 700;

}

.capability-list strong {

  font-size: 0.9rem;

  font-weight: 500;

}



/* SECURITY */

.security-section {

  padding: 150px 0;

}

.security-grid {

  display: grid;

  grid-template-columns:

    1fr 1fr;

  gap: 110px;

  align-items: center;

}

.security-graphic {

  position: relative;

  min-height: 480px;

  display: grid;

  place-items: center;

}

.security-ring {

  position: absolute;

  border: 1px solid var(--cyan-line);

  border-radius: 50%;

}

.security-ring-1 {

  width: 440px;

  height: 440px;

  opacity: 0.35;

}

.security-ring-2 {

  width: 320px;

  height: 320px;

  opacity: 0.55;

}

.security-ring-3 {

  width: 210px;

  height: 210px;

}

.security-center {

  position: relative;

  width: 150px;

  height: 150px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  border: 1px solid var(--cyan-line);

  border-radius: 50%;

  background: #071019;

  box-shadow:

    0 0 80px

    rgba(87,216,232,0.08);

}

.security-center img {

  width: 54px;

  height: 54px;

  object-fit: contain;

}

.security-center strong {

  color: var(--cyan);

  font-size: 0.57rem;

  letter-spacing: 0.13em;

}

.security-copy h2 {

  margin: 0;

  font-size:

    clamp(2.8rem, 5vw, 4.7rem);

  line-height: 1;

  letter-spacing: -0.06em;

}

.security-copy > p {

  margin: 23px 0 0;

  color: var(--muted);

}

.security-list {

  margin-top: 31px;

  border-top: 1px solid var(--line);

}

.security-list div {

  padding: 16px 0;

  border-bottom: 1px solid var(--line);

  color: #cbd6dc;

  font-size: 0.88rem;

}

.security-list span {

  display: inline-block;

  width: 43px;

  color: var(--cyan);

  font-size: 0.67rem;

}



/* HOW */

.how-section {

  padding: 130px 0;

  border-top: 1px solid var(--line);

  background: var(--bg-soft);

}

.how-grid {

  display: grid;

  grid-template-columns:

    repeat(3,1fr);

  gap: 15px;

}

.how-grid article {

  min-height: 240px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 27px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background:

    rgba(255,255,255,0.018);

}

.how-grid span {

  color: var(--cyan);

  font-size: 0.67rem;

  font-weight: 700;

}

.how-grid h3 {

  margin: 0;

  font-size: 1.9rem;

  letter-spacing: -0.04em;

}



/* PURCHASE */

.purchase-section {

  position: relative;

  padding: 160px 0;

  overflow: hidden;

}

.purchase-glow {

  position: absolute;

  width: 700px;

  height: 700px;

  left: 50%;

  top: 50%;

  transform:

    translate(-50%,-50%);

  border-radius: 50%;

  background:

    rgba(55,189,205,0.08);

  filter: blur(150px);

  pointer-events: none;

}

.purchase-wrap {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:

    1fr 0.78fr;

  gap: 90px;

  align-items: center;

}

.purchase-logo {

  width: 80px;

  height: 80px;

  margin-bottom: 27px;

  object-fit: contain;

  filter:

    drop-shadow(

      0 0 24px

      rgba(87,216,232,0.18)

    );

}

.purchase-kicker {

  display: block;

  color: var(--cyan);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.17em;

}

.purchase-product h2 {

  margin: 12px 0 18px;

  font-size:

    clamp(3.2rem, 6vw, 6rem);

  line-height: 0.95;

  letter-spacing: -0.07em;

}

.purchase-product p {

  margin: 0;

  color: var(--muted);

  font-size: 1.08rem;

}

.purchase-card {

  padding: 32px;

  border: 1px solid var(--cyan-line);

  border-radius: 25px;

  background:

    rgba(7,16,25,0.86);

  box-shadow: var(--shadow);

}

.purchase-card-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

}

.purchase-name {

  display: block;

  font-size: 1.08rem;

  font-weight: 700;

}

.purchase-status {

  display: inline-block;

  margin-top: 7px;

  color: var(--cyan);

  font-size: 0.72rem;

}

.purchase-price {

  color: var(--muted);

  font-size: 0.86rem;

}

.purchase-divider {

  height: 1px;

  margin: 25px 0;

  background: var(--line);

}

.purchase-card ul {

  display: grid;

  gap: 11px;

  margin: 0 0 28px;

  padding: 0;

  list-style: none;

  color: #b5c2ca;

  font-size: 0.87rem;

}

.purchase-card li::before {

  content: "✓";

  margin-right: 9px;

  color: var(--cyan);

}

.purchase-button {

  width: 100%;

  min-height: 58px;

  border: 1px solid var(--cyan-bright);

  border-radius: 13px;

  color: #021014;

  background:

    linear-gradient(

      135deg,

      #92f4ff,

      #45cada

    );

  font-weight: 800;

  letter-spacing: 0.025em;

  cursor: pointer;

  box-shadow:

    0 17px 50px

    rgba(55,201,218,0.15);

}

.purchase-button:hover {

  transform: translateY(-2px);

}

.purchase-note {

  margin: 11px 0 0;

  color: var(--muted-dark);

  font-size: 0.72rem;

  text-align: center;

}



/* FAQ */

.faq-section {

  padding: 130px 0;

  border-top: 1px solid var(--line);

  background: var(--bg-soft);

}

.faq-wrap {

  display: grid;

  grid-template-columns:

    0.65fr 1.35fr;

  gap: 100px;

}

.faq-wrap h2 {

  margin: 0;

  font-size:

    clamp(2.4rem, 4vw, 3.8rem);

  line-height: 1;

  letter-spacing: -0.055em;

}

.faq-list {

  border-top: 1px solid var(--line);

}

.faq-item {

  border-bottom: 1px solid var(--line);

}

.faq-question {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 25px;

  padding: 24px 0;

  border: 0;

  color: var(--text);

  background: transparent;

  text-align: left;

  cursor: pointer;

}

.faq-plus {

  color: var(--cyan);

  font-size: 1.4rem;

  transition:

    transform 0.2s ease;

}

.faq-item.open .faq-plus {

  transform: rotate(45deg);

}

.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition:

    max-height 0.3s ease;

}

.faq-answer p {

  margin: 0 0 23px;

  color: var(--muted);

}



/* FOOTER */

footer {

  padding: 80px 0 34px;

}

.footer-top {

  display: flex;

  justify-content: space-between;

  gap: 40px;

  padding-bottom: 50px;

}

.footer-top strong {

  font-size: 0.94rem;

}

.footer-top p {

  margin: 6px 0 0;

  color: var(--muted-dark);

  font-size: 0.8rem;

}

.footer-top a {

  color: var(--cyan);

  font-size: 0.84rem;

}

.footer-bottom {

  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-top: 23px;

  border-top: 1px solid var(--line);

  color: var(--muted-dark);

  font-size: 0.72rem;

}



/* RESPONSIVE */

@media (max-width: 980px) {

  .key-visual-card,

  .showcase-grid,

  .security-grid,

  .purchase-wrap,

  .faq-wrap {

    grid-template-columns: 1fr;

  }

  .key-visual-card,

  .showcase-grid,

  .security-grid,

  .purchase-wrap,

  .faq-wrap {

    gap: 60px;

  }

  .reason-grid {

    grid-template-columns: 1fr;

  }

  .reason-grid article {

    min-height: 250px;

  }

}



@media (max-width: 760px) {

  .site-nav {

    position: absolute;

    top: 76px;

    left: 20px;

    right: 20px;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 12px;

    border: 1px solid var(--line);

    border-radius: 15px;

    background: #071019;

    box-shadow: var(--shadow);

  }

  .site-nav.open {

    display: flex;

  }

  .site-nav a {

    padding: 13px 11px;

  }

  .nav-buy {

    border-radius: 10px;

  }

  .menu-button {

    display: block;

  }

  .hero {

    min-height: auto;

    padding-top: 140px;

  }

  .hero h1 {

    font-size:

      clamp(3.2rem, 15vw, 5rem);

  }

  .hero-actions {

    flex-direction: column;

  }

  .button {

    width: 100%;

  }

  .product-stage {

    margin-top: 65px;

  }

  .visual-body {

    grid-template-columns: 1fr;

  }

  .visual-sidebar {

    display: none;

  }

  .visual-assistant {

    min-height: 460px;

    padding:

      35px 22px 22px;

  }

  .assistant-center {

    padding-bottom: 50px;

  }

  .company-section,

  .product-section,

  .why-section,

  .showcase-section,

  .security-section,

  .how-section,

  .purchase-section,

  .faq-section {

    padding: 100px 0;

  }

  .key-visual-card {

    padding: 40px 25px;

  }

  .how-grid {

    grid-template-columns: 1fr;

  }

  .how-grid article {

    min-height: 180px;

  }

  .security-graphic {

    min-height: 390px;

  }

  .security-ring-1 {

    width: 340px;

    height: 340px;

  }

  .security-ring-2 {

    width: 250px;

    height: 250px;

  }

  .security-ring-3 {

    width: 175px;

    height: 175px;

  }

}



@media (max-width: 560px) {

  .container {

    width:

      min(

        calc(100% - 28px),

        var(--container)

      );

  }

  .hero-logo {

    width: 30px;

    height: 30px;

  }

  .hero h1 {

    font-size:

      clamp(3rem, 16vw, 4.5rem);

  }

  .assistant-suggestions {

    flex-direction: column;

  }

  .key-visual-card {

    overflow: hidden;

  }

  .key-device {

    transform: scale(0.78);

  }

  .key-body {

    width: 290px;

  }

  .capability-list div {

    flex-direction: column;

    gap: 4px;

  }

  .purchase-card-top {

    flex-direction: column;

  }

  .footer-top,

  .footer-bottom {

    flex-direction: column;

  }

}**%**                                                                                                 tapioxa@Juniors-MBP terva-systems-website % 

@media (max-width: 760px) {
  .product-shot-bar {
    min-height: 44px;
    padding: 0 12px;
    font-size: 0.54rem;
  }

  .product-shot-bar > span {
    display: none;
  }

  .real-product-shot {
    border-radius: 18px 18px 0 0;
  }
}