/* ====== Base ====== */
:root{
  --bg: #0b1020;
  --card: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.18);
  --text: #e6e9f0;
  --muted: #b8c0d9;
  --brand: #7A52F4;
  --brand-2:#54D2F9;
  --hot:#ff3fb0;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(0,0,0,0.35);
}

*{box-sizing:border-box; min-width:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, #1a2242 0%, transparent 60%),
    radial-gradient(1000px 800px at 90% 10%, #111a33 0%, transparent 60%),
    var(--bg);
  min-height:100vh;
  text-wrap:pretty;
}

.container{width:min(1200px, 92%);margin:0 auto;}

/* Background blobs */
#bg{position:fixed; inset:0; overflow:hidden; z-index:-2;}
.blob{position:absolute; filter: blur(80px); opacity:.5; transform: translateZ(0);}
.blob.b1{width:520px;height:520px; left:-120px; top:-120px; background:radial-gradient(circle at 30% 30%, var(--brand), transparent 60%);}
.blob.b2{width:480px;height:480px; right:-120px; top:20vh; background:radial-gradient(circle at 70% 40%, var(--brand-2), transparent 60%);}
.blob.b3{width:420px;height:420px; left:30vw; bottom:-160px; background:radial-gradient(circle at 50% 60%, #ff80bf, transparent 60%);}

/* Glassmorphism */
.glass{
  background: var(--card);
  border:1px solid var(--stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Glass fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .glass{
    background: rgba(18, 24, 48, 0.88);
    border-color: rgba(255,255,255,0.14);
  }
}


/* Header */
header{
  position:sticky; 
  top:0; 
  z-index:50; 
  padding:.8rem 0;
  padding-top: max(.8rem, env(safe-area-inset-top));
  background: rgba(11, 16, 32, 0.9);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
header.sticky{
  border-bottom-color: var(--stroke);
}
.nav{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:1rem;
  min-height:48px;
}
.logo{font-weight:800; letter-spacing:.3px; color:white; text-decoration:none; font-size:1.25rem;}
#nav{display:flex; gap:1.25rem; align-items:center;}
#nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:.6rem .8rem; border-radius:10px;}
#nav a:hover{color:var(--text); background:rgba(255,255,255,.06);}
#menu{
  display:none; 
  background:none; 
  border:none; 
  padding:.5rem; 
  cursor:pointer;
  flex-shrink:0;
}
#menu span{display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.15rem; border-radius:999px; font-weight:700; color:#0b1020; background:linear-gradient(135deg, var(--brand), var(--brand-2)); text-decoration:none; border:none; cursor:pointer}
.btn.small{padding:.55rem .9rem; font-size:.9rem}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--stroke)}

/* Hero */
#hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:2rem; align-items:center; padding:clamp(5rem, 8vw, 8rem) 0 5rem}
h1{font-size: clamp(2.2rem, 4.6vw, 4rem); line-height:1.05; margin:0;}
.gradient{background: linear-gradient(90deg, #a88eff, #54d2f9 40%, #7a52f4 80%); -webkit-background-clip:text; background-clip:text; color:transparent}
.subtitle{color:var(--muted); font-size: clamp(1rem, 1.6vw, 1.2rem); margin:.9rem 0 1.4rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap; margin:.6rem 0 1rem}
.badges{display:flex; gap:1rem; list-style:none; padding:0; margin:1rem 0 0; color:#cbd5e1; flex-wrap:wrap}
.badges li{padding:.45rem .8rem; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.04)}

/* Hero chat panel */
.hero-chat{padding:0; overflow:hidden; position:relative; isolation:isolate}
.hero-chat .intro{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:1.2rem; min-height:420px; position:relative}
.bot-icon{width:84px; height:84px; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(255,63,176,.35))}
.intro-text{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px}
.intro-text strong{font-size:1.05rem}
.intro-text span{color:#cbd5e1; font-size:.95rem}

/* Loader dots */
.loader{display:inline-flex; gap:6px; margin-top:.2rem}
.loader span{display:block; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg, #ff8bd6, #ff3fb0); opacity:.9; animation: pop 1.2s infinite ease-in-out}
.loader span:nth-child(2){animation-delay:.15s}
.loader span:nth-child(3){animation-delay:.3s}
@keyframes pop{0%,80%,100%{transform:scale(.8); opacity:.6}40%{transform:scale(1.2); opacity:1}}

/* Lightning aura (gentle looping) */
.aura{position:absolute; inset:-2px; pointer-events:none; border-radius:inherit; overflow:hidden}
.aura::before{
  content:""; position:absolute; inset:-100px; background:
  conic-gradient(from 0deg, transparent 0 30deg, rgba(255,63,176,.35) 40deg 60deg, transparent 70deg 360deg);
  animation: spin 8s linear infinite;
  filter: blur(26px);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Bolt sweep once */
.bolt{position:absolute; left:-40%; top:45%; width:180%; height:2px; background: linear-gradient(90deg, transparent, #ff3fb0, #ffd0ea, #ff3fb0, transparent);
  box-shadow: 0 0 24px rgba(255,63,176,.6);
  opacity:0; transform:skewY(-6deg);
}

/* Chatbase iframe wrapper */
.chatbase-wrap{position:relative; width:100%; height:clamp(420px, 65vh, 560px); border-radius: var(--radius); overflow:hidden}
#chatbaseFrame{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* Sections */
section{padding:4.5rem 0}
h2{font-size: clamp(1.6rem, 3vw, 2.3rem); margin:0 0 1rem}
.section-subtitle{color:var(--muted); margin:0 0 2rem}

.grid.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.card{padding:1.2rem}
.card h3{margin:.2rem 0 .5rem; font-size:1.15rem}
.bullets{margin:.7rem 0 0; padding-left:1.1rem; color:#cbd5e1; word-wrap:break-word}
.bullets li{margin:.25rem 0}
.bullets.tight{padding-left:1rem; margin:.4rem 0 0}

.grid.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.step{padding:1.4rem}
.step .num{font-weight:800; font-size:1.1rem; color:#9aa4bf; margin-bottom:.3rem}

/* Contact section */
.contact-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.4rem 1.6rem;
  padding:1.8rem 1.9rem 2rem;
  margin-top:1.8rem;
}

.contact-form .field{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-width:0;
}

.contact-form .field.full{
  grid-column:1 / -1;
}

.contact-form .actions{
  grid-column:1 / -1;
  margin-top:.4rem;
  display:flex;
  justify-content:flex-end;
}

label{color:#cbd5e1; font-size:.95rem}

input, textarea{
  background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  color:var(--text);
  border-radius:12px;
  padding:1rem 1.2rem;
  resize:vertical;
  width:100%;
  font:inherit;
  line-height:1.5;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.contact-form input,
.contact-form textarea{
  background:rgba(10,14,30,.85);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
}

input::placeholder, textarea::placeholder{color:#9aa4bf}

input:focus, textarea:focus{
  outline:none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 2px rgba(84,210,249,0.35), inset 0 1px 0 rgba(255,255,255,.06);
  background:rgba(255,255,255,.08);
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--brand-2);
  box-shadow: 0 0 0 1px rgba(84,210,249,0.35);
}

/* Spinner inside button (pink) – preserved */
.btn .spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#ffd0ea;
  border-right-color:#ff8bd6;
  border-left-color:#ff3fb0;
  display:none;
  animation: spin 0.8s linear infinite;
}
.btn.loading .spinner{display:inline-block}
.btn.loading .btn-text{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

.note{color:#86efac; margin:.7rem 0 0 .2rem; word-break:break-word}
.error{color:#ff9bbf; margin:.6rem 0 0 .2rem; opacity:1; transition: opacity .4s ease}

/* Footer */
.footer{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2rem 0; color:#9aa4bf; flex-wrap:wrap}
.footer .top{color:#9aa4bf; text-decoration:none}

/* Responsive - Tablet */
@media (max-width: 1100px){
  #hero{grid-template-columns:1fr; padding-top:7rem}
  .hero-chat{order:2}
  .hero-copy{order:1}
  .grid.cards{grid-template-columns:repeat(2,1fr)}
  .grid.steps{grid-template-columns:1fr}
}

/* Responsive - Mobile */
@media (max-width: 720px){
  /* Fixed mobile nav */
  #nav{
    position:fixed;
    top:calc(72px + env(safe-area-inset-top));
    left:0;
    right:0;
    max-height:0;
    overflow:hidden;
    padding:0 1rem;
    gap:.4rem;
    flex-direction:column;
    align-items:stretch;
    background:rgba(8,12,25,.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom:1px solid var(--stroke);
    transition: max-height .3s ease, padding .3s ease;
  }
  
  #nav.open{
    max-height:400px;
    padding:1rem;
  }
  
  #nav a{
    width:100%;
    text-align:left;
    display:block;
  }
  
  #menu{display:flex; flex-direction:column; align-items:center; justify-content:center;}

  /* Hero adjustments */
  #hero{
    padding-top:5rem;
    gap:2.5rem;
  }
  
  h1{
    font-size:clamp(1.8rem, 8vw, 2.4rem);
    line-height:1.1;
  }
  
  .subtitle{
    font-size:1rem;
    margin:.8rem 0 1.2rem;
  }
  
  .cta-row{
    gap:.7rem;
  }
  
  .badges{
    gap:.7rem;
    font-size:.9rem;
  }
  
  .badges li{
    padding:.4rem .7rem;
  }

  /* Contact form mobile */
  .contact-form{
    grid-template-columns:1fr;
    padding:1.6rem 1.2rem 1.8rem;
    gap:1.1rem;
  }

  .contact-form .actions{
    justify-content:stretch;
  }
  
  .contact-form .btn{
    width:100%;
    justify-content:center;
  }

  /* Cards mobile */
  .grid.cards{grid-template-columns:1fr; gap:1.2rem}
  .card{padding:1.4rem}
  
  /* Chat mobile */
  .hero-chat .intro{min-height:380px; padding:1rem}
  .chatbase-wrap{height:clamp(420px, 70vh, 560px)}
  
  /* Sections mobile */
  section{padding:3.5rem 0}
  
  /* Footer mobile */
  .footer{
    flex-direction:column;
    text-align:center;
    gap:.8rem;
  }
}

/* Very small screens */
@media (max-width: 380px){
  .container{width:90%}
  
  h1{font-size:1.75rem}
  
  .cta-row{
    flex-direction:column;
  }
  
  .cta-row .btn{
    width:100%;
    justify-content:center;
  }
  
  .badges{
    font-size:.85rem;
  }
  
  .contact-form{
    padding:1.4rem 1rem 1.6rem;
  }
}

/* Motion helpers */
.tilt{will-change: transform}
.reveal{opacity:0; transform: translateY(18px);}
.revealed{opacity:1; transform:none; transition: .6s cubic-bezier(.2,.7,.2,1)}

/* Focus */
:focus-visible{outline:2px solid #54d2f9; outline-offset:2px}

#menu:focus-visible{outline:2px solid #54d2f9; outline-offset:3px; border-radius:10px}

/* Prevent zoom on iOS when focusing inputs */
@media (max-width: 720px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}