/* =========================================
   MOBILE HORIZONTAL SLIDER – HARD SNAP
========================================= */
@media (max-width: 900px){

  .grid3{
    display: flex !important;
    gap: 14px;
    overflow-x: scroll;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10vw;

    -webkit-overflow-scrolling: auto;
    overscroll-behavior-x: contain;

    padding-bottom: 12px;
  }

  .grid3::-webkit-scrollbar{
    display: none;
  }

  .grid3 > .card{
    flex: 0 0 85%;
    scroll-snap-align: center;
    scroll-snap-stop: always; /* 🔥 VERY IMPORTANT */
  }
}

    @media(min-width: 1024px){
  .avatar{
    aspect-ratio: 3 / 2;
  }
}

    /* === HERO PROFILE IMAGE (FIXED) === */
.avatar{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* same as thumbnails */
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
  background: rgba(255,255,255,.06);
}
.avatar img{
  width:100%;
  height:100% !important;
  object-fit:cover;
  object-position:center;
  display:block;
}

    /* === FORCE 16:9 THUMBNAILS (FINAL OVERRIDE) === */
.thumb{
  aspect-ratio: 16 / 9;
}

.thumb img{
  width:100%;
  height:100% !important;   /* 🔒 override global img rule */
  object-fit:cover;
  object-position:center;
}

    /* === UNIVERSAL 16:9 THUMBNAILS (1920x1080) === */
.thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* 🔥 1920x1080 */
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}

/* Image behavior */
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;              /* crop correctly */
  object-position:center;
  display:block;
}

   /* === Star rating badge (SAME background as Most Popular) === */
.rating-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  border-radius:999px;

  /* same as .badge */
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);

  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

/* stars color only */
.rating-badge i{
  font-size:12px;
  color:#fbbf24;
}

/* rating number */
.rating-badge b{
  margin-left:4px;
  color:var(--ink);
  font-weight:800;
}


    /* === Card top row: badge left, rating right === */
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

/* Star rating */
.rating{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
  color:#fbbf24;
}

.rating span{
  margin-left:4px;
  color:rgba(234,242,255,.85);
  font-weight:700;
}

    /* === Name left, badge right (same as Tania Arora) === */
.profile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

    /* === DOT BADGES (EXACT LIKE FIRST IMAGE) === */

/* Blue expert badge */
.expert-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(56,189,248,.12);
  font-size:12px;
  font-weight:700;
  color:#eaf2ff;
}

.expert-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 0 6px rgba(56,189,248,.25);
}

/* Green dot chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.25);
  flex-shrink:0;
}

    
    
    
    /* DATE & TIME BUTTON — SAME AS PRIMARY */
