:root{
  --primary:#007bff;
  --primary-dk:#0056b3;
  --accent:#ff4757;
  --success:#2ed573;
  --pink:#ff69b4;
  --purple:#9b59b6;
  --orange:#ff6348;

  --bg:#f8f9fa;
  --surface:#fff;
  --surface-soft:#f1f5f9;
  --text:#2d3436;
  --text-muted:#636e72;
  --text-light:#dbeafe;

  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 10px 35px rgba(0,0,0,.15);

  --radius:20px;
  --radius-sm:10px;
  --radius-pill:50px;

  --border:1px solid #e9ecef;
  --content:1400px;
}

*,
*:before,
*:after{
  box-sizing:border-box;
  margin:0;
  padding:0
}

html{
  scroll-behavior:smooth
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility
}

a{
  color:inherit
}

img{
  max-width:100%;
  height:auto
}

button,
input,
select,
textarea{
  font:inherit
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto
}

.skip-link:focus{
  left:16px;
  top:16px;
  z-index:999;
  background:#fff;
  color:#000;
  padding:10px 14px;
  border-radius:8px;
  box-shadow:var(--shadow-sm)
}

:focus-visible{
  outline:3px solid rgba(0,123,255,.28);
  outline-offset:3px;
  border-radius:8px
}

.container{
  max-width:var(--content);
  margin:0 auto;
  padding:0 24px
}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:99;
  background:rgba(15,15,35,.92);
  backdrop-filter:blur(12px);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)
}

.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-top:14px;
  padding-bottom:14px
}

.brand{
  font-weight:900;
  text-decoration:none;
  letter-spacing:.02em;
  white-space:nowrap
}

.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem 1rem;
  align-items:center;
  justify-content:flex-end
}

.nav-links a{
  color:var(--text-light);
  text-decoration:none;
  font-weight:600;
  padding:.45rem .7rem;
  border-radius:999px;
  transition:background-color .25s ease,color .25s ease,transform .25s ease
}

.nav-links a:hover,
.nav-links a:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.08)
}

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 25%,var(--pink) 50%,var(--purple) 75%,var(--orange) 100%);
  color:#fff;
  padding:clamp(45px,14vw,90px) 20px 70px;
  text-align:center;
  position:relative;
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%)
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 90%,rgba(255,255,255,.25) 0,transparent 40%),
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.2) 0,transparent 40%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.1) 0,transparent 60%);
  pointer-events:none
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:920px;
  margin:0 auto
}

.hero h1{
  font-size:clamp(2rem,7vw,3.8rem);
  font-weight:900;
  margin-bottom:1.25rem;
  letter-spacing:-.03em;
  line-height:1.08;
  text-shadow:0 4px 20px rgba(0,0,0,.3)
}

.hero p{
  font-size:clamp(1.05rem,4.5vw,1.35rem);
  margin-bottom:2rem;
  opacity:.97
}

.hero-actions,
.cta-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem
}

/* Sections */
.keywords-hero,
.features,
.detail-sections,
.legal-card{
  background:linear-gradient(135deg,var(--surface) 0%,#fdfdfd 100%);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  border:var(--border)
}

.keywords-hero{
  margin:clamp(-30px,-6vw,-40px) auto 50px;
  padding:2.5rem 2rem;
  position:relative;
  overflow:hidden
}

.keywords-hero:after{
  content:"";
  position:absolute;
  top:-50%;
  right:-20%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(0,123,255,.05) 0,transparent 70%);
  pointer-events:none
}

.section-title,
.keywords-hero h2{
  text-align:center;
  font-size:clamp(1.5rem,6vw,2.25rem);
  margin-bottom:2rem;
  background:linear-gradient(135deg,var(--primary),var(--accent),var(--pink),var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.keywords-grid,
.chat-grid,
.features-grid,
.info-grid{
  display:grid;
  gap:1.25rem
}

.keywords-grid{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  position:relative;
  z-index:2
}

.chat-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-bottom:4rem
}

.features-grid,
.info-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
}

/* Interactive */
.keyword-tag,
.btn-chat,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  text-decoration:none;
  border-radius:var(--radius-pill);
  font-weight:800;
  transition:all .35s cubic-bezier(.4,0,.2,1)
}

.keyword-tag{
  padding:1.1rem 1.3rem;
  color:#fff;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 6px 20px rgba(0,0,0,.15)
}

.keyword-tag:hover,
.keyword-tag:focus-visible{
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 20px 45px rgba(0,0,0,.25)
}

