:root{
  --blue:#0c4f83;
  --cyan:#31c1dc;
  --gray:#777679;
  --ink:#10283b;
  --muted:#5f6d78;
  --soft:#f3f8fb;
  --white:#fff;
  --line:#dce7ed;
  --max:1180px;
  --shadow:0 18px 50px rgba(12,79,131,.12)
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.65
}

a{
  color:inherit;
  text-decoration:none
}

.container{
  width:min(calc(100% - 40px),var(--max));
  margin:auto
}

.narrow{
  max-width:850px
}

.center{
  text-align:center
}

.section{
  padding:96px 0
}

.soft{
  background:var(--soft)
}


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

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(12,79,131,.09)
}

.nav-wrap{
  min-height:78px;
  display:flex;
  align-items:center;
  gap:30px
}

.brand img{
  width:150px;
  max-height:54px;
  object-fit:contain
}

.main-nav{
  display:flex;
  gap:26px;
  margin-left:auto
}

.main-nav a{
  font-size:14px;
  font-weight:600;
  color:#425866
}

.main-nav a:hover{
  color:var(--blue)
}


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

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:var(--blue);
  color:#fff;
  border-radius:8px;
  padding:15px 22px;
  font-weight:700;
  transition:.2s;
  box-shadow:0 7px 18px rgba(12,79,131,.15)
}

.btn:hover{
  transform:translateY(-2px);
  background:#083f69
}

.btn-small{
  padding:10px 16px;
  font-size:13px
}

.btn-light{
  background:#fff;
  color:var(--blue);
  box-shadow:none
}

.btn-light:hover{
  background:#eafaff
}


/* ==================================================
   ACTIVE DEMO INVITATION

   This class is added dynamically by index.js only
   when a valid demo_token is present in the URL or
   preserved in sessionStorage.
================================================== */

.demo-invitation-active{
  position:relative;
  z-index:1;

  animation:
    demoInvitationGlow 1.8s ease-in-out infinite;

  will-change:
    transform,
    box-shadow;
}


/*
   Keep invitation styling active on hover.
   This prevents the normal .btn hover shadow/transform
   from visually cancelling the invitation effect.
*/

.btn.demo-invitation-active:hover{
  transform:translateY(-2px) scale(1.025)
}


/*
   Header CTA:
   blue button + cyan invitation glow
*/

#headerDemoCta.demo-invitation-active{
  box-shadow:
    0 0 0 0 rgba(49,193,220,.25),
    0 0 14px rgba(49,193,220,.55),
    0 7px 18px rgba(12,79,131,.18)
}


/*
   Sync CTA:
   white button on blue background.
   Keep its original visual identity while highlighting
   the invitation with the cyan brand color.
*/

#syncDemoCta.demo-invitation-active{
  box-shadow:
    0 0 0 0 rgba(49,193,220,.28),
    0 0 16px rgba(49,193,220,.65)
}


/* Invitation pulse */

@keyframes demoInvitationGlow{

  0%,
  100%{
    box-shadow:
      0 0 0 0 rgba(49,193,220,.18),
      0 0 8px rgba(49,193,220,.35);

    transform:scale(1)
  }

  50%{
    box-shadow:
      0 0 0 6px rgba(49,193,220,.10),
      0 0 24px rgba(49,193,220,.85),
      0 0 38px rgba(49,193,220,.30);

    transform:scale(1.025)
  }

}


/*
   Accessibility:
   users who request reduced motion still receive
   a clear visual indication, without animation.
*/

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

  .demo-invitation-active{
    animation:none;

    box-shadow:
      0 0 0 3px rgba(49,193,220,.22),
      0 0 18px rgba(49,193,220,.65)
  }

  .btn.demo-invitation-active:hover{
    transform:translateY(-2px)
  }

}


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

.hero{
  padding:100px 0 90px;
  background:linear-gradient(
    135deg,
    #f7fbfd 0%,
    #fff 55%,
    #eaf8fb 100%
  );
  overflow:hidden
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center
}

.eyebrow{
  display:inline-block;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:18px
}

.eyebrow.light{
  color:#8be7f4
}

