/* ==================================================
   CODEROOTS - DESIGN SYSTEM
================================================== */

:root {

  --bg: #070b14;

  --bg-soft: #0b1120;

  --card: rgba(15, 24, 42, .78);

  --card-solid: #0f182a;

  --border: rgba(255, 255, 255, .09);

  --border-strong: rgba(255, 255, 255, .14);

  --text: #f4f7fb;

  --muted: #9ca9bd;

  --primary: #69e39e;

  --primary-strong: #3bd47e;

  --primary-light: #a2f5c3;

  --primary-soft: rgba(105, 227, 158, .12);

  --blue: #6ca8ff;

  --shadow:
    0 20px 70px rgba(0, 0, 0, .35);

  --shadow-large:
    0 40px 100px rgba(0, 0, 0, .50);

}



/* ==================================================
   RESET
================================================== */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  scroll-padding-top: 95px;

  scrollbar-width: thin;

  scrollbar-color:
    var(--primary)
    var(--bg);

}



body {

  font-family:
    "Inter",
    sans-serif;

  color: var(--text);

  background:

    radial-gradient(
      circle at 15% 0%,
      rgba(60, 103, 255, .08),
      transparent 32%
    ),

    radial-gradient(
      circle at 90% 10%,
      rgba(105, 227, 158, .07),
      transparent 30%
    ),

    var(--bg);

  line-height: 1.6;

  overflow-x: hidden;

}



a {

  color: inherit;

  text-decoration: none;

}



button,
input,
textarea,
select {

  font: inherit;

}



button {

  cursor: pointer;

}



/* ==================================================
   SCROLLBAR CODEROOTS
================================================== */

::-webkit-scrollbar {

  width: 10px;

}



::-webkit-scrollbar-track {

  background: var(--bg);

}



::-webkit-scrollbar-thumb {

  border-radius: 20px;

  border:
    2px solid
    var(--bg);

  background:

    linear-gradient(
      180deg,
      var(--primary-light),
      var(--primary),
      var(--primary-strong)
    );

}



::-webkit-scrollbar-thumb:hover {

  background:

    linear-gradient(
      180deg,
      #bcffd5,
      var(--primary)
    );

}



/* ==================================================
   CONTAINER
================================================== */

.container {

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

  margin:
    0 auto;

}



/* ==================================================
   BACKGROUND GLOW
================================================== */

.page-glow {

  position: fixed;

  width: 360px;

  height: 360px;

  border-radius: 50%;

  filter:
    blur(120px);

  pointer-events: none;

  opacity: .12;

  z-index: -1;

}



.glow-one {

  background:
    var(--primary);

  top: 10%;

  left: -180px;

}



.glow-two {

  background:
    var(--blue);

  top: 35%;

  right: -180px;

}



/* ==================================================
   HEADER
================================================== */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background:
    rgba(7, 11, 20, .70);

  border-bottom:
    1px solid
    rgba(255, 255, 255, .05);

  backdrop-filter:
    blur(18px);

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

  transition:

    background .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}



.site-header.scrolled {

  background:
    rgba(7, 11, 20, .93);

  border-bottom-color:
    rgba(105, 227, 158, .12);

  box-shadow:
    0 12px 50px
    rgba(0, 0, 0, .28);

}



.nav {

  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 24px;

}



/* ==================================================
   BRAND
================================================== */

.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 1.35rem;

  font-weight: 700;

}



.brand > span:last-child > span {

  color:
    var(--primary);

}



.brand-mark {

  width: 38px;

  height: 38px;

  border-radius: 11px;

  display: grid;

  place-items: center;

  color: #06110b;

  background:

    linear-gradient(
      135deg,
      var(--primary),
      #b6ffd0
    );

  font-size: .9rem;

  box-shadow:

    0 10px 30px
    rgba(105, 227, 158, .18);

}



/* ==================================================
   NAVIGATION
================================================== */

.nav-links {

  display: flex;

  align-items: center;

  gap: 28px;

  color: #c5cedc;

  font-size: .94rem;

  font-weight: 500;

}



.nav-links > a:not(.btn) {

  position: relative;

  transition:
    color .2s ease;

}



.nav-links > a:not(.btn)::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -7px;

  width: 0;

  height: 2px;

  background:
    var(--primary);

  border-radius: 10px;

  transition:
    width .25s ease;

}



.nav-links > a:not(.btn):hover {

  color: white;

}



.nav-links > a:not(.btn):hover::after {

  width: 100%;

}



.menu-toggle {

  display: none;

  background: transparent;

  border: 0;

  width: 40px;

}



.menu-toggle span {

  display: block;

  height: 2px;

  background: white;

  margin: 6px 0;

  transition:
    transform .25s ease,
    opacity .25s ease;

}



/* ==================================================
   BUTTONS
================================================== */

.btn {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 50px;

  padding:
    0 22px;

  border-radius: 12px;

  border:
    1px solid transparent;

  font-weight: 700;

  overflow: hidden;

  transition:

    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;

}



