:root {
    --bg: #f3efe8;
    --dark: #1f2a2e;
    --accent: #2f5d50;
    --accent-soft: #3f7a68;
    --muted: #6b6b6b;
    --radius: 18px;
    --transition: 0.6s cubic-bezier(.16,1,.3,1);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
  }
  
  /* NAV */
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 64px;
    position: sticky;
    top: 0;
    background: rgba(243,239,232,0.95);
    backdrop-filter: blur(8px);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  }
  
  .logo img {
    width: 78px;
    filter: drop-shadow(0 6px 18px rgba(47,93,80,.25));
    transition: var(--transition);
  }
  
  .logo img:hover {
    transform: scale(1.08) rotate(-1deg);
  }
  
  .nav nav {
    display: flex;
    align-items: center;
  }
  
  .nav a {
    margin-left: 28px;
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    position: relative;
  }
  
  .nav a:not(.btn):not(.ig)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--transition);
  }
  
  .nav a:hover::after {
    width: 100%;
  }
  
  /* BUTTONS */
  .btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius);
    transition: var(--transition);
  }
  
  .btn.big {
    padding: 16px 34px;
    font-size: 1rem;
  }
  
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(47,93,80,.35);
  }
  
  /* INSTAGRAM */
  .ig svg, .ig-link {
    transition: var(--transition);
    color: var(--dark);
    text-decoration: none;
  }
  
  .ig:hover svg, .ig-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
  }
  
  /* HERO */
  .hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }
  
  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 30%, rgba(47,93,80,.18), transparent 60%),
      radial-gradient(circle at 80% 70%, rgba(47,93,80,.12), transparent 55%);
  }
  
  .hero-content {
    position: relative;
    max-width: 760px;
    animation: fadeUp 1.1s ease forwards;
  }
  
  .hero h1 {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    margin-bottom: 22px;
  }
  
  .hero p {
    color: var(--muted);
    margin-bottom: 34px;
    font-size: 1.05rem;
  }
  
  /* SERVICES */
  .services {
    padding: 120px 60px;
    text-align: center;
  }
  
  .services h2 {
    font-size: 2.4rem;
    margin-bottom: 60px;
  }
  
  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .card {
    background: #fff;
    padding: 44px 34px;
    border-radius: var(--radius);
    box-shadow: 0 20px 40px rgba(0,0,0,.06);
    transition: var(--transition);
    cursor: pointer;
  }
  
  .card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 70px rgba(0,0,0,.12);
  }
  
  /* ABOUT */
  .about {
    padding: 100px 60px;
    text-align: center;
  }
  
  .about p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.8;
  }
  
  /* CONTACT */
  .contact {
    padding: 100px 60px;
    text-align: center;
  }
  
  .contact a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
  }
  
  .contact a:hover {
    text-decoration: underline;
  }
  
  /* FOOTER */
  .footer {
    padding: 30px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
  }
  
  /* ANIMATIONS */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* OFFSET FOR STICKY NAV */
  section {
    scroll-margin-top: 100px;
  }
  /* PRICING SECTION */
.pricing {
    padding: 100px 60px;
    text-align: center;
  }
  
  .pricing h2 {
    font-size: 2.4rem;
    margin-bottom: 20px;
  }
  
  .pricing p {
    color: var(--muted);
    margin-bottom: 60px;
    font-size: 1rem;
  }
  
  .pricing-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .pricing-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: var(--radius);
    box-shadow: 0 20px 40px rgba(0,0,0,.06);
    transition: var(--transition);
  }
  
  .pricing-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 70px rgba(0,0,0,.12);
  }
  
  .pricing-card h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: var(--accent);
  }
  
  .pricing-card ul {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
  }
  
  .pricing-card ul li {
    margin: 10px 0;
    color: var(--dark);
  }
  
  .pricing-card .price {
    font-size: 1.4rem;
    font-weight: 600;
  }
  
  .pricing-card .price span {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 5px;
  }
  /* PRICING SECTION */
