/* =========================================================
   סגנון ראשי — דף נחיתה ליועץ עסקי (RTL)
   מבוסס משתני CSS לעדכון מהיר של צבעים ופונטים
   ========================================================= */

:root{
  /* צבעים */
  --primary: #0f1f3a;        /* כחול כהה */
  --primary-700:#10233f;
  --muted: #6b7280;          /* אפור טקסט */
  --bg: #ffffff;             /* לבן */
  --surface: #f6f8fb;        /* רקע בהיר */
  --border: #e5e7eb;

  /* צבע הדגשה: בחרו אחת והשתמשו בה */
  --accent: #1cc4c4;         /* טורקיז */
  /* --accent: #c7a15a; */   /* זהב (אלטרנטיבי) */

  /* טיפוגרפיה */
  --font: 'Heebo', system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  /* רדיוסים/צל */
  --radius: 14px;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.07);
  --shadow-md: 0 12px 30px rgba(0,0,0,.10);

  /* גדלים */
  --container: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--primary);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* קישורי דילוג לנגישות */
.skip-link{
  position:absolute; inset-inline-start:10px; top:-40px;
  background:#000; color:#fff; padding:.5rem .75rem; z-index:1000;
  border-radius:8px; text-decoration:none; transition:top .2s;
}
.skip-link:focus{top:10px}

/* מיכל סטנדרטי */
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}

/* === HEADER === */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent; transition: box-shadow .2s, border-color .2s, background .2s;
}
.site-header.is-sticky{
  box-shadow:var(--shadow-sm);
  border-color:var(--border);
  background:#fff;
}

.header-grid{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; padding:14px 0;
}

/* לוגו */
.logo-text{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--primary)}
.logo-mark{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg, var(--primary), var(--primary-700));
  color:#fff; font-weight:800; letter-spacing:.5px;
}
.logo-name{font-weight:800; font-size:18px}
.logo-name .accent{color:var(--accent)}

/* ניווט */
.primary-nav{display:flex; align-items:center; gap:18px}
.nav-list{display:flex; gap:12px; list-style:none; margin:0; padding:0}
.nav-list a{
  display:inline-flex; align-items:center; height:44px; padding-inline:14px;
  color:var(--primary); text-decoration:none; border-radius:10px; font-weight:600;
}
.nav-list a:hover{background:var(--surface)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:44px; padding:0 16px; border-radius:12px; border:1px solid transparent;
  font-weight:700; text-decoration:none; cursor:pointer; transition:transform .06s ease, box-shadow .2s, background .2s, color .2s, border-color .2s;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#042; border-color:transparent}
.btn-primary:hover{box-shadow:var(--shadow-sm)}
.btn-outline{background:#fff; color:var(--primary); border-color:var(--border)}
.btn-outline:hover{border-color:var(--accent); color:var(--primary)}
.btn-cta{
  background:linear-gradient(135deg, var(--accent), #7de1e1);
  color:#053; font-weight:800; padding-inline:18px;
}
.btn-cta:hover{box-shadow:var(--shadow-sm)}
.btn.full{width:100%}

/* כפתור המבורגר */
.nav-toggle{
  display:none; position:relative; width:44px; height:44px; border:0; background:#fff; border-radius:10px; box-shadow:var(--shadow-sm); cursor:pointer;
}
.nav-toggle .bar{position:absolute; inset-inline:10px; height:2px; background:var(--primary); transition:.2s}
.nav-toggle .bar:nth-child(1){top:14px}
.nav-toggle .bar:nth-child(2){top:21px}
.nav-toggle .bar:nth-child(3){top:28px}
.nav-open .nav-toggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle .bar:nth-child(2){opacity:0}
.nav-open .nav-toggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* === HERO === */
.hero{
  position:relative; min-height:72vh; display:grid; align-items:center; overflow:hidden;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(28,196,196,.15), transparent 60%);
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(95%) contrast(1.05); transform:scale(1.02);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,.95) 60%, #fff 100%);
}
.hero-inner{position:relative; z-index:1; padding:72px 0}
.hero-content{max-width:800px}
.hero-title{
  font-size: clamp(28px, 4.2vw, 48px);
  line-height:1.15; margin:0 0 10px 0; font-weight:900;
}
.hero-subtitle{
  color:var(--muted); font-size:clamp(16px, 1.8vw, 20px); margin:0 0 24px 0;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

/* === SECTIONS === */
.section{padding:80px 0}
.section-title{font-size:clamp(24px, 3vw, 34px); margin:0 0 10px; font-weight:900}
.section-title.center{text-align:center}
.section-subtitle{
  color:var(--muted); margin:0 0 28px 0; font-weight:500;
}
.section-subtitle.center{text-align:center}

/* ABOUT */
.about-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:38px; align-items:center;
}
.about-media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-md)}
.about-list{list-style:none; padding:0; margin:18px 0 24px 0}
.about-list li{display:flex; align-items:center; gap:8px; margin:8px 0}
.about-list i{color:var(--accent)}

