:root{
  --bg: #05070f;
  --panel: #0f1628;
  --muted: #94a9c9;
  --text: #f5f7fb;
  --accent: #00ffff;
  --accent-2: #ff00ff;
  --accent-3: #00ff88;
  --accent-4: #ffaa00;
  --accent-5: #ff0080;
  --radius: 16px;
  --container: 1200px;
  --glass: rgba(255,255,255,0.08);
  --shadow: 0 20px 60px rgba(0,255,255,0.15);
  --shadow-lg: 0 30px 80px rgba(0,255,255,0.25);
  --gap: 24px;
  --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', 'Segoe UI', ui-sans-serif, system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #05070f 0%, #0f1628 50%, #1a0f2e 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  overflow-x:hidden;
}

/* utility container */
.container{
  width:90%;
  max-width:var(--container);
  margin:0 auto;
}

/* header / nav */
.site-header{padding:20px 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(5,7,15,0.8);border-bottom:1px solid rgba(0,255,255,0.2);position:sticky;top:0;z-index:1000;animation:slideDown 0.6s ease-out;box-shadow:0 10px 40px rgba(0,255,255,0.1);}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.nav{display:flex;align-items:center;gap:24px;justify-content:space-between}
.brand{font-weight:800;color:var(--text);text-decoration:none;font-size:1.4rem;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 20px rgba(0,255,255,0.3);}
.nav-list{display:flex;gap:8px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a, .nav-list button{
  color:var(--text);text-decoration:none;background:none;border:none;padding:10px 16px;border-radius:10px;cursor:pointer;font-size:0.95rem;font-weight:500;transition:all var(--transition);position:relative;
}
.nav-payment{
  background:linear-gradient(135deg,#667eea,#764ba2)!important;color:white!important;font-weight:600!important;padding:8px 14px!important;border-radius:8px!important;
}
.nav-list a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-5));transition:width var(--transition);}
.nav-list a:hover::after{width:100%}
.nav-list a:hover, .nav-list button:hover{background:linear-gradient(135deg,rgba(0,255,255,0.15),rgba(255,0,255,0.15));transform:translateY(-2px)}
.nav-toggle{display:none;border:none;background:transparent;color:var(--text);font-size:1.4rem;cursor:pointer;}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 0;position:relative;}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,255,255,0.2),rgba(255,0,255,0.1),transparent 70%);pointer-events:none;animation:float 20s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translate(0,0);}50%{transform:translate(50px,50px);}}
.hero-content{position:relative;z-index:2}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);margin:0 0 20px;font-weight:900;line-height:1.2;background:linear-gradient(90deg,var(--accent),var(--accent-5),var(--accent-2),var(--accent-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInUp 0.8s ease-out;text-shadow:0 0 30px rgba(0,255,255,0.3);}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
.lead{color:var(--muted);margin:0 0 32px;font-size:1.1rem;line-height:1.8;animation:fadeInUp 0.8s ease-out 0.1s both;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;animation:fadeInUp 0.8s ease-out 0.2s both;}
.hero-cta .btn{margin-right:0}
.hero-visual{position:relative;z-index:2;animation:fadeInUp 0.8s ease-out 0.3s both;}
.hero-svg{width:100%;height:auto;border-radius:20px;box-shadow:var(--shadow-lg);border:2px solid rgba(0,255,255,0.3);filter:drop-shadow(0 0 30px rgba(0,255,255,0.4));}

/* sections */
.section{padding:80px 0;position:relative;}
.section:nth-child(even)::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,255,0.4),rgba(255,0,255,0.3),transparent);}
.section-title{margin:0 0 12px;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 20px rgba(0,255,255,0.2);}
.section-sub{margin:0 0 40px;color:var(--muted);font-size:1.1rem;max-width:600px;}
.about-photo-wrap{display:flex;justify-content:flex-start;margin-bottom:20px;}
.about-photo{
  width:min(100%,300px);
  height:auto;
  border-radius:18px;
  border:1px solid rgba(0,255,255,0.28);
  box-shadow:0 18px 40px rgba(0,0,0,0.35), 0 0 24px rgba(0,255,255,0.18);
  object-fit:cover;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.about-photo:hover{
  transform:translateY(-3px) scale(1.01);
  border-color:rgba(0,255,255,0.5);
  box-shadow:0 24px 52px rgba(0,0,0,0.42), 0 0 30px rgba(0,255,255,0.24);
}

/* features */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.feature{background:linear-gradient(135deg,rgba(0,255,255,0.08),rgba(255,0,255,0.08));padding:32px;border-radius:16px;border:1.5px solid rgba(0,255,255,0.2);box-shadow:0 10px 40px rgba(0,255,255,0.15);transition:all var(--transition);position:relative;overflow:hidden;}
.feature::before{content:'';position:absolute;top:-50%;right:-50%;width:200px;height:200px;background:radial-gradient(circle,rgba(0,255,255,0.3),rgba(255,0,255,0.2),transparent);border-radius:50%;opacity:0;transition:opacity var(--transition);}
.feature:hover{transform:translateY(-10px);border-color:rgba(0,255,255,0.4);box-shadow:0 20px 60px rgba(0,255,255,0.3);}
.feature:hover::before{opacity:1;}
.feature-icon{font-size:2.5rem;margin-bottom:16px;filter:drop-shadow(0 0 12px rgba(0,255,255,0.6));text-shadow:0 0 15px rgba(255,0,255,0.3);}
.feature h3{color:var(--accent);font-weight:700;margin:0 0 10px;text-shadow:0 0 10px rgba(0,255,255,0.2);}
.feature p{color:var(--muted);margin:0;}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.gallery-item{display:block;border:none;padding:0;background:none;border-radius:16px;overflow:hidden;cursor:pointer;transition:all var(--transition);position:relative;border:2px solid rgba(0,255,255,0.2);}
.gallery-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,255,255,0.3),rgba(255,0,255,0.2));opacity:0;transition:opacity var(--transition);z-index:10;}
.gallery-item svg{display:block;width:100%;height:200px;object-fit:cover;transition:transform var(--transition);filter:brightness(0.95) saturate(1.1);}
.gallery-item:hover{transform:scale(1.05);border-color:rgba(0,255,255,0.6);box-shadow:0 20px 60px rgba(0,255,255,0.4);}
.gallery-item:hover::before{opacity:1;}
.gallery-item:hover svg{transform:scale(1.1);}