.pricing {
    padding: 100px 60px;
    text-align: center;
  }
  
  .pricing h2 {
    font-size: 2.4rem;
    margin-bottom: 20px;
  }
  
  .pricing p {
    color: var(--muted);
    margin-bottom: 60px;
    font-size: 1rem;
  }
  
  .pricing-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .pricing-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: var(--radius);
    box-shadow: 0 20px 40px rgba(0,0,0,.06);
    transition: var(--transition);
  }
  
  .pricing-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 70px rgba(0,0,0,.12);
  }
  
  .pricing-card h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: var(--accent);
  }
  
  .pricing-card ul {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
  }
  
  .pricing-card ul li {
    margin: 10px 0;
    color: var(--dark);
  }
  
  .pricing-card .price {
    font-size: 1.4rem;
    font-weight: 600;
  }
  
  .pricing-card .price span {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 5px;
  }
  
  .pricing-card .examples {
    margin-top: 20px;
  }
  
  .pricing-card .examples h4 {
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--dark);
  }
  
  .pricing-card .examples button {
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .pricing-card .examples button:hover {
    background: var(--accent-soft);
    transform: translateY(-2px);
  }
  
  /* MODAL STYLING */
  .modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
  }
  
  .modal-content {
    position: relative;
    margin: 5% auto;
    width: 90%;
    max-width: 1000px;
    height: 80vh;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
  }
  
  .modal iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  .modal .close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 2rem;
    font-weight: bold;
    color: var(--dark);
    cursor: pointer;
    transition: var(--transition);
  }
  
  .modal .close:hover {
    color: var(--accent);
  }
  :root {
    --bg: #f3efe8;
    --dark: #1f2a2e;
    --accent: #2f5d50;
    --accent-soft: #3f7a68;
    --muted: #6b6b6b;
    --radius: 18px;
    --transition: 0.6s cubic-bezier(.16,1,.3,1);
  }
  
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--dark); line-height:1.6; }
  
  /* NAVBAR */
  .nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:26px 64px;
    position:relative;
    z-index:100;
    background:var(--bg);
  }
  
  .logo img { width:78px; transition:var(--transition); }
  .logo img:hover { transform:scale(1.08) rotate(-1deg); }
  
  nav { display:flex; align-items:center; gap:28px; transition:all 0.3s; }
  nav a { text-decoration:none; color:var(--dark); font-weight:500; position:relative; }
  nav a:hover { color:var(--accent); }
  
  nav a:not(.btn):not(.ig)::after {
    content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); transition:var(--transition);
  }
  nav a:hover::after { width:100%; }
  
  /* BUTTONS */
  .btn { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color:#fff; padding:12px 24px; border-radius:var(--radius); transition:var(--transition); }
  .btn.big { padding:16px 34px; font-size:1rem; }
  .btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(47,93,80,.35); }
  
  /* HAMBURGER */
  .hamburger { display:none; flex-direction:column; justify-content:space-between; width:30px; height:22px; cursor:pointer; }
  .hamburger span { display:block; height:4px; background:var(--dark); border-radius:2px; transition:var(--transition); }
  .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity:0; }
  .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }
  
  /* MOBILE RESPONSIVE */
  @media screen and (max-width:768px){
    nav {
      position:absolute; top:100%; left:0; right:0; background:var(--bg); flex-direction:column; align-items:center; max-height:0; overflow:hidden; transition:max-height 0.4s ease;
    }
    nav.active { max-height:500px; }
    nav a { margin:15px 0; }
    .hamburger { display:flex; }
  }
  
  /* HERO */
  .hero { position:relative; min-height:90vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
  .hero-bg { position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(47,93,80,.18), transparent 60%), radial-gradient(circle at 80% 70%, rgba(47,93,80,.12), transparent 55%); }
  .hero-content { position:relative; max-width:760px; animation:fadeUp 1.1s ease forwards; }
  .hero h1 { font-size:clamp(2.6rem, 5vw, 3.6rem); margin-bottom:22px; }
  .hero p { color:var(--muted); margin-bottom:34px; font-size:1.05rem; }
  
  /* SERVICES */
  .services, .about, .pricing, .contact { padding:100px 60px; text-align:center; }
  .service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; max-width:1000px; margin:0 auto; }
  .card, .pricing-card { background:#fff; padding:44px 34px; border-radius:var(--radius); box-shadow:0 20px 40px rgba(0,0,0,.06); transition:var(--transition); }
  .card:hover, .pricing-card:hover { transform:translateY(-10px); box-shadow:0 30px 70px rgba(0,0,0,.1); }
  .pricing-card .price span { display:block; font-size:0.85rem; color:var(--muted); margin-top:5px; }
  .pricing-table { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; max-width:1000px; margin:0 auto; }
  
  /* FOOTER */
  .footer { padding:30px; text-align:center; color:var(--muted); }
  
  /* ANIMATIONS */
  @keyframes fadeUp { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }
  
  /* MODAL */
  .modal { display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.7); backdrop-filter:blur(5px); }
  .modal-content { position:relative; margin:5% auto; width:90%; max-width:1000px; height:80vh; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.3); }
  .modal iframe { width:100%; height:100%; border:none; }
  .modal .close { position:absolute; top:12px; right:18px; font-size:2rem; font-weight:bold; color:var(--dark); cursor:pointer; transition:var(--transition); }
  .modal .close:hover { color:var(--accent); }
  .request {
  padding: 110px 60px;
  text-align: center;
}