.btn-sm {

  min-height: 42px;

  padding:
    0 16px;

}



.btn-primary {

  background:

    linear-gradient(
      135deg,
      var(--primary),
      #8cf5b8
    );

  color: #06110b;

  box-shadow:

    0 12px 32px
    rgba(105, 227, 158, .16);

}



.btn-primary:hover {

  transform:
    translateY(-3px);

  box-shadow:

    0 18px 40px
    rgba(105, 227, 158, .25);

}



.btn-primary:active {

  transform:
    translateY(0)
    scale(.98);

}



.btn-secondary {

  border-color:
    var(--border);

  background:
    rgba(255, 255, 255, .05);

}



.btn-secondary:hover,
.btn-outline:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(105, 227, 158, .45);

  background:
    var(--primary-soft);

}



.btn-outline {

  border-color:
    var(--border);

  background:
    transparent;

}



.btn-full {

  width: 100%;

}



/* ==================================================
   EYEBROW
================================================== */

.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  text-transform: uppercase;

  letter-spacing: .14em;

  font-size: .76rem;

  font-weight: 800;

  color:
    var(--primary);

  margin-bottom: 18px;

}



.eyebrow::before {

  content: "";

  width: 24px;

  height: 1px;

  background:
    var(--primary);

}



/* ==================================================
   HERO
================================================== */

.hero {

  position: relative;

  min-height: 760px;

  display: flex;

  align-items: center;

  padding:
    80px 0 90px;

}



.hero::before {

  content: "";

  position: absolute;

  width: 700px;

  height: 700px;

  top: -330px;

  left: 50%;

  transform:
    translateX(-50%);

  pointer-events: none;

  background:

    radial-gradient(
      circle,
      rgba(105, 227, 158, .11),
      transparent 65%
    );

}



.hero-grid {

  display: grid;

  grid-template-columns:
    1.02fr .98fr;

  gap: 70px;

  align-items: center;

}



.hero h1,
.section-heading h2,
.saas-grid h2,
.why-copy h2,
.about-box h2,
.contact-copy h2 {

  font-family:
    "Space Grotesk",
    sans-serif;

  line-height: 1.06;

  letter-spacing: -.035em;

}



.hero h1 {

  font-size:
    clamp(
      3rem,
      6vw,
      5.15rem
    );

  max-width: 760px;

}



.hero h1 span {

  background:

    linear-gradient(
      90deg,
      var(--primary),
      #aaf5ff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

}



.hero-text {

  color:
    var(--muted);

  font-size:
    1.12rem;

  max-width:
    650px;

  margin:
    26px 0 32px;

}



.hero-actions {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}



.hero-trust {

  display: flex;

  gap: 34px;

  margin-top:
    42px;

}



.hero-trust div {

  display: flex;

  flex-direction:
    column;

}



.hero-trust strong {

  font-size:
    .94rem;

}



.hero-trust span {

  font-size:
    .78rem;

  color:
    var(--muted);

}



/* ==================================================
   HERO PANEL
================================================== */

.hero-panel {

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

  background:

    linear-gradient(
      160deg,
      rgba(18, 29, 49, .94),
      rgba(7, 11, 20, .92)
    );

  border-radius:
    22px;

  overflow: hidden;

  box-shadow:
    var(--shadow);

  transform:

    perspective(1300px)
    rotateY(-4deg)
    rotateX(1deg);

  transition:

    border-color .3s ease,
    box-shadow .3s ease;

}



.hero-panel:hover {

  border-color:
    rgba(105, 227, 158, .20);

  box-shadow:

    0 35px 100px
    rgba(0, 0, 0, .50),

    0 0 60px
    rgba(105, 227, 158, .06);

}



.panel-top {

  height: 46px;

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

  display: flex;

  align-items: center;

  padding:
    0 16px;

  color:
    #78869b;

  font-size:
    .72rem;

  gap: 18px;

}



.dots {

  display: flex;

  gap: 6px;

}



.dots span {

  width: 7px;

  height: 7px;

  border-radius:
    50%;

  background:
    #526075;

}



.dashboard {

  min-height: 480px;

  display: grid;

  grid-template-columns:
    58px 1fr;

}



.dash-sidebar {

  background:
    rgba(255, 255, 255, .025);

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

  padding:
    14px 0;

  display: flex;

  flex-direction:
    column;

  align-items: center;

  gap: 22px;

}



.mini-logo {

  width: 30px;

  height: 30px;

  border-radius:
    8px;

  background:
    var(--primary);

  color:
    #06110b;

  display: grid;

  place-items:
    center;

  font-size:
    .64rem;

  font-weight:
    800;

  margin-bottom:
    8px;

}



.dash-sidebar span {

  width: 19px;

  height: 19px;

  border-radius:
    5px;

  background:
    #1c2a40;

}



.dash-sidebar span.active {

  background:
    rgba(105, 227, 158, .32);

  border:
    1px solid
    rgba(105, 227, 158, .55);

}



.dash-content {

  padding:
    24px;

}



.dash-head,
.card-title,
.order-row {

  display: flex;

  align-items: center;

  justify-content:
    space-between;

}



.dash-head small,
.chart-card small {

  color:
    #748399;

}



.dash-head h3 {

  font-size:
    1.15rem;

}



.avatar {

  width:
    34px;

  height:
    34px;

  border-radius:
    10px;

  display:
    grid;

  place-items:
    center;

  background:
    #18253a;

  color:
    var(--primary);

  font-size:
    .72rem;

  font-weight:
    800;

}



.stats {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin:
    22px 0;

}



.stats article,
.chart-card,
.orders-card {

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

  background:
    rgba(255, 255, 255, .025);

  border-radius:
    14px;

}



.stats article {

  padding:
    14px;

}



.stats small {

  display:
    block;

  color:
    #748399;

  font-size:
    .64rem;

}



.stats strong {

  display:
    block;

  font-size:
    1.25rem;

  margin:
    4px 0;

}



.stats em {

  color:
    var(--primary);

  font-style:
    normal;

  font-size:
    .62rem;

}



.chart-card {

  padding:
    15px;

  height:
    150px;

}



.card-title strong {

  display:
    block;

  font-size:
    .78rem;

}



.card-title span {

  color:
    var(--primary);

  font-size:
    .7rem;

}



.bars {

  height:
    82px;

  display:
    flex;

  align-items:
    end;

  gap:
    8px;

  padding-top:
    12px;

}



.bars i {

  display:
    block;

  flex:
    1;

  background:

    linear-gradient(
      to top,
      rgba(105, 227, 158, .28),
      var(--primary)
    );

  border-radius:
    4px 4px 2px 2px;

  opacity:
    .8;

  transform-origin:
    bottom;

}



.orders-card {

  margin-top:
    10px;

  overflow:
    hidden;

}



.order-row {

  padding:
    11px 14px;

  gap:
    10px;

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

}



.order-row:last-child {

  border-bottom:
    0;

}



.order-row > div {

  flex: 1;

}



.order-row strong,
.order-row small {

  display:
    block;

  font-size:
    .68rem;

}



.order-row small {

  color:
    #748399;

}



.order-row b {

  font-size:
    .61rem;

  color:
    #9fb0c8;

}



.status-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

}