.hero h1{
  font-size:clamp(42px,5.4vw,72px);
  line-height:1.03;
  letter-spacing:-.045em;
  margin:0 0 26px;
  max-width:760px
}

.hero h1 span{
  color:var(--blue)
}

.hero-lead{
  font-size:19px;
  color:var(--muted);
  max-width:700px
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:32px
}

.text-link{
  font-weight:700;
  color:var(--blue)
}

.microcopy{
  font-size:13px;
  color:var(--gray);
  margin-top:18px
}


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

.hero-panel{
  background:#fff;
  padding:34px;
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid #e5eff4
}

.panel-kicker{
  display:block;
  font-size:11px;
  letter-spacing:.15em;
  font-weight:800;
  color:var(--gray);
  margin-bottom:25px
}

.flow-step{
  display:flex;
  gap:17px;
  align-items:flex-start
}

.flow-step b{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e7f8fb;
  color:var(--blue);
  font-size:12px
}

.flow-step strong,
.flow-step span{
  display:block
}

.flow-step strong{
  font-size:15px
}

.flow-step span{
  font-size:13px;
  color:var(--muted);
  margin-top:3px
}

.flow-line{
  height:22px;
  border-left:2px solid #d7edf2;
  margin-left:18px
}


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

.section h2{
  font-size:clamp(31px,4vw,49px);
  line-height:1.12;
  letter-spacing:-.035em;
  margin:0 0 24px
}

.section p{
  color:var(--muted);
  font-size:17px
}

.problem .statement{
  font-size:21px;
  color:var(--ink);
  margin-top:34px
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:start
}


/* ==================================================
   QUOTE
================================================== */

.quote-card{
  background:var(--blue);
  color:#fff;
  border-radius:18px;
  padding:46px;
  min-height:310px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.quote-card p{
  font-size:27px;
  line-height:1.35;
  color:#fff;
  margin:0;
  font-weight:600
}

.quote-mark{
  font-size:68px;
  line-height:.6;
  color:var(--cyan);
  margin-bottom:30px
}


/* ==================================================
   SECTION HEAD
================================================== */

.section-head{
  max-width:850px;
  margin-bottom:48px
}

.section-head.center{
  margin-left:auto;
  margin-right:auto
}


/* ==================================================
   STEPS
================================================== */

.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.step-card{
  border:1px solid var(--line);
  padding:30px;
  border-radius:14px;
  background:#fff
}

.step-card>span{
  color:var(--cyan);
  font-weight:800;
  font-size:13px
}

.step-card h3{
  font-size:19px;
  margin:13px 0 8px
}

.step-card p{
  font-size:14px;
  margin:0
}


/* ==================================================
   DARK SECTION
================================================== */

.dark{
  background:#082f4d;
  color:#fff
}

.dark h2{
  max-width:850px
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.benefits-grid article{
  padding:28px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.04)
}

.benefits-grid h3{
  font-size:18px
}

.benefits-grid p{
  font-size:14px;
  color:#c6d7e2
}

.icon{
  font-size:28px;
  color:var(--cyan)
}


/* ==================================================
   ANALYSIS
================================================== */

.align-center{
  align-items:center
}

.analysis-cards{
  display:grid;
  gap:18px
}

.analysis-card{
  border:1px solid var(--line);
  border-left:5px solid var(--blue);
  border-radius:12px;
  padding:26px;
  background:#fff
}

.analysis-card.accent{
  border-left-color:var(--cyan)
}

.analysis-card span{
  font-size:11px;
  font-weight:800;
  color:var(--gray)
}

.analysis-card h3{
  margin:8px 0
}

.analysis-card p{
  font-size:14px;
  margin:0
}


/* ==================================================
   REPORT
================================================== */

.report-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center
}

.report-mock{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  box-shadow:var(--shadow)
}

.report-top{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:800;
  color:var(--gray);
  padding-bottom:20px;
  border-bottom:1px solid var(--line)
}

.status{
  color:var(--blue);
  background:#e9f5fa;
  padding:4px 8px;
  border-radius:20px
}

.report-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:17px 0;
  border-bottom:1px solid #edf2f4;
  font-size:13px
}

.report-row span{
  color:var(--gray)
}