.date-btn{
  border:none;
  background:linear-gradient(90deg,#ef4444,#dc2626);
  color:#fff;
  font-weight:700;
}

.date-btn i{
  opacity:.9;
}

    /* ===============================
   PREMIUM SUBSCRIPTION SECTION
================================ */

.sub-box{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:28px;
  border-radius:28px;
  padding:34px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(600px 320px at 20% 20%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(600px 320px at 80% 30%, rgba(34,197,94,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}

/* LEFT */
.sub-desc{
  color:var(--muted);
  max-width:56ch;
  line-height:1.7;
  margin-bottom:18px;
}

/* Feature boxes */
.sub-point-grid{
  display:grid;
  gap:12px;
  margin-top:10px;
}

.sub-point{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  font-size:14px;
  color:var(--muted);
  transition:.25s ease;
}

.sub-point i{
  color:#22c55e;
  font-size:16px;
  flex-shrink:0;
}

.sub-point:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.sub-warning{
  margin-top:14px;
  font-size:12.5px;
  color:rgba(234,242,255,.55);
}

/* RIGHT CARD */
.sub-card.premium{
  background:#ffffff;
  color:#081726;
  border-radius:26px;
  padding:30px 26px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.sub-icon{
  font-size:38px;
  color:#fbbf24;
  margin-bottom:6px;
}

.sub-card h3{
  margin:6px 0 4px;
  font-size:20px;
  font-weight:800;
}

.sub-note{
  font-size:14px;
  color:#475569;
  margin-bottom:18px;
}

/* Feature list */
.sub-features{
  list-style:none;
  padding:0;
  margin:0 0 20px;
  display:grid;
  gap:10px;
  font-size:14px;
  text-align:left;
}

.sub-features li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.sub-features i{
  color:#22c55e;
  font-size:15px;
  margin-top:2px;
}

/* CTA */
.sub-cta{
  margin-top:16px;
}

.sub-cta .btn{
  width:100%;
}

.sub-cta-note{
  margin-top:10px;
  font-size:12px;
  color:#64748b;
}

/* MOBILE */
@media(max-width:900px){
  .sub-box{
    grid-template-columns:1fr;
    padding:26px;
  }
}

    /* ===== Premium Subscription Section ===== */
.sub-box{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:28px;
  border-radius:28px;
  padding:34px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(600px 320px at 20% 20%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(600px 320px at 80% 30%, rgba(34,197,94,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}

.sub-left h2{
  margin:0 0 12px;
  font-size:32px;
  letter-spacing:-.5px;
}

.sub-desc{
  color:var(--muted);
  max-width:54ch;
  line-height:1.65;
  margin-bottom:18px;
}

.sub-points{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
  color:var(--muted);
  font-size:14px;
}

.sub-points li{
  display:flex;
  gap:10px;
}

.sub-points i{
  color:var(--accent2);
  margin-top:2px;
}

/* Premium Card */
.sub-card.premium{
  background:#ffffff;
  color:#081726;
  border-radius:26px;
  padding:30px 26px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.sub-icon{
  font-size:38px;
  color:#fbbf24;
  margin-bottom:8px;
}

.sub-card h3{
  margin:6px 0 4px;
  font-size:20px;
  font-weight:800;
}

.sub-note{
  font-size:13px;
  color:#64748b;
  margin-bottom:18px;
}

/* Feature list alignment fix */
.sub-features{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  display:grid;
  gap:10px;
  font-size:14px;
  text-align:left;
}

.sub-features li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  line-height:1.5;
}

.sub-features i{
  color:#22c55e;
  font-size:15px;
  margin-top:2px;
  flex-shrink:0;
}

.sub-features span{
  display:block;
}

/* Mobile */
@media(max-width:900px){
  .sub-box{
    grid-template-columns:1fr;
    padding:26px;
  }
}

    
                    html, body {
                  min-height: 100%;
                  background: linear-gradient(
                    180deg,
                    #081726 0%,
                    #050f18 100%
                  );
                  background-attachment: fixed;
                }

                      :root{
                        --bg:#081726;
                        --bg2:#050f18;
                        --ink:#eaf2ff;
                        --muted:rgba(234,242,255,.72);
                        --muted2:rgba(234,242,255,.55);
                        --card:rgba(255,255,255,.06);
                        --card2:rgba(255,255,255,.09);
                        --stroke:rgba(255,255,255,.12);
                        --stroke2:rgba(255,255,255,.18);
                        --accent:#38bdf8;
                        --accent2:#22c55e;
                        --warn:#ff4b5c;
                        --shadow: 0 18px 60px rgba(0,0,0,.55);
                        --radius: 18px;
                        --max: 1180px;
                      }
                      *{box-sizing:border-box}
                      html,body{height:100%}
                      body{
                        margin:0;
                        font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
                        color:var(--ink);
                        background: radial-gradient(900px 500px at 18% 10%, rgba(56,189,248,.22), transparent 60%),
                                    radial-gradient(700px 500px at 80% 20%, rgba(34,197,94,.16), transparent 55%),
                                    radial-gradient(900px 600px at 50% 110%, rgba(255,75,92,.10), transparent 60%),
                                    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
                        overflow-x:hidden;
                      }
                      a{color:inherit;text-decoration:none}
                      .wrap{max-width:var(--max); margin:0 auto; padding:0 20px;}
                      .topbar{
                        position:sticky; top:0; z-index:50;
                        backdrop-filter: blur(12px);
                        background: rgba(8,23,38,.55);
                        border-bottom:1px solid rgba(255,255,255,.10);
                      }
                      .topbar-inner{
                        display:flex; align-items:center; justify-content:space-between;
                        height:68px;
                      }
                      .brand{
                        display:flex; align-items:center; gap:12px;
                        font-weight:800; letter-spacing:.2px;
                      }
                      .mark{
                          width:40px;
                          height:40px;
                          border-radius:14px;
                          overflow:hidden;               /* IMPORTANT */
                          border:1px solid rgba(255,255,255,.16);
                          box-shadow:0 10px 35px rgba(0,0,0,.45);
                          background:rgba(255,255,255,.06);
                        }

                .mark img{
                      width:100%;
                      height:100%;
                      object-fit:cover;              /* keeps image clean */
                      display:block;
                    }
                .mark{
                  position:relative;
                }

                .mark::after{
                  content:"";
                  position:absolute;
                  inset:-2px;
                  border-radius:16px;
                  background:

                  pointer-events:none;
                }

                      .nav{
                        display:flex; gap:18px; align-items:center;
                        color:var(--muted);
                        font-weight:600;
                      }
                      .nav a{padding:10px 10px; border-radius:12px;}
                      .nav a:hover{background:rgba(255,255,255,.06); color:var(--ink)}
                      .cta{
                        display:flex; gap:10px; align-items:center;
                      }
                      .btn{
                        display:inline-flex; align-items:center; justify-content:center;
                        gap:10px;
                        padding:12px 14px;
                        border-radius:14px;
                        border:1px solid rgba(255,255,255,.14);
                        background: rgba(255,255,255,.06);
                        color:var(--ink);
                        font-weight:700;
                        box-shadow: 0 12px 35px rgba(0,0,0,.25);
                        transition: transform .15s ease, background .15s ease, border-color .15s ease;
                        cursor:pointer;
                        user-select:none;
                      }
                      .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22)}
                      .btn.primary{
                        border:none;
                        background: linear-gradient(90deg, rgba(56,189,248,1) 0%, rgba(34,197,94,1) 100%);
                        color:#041018;
                      }
                      .btn.primary:hover{filter:saturate(1.08) brightness(1.02)}
                      .btn.ghost{background:transparent}
                      .pill{
                        display:inline-flex; align-items:center; gap:10px;
                        padding:8px 12px;
                        border-radius:999px;
                        border:1px solid rgba(255,255,255,.14);
                        background: rgba(255,255,255,.05);
                        color:var(--muted);
                        font-weight:700;
                        font-size:13px;
                      }
                        .btn-center{
                  display:flex;
                  justify-content:center;
                  align-items:center;
                }
                      .pill .dot{
                        width:8px; height:8px; border-radius:999px;
                        background: var(--accent);
                        box-shadow: 0 0 0 6px rgba(56,189,248,.15);
                      }

                      /* HERO */
                      .hero{
                        padding:64px 0 28px;
                        position:relative;
                      }
                     .hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr; /* balanced width */
  gap:26px;
  align-items:start; /* 🔥 KEY FIX */
}

                      .h1{
                        font-size:46px;
                        line-height:1.05;
                        letter-spacing:-.9px;
                        margin:14px 0 10px;
                      }
                      .sub{
                        color:var(--muted);
                        font-size:17px;
                        line-height:1.6;
                        max-width: 56ch;
                        margin:0 0 18px;
                      }
                      .hero-actions{
                        display:flex; gap:12px; flex-wrap:wrap;
                        margin:18px 0 18px;
                      }
                      .micro{
                        color:var(--muted2);
                        font-size:13px;
                        line-height:1.5;
                      }
                      .hero-card{
                          max-height: fit-content;
                        border-radius: 22px;
                        border:1px solid rgba(255,255,255,.14);
                        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
                        box-shadow: var(--shadow);
                        overflow:hidden;
                        position:relative;
                      }
  
                      .hero-card::before{
                        content:"";
                        position:absolute; inset:-2px;
                        background: radial-gradient(450px 240px at 20% 10%, rgba(56,189,248,.28), transparent 60%),
                                    radial-gradient(420px 240px at 80% 20%, rgba(34,197,94,.18), transparent 60%);
                        pointer-events:none;
                      }
                      .profile{
                        position:relative;
                        padding:18px;
                        display:grid;
                        grid-template-columns: 1fr;
                        gap:12px;
                      }
                      .avatar{
                        border-radius:18px;
                        border:1px solid rgba(255,255,255,.16);
                        overflow:hidden;
                        background: rgba(255,255,255,.06);
                      }
                      .avatar img{
                        width:100%; height:100%; object-fit:cover; display:block;
                      }
                      .profile h3{
                        margin:0;
                        font-size:16px;
                        letter-spacing:.2px;
                      }
                      .profile p{
                        margin:0;
                        color:var(--muted);
                        font-size:13px;
                        line-height:1.55;
                      }
                      .chips{
                        display:flex; gap:8px; flex-wrap:wrap;
                        margin-top:8px;
                      }
                      .chip{
                        font-size:12px;
                        color:var(--muted);
                        border:1px solid rgba(255,255,255,.14);
                        background: rgba(255,255,255,.05);
                        padding:7px 10px;
                        border-radius:999px;
                      }

                      /* STATS */
                      .stats{
                        margin-top:18px;
                        display:grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap:12px;
                      }
                      .stat{
                        border-radius: 18px;
                        border:1px solid rgba(255,255,255,.12);
                        background: rgba(255,255,255,.05);
                        padding:14px 14px;
                      }
                      .stat b{
                        display:block;
                        font-size:20px;
                        letter-spacing:-.3px;
                      }
                      .stat span{
                        display:block;
                        margin-top:6px;
                        color:var(--muted);
                        font-size:13px;
                        line-height:1.4;
                      }

                      /* SECTION */
                      section{padding:44px 0}
                      .sec-head{
                        display:flex;
                        align-items:flex-end;
                        justify-content:space-between;
                        gap:16px;
                        margin-bottom:18px;
                      }
                      .sec-head h2{
                        margin:0;
                        font-size:26px;
                        letter-spacing:-.4px;
                      }
                      .sec-head p{
                        margin:0;
                        color:var(--muted);
                        max-width:62ch;
                        line-height:1.6;
                        font-size:14px;
                      }
                .sec-head.center {
            text-align: center;
            justify-content: center;
          }

          .sec-head.center p {
            margin: 8px auto 0;
          }


                      /* WORKSHOP CARDS */
                      .grid3{
                        display:grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap:14px;
                      }
                      .card{
                        border-radius: 20px;
                        border:1px solid rgba(255,255,255,.12);
                        background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
                        box-shadow: 0 14px 50px rgba(0,0,0,.30);
                        overflow:hidden;
                        position:relative;
                      }
                      .card::after{
                        content:"";
                        position:absolute; inset:0;
                        background: radial-gradient(380px 180px at 20% 0%, rgba(56,189,248,.18), transparent 55%);
                        opacity:.9;
                        pointer-events:none;
                      }
                      .card-inner{position:relative; padding:16px;}
                      .badge{
                        display:inline-flex;
                        align-items:center; gap:8px;
                        font-size:12px;
                        padding:6px 10px;
                        border-radius:999px;
                        border:1px solid rgba(255,255,255,.14);
                        background: rgba(255,255,255,.05);
                        color:var(--muted);
                        font-weight:700;
                      }
                      .badge .mini{
                        width:8px; height:8px; border-radius:99px;
                        background: var(--accent2);
                        box-shadow: 0 0 0 6px rgba(34,197,94,.14);
                      }
                     
                      .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
                      .card h3{margin:0 0 8px; font-size:16px; letter-spacing:-.2px}
                      .meta{
                        display:flex; gap:10px; flex-wrap:wrap;
                        color:var(--muted);
                        font-size:12.5px;
                        line-height:1.4;
                      }
                      .meta .sep{opacity:.35}
                      .card .desc{
                        margin:10px 0 12px;
                        color:var(--muted);
                        font-size:13px;
                        line-height:1.55;
                        min-height: 42px;
                      }
                      .card .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
                      .tiny{
                        font-size:12px; color:var(--muted2);
                      }

                      /* AI SECTION */
                      .split{
                        display:grid;
                        grid-template-columns: 1fr 1fr;
                        gap:14px;
                      }
                      .panel{
                        border-radius: 22px;
                        border:1px solid rgba(255,255,255,.12);
                        background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
                        box-shadow: 0 16px 60px rgba(0,0,0,.28);
                        padding:18px;
                        position:relative;
                        overflow:hidden;
                      }
                      .panel::before{
                        content:"";
                        position:absolute; inset:-2px;
                        background: radial-gradient(420px 240px at 10% 20%, rgba(56,189,248,.18), transparent 60%),
                                    radial-gradient(420px 240px at 90% 40%, rgba(255,75,92,.10), transparent 62%);
                        pointer-events:none;
                      }
                      .panel > *{position:relative}
                      .klist{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px}
                      .klist li{
                        display:flex; gap:10px;
                        padding:10px 10px;
                        border-radius:16px;
                        border:1px solid rgba(255,255,255,.10);
                        background: rgba(255,255,255,.04);
                        color:var(--muted);
                        line-height:1.5;
                        font-size:13px;
                      }
                      .tick{
                        width:22px; height:22px; border-radius:10px;
                        display:inline-flex; align-items:center; justify-content:center;
                        background: rgba(34,197,94,.15);
                        border:1px solid rgba(34,197,94,.28);
                        flex: 0 0 auto;
                      }

                      /* CTA STRIP */
                      .cta-strip{
                        border-radius: 24px;
                        border:1px solid rgba(255,255,255,.14);
                        background: linear-gradient(90deg, rgba(56,189,248,.20), rgba(34,197,94,.16));
                        box-shadow: var(--shadow);
                        padding:20px;
                        display:flex;
                        align-items:center;
                        justify-content:space-between;
                        gap:18px;
                      }
                      .cta-strip h3{margin:0 0 6px; font-size:18px}
                      .cta-strip p{margin:0; color:var(--muted); line-height:1.55; font-size:13px}
                      .cta-strip .actions{display:flex; gap:10px; flex-wrap:wrap}

                      /* MOBILE */
                      .hamburger{display:none}
                      @media (max-width: 980px){
                        .hero-grid{grid-template-columns: 1fr; }
                        .h1{font-size:38px}
                        .stats{grid-template-columns: 1fr; }
                        .grid3{grid-template-columns: 1fr;}
                        .split{grid-template-columns: 1fr;}
                        .foot{grid-template-columns: 1fr;}
                      }
                      @media (max-width: 760px){
                        .nav{display:none}
                        .hamburger{display:inline-flex}
                        .topbar-inner{gap:10px}
                      }


                /* футурistic footer */
             footer{
                      margin-top:26px; padding:34px 0 44px;
                      border-top:1px solid rgba(255,255,255,.10);
                      color:var(--muted);
                    }
                    .footer-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
                    .footer-left{display:flex;align-items:center;gap:10px}
                    .footer-center{text-align:center;font-size:12.5px;line-height:1.6}
                    .footer-links{
                      margin-top:10px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; font-size:12px;
                    }
                    .footer-links a{
                      color:rgba(234,242,255,.65);
                      border-bottom:1px solid rgba(255,255,255,.18);
                      padding-bottom:2px;
                    }
                    .footer-links a:hover{color:#eaf2ff;border-bottom-color:rgba(56,189,248,.6)}
                    .footer-links .dot{opacity:.45}
                    .footer-social{display:flex;gap:10px;justify-content:flex-end}
                    .footer-social a{
                      width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;
                      border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);transition:.25s ease;
                    }
                    .footer-social i{font-size:18px;color:#eaf2ff !important;opacity:.9}
                    .footer-social a:hover{
                      transform:translateY(-2px);
                      background:linear-gradient(135deg, rgba(56,189,248,.35), rgba(34,197,94,.22));
                      box-shadow:0 12px 30px rgba(0,0,0,.35);
                    }
                    .footer-social a:hover i{opacity:1}

                    @media(max-width:900px){
                      h1{font-size:34px}
                      .grid2{grid-template-columns:1fr}
                      .row2{grid-template-columns:1fr}
                      .footer-inner{grid-template-columns:1fr;text-align:center}
                      .footer-left{justify-content:center}
                      .footer-social{justify-content:center}
                    }

      /* Footer */
                    @media(max-width:900px){
                      h1{font-size:34px}
                      .grid2{grid-template-columns:1fr}
                      .row2{grid-template-columns:1fr}
                      .footer-inner{grid-template-columns:1fr;text-align:center}
                      .footer-left{justify-content:center}
                      .footer-social{justify-content:center}
                    }


                      /* ANIMATIONS (subtle, premium) */
                      .reveal{opacity:0; transform: translateY(10px); transition: .6s ease;}
                      .reveal.show{opacity:1; transform: translateY(0);}


                /* =========================
                   Responsive + Mobile Polish
                   ========================= */
                img:not(.thumb img){
  max-width:100%;
  height:auto;
}
                button,input,select,textarea{font:inherit}
                :focus-visible{outline:2px solid rgba(56,189,248,.65);outline-offset:3px;border-radius:12px}
                @media (max-width: 1024px){
                  .wrap{padding:0 18px}
                }
                @media (max-width: 900px){
                  /* common stacks */
                  .hero-grid,.hero,.split,.grid2,.row2,.foot,.footer-inner,.module-grid,.grid3{grid-template-columns:1fr !important}
                  .topbar-inner,.top-inner{height:auto; padding:12px 0}
                  .nav{display:none !important}
                  h1,.h1{font-size:clamp(30px, 6vw, 38px) !important}
                  .sub{font-size:15px !important}
                  .stats{grid-template-columns:1fr !important}
                  .cta-strip{flex-direction:column; align-items:stretch !important}
                  .cta-strip .actions{width:100%}
                  .cta-strip .actions .btn{flex:1}
                  .hero{padding:44px 0 20px !important}
                }
                @media (max-width: 520px){
                  .wrap{padding:0 14px}
                  .btn{width:100%}
                  .hero-actions,.actions,.cta,.cta-row{display:grid !important; grid-template-columns:1fr !important}
                  .pill{font-size:12px}
                  .stat b{font-size:18px !important}
                  .card-inner{padding:14px !important}
                  .footer-social a{width:42px;height:42px}
                }


                /* === Extra Mobile + Tablet Optimizations === */
                @media (max-width: 1100px){
                  .wrap{padding:0 18px;}
                }
                @media (max-width: 900px){
                  /* stack common 2-col layouts */
                  .hero-grid{grid-template-columns:1fr !important;}
                  .grid2{grid-template-columns:1fr !important;}
                  .split{grid-template-columns:1fr !important;}
                  .module-grid{grid-template-columns:1fr !important;}
                }
                @media (max-width: 760px){
                  section{padding:20px 0;}
                  .sec-head{flex-direction:column; align-items:flex-start;}
                  .sec-head p{max-width:none;}
                  .cta-strip{flex-direction:column; align-items:flex-start;}
                  .cta-strip .actions{width:100%;}
                }
                @media (max-width: 520px){
                  .wrap{padding:0 14px;}
                  .topbar-inner,.top-inner{height:auto; padding:10px 0;}
                  .hero{padding:52px 0 22px;}
                  .h1{font-size:32px;}
                  .sub{font-size:15px;}
                  .hero-actions{gap:10px;}
                  .hero-actions .btn{flex:1 1 100%; width:100%;}
                  .card .actions{gap:10px;}
                  .card .actions .btn{flex:1 1 100%; width:100%;}
                  .btn{padding:12px 14px;}
                  .card-inner{padding:14px;}
                  .cta-strip .actions .btn{flex:1 1 100%; width:100%;}
                  .footer-inner{grid-template-columns:1fr; text-align:center;}
                  .footer-left{justify-content:center;}
                  .footer-social{justify-content:center;}
                  .footer-links{justify-content:center;}
                }
                @media (max-width: 380px){
                  .h1{font-size:29px;}
                }
                    /* Hide top CTA buttons on mobile */

                /* Mobile header cleanup */
                @media (max-width: 768px) {
                  .nav-buttons {
                    display: none;
                  }
                }