.green {

  background:
    var(--primary);

}



.yellow {

  background:
    #ffd75c;

}



/* ==================================================
   LOGOS / SEGMENTS
================================================== */

.logos-strip {

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

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

  background:
    rgba(255, 255, 255, .018);

}



.strip-content {

  min-height:
    96px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}



.strip-content > span {

  color:
    var(--muted);

  font-size:
    .83rem;

}



.segments {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}



.segments span {

  padding:
    7px 11px;

  border-radius:
    999px;

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

  color:
    #c5cedc;

  font-size:
    .72rem;

  transition:

    border-color .25s ease,
    background .25s ease,
    transform .25s ease;

}



.segments span:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(105, 227, 158, .35);

  background:
    var(--primary-soft);

}



/* ==================================================
   SECTIONS
================================================== */

.section {

  padding:
    110px 0;

}



.section-heading {

  max-width:
    720px;

  margin-bottom:
    52px;

}



.section-heading h2,
.saas-grid h2,
.why-copy h2,
.about-box h2,
.contact-copy h2 {

  font-size:

    clamp(
      2.2rem,
      4vw,
      3.55rem
    );

}



.section-heading p,
.lead,
.why-copy p,
.about-box p,
.contact-copy p {

  color:
    var(--muted);

  margin-top:
    18px;

  font-size:
    1rem;

}



/* ==================================================
   SERVICE CARDS
================================================== */

.cards-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    20px;

}



.service-card,
.price-card {

  position:
    relative;

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

  background:

    linear-gradient(
      160deg,
      rgba(17, 27, 46, .82),
      rgba(9, 14, 25, .78)
    );

  border-radius:
    20px;

  padding:
    30px;

}



.service-card {

  min-height:
    360px;

  overflow:
    hidden;

  transition:

    transform .35s
    cubic-bezier(.16, 1, .3, 1),

    border-color .35s ease,

    box-shadow .35s ease;

}



.service-card::before {

  content: "";

  position:
    absolute;

  width:
    170px;

  height:
    170px;

  top:
    -75px;

  right:
    -75px;

  border-radius:
    50%;

  background:
    var(--primary);

  filter:
    blur(100px);

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity .4s ease;

}



.service-card:hover {

  transform:
    translateY(-8px);

  border-color:
    rgba(105, 227, 158, .42);

  box-shadow:

    0 22px 55px
    rgba(0, 0, 0, .35),

    0 0 45px
    rgba(105, 227, 158, .09);

}



.service-card:hover::before {

  opacity:
    .17;

}



.service-card.featured {

  border-color:
    rgba(105, 227, 158, .3);

  box-shadow:

    0 20px 60px
    rgba(105, 227, 158, .06);

}



