/* ==========================================
   StratoCMS Premium Landing CSS (Starter)
   Black + Blue Theme
   ========================================== */

:root{
  --bg:#05070b;
  --bg2:#0b1120;
  --card:#101827;
  --card2:#151f33;
  --text:#ffffff;
  --muted:#94a3b8;
  --border:rgba(255,255,255,.08);

  --primary:#2563eb;
  --primary2:#3b82f6;
  --primary3:#60a5fa;

  --radius:18px;
  --transition:.35s ease;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
}

/* HERO */

.hero-dark{
  position:relative;
  overflow:hidden;
  padding:140px 0 180px;
  background:
    radial-gradient(circle at 15% 20%,rgba(37,99,235,.25),transparent 35%),
    radial-gradient(circle at 85% 5%,rgba(59,130,246,.18),transparent 40%),
    linear-gradient(180deg,#05070b,#0b1120);
}

.hero-dark::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
      linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridMove 20s linear infinite;
  mask-image:linear-gradient(#000,transparent);
}

.hero-dark::after{
  content:"";
  position:absolute;
  width:900px;
  height:900px;
  left:-250px;
  top:-250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.25),transparent 70%);
  filter:blur(50px);
  animation:aurora 12s ease-in-out infinite alternate;
}

@keyframes aurora{
  from{transform:translate(0,0)}
  to{transform:translate(120px,90px)}
}

@keyframes gridMove{
  from{transform:translateY(0)}
  to{transform:translateY(60px)}
}

.hero-dark h1{
  font-size:clamp(3rem,6vw,5rem);
  line-height:1.05;
  letter-spacing:-2px;
  max-width:950px;
  margin:auto;
  text-align:center;
}

.gradient{
  background:linear-gradient(90deg,#fff,#60a5fa,#2563eb);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.lede{
  max-width:760px;
  margin:30px auto;
  text-align:center;
  color:var(--muted);
  font-size:1.25rem;
  line-height:1.8;
}

.hero-cta{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:40px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  /* interaction (hover lift / active press / focus ring / timing)
     comes from the global .btn system in app.css */
}

.btn--primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  padding:18px 34px;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(37,99,235,.35);
}

.btn--primary:hover{
  color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  box-shadow:0 18px 44px rgba(37,99,235,.42);
}



.hero-stat{
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:20px;
  padding:30px;
}

.hero-stat div{
  text-align:center;
}

.hero-stat strong{
  display:block;
  font-size:2rem;
  color:var(--primary3);
  margin-bottom:8px;
}

.hero-mock{
  border-radius:22px;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:float 8s ease-in-out infinite;
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
  100%{transform:translateY(0)}
}

.card,
.b-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
  border-radius:18px;
  margin-bottom: 20px;
  transition:var(--transition);
}

.card:hover,
.b-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(37,99,235,.25);
  border-color:rgba(59,130,246,.35);
}

.pill{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(59,130,246,.12);
  color:#8ec5ff;
  border:1px solid rgba(59,130,246,.25);
}

.cta-band{
  background:linear-gradient(135deg,#0f172a,#111f36);
  border:1px solid rgba(59,130,246,.2);
  border-radius:24px;
  padding:70px;
  position:relative;
  overflow:hidden;
}

.cta-band::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  right:-180px;
  top:-180px;
  background:radial-gradient(circle,rgba(59,130,246,.25),transparent 70%);
}

