/* Clean rebuild (no legacy patches). Desktop target: 1440px frame.
   Assets are local in ./assets/img
*/

:root{
  --nav-h: 86px; /* navbar height (logo block) */
  --bg-primary:#f9f9f9;
  --bg-secondary:#ffffff;
  --text:#020202;
  --muted:#616161;
  --border:rgba(2,2,2,.05);
  --shadow:4px 4px 10px rgba(0,0,0,.15);
  --yellow:#ffb800;
  --red:#d90026;
  --green:#039855;

  --radius:8px;
  --gutter:70px;
  --container:1300px;

  --fs-h1:56px;
  --lh-h1:72px;
  --fs-h2:42px;
  --lh-h2:52px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit}

.container{
  width:min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;
}

.center{display:flex;justify-content:center;margin-top:24px}

/* NAV */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--border);
}
.navbar__inner{padding:16px 0;display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand__logo{width:198px;height:auto;display:block}

/* HERO */
.hero{
  position:relative;
  padding: calc(var(--nav-h) + 54px) 0 60px;
}

.hero__bg{
  position:absolute;
  top: calc(var(--nav-h) - 54px);
  left:50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  height:748px;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.hero__bg img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left top;
}

.hero__bg img{width:100%;height:100%;object-fit:contain}
.hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
}
.hero__copy{width:741px;position:relative;z-index:1}
.hero__title{
  margin:0 0 24px;
  font-weight:800;
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
}
.hero__subtitle{
  margin:0;
  width:725px;
  font-weight:500;
  font-size:28px;
  line-height:52px;
  color:var(--muted);
}

/* SECTIONS */
.section{padding:60px 0}
.section--light{background:var(--bg-primary)}
.section--white{background:var(--bg-secondary)}

.section__title{
  margin:0 0 24px;
  font-weight:800;
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
}
.section__title--center{
  text-align:center;
  max-width:761px;
  margin-left:auto;margin-right:auto;
}

.section__subtitle{
  margin:0 0 24px;
  font-weight:500;
  font-size:24px;
  line-height:36px;
  color:var(--muted);
}
.section__subtitle--center{
  text-align:center;
  max-width:521px;
  margin-left:auto;margin-right:auto;
}

/* CARDS */
.card{
  background:var(--bg-secondary);
  border:2px solid var(--border);
  border-radius:var(--radius);
}
.form-card{
  width:554px;
  padding:36px;
  box-shadow:var(--shadow);
}
.form-card__title{
  margin:0 0 24px;
  text-align:center;
  font-weight:700;
  font-size:32px;
  line-height:40px;
}

/* FORM */
.lead-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:rgba(2,2,2,.6);
}
.req{color:var(--yellow);margin-left:2px}
.field__input{
  width:100%;
  height:52px;
  padding:10px 16px;
  border-radius:var(--radius);
  border:2px solid var(--border);
  background:var(--bg-primary);
  outline:none;
  font-size:14px;
  line-height:20px;
  color:rgba(2,2,2,.8);
}
.field__input::placeholder{color:rgba(2,2,2,.35)}
.field__input:focus{border-color:rgba(2,2,2,.18)}

.phone{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  height:52px;
  border-radius:var(--radius);
  border:2px solid var(--border);
  background:var(--bg-primary);
}
.phone__country{display:inline-flex;align-items:center;gap:8px;color:var(--muted);user-select:none;white-space:nowrap}
.phone__code{font-size:16px}
.phone__caret{opacity:.7;font-size:16px;line-height:1}
.flag{width:24px;height:24px;overflow:hidden;border-radius:34px;flex:0 0 24px}
.flag img{width:100%;height:100%;object-fit:cover}

.phone__input{
  border:none;background:transparent;height:48px;padding:0;flex:1;
}
.phone__input:focus{outline:none}