/* contact */
.contact-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.contact-info{display:flex;flex-direction:column;gap:24px;}
.info-item{display:flex;gap:20px;padding:20px;background:linear-gradient(135deg,rgba(0,255,255,0.08),rgba(255,0,255,0.08));border:1.5px solid rgba(0,255,255,0.2);border-radius:16px;transition:all var(--transition);}
.info-item:hover{border-color:rgba(0,255,255,0.4);background:linear-gradient(135deg,rgba(0,255,255,0.15),rgba(255,0,255,0.1));transform:translateX(10px);}
.info-icon{font-size:2rem;min-width:50px;filter:drop-shadow(0 0 8px rgba(0,255,255,0.4));}
.info-content h4{margin:0 0 8px;color:var(--accent);font-size:1.1rem;text-shadow:0 0 10px rgba(0,255,255,0.2);}
.info-content p{margin:0;color:var(--muted);}
.info-content a{color:var(--accent-3);text-decoration:none;font-weight:600;transition:all var(--transition);text-shadow:0 0 8px rgba(0,255,136,0.2);}
.info-content a:hover{color:var(--accent);text-decoration:underline;text-shadow:0 0 12px rgba(0,255,255,0.4);}
.contact-form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-weight:700;color:var(--text);font-size:0.95rem;}
.form-row input, .form-row textarea{
  padding:14px 16px;border-radius:12px;border:2px solid rgba(0,255,255,0.2);background:rgba(15,22,40,0.6);color:var(--text);font-family:inherit;font-size:0.95rem;transition:all var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.form-row input::placeholder, .form-row textarea::placeholder{color:rgba(255,255,255,0.3);}
.form-row input:focus, .form-row textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(15,22,40,0.9);box-shadow:0 0 20px rgba(0,255,255,0.3);
}
.form-row textarea{resize:vertical;min-height:140px;}
.field-error{color:#ff6b6b;font-size:0.85rem;height:18px;margin-top:2px;font-weight:600;}
.form-actions{display:flex;gap:12px;margin-top:8px;}
.form-status{padding:16px;border-radius:12px;background:rgba(0,255,255,0.1);border:1.5px solid var(--accent);color:var(--accent);text-align:center;font-weight:600;margin-top:8px;animation:slideUp 0.4s ease-out;box-shadow:0 0 20px rgba(0,255,255,0.2);}
@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.form-status.success{background:rgba(0,255,136,0.1);border-color:var(--accent-3);color:var(--accent-3);box-shadow:0 0 20px rgba(0,255,136,0.2);}
.form-status.error{background:rgba(255,100,150,0.1);border-color:#ff6480;color:#ff6480;box-shadow:0 0 20px rgba(255,100,150,0.2);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:14px 28px;font-weight:700;cursor:pointer;border:none;transition:all var(--transition);font-size:0.95rem;text-decoration:none;position:relative;overflow:hidden;}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transform:translateX(-100%);transition:transform var(--transition);}
.btn:hover::before{transform:translateX(100%);}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-5));color:#05070f;box-shadow:0 15px 40px rgba(0,255,255,0.4);transform:translateY(-2px);font-weight:800;}
.btn.primary:hover{box-shadow:0 20px 50px rgba(0,255,255,0.6);}
.btn.outline{background:transparent;border:2px solid var(--accent);color:var(--accent);}
.btn.outline:hover{background:rgba(0,255,255,0.15);border-color:var(--accent-2);color:var(--accent-2);box-shadow:0 10px 30px rgba(0,255,255,0.2);}
.btn-ghost{background:transparent;border:none;padding:10px 12px;border-radius:8px;transition:all var(--transition);}
.btn-ghost:hover{background:rgba(0,212,255,0.1);}

