/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#333;
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===== UTILITIES ===== */
.container{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
}

.accent-text{ color:#2AABEE; }

.glass{
  background:#f5f5f7;
  border-radius:20px;
}

.section{ padding:56px 0; }

.section__title{
  font-family:'Fustat',sans-serif;
  font-size:1.65rem;
  font-weight:700;
  color:#1a1a1a;
  text-align:center;
  margin-bottom:10px;
}
.section__subtitle{
  text-align:center;
  color:#8a8a8e;
  max-width:520px;
  margin:0 auto 36px;
  font-size:0.95rem;
}

/* ===== HEADER ===== */
#header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:12px 0;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:box-shadow .2s;
}
#header.scrolled{
  box-shadow:0 1px 0 rgba(0,0,0,0.08);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:'Fustat',sans-serif;
  font-size:1.3rem;
  font-weight:700;
  color:#1a1a1a;
  letter-spacing:-0.02em;
}
.logo span{ color:#2AABEE; }
.nav{display:none}
.nav a{
  font-size:0.9rem;
  color:#8a8a8e;
  font-weight:500;
  transition:color .2s;
}
.nav a:hover{color:#1a1a1a}
.header__cta{display:none}
.header__cta .btn-sm{
  padding:8px 20px;
  font-size:0.85rem;
  border-radius:20px;
  background:#2AABEE;
  color:#fff;
  font-weight:600;
  transition:background .2s;
}
.header__cta .btn-sm:hover{ background:#229ED9; }

/* Burger */
#burger{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:28px;
  padding:4px 0;
}
#burger span{
  display:block;
  height:2px;
  background:#1a1a1a;
  border-radius:2px;
  transition:transform .3s,opacity .3s;
}

/* Drawer */
#drawer-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.3);
  z-index:1001;
}
#drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:280px;
  background:#fff;
  border-left:1px solid #e5e5e5;
  z-index:1002;
  padding:80px 24px 40px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#drawer a{
  display:block;
  padding:12px 0;
  font-size:1rem;
  color:#333;
  border-bottom:1px solid #f0f0f0;
  transition:color .2s;
}
#drawer a:hover{color:#2AABEE}
[hidden]{display:none!important}