.tag,
.popular-label {

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  border-radius:
    999px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  padding:
    6px 10px;

  font-size:
    .66rem;

  font-weight:
    700;

}



.icon {

  width:
    48px;

  height:
    48px;

  border-radius:
    13px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  display:
    grid;

  place-items:
    center;

  font-size:
    1.1rem;

  margin-bottom:
    26px;

  transition:

    transform .3s ease,
    background .3s ease;

}



.service-card:hover .icon {

  transform:

    translateY(-3px)
    scale(1.05);

  background:
    rgba(105, 227, 158, .17);

}



.service-card h3 {

  font-size:
    1.2rem;

  margin-bottom:
    12px;

}



.service-card p,
.price-card p {

  color:
    var(--muted);

  font-size:
    .9rem;

}



.service-card ul,
.price-card ul {

  list-style:
    none;

  margin-top:
    24px;

}



.service-card li,
.price-card li {

  color:
    #c8d1df;

  padding:
    7px 0;

  font-size:
    .85rem;

}



.service-card li::before,
.price-card li::before {

  content:
    "✓";

  color:
    var(--primary);

  margin-right:
    9px;

  font-weight:
    800;

}



/* ==================================================
   SAAS
================================================== */

.saas-section {

  overflow:
    hidden;

}



.saas-grid {

  display:
    grid;

  grid-template-columns:
    1.04fr .96fr;

  align-items:
    center;

  gap:
    90px;

}



.check-list {

  margin:
    34px 0;

  display:
    grid;

  gap:
    18px;

}



.check-list > div {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;

}



.check-list > div > span {

  flex:
    0 0 auto;

  width:
    28px;

  height:
    28px;

  border-radius:
    8px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  font-weight:
    800;

  margin-top:
    3px;

}



.check-list p {

  color:
    var(--muted);

  font-size:
    .9rem;

}



.check-list strong {

  color:
    white;

}



/* ==================================================
   PHONE
================================================== */

.phone-wrap {

  display:
    flex;

  justify-content:
    center;

}



.phone {

  position:
    relative;

  width:
    330px;

  padding:
    10px;

  border-radius:
    38px;

  background:

    linear-gradient(
      145deg,
      #202b3d,
      #0b101a
    );

  border:
    1px solid
    rgba(255, 255, 255, .18);

  box-shadow:

    0 30px 100px
    rgba(0, 0, 0, .45);

  transition:

    transform .4s
    cubic-bezier(.16, 1, .3, 1),

    box-shadow .4s ease;

}



.phone:hover {

  transform:

    translateY(-8px)
    rotate(-1deg);

  box-shadow:

    0 45px 120px
    rgba(0, 0, 0, .55),

    0 0 60px
    rgba(105, 227, 158, .06);

}



.phone-screen {

  position:
    relative;

  min-height:
    610px;

  border-radius:
    30px;

  padding:
    54px 22px 24px;

  background:

    radial-gradient(
      circle at top right,
      rgba(105, 227, 158, .12),
      transparent 28%
    ),

    #0c1422;

}



.phone-screen::before {

  content: "";

  position:
    absolute;

  width:
    88px;

  height:
    22px;

  background:
    #05080f;

  border-radius:
    0 0 14px 14px;

  top:
    0;

  left:
    50%;

  transform:
    translateX(-50%);

}



.phone-screen > small {

  color:
    var(--primary);

  letter-spacing:
    .13em;

  font-size:
    .63rem;

  font-weight:
    800;

}



.phone-screen h3 {

  font-size:
    1.45rem;

  margin:
    8px 0 20px;

}



.device-box,
.estimate {

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

  background:
    rgba(255, 255, 255, .025);

  border-radius:
    13px;

  padding:
    14px;

}



.device-box span,
.device-box strong,
.estimate span,
.estimate strong {

  display:
    block;

}



.device-box span,
.estimate span {

  color:
    var(--muted);

  font-size:
    .69rem;

}



.device-box strong,
.estimate strong {

  font-size:
    .86rem;

  margin-top:
    3px;

}



.timeline {

  padding:
    26px 5px 20px 8px;

}



.timeline > div {

  min-height:
    76px;

  display:
    flex;

  gap:
    14px;

  position:
    relative;

}



.timeline > div:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  width:
    1px;

  height:
    47px;

  background:
    #27354a;

  left:
    7px;

  top:
    18px;

}



.timeline i {

  flex:
    0 0 auto;

  width:
    15px;

  height:
    15px;

  border-radius:
    50%;

  background:
    #25334a;

  border:
    3px solid
    #0c1422;

  box-shadow:
    0 0 0 1px
    #38465c;

  margin-top:
    4px;

  z-index:
    1;

}



.timeline .done i {

  background:
    var(--primary);

  box-shadow:
    0 0 0 1px
    var(--primary);

}



.timeline .current i {

  background:
    #ffd75c;

  box-shadow:
    0 0 0 1px
    #ffd75c;

}



