:root{
  --bg-deep:#050810;
  --bg-surface:#0a0f1a;
  --bg-elevated:#111827;

  --coral-bright:#ff4d4d;
  --coral-mid:#e63946;
  --coral-dark:#991b1b;

  --cyan-bright:#00e5cc;
  --cyan-mid:#14b8a6;
  --cyan-glow:rgba(0,229,204,.4);

  --text-primary:#f0f4ff;
  --text-secondary:#8892b0;
  --text-muted:#5a6480;

  --border-subtle:rgba(136,146,176,.15);
  --border-accent:rgba(255,77,77,.3);

  --font-display:"Clash Display",system-ui,sans-serif;
  --font-body:"Satoshi",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

*,:before,:after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--coral-bright);color:var(--bg-deep)}

a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--cyan-bright)}

.stars{
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.8),transparent),
    radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 90px 40px,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 130px 80px,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 160px 120px,rgba(255,255,255,.7),transparent),
    radial-gradient(2px 2px at 200px 60px,rgba(0,229,204,.6),transparent),
    radial-gradient(1px 1px at 250px 150px,rgba(255,255,255,.5),transparent),
    radial-gradient(2px 2px at 300px 40px,rgba(255,77,77,.4),transparent);
  background-size:350px 200px;
  animation:twinkle 8s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes twinkle{0%{opacity:.4}to{opacity:.7}}

.nebula{
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%,rgba(255,77,77,.12),transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 30%,rgba(0,229,204,.08),transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 90%,rgba(255,77,77,.06),transparent 50%);
  pointer-events:none;
  z-index:0;
}

