/* styles.css — a clean, modern theme */
:root{
  --bg: #0b1220;
  --bg-2:#0f172a;
  --surface:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --pure:#ffffff;
  --accent:#fbbf24;
  --accent-2:#f59e0b;
  --outline: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 18px;
  --card-light: #f5f7fa;
  --card-text-dark: #0b1220;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  line-height:1.6;
}

.plan {border:2px solid;
        border-color: ;#fbbf24;
       border-radius: 3px;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.small{font-size:.875rem}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-32{margin-top:2rem}

/* Layout */
.container{width: min(1120px, 92vw); margin-inline:auto}

/* Topbar */
.topbar{background:#0b152a;border-bottom:1px solid var(--outline);font-size:.9rem}
.topbar__wrap{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;gap:1rem}
.topbar .social{opacity:.8;margin-right:.75rem}
.topbar .phone{font-weight:700;margin-left:.5rem}
/* Topbar social icons */
.topbar .footer__social{display:flex;align-items:center;gap:.4rem}
.topbar .footer__social a{inline-size:30px;block-size:30px;border:1px solid var(--outline);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .2s ease,border-color .2s ease}
.topbar .footer__social a:hover{opacity:1;border-color:rgba(255,255,255,.2)}
.topbar .footer__social img,.topbar .footer__social svg{width:18px;height:18px;display:block}



/* Buttons */
.btn{
  display:inline-block;padding:.875rem 1.1rem;border-radius:999px;
  border:1px solid transparent;font-weight:700;letter-spacing:.2px;
  box-shadow: var(--shadow); transition:.2s transform ease, .2s background;
}
.btn:hover{transform:translateY(-1px)}
.btn--sm{padding:.55rem .9rem;font-size:.9rem}
.btn--accent{background:var(--accent);color:#111827}
.btn--accent:hover{background:var(--accent-2)}
.btn--ghost{background:transparent;border-color:var(--outline)}
.btn--light{background:var(--pure);color:#111827}
.btn--nav{margin-left:.25rem}

.site-header .nav .nav__menu  {margin: 0 50px;}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--outline)}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 0;
  position: relative;
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.2rem}
.brand__mark{font-size:1.35rem}
.brand--footer .brand__mark{filter:grayscale(1)}

/* Brand logo image */
.brand__logo{
  height:80px;
  width:auto;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
  image-rendering:-webkit-optimize-contrast;
  -webkit-user-drag:none;
}

.container__nav {
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}

/* Footer brand logo style */
.brand--footer .brand__logo{filter:grayscale(1);opacity:.95}

@media (max-width: 900px){
  .brand__logo{height:48px !important;}
  .nav{display:flex;justify-content:space-between;}
  .nav__hamburger{display:block;width:28px;height:22px;position:relative;cursor:pointer;margin-left:0;margin-right:auto;}
  .nav__hamburger::before,.nav__hamburger::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--text);border-radius:3px;transition:.2s}
  .nav__hamburger::before{top:0;box-shadow:0 9px 0 var(--text)}
  .nav__hamburger::after{bottom:0}
  .nav__menu{position:absolute;inset:64px 0 auto 0;background:#0b152a;border-bottom:1px solid var(--outline);display:none;flex-direction:column;padding:1rem 4vw}
  .nav__menu a, .nav__dropbtn{width:100%}
  .nav__dropdown:hover .nav__dropdown-content{position:static;border:none;box-shadow:none}
  .nav__toggle:checked ~ .nav__menu{display:flex}
  .nav__toggle{display:none;}
  .nav__right{width:100%;justify-content:space-between;margin-top:.5rem}
  .nav__hotline{flex:1}
  .btn--nav{flex:0 0 auto}
  .brand{margin-left:auto;margin-right:0;}
  .site-header .nav .brand,
  .site-header .nav .nav__hotline-btn {
    position: static;
    transform: none;
  }

  .nav__hamburger {
    z-index: 1002;
  }
}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero__media{
  position:absolute;inset:-10px;z-index:-1;
  background-image: radial-gradient(rgba(0,0,0,.35), rgba(0,0,0,.8)), url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?q=80&w=1800');
  background-size:cover;background-position:center;
  filter:saturate(95%);
}
.hero__content{padding:8rem 0 6rem 0}
.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:800;font-size:.95rem}
.hero h1{font-size: clamp(2rem, 3.5vw + 1rem, 4rem);line-height:1.1;margin:.5rem 0 1rem 0}
.hero .underline{background:linear-gradient(transparent 60%, rgba(251,191,36,.35) 60%)}
.lead{font-size:1.15rem;color:#cbd5e1;max-width:70ch}
.hero__actions{margin-top:1.25rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero__badges{margin-top:1.5rem;display:flex;gap:.5rem;flex-wrap:wrap}
.badge{border:1px dashed var(--outline);padding:.4rem .7rem;border-radius:999px;font-size:.9rem;color:#cbd5e1}
.hero__wave{position:absolute;left:0;right:0;bottom:-1px;height:90px}

/* Sections */
.section{padding:4.5rem 0}
.section--alt{background:linear-gradient(180deg, #0b1426 0%, #0b152a 100%)}
.section__header{margin-bottom:2rem;text-align:center}
.section__header h2{font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem);margin:0 0 .4rem}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{
  position:relative;
  background: var(--card-light);
  color: var(--card-text-dark);
  border:1px solid var(--outline);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow: var(--shadow);
  min-height: 260px;
  transition: color .35s ease, background-color .35s ease, border-color .35s ease;
}
.card__content{
  position:relative; z-index:2; padding:1.1rem 1rem 1.2rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
  min-height: 180px;
}
.card h3{margin:.2rem 0 .25rem;font-size:1.05rem}
.card p{margin:0;font-size:.95rem;opacity:.85}
.card__icon{ inline-size:64px; block-size:64px; border-radius:12px; display:grid; place-items:center; background: rgba(0,0,0,.1); color: var(--card-text-dark); }
.card__img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.04); transition: opacity .45s ease, transform .6s ease; will-change: opacity, transform; }
.card__overlay{ position:absolute; inset:0; z-index:1; background: rgba(0,0,0,.85); opacity:0; transition: opacity .20s ease; }
.card:hover .card__img, .card:focus-within .card__img{ opacity:1; transform:scale(1.02); }
.card:hover .card__overlay, .card:focus-within .card__overlay{ opacity:1; }
.card:hover, .card:focus-within{ color:#ffffff; border-color: rgba(255,255,255,.2); }
.card:hover .card__icon, .card:focus-within .card__icon{ background: rgba(255,255,255,.14); color:#ffffff; }
.card:hover p, .card:focus-within p{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .card__img{ transition: opacity .2s linear; transform:none; } }
@media (max-width: 960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.cards{grid-template-columns:1fr}}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:#0b152a;border:1px solid var(--outline);border-radius:var(--radius);padding:1rem;display:flex;gap:1rem;align-items:flex-start;box-shadow: var(--shadow)}
.step__num{font-weight:900;font-size:1.2rem;inline-size:40px;block-size:40px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#111827;flex:0 0 auto}
@media (max-width: 960px){.steps{grid-template-columns:1fr}}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quote{background:#0b152a;border:1px solid var(--outline);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.quote blockquote{margin:0 0 .6rem 0;font-size:1.05rem}
@media (max-width: 960px){.testimonials{grid-template-columns:1fr}}

/* CTA */
.cta{background:linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);color:#111827}
.cta__wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:2rem 0;flex-wrap:wrap}

/* Contact buttons row */
.cta__contacts{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cta__contacts .btn{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;border-radius:999px}
.cta__contacts .btn svg, .cta__contacts .btn img{width:20px;height:20px;flex:0 0 auto;margin-inline-end:.35rem;display:block}

.btn--light{background:var(--pure);color:#111827;box-shadow:none;border-color:transparent}

/* Footer */
.footer{background:#0a1324;border-top:1px solid var(--outline)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:1.5rem;padding:3rem 0}
.footer__nav{display:flex;flex-direction:column;gap:.4rem}
.footer__form{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.footer__form input, .footer__form textarea{ background:#0b152a;border:1px solid var(--outline);border-radius:10px;padding:.75rem;color:var(--text) }
.footer__form textarea{grid-column:1/-1;resize:vertical;min-height:110px}
.footer__form button{grid-column:1/-1}
.footer__legal{border-top:1px solid var(--outline);display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
/* Footer social icons */
.footer__social{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;inline-size:36px;block-size:36px;border:1px solid var(--outline);border-radius:999px;opacity:.9;transition:opacity .2s ease, transform .2s ease, border-color .2s ease}
.footer__social a:hover{opacity:1;transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.footer__social img,.footer__social svg{width:20px;height:20px;display:block}
@media (max-width: 960px){ .footer__grid{grid-template-columns:1fr 1fr} .footer__form{grid-template-columns:1fr} }
@media (max-width: 720px){ .cta__wrap{gap:1rem} .cta__contacts{justify-content:flex-start} }
/* Mobile nav phone row */
.nav__phone {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  color: var(--text);
  text-decoration: none;
}
.nav__phone:hover {
  opacity: 0.8;
}
.phone-icon {
  width: 20px;
  height: 20px;
}

/* ==== BEGIN Mobile Footer Social Layout ==== */
@media (max-width: 768px) {
  /* Only affect the social icons inside the FOOTER, not the top bar */
  .footer .footer__social {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
  }
  /* grid-template-columns and grid properties removed for flex layout */
  .footer .footer__social a {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
  }
  .footer .footer__social img {
    width: 22px;
    height: 22px;
  }
  .footer__legal {
    display: flex;
    flex-direction: column-reverse; /* show icons first, then copyright below */
    align-items: center;
    gap: 8px;
  }
}

/* Super small phones */
@media (max-width: 380px) {
  .footer .footer__social a {
    width: 40px;
    height: 40px;
  }
  .footer .footer__social img {
    width: 20px;
    height: 20px;
  }
}
/* ==== END Mobile Footer Social Layout ==== */

/* Header Hotline Button */
.header-hotline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.header-hotline:hover {
  opacity: 0.85;
}
.header-hotline .phone-icon {
  width: 18px;
  height: 18px;
}

/* ===== Desktop header layout: hotline (left) | menu (center) | logo (right) ===== */
@media (min-width: 901px) {
  .site-header .nav {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 120px;
  }
  .site-header .nav .nav__hotline-btn { order: 1; margin-right: 0; }
  .site-header .nav .nav__menu {
    order: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }
  .site-header .nav .brand { order: 3; margin-left: 0; }
  .site-header .nav .nav__hamburger, .site-header .nav .nav__toggle { display:none !important; }
}

/* Hotline pill – match the design (rounded, subtle border, number bold) */
.nav__hotline-btn {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .68rem 1.32rem;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.08rem;
  box-shadow: 0 7px 20px rgba(0,0,0,.27);
  height: 56px;
  min-width: 0;
}
.article_header {text-align: center!important; }
.nav__hotline-btn:hover { background: rgba(255,255,255,.10); }
.nav__hotline-btn .phone-icon { width:21px; height:21px; display:inline-block; filter: none; }
.nav__hotline-btn .hl-label { font-weight:600; opacity:.9; }
.nav__hotline-btn .hl-number { font-weight:800; }

@media (max-width: 900px) {
  .nav__hotline-btn {
    display: none !important;
  }
}
/* ==== Desktop: logo hard-right, menu centered, hotline hard-left; plain text links ==== */
@media (min-width: 1120px){
  .site-header .nav{ position:relative; }

  /* Place hotline and logo at the physical edges, vertically aligned */
  .site-header .nav .nav__hotline-btn{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    margin-left: 0;
    height: 56px;
    display: flex;
    align-items: center;
    padding: .68rem 1.32rem .68rem 1rem;
  }
  .site-header .nav .brand{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    height: 120px;
    display: flex;
    align-items: center;
  }

  /* Perfectly center the menu regardless of left/right widths */
  .site-header .nav .nav__menu{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 1.1rem;
    height: 56px;
  }

  /* Make menu links look like plain text (not pills) on desktop */
  .site-header .nav .nav__menu .btn--nav{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: .18rem .38rem !important;
  }
}
/* === Desktop polish to match reference image === */
@media (min-width: 901px){
  /* Make the logo slightly larger and keep it flush-right */
  .site-header .brand__logo{ height: 120px; }

  /* Menu: plain text, tighter vertical rhythm, a bit bolder, wider letter spacing */
  .site-header .nav .nav__menu a{
    padding: 0 .58rem !important;   /* reduced horizontal padding for closer spacing */
    font-weight: 700;
    letter-spacing: .015em;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1;
    height: 56px;
    display: flex;
    align-items: center;
  }

  /* Slightly increase gap so menu sits visually balanced between hotline and logo */
  .site-header .nav .nav__menu{ gap: 1.16rem; }

  /* Keep hotline pill left + subtle elevation */
  .site-header .nav .nav__hotline-btn{
    background: rgba(255,255,255,.07);
    border: 1.2px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 20px rgba(0,0,0,.28);
    margin-left: 0;
    padding: .68rem 1.32rem .68rem 1rem;
  }
}