@media(max-width:992px){

.hero-stat{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.hero-dark{
padding:100px 0;
}

.hero-stat{
grid-template-columns:1fr;
}

.hero-cta{
flex-direction:column;
align-items:center;
}

.hero-dark h1{
font-size:2.7rem;
}

.lede{
font-size:1rem;
}

.cta-band{
padding:40px 25px;
}

}


/*----------compare table css-------------------------*/


.compare-wraplanding{
    margin-top:60px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    overflow:auto;
    background:#0f1117;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.compare-landing{
    width:100%;
    min-width:1050px;
    border-collapse:collapse;
}

.compare-landing thead{
    position:sticky;
    top:0;
    z-index:5;
}

.compare-landing thead th{
    background:#141824;
    padding:22px 18px;
    font-size:15px;
    font-weight:700;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.compare-landing th:first-child{
    width:340px;
    text-align:left;
}


.compare-landing td{
    padding:18px;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#d4d8e4;
    font-size:15px;
    text-align:center;
    transition:.25s;
}

.compare-landing td:first-child{
    text-align:left;
    font-weight:600;
    color:#fff;
}

.compare-landing tbody tr:nth-child(even){
    background:rgba(255,255,255,.015);
}

.compare-landing tbody tr:hover{
    background:rgba(81,125,255,.08);
}

.compare-landing .us{
    background:linear-gradient(180deg,#4F46E5,#3B82F6);
    color:#fff;
    position:relative;
    padding-top: 0px;
}

.compare-landing .us:after{
    content:"Recommended";
    position:absolute;
    left:50%;
    bottom:13px;
    transform:translateX(-50%);
    background:#0c1322;
    color:#fff;
    font-size:11px;
    padding:4px 10px;
    border-radius:20px;
    white-space:nowrap;
}

.compare-landing td:nth-child(2){
    background:rgba(79,70,229,.08);
}

.yes{
    color:#22c55e;
    font-weight:700;
}

.partial{
    color:#fbbf24;
    font-weight:600;
}

.no{
    color:#ef4444;
    font-weight:600;
}


@media (max-width:576px){

.compare-wraplanding{
    border-radius:14px;
}

.compare-landing{
    min-width:780px;
}

.compare-landing th,
.compare-landing td{
    font-size:13px;
    padding:12px 10px;
}

.compare-landing .us:after{
    font-size:10px;
    padding:3px 8px;
}

}



/*==============================
  HOW IT WORKS
===============================*/

.how-works{
    padding:clamp(4rem, 8vw, 6.875rem) 0;
    position:relative;
    overflow:hidden;
    background:transparent;
}

.how-works::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(91,92,255,.08);
    filter:blur(120px);
    top:-180px;
    right:-120px;
    pointer-events:none;
}

.how-works::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:rgba(6,182,212,.08);
    filter:blur(100px);
    left:-150px;
    bottom:-150px;
    pointer-events:none;
}

.how-works .container{
    position:relative;
    z-index:2;
}

.section-heading{
    max-width:720px;
    margin:auto;
    margin-bottom:70px;
}

.section-heading h2{
    color:#fff;
    margin:15px 0;
}

.section-heading p{
    color:#94a3b8;
    font-size:18px;
}

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

.step-land{
    position:relative;
    overflow:hidden;

    background:linear-gradient(135deg,#0f172a,#111f36);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:40px;

    transition:.35s ease;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.step-land::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:23px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        transparent 45%
    );
    pointer-events:none;
}

.step-land::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    top:-120px;
    right:-120px;
    background:rgba(91,92,255,.12);
    filter:blur(30px);
}

.step-land:hover{
    transform:translateY(-8px);
    border-color:#5b5cff;
    box-shadow:
        0 20px 45px rgba(91,92,255,.15),
        0 15px 35px rgba(0,0,0,.35);
}

.step-number{
    width:60px;
    height:60px;
    border-radius:18px;

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

    margin-bottom:28px;

    font-weight:700;
    font-size:20px;
    color:#fff;

    background:linear-gradient(135deg,#5b5cff,#4f46e5);

    box-shadow:0 10px 30px rgba(91,92,255,.35);
}

.step-land h3{
    color:#fff;
    font-size:1.05rem;
    line-height:1.35;
    margin-bottom:18px;
    position:relative;
    z-index:2;
}

.step-land p{
    color:#cbd5e1;
    line-height:1.8;
    font-size:14px;
    position:relative;
    z-index:2;
}

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

@media(max-width:991px){

    .steps-land{
        grid-template-columns:1fr;
    }

    .step-land{
        padding:35px;
    }

}

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

@media(max-width:576px){

    .how-works{
        padding:70px 0;
    }

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading h2{
        font-size:34px;
    }

    .section-heading p{
        font-size:16px;
    }

    .step-land{
        padding:28px;
        border-radius:18px;
    }

    .step-number{
        width:52px;
        height:52px;
        font-size:18px;
        border-radius:14px;
    }

    .step-land h3{
        font-size:22px;
    }

    .step-land p{
        font-size:15px;
    }

}



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

.landinfaq-section{
    padding:clamp(4rem, 8vw, 6.875rem) 0;
    position:relative;
}

.landinfaq-section .container{
    max-width:850px;
}

.faq-landing{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:50px;
}

.faq-landing details{
    background:linear-gradient(135deg,#0f172a,#111f36);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    transition:.35s ease;
}

.faq-landing details:hover{
    border-color:#5b5cff;
    transform:translateY(-2px);
    box-shadow:0 15px 40px rgba(91,92,255,.12);
}

.faq-landing details[open]{
    border-color:#5b5cff;
    box-shadow:0 18px 45px rgba(91,92,255,.15);
}

.faq-landing summary{
    list-style:none;
    cursor:pointer;
    position:relative;

    padding:24px 70px 24px 28px;

    color:#fff;
    font-size:20px;
    font-weight:600;
    line-height:1.5;

    user-select:none;
    transition:.3s;
}

.faq-landing summary::-webkit-details-marker{
    display:none;
}

/* Plus icon */

.faq-landing summary::after{
    content:"+";
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;

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

    border-radius:50%;
    background:rgba(91,92,255,.15);

    color:#fff;
    font-size:24px;
    font-weight:300;

    transition:.35s;
}

.faq-landing details[open] summary::after{
    content:"−";
    background:#5b5cff;
    transform:translateY(-50%) rotate(180deg);
}

.faq-landing p{
    margin:0;
    padding:0 28px 28px;

    color:#cbd5e1;
    line-height:1.9;
    font-size:16px;

    border-top:1px solid rgba(255,255,255,.06);
}

.faq-landing code{
    background:#1e293b;
    color:#60a5fa;
    padding:2px 6px;
    border-radius:6px;
    font-size:14px;
}

/*==============================
 Tablet
==============================*/

@media(max-width:991px){

    .faq-landing summary{
        font-size:18px;
        padding:22px 65px 22px 24px;
    }

}

/*==============================
 Mobile
==============================*/

@media(max-width:576px){

    .landinfaq-section{
        padding:70px 0;
    }

    .faq-landing{
        gap:14px;
    }

    .faq-landing summary{
        font-size:17px;
        padding:20px 60px 20px 20px;
    }

    .faq-landing summary::after{
        width:34px;
        height:34px;
        right:18px;
        font-size:22px;
    }

    .faq-landing p{
        padding:0 20px 22px;
        font-size:15px;
    }

}
/* ---------- Ghost buttons on the dark theme (nav "Client Login" etc.) ---------- */
.btn--ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.04);
  padding:18px 34px;
  border-radius:14px;
}