/* ================= REQUEST SECTION ================= */
.request {
  padding: 80px 20px;
  background: var(--bg-soft);
  text-align: center;
}

.request h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.request p {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 30px;
}

/* ================= FORM ================= */
.request form {
  max-width: 600px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-group label {
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Inputs */
.request input,
.request select,
.request textarea {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  transition: var(--transition);
}

.request textarea {
  resize: vertical;
  min-height: 140px;
}

/* Placeholder */
.request input::placeholder,
.request textarea::placeholder {
  color: #777;
}

/* Focus */
.request input:focus,
.request select:focus,
.request textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(245,197,24,0.15);
}

/* Button spacing */
.request button {
  margin-top: 10px;
}
/* FIX INPUT NOT CLICKABLE */
input,
textarea,
select,
button {
  pointer-events: auto;
  position: relative;
  z-index: 10;
}
.request {
  position: relative;
  z-index: 5;
  padding: 100px 20px;
  background: linear-gradient(180deg, #f3efe8, #f3efe8);
}

#websiteForm {
  max-width: 620px;
  margin: 60px auto 0;
  padding: 40px;
  background: #0f0f0f;
  border-radius: 18px;
  border: 1px solid #1f1f1f;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}
.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #e5e5e5;
}

input,
select,
textarea {
  width: 100%;
  padding: 14px 16px;
  background: #080808;
  color: #ffffff;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: all 0.25s ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #2f5d50;
  box-shadow: 0 0 0 3px rgba(47, 93, 80, 0.25);
  background: #0b0b0b;
}
::placeholder {
  color: #777;
}
#websiteForm .btn {
  width: 100%;
  margin-top: 10px;
  padding: 16px;
  font-size: 16px;
  border-radius: 12px;
}
#websiteForm .btn {
  width: 100%;
  margin-top: 10px;
  padding: 16px;
  font-size: 16px;
  border-radius: 12px;
}
/* FORCE INPUT TEXT COLOR */
input,
textarea,
select {
  color: #ffffff !important;
  background-color: #080808;
}

/* Fix autofill text (Chrome) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  transition: background-color 9999s ease-in-out 0s;
}
::placeholder {
  color: #888;
  opacity: 1;
}
/* ================= FORM FIELDS ================= */
.request input,
.request textarea,
.request select {
  padding: 16px;
  border-radius: 14px;

  /* Visible idle state */
  background: #0f0f0f;
  border: 1px solid #2a2a2a;

  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;

  transition: border 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Placeholder */
.request input::placeholder,
.request textarea::placeholder {
  color: #8b8b8b;
}

/* Focus state */
.request input:focus,
.request textarea:focus,
.request select:focus {
  outline: none;
  background: #121212;
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(47, 93, 80, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Autofill fix */
.request input:-webkit-autofill,
.request textarea:-webkit-autofill,
.request select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 0 0px 1000px #0f0f0f inset;
}