.timeline p strong,
.timeline p span {

  display:
    block;

  font-size:
    .78rem;

}



.timeline p span {

  color:
    var(--muted);

  font-size:
    .68rem;

}



/* ==================================================
   PLANS
================================================== */

.plans-section {

  background:

    linear-gradient(
      to bottom,
      rgba(255, 255, 255, .015),
      transparent
    );

}



.pricing-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    20px;

  align-items:
    stretch;

}



.price-card {

  display:
    flex;

  flex-direction:
    column;

  transition:

    transform .35s
    cubic-bezier(.16, 1, .3, 1),

    border-color .35s ease,

    box-shadow .35s ease;

}



.price-card:hover {

  transform:
    translateY(-7px);

  border-color:
    rgba(105, 227, 158, .30);

  box-shadow:

    0 24px 60px
    rgba(0, 0, 0, .30);

}



.price-card.popular {

  border-color:
    rgba(105, 227, 158, .45);

  transform:
    translateY(-12px);

  box-shadow:

    0 20px 70px
    rgba(105, 227, 158, .08);

}



.price-card.popular:hover {

  transform:
    translateY(-18px);

}



.plan-name {

  font-weight:
    800;

  color:
    #dfe7f2;

}



.price {

  display:
    flex;

  align-items:
    baseline;

  margin:
    16px 0 14px;

}



.price small {

  color:
    var(--muted);

  margin-right:
    4px;

}



.price strong {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    3.5rem;

  line-height:
    1;

}



.price span {

  color:
    var(--muted);

  font-size:
    .78rem;

  margin-left:
    4px;

}



.price-card ul {

  flex:
    1;

  margin-bottom:
    26px;

}



.pricing-note {

  text-align:
    center;

  color:
    var(--muted);

  margin-top:
    34px;

  font-size:
    .84rem;

}



/* ==================================================
   WHY CODEROOTS
================================================== */

.why-grid {

  display:
    grid;

  grid-template-columns:
    .95fr 1.05fr;

  gap:
    90px;

  align-items:
    start;

}



.benefits {

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

}



.benefits article {

  display:
    flex;

  gap:
    24px;

  padding:
    28px 0;

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

  transition:

    padding-left .25s ease,
    border-color .25s ease;

}



.benefits article:hover {

  padding-left:
    8px;

  border-color:
    rgba(105, 227, 158, .25);

}



.benefits article > span {

  color:
    var(--primary);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-weight:
    700;

}



.benefits h3 {

  font-size:
    1rem;

  margin-bottom:
    6px;

}



.benefits p {

  color:
    var(--muted);

  font-size:
    .86rem;

}



/* ==================================================
   ABOUT
================================================== */

.about-box {

  display:
    grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    80px;

  padding:
    60px;

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

  border-radius:
    24px;

  background:

    linear-gradient(
      125deg,
      rgba(105, 227, 158, .07),
      rgba(108, 168, 255, .05)
    ),

    rgba(255, 255, 255, .018);

  transition:

    border-color .3s ease,
    box-shadow .3s ease;

}



.about-box:hover {

  border-color:
    rgba(105, 227, 158, .20);

  box-shadow:

    0 25px 70px
    rgba(0, 0, 0, .18);

}



/* ==================================================
   CONTACT
================================================== */

.contact-section {

  padding-top:
    40px;

}



.contact-grid {

  display:
    grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:
    80px;

  align-items:
    start;

}



.contact-points {

  display:
    grid;

  gap:
    12px;

  margin-top:
    28px;

  color:
    #c7d1de;

  font-size:
    .88rem;

}



.contact-form {

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

  border-radius:
    22px;

  padding:
    30px;

  background:
    rgba(255, 255, 255, .025);

  transition:

    border-color .3s ease,
    box-shadow .3s ease;

}



.contact-form:hover {

  border-color:
    rgba(105, 227, 158, .17);

  box-shadow:

    0 20px 60px
    rgba(0, 0, 0, .18);

}



.form-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;

}



label {

  display:
    block;

  font-size:
    .78rem;

  font-weight:
    600;

  color:
    #d4dce7;

  margin-bottom:
    14px;

}



input,
textarea,
select {

  width:
    100%;

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

  background:
    #0a111e;

  color:
    white;

  border-radius:
    11px;

  padding:
    13px 14px;

  outline:
    none;

  margin-top:
    7px;

  transition:

    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;

}



input:hover,
textarea:hover,
select:hover {

  border-color:
    rgba(255, 255, 255, .16);

}



input:focus,
textarea:focus,
select:focus {

  border-color:
    rgba(105, 227, 158, .55);

  box-shadow:

    0 0 0 3px
    rgba(105, 227, 158, .08);

  background:
    #0c1524;

}



textarea {

  resize:
    vertical;

}



.form-note {

  color:
    #748399;

  font-size:
    .68rem;

  text-align:
    center;

  margin-top:
    10px;

}



/* ==================================================
   FOOTER
================================================== */