/* footer */
.site-footer{padding:60px 0 30px;background:linear-gradient(180deg,transparent,rgba(0,255,255,0.08));border-top:1.5px solid rgba(0,255,255,0.2);margin-top:80px;position:relative;box-shadow:0 -10px 40px rgba(0,255,255,0.1);}
.site-footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:200px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;margin-bottom:30px;}
.footer-section h5{margin:0 0 16px;color:var(--text);font-size:1.1rem;font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 15px rgba(0,255,255,0.2);}
.footer-section p{margin:0 0 10px;color:var(--muted);font-size:0.9rem;line-height:1.8;}
.footer-section a{color:var(--accent-3);text-decoration:none;font-size:0.9rem;transition:all var(--transition);font-weight:600;text-shadow:0 0 8px rgba(0,255,136,0.15);}
.footer-section a:hover{color:var(--accent);text-decoration:underline;text-shadow:0 0 12px rgba(0,255,255,0.3);}
.footer-section nav{display:flex;flex-direction:column;gap:10px;}
.footer-bottom{text-align:center;color:var(--muted);font-size:0.85rem;padding-top:20px;border-top:1px solid rgba(0,212,255,0.1);}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn 0.3s ease-out;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-panel{position:relative;z-index:10;background:linear-gradient(135deg,rgba(15,22,40,0.95),rgba(26,15,46,0.95));padding:24px;border-radius:20px;border:1.5px solid rgba(0,255,255,0.3);max-width:900px;width:94%;box-shadow:0 30px 80px rgba(0,255,255,0.4);animation:slideUp 0.4s ease-out;}
.modal-close{position:absolute;right:16px;top:16px;border:none;background:rgba(0,255,255,0.15);color:var(--accent);font-size:1.4rem;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(0,255,255,0.3);}
.modal-close:hover{background:rgba(0,255,255,0.25);transform:scale(1.1);box-shadow:0 0 20px rgba(0,255,255,0.4);}
.modal-body{display:flex;gap:24px;align-items:flex-start;}
.modal-image{flex:1;min-height:300px;display:flex;align-items:center;justify-content:center;background:rgba(0,255,255,0.08);border-radius:16px;border:1.5px solid rgba(0,255,255,0.2);}
.modal-image svg{width:100%;height:auto;border-radius:12px;}
.modal-meta{width:300px;}
.modal-meta h3{margin:0 0 12px;color:var(--accent);font-size:1.3rem;text-shadow:0 0 10px rgba(0,255,255,0.3);}
.modal-meta p{margin:0;color:var(--muted);line-height:1.6;}

