:root{--accent:#0b7a5f;--bg:#f7faf7;--text:#0b2730}:root{--accent:#0b7a5f;--bg:#f7faf7;--text:#0b2730}

*{box-sizing:border-box}*{box-sizing:border-box}

body{font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);margin:0;line-height:1.5;overflow-x:hidden}body{font-family:Segoe UI, Roboto, Helvetica, Arial, sans-serif;background:var(--bg);color:var(--text);margin:0;line-height:1.5;overflow-x:hidden}

.container{max-width:1200px;margin:0 auto;padding:24px}.container{max-width:1200px;margin:0 auto;padding:24px}

.hero{background:linear-gradient(135deg,#0b7a5f22,#1b9d7e11);padding:80px 0;border-bottom:1px solid rgba(11,122,95,.06);position:relative;overflow:hidden}.hero{background:linear-gradient(135deg,#0b7a5f22,#1b9d7e11);padding:60px 0;border-bottom:1px solid rgba(11,122,95,.06);position:relative;overflow:hidden}

.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:800px;height:800px;background:radial-gradient(circle,rgba(11,122,95,.08),transparent);border-radius:50%;animation:pulse 10s ease-in-out infinite}.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(11,122,95,.08),transparent);border-radius:50%;animation:pulse 8s ease-in-out infinite}

.hero-content{display:flex;align-items:center;gap:60px;flex-wrap:wrap}.hero-content{display:flex;align-items:center;gap:48px;flex-wrap:wrap}

.hero-text{flex:1;min-width:320px;z-index:2}.hero-text{flex:1;min-width:300px}

.hero-image{flex:1;display:flex;justify-content:center;align-items:center;min-width:300px;position:relative}.hero-image{flex:1;display:flex;justify-content:center;align-items:center;min-width:280px}

.logo-title{display:flex;align-items:center;gap:20px;margin-bottom:16px}.logo-title{display:flex;align-items:center;gap:16px;margin-bottom:12px}

.logo{width:90px;height:90px;object-fit:contain;border-radius:20px;box-shadow:0 8px 24px rgba(11,122,95,.25);background:white;padding:8px}.logo{width:80px;height:80px;object-fit:contain;border-radius:16px;box-shadow:0 4px 12px rgba(11,122,95,.2)}

.hero h1{font-size:52px;margin:0;color:var(--accent);font-weight:700}.hero h1{font-size:48px;margin:0;color:var(--accent)}

.tag{margin:12px 0 28px;color:#2b5150;font-size:20px;line-height:1.6}.tag{margin:8px 0 24px;color:#2b5150;font-size:18px}

.download-row{display:flex;gap:16px;flex-wrap:wrap;margin:32px 0}.download-row{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}

.btn{display:inline-block;padding:16px 28px;border-radius:12px;text-decoration:none;color:white;font-weight:600;transition:all .3s;box-shadow:0 4px 12px rgba(0,0,0,.1)}.btn{display:inline-block;padding:14px 24px;border-radius:8px;text-decoration:none;color:white;font-weight:600;transition:transform .2s,box-shadow .2s}

.btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.2)}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)}