/* SERVICES */
.services{background:var(--surface)}
.cards-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:18px;
}
.cards-grid.three{grid-template-columns: repeat(3,1fr)}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-sm); transition:transform .08s ease, box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:transparent}
.card-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(28,196,196,.12); color:var(--accent); font-size:22px; margin-bottom:10px;
}
.card-title{margin:8px 0; font-size:20px; font-weight:800}
.card-text{color:var(--muted)}

/* CONTACT */
.contact-grid{
  display:grid; grid-template-columns:1.3fr .9fr; gap:24px; align-items:start;
}
.contact-form{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm);
}
.form-row{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
label{font-weight:700}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); outline:0; font-family:var(--font);
  transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(28,196,196,.12)}

/* BLOG TEASER */
.post .post-media{
  width:100%; aspect-ratio: 16/10; background-size:cover; background-position:center; border-radius:12px; margin-bottom:12px;
}

/* === FOOTER === */
.site-footer{background:var(--primary); color:#fff; margin-top:40px}
.footer-grid{
  display:grid; grid-template-columns: 1.2fr .7fr .9fr; gap:26px; padding:42px 0;
}
.footer-logo{color:#fff}
.footer-about{color:#d1d5db}
.footer-title{margin:0 0 10px; font-size:18px}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer-links a{color:#e5e7eb; text-decoration:none}
.footer-links a:hover{color:#fff}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.contact-list a{color:#e5e7eb; text-decoration:none}
.contact-list a:hover{color:#fff}
.social{display:flex; gap:10px; margin-top:10px}
.social a{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.06); color:#fff; text-decoration:none;
}
.social a:hover{background:rgba(255,255,255,.12)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:16px 0; text-align:center; color:#d1d5db;
}

/* === אנימציות הופעה עדינה === */
[data-animate="fade-in"]{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
.in-view{opacity:1 !important; transform:none !important}

/* === רספונסיביות === */
@media (max-width: 1024px){
  .cards-grid{grid-template-columns: repeat(2,1fr)}
  .cards-grid.three{grid-template-columns: repeat(2,1fr)}
  .about-grid{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns:1fr}
  .header-grid{grid-template-columns: auto 1fr auto}
  .primary-nav{gap:12px}
}

@media (max-width: 820px){
  .nav-toggle{display:inline-block}
  .primary-nav{
    position:fixed; inset-inline:0; top:64px; background:#fff; border-top:1px solid var(--border);
    transform:translateY(-20px); opacity:0; pointer-events:none;
    display:flex; flex-direction:column; gap:10px; padding:12px 16px;
    transition:opacity .2s, transform .2s;
  }
  .nav-open #primary-nav{transform:none; opacity:1; pointer-events:auto}
  .nav-list{flex-direction:column}
  .btn-cta{width:100%}
  .cards-grid{grid-template-columns:1fr}
  .cards-grid.three{grid-template-columns:1fr}
  .hero{min-height:64vh}
}

/* עזרי יישור */
.center{text-align:center}

/* פריסת ההדר */
.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto; /* לוגו | תפריט | אקשן/המבורגר */
  align-items: center;
  gap: 18px;
}

/* ניווט במרכז */
.primary-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

/* כפתור המבורגר תמיד בשמאל */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.desktop-only {
  display: inline-flex;
}

@media (max-width: 820px) {
  .desktop-only {
    display: none; /* לא להראות את ה-CTA במובייל */
  }
}
/* ==== HEADER LAYOUT FIX (RTL) ==== */
.header-grid{
  display:grid;
  grid-template-columns:auto 1fr auto; /* לוגו | תפריט | אקשן/המבורגר */
  align-items:center;
}

/* מיקומים ברורים ב-RTL */
.logo-wrap{ justify-self:start; }        /* start ב-RTL = ימין */
.primary-nav{ justify-self:center; }     /* תפריט במרכז */
.header-actions{
  justify-self:end;                      /* end ב-RTL = שמאל (קצה מוחלט) */
  display:flex; align-items:center; gap:10px;
  justify-content:flex-end;              /* לוודא שהכפתור נצמד לשמאל בתוך העמודה */
}

/* כפתור המבורגר גלוי בנייד ונצמד לשמאל */
.nav-toggle{ display:none; }
@media (max-width: 820px){
  .nav-toggle{ display:inline-block; }
  /* התפריט הנפתח נשאר כ-overlays, לא תופס מקום בגריד */
  .primary-nav{
    position:fixed; inset-inline:0; top:64px;
    opacity:0; pointer-events:none; transform:translateY(-20px);
  }
  .nav-open #primary-nav{
    opacity:1; pointer-events:auto; transform:none;
  }
}

/* אופציונלי: לצמצם ריפוד הקונטיינר כדי שההמבורגר יהיה ממש על הקצה בשמאל במסכים צרים */
@media (max-width: 480px){
  .container{ padding-inline:12px; }
}
/* =================================
   TESTIMONIALS - שיפורים (ללא תמונות)
   ================================= */

/* רקע האזור */
.testimonials {
    background-color: var(--surface);
}

/* כרטיסיית המלצה */
.testimonial-card {
    min-width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

/* אייקון מרכאות דקורטיבי */
.testimonial-card::before {
    content: '\f10d'; /* Font Awesome quote icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 50px;
    color: rgba(28, 196, 196, 0.1);
    transform: rotate(-10deg);
    z-index: 0;
}

/* החלק העליון של הכרטיסייה */
.testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* עיצוב עיגול ראשי התיבות */
.testimonial-initial {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--primary);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0; /* מונע מהעיגול להתכווץ */
}

.testimonial-meta {
    flex-grow: 1;
}

.testimonial-author {
    font-weight: 800;
    font-size: 18px;
    color: var(--primary);
    margin: 0;
}

.testimonial-company {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

/* דירוג כוכבים */
.testimonial-rating {
    font-size: 16px;
    color: #ffc107;
}

/* ציטוט ההמלצה */
.testimonial-card blockquote {
    margin: 0;
    padding: 0;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.6;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.testimonial-card blockquote p {
    margin: 0;
}

/* הסתרת המבנה הישן אם עדיין קיים בטעות */
.testimonial {
    display: none;
}
/* =======================================
   TESTIMONIALS - עיצוב בסגנון רשת חברתית
   ======================================= */

.testimonials-social {
    background-color: var(--surface);
    padding: 80px 0;
}

/* רשת ההמלצות */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 2rem;
}

/* עיצוב כרטיס ה"ציוץ" */
.tweet-card {
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation-delay: var(--animation-delay, 0ms); /* לאנימציית כניסה מדורגת */
}

.tweet-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* חלק עליון של הכרטיס */
.tweet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tweet-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tweet-author-initial {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.tweet-author-info {
    display: flex;
    flex-direction: column;
}

.tweet-author-name {
    font-weight: 700;
    color: #0F1419;
}

.tweet-author-handle {
    color: #536471;
}

.tweet-platform-icon {
    font-size: 22px;
    color: #536471;
}


/* גוף ההמלצה */
.tweet-body {
    font-size: 16px;
    line-height: 1.5;
    color: #0F1419;
    white-space: pre-wrap; /* שומר על מעברי שורה אם יש */
}

.tweet-body p {
    margin: 0;
}

.tweet-body .mention,
.tweet-body .hashtag {
    color: #1D9BF0; /* צבע כחול של טוויטר */
    cursor: pointer;
}

/* חלק תחתון של הכרטיס */
.tweet-footer {
    font-size: 14px;
    color: #536471;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tweet-stats i {
    margin-inline-end: 4px;
    color: #E91E63;
}

/* התאמה למובייל */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr; /* עמודה אחת במסכים קטנים */
    }
}

/* =========================================
   CONTACT — Pro Layout & Styling
   ========================================= */
:root{
  --whatsapp: #25D366;
  --card-bg: #fff;
}

.contact--pro{
  position: relative;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(28,196,196,.09), transparent 60%),
    linear-gradient(#fff, #fff);
}

.contact-head{ margin-bottom: 18px; }

.contact-wrap{
  display:grid;
  grid-template-columns: 1.2fr .9fr; /* טופס גדול, צד מידע קטן יותר */
  gap: 24px;
  align-items: start;
}

/* ----- כרטיס טופס ----- */
.contact-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.contact-card__title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px; font-size:18px; font-weight:800;
}
.contact-card__title i{ color: var(--accent); }

/* טופס משודרג */
.contact-form.pro .input-row{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.contact-form.pro .input-group{
  position:relative; display:flex; flex-direction:column; gap:8px; margin-bottom:14px;
}
.contact-form.pro label{ font-weight:700; }
.contact-form.pro .input-icon{
  position:absolute; inset-inline-end:12px; top: 40px; /* יושב מעל האינפוט */
  width:22px; height:22px; display:grid; place-items:center; color:#9aa3af;
  pointer-events:none;
}
.contact-form.pro input,
.contact-form.pro textarea{
  width:100%; padding:12px 42px 12px 14px; /* מקום לאייקון */
  border:1px solid var(--border); border-radius:12px; outline:0; font-family:var(--font);
  transition: border-color .15s, box-shadow .15s;
  background:#fff;
}
.contact-form.pro input:focus,
.contact-form.pro textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28,196,196,.12);
}

/* העדפת יצירת קשר — pills */
.label-inline{ font-weight:700; }
.option-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border:1px solid var(--border); border-radius:999px; cursor:pointer;
  user-select:none; font-weight:700; color:var(--primary);
}
.pill input{ display:none; }
.pill i{ opacity:.8; }
.pill:has(input:checked){
  background: rgba(28,196,196,.10);
  border-color: var(--accent);
  color:#063;
}
.form-note{ color:#6b7280; font-size:13px; margin-top:8px; }

/* ----- עמודת צד ----- */
.contact-side{ display:grid; gap:12px; }

/* כרטיסי "יצירת קשר מהירה" */
.quick-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:12px; padding:14px; border:1px solid var(--border); border-radius:14px;
  background:#fff; text-decoration:none; color:var(--primary);
  transition: box-shadow .2s, transform .06s, border-color .2s;
  box-shadow: var(--shadow-sm);
}
.quick-card:hover{ box-shadow: var(--shadow-md); border-color: transparent; transform: translateY(-1px); }
.q-icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:18px;
  background: var(--surface); color: var(--primary);
}
.quick-card.whatsapp .q-icon{ background: rgba(37,211,102,.12); color: var(--whatsapp); }
.quick-card.phone .q-icon{ background: rgba(28,196,196,.12); color: var(--accent); }
.quick-card.email .q-icon{ background: rgba(16,35,63,.12); color: var(--primary); }
.q-content strong{ display:block; font-weight:800; }
.q-content span{ color:#6b7280; font-size:14px; }
.q-arrow{ color:#9aa3af; }

/* בלוקים של מידע */
.info-slab{
  border:1px solid var(--border); border-radius:14px; background:#fff; padding:16px; box-shadow: var(--shadow-sm);
}
.info-slab h4{ margin:0 0 8px; font-size:16px; display:flex; align-items:center; gap:8px; }
.info-slab p{ margin:0; color:#4b5563; }
.hours{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.hours li{ display:flex; align-items:center; justify-content:space-between; color:#4b5563; }

/* מפה — placeholder */
.map-placeholder{
  margin-top:10px; border:1px dashed var(--border); border-radius:12px; overflow:hidden;
  background: linear-gradient(135deg, #eef2f7 0%, #f8fafc 100%); height:160px; position:relative;
}
.map-grid{
  position:absolute; inset:0; background-image:
    linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ====== רספונסיביות ====== */
@media (max-width: 980px){
  .contact-wrap{ grid-template-columns: 1fr; }
  .contact-form.pro .input-row{ grid-template-columns: 1fr; }
}
/* =========================================
   INSIGHTS / BLOG — Premium Showcase
   ========================================= */
.insights{
  position: relative;
  background:
    radial-gradient(900px 380px at 80% -10%, rgba(28,196,196,.10), transparent 60%),
    linear-gradient(#fff, #fff);
}
.insights::before{
  /* נגיעת עומק עדינה */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background: radial-gradient(600px 220px at 10% 10%, rgba(15,31,58,.06), transparent 60%);
}
.insights-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px;
}
.insights-cta{ white-space:nowrap; }

/* Grid */
.insights-grid{
  display:grid; grid-template-columns: 1.6fr .9fr; gap:18px; align-items:stretch;
}

/* ---------- Featured ---------- */
.featured{
  position:relative; overflow:hidden; border-radius:18px; isolation:isolate;
  border:1px solid var(--border); box-shadow:var(--shadow-sm); background:#000;
}
.featured-media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04); transition: transform .5s ease, filter .5s ease; filter: saturate(105%) contrast(1.06);
}
.featured::after{
  /* שכבת גרדיאנט לטקסט קריא */
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 10%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 80%);
  z-index:0;
}
.featured-body{
  position:relative; z-index:1; color:#fff; padding:22px; display:grid; gap:10px;
  align-content:end; min-height:340px;
}
.featured .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#e5e7eb; font-size:14px;}
.featured .dot{width:6px; height:6px; border-radius:50%; background:#e5e7eb; opacity:.7}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid rgba(255,255,255,.3); border-radius:999px; font-weight:700;
  background: rgba(0,0,0,.25); color:#fff;
}
.pill--accent{ border-color: rgba(28,196,196,.45); background: rgba(28,196,196,.15); }

.featured-title{margin:0; font-size:clamp(22px, 2.6vw, 30px); font-weight:900; line-height:1.25;}
.featured-desc{margin:0 0 6px; color:#e8eef3;}
.featured .btn-primary{align-self:start}

.featured:hover .featured-media{ transform:scale(1.07); filter:saturate(110%) contrast(1.08); }

/* ---------- Side Stack ---------- */
.stack{ display:grid; gap:18px; }
.mini{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:14px; align-items:stretch;
  border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.mini:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.mini-media{
  border-start-start-radius:16px; border-end-start-radius:16px;
  background-size:cover; background-position:center; min-height:140px;
}
.mini-body{ padding:14px; display:grid; gap:6px; align-content:center; }
.mini .meta{display:flex; justify-content:space-between; align-items:center; color:#6b7280; font-size:14px;}
.mini-title{margin:0; font-size:18px; font-weight:800;}
.mini-desc{margin:0; color:#6b7280;}
.mini-link{ color:var(--accent); font-weight:800; text-decoration:none; }
.mini-link:hover{ text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .insights-grid{ grid-template-columns: 1fr; }
  .featured-body{ min-height:300px; }
  .mini{ grid-template-columns: 1fr; }
  .mini-media{ border-radius:16px 16px 0 0; min-height:160px; }
}
@media (max-width: 560px){
  .insights-head{ flex-direction:column; align-items:flex-start; gap:8px; }
}
/* =========================================================
   SECTIONS FOR WEBLITE DEMO
   ========================================================= */

/* Top Promo Banner */
.weblite-promo-banner {
    background: var(--primary);
    color: #e5e7eb;
    padding: 14px 0;
    border-bottom: 1px solid var(--primary-700);
}

.promo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
}

.promo-banner-inner i {
    font-size: 24px;
    color: var(--accent);
}

.promo-banner-text a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.promo-banner-text a:hover {
    color: var(--accent);
}

.promo-banner-text strong {
    color: #fff;
    margin-inline-end: 8px;
}

.btn.btn-banner {
    background: #fff;
    color: var(--primary);
    height: 40px;
    font-weight: 800;
    border: none;
}
.btn.btn-banner:hover {
    background: var(--surface);
    color: var(--primary);
}

/* Bottom CTA Section */
.weblite-cta-section {
    background: var(--surface);
    padding: 60px 0;
}

.weblite-logo-mark {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-700));
    color: #fff;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: .5px;
    margin: 0 auto 16px;
    box-shadow: var(--shadow-sm);
}

.weblite-cta-section .section-subtitle {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

.weblite-cta-section .btn-cta {
    font-size: 18px;
    height: 52px;
    padding: 0 28px;
    margin-top: 1rem;
}


/* Responsive adjustments for demo sections */
@media (max-width: 768px) {
    .promo-banner-inner {
        gap: 12px;
    }
    .promo-banner-text {
       line-height: 1.4;
    }
    .btn.btn-banner {
      flex-basis: 80%; /* Make button wider on mobile */
      margin-top: 8px;
    }
}