/* ===== HERO ===== */
#top{
  padding:110px 0 56px;
  background:#fff;
}
.hero__inner{
  position:relative;
  z-index:1;
}
.hero__rating{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:20px;
  background:#f5f5f7;
  font-size:0.82rem;
  color:#8a8a8e;
  margin-bottom:20px;
}
.hero__rating svg{
  width:16px;height:16px;
  fill:#f5a623;
  flex-shrink:0;
}
.hero__h1{
  font-family:'Fustat',sans-serif;
  font-size:2rem;
  font-weight:800;
  line-height:1.15;
  color:#1a1a1a;
  margin-bottom:14px;
  max-width:560px;
}
.hero__h1 span{ color:#2AABEE; }
.hero__sub{
  font-size:1rem;
  color:#8a8a8e;
  max-width:480px;
  margin-bottom:24px;
  line-height:1.65;
}
.hero__btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:36px;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:14px;
  background:#2AABEE;
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  transition:background .2s,transform .2s;
}
.btn-primary:hover{
  background:#229ED9;
  transform:translateY(-1px);
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:14px;
  background:#f5f5f7;
  color:#1a1a1a;
  font-weight:500;
  font-size:0.95rem;
  transition:background .2s;
}
.btn-outline:hover{ background:#ebebed; }
.hero__image{
  max-width:280px;
  margin:0 auto;
}

/* ===== STATEMENT ===== */
#statement{ background:#fff; }
.statement__inner{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.statement__text h2{
  font-family:'Fustat',sans-serif;
  font-size:1.65rem;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:12px;
}
.statement__text p{
  color:#8a8a8e;
  line-height:1.7;
}
.statement__card{ padding:28px; }
.statement__card p{
  color:#555;
  line-height:1.7;
  margin-bottom:18px;
  font-size:0.95rem;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding:6px 14px;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:500;
  background:#e8f4fd;
  color:#2AABEE;
}

/* ===== FEATURES ===== */
#rail{ background:#fff; }
.features__grid{
  display:grid;
  gap:14px;
  margin-bottom:36px;
}
.feature-card{ padding:24px; }
.feature-card__icon{
  width:46px;height:46px;
  border-radius:14px;
  background:#e8f4fd;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.feature-card__icon svg{
  width:24px;height:24px;
}
.feature-card h3{
  font-family:'Fustat',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:#1a1a1a;
  margin-bottom:6px;
}
.feature-card p{
  font-size:0.9rem;
  color:#8a8a8e;
  line-height:1.6;
}
.features__image{
  max-width:340px;
  margin:0 auto;
}

/* ===== WORKFLOW ===== */
#workflow{ background:#f9f9fb; }
.workflow__steps{
  display:grid;
  gap:14px;
  counter-reset:step;
}
.workflow-step{
  padding:24px;
  counter-increment:step;
  position:relative;
  overflow:hidden;
  background:#fff;
}
.workflow-step::before{
  content:counter(step);
  position:absolute;
  top:14px;right:18px;
  font-family:'Fustat',sans-serif;
  font-size:2.8rem;
  font-weight:800;
  color:rgba(42,171,238,0.08);
  line-height:1;
}
.workflow-step h3{
  font-family:'Fustat',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:#1a1a1a;
  margin-bottom:6px;
}
.workflow-step p{
  font-size:0.88rem;
  color:#8a8a8e;
  max-width:260px;
}

/* ===== MATRIX ===== */
#matrix{ background:#fff; }
.matrix__grid{
  display:grid;
  gap:14px;
}
.matrix-card{
  padding:28px;
  transition:transform .2s;
}
.matrix-card:hover{
  transform:translateY(-3px);
}
.matrix-card__icon{
  width:44px;height:44px;
  border-radius:12px;
  background:#e8f4fd;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.matrix-card__icon svg{
  width:22px;height:22px;
}
.matrix-card h3{
  font-family:'Fustat',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:#1a1a1a;
  margin-bottom:6px;
}
.matrix-card p{
  font-size:0.88rem;
  color:#8a8a8e;
  line-height:1.6;
}

/* ===== COMPARISON ===== */
#lanes{ background:#f9f9fb; }
.comparison__table{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.comparison__row{
  padding:20px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  background:#fff;
}
.comparison__label{
  font-family:'Fustat',sans-serif;
  font-weight:600;
  color:#1a1a1a;
  font-size:0.95rem;
  padding-bottom:8px;
  border-bottom:1px solid #f0f0f0;
}
.comparison__col{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:0.88rem;
  line-height:1.5;
}
.comparison__col--old{color:#8a8a8e}
.comparison__col--new{color:#333}
.comparison__badge{
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;
}
.comparison__badge--x{
  background:#fee2e2;
  color:#ef4444;
}
.comparison__badge--check{
  background:#e8f4fd;
  color:#2AABEE;
}

/* ===== TRUST ===== */
#trust{ background:#fff; }
.trust__grid{
  display:grid;
  gap:14px;
  margin-bottom:36px;
}
.trust-card{
  padding:28px;
  text-align:center;
}
.trust-card__icon{
  width:52px;height:52px;
  border-radius:16px;
  background:#e8f4fd;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.trust-card__icon svg{
  width:26px;height:26px;
}
.trust-card h3{
  font-family:'Fustat',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:#1a1a1a;
  margin-bottom:6px;
}
.trust-card p{
  font-size:0.88rem;
  color:#8a8a8e;
  line-height:1.6;
}
.trust__image{
  max-width:260px;
  margin:0 auto;
}

/* ===== INSTALL ===== */
#install{ background:#f9f9fb; }
.install__card{
  padding:32px 24px;
  text-align:center;
  max-width:460px;
  margin:0 auto 28px;
  background:#fff;
}
.install__card .btn-primary{
  width:100%;
  padding:16px;
  font-size:1rem;
  border-radius:14px;
}
.install__card .install__ver{
  font-size:0.8rem;
  color:#8a8a8e;
  margin-top:10px;
}
.install__steps{
  display:grid;
  gap:10px;
  counter-reset:instep;
  max-width:460px;
  margin:0 auto;
}
.install__step{
  padding:16px 20px;
  counter-increment:instep;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
}
.install__step-num{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:10px;
  background:#e8f4fd;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fustat',sans-serif;
  font-weight:700;
  font-size:0.9rem;
  color:#2AABEE;
}
.install__step p{
  font-size:0.9rem;
  color:#555;
}

/* ===== FAQ ===== */
#faq{ background:#fff; }
.faq__list{
  max-width:640px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.faq__item{
  border-radius:16px;
  background:#f5f5f7;
  overflow:hidden;
}
.faq__item[open]{ background:#eef6fd; }
.faq__item summary{
  padding:16px 22px;
  font-family:'Fustat',sans-serif;
  font-weight:600;
  font-size:0.95rem;
  color:#1a1a1a;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'+';
  font-size:1.3rem;
  color:#2AABEE;
  flex-shrink:0;
  transition:transform .3s;
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover{color:#2AABEE}
.faq__item .faq__answer{
  padding:0 22px 16px;
  font-size:0.9rem;
  color:#8a8a8e;
  line-height:1.7;
}

/* ===== FINAL CTA ===== */
#cta{
  background:#f9f9fb;
  text-align:center;
}
.cta__inner h2{
  font-family:'Fustat',sans-serif;
  font-size:1.65rem;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:10px;
}
.cta__inner p{
  color:#8a8a8e;
  margin-bottom:24px;
  font-size:0.95rem;
}

/* ===== FOOTER ===== */
footer{
  background:#fff;
  padding:36px 0 24px;
  border-top:1px solid #e5e5e5;
}
.footer__inner{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.footer__brand{
  font-family:'Fustat',sans-serif;
  font-size:1.15rem;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:6px;
}
.footer__brand span{ color:#2AABEE; }
.footer__company{
  font-size:0.78rem;
  color:#8a8a8e;
  line-height:1.7;
}
.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.footer__links a{
  font-size:0.85rem;
  color:#8a8a8e;
  transition:color .2s;
}
.footer__links a:hover{color:#2AABEE}
.footer__copy{
  font-size:0.78rem;
  color:#b0b0b0;
  padding-top:18px;
  border-top:1px solid #f0f0f0;
  text-align:center;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.hero__image{animation:fadeUp .6s ease-out}

/* ===== TABLET (768px+) ===== */
@media(min-width:768px){
  .container{padding:0 32px}
  .section{padding:72px 0}
  .section__title{font-size:2rem}

  .nav{ display:flex; gap:28px; }
  .header__cta{display:block}
  #burger{display:none}

  .hero__h1{font-size:2.6rem}
  .hero__inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px;
  }
  .hero__content{order:1}
  .hero__image{order:2;max-width:100%}

  .statement__inner{
    flex-direction:row;
    align-items:center;
  }
  .statement__text,.statement__card{flex:1}

  .features__grid{grid-template-columns:1fr 1fr}
  .workflow__steps{grid-template-columns:1fr 1fr}
  .matrix__grid{grid-template-columns:1fr 1fr}

  .comparison__row{
    grid-template-columns:130px 1fr 1fr;
    align-items:center;
  }
  .comparison__label{
    border-bottom:none;
    padding-bottom:0;
  }

  .trust__grid{grid-template-columns:repeat(3,1fr)}

  .footer__inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
  }
}

/* ===== DESKTOP (1024px+) ===== */
@media(min-width:1024px){
  .container{padding:0 40px}
  .section{padding:88px 0}
  .section__title{font-size:2.3rem}

  .hero__h1{font-size:3rem}
  #top{padding:130px 0 72px}

  .features__grid{grid-template-columns:repeat(4,1fr)}
  .workflow__steps{grid-template-columns:repeat(4,1fr)}
  .matrix__grid{grid-template-columns:repeat(4,1fr)}

  .matrix-card{padding:32px}
  .feature-card{padding:28px}

  .cta__inner h2{font-size:2.3rem}
}