footer {

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

  padding:
    56px 0 24px;

  margin-top:
    80px;

}



.footer-grid {

  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap:
    40px;

}



.footer-grid p {

  color:
    var(--muted);

  max-width:
    380px;

  margin-top:
    16px;

  font-size:
    .84rem;

}



.footer-grid > div:not(:first-child) {

  display:
    grid;

  align-content:
    start;

  gap:
    9px;

}



.footer-grid strong {

  font-size:
    .8rem;

  margin-bottom:
    6px;

}

.footer-grid > div:not(:first-child) a {

  color:
    var(--muted);

  font-size:
    .8rem;

  transition:
    color .2s ease;

}

.footer-grid .footer-contact {
  overflow-wrap: anywhere;
}

.footer-grid a:hover {

  color:
    white;

}

.footer-bottom {

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

  margin-top:
    42px;

  padding-top:
    20px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    18px;

  color:
    #66758b;

  font-size:
    .7rem;

}

/* ==================================================
   FLOATING CTA
================================================== */

.floating-cta {

  position:
    fixed;

  bottom:
    22px;

  right:
    22px;

  z-index:
    900;

  background:
    var(--primary);

  color:
    #06110b;

  padding:
    12px 16px;

  border-radius:
    999px;

  font-size:
    .78rem;

  font-weight:
    800;

  box-shadow:

    0 14px 35px
    rgba(0, 0, 0, .32);

  transition:

    transform .25s ease,
    box-shadow .25s ease;

}
.floating-cta:hover {

  transform:
    translateY(-4px);

  box-shadow:

    0 18px 45px
    rgba(0, 0, 0, .40),

    0 0 30px
    rgba(105, 227, 158, .16);

}

.floating-cta span {

  margin-right:
    5px;

}

/* ==================================================
   HERO ENTRANCE
================================================== */
@keyframes heroCopyEnter {

  from {

    opacity:
      0;

    transform:
      translateY(30px);

  }
  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}

@keyframes heroPanelEnter {

  from {

    opacity:
      0;

    transform:

      perspective(1300px)
      translateX(45px)
      rotateY(-4deg)
      rotateX(1deg);

  }
  to {

    opacity:
      1;

    transform:

      perspective(1300px)
      translateX(0)
      rotateY(-4deg)
      rotateX(1deg);

  }

}

.hero-copy {

  animation:

    heroCopyEnter
    .85s
    cubic-bezier(.16, 1, .3, 1)
    both;

}

.hero-panel {

  animation:

    heroPanelEnter
    1s
    .12s
    cubic-bezier(.16, 1, .3, 1)
    both;

}

/* ==================================================
   CHART ANIMATION
================================================== */

@keyframes chartGrow {

  from {

    transform:
      scaleY(0);

  }

  to {

    transform:
      scaleY(1);

  }

}

.bars i {
  animation: none;
}

.bars i:nth-child(1) {

  animation-delay:
    .55s;

}



.bars i:nth-child(2) {

  animation-delay:
    .60s;

}



.bars i:nth-child(3) {

  animation-delay:
    .65s;

}



.bars i:nth-child(4) {

  animation-delay:
    .70s;

}



.bars i:nth-child(5) {

  animation-delay:
    .75s;

}



.bars i:nth-child(6) {

  animation-delay:
    .80s;

}



.bars i:nth-child(7) {

  animation-delay:
    .85s;

}



/* ==================================================
   SCROLL REVEAL
================================================== */

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {

  opacity:
    0;

  transition:

    opacity .8s ease,

    transform .8s
    cubic-bezier(.16, 1, .3, 1);

}



.reveal {

  transform:
    translateY(45px);

}



.reveal-left {

  transform:
    translateX(-50px);

}



.reveal-right {

  transform:
    translateX(50px);

}



.reveal-scale {

  transform:
    scale(.95);

}



.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {

  opacity:
    1;

  transform:
    translate(0, 0)
    scale(1);

}



/* ==================================================
   STAGGER
================================================== */

.cards-grid .service-card:nth-child(1) {

  transition-delay:
    0ms;

}



.cards-grid .service-card:nth-child(2) {

  transition-delay:
    100ms;

}



.cards-grid .service-card:nth-child(3) {

  transition-delay:
    200ms;

}



.pricing-grid .price-card:nth-child(1) {

  transition-delay:
    0ms;

}



.pricing-grid .price-card:nth-child(2) {

  transition-delay:
    100ms;

}



.pricing-grid .price-card:nth-child(3) {

  transition-delay:
    200ms;

}



/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 980px) {

  .hero-grid,
  .saas-grid,
  .why-grid,
  .contact-grid,
  .about-box {

    grid-template-columns:
      1fr;

  }


  .hero {

    padding-top:
      60px;

  }


  .hero-panel {

    transform:
      none;

    max-width:
      700px;

  }


  .cards-grid,
  .pricing-grid {

    grid-template-columns:
      1fr;

  }


  .price-card.popular {

    transform:
      none;

  }


  .price-card.popular:hover {

    transform:
      translateY(-7px);

  }


  .saas-grid,
  .why-grid,
  .contact-grid {

    gap:
      55px;

  }


  .about-box {

    gap:
      24px;

  }


  .strip-content {

    align-items:
      flex-start;

    flex-direction:
      column;

    justify-content:
      center;

    padding:
      24px 0;

  }

}



