:root {
  --orange:#ff593e;
  --blue:#009bd5;
  --green:#719d45;
  --yellow:#ffc928;
  --dark:#252525;
  --grey:#666;
  --light:#f7f8fa;
  --white:#ffffff;
}

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

html {
  scroll-behavior:smooth;
}

body {
  font-family:Arial,Helvetica,sans-serif;
  color:var(--dark);
  line-height:1.7;
}

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

.container {
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* HEADER */

header {
  background:#fff;
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.navbar {
  min-height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.logo img {
  width:220px;
  max-height:75px;
  object-fit:contain;
}

.nav-menu {
  display:flex;
  align-items:center;
  gap:25px;
  list-style:none;
}

.nav-menu li {
  position:relative;
}

.nav-menu a {
  font-size:14px;
  font-weight:600;
  padding:12px 0;
  display:block;
  transition:.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
  color:var(--orange);
}

.dropdown-menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:270px;
  background:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.13);
  border-radius:5px;
  padding:10px 0;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display:block;
}

.dropdown-menu a {
  padding:9px 18px;
  font-size:13px;
  border-bottom:1px solid #f1f1f1;
}

.dropdown-menu a:hover {
  background:#fff3ef;
  padding-left:23px;
}

.menu-toggle {
  display:none;
  border:0;
  background:var(--orange);
  color:#fff;
  padding:9px 13px;
  font-size:23px;
  border-radius:5px;
  cursor:pointer;
}

/* BUTTONS */

.btn {
  display:inline-block;
  padding:13px 25px;
  border-radius:5px;
  font-size:14px;
  font-weight:bold;
  transition:.3s;
}

.btn-primary {
  background:var(--orange);
  color:#fff;
}

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

.btn-outline {
  border:1px solid #fff;
  color:#fff;
}

/* HERO */

.hero {
  background:linear-gradient(120deg,#fff5f1,#f1f9fd);
  padding:90px 0;
  overflow:hidden;
}

.hero-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:55px;
}

.eyebrow {
  display:inline-block;
  color:var(--orange);
  font-weight:bold;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:15px;
}

.hero h1 {
  font-size:46px;
  line-height:1.2;
  margin-bottom:22px;
}

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

.hero p {
  color:var(--grey);
  font-size:16px;
  margin-bottom:28px;
}

.hero-buttons {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-visual {
  background:#fff;
  border-radius:15px;
  padding:35px;
  box-shadow:0 15px 45px rgba(0,0,0,.09);
  border-top:5px solid var(--orange);
}

.hero-visual h3 {
  font-size:23px;
  margin-bottom:12px;
}

.hero-visual p {
  font-size:14px;
}

.visual-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:20px;
}

.visual-item {
  padding:18px 12px;
  border-radius:8px;
  background:#f7f8fa;
  text-align:center;
  font-size:13px;
  font-weight:bold;
}

.visual-item span {
  display:block;
  font-size:28px;
  margin-bottom:5px;
}

.orange {color:var(--orange)}
.blue {color:var(--blue)}
.green {color:var(--green)}
.yellow {color:#dba900}

/* COMMON SECTIONS */

section {
  padding:80px 0;
}

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

.section-heading span {
  color:var(--orange);
  font-weight:bold;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:1px;
}

.section-heading h2 {
  font-size:34px;
  line-height:1.3;
  margin:10px 0 15px;
}

.section-heading p {
  color:var(--grey);
}

.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
}

.intro-copy h2 {
  font-size:32px;
  line-height:1.3;
  margin:12px 0 20px;
}

.intro-copy p {
  color:var(--grey);
  margin-bottom:15px;
}

.intro-image {
  background:linear-gradient(135deg,#fff0e9,#eaf7fc);
  padding:50px 35px;
  border-radius:12px;
  text-align:center;
}

.intro-image .big-icon {
  font-size:100px;
  color:var(--orange);
}

/* BENEFITS */

.benefits {
  background:var(--light);
}

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

.info-card {
  background:#fff;
  padding:28px;
  border-radius:9px;
  border-bottom:3px solid var(--orange);
  box-shadow:0 4px 18px rgba(0,0,0,.04);
  transition:.3s;
}

.info-card:nth-child(3n+2) {
  border-color:var(--blue);
}

.info-card:nth-child(3n) {
  border-color:var(--green);
}

.info-card:hover {
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,.09);
}

.card-icon {
  width:55px;
  height:55px;
  border-radius:10px;
  background:#fff0eb;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--orange);
  font-size:26px;
  margin-bottom:18px;
}

.info-card h3 {
  font-size:19px;
  margin-bottom:10px;
}

.info-card p {
  color:var(--grey);
  font-size:14px;
}

/* PROCESS */

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

.process-card {
  padding:30px;
  border:1px solid #eee;
  border-radius:10px;
}

.step {
  color:var(--orange);
  font-weight:bold;
  font-size:14px;
  margin-bottom:15px;
}

.process-card h3 {
  margin-bottom:12px;
}

.process-card p {
  color:var(--grey);
  font-size:14px;
}

/* FAQ */

.faq {
  background:var(--light);
}

.faq-list {
  max-width:850px;
  margin:auto;
}

details {
  background:#fff;
  margin-bottom:12px;
  border-radius:6px;
  padding:18px 22px;
  border:1px solid #eee;
}

summary {
  cursor:pointer;
  font-weight:bold;
  font-size:15px;
}

details p {
  color:var(--grey);
  font-size:14px;
  padding-top:14px;
}

/* CTA */

.cta {
  background:linear-gradient(110deg,#ff593e,#ef472e);
  color:#fff;
  padding:65px 0;
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.cta h2 {
  font-size:30px;
  margin-bottom:10px;
}

.cta p {
  color:#fff;
}

/* FOOTER */

footer {
  background:#20232a;
  color:#fff;
  padding:55px 0 20px;
}

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

.footer-logo img {
  width:220px;
  max-height:80px;
  object-fit:contain;
  background:#fff;
  padding:5px;
  border-radius:4px;
  margin-bottom:18px;
}

footer h3 {
  font-size:18px;
  margin-bottom:18px;
  color:#fff;
}

footer p,
footer li {
  color:#ccc;
  font-size:14px;
}

footer ul {
  list-style:none;
}

footer li {
  margin-bottom:9px;
}

footer a:hover {
  color:var(--orange);
}

.copyright {
  border-top:1px solid #41444b;
  margin-top:40px;
  padding-top:20px;
  text-align:center;
  color:#aaa;
  font-size:13px;
}

/* MOBILE RESPONSIVE */

@media(max-width:991px) {

  .menu-toggle {
    display:block;
  }

  .navbar {
    min-height:75px;
  }

  .nav-menu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 5%;
    box-shadow:0 10px 15px rgba(0,0,0,.1);
    max-height:75vh;
    overflow-y:auto;
  }

  .nav-menu.show {
    display:flex;
  }

  .nav-menu li {
    width:100%;
  }

  .nav-menu a {
    padding:12px 0;
    border-bottom:1px solid #eee;
  }

  .dropdown-menu {
    display:none;
    position:static;
    box-shadow:none;
    padding-left:15px;
    min-width:100%;
  }

  .dropdown.open .dropdown-menu {
    display:block;
  }

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

  .hero h1 {
    font-size:38px;
  }

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

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

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

@media(max-width:600px) {

  .container {
    width:92%;
  }

  section {
    padding:55px 0;
  }

  .logo img {
    width:175px;
  }

  .hero {
    padding:55px 0;
  }

  .hero h1 {
    font-size:32px;
  }

  .hero-visual {
    padding:22px;
  }

  .section-heading h2,
  .intro-copy h2 {
    font-size:27px;
  }

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

  .visual-grid {
    gap:10px;
  }

  .cta-inner {
    flex-direction:column;
    align-items:flex-start;
  }

  .cta h2 {
    font-size:25px;
  }

  .footer-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
}