/* ===========================

   COMMON STYLES FOR EASYCORE PAGES

   Used by: index.html, easychat.html, demo-page.html

   =========================== */



/* Base Styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  background: #0b0b0b;

  color: #ffffff;

  line-height: 1.6;

}



/* Header */

header {

  background: radial-gradient(circle at top left, #1fa2ff, #0b0b0b 60%);

  padding: 80px 20px 60px;

  text-align: center;

}



header img {

  max-width: 260px;

  margin-bottom: 30px;

}



header h1 {

  font-size: 3rem;

  margin-bottom: 20px;

}



header p {

  font-size: 1.2rem;

  max-width: 800px;

  margin: 0 auto 10px;

  color: #cfd8dc;

}



header p.positioning {

  font-size: 1.3rem;

  margin-bottom: 20px;

}



/* Sections */

section {

  padding: 80px 20px;

  max-width: 1200px;

  margin: 0 auto;

}



h2 {

  font-size: 2.4rem;

  margin-bottom: 30px;

  text-align: center;

}



/* Grid Layout */

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 30px;

}



/* Cards */

.card {

  background: #141414;

  border-radius: 16px;

  padding: 30px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.4);

}



.card h3 {

  color: #4dd0e1;

  margin-bottom: 15px;

}



.card.wide {

  max-width: 900px;

  margin: 0 auto;

}



/* Mockups / Images */

.mockup {

  width: 100%;

  border-radius: 14px;

  margin-top: 15px;

  box-shadow: 0 14px 40px rgba(0,0,0,0.45);

  border: 1px solid rgba(255,255,255,0.06);

  cursor: zoom-in;

}



/* Highlight Section */

.highlight {

  background: linear-gradient(135deg, #1fa2ff, #12d8fa, #a6ffcb);

  color: #000;

  border-radius: 20px;

  padding: 50px 30px;

  text-align: center;

}



.highlight h2 {

  color: #000;

}



/* Call to Action Button */

.cta {

  margin-top: 30px;

  display: inline-block;

  background: #000;

  color: #4dd0e1;

  padding: 15px 35px;

  border-radius: 40px;

  font-weight: bold;

  text-decoration: none;

  transition: all 0.3s ease;

}



.cta:hover {

  background: #111;

  transform: translateY(-2px);

}



/* Try EasyQuote Button */

.try-easyquote-btn {

  margin-top: 30px;

  padding: 18px 40px;

  font-size: 1.2rem;

  font-weight: bold;

  color: #ffffff;

  background: linear-gradient(135deg, #1fa2ff, #12d8fa);

  border: none;

  border-radius: 50px;

  cursor: pointer;

  box-shadow: 0 8px 24px rgba(31, 162, 255, 0.4);

  transition: all 0.3s ease;

  font-family: inherit;

}



.try-easyquote-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 32px rgba(31, 162, 255, 0.6);

  background: linear-gradient(135deg, #12d8fa, #1fa2ff);

}



.try-easyquote-btn:active {

  transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(31, 162, 255, 0.5);

}



/* Footer */

footer {

  background: #000;

  padding: 40px 20px;

  text-align: center;

  color: #9e9e9e;

}



/* Lightbox */

.lightbox {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.85);

  z-index: 9999;

  align-items: center;

  justify-content: center;

  padding: 40px;

}



.lightbox.active {

  display: flex;

}



.lightbox img {

  max-width: 95%;

  max-height: 95%;

  border-radius: 16px;

  box-shadow: 0 30px 80px rgba(0,0,0,0.8);

}



/* Pricing Section */

.pricing-wrapper {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 30px;

  margin-top: 40px;

}



.plan-card {

  background: #111;

  border-radius: 16px;

  padding: 40px 30px;

  text-align: center;

  position: relative;

  transition: 0.3s ease;

  border: 1px solid rgba(255,255,255,0.06);

}



.plan-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 15px 40px rgba(0,0,0,0.5);

}



.plan-card h3 {

  font-size: 1.4rem;

  margin-bottom: 10px;

}



.chat-volume {

  color: #bbb;

  margin-bottom: 25px;

}



.price-block {

  margin-bottom: 25px;

}



.monthly {

  font-size: 2rem;

  font-weight: bold;

}



.monthly span {

  font-size: 0.9rem;

  font-weight: normal;

  color: #aaa;

}



.annual {

  display: block;

  margin-top: 8px;

  font-size: 0.9rem;

  color: #aaa;

}



.plan-btn {

  display: inline-block;

  background: #1fa2ff;

  color: #000;

  padding: 12px 25px;

  border-radius: 30px;

  text-decoration: none;

  font-weight: bold;

  transition: 0.3s ease;

}



.plan-btn:hover {

  background: #12d8fa;

}



.featured {

  border: 2px solid #1fa2ff;

  transform: scale(1.05);

}



.featured-label {

  position: absolute;

  top: -12px;

  right: 20px;

  background: #1fa2ff;

  color: #000;

  font-size: 0.75rem;

  padding: 5px 10px;

  border-radius: 20px;

  font-weight: bold;

}



.pricing-note {

  margin-top: 20px;

  font-weight: bold;

}



.trial {

  font-size: 1.2rem;

  margin-bottom: 20px;

}