@media (max-width: 760px) {

  .container {

    width:
      min(
        100% - 26px,
        1160px
      );

  }


  .menu-toggle {

    display:
      block;

  }


  .nav-links {

    display:
      none;

    position:
      absolute;

    left:
      13px;

    right:
      13px;

    top:
      68px;

    padding:
      18px;

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

    border-radius:
      16px;

    background:
      rgba(10, 17, 29, .98);

    backdrop-filter:
      blur(20px);

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

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      6px;

    box-shadow:

      0 20px 60px
      rgba(0, 0, 0, .35);

  }


  .nav-links.open {

    display:
      flex;

  }


  .nav-links > a {

    padding:
      10px 8px;

  }


  .nav-links .btn {

    margin-top:
      6px;

  }


  .hero {

    min-height:
      auto;

  }


  .hero h1 {

    font-size:
      2.8rem;

  }


  .hero-trust {

    gap:
      18px;

    justify-content:
      space-between;

  }


  .hero-panel {

    animation:

      heroCopyEnter
      .9s
      .15s
      cubic-bezier(.16, 1, .3, 1)
      both;

  }


  .dashboard {

    min-height:
      420px;

  }


  .dash-content {

    padding:
      16px;

  }


  .stats {

    grid-template-columns:
      1fr;

  }


  .stats article:nth-child(3) {

    display:
      none;

  }


  .section {

    padding:
      82px 0;

  }


  .service-card,
  .price-card {

    padding:
      24px;

  }


  .about-box {

    padding:
      30px 22px;

  }


  .form-grid {

    grid-template-columns:
      1fr;

    gap:
      0;

  }


  .contact-form {

    padding:
      22px;

  }


  .footer-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .footer-grid > div:first-child {

    grid-column:
      1 / -1;

  }


  .footer-bottom {

    flex-direction:
      column;

  }


  .reveal-left,
  .reveal-right {

    transform:
      translateY(35px);

  }

}



@media (max-width: 480px) {

  .hero-actions {

    flex-direction:
      column;

  }


  .hero-actions .btn {

    width:
      100%;

  }


  .hero-trust {

    display:
      grid;

    grid-template-columns:
      repeat(3, 1fr);

    gap:
      8px;

  }


  .hero-trust div {

    padding-right:
      6px;

  }


  .hero-trust span {

    font-size:
      .68rem;

  }


  .phone {

    width:
      min(
        100%,
        330px
      );

  }


  .floating-cta {

    left:
      16px;

    right:
      16px;

    text-align:
      center;

  }

}



/* ==================================================
   ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior:
      auto;

  }


  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }


  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {

    opacity:
      1;

    transform:
      none;

  }

}/* ==================================================
   CODEROOTS MOTION SYSTEM V2
================================================== */

.scroll-animate {

  opacity: 0;

  /*
   * translate separado do transform
   * evita conflito com:
   *
   * hover dos cards
   * rotação do dashboard
   * plano popular
   * celular
   */
  translate: 0 0;

  scale: 1;

  filter: blur(2px);

  transition:
    opacity .75s ease,
    translate .85s cubic-bezier(.16, 1, .3, 1),
    scale .85s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease;

  transition-delay:
    var(--motion-delay, 0ms);

  will-change:
    opacity,
    translate,
    scale;

}


/* ==================================================
   DE BAIXO
================================================== */

.scroll-animate.animate-up {

  translate:
    0 42px;

}


/* ==================================================
   ESQUERDA
================================================== */

.scroll-animate.animate-left {

  translate:
    -50px 0;

}


/* ==================================================
   DIREITA
================================================== */

.scroll-animate.animate-right {

  translate:
    50px 0;

}


/* ==================================================
   SCALE
================================================== */

.scroll-animate.animate-scale {

  scale:
    .94;

}


/* ==================================================
   VISÍVEL
================================================== */

.scroll-animate.is-visible {

  opacity:
    1;

  translate:
    0 0;

  scale:
    1;

  filter:
    blur(0);

}


/* ==================================================
   ANIMAÇÃO DOS CARDS
================================================== */

.service-card.scroll-animate,
.price-card.scroll-animate {

  transition:
    opacity .7s ease,
    translate .8s cubic-bezier(.16, 1, .3, 1),
    scale .8s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease,
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

  transition-delay:
    var(--motion-delay, 0ms);

}


/* ==================================================
   BENEFÍCIOS
================================================== */

.benefits article.scroll-animate {

  transition:
    opacity .7s ease,
    translate .75s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease,
    padding-left .25s ease,
    border-color .25s ease;

  transition-delay:
    var(--motion-delay, 0ms);

}