.report-bars{
  padding:25px 0 15px
}

.report-bars i{
  height:8px;
  background:linear-gradient(
    90deg,
    var(--blue),
    var(--cyan)
  );
  display:block;
  margin:11px 0;
  border-radius:8px
}

.report-mock small{
  color:#909ba2
}

.callout{
  border-left:4px solid var(--cyan);
  padding:15px 20px;
  background:#fff;
  margin-top:28px
}


/* ==================================================
   COMPANY SIZES
================================================== */

.size-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.size-grid article{
  padding:34px;
  border-radius:14px;
  background:#f8fafb;
  border-top:4px solid var(--blue)
}

.size-grid span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--gray)
}

.size-grid h3{
  margin:12px 0
}

.size-grid p{
  font-size:14px;
  margin:0
}


/* ==================================================
   PROOF OF CONCEPT
================================================== */

.proof-concept{
  background:linear-gradient(
    120deg,
    var(--blue),
    #087696
  );
  color:#fff
}

.proof-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:70px;
  align-items:center
}

.proof-grid h2{
  margin-bottom:15px
}

.proof-grid p{
  color:#d7eef4
}

.proof-action{
  text-align:center
}

.proof-action span{
  display:block;
  color:#cbe7ee;
  font-size:12px;
  margin-top:14px
}


/* ==================================================
   BEYOND
================================================== */

.beyond{
  border-bottom:1px solid var(--line)
}


/* ==================================================
   FAQ
================================================== */

.faq details{
  border-bottom:1px solid var(--line);
  padding:22px 0
}

.faq summary{
  font-weight:700;
  cursor:pointer;
  list-style:none
}

.faq summary:after{
  content:'+';
  float:right;
  color:var(--blue);
  font-size:22px
}

.faq details[open] summary:after{
  content:'−'
}

.faq details p{
  font-size:15px;
  margin:15px 30px 0 0
}


/* ==================================================
   FINAL CTA
================================================== */

.final-cta{
  padding:90px 0;
  background:#092b45;
  color:#fff
}

.final-cta h2{
  font-size:clamp(32px,4vw,50px);
  line-height:1.12;
  max-width:900px;
  margin:0 auto 18px
}

.final-cta p{
  color:#c5d8e3;
  margin-bottom:30px
}


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

.site-footer{
  background:#061e30;
  color:#b9cbd5;
  padding:55px 0 25px
}

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:45px
}

.footer-logo{
  width:150px;
  filter:brightness(0) invert(1);
  opacity:.9
}

.footer-grid strong{
  display:block;
  color:#fff;
  margin-bottom:13px
}

.footer-grid a,
.footer-grid span{
  display:block;
  font-size:13px;
  margin:7px 0;
  color:#b9cbd5
}

.footer-grid p{
  font-size:13px
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:40px;
  padding-top:20px;
  font-size:12px;
  color:#8299a6
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .main-nav{
    display:none
  }

  .nav-wrap{
    justify-content:space-between
  }

  .hero-grid,
  .split,
  .report-grid,
  .proof-grid{
    grid-template-columns:1fr
  }

  .hero{
    padding-top:70px
  }

  .hero-panel{
    max-width:650px
  }

  .steps-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .benefits-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .size-grid{
    grid-template-columns:1fr
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .section{
    padding:75px 0
  }

}


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

@media(max-width:600px){

  .container{
    width:min(calc(100% - 28px),var(--max))
  }

  .site-header .btn-small{
    display:none
  }

  .brand img{
    width:130px
  }

  .hero h1{
    font-size:42px
  }

  .hero-actions{
    align-items:stretch;
    flex-direction:column
  }

  .hero-actions .text-link{
    text-align:center
  }

  .steps-grid,
  .benefits-grid,
  .footer-grid{
    grid-template-columns:1fr
  }

  .section{
    padding:62px 0
  }

  .hero-panel,
  .quote-card{
    padding:26px
  }

  .quote-card p{
    font-size:22px
  }

  .report-row{
    flex-direction:column;
    gap:3px
  }

  .footer-bottom{
    flex-direction:column;
    gap:7px
  }

  .proof-action{
    text-align:left
  }

}