/* Multi-page helpers & feature layout */
.features-list{display:flex;flex-direction:column;gap:48px;margin-top:24px;margin-bottom:24px}
.feature-block{padding:32px;background:linear-gradient(135deg,rgba(0,255,255,0.08),rgba(255,0,255,0.08));border:1.5px solid rgba(0,255,255,0.2);border-radius:16px;margin-bottom:24px;box-shadow:0 10px 30px rgba(0,255,255,0.1);}
.feature-block h2{margin:0 0 20px;color:var(--accent);font-size:1.3rem;font-weight:800;text-shadow:0 0 10px rgba(0,255,255,0.2);}
.features-grid .feature{min-height:140px;display:flex;flex-direction:column;justify-content:flex-start}
.page-intro{max-width:900px;margin-bottom:24px;color:var(--muted)}

/* responsive */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;gap:32px;}
  .hero-visual{order:1;}
  .contact-wrapper{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .nav-toggle{display:block}
  .nav-list{position:fixed;right:0;top:60px;flex-direction:column;background:linear-gradient(180deg,rgba(5,7,15,0.98),rgba(15,22,40,0.98));padding:16px;border-radius:0 0 0 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,255,255,0.2);border-top:none;border-right:none;display:none;min-width:200px;}
  .nav-list.open{display:flex;animation:slideInRight 0.3s ease-out;}
  @keyframes slideInRight{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .features-grid{grid-template-columns:1fr;}
  .form-actions{flex-direction:column;}
  .form-actions .btn{width:100%;}
}
@media (max-width:480px){
  .hero{padding:40px 0;}
  .hero h1{font-size:1.8rem;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .gallery-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .contact-info{gap:16px;}
  .info-item{flex-direction:column;padding:16px;}
}

/* light theme override (prefers-light or .light) */
:root.light{
  --bg: #f0f4f8;
  --panel: #fff;
  --text: #05070f;
  --muted: #64748b;
  --glass: rgba(0,255,255,0.05);
}
:root.light body{background:linear-gradient(135deg,#f0f4f8 0%,#e0f7ff 50%,#ffe8ff 100%);color:var(--text);}
:root.light .site-header{background:rgba(248,250,252,0.8);border-bottom-color:rgba(0,255,255,0.2);box-shadow:0 10px 30px rgba(0,255,255,0.1);}
:root.light .feature{background:linear-gradient(135deg,rgba(0,255,255,0.08),rgba(255,0,255,0.08));border-color:rgba(0,255,255,0.2);}
:root.light .contact-info{gap:20px;}
:root.light .info-item{background:linear-gradient(135deg,rgba(0,255,255,0.08),rgba(255,0,255,0.08));border-color:rgba(0,255,255,0.2);}
:root.light .form-row input, :root.light .form-row textarea{background:rgba(255,255,255,0.9);border-color:rgba(0,255,255,0.2);}
:root.light .form-row input:focus, :root.light .form-row textarea:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 20px rgba(0,255,255,0.15);}
/* focus styles */
a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(124,58,237,0.12);outline-offset:3px;}

/* gallery item placeholder */
.gallery-placeholder{
  padding: 18px;
  background: rgba(255,255,255,0.02);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* payment form hint text */
.payment-hint{
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

/* small niceties */
[hidden]{display:none !important}

/* AI Support Chat Styles - Enhanced */
.ai-support-section {
  background: linear-gradient(135deg, rgba(0, 255, 200, 0.12), rgba(255, 0, 200, 0.08));
  border: 1px solid rgba(0, 255, 200, 0.3);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 255, 200, 0.1);
}

.ai-header {
  margin-bottom: 20px;
  text-align: center;
}

.ai-header h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-header p {
  color: var(--muted);
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.ai-chat-container {
  background: linear-gradient(180deg, rgba(15, 22, 40, 0.8), rgba(25, 35, 60, 0.9));
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 450px;
  box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.05);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 8px;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 255, 255, 0.05);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.3), rgba(255, 0, 128, 0.3));
  border-radius: 3px;
  transition: background var(--transition);
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.5), rgba(255, 0, 128, 0.5));
}