.container{
  position:relative;
  z-index:1;
  max-width:980px;
  margin:0 auto;
  padding:60px 24px 40px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.hero{text-align:center;margin-bottom:56px;animation:fadeInUp .8s ease-out}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.lobster-icon{width:100px;height:100px;margin:0 auto 24px;animation:float 4s ease-in-out infinite;cursor:default;transition:transform .3s ease}
.lobster-icon svg{width:100%;height:100%;filter:drop-shadow(0 0 20px rgba(255,77,77,.35));transition:filter .3s ease}
.lobster-icon .eye-glow{animation:blink 3s ease-in-out infinite}
.lobster-icon .antenna{animation:wiggle 2s ease-in-out infinite;transform-origin:center}
.lobster-icon .claw-left{animation:clawSnap 4s ease-in-out infinite;transform-origin:right center}
.lobster-icon .claw-right{animation:clawSnap 4s ease-in-out infinite .2s;transform-origin:left center}
@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes blink{0%,90%,to{opacity:1}95%{opacity:.3}}
@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes clawSnap{0%,85%,to{transform:rotate(0)}90%{transform:rotate(-8deg)}95%{transform:rotate(0)}}

.title{font-family:var(--font-display);font-size:clamp(3rem,10vw,4.5rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:10px}
.title-main{
  background:linear-gradient(135deg,var(--text-primary) 0%,var(--coral-bright) 50%,var(--cyan-bright) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientShift 6s ease infinite;
}
@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}

.tagline{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:500;
  color:var(--coral-bright);
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:20px;
  animation:fadeInUp .8s ease-out .15s both;
}

.description{font-size:1.1rem;color:var(--text-secondary);max-width:780px;margin:0 auto;line-height:1.7;animation:fadeInUp .8s ease-out .3s both}

.cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 auto 56px;max-width:980px;width:100%;animation:fadeInUp .8s ease-out .45s both}
@media(min-width:640px){.cta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.cta{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:26px 18px;
  min-height:170px;
  border-radius:16px;
  border:1px solid var(--border-subtle);
  background:#0a0f1a99;
  backdrop-filter:blur(12px);
  color:var(--text-primary);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.cta:hover{transform:translateY(-4px);border-color:var(--border-accent);box-shadow:0 12px 40px rgba(255,77,77,.15),inset 0 1px rgba(255,255,255,.05)}
.cta-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--coral-bright);transition:transform .25s ease}
.cta-icon svg{width:24px;height:24px}
.cta:hover .cta-icon{transform:scale(1.1);color:var(--cyan-bright)}
.cta-label{font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.01em}
.cta-meta{font-size:.85rem;color:var(--text-muted)}

.section{margin-bottom:56px;animation:fadeInUp .8s ease-out .6s both}
.section-header{text-align:center;margin-bottom:20px}
.section-title{font-family:var(--font-display);font-size:1.8rem;letter-spacing:-.02em;margin-bottom:8px}
.section-subtitle{color:var(--text-secondary);max-width:72ch;margin:0 auto}

.code-window{border-radius:16px;border:1px solid var(--border-subtle);background:#0a0f1ab3;backdrop-filter:blur(10px);overflow:hidden;max-width:980px;margin:0 auto}
.code-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.code-dots{display:flex;gap:6px}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-dot--red{background:#ff5f56}
.code-dot--yellow{background:#ffbd2e}
.code-dot--green{background:#27c93f}
.code-title{font-size:.85rem;color:var(--text-muted);justify-self:end}

.code-switches{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;min-width:0}
.switch{display:inline-flex;gap:6px;padding:4px;border:1px solid var(--border-subtle);border-radius:999px;background:rgba(255,255,255,.03)}
.switch-btn{appearance:none;border:0;background:transparent;color:var(--text-secondary);font-family:var(--font-display);font-size:.78rem;letter-spacing:0;padding:6px 10px;border-radius:999px;cursor:pointer;transition:all .2s ease}
.switch-btn:hover{color:var(--text-primary);background:rgba(255,255,255,.05)}
.switch-btn.is-active{color:var(--bg-deep);background:linear-gradient(135deg,var(--coral-bright),var(--coral-dark));box-shadow:0 6px 18px rgba(255,77,77,.25)}
.switch-btn:focus-visible{outline:2px solid var(--cyan-bright);outline-offset:2px}

.code-content{padding:16px 18px;font-family:var(--font-mono);font-size:.95rem;line-height:1.55;overflow:auto;white-space:pre}
.code-content code{color:var(--text-primary)}
.code-footnote{padding:0 18px 16px;color:var(--text-muted);font-size:.85rem}

.features{display:grid;grid-template-columns:1fr;gap:12px;max-width:960px;margin:0 auto}
@media(min-width:720px){.features{grid-template-columns:repeat(2,1fr)}}
.feature{padding:18px;border-radius:14px;border:1px solid var(--border-subtle);background:#0a0f1a99;backdrop-filter:blur(10px)}
.feature-title{font-family:var(--font-display);font-weight:600;margin-bottom:6px}
.feature-desc{color:var(--text-secondary)}


.integrations-row{max-width:980px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.integration-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--border-subtle);background:#0a0f1ab3;backdrop-filter:blur(10px);color:var(--text-secondary);transition:all .2s ease}
.integration-pill:hover{border-color:var(--border-accent);transform:translateY(-1px);color:var(--text-primary)}
.integration-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 16px rgba(255,255,255,.08)}
.integration-dot--whatsapp{background:#25D366}
.integration-dot--telegram{background:#229ED9}
.integration-dot--discord{background:#5865F2}
.integration-dot--imessage{background:#3cd070}
.integration-dot--slack{background:#e01e5a}
.integration-dot--gmail{background:#ea4335}
.integration-dot--google-calendar{background:#4285f4}
.integration-dot--webhooks{background:var(--cyan-mid)}
.pills{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:.9rem}

.testimonials{overflow:hidden;margin-left:-24px;margin-right:-24px;padding:0 24px}
.testimonials .section-header{padding:0 24px}
.testimonials-track{display:flex;flex-direction:column;gap:8px;margin-left:-24px;margin-right:-24px;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}
.testimonials-row{display:flex;gap:16px;width:max-content;padding:8px 0}
.row-1{animation:scroll-left 80s linear infinite}
.row-2{animation:scroll-right 90s linear infinite}
@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}
@keyframes scroll-right{0%{transform:translate(-50%)}to{transform:translate(0)}}

.testimonial-card{display:flex;align-items:flex-start;gap:12px;padding:16px;min-width:320px;max-width:400px;border-radius:12px;border:1px solid var(--border-subtle);background:#0a0f1ab3;backdrop-filter:blur(8px);color:var(--text-primary);transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.testimonial-card:hover{border-color:var(--coral-bright);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,77,77,.15)}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;border:2px solid var(--border-subtle);background:var(--bg-elevated)}
.testimonial-content{display:flex;flex-direction:column;gap:6px;min-width:0}
.testimonial-quote{font-size:.9rem;line-height:1.5;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.testimonial-author{font-size:.8rem;font-weight:600;color:var(--coral-bright)}

.footer{margin-top:auto;padding-top:40px;text-align:center;font-size:.9rem;color:var(--text-muted);animation:fadeInUp .8s ease-out .75s both}
.footer-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:16px;font-size:.95rem;flex-wrap:wrap}
.footer-separator{color:var(--text-muted)}

@media(max-width:480px){
  .container{padding:40px 16px 32px}
  .lobster-icon{width:80px;height:80px}
  .cta{padding:20px 12px}
  .cta-label{font-size:.9rem}
  .testimonials{margin-left:-16px;margin-right:-16px;padding:0 16px}
  .testimonials-track{margin-left:-16px;margin-right:-16px}
  .testimonial-card{min-width:280px;max-width:320px;padding:12px}
  .testimonial-avatar{width:36px;height:36px}
  .testimonial-quote{font-size:.85rem}
  .code-content{padding:12px 14px;font-size:.85rem}
  .code-switches{justify-content:center}
  .code-title{display:none}
}

@media(max-width:640px){.code-title{display:none}.code-switches{flex-wrap:wrap}}