.consent{display:flex;gap:8px;align-items:flex-start}
.consent__box{width:16px;height:16px;margin-top:2px;border-radius:4px;border:1px solid rgba(2,2,2,.15)}
.consent__text{font-size:12px;line-height:16px;color:rgba(2,2,2,.6)}
.consent__link{text-decoration:underline}
.form-note{margin:0;min-height:18px;font-size:12px;line-height:16px;color:rgba(2,2,2,.7)}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius);
  border:2px solid var(--border);
  text-decoration:none;
  cursor:pointer;
  height:44px;
  padding:12px 16px;
  font-weight:500;
  font-size:14px;
  line-height:20px;
}
.btn--primary{background:var(--yellow);color:var(--text)}
.btn--full{width:100%}
.btn:active{transform:translateY(1px)}

/* CASE */
.case{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
  width:100%;
}
.quote-card{padding:24px}
.quote-card__avatar{
  width:120px;height:120px;border-radius:540px;
  border:2px solid rgba(2,2,2,.15);
  margin-bottom:10px;
}
.quote-card__avatar img{width:100%;height:100%;object-fit:cover}
.quote-card__text{
  font-weight:500;
  font-size:24px;
  line-height:36px;
  color:var(--muted);
}
.quote-card__text p{margin:0 0 10px}
.case__caption{margin:8px 0 0;font-weight:700;font-size:20px;line-height:28px}

