@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');:root{--accent-primary:#B6E62E;--accent-secondary:#E6C72E;--accent-purple:#712FE6;--dark-gray:#534766;--mid-green:#5E6647;--neutral-beige:#666147}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;min-height:100vh;font-family:'Fira Code',monospace;color:var(--dark-gray);background:transparent}body{line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background:linear-gradient(135deg,#f8f9fa 0%,#f1f3f4 100%);color:var(--dark-gray)}img{display:block;max-width:100%;height:auto}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent-purple);outline-offset:2px}.container{width:min(100% - 2rem,72rem);margin-inline:auto}.btn-primary{display:inline-block;border:0;border-radius:0.5rem;padding:0.75rem 1.25rem;background:var(--dark-gray);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color 0.2s ease}.btn-primary:hover,.btn-primary:focus-visible{background:var(--accent-purple)}.section-padding{padding-block:clamp(2.5rem,8vw,6rem)}.btn-large{padding:0.95rem 1.5rem;font-size:1rem}.hero{padding:clamp(2rem,7vw,5rem) 1rem}.hero-grid{width:min(100%,72rem);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center}.hero-image{position:relative;border-radius:0.9rem;overflow:hidden;box-shadow:0 0.8rem 2rem rgba(44,72,41,0.18)}.hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(135,164,129,0.2),rgba(241,228,211,0.05));pointer-events:none}.hero-content{background:#ffffff;border:1px solid rgba(140,121,111,0.35);border-radius:0.9rem;padding:clamp(1.2rem,3vw,2rem)}.hero-title{margin:0 0 0.8rem;font-size:clamp(1.7rem,4.8vw,2.8rem);line-height:1.2}.hero-text{margin:0 0 1.25rem;max-width:34ch}.hero .btn-primary{background:var(--mid-green);color:var(--dark-gray)}.hero .btn-primary:hover,.hero .btn-primary:focus-visible{background:var(--accent-purple);color:#fff}.services-title{margin:0;font-size:clamp(1.7rem,4.5vw,2.4rem)}.services-intro{margin:0.65rem 0 1.4rem;max-width:56ch}.services-grid{display:grid;grid-template-columns:1fr;gap:1rem}.service-card{background:#fff;border:1px solid var(--mid-green);border-radius:0.8rem;padding:1rem}.service-icon{width:3rem;height:3rem;border-radius:0.5rem;margin-bottom:0.75rem}.service-card h2{margin:0 0 0.5rem;font-size:1.1rem}.service-card ul{margin:0 0 0.85rem;padding-left:1.1rem}.service-link{color:var(--mid-green);font-weight:600;text-decoration:none}.service-link:hover,.service-link:focus-visible{color:var(--dark-gray)}.reviews-title{margin:0;font-size:clamp(1.7rem,4.5vw,2.4rem)}.reviews-intro{margin:0.65rem 0 1.4rem;max-width:56ch}.testimonials-grid{display:grid;grid-template-columns:1fr;gap:1rem}.testimonial-card{background:#f8f9fa;border:1px solid rgba(140,121,111,0.4);border-radius:0.85rem;padding:1rem}.quote{margin:0 0 0.75rem;position:relative;padding-left:1.05rem}.quote::before{content:"\201C";position:absolute;left:0;top:-0.1rem;color:var(--accent-purple);font-size:1.25rem;font-weight:700}.rating-stars::before{content:"\2605\2605\2605\2605\2605";letter-spacing:0.08rem;color:var(--accent-purple)}.testimonial-author{margin-top:0.75rem;display:flex;align-items:center;gap:0.6rem}.author-avatar{width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid var(--mid-green)}.contact-grid{display:grid;grid-template-columns:1fr;gap:1rem}.contact-info,.contact-form{background:#fff;border:1px solid rgba(140,121,111,0.45);border-radius:0.85rem;padding:1rem}.contact-info h2{margin-top:0}.contact-form{display:grid;gap:0.75rem}.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--mid-green);border-radius:0.45rem;padding:0.65rem 0.75rem;font:inherit;color:var(--dark-gray);background:#fff}.contact-form textarea{min-height:8.5rem;resize:vertical}.contact-form .btn-primary{justify-self:start}.navbar{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,0.1);font-weight:600}.nav-container{width:min(100% - 2rem,72rem);margin-inline:auto;min-height:4.5rem;position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.logo-link{flex-shrink:0;margin-left:1.75rem;padding-top:0.4rem;padding-bottom:0.4rem}.logo{width:16.58rem}.nav-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.25rem}.nav-link{text-transform:uppercase;letter-spacing:1px;font-weight:700;font-size:1.12rem;padding:1rem 1.5rem;color:var(--dark-gray);text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}.nav-link:hover{color:var(--accent-purple);transform:translateY(-2px)}.nav-link:focus-visible{color:var(--accent-purple)}.hamburger{display:none;background:transparent;border:0;padding:0.25rem;cursor:pointer}.hamburger span{display:block;width:1.6rem;height:0.14rem;margin:0.3rem 0;background:var(--dark-gray)}@media (max-width:768px){.hamburger{display:block}.nav-menu{position:absolute;top:4.5rem;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;padding:1rem;background:#fff;border-bottom:1px solid var(--mid-green)}.nav-menu.active{display:flex}.testimonials-grid{display:grid;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:0.25rem}.testimonial-card{scroll-snap-align:start}}@media (min-width:600px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:760px){.contact-grid{grid-template-columns:1fr 1.2fr;align-items:start}}@media (min-width:769px){.hero-grid{grid-template-columns:1.05fr 1fr;gap:2rem}}@media (min-width:992px){.services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.testimonials-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:640px) and (max-width:991px){.testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.footer{margin-top:2rem;padding:1.25rem 0;text-align:center;background:#fff;border-top:1px solid var(--accent-purple)}.footer .container{display:grid;gap:0.5rem;justify-items:center}.footer p{margin:0;font-size:0.8rem}.social-links{display:flex;gap:0.75rem}@media (max-width:768px){.footer{padding:1rem 0}}