.chat-message {
  margin-bottom: 12px;
  display: flex;
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.bot-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.message-content {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.bot-message .message-content {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(100, 200, 255, 0.1));
  border: 1px solid rgba(0, 255, 255, 0.25);
  color: var(--text);
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.1);
}

.user-message .message-content {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.message-content p {
  margin: 4px 0;
}

.message-content div {
  margin: 3px 0;
}

.message-content div:first-child {
  margin-top: 0;
}

.message-content div:last-child {
  margin-bottom: 0;
}

.chat-input-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.chat-input {
  flex: 1;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: all var(--transition);
  resize: none;
}

.chat-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  outline: none;
}

.chat-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.btn-send {
  padding: 11px 24px;
  background: linear-gradient(135deg, var(--accent), #00ff88);
  border: none;
  border-radius: 10px;
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

.btn-send:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 255, 255, 0.4);
}

.btn-send:active:not(:disabled) {
  transform: translateY(0);
}

.btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Suggestion Buttons */
.suggestions-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 0;
}

.suggestion-btn {
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(0, 255, 200, 0.2), rgba(100, 200, 255, 0.1));
  border: 1px solid rgba(0, 255, 200, 0.4);
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
  font-weight: 500;
}

.suggestion-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 200, 0.35), rgba(100, 200, 255, 0.2));
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
}

.suggestion-btn:active {
  transform: translateY(0);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.ai-support-section {
  grid-column: 1 / -1;
}

/* Premium room types page */
.room-types-page .section {
  padding-top: 72px;
}

.room-types-page .section-sub {
  max-width: 760px;
  color: #c9d6f0;
}

.room-types-page .gallery-grid {
  gap: 28px;
}

.room-types-page .room-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,255,255,0.08), rgba(255,0,153,0.06));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,255,255,0.12) inset;
  cursor: default;
}

.room-types-page .room-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(0,255,255,0.5);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 22px rgba(0,255,255,0.24);
}

.room-types-page .room-card::before {
  background: linear-gradient(145deg, rgba(0,255,255,0.2), rgba(255,0,140,0.18));
  opacity: 0.35;
}

.room-types-page .gallery-placeholder {
  height: 210px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffffff;
  background:
    radial-gradient(circle at 20% 15%, rgba(0,255,255,0.3), transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(255,0,153,0.24), transparent 45%),
    linear-gradient(135deg, rgba(8,14,28,0.95), rgba(18,28,52,0.92));
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.room-types-page .room-card-content {
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.04));
}

.room-types-page .room-price {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #64ffd2;
  text-shadow: 0 0 18px rgba(100,255,210,0.28);
}

.room-types-page .room-desc {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #d4deef;
}

@media (max-width: 768px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }

  .message-content {
    max-width: 90%;
  }

  .ai-chat-container {
    height: 350px;
  }
}