/* style.css - iOS frosted glass theme (updated)
   - unified logo styles
   - improved WhatsApp-like widget
   - cleaned duplicates and responsive tweaks
*/

/* ---------- VARIABLES ---------- */
:root{
  --bg-1: linear-gradient(180deg,#f3f6fb 0%, #eef3fb 40%);
  --accent-a: rgba(84,120,255,0.96);   /* soft blue */
  --accent-b: rgba(88,210,200,0.95);   /* teal */
  --glass-1: rgba(255,255,255,0.7);
  --glass-2: rgba(255,255,255,0.55);
  --muted: #6b7280;
  --text: #0f1724;
  --shadow: 0 8px 30px rgba(10, 20, 40, 0.08);
  --radius-lg: 14px;
  --radius-md: 10px;
  --glass-border: rgba(255,255,255,0.6);
  --max-w: 1200px;

  /* WhatsApp-like */
  --wa-green: #25d366;
  --wa-light: #e6f7ee;  /* light green bubble */
  --wa-muted: #6c6c6c;
}

/* ---------- GLOBAL ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  color:var(--text);
  background: var(--bg-1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}

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

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(8px) saturate(110%);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  border-bottom: 1px solid rgba(20,30,40,0.04);
  transition: box-shadow .25s ease, background .25s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(8px) saturate(110%);
}
.site-header.scrolled{
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72));
}

/* header inner */
.header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
}

/* ---------- LOGO (UNIFIED) ----------
   Use .logo-img when you have the circular EV image.
   Use .logo-badge as fallback gradient box with EV letters.
*/
.logo{display:flex;align-items:center;gap:12px}

/* circular EV image (preferred) */
.logo-img {
  width:48px;
  height:48px;
  border-radius: 999px; /* perfect circle */
  object-fit:cover;
  display:block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border: 2px solid rgba(255,255,255,0.6);
}

/* fallback badge (text EV inside gradient rounded square) */
.logo-badge{
  width:44px;height:44px;border-radius:10px;
  background: linear-gradient(135deg,var(--accent-a),var(--accent-b));
  display:flex;align-items:center;justify-content:center;
  color:white;font-weight:700;box-shadow:0 6px 20px rgba(88,120,200,0.12);
  font-size:16px;
}

/* logo text (brand + tag) */
.logo-text{line-height:1}
.logo-text .brand{font-weight:700;font-size:16px;color:var(--text)}
.logo-text .tag{font-size:12px;color:var(--muted);margin-top:2px}

/* nav */
.nav{display:flex;gap:20px;margin-left:32px;flex:1;justify-content:center}
.nav-link{color:rgba(15,23,36,0.8);text-decoration:none;font-weight:600;opacity:0.9}
.nav-link:hover{text-decoration:underline;opacity:1}

/* header actions */
.header-cta{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:12px;padding:8px 14px;font-weight:600;text-decoration:none;
  transition:transform .15s ease, box-shadow .12s ease;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
  color:white;box-shadow:0 8px 30px rgba(88,120,220,0.12);
}
.btn-outline{
  background:transparent;border:1px solid rgba(15,23,36,0.06);padding:8px 12px;border-radius:10px;color:var(--text)
}
.btn-ghost{
  padding:8px 12px;border-radius:10px;background: linear-gradient(90deg, rgba(15,23,36,0.05), rgba(15,23,36,0.03));
  color:var(--text);
}

/* ---------- HERO ---------- */
.hero{
  padding:64px 0 48px;
  background: linear-gradient(180deg, rgba(127,156,255,0.03), rgba(88,210,200,0.02));
  position:relative;
  overflow:visible;
}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.hero-title{
  font-size:44px;font-weight:800;margin:0 0 16px;line-height:1.02;
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:var(--muted);font-size:16px;margin:0 0 20px;max-width:620px}

.hero-actions{display:flex;gap:12px;margin-bottom:18px}
.hero-bullets{list-style:disc;margin:10px 0 0 18px;color:var(--muted)}
.hero-bullets li{margin:6px 0;font-size:14px}

/* mockup card (right column) */
.mockup-card{
  width:100%;max-width:420px;border-radius:18px;padding:20px;background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.62));
  box-shadow: 0 12px 60px rgba(20,30,50,0.06);border:1px solid rgba(20,30,40,0.04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mockup-header{font-weight:700;margin-bottom:10px;color:#374151}
.reminder-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.reminder-list li{background:rgba(10,20,30,0.02);padding:10px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#111}

/* ---------- SECTIONS ---------- */
.section{padding:56px 0}
.light-section{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));border-top:1px solid rgba(20,30,40,0.02)}

/* titles */
.section-title{font-size:28px;margin:0 0 10px;font-weight:800}
.section-sub{color:var(--muted);margin:0 0 22px;max-width:720px}
.section-subtitle{margin-top:18px}

/* cards grid */
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.glass-card{
  background: linear-gradient(180deg,var(--glass-2), rgba(255,255,255,0.6));
  border-radius:var(--radius-md);padding:22px;box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(8px);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.glass-card:hover{transform:translateY(-8px);box-shadow: 0 22px 60px rgba(10,20,40,0.12)}
.glass-card .card-icon{font-size:28px;width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.25));display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.glass-card h3{margin:0 0 8px;font-size:16px}
.glass-card p{margin:0;color:var(--muted);font-size:14px}

/* small cards */
.glass-card.small{padding:18px}
.cards-grid .small .card-icon{font-size:22px;width:48px;height:48px}

/* how grid */
.how-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.how-list{padding-left:18px;color:var(--text);line-height:1.7}
.glass-aside{background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));padding:18px;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(20,30,40,0.02)}