.hero {
  padding: clamp(2rem, 6vw, 5rem) 1rem;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  min-height: 80vh;
  width: min(100%, 72rem);
  margin-inline: auto;
}

.hero-content-left {
  max-width: 36rem;
}

.hero-title {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 6vw, 3.3rem);
  line-height: 1.1;
}

.hero-subtitle {
  margin: 0 0 1.5rem;
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  line-height: 1.65;
}

.hero-subtitle p {
  margin: 0 0 0.95rem;
}

.hero-subtitle p:last-child {
  margin-bottom: 0;
}

.hero-inline-link {
  color: var(--accent-purple);
  font-weight: 700;
  text-decoration: none;
}

.hero-inline-link:hover,
.hero-inline-link:focus-visible {
  text-decoration: underline;
}

.hero-signature {
  margin-top: 0.95rem;
  color: inherit;
  font-weight: 400;
  line-height: 1.65;
  text-align: right;
}

.hero-highlight {
  background: #B6E62E;
  padding: 0 0.2em;
  border-radius: 0.2em;
}

.hero-image-right {
  justify-self: center;
}

.image-frame {
  width: 364px;
  height: 546px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(81, 47, 230, 0.3);
  border: 2px solid var(--accent-purple);
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-modern {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  background: var(--accent-primary);
  color: var(--dark-gray);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (min-width: 768px) {
  .hero-container {
    grid-template-columns: 1fr 1fr;
  }
}

.btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  color: var(--dark-gray);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 16px;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(182, 230, 46, 0.4);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.btn-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s;
}

.btn-modern:hover::before {
  left: 100%;
}

.btn-modern:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 40px rgba(182, 230, 46, 0.6);
}

.service-card, .review-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid rgba(113, 47, 230, 0.1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.service-card::before, .review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-purple));
  border-radius: 24px 24px 0 0;
}

.service-card:hover, .review-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(113, 47, 230, 0.2);
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--dark-gray);
  position: relative;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--accent-primary);
  border-radius: 2px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 5rem);
}

.section-padding {
  padding: clamp(4rem, 8vw, 8rem) 0;
}

@media (max-width: 480px) {
  .image-frame {
    width: 312px;
    height: 468px;
  }
}










@media (min-width: 769px) {
  .nav-container {
    position: relative;
    align-items: center;
  }

  .nav-menu {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    margin: 0;
  }
}

h1, h2, h3, h4, h5, h6 {
  color: #712FE6;
}

.hero-title {
  background: none;
  -webkit-text-fill-color: #712FE6;
  color: #712FE6;
}


.contact-section {
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: linear-gradient(135deg, rgba(248,249,250,0.8) 0%, rgba(241,243,244,0.8) 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

.contact-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 28px;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(113, 47, 230, 0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-purple));
  border-radius: 28px 28px 0 0;
}

.contact-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(113, 47, 230, 0.25);
}

.email-card {
  border-left: 6px solid var(--accent-primary);
}

.email-card .contact-icon {
  font-size: 4rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-height: 4.2rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.contact-card .contact-link {
  font-size: 1.04rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 1.2rem 2rem;
  margin: 1.2rem 0;
  border-radius: 16px;
  line-height: 1.2;
  text-align: center;
}

.contact-card .contact-link .link-icon {
  font-size: 0.9em;
  line-height: 1;
}

.email-card .contact-link {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  color: var(--dark-gray) !important;
}

.instagram-card {
  border-left: 6px solid var(--accent-purple);
}

.instagram-card .contact-icon {
  font-size: 4rem;
  background: linear-gradient(135deg, var(--accent-purple), #9b59ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-height: 4.2rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.instagram-link {
  background: linear-gradient(135deg, var(--accent-purple) 0%, #8e44ad 100%) !important;
  color: white !important;
  box-shadow: 0 10px 30px rgba(113, 47, 230, 0.4);
}

.instagram-link:hover {
  box-shadow: 0 15px 40px rgba(113, 47, 230, 0.6);
  transform: translateY(-3px) scale(1.02);
}

.contact-title {
  font-size: clamp(1.4rem, 3.2vw, 1.8rem);
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 0.65rem;
  min-height: 2.7em;
  line-height: 1.2;
}

.contact-text {
  color: #6b7280;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
  min-height: 4.8em;
  font-weight: 400;
}

.contact-features {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: auto;
  width: 100%;
  padding-top: 1rem;
  text-align: left;
}

.contact-features span {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--dark-gray);
  font-weight: 500;
  text-align: left;
}

@media (max-width: 768px) {
  .contact-card {
    padding: 1.9rem 1.5rem;
  }
}

.page-header {
  text-align: center;
  padding: 5rem 0 3rem;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-purple) 100%);
  color: white;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.page-header h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  margin: 0 0 1rem 0;
  color: white;
  -webkit-text-fill-color: white;
}

.page-header p {
  font-size: 1.25rem;
  opacity: 0.95;
  margin: 0;
}



.contact-title::after {
  content: none;
  display: none;
}



.hero .hero-title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}