.stack{display:flex;flex-direction:column;gap:24px}
.pill{border-radius:var(--radius);padding:24px;text-align:center;border:2px solid transparent}
.pill--red{background:rgba(240,68,56,.05);border-color:rgba(240,68,56,.05)}
.pill--green{background:rgba(3,152,85,.05);border-color:rgba(3,152,85,.05)}
.pill--green-soft{
  background:rgba(3,152,85,.05);
  display:flex;align-items:center;justify-content:center;
  min-height:75px;
  font-weight:700;
  font-size:20px;
  line-height:27px;
  color:#1d2939;
}
.pill__kicker{font-weight:700;font-size:18px;line-height:25.2px;color:rgba(2,2,2,.3)}
.pill__kicker--dark{color:var(--text)}
.pill__value{margin:6px 0 8px;font-weight:800;font-size:48px;line-height:72px}
.pill__value--red{color:var(--red)}
.pill__value--green{color:var(--green)}
.pill__subTitle{font-weight:700;font-size:16px;line-height:24px;color:rgba(2,2,2,.3)}
.pill__subHint{font-weight:400;font-size:14px;line-height:21px;color:rgba(2,2,2,.3)}
.pill__sub--dark .pill__subTitle,.pill__sub--dark .pill__subHint{color:#1d2939}

/* GRID 3 */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card,.feature,.t-card{padding:24px}

.step-card__icon img{width:135px;height:135px;object-fit:contain}
.rule{height:0;border-top:2px solid #020202;margin:10px 0}
.step-card__title{margin:0;font-weight:700;font-size:24px;line-height:52px}
.step-card__text{margin:0;font-weight:500;font-size:16px;line-height:24px;color:var(--muted)}

/* TESTIMONIALS */
.t-card__stars{width:134px;height:22px;margin-bottom:10px}
.t-card__head{display:flex;align-items:center;gap:10px}
.t-card__avatar{
  width:48px;height:48px;border-radius:216px;border:2px solid rgba(2,2,2,.15);
  display:grid;place-items:center;background:#fff;overflow:hidden;
}
.t-card__avatar img{width:48px;height:48px;object-fit:cover}
.t-card__name{font-weight:700;font-size:24px;line-height:52px}
.t-card__date{font-weight:700;font-size:16px;line-height:24px;color:var(--muted)}
.t-card__text{margin:0;font-weight:500;font-size:16px;line-height:24px;color:var(--muted)}

/* INFRA */
.infra{

  display:grid;
  grid-template-columns:406px 1fr; /* left static, right carousel */
  gap:24px;
  align-items:start;
}
.infra__decor{
  width:474px;
  height:486px;
  margin-bottom:24px;
}
.infra__decor img{width:100%;height:100%;object-fit:contain}

.carousel{position:relative}
.carousel__viewport{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:420px;
  gap:24px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  max-width:865px; /* 2 cards visible */
}
.carousel__viewport::-webkit-scrollbar{height:8px}

.product{
  width:420px;
  padding:16px;
  border-width:1.3px;
  border-radius:5.245px;
  scroll-snap-align:start;
}
.product__img{
  width:340px;
  height:263px;
  border-radius:8px;
  margin:0 auto 12px;
}
.product__img img{width:100%;height:100%;object-fit:cover}
.product__meta{
  width:341px;
  margin:0 auto 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.product__brand{font-weight:700;font-size:16px;line-height:34px;color:var(--muted)}
.product__name{font-weight:700;font-size:23px;line-height:34px}
.product__spec{font-weight:700;font-size:16px;line-height:34px;color:var(--muted)}
.product__loc{display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px;line-height:34px;color:var(--muted)}

.carousel__controls{
  margin-top:16px;
  display:flex;
  gap:8px;
  justify-content:center;
}
.icon-btn{
  width:53px;
  height:53px;
  border:none;
  background:transparent;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.icon-btn img{width:52px;height:53px}
.icon-btn[disabled]{opacity:.5;cursor:not-allowed}

/* FEATURES */
.feature__icon{width:80px;height:80px;object-fit:contain;margin-bottom:10px}
.feature__title{margin:0;font-weight:700;font-size:24px;line-height:36px}
.feature__text{margin:0;font-weight:500;font-size:16px;line-height:24px;color:var(--muted)}

/* CTA */
.cta{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:stretch;
}
.cta__banner{
  background:var(--text);
  border:2px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
  text-align:center;
}
.cta__title{margin:0;font-weight:800;font-size:42px;line-height:52px;color:#fff}
.cta__text{
  margin:0;
  font-weight:500;
  font-size:24px;
  line-height:32px;
  color:#ededed;
  max-width:980px;
}

/* RESPONSIVE */
@media (max-width:1200px){
  :root{
  --nav-h: 86px; /* navbar height (logo block) */--gutter:24px}

  .hero__inner{flex-direction:column;align-items:stretch;gap:24px}
  .hero__copy,.hero__subtitle{width:100%}
  .form-card{width:100%}

  .case{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .infra{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}

  .hero__bg{left:0;top:-220px;width:1200px;opacity:.45}
}

@media (max-width:768px){
  :root{
  --nav-h: 86px; /* navbar height (logo block) */
    --fs-h1:38px;--lh-h1:46px;
    --fs-h2:28px;--lh-h2:36px;
  }

  .hero{padding-top:110px}
  .hero__subtitle{font-size:18px;line-height:28px}

  .section{padding:44px 0}
  .section__subtitle{font-size:18px;line-height:28px}
  .quote-card__text{font-size:18px;line-height:28px}
  .pill__value{font-size:40px;line-height:56px}

  .infra__decor{width:100%;height:auto;position:relative}
  .carousel__viewport{grid-auto-columns:340px}
  .product{width:340px}
  .product__img{width:100%}
  .product__meta{width:100%}
}

@media (max-width:420px){
  :root{
  --nav-h: 86px; /* navbar height (logo block) */--gutter:16px}

  .navbar__inner{padding:12px 0}
  .hero__bg{display:none}

  .form-card{padding:20px}
  .form-card__title{font-size:22px;line-height:28px}
}

.infra__left{position:relative}
.infra__decor{
  position:absolute;left:0;top:0;width:474px;height:486px;margin:0;z-index:0;pointer-events:none;
}
.infra__decor img{width:100%;height:100%;object-fit:contain}
.infra__content{position:relative;z-index:1;padding-top:24px}

.loc-flag{
  width:24px;height:24px;overflow:hidden;border-radius:34px;display:inline-block;vertical-align:middle;margin-right:7px;
}
.loc-flag img{width:100%;height:100%;object-fit:cover;display:block;}

.cta .form-card{
  width:554px;
  max-width:100%;
  margin:0 auto;
}

.hero .form-card{position:relative;z-index:1}

.product .btn{width:150px;max-width:100%;margin:0 auto;display:flex;}