/* chips */
.chips{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.chip{
  background: rgba(255,255,255,0.82);padding:10px 14px;border-radius:999px;border:1px solid rgba(20,30,40,0.03);
  box-shadow: 0 6px 18px rgba(20,30,40,0.03);font-weight:600;color:#263042
}

/* pricing grid */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.price-card{position:relative;padding:22px}
.price-card .badge{
  position:absolute;left:18px;top:-10px;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;box-shadow:0 10px 30px rgba(88,120,220,0.12)
}
.price{font-size:28px;font-weight:800;margin:8px 0}
.price .per{font-size:14px;font-weight:600;color:var(--muted)}
.price-list{margin:12px 0 18px;padding-left:18px;color:var(--muted)}

/* faq grid */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:12px}
.faq-card h4{margin:0 0 10px}

/* contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.footer-actions{display:flex;gap:10px;margin-top:18px}
.link-ghost{color:var(--accent-a);text-decoration:underline}

/* footer */
.site-footer{padding:28px 0;background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-left{display:flex;align-items:center;gap:12px}
.small-link{margin-left:18px;color:var(--muted);text-decoration:none}

/* smaller screens */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .header-inner{justify-content:space-between}
}

/* mobile */
@media (max-width:560px){
  .container{width:94%}
  .hero-title{font-size:30px}
  .glass-card{padding:16px}
  .cards-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------
   WhatsApp-style widget (improved)
   - closer color/spacing to WhatsApp
   - circular avatar ring + subtle tail on bubbles
--------------------------------------------------- */
.wa-chat {
  background: #ffffff;
  border-radius: 18px;
  padding: 14px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  font-family: "Inter", sans-serif;
  border: 1px solid rgba(20,30,40,0.03);
}

/* Header like WhatsApp */
.wa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* avatar - circular with thin ring */
.wa-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 6px 18px rgba(0,0,0,0.06);
  border: 2px solid rgba(0,0,0,0.03);
}

/* name + status */
.wa-name {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
}
.wa-status {
  font-size: 12px;
  color: var(--wa-green); /* WhatsApp green */
}

/* Message bubble — left aligned blocks */
.wa-bubble {
  background: var(--wa-light);              /* light greenish */
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  position: relative;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
}

/* bubble tail (subtle) */
.wa-bubble::after{
  content: "";
  position: absolute;
  left: 12px;
  bottom: -6px;
  width: 12px;
  height: 10px;
  background: var(--wa-light);
  transform: rotate(40deg);
  border-radius: 2px;
  filter: blur(.3px);
  z-index:0;
}

/* bubble text */
.wa-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #0b1020;
}
.wa-time {
  font-size: 12px;
  color: var(--wa-muted);
  margin: 0;
}

/* small helper to ensure header spacing inside mockup-right */
.wa-header .meta {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- EVOKE logo premium styling (used in mockups/footer) ---------- */
.evoke-logo {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  margin-right: 12px;
  border: 2px solid rgba(255,255,255,0.6);
  transition: transform .25s ease, box-shadow .25s ease;
}
.evoke-logo:hover{ transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }

/* Mobile scaling for logo */
@media (max-width: 768px) {
  .evoke-logo {
    height: 40px;
    width: 40px;
    margin-right: 10px;
  }
}

/* Smooth appearance animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.logo-img, .logo-badge, .evoke-logo { animation: fadeIn .45s ease-out both; }

/* Footer logo (smaller) */
.footer-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border: 1px solid rgba(255,255,255,0.6);
}

/* ---------------------------------------------
   RESPONSIVE: Mobile adjustments for header/logo
--------------------------------------------- */
@media (max-width: 600px) {
  .logo-img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .logo-text .brand {
    font-size: 18px;
  }

  .logo-text .tag {
    font-size: 11px;
  }

  .footer-logo-img {
    width: 28px;
    height: 28px;
  }

  .hero-title { font-size: 28px; }
}

/* Accessibility: prefer image logo if available, otherwise fallback badge */
.logo .logo-img{ display:block; }
.logo .logo-badge{ display:none; }
/* If you want to show the badge fallback when image isn't present,
   remove the rule above and place the image or badge as needed in HTML. */

/* small utilities */
.center { display:flex; align-items:center; justify-content:center; }
.muted { color:var(--muted); }

/* End of stylesheet */