.btn--ghost:hover{
  background:rgba(59,130,246,.14);
  border-color:#60a5fa;
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}

.nav-links a{
  color:rgba(255,255,255,.85);
}

.nav-links a:hover{
  color:#fff;
}

/* Current page: blue + underline so it clearly stands out on dark */
.nav-links a.active{
  color:#60a5fa;
  font-weight:600;
}

.nav-links a.active::after{
  background:#3b82f6;
}

/* Pressed backgrounds — deeper than hover for clear click feedback */
.btn--primary:active{
  color:#fff;
  background:linear-gradient(135deg,#1e40af,#1d4ed8);
}

.btn--ghost:active{
  background:rgba(59,130,246,.22);
  border-color:#3b82f6;
  color:#fff;
}

/* comparison section joins the shared vertical rhythm */
.landingcomp-section{
    padding:clamp(4rem, 8vw, 6.875rem) 0;
}


.getting-started{
    padding:100px 0;
    background:#0b1120;
    color:#fff;
}

.section-heading{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.section-badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(92,87,255,.12);
    color:#7c6cff;
    font-weight:600;
    margin-bottom:18px;
}

.section-heading h2{
    font-size:48px;
    line-height:1.2;
    margin-bottom:20px;
}

.section-heading p{
    color:#a5afc6;
    font-size:18px;
}

.steps-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-bottom:80px;
}

.step-card{
    position:relative;
    padding:35px;
    border-radius:24px;
    background:#131b2d;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.step-card:hover{
    transform:translateY(-8px);
    border-color:#6d5cff;
    box-shadow:0 20px 60px rgba(108,92,255,.18);
}



.step-icon{
    width:50px;
    height:50px;
    border-radius:18px;
    background:linear-gradient(135deg,#5b5cff,#4f46e5);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:25px;
}

.step-card h3{
    margin-bottom:15px;
    font-size:24px;
}

.step-card p{
    color:#a8b2c8;
    line-height:1.7;
    margin-bottom:25px;
}

.step-card a{
    color:#7c6cff;
    text-decoration:none;
    font-weight:600;
}

.getting-started-info{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;
    align-items:center;
    padding:45px;
    border-radius:28px;
    background:#131b2d;
    border:1px solid rgba(255,255,255,.08);
}

.info-image img{
    width:100%;
    border-radius:16px;
    display:block;
}

.success-badge{
    display:inline-block;
    padding:8px 16px;
    background:#183b2d;
    color:#62d79b;
    border-radius:50px;
    margin-bottom:18px;
}

.info-content h3{
    font-size:34px;
    margin-bottom:18px;
}

.info-content p{
    color:#a8b2c8;
    line-height:1.8;
    margin-bottom:25px;
}

.info-content ul{
    list-style:none;
    padding:0;
    margin:0 0 30px;
}

.info-content ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:14px;
    color:#d7dbe7;
}

.info-content ul li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:#6d5cff;
    font-weight:700;
}

.btn-support{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:52px;
    padding:0 28px;
    border-radius:12px;
    background:#6d5cff;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-support:hover{
    background:#5948ff;
}

@media(max-width:991px){

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

.getting-started-info{
grid-template-columns:1fr;
}

.section-heading h2{
font-size:38px;
}

}

@media(max-width:767px){

.getting-started{
padding:70px 0;
}

.steps-grid{
grid-template-columns:1fr;
}

.section-heading h2{
font-size:32px;
}

.step-card{
padding:28px;
}

.getting-started-info{
padding:25px;
}

.info-content h3{
font-size:28px;
}

}