.g1{background:linear-gradient(135deg,#007bff,#9b59b6)}
.g2{background:linear-gradient(135deg,#ff4757,#ff6348)}
.g3{background:linear-gradient(135deg,#ff69b4,#ff4757)}
.g4{background:linear-gradient(135deg,#2ed573,#007bff)}

/* Cards */
.chat-card,
.detail-card,
.feature-item,
.info-item,
.legal-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border:var(--border)
}

.chat-card,
.detail-card{
  padding:2.25rem;
  position:relative;
  overflow:hidden;
  border-top:8px solid var(--primary);
  transition:transform .3s ease,box-shadow .3s ease
}

.chat-card:before,
.detail-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--pink),var(--purple),var(--orange))
}

.chat-card:hover,
.detail-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md)
}

.detail-card + .detail-card{
  margin-top:1rem !important
}

.chat-label{
  font-size:.85rem;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  line-height:1.4
}

.chat-card h2,
.detail-card h1,
.legal-card h1{
  font-size:clamp(1.35rem,5vw,1.9rem);
  margin-bottom:1rem;
  line-height:1.3
}

.detail-card h2{
  font-size:clamp(1.15rem,3.2vw,1.45rem);
  margin-bottom:.95rem;
  line-height:1.3;
  color:var(--primary-dk)
}

.chat-meta,
.detail-meta{
  color:var(--text-muted);
  font-size:.95rem;
  font-weight:600;
  margin-bottom:1.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem
}

.chat-card p,
.detail-card p,
.legal-card p{
  margin-bottom:1.2rem;
  font-size:1.02rem;
  line-height:1.75;
  max-width:72ch
}

.detail-card p:last-child,
.legal-card p:last-child{
  margin-bottom:0
}

/* Buttons */
.btn-chat,
.btn-secondary{
  padding:1rem 1.6rem;
  color:#fff;
  font-size:1rem;
  border:0;
  cursor:pointer;
  min-height:48px
}

.btn-chat{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 8px 30px rgba(0,0,0,.18)
}

.btn-secondary{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35)
}

.btn-secondary.dark{
  background:#1f2937;
  color:#fff;
  border-color:#1f2937
}

.btn-chat:hover,
.btn-secondary:hover,
.btn-chat:focus-visible,
.btn-secondary:focus-visible{
  transform:translateY(-3px) scale(1.02)
}

/* Info blocks */
.features,
.detail-sections,
.legal-card{
  padding:3rem 2rem;
  margin:4rem 0
}

.feature-item,
.info-item{
  padding:2rem 1.5rem;
  background:linear-gradient(135deg,rgba(255,255,255,.9) 0%,var(--bg) 100%);
  border-radius:var(--radius);
  border:var(--border)
}

.feature-item strong,
.info-item strong,
.legal-card h2{
  display:block;
  font-size:1.15rem;
  margin-bottom:.8rem;
  color:var(--primary-dk)
}

/* Breadcrumbs */
.breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem;
  margin:2rem 0 1rem;
  padding:.9rem 1rem;
  color:var(--text-muted);
  font-size:.95rem;
  background:rgba(255,255,255,.8);
  border:var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm)
}

.breadcrumbs a{
  color:var(--primary-dk);
  text-decoration:none;
  font-weight:700
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible{
  text-decoration:underline
}

/* Lists inside detail cards */
.list{
  padding-left:1.25rem
}

.list li+li{
  margin-top:.65rem
}

.detail-card ul{
  padding-left:1.25rem;
  margin:0 0 1rem
}

.detail-card li{
  line-height:1.75;
  color:var(--text)
}

.detail-card li + li{
  margin-top:.55rem
}

/* Content links */
.detail-card a:not(.btn-chat):not(.btn-secondary),
.legal-card a:not(.btn-chat):not(.btn-secondary),
footer a{
  color:var(--primary-dk);
  text-decoration:underline;
  text-underline-offset:2px
}

/* FAQ / details */
.detail-card details{
  border-top:1px solid #edf2f7;
  padding-top:1rem;
  margin-top:1rem
}

.detail-card details:first-of-type{
  margin-top:.25rem
}

.detail-card summary{
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  list-style:none;
  position:relative;
  padding-right:1.75rem;
  line-height:1.5
}

.detail-card summary::-webkit-details-marker{
  display:none
}

.detail-card summary:after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
  color:var(--primary-dk);
  font-size:1.15rem;
  font-weight:900
}

.detail-card details[open] summary:after{
  content:"−"
}

.detail-card details p{
  margin-top:.85rem
}

/* Anchor offset for internal sections */
.detail-card[aria-labelledby],
section[id]{
  scroll-margin-top:90px
}

/* Footer */
footer{
  background:linear-gradient(135deg,#1a1a2e,#16213e,#0f0f23);
  color:#c0c8d0;
  text-align:center;
  padding:4rem 24px 3rem;
  position:relative
}

footer:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#4a5568,transparent)
}

footer a{
  color:#4dabf7;
  text-decoration:none;
  font-weight:600
}

footer p + p{
  margin-top:.5rem
}

/* Layout tuning */
@media (min-width:1400px){
  .chat-grid{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:1024px) and (max-width:1399px){
  .chat-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .topbar-inner{
    flex-direction:column;
    align-items:flex-start
  }

  .nav-links{
    width:100%;
    justify-content:flex-start
  }
}

@media (max-width:768px){
  .chat-grid,
  .features-grid,
  .info-grid{
    grid-template-columns:1fr
  }

  .container{
    padding:0 16px
  }

  .keywords-hero,
  .features,
  .detail-sections,
  .legal-card{
    padding:2rem 1.25rem
  }

  .chat-card,
  .detail-card{
    padding:1.4rem
  }

  .cta-row,
  .hero-actions{
    flex-direction:column;
    align-items:stretch
  }

  .btn-chat,
  .btn-secondary{
    width:100%
  }

  .breadcrumbs{
    font-size:.9rem;
    padding:.8rem .9rem
  }
}

@media (max-width:560px){
  .hero{
    clip-path:none;
    border-bottom-left-radius:24px;
    border-bottom-right-radius:24px
  }

  .chat-label{
    letter-spacing:.12em
  }

  .nav-links a{
    padding:.4rem .6rem
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
}