.btn.android{background:linear-gradient(135deg,#3ddc84,#2ab96e)}.btn.android{background:linear-gradient(135deg,#3ddc84,#2ab96e)}

.btn.ios{background:linear-gradient(135deg,#1b7ed6,#1560a8)}.btn.ios{background:linear-gradient(135deg,#1b7ed6,#1560a8)}

.btn.pwa{background:linear-gradient(135deg,#0b7a5f,#085d47)}.btn.pwa{background:linear-gradient(135deg,#0b7a5f,#085d47)}

.small{color:#3b6664;font-size:14px;margin-top:12px}.small{color:#3b6664;font-size:14px}

.phone-container{position:relative;width:300px;height:600px}.phone-mockup{position:relative;width:280px;height:560px;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:32px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);border:8px solid #333}

.phone-mockup{position:relative;width:280px;height:560px;background:linear-gradient(145deg,#1a1a1a,#2d2d2d);border-radius:40px;padding:8px;box-shadow:0 30px 80px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.1);border:12px solid #1f1f1f;margin:0 auto;animation:floatPhone 4s ease-in-out infinite;z-index:2}.phone-mockup::before{content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);width:60px;height:6px;background:#555;border-radius:3px}

.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:28px;background:#1f1f1f;border-radius:0 0 20px 20px;z-index:10}.app-screenshot{width:100%;height:100%;object-fit:cover;border-radius:24px;margin-top:20px}

.phone-notch::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:60px;height:6px;background:#333;border-radius:3px}.features-section{margin:48px 0;text-align:center}

.phone-screen{width:100%;height:100%;background:linear-gradient(135deg,#f0f0f0,#e0e0e0);border-radius:32px;overflow:hidden;position:relative}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:32px}

.app-screenshot{width:100%;height:100%;object-fit:cover;display:block}.feature-card{background:white;padding:32px 24px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}

.phone-button{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:50px;height:50px;background:radial-gradient(circle,#333,#1a1a1a);border-radius:50%;border:3px solid #1f1f1f}.feature-card:hover{transform:translateY(-8px);box-shadow:0 8px 24px rgba(11,122,95,.15)}

.floating-circle{position:absolute;border-radius:50%;opacity:.15;z-index:1}.feature-icon{font-size:48px;margin-bottom:16px}

.circle-1{width:200px;height:200px;background:linear-gradient(135deg,#0b7a5f,#3ddc84);top:-50px;right:-50px;animation:float1 6s ease-in-out infinite}.feature-card h3{color:var(--accent);margin:12px 0 8px;font-size:20px}

.circle-2{width:150px;height:150px;background:linear-gradient(135deg,#1b7ed6,#3ddc84);bottom:-30px;left:-30px;animation:float2 7s ease-in-out infinite}.feature-card p{color:#555;font-size:15px;line-height:1.6}

.circle-3{width:100px;height:100px;background:linear-gradient(135deg,#0b7a5f,#1b7ed6);top:50%;right:-20px;animation:float3 5s ease-in-out infinite}main{padding:28px 0}

.features-section{margin:64px 0;text-align:center}h2{margin-top:12px;color:var(--accent);font-size:32px}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}article{background:white;padding:16px;border-radius:8px;margin:12px 0;box-shadow:0 1px 4px rgba(0,0,0,.04)}

.feature-card{background:white;padding:36px 28px;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.08);transition:all .4s;border:1px solid rgba(11,122,95,.08)}.note{font-size:13px;color:#6b6b6b}

.feature-card:hover{transform:translateY(-12px);box-shadow:0 12px 32px rgba(11,122,95,.2)}footer{padding:18px 0;text-align:center;color:#6b6b6b;border-top:1px solid rgba(11,122,95,.06);margin-top:48px}

.feature-icon{font-size:56px;margin-bottom:20px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.admin-link-separator{margin:0 8px;color:#d0d0d0}

.feature-card h3{color:var(--accent);margin:16px 0 12px;font-size:22px;font-weight:600}.admin-link{color:#888;font-size:13px;text-decoration:none;opacity:.7;transition:opacity .2s}

.feature-card p{color:#555;font-size:15px;line-height:1.7}.admin-link:hover{opacity:1;text-decoration:underline}

main{padding:32px 0}code{background:#eef6f3;padding:2px 6px;border-radius:4px}

h2{margin-top:16px;color:var(--accent);font-size:36px;font-weight:700}@keyframes pulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.15}}

article{background:white;padding:20px;border-radius:12px;margin:16px 0;box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid rgba(11,122,95,.05)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.note{font-size:13px;color:#6b6b6b;background:#f9f9f9;padding:12px;border-radius:6px;margin-top:8px}@keyframes slideIn{from{transform:translateX(-30px);opacity:0}to{transform:translateX(0);opacity:1}}

footer{padding:24px 0;text-align:center;color:#6b6b6b;border-top:1px solid rgba(11,122,95,.08);margin-top:60px;background:rgba(11,122,95,.02)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

.admin-link-separator{margin:0 12px;color:#d0d0d0}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.admin-link{color:#888;font-size:13px;text-decoration:none;opacity:.6;transition:opacity .3s}.fade-in{animation:fadeIn 1s ease-out}

.admin-link:hover{opacity:1;text-decoration:underline}.slide-in{animation:slideIn .8s ease-out}

code{background:#eef6f3;padding:3px 8px;border-radius:6px;font-family:Consolas,monospace;font-size:13px}.slide-in-delay{animation:slideIn 1s ease-out .2s backwards}

@keyframes pulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.15);opacity:.12}}.float-animation{animation:float 3s ease-in-out infinite}

@keyframes floatPhone{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-20px) rotate(2deg)}50%{transform:translateY(-10px) rotate(-1deg)}75%{transform:translateY(-25px) rotate(1deg)}}.fade-in-up{animation:fadeInUp .8s ease-out;opacity:0;animation-fill-mode:forwards}

@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-20px,30px) scale(1.1)}66%{transform:translate(20px,-20px) scale(.9)}}.fade-in-up.delay-1{animation-delay:.2s}

@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-25px) scale(1.15)}66%{transform:translate(-25px,20px) scale(.95)}}.fade-in-up.delay-2{animation-delay:.4s}

@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-15px,-30px) scale(1.05)}66%{transform:translate(15px,25px) scale(.92)}}.fade-in-up.delay-3{animation-delay:.6s}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media (max-width:768px){.hero-content{flex-direction:column;text-align:center}.logo-title{justify-content:center}.hero h1{font-size:36px}.phone-mockup{width:220px;height:440px}.features-grid{grid-template-columns:1fr}}

@keyframes slideIn{from{transform:translateX(-40px);opacity:0}to{transform:translateX(0);opacity:1}}@media (max-width:520px){.hero h1{font-size:28px}.logo{width:60px;height:60px}}

@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

.fade-in{animation:fadeIn 1.2s ease-out}
.slide-in{animation:slideIn 1s ease-out}
.slide-in-delay{animation:slideIn 1.2s ease-out .3s backwards}
.fade-in-up{animation:fadeInUp 1s ease-out;opacity:0;animation-fill-mode:forwards}
.fade-in-up.delay-1{animation-delay:.2s}
.fade-in-up.delay-2{animation-delay:.4s}
.fade-in-up.delay-3{animation-delay:.6s}
@media (max-width:900px){.hero-content{flex-direction:column;text-align:center}.logo-title{justify-content:center}.hero h1{font-size:42px}.phone-container{width:260px;height:520px}.phone-mockup{width:240px;height:480px}}
@media (max-width:600px){.hero{padding:48px 0}.hero h1{font-size:32px}.logo{width:70px;height:70px}.tag{font-size:16px}.phone-container{width:220px;height:440px}.phone-mockup{width:200px;height:400px}.features-grid{grid-template-columns:1fr}}

/* Contact Form Styles */
.contact-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-top: 32px;
}

.contact-form {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(11, 122, 95, 0.08);
}

.contact-info {
  background: linear-gradient(135deg, #0b7a5f22, #1b9d7e11);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid rgba(11, 122, 95, 0.1);
}

.contact-info h3 {
  color: var(--accent);
  margin-top: 0;
  font-size: 20px;
}

.contact-info p {
  color: #2b5150;
  line-height: 1.8;
  margin: 12px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(11, 122, 95, 0.2);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.3s;
  background: white;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 122, 95, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-submit {
  width: 100%;
  padding: 16px 28px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #0b7a5f, #085d47);
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(11, 122, 95, 0.3);
}

.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 122, 95, 0.4);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.alert {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@media (max-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .contact-form,
  .contact-info {
    padding: 24px;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* What's New Section Styles */
.whats-new-section {
  margin: 64px 0;
  padding: 40px 0;
  background: linear-gradient(135deg, #f0f9f7, #e8f5f1);
  border-radius: 24px;
}

.whats-new-section h2 {
  text-align: center;
  margin-bottom: 48px;
}

.updates-container {
  max-width: 1000px;
  margin: 0 auto;
}

.update-item {
  background: white;
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(11, 122, 95, 0.1);
  transition: all 0.3s;
}

.update-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(11, 122, 95, 0.15);
}

.update-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.version-badge {
  background: linear-gradient(135deg, #0b7a5f, #085d47);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(11, 122, 95, 0.3);
}

.update-date {
  color: #6b6b6b;
  font-size: 14px;
  font-weight: 500;
}

.update-item h3 {
  color: var(--accent);
  margin: 0 0 20px 0;
  font-size: 24px;
  font-weight: 700;
}

.update-content h4 {
  color: #2b5150;
  margin: 24px 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

.update-content ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px 0;
}

.update-content li {
  padding: 10px 0 10px 32px;
  position: relative;
  color: #555;
  line-height: 1.7;
}

.update-content li::before {
  content: "✓";
  position: absolute;
  left: 8px;
  color: var(--accent);
  font-weight: bold;
  font-size: 16px;
}

.update-content code {
  background: #eef6f3;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #0b7a5f;
}

@media (max-width: 768px) {
  .whats-new-section {
    margin: 48px 0;
    padding: 24px 12px;
  }
  
  .update-item {
    padding: 24px;
  }
  
  .update-item h3 {
    font-size: 20px;
  }
  
  .update-content h4 {
    font-size: 16px;
  }
}

/* Floating Chat Widget Styles */
.floating-chat-button {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0b7a5f, #085d47);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(11, 122, 95, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  z-index: 1000;
  border: none;
  animation: pulse-chat 2s infinite;
}

.floating-chat-button:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(11, 122, 95, 0.5);
}

.floating-chat-button svg {
  width: 32px;
  height: 32px;
  fill: white;
}

.chat-widget-container {
  position: fixed;
  bottom: 110px;
  right: 32px;
  width: 380px;
  max-width: calc(100vw - 64px);
  background: white;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: none;
  flex-direction: column;
  max-height: 600px;
  animation: slideInUp 0.3s ease-out;
}

.chat-widget-container.active {
  display: flex;
}

.chat-widget-header {
  background: linear-gradient(135deg, #0b7a5f, #085d47);
  color: white;
  padding: 20px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-widget-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.chat-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.chat-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.chat-widget-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.chat-form-group {
  margin-bottom: 16px;
}

.chat-form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}

.chat-form-group input,
.chat-form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid rgba(11, 122, 95, 0.2);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s;
}

.chat-form-group input:focus,
.chat-form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 122, 95, 0.1);
}

.chat-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.chat-submit-btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #0b7a5f, #085d47);
  color: white;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.chat-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 122, 95, 0.3);
}

.chat-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-alert {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.chat-alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.chat-alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@keyframes pulse-chat {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(11, 122, 95, 0.4);
  }
  50% {
    box-shadow: 0 8px 24px rgba(11, 122, 95, 0.4), 0 0 0 10px rgba(11, 122, 95, 0.1);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .floating-chat-button {
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
  }
  
  .floating-chat-button svg {
    width: 28px;
    height: 28px;
  }
  
  .chat-widget-container {
    bottom: 90px;
    right: 24px;
    width: calc(100vw - 48px);
    max-height: 500px;
  }
}