/* ==================================================
   LISTAS
================================================== */

.service-card li.scroll-animate,
.price-card li.scroll-animate {

  transition:
    opacity .55s ease,
    translate .65s cubic-bezier(.16, 1, .3, 1);

  transition-delay:
    var(--motion-delay, 0ms);

}


/* ==================================================
   CHECK LIST
================================================== */

.check-list > div.scroll-animate {

  transition:
    opacity .65s ease,
    translate .75s cubic-bezier(.16, 1, .3, 1),
    filter .6s ease;

  transition-delay:
    var(--motion-delay, 0ms);

}


/* ==================================================
   TIMELINE
================================================== */

.timeline > div.scroll-animate {

  transition:
    opacity .6s ease,
    translate .7s cubic-bezier(.16, 1, .3, 1);

  transition-delay:
    var(--motion-delay, 0ms);

}


/* ==================================================
   HERO TRUST
================================================== */

.hero-trust > div.scroll-animate {

  transition:
    opacity .6s ease,
    translate .7s cubic-bezier(.16, 1, .3, 1);

  transition-delay:
    var(--motion-delay, 0ms);

}


/* ==================================================
   SEGMENTOS
================================================== */

.segments > span.scroll-animate {

  transition:
    opacity .55s ease,
    translate .65s cubic-bezier(.16, 1, .3, 1),
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;

  transition-delay:
    var(--motion-delay, 0ms);

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  /*
   * Evita movimentos laterais exagerados
   * em telas pequenas.
   */

  .scroll-animate.animate-left:not(.is-visible) {

    translate:
      -25px 0;

  }


  .scroll-animate.animate-right:not(.is-visible) {

    translate:
      25px 0;

  }


  .scroll-animate.animate-up:not(.is-visible) {

    translate:
      0 28px;

  }

}


/* ==================================================
   ACESSIBILIDADE
================================================== */

@media (prefers-reduced-motion: reduce) {

  .scroll-animate,
  .scroll-animate.animate-up,
  .scroll-animate.animate-left,
  .scroll-animate.animate-right,
  .scroll-animate.animate-scale {

    opacity:
      1 !important;

    translate:
      0 0 !important;

    scale:
      1 !important;

    filter:
      none !important;

    transition:
      none !important;

  }

}
.hero-panel:not(.is-visible) .bars i {

  scale:
    1 0;

}


.hero-panel.is-visible .bars i {

  scale:
    1 1;

  transition:
    scale .7s
    cubic-bezier(.16, 1, .3, 1);

  transform-origin:
    bottom;

}


.hero-panel.is-visible .bars i:nth-child(1) {
  transition-delay: 200ms;
}

.hero-panel.is-visible .bars i:nth-child(2) {
  transition-delay: 250ms;
}

.hero-panel.is-visible .bars i:nth-child(3) {
  transition-delay: 300ms;
}

.hero-panel.is-visible .bars i:nth-child(4) {
  transition-delay: 350ms;
}

.hero-panel.is-visible .bars i:nth-child(5) {
  transition-delay: 400ms;
}

.hero-panel.is-visible .bars i:nth-child(6) {
  transition-delay: 450ms;
}

.hero-panel.is-visible .bars i:nth-child(7) {
  transition-delay: 500ms;
}
/* Alturas das barras da demonstração. */
.demo-bar-36{height:36%}
.demo-bar-54{height:54%}
.demo-bar-44{height:44%}
.demo-bar-72{height:72%}
.demo-bar-61{height:61%}
.demo-bar-88{height:88%}
.demo-bar-78{height:78%}

/* Contém o brilho decorativo e as transições fora da tela. */
html, body { overflow-x: clip; }


/* CodeRoots: contato e ajuda — 1.0.0 */
.footer-grid > div:not(:first-child) a.footer-help {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(105, 227, 158, .28);
  border-radius: 10px;
  background: rgba(105, 227, 158, .07);
  color: #a6efc2;
  font-size: .8rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.footer-grid > div:not(:first-child) a.footer-help:hover {
  background: rgba(105, 227, 158, .14);
  border-color: rgba(105, 227, 158, .55);
  color: #d4ffe4;
}
.footer-help-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 19px;
  height: 19px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
}
.footer-help:focus-visible,
.contact-form .contact-copy-button:focus-visible {
  outline: 2px solid #69e39e;
  outline-offset: 4px;
}
.contact-form .form-note {
  color: #a3b1c5;
  font-size: .75rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.contact-form .form-note a { color: #a6efc2; text-decoration: underline; }
.contact-email-status { color: #c7d1de; font-size: .8rem; line-height: 1.6; margin-top: 12px; }
.contact-email-status:empty { display: none; }
.contact-form .contact-copy-button {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(105, 227, 158, .3);
  border-radius: 10px;
  background: transparent;
  color: #a6efc2;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.contact-form .contact-copy-button[hidden] { display: none; }
#contactMessageCopy { min-height: 190px; font-size: .8rem; }