/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  --primary: #009688;
  --secondary: #00796B;
  --accent: #00BFA5;
  --bg-light: #E0F2F1;
  --surface: #FFFFFF;
  --text: #212121;
  --muted: #616161;
  --shadow: rgba(0,0,0,0.1);
}

/* RESET & BASE */
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Open Sans',sans-serif;
  background:var(--bg-light);
  color:var(--text);
}
.container {
  max-width:1200px;
  margin:30px auto;
  background:var(--surface);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 20px var(--shadow);
}

/* HEADER */
header {
  display:flex; align-items:center; justify-content:space-between;
  padding:40px 60px;
}
.logo img { height:35px; }
nav { display:flex; align-items:center; gap:40px; }
.nav-links, .auth-menu { list-style:none; display:flex; gap:30px; }
.nav-links a {
  position:relative; text-decoration:none; color:var(--text);
  font-weight:600; padding:10px 0; transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  height:2px; width:0; background:var(--primary);
  transition:width .3s;
}
.nav-links a:hover { color:var(--primary); }
.nav-links a:hover::after { width:100%; }

/* DROPDOWN */
.dropdown { position:relative; }
.dropbtn { cursor:pointer; font-weight:600; }
.dropdown-menu {
  list-style:none; position:absolute; top:100%; left:0;
  background:var(--surface); border-radius:6px;
  box-shadow:0 4px 12px var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:all .3s; min-width:200px; z-index:1000;
}
.dropdown.open .dropdown-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu li+li { border-top:1px solid var(--shadow); }
.dropdown-menu a {
  display:block; padding:12px 16px; color:var(--text);
  text-decoration:none; transition:background .2s;
}
.dropdown-menu a:hover { background:var(--bg-light); }

/* CLIENT AREA */
.auth-menu a {
  display:flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:600;
  padding:10px 20px; border-radius:6px;
  background:var(--accent); color:#fff;
  transition:background .3s, transform .3s;
}
.auth-menu a:hover { background:var(--secondary); transform:translateY(-2px); }

/* BURGER (mobile) */
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burger span { width:25px; height:3px; background:var(--text); border-radius:2px; }

/* HERO */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; text-align:center;
  padding:140px 20px 100px;
}
.hero-content { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.hero h1 {
  font-family:'Montserrat',sans-serif; font-size:2.8rem; margin-bottom:20px;
  opacity:0; animation:slideIn .8s forwards;
}
.hero p {
  font-size:1.2rem; margin-bottom:30px;
  opacity:0; animation:fadeIn .8s .4s forwards;
}
.btn-hero {
  display:inline-block; font-family:'Montserrat',sans-serif;
  background:rgba(255,255,255,0.2); padding:14px 36px; border-radius:6px;
  color:#fff; font-weight:600; text-decoration:none;
  backdrop-filter:blur(5px);
  opacity:0; transform:scale(0.9);
  animation:fadeIn .8s .8s forwards, pulse 2.5s 1.6s infinite;
}
/* Floating shapes */
.hero-shapes .shape {
  position:absolute; background:rgba(255,255,255,0.15);
  border-radius:50%; animation:float 6s ease-in-out infinite;
}
.shape-1 { width:180px;height:180px;top:8%;left:-8%; }
.shape-2 { width:260px;height:260px;bottom:-40px;right:-50px;animation-duration:8s; }
.shape-3 { width:140px;height:140px;top:32%;right:8%;animation-duration:5s; }

/* QUICK FEATURES */
.quick-features { padding:60px; }
.quick-cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px;
}
.quick-card {
  text-align:center; padding:30px 20px; border-radius:8px; background:var(--bg-light);
  transition:transform .3s, box-shadow .3s; opacity:0;
}
.quick-card.visible { opacity:1; }
.quick-card:hover { transform:translateY(-6px); box-shadow:0 8px 20px var(--shadow); }
.quick-card i { font-size:2.5rem; color:var(--primary); margin-bottom:12px; }
.quick-card h4 { font-family:'Montserrat',sans-serif; margin-bottom:8px; }
.quick-card p { color:var(--muted); font-size:.95rem; }

/* CONTENT */
.content { padding:80px 60px 0; }

/* SECTION TITLES */
.section-title {
  font-family:'Montserrat',sans-serif; font-size:1.8rem; color:var(--muted);
  text-align:center; margin:0 auto 40px;
  position:relative; opacity:0; transform:translateY(20px);
  transition:all .6s ease;
}
.section-title::after {
  content:''; position:absolute; bottom:-10px; left:50%;
  transform:translateX(-50%);
  width:50px; height:4px; background:var(--accent); border-radius:2px;
}
.section-title.visible { opacity:1; transform:translateY(0); }
.section-subtitle {
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 32px;
}

/* HOSTING SERVICES */
.services { margin-bottom:60px; }
.service-cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:40px;
}
.service-card {
  position:relative;
  background:var(--surface); padding:40px 30px;
  border-radius:8px; box-shadow:0 4px 12px var(--shadow);
  text-align:center; transform-style:preserve-3d;
  transition:transform .4s, box-shadow .4s; opacity:0;
}
.service-card.visible { opacity:1; }
.service-card .stripe {
  position:absolute; top:0; left:0; width:100%; height:4px;
  background:var(--accent); border-top-left-radius:8px; border-top-right-radius:8px;
}
.icon-circle {
  width:60px; height:60px; margin:0 auto 15px;
  border-radius:50%; background:var(--bg-light);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.icon-circle i { font-size:1.8rem; color:var(--primary); transition:color .3s; }
.service-card:hover .icon-circle {
  background:var(--accent); transform:scale(1.1) rotate(10deg);
}
.service-card:hover .icon-circle i { color:#fff; }
.service-card:hover {
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 12px 24px var(--shadow);
}
.service-card h3 { font-family:'Montserrat',sans-serif; margin-bottom:12px; }
.service-card .price {
  font-size:1.8rem; color:var(--accent); margin:8px 0;
}
.service-card .price span { font-size:1rem; color:var(--muted); }
.service-card p { color:var(--muted); font-size:1rem; margin-bottom:20px; }
.btn-service {
  background:var(--primary); color:#fff; padding:10px 28px; border-radius:6px;
  text-decoration:none; font-weight:600; transition:background .3s;
}
.btn-service:hover { background:var(--secondary); }

/* DESIGN SECTION */
.design { margin-bottom:100px; }
.feature-block.alt {
  background:var(--bg-light); padding:40px; border-radius:8px;
  display:flex; flex-wrap:wrap; align-items:center; gap:40px; opacity:0;
}
.feature-block.alt.visible { opacity:1; }
.feature-block.alt .feature-content {
  flex:1 1 320px; text-align:left;
}
.feature-block.alt .feature-content h3 {
  font-family:'Montserrat',sans-serif; font-size:1.8rem;
  margin-bottom:12px; color:var(--muted);
}
.feature-block.alt .feature-content p {
  margin-bottom:20px; color:var(--text); line-height:1.6;
}
.feature-block.alt .btn-feature {
  background:var(--accent); color:#fff; padding:12px 30px;
  border-radius:6px; text-decoration:none; font-weight:600;
  transition:background .3s;
}
.feature-block.alt .btn-feature:hover { background:var(--secondary); }
.design-image {
  flex:1 1 320px; height:260px;
  background:url('images/mailer_design.png') center/cover;
  border-radius:8px; box-shadow:0 4px 12px var(--shadow);
}

.img-owlinbox {
  flex:1 1 320px; height:260px;
  background:url('images/owlinbox.png') center/cover;
  border-radius:8px; box-shadow:0 4px 12px var(--shadow);
}
.img-avmscript {
  flex:1 1 320px; height:260px;
  background:url('images/avmscript.png') center/cover;
  border-radius:8px; box-shadow:0 4px 12px var(--shadow);
}

/* FEATURES SECTION */
.features { margin-bottom:80px; }
.feature-block {
  display:flex; flex-wrap:wrap; align-items:center; gap:40px;
  margin-bottom:60px; opacity:0;
}
.feature-block.visible { opacity:1; }
.feature-block:nth-child(2) {
  background:var(--bg-light); padding:40px; border-radius:8px;
}
.feature-image {
  flex:1 1 320px; height:280px; background-size:cover;
  border-radius:8px; box-shadow:0 4px 12px var(--shadow);
  transition:transform .3s;
}
.feature-block:hover .feature-image { transform:scale(1.03); }
.feature-content {
  flex:1 1 320px; padding:20px;
}
.feature-content h3 {
  font-family:'Montserrat',sans-serif; font-size:1.8rem;
  margin-bottom:12px; color:var(--muted);
}
.feature-content p {
  margin-bottom:20px; color:var(--text); line-height:1.6;
}
.btn-feature {
  background:var(--accent); color:#fff; padding:12px 30px;
  border-radius:6px; text-decoration:none; font-weight:600;
  transition:background .3s;
}
.btn-feature:hover { background:var(--secondary); }

/* FOOTER */
footer {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; padding:20px 60px;
  background:var(--surface); border-top:1px solid var(--shadow);
}
.footer-left p { font-size:0.9rem; color:var(--muted); }
.footer-right {
  display:flex; align-items:center; gap:48px; /* spacing between links & icons */
}
.footer-links {
  display:flex; gap:24px;    /* spacing between links */
}
.social-icons {
  display:flex; gap:16px;    /* spacing between icons */
}
.footer-links a {
  font-size:0.9rem; color:var(--text); text-decoration:none;
  transition:color .3s;
}
.footer-links a:hover { color:var(--accent); }
.social-icons a { color:var(--text); transition:color .3s; }
.social-icons a:hover { color:var(--accent); }
.social-icons i { font-size:1.6rem; }

/* KEYFRAMES */
@keyframes slideIn { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn  { from{opacity:0;}to{opacity:1;} }
@keyframes pulse   { 0%,100%{transform:scale(1);}50%{transform:scale(1.05);} }
@keyframes float   { 0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,30px) scale(1.2);} }

/* RESPONSIVE */
@media (max-width:768px) {
  .burger { display:flex; }
  nav .nav-links, nav .auth-menu {
    display:none; flex-direction:column; width:100%;
  }
  nav .nav-links.active, nav .auth-menu.active {
    display:flex; background:var(--surface); padding:10px 0;
  }
  .nav-links li, .auth-menu li { margin:8px 0; }
  .dropdown-menu {
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; background:transparent;
  }
  .hero { padding:80px 20px 60px; }
  .quick-features, .content { padding:40px 20px 0; }
  .quick-cards, .service-cards {
    display:block!important; gap:0!important;
  }
  .quick-card, .service-card { margin-bottom:30px; }
  .design-block, .feature-block { display:block!important; }
}