/* TEST: MYGRAPHICS ICON CSS LOADED */

:root{
  --orange:#F7931E;
  --navy:#0F172A;
  --bg:#ffffff;
  --muted:#64748b;
  --ring:#e2e8f0;
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:#0b1220}

.container{max-width:1120px;margin:0 auto;padding:0 16px}

.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--ring)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.logo{font-weight:800;text-decoration:none;color:#0b1220}
.logo span{color:var(--orange)}
.nav{display:none;gap:18px}
.nav a{color:#334155;text-decoration:none;font-size:14px}
.nav a:hover{color:#0b1220}
.header-cta{display:flex;gap:8px;align-items:center}

@media(min-width:760px){.nav{display:flex}}

.btn{border:0;border-radius:14px;padding:10px 14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:var(--orange);color:#111827}
.btn-dark{background:#0b1220;color:white}
.btn-ghost{background:transparent;border:1px solid var(--ring);color:#334155}
.btn.block{width:100%}
.btn.small{padding:8px 10px;border-radius:12px;font-size:13px}

.hero{background:linear-gradient(180deg,#f8fafc, #ffffff)}
.hero-grid{padding:72px 0 24px; display:grid; gap:26px}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.1fr .9fr; align-items:center}}

.pill{display:inline-flex;align-items:center;border:1px solid var(--ring);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;color:#334155;background:#f1f5f9}
.hero h1{font-size:34px;line-height:1.1;margin:14px 0 10px}
@media(min-width:760px){.hero h1{font-size:52px}}
.muted{color:var(--muted)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.badge{font-size:12px;border:1px solid var(--ring);border-radius:999px;padding:6px 10px;background:#fff;color:#334155;font-weight:700}

.trust{margin:18px 0 0; border:1px solid var(--ring); border-radius:18px; padding:14px; background:#fff; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; box-shadow: 0 1px 0 rgba(0,0,0,.02)}
.stars{color:#0b1220}
.stars b{margin-left:6px}

.section{padding:64px 0}
.section.alt{background:#f8fafc}
.section-head{max-width:720px}
.section-head h2{margin:12px 0 8px; font-size:28px}
@media(min-width:760px){.section-head h2{font-size:34px}}

.grid2{display:grid;gap:16px}
.grid3{display:grid;gap:16px}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid3{grid-template-columns:1fr 1fr 1fr}}

.card{background:#fff;border:1px solid var(--ring);border-radius:18px;padding:18px;box-shadow: 0 1px 0 rgba(0,0,0,.02)}
.card.hover{transition:.2s ease; box-shadow: 0 1px 0 rgba(0,0,0,.02)}
.card.hover:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.card-dark{background:var(--navy);border-color:#0b1220;color:#fff}
.card-dark .muted{color:rgba(255,255,255,.78)}
.card-wide{grid-column:1 / -1}

.bento{display:grid;gap:14px}
@media(min-width:540px){.bento{grid-template-columns:1fr 1fr}}
.card-title{font-weight:800;margin-bottom:12px}
.kpi{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ring);border-radius:14px;padding:10px 12px;background:#f8fafc;margin:8px 0}
.card-dark ul{margin:10px 0 0; padding-left:16px}
.card-dark li{margin:6px 0}

/* =========================
   Pricing (Premium) — CMS driven
========================= */
.pricing-premium{position:relative;padding:86px 0 72px;overflow:hidden}
.pricing-premium__bg{
  position:absolute;inset:-1px;
  background:
    radial-gradient(900px 420px at 50% 25%, rgba(247,147,30,.28), transparent 60%),
    radial-gradient(700px 340px at 20% 70%, rgba(15,23,42,.12), transparent 60%),
    radial-gradient(760px 380px at 80% 70%, rgba(15,23,42,.12), transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #0f172a 60%, #0b1220 100%);
  opacity:1;
}
.pricing-premium .container{position:relative}
.pricing-premium__top{text-align:center;max-width:980px;margin:0 auto 26px}

.pricing-premium__toggle{
  display:inline-flex;align-items:center;gap:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:4px;
  backdrop-filter: blur(10px);
  margin-bottom:16px;
}
.pricing-toggle{
  appearance:none;border:0;cursor:pointer;
  padding:10px 16px;border-radius:999px;
  font-weight:800;font-size:14px;
  color:rgba(255,255,255,.78);
  background:transparent;
  transition:.18s ease;
}
.pricing-toggle.is-active{background:linear-gradient(180deg,#ffcc66,#f7931e);color:#111827;box-shadow:0 10px 26px rgba(247,147,30,.22)}

.pricing-premium__title{margin:10px 0 0;font-size:30px;line-height:1.1;color:#fff;font-weight:900;letter-spacing:-.02em}
.pricing-premium__title span{color:#ffcc66}
@media(min-width:760px){.pricing-premium__title{font-size:44px}}

.pricing-premium__grid{display:grid;gap:14px;align-items:stretch;margin-top:16px}
@media(min-width:980px){.pricing-premium__grid{grid-template-columns:1fr 1fr 1fr;gap:18px}}

.price-card{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.15);border-radius:20px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.35)}
.price-card__head{padding:18px 18px 14px;background:rgba(15,23,42,.08)}
.price-card__name{margin:0;font-size:26px;letter-spacing:-.02em}
.price-card__body{padding:16px 18px 18px}

.price-card__badge{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;color:#b45309;margin:0 0 8px}

.price-card__price{font-size:42px;font-weight:950;letter-spacing:-.03em;color:#0b1220;display:flex;align-items:flex-end;gap:6px;margin:6px 0 14px}
.price-card__currency{font-size:18px;font-weight:900;transform:translateY(-8px)}
.price-card__suffix{font-size:16px;font-weight:800;color:#475569;transform:translateY(-4px)}

.price-card__list{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}
.price-card__list li{display:flex;gap:10px;align-items:flex-start;color:#0b1220;font-weight:650}
.price-check{width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#ffcc66,#f7931e);display:inline-block;position:relative;flex:0 0 18px;margin-top:2px}
.price-check:after{content:"";position:absolute;left:5px;top:4px;width:6px;height:10px;border:2px solid #111827;border-top:0;border-left:0;transform:rotate(45deg)}

.price-card__cta{margin-top:8px}
.price-card__note{margin-top:10px;font-size:12px;font-weight:800;color:rgba(255,255,255,.82);text-align:center}

.price-card.is-featured{
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,18,32,.92));
  border:1px solid rgba(247,147,30,.55);
  position:relative;
  transform:translateY(-6px);
}
.price-card.is-featured .price-card__head{background:transparent}
.price-card.is-featured .price-card__name{color:#fff}
.price-card.is-featured .price-card__badge{color:#ffcc66}
.price-card.is-featured .price-card__price{color:#fff}
.price-card.is-featured .price-card__suffix{color:rgba(255,255,255,.72)}
.price-card.is-featured .price-card__list li{color:rgba(255,255,255,.92)}
.price-card.is-featured:before{
  content:"";position:absolute;inset:-2px;
  border-radius:22px;
  background:radial-gradient(420px 220px at 50% 20%, rgba(247,147,30,.48), transparent 60%);
  pointer-events:none;
}
.pricing-premium__foot{text-align:center;margin-top:18px;color:rgba(255,255,255,.86);font-weight:800}

.icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#f1f5f9;border:1px solid var(--ring);font-weight:900;color:#0b1220}
.cover{height:160px;background:#e2e8f0 center/cover no-repeat}
.card-body{padding-top:10px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{border:1px solid var(--ring);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;background:#f1f5f9;color:#334155}
.chip-orange{background:rgba(247,147,30,.14);border-color:rgba(247,147,30,.28);color:#0b1220}
.split{display:grid;gap:10px;margin:10px 0}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.metric{border:1px solid rgba(247,147,30,.28);background:rgba(247,147,30,.14);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}

.quote{margin:10px 0 0}
.byline{margin-top:12px;color:#0b1220}
.card-dark .byline{color:#fff}
.price{font-size:28px;font-weight:900;margin:10px 0 12px}
.tiny{margin-top:14px;font-size:12px;color:rgba(255,255,255,.72)}

label{display:block;font-size:13px;font-weight:800;color:#334155;margin-top:10px}
input,select,textarea{width:100%;margin-top:6px;padding:11px 12px;border-radius:14px;border:1px solid var(--ring);outline:none}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(247,147,30,.22);border-color:rgba(247,147,30,.45)}

.grid2 .full{grid-column:1 / -1}
.err{color:#dc2626;font-size:12px;margin-top:6px;min-height:16px}
.status{margin-top:10px;color:#334155;font-weight:700}
.success h3{margin:0 0 8px}

.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border-bottom:1px solid var(--ring);padding:10px 8px;text-align:left;font-size:14px;vertical-align:top}
.table th{font-size:12px;color:#475569;text-transform:uppercase;letter-spacing:.06em}
.table td small{color:#64748b}

.footer{border-top:1px solid var(--ring);padding:28px 0;background:#fff}
.footer-inner{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:#475569;font-size:14px}
.footer-links{display:flex;gap:14px}
.footer-links a{color:#475569;text-decoration:none}
.footer-links a:hover{color:#0b1220}

.reveal{opacity:0;transform:translateY(10px);transition:.45s ease}
.reveal.in{opacity:1;transform:translateY(0)}

.modal{position:fixed;inset:0;display:none;z-index:60}
.modal.open{display:block}
.modal-overlay{position:absolute;inset:0;background:rgba(15,23,42,.60)}
.modal-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(960px,94vw);height:min(78vh,720px);background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--ring)}
.cal-frame{width:100%;height:calc(100% - 46px)}

.notice{padding:10px 12px;border-radius:14px;border:1px solid var(--ring);background:#f8fafc;color:#334155;margin-top:12px}
.notice.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.notice.err{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.06)}

.service-icon{
  width:24px;
  height:24px;
  display:block;
}

/* === Services Icon Styling === */

.service-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;

  background-color: #0F172A; /* dark navy (secondary color) */

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;
}

/* SVG icon inside */
.service-card .icon img.service-icon {
  width: 28px;      /* make icon bigger */
  height: 28px;
  filter: brightness(0) invert(1); /* force white icon */
}

/* fallback text icon (if SVG not uploaded) */
.service-card .icon {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.service-card:hover .icon {
  transform: scale(1.05);
  transition: all 0.25s ease;
}

/* ===============================
   SERVICES ICON – FINAL FIX
================================ */

/* Icon container */
.card .icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;

  background-color: #0F172A; /* dark navy */

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;
}

/* SVG icon */
.card .icon img {
  width: 30px;
  height: 30px;

  /* make SVG white */
  filter: brightness(0) invert(1);
}

/* Fallback text icon */
.card .icon {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

/* FORCE Services icon styling */
#services .icon,
#services .card .icon,
#services .grid3 .icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 16px !important;
  background: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

/* make uploaded SVG white and bigger */
#services .icon img,
#services .card .icon img {
  width: 34px !important;
  height: 34px !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
}

/* ==============================
   SERVICES ICON – CLEAN & VISIBLE
   (FINAL, FIXED, NO BROKEN BRACES)
============================== */

#services .grid3 .card .icon{
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #0F172A, #020617) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

/* Uploaded SVG file via <img> */
#services .grid3 .card .icon img.service-icon{
  width: 40px !important;
  height: 40px !important;
  display: block !important;
  filter: brightness(0) invert(1) contrast(1.35) !important;
}

:root{
  --primary: #fd7f07;
  --secondary: #2f393b;
  --text: #ffffff;
}

.hero-premium{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--text);
}

.hero-premium__bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,18,20,.88) 0%, rgba(15,18,20,.72) 45%, rgba(15,18,20,.45) 100%),
    radial-gradient(circle at 75% 30%, rgba(253,127,7,.18), transparent 55%),
    url("/assets/images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transform: scale(1.02);
}

.hero-premium__container{
  position: relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding: 80px 0;
}

.hero-premium__pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 600;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
}

.hero-premium__title{
  margin: 16px 0 12px;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  font-weight: 800;
}

.hero-premium__subtitle{
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  margin-bottom: 22px;
}

.hero-premium__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 18px 45px rgba(253,127,7,.30);
}
.btn--primary:hover{ box-shadow: 0 22px 55px rgba(253,127,7,.38); }

.btn--ghost{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{ background: rgba(255,255,255,.14); }

.hero-premium__meta{
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

.hero-premium__glass{
  position: relative;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 35px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.hero-premium__glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 100% 35%, rgba(253,127,7,.12), transparent 40%);
  pointer-events:none;
}

.hero-premium__glassInner{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  padding: 18px;
}

.hero-premium__mock{
  border-radius: 18px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 280px;
}
.hero-premium__mock img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.03);
}

.hero-premium__resultsTitle{
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  margin: 6px 0 10px;
}

.hero-premium__list{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 10px;
}
.hero-premium__list li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  color: rgba(255,255,255,.88);
}

.check{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  position: relative;
}
.check::after{
  content:"";
  position:absolute;
  left: 5px;
  top: 3px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
  opacity: .95;
}

.hero-premium__resultsNote{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.70);
}

/* Responsive */
@media (max-width: 980px){
  .hero-premium__container{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 64px 0;
  }
  .hero-premium__glassInner{
    grid-template-columns: 1fr;
  }
}

/* ===== Premium Hero (Background + Glass Card) ===== */
.hero-premium{
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 90px 0 40px;
  min-height: 88vh;
  display: flex;
  align-items: center;
}

.hero-premium__bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,18,20,.90) 0%, rgba(15,18,20,.72) 48%, rgba(15,18,20,.42) 100%),
    radial-gradient(circle at 75% 25%, rgba(253,127,7,.18), transparent 55%),
    url("/assets/images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter: saturate(1.05);
}

.hero-premium__container{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.hero-premium__pill{
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
}

.hero-premium__title{
  margin: 16px 0 12px;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  font-weight: 900;
}

.hero-premium__subtitle{
  color: rgba(255,255,255,.86);
  max-width: 58ch;
  line-height: 1.6;
  margin-bottom: 18px;
}

.hero-premium__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-premium__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

/* trust row inside hero */
.hero-premium__trust{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  color: rgba(255,255,255,.76);
}

/* right glass card */
.hero-premium__glass{
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 35px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  overflow: hidden;
  position: relative;
}

.hero-premium__glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 100% 35%, rgba(253,127,7,.12), transparent 40%);
  pointer-events:none;
}

.hero-premium__glassInner{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  padding: 18px;
}

.hero-premium__mock{
  border-radius: 18px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  min-height: 280px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-premium__mock img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.hero-premium__resultsTitle{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  margin: 6px 0 10px;
}

.hero-premium__list{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 10px;
}

.hero-premium__list li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  color: rgba(255,255,255,.88);
}

.check{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  position: relative;
}

.check::after{
  content:"";
  position:absolute;
  left: 5px;
  top: 3px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
  opacity: .95;
}

.hero-premium__resultsNote{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}

@media (max-width: 980px){
  .hero-premium{
    padding: 70px 0 30px;
    min-height: auto;
  }
  .hero-premium__container{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hero-premium__glassInner{
    grid-template-columns: 1fr;
  }
}

.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
}


/* =========================
   PROJECTS SHOWCASE (Premium)
========================= */
.projects-showcase{
  padding: 80px 0;
  background: #fbf6f1;
}

.projects-showcase__head{
  text-align: center;
  margin-bottom: 40px;
}

.projects-showcase__title{
  font-size: clamp(54px, 7vw, 92px);
  line-height: 1;
  margin: 0;
  font-weight: 900;
  color: #e11d48;
  letter-spacing: -0.02em;
}

.projects-showcase__subtitle{
  max-width: 720px;
  margin: 14px auto 0;
  color: #475569;
  font-weight: 600;
  line-height: 1.6;
}

.projects-showcase__list{
  display: grid;
  gap: 40px;
}

.project-row{
  display: grid;
  gap: 26px;
  align-items: center;
}

@media(min-width: 980px){
  .project-row{
    grid-template-columns: 1.1fr 0.9fr;
  }
  .project-row.is-reverse{
    grid-template-columns: 0.9fr 1.1fr;
  }
  .project-row.is-reverse .project-row__media{ order: 2; }
  .project-row.is-reverse .project-row__content{ order: 1; }
}

.project-mock{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 22px 80px rgba(15,23,42,.10);
  position: relative;
  overflow: hidden;
}

.project-mock::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(253,127,7,.22), transparent 60%);
  filter: blur(2px);
}

.project-mock img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.project-mock__placeholder{
  height: 320px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
  font-weight:800;
}

.project-row__tag{
  display: inline-flex;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.55);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #111827;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.project-row__title{
  margin: 14px 0 8px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  color: #0b1220;
}

.project-row__desc{
  margin: 0 0 16px;
  color: #475569;
  line-height: 1.7;
  font-weight: 600;
}

.project-row__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #ef4444;
  margin: 8px 0 10px;
}

.project-row__list{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
}

.project-row__list li{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: #0f172a;
  font-weight: 700;
}

.pcheck{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
  position: relative;
  margin-top: 2px;
}

.pcheck::after{
  content:"";
  position:absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border-right: 2px solid rgba(34,197,94,.95);
  border-bottom: 2px solid rgba(34,197,94,.95);
  transform: rotate(45deg);
}

.project-row__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  text-decoration: none;
  color: #ef4444;
}

.project-row__link:hover{
  text-decoration: underline;
}

.projects-showcase__cta{
  display:flex;
  justify-content:center;
  margin-top: 30px;
}

/* =========================
   PROJECTS SHOWCASE (Premium v2)
========================= */
.projects-showcase{
  padding: 90px 0;
  background: linear-gradient(180deg, #fbf6f1 0%, #ffffff 100%);
}

.projects-showcase__head{
  text-align: center;
  margin-bottom: 44px;
}

.projects-showcase__title{
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1;
  margin: 0;
  font-weight: 950;
  color: #e11d48;
  letter-spacing: -0.03em;
}

.projects-showcase__subtitle{
  max-width: 740px;
  margin: 14px auto 0;
  color: #475569;
  font-weight: 600;
  line-height: 1.7;
}

.projects-showcase__list{
  display: grid;
  gap: 22px; /* tighter + easier to scan */
}

/* Row becomes a premium card */
.project-row{
  display: grid;
  gap: 22px;
  align-items: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 26px;
  padding: 20px;
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.project-row:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 90px rgba(15,23,42,.12);
}

@media(min-width: 980px){
  .project-row{
    grid-template-columns: 0.95fr 1.05fr; /* image slightly smaller */
  }
  .project-row.is-reverse{
    grid-template-columns: 1.05fr 0.95fr;
  }
  .project-row.is-reverse .project-row__media{ order: 2; }
  .project-row.is-reverse .project-row__content{ order: 1; }
}

/* Media area */
.project-row__media{
  width: 100%;
}

/* Frame limits image size */
.project-mock{
  position: relative;
  border-radius: 22px;
}

.project-mock__frame{
  border-radius: 22px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.20);
}

/* ✅ The key fix: limit image height + crop */
.project-mock__frame img{
  width: 100%;
  height: 280px;          /* makes projects SMALL and consistent */
  object-fit: cover;      /* crops nicely */
  display: block;
  transform: scale(1.02);
}

/* If you want even smaller on desktop */
@media(min-width: 1200px){
  .project-mock__frame img{
    height: 250px;
  }
}

/* Placeholder */
.project-mock__placeholder{
  height: 280px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cbd5e1;
  font-weight: 900;
}

/* Content */
.project-row__tag{
  display: inline-flex;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.60);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #111827;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-row__title{
  margin: 12px 0 8px;
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 950;
  color: #0b1220;
}

.project-row__desc{
  margin: 0 0 14px;
  color: #475569;
  line-height: 1.7;
  font-weight: 600;
  font-size: 14px;
}

.project-row__label{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  color: #ef4444;
  margin: 10px 0 10px;
}

/* Make offerings compact */
.project-row__list{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.project-row__list li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
}

/* Check icon */
.pcheck{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
  position: relative;
  margin-top: 1px;
}

.pcheck::after{
  content:"";
  position:absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border-right: 2px solid rgba(34,197,94,.95);
  border-bottom: 2px solid rgba(34,197,94,.95);
  transform: rotate(45deg);
}

/* Link */
.project-row__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  text-decoration: none;
  color: #ef4444;
  margin-top: 6px;
}

.project-row__link:hover{
  text-decoration: underline;
}

/* CTA */
.projects-showcase__cta{
  display:flex;
  justify-content:center;
  margin-top: 28px;
}

/* ===== Projects: left image / right content + alternating ===== */

/* default (mobile): stacked */
#projects .project-row{
  display: grid;
  grid-template-columns: 1fr;
}

/* desktop: side-by-side */
@media (min-width: 980px){
  #projects .project-row{
    grid-template-columns: 1.05fr 0.95fr; /* image slightly wider */
    align-items: center;
  }

  /* even rows: reverse order (image right, content left) */
  #projects .project-row.is-reverse .project-row__media{
    order: 2;
  }
  #projects .project-row.is-reverse .project-row__content{
    order: 1;
  }
}

/* Make the image fill its column nicely */
#projects .project-row__media{
  width: 100%;
}
#projects .project-mock,
#projects .project-mock__frame{
  width: 100%;
}

/* Optional: give content a little breathing room */
@media (min-width: 980px){
  #projects .project-row__content{
    padding: 6px 6px;
  }
}

/* ==============================
   SERVICES (Premium Background)
   Full-width + hex icons + CMS
============================== */

.services-premium{
  position: relative;
  padding: 90px 0;
  color: #fff;
  overflow: hidden;
}

.services-premium__bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.88) 60%, rgba(15,23,42,.92) 100%),
    url("/assets/images/services-bg.png");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transform: scale(1.02);
}

.services-premium .container{
  position: relative;
  z-index: 1;
}

.services-premium__head{
  text-align: center;
  max-width: 900px;
  margin: 0 auto 36px;
}

.services-premium__kicker{
  display: inline-flex;
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 900;
  color: rgba(247,147,30,.95); /* your orange */
  text-transform: uppercase;
  margin-bottom: 10px;
}

.services-premium__title{
  margin: 0;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.1;
  font-weight: 950;
}

.services-premium__subtitle{
  margin: 12px auto 0;
  max-width: 70ch;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  font-weight: 600;
}

.services-premium__grid{
  display: grid;
  gap: 22px;
  margin-top: 34px;
}

@media(min-width: 900px){
  .services-premium__grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
  }
}

.services-premium__card{
  text-align: center;
  padding: 14px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.services-premium__card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.18);
}

.services-premium__hex{
  width: 86px;
  height: 86px;
  margin: 0 auto 14px;
  background: rgba(247,147,30,.98);
  display: grid;
  place-items: center;
  box-shadow: 0 22px 60px rgba(0,0,0,.25);

  /* Hex shape */
  clip-path: polygon(
    25% 6%, 75% 6%,
    100% 50%,
    75% 94%, 25% 94%,
    0% 50%
  );
}

.services-premium__icon{
  width: 34px;
  height: 34px;
  display: block;

  /* Make SVG white even if it’s black */
  filter: brightness(0) invert(1);
}

.services-premium__fallback{
  font-weight: 900;
  color: #fff;
  font-size: 18px;
}

.services-premium__name{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.services-premium__desc{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  font-weight: 600;
}

/* Responsive: stack nicer on smaller screens */
@media(max-width: 899px){
  .services-premium__card{
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 14px;
  }
  .services-premium__hex{
    margin: 0;
  }
  .services-premium__desc{
    max-width: 60ch;
  }
}

/* ===== Header Logo + Phone ===== */

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left group */
.header-left{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Phone number */
.header-phone{
  font-weight: 800;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  padding-right: 14px;
  border-right: 1px solid var(--ring);
}

.header-phone:hover{
  color: var(--orange);
}

/* Logo image */
.logo-img img{
  height: 36px;
  width: auto;
  display: block;
}

/* Mobile tweaks */
@media(max-width: 760px){
  .header-phone{
    display: none; /* hide phone on small screens */
  }
  .logo-img img{
    height: 32px;
  }
}

/* ===============================
   HEADER FIX: LOGO + PHONE
================================ */

/* Ensure header layout is clean */
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left group */
.header-left{
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Phone */
.header-phone{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 14px;
  color: #0b1220;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover{
  color: var(--orange);
}

.phone-icon{
  font-size: 14px;
  line-height: 1;
}

/* ===============================
   Header CTAs + Mobile Menu
================================ */

/* Make CTA + phone the same size (desktop) */
.header-right .btn,
.header-phone{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.header-phone{
  background: #fff;
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
}

.header-phone .icon-inline{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* Hamburger button (mobile) */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.nav-toggle span{
  display: block;
  width: 18px;
  height: 2px;
  background: #0b1220;
  border-radius: 2px;
}
.nav-toggle:active{ transform: translateY(1px); }

/* Mobile sidebar menu */
.mobile-nav{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  display: none;
  z-index: 200;
}
.mobile-nav.is-open{ display: block; }

html.no-scroll,
body.no-scroll{ overflow: hidden; }

.mobile-nav__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 86vw);
  background: #fff;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-nav__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav__title{
  font-weight: 900;
  font-size: 16px;
  color: #0b1220;
}

.mobile-nav__close{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--ring);
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav__links{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.mobile-nav__links a{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--ring);
  background: #f8fafc;
  color: #0b1220;
  text-decoration: none;
  font-weight: 800;
}

.mobile-nav__links a:hover{
  background: #fff;
  color: var(--orange);
}

@media (max-width: 900px){
  .nav{ display: none; }
  .nav-toggle{ display: inline-flex; }
}

@media (max-width: 760px){
  .header-inner{
    flex-wrap: wrap;
    gap: 10px;
  }

  .header-right{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  /* Make the two CTA buttons smaller on mobile */
  .header-right .btn,
  .header-phone{
    height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
  }

  .nav-toggle{
    width: 40px;
    height: 40px;
  }
}


/* Logo image resize */
.logo-img img{
  height: 38px;       /* ✅ perfect desktop size */
  width: auto;
  display: block;
}

/* Prevent logo from jumping */
.logo-img{
  display: flex;
  align-items: center;
}

/* Mobile behavior */
@media (max-width: 760px){
  .header-phone{
    display: none; /* hide phone on small screens */
  }

  .logo-img img{
    height: 32px;
  }
}

/* ===============================
   HEADER FINAL LAYOUT FIX
================================ */

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo-img img{
  height: 38px;
  width: auto;
  display: block;
}

/* Right side group */
.header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Phone */
.header-phone{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 14px;
  color: #0b1220;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover{
  color: var(--orange);
}

.phone-icon{
  font-size: 14px;
}

/* Mobile */
@media (max-width: 900px){
  .logo-img img{
    height: 32px;
  }
}


/* =========================
   Premium Footer
========================= */

.footer-premium{
  background:#fff;
  border-top:1px solid var(--ring);
  padding: 60px 0 28px;
}

.footer-topcard{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display:grid;
  gap:16px;
}

@media(min-width:900px){
  .footer-topcard{
    grid-template-columns: 1fr 1fr 1fr;
    align-items:center;
  }
}

.footer-topcard__left{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-brand__logo{
  height:40px;
  width:auto;
  display:block;
}

.footer-brand__name{
  font-weight:950;
  letter-spacing:.02em;
}
.footer-brand__tag{
  color:#64748b;
  font-weight:700;
  font-size:12px;
}

.footer-topcard__label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.footer-topcard__value{
  display:block;
  font-size:22px;
  font-weight:950;
  color:#0b1220;
  text-decoration:none;
}
.footer-topcard__value:hover{ color: var(--orange); }

.footer-topcard__sub{
  display:block;
  color:#64748b;
  font-weight:700;
  text-decoration:none;
  margin-top:4px;
}

.footer-follow{
  text-align:center;
  margin: 34px 0 26px;
}

.footer-follow__title{
  font-size:34px;
  font-weight:300;
  color: var(--orange);
  margin-bottom: 18px;
}

.footer-social{
  display:flex;
  justify-content:center;
  gap: 62px;
  flex-wrap: wrap;
}

.footer-social__link{
  color:#0b1220;
  text-decoration:none;
  transition: transform .15s ease, color .15s ease;
}
.footer-social__link:hover{
  transform: translateY(-2px);
  color: var(--orange);
}

.footer-social__icon{
  width:44px;
  height:44px;
  display:block;
}

.footer-bottom{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ring);
  display:flex;
  gap:14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:center;
}

.footer-copy{
  color:#334155;
  font-weight:700;
  font-size:14px;
}

.footer-links{
  display:flex;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-links a{
  color:#0b1220;
  font-weight:900;
  text-decoration:none;
  font-size:14px;
}
.footer-links a:hover{ color: var(--orange); }

/* ===============================
   SERVICES – CLEAN ICON FIX
   Removes shape & enlarges SVG
=============================== */

/* Service section background stays */
#services {
  position: relative;
}

/* Card reset */
#services .service-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  padding: 36px 28px;
  text-align: center;
}

/* REMOVE SHAPE / HEXAGON */
#services .service-card .icon,
#services .service-card .shape,
#services .service-card .hex,
#services .service-card::before {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
}

/* ICON WRAPPER */
#services .service-card .icon {
  width: auto !important;
  height: auto !important;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG IMAGE – BIG & CLEAR */
#services .service-card .icon img,
#services .service-card img.service-icon {
  width: 88px !important;
  height: 88px !important;
  max-width: 100%;
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Title */
#services .service-card h3 {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
}

/* Description */
#services .service-card p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}

/* Hover (premium feel) */
#services .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
  border-color: rgba(247,147,30,.55);
}

#services .service-card img.service-icon {
  filter: invert(1) brightness(1.2) contrast(1.2);
}

/* ===============================
   SERVICES – FORCE: NO SHAPE
   (Removes hex/pentagon/badge)
=============================== */

#services .services-premium__hex,
#services .services-premium__hex::before,
#services .services-premium__hex::after,
#services .icon,
#services .icon::before,
#services .icon::after{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Make the icon container NOT a fixed shape/size */
#services .services-premium__hex,
#services .icon{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===============================
   SERVICES – FORCE BIG SVG
=============================== */

#services img.service-icon,
#services .services-premium__icon,
#services .services-premium__hex img,
#services .icon img{
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  display: block !important;
  filter: brightness(0) invert(1) contrast(1.25) !important;
}

/* ===============================
   SERVICES – CENTER ICON + BRAND COLOR
================================ */

/* Make each card content centered */
#services .services-premium__card,
#services .service-card{
  text-align: center !important;
}

/* Force icon wrapper to center */
#services .services-premium__iconwrap,
#services .services-premium__hex,
#services .icon{
  margin: 0 auto 18px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Big icon and brand color */
#services img.service-icon,
#services .services-premium__icon,
#services .icon img{
  width: 96px !important;
  height: 96px !important;
  display: block !important;

  /* Brand color (orange) */
  filter: brightness(0) saturate(100%) invert(57%) sepia(88%) saturate(938%) hue-rotate(350deg) brightness(100%) contrast(98%) !important;
}

/* Text stays white */
#services .services-premium__name,
#services .services-premium__card h3,
#services .service-card h3{
  color: #fff !important;
}

#services .services-premium__desc,
#services .services-premium__card p,
#services .service-card p{
  color: rgba(255,255,255,.82) !important;
}

/* ===============================
   SERVICES – TITLE BRAND COLOR
================================ */

/* Service title / heading */
#services h3,
#services .services-premium__name,
#services .service-card h3{
  color: var(--orange) !important; /* brand primary */
  font-weight: 800 !important;
}

/* Keep description color unchanged */
#services p,
#services .services-premium__desc,
#services .service-card p{
  color: rgba(255,255,255,.82) !important;
}

/* ===============================
   FORCE SERVICE TITLE BRAND COLOR
   (OVERRIDE ALL WHITES)
================================ */

#services .card h3,
#services .service-card h3,
#services .services-premium__card h3,
#services .services-premium__name{
  color: var(--orange) !important;
  font-weight: 800 !important;
}

/* Description stays white */
#services .card p,
#services .service-card p,
#services .services-premium__desc{
  color: rgba(255,255,255,.82) !important;
}

/* ===============================
   SERVICES – FORCE TITLE ORANGE
   Targets your exact classes
================================ */

#services.services-premium .services-premium__card .services-premium__name{
  color: var(--orange) !important;
  font-weight: 900 !important;
}

/* keep description readable */
#services.services-premium .services-premium__card .services-premium__desc{
  color: rgba(255,255,255,.82) !important;
}

/* ===============================
   CASE STUDIES – PREMIUM UI
================================ */

.case-premium{
  padding: 90px 0;
}

.case-premium__head{
  max-width: 720px;
  margin-bottom: 48px;
}

.case-premium__pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(247,147,30,.45);
  color:var(--orange);
  font-weight:700;
  font-size:12px;
}

.case-premium__grid{
  display:grid;
  gap:28px;
}

@media(min-width:900px){
  .case-premium__grid{
    grid-template-columns:1fr 1fr;
  }
}

.case-premium__card{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:18px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

@media(min-width:900px){
  .case-premium__card{
    grid-template-columns:1fr 1.1fr;
    align-items:center;
  }
}

.case-premium__image img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
}

.case-premium__content h3{
  margin:0 0 6px;
  font-size:22px;
}

.case-premium__meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}

.case-premium__desc{
  color:#475569;
  font-size:14px;
  line-height:1.6;
  margin-bottom:14px;
}

.case-premium__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.case-premium__tags span{
  padding:6px 10px;
  border-radius:999px;
  background:#f1f5f9;
  font-size:12px;
  font-weight:600;
}

.case-premium__stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.case-premium__stats .stat{
  padding:8px 12px;
  border-radius:14px;
  background:rgba(247,147,30,.12);
  font-weight:800;
  font-size:13px;
}

.case-premium__actions{
  margin-top:6px;
}

/* ===============================
   CASE STUDIES – REF STYLE (NO BG)
================================ */

/* section spacing */
.case-premium{
  padding: 90px 0;
}

/* CENTER HEAD */
.case-premium__head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 46px;
}

.case-premium__pill{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(247,147,30,.55);
  color: var(--orange);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.case-premium__head h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
}

.case-premium__head p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* GRID like ref */
.case-premium__grid{
  display:grid;
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

@media(min-width: 900px){
  .case-premium__grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* CARD = DARK GLASS */
.case-premium__card{
  border-radius: 24px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 70px rgba(2,6,23,.18);
  display:flex;
  flex-direction: column;
}

/* top image strip */
.case-premium__image{
  height: 170px;
  background: rgba(255,255,255,.06);
}

.case-premium__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05);
}

/* content */
.case-premium__content{
  padding: 18px 18px 16px;
  color: #fff;
}

.case-premium__content h3{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.case-premium__meta{
  color: rgba(255,255,255,.70);
  font-size: 13px;
  margin-bottom: 12px;
}

/* tags (chips) */
.case-premium__tags{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.case-premium__tags span{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

/* stats row */
.case-premium__stats{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.case-premium__stats .stat{
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-align: left;
  font-weight: 900;
  color: #fff;
  font-size: 14px;
  opacity: .95;
}

/* CTA */
.case-premium__actions{
  margin-top: 16px;
}

.case-premium__actions .btn{
  width: 100%;
  border-radius: 14px;
}

/* Button style match ref */
.case-premium__actions .btn.btn-primary{
  box-shadow: 0 18px 50px rgba(247,147,30,.25);
}

/* ===============================
   CASE STUDY CARD – WHITE CONTENT
================================ */

.case-premium__card{
  background: #0b1220; /* outer frame stays dark */
}

.case-premium__content{
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  color: #0b1220;
  margin-top: -20px;
  box-shadow: 0 18px 50px rgba(2,6,23,.18);
}

/* text colors */
.case-premium__content h3{
  color: #0b1220;
}

.case-premium__meta,
.case-premium__desc{
  color: #475569;
}

/* chips */
.case-premium__tags span{
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0b1220;
}

/* stats */
.case-premium__stats{
  border-top: 1px solid #e2e8f0;
}

.case-premium__stats .stat{
  color: #0b1220;
}

/* ===============================
   CASE STUDIES – IMAGE TOP STYLE
================================ */

.case-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.12);
}

/* Image on top */
.case-card__image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Body */
.case-card__body {
  padding: 24px;
  text-align: center;
}

.case-card__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.case-card__type {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 14px;
}

/* Tags */
.case-card__tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.case-card__tags span {
  background: #f3f4f6;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
}

/* Metrics */
.case-card__metrics {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.case-card__metrics span {
  background: rgba(255,165,0,.12);
  color: #f97316;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
}

/* Button */
.case-card__btn {
  display: inline-block;
  margin-top: 6px;
}

.case-premium__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

/* ============================
   CASE STUDY CARD – CLEAN FIX
============================ */

.case-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
  overflow:hidden;
  max-width:520px;
  margin:0 auto;
}

/* TOP IMAGE (SMALL & CLEAN) */
.case-card__image{
  padding:16px;
}

.case-card__image img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* CONTENT */
.case-card__body{
  padding:18px 20px 22px;
}

.case-card__title{
  font-size:20px;
  font-weight:800;
  margin:0 0 6px;
  color:#0F172A;
}

.case-card__type{
  font-size:13px;
  color:#64748b;
  margin-bottom:12px;
}

/* TAGS */
.case-card__tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.case-card__tags .tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#f1f5f9;
  font-weight:700;
}

/* STATS */
.case-card__stats{
  display:flex;
  gap:14px;
  font-size:13px;
  font-weight:700;
  color:#0F172A;
  margin-bottom:16px;
}

/* BUTTON */
.case-card .btn-primary{
  width:100%;
  text-align:center;
}

.case-studies-grid{
  display:grid;
  gap:28px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

/* ============================
   CASE STUDIES – CLEAN CARDS
============================ */
.case-premium{
  padding: 64px 0;
}

.case-premium__head{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 26px;
}

.case-premium__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(247,147,30,.35);
  background: rgba(247,147,30,.10);
  color: #0b1220;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
}

.case-premium__title{
  margin: 14px 0 8px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
}

.case-premium__subtitle{
  margin: 0;
  color: var(--muted);
}

.case-premium__grid{
  display:grid;
  gap: 18px;
  margin-top: 26px;
}

@media (min-width: 900px){
  .case-premium__grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.case-card{
  background:#fff;
  border:1px solid var(--ring);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.case-card.hover{
  transition: .2s ease;
}

.case-card.hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.case-card__image{
  display:block;
  height: 180px;
  background:#e2e8f0;
}

.case-card__image img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.case-card__body{
  padding: 16px 16px 18px;
}

.case-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.case-chip{
  border:1px solid var(--ring);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  background:#f1f5f9;
  color:#334155;
}

.case-chip--orange{
  background: rgba(247,147,30,.14);
  border-color: rgba(247,147,30,.28);
  color:#0b1220;
}

.case-card__title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.case-card__desc{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.case-card__stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 0 0 14px;
}

.case-metric{
  border: 1px solid rgba(247,147,30,.28);
  background: rgba(247,147,30,.10);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  color:#0b1220;
}

.case-card__btn{
  width: 100%;
  justify-content:center;
  border-radius: 14px;
}

.case-premium__more{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}
.hero-premium__container{
  justify-content: center;
}

.hero-premium__left{
  max-width: 720px;
}

.hero-premium--ref .hero-premium__left--ref{
  max-width: 860px;
}

.hero-premium--ref .hero-premium__title--ref{
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-premium--ref .hero-premium__actions--ref{
  justify-content: center;
}

.hero-accent{
  color: var(--orange);
}

.hero-cta--ref{
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 16px;
}

.hero-cta2--ref{
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 16px;
}


/* =========================================
   HERO - Reference Center Top Override
   Paste at VERY END of styles.css
========================================= */

.hero-titleTop{
  display:block;
  font-size: clamp(26px, 3.2vw, 48px);
  opacity: .95;
  margin-bottom: 8px;
}

.hero-titleMain{
  display:block;
}

.hero-accent{
  color: #f7931e; /* your orange */
}

/* smaller on mobile */
@media (max-width: 768px){
  .hero-premium.hero-premium--centerTop{
    padding: 90px 0 42px;
  }
}

/* =========================================
   HERO - REFERENCE (Clean + Centered)
   Paste at VERY END of styles.css
========================================= */

/* mobile */
@media (max-width: 768px){
  .hero-premium--ref{
    padding: 90px 0 50px;
  }
  .hero-premium--ref .hero-premium__pill--ref{
    font-size: 11px;
    padding: 9px 14px;
  }
}

/* =========================================
   HERO – NO OVERLAY (CLEAR IMAGE)
   Paste at VERY END of styles.css
========================================= */

/* Keep hero structure */
.hero-premium{
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
  min-height: 88vh !important;
  display: flex !important;
  align-items: center !important;
}

/* Ensure content sits above background */
.hero-premium__container{
  position: relative !important;
  z-index: 2 !important;
}

/* If you're using centered hero now */
.hero-premium__container{
  justify-content: center !important;
}

.hero-premium__left{
  max-width: 720px !important;
  text-align: center !important;
}

/* Make text readable WITHOUT dark overlay */
.hero-premium__title,
.hero-premium__subtitle,
.hero-premium__pill{
  text-shadow: 0 6px 22px rgba(0,0,0,.55) !important;
}

/* Optional: give pill a clean glass look */
.hero-premium__pill{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(10px) !important;
}

/* Button pop (no overlay needed) */
.hero-premium .btn-primary,
.hero-premium .btn--primary{
  box-shadow: 0 18px 45px rgba(253,127,7,.30) !important;
}

/* Mobile spacing */
@media (max-width: 980px){
  .hero-premium{
    min-height: auto !important;
    padding: 70px 0 30px !important;
  }
  .hero-premium__left{
    max-width: 92vw !important;
  }
}

/* =========================================
   HERO: Move content to TOP CENTER (only position)
   Paste at VERY END of styles.css
========================================= */

.hero-premium--topcenter{
  /* keep hero as is, just control alignment */
  display: flex;
  align-items: flex-start;   /* top */
}

/* =========================================
   HERO: NUDGE UP + LEFT (like reference) — UPDATED
========================================= */

.hero-premium--topcenter{
  align-items: flex-start !important;
}

.hero-premium--topcenter .hero-premium__container{
  display: flex !important;
  flex-direction: column !important;

  /* left like reference */
  align-items: flex-start !important;
  text-align: left !important;

  /* ✅ move UP a bit more */
  padding-top: 18px !important;      /* was 38px */
  margin-top: -8px !important;       /* small extra lift */

  /* keep your left offset */
  padding-left: 70px !important;
  padding-right: 16px !important;
}

.hero-premium--topcenter .hero-premium__left{
  margin: 0 !important;
  text-align: left !important;
}

.hero-premium--topcenter .hero-premium__actions{
  justify-content: flex-start !important;
}

.hero-premium--topcenter .hero-premium__badges{
  justify-content: flex-start !important;
}

/* Mobile stays centered */
@media (max-width: 768px){
  .hero-premium--topcenter .hero-premium__container{
    padding-top: 32px !important;
    margin-top: 0 !important;
    padding-left: 16px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .hero-premium--topcenter .hero-premium__left{
    text-align: center !important;
  }
  .hero-premium--topcenter .hero-premium__actions{
    justify-content: center !important;
  }
}

/* ===== HERO TYPOGRAPHY BOOST ===== */

.hero-ref__title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.hero-ref__top {
  display: block;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  opacity: 0.9;
}

.hero-ref__main {
  display: block;
  margin-top: 6px;
}

.hero-ref__accent {
  color: #fd7f07; /* brand primary */
}

.hero-ref__subtitle {
  margin-top: 18px;
  font-size: clamp(18px, 2vw, 22px);
  color: rgba(255,255,255,0.9);
  max-width: 520px;
}

/* ===== HERO BUTTON INTERACTION ===== */

.hero-ref__btn {
  margin-top: 26px;
  padding: 16px 34px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 14px;
  background: #fd7f07;
  color: #111;
  box-shadow: 0 12px 30px rgba(253, 127, 7, 0.35);
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.hero-ref__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(253, 127, 7, 0.55);
  background: #ff9a2f;
}

/* ===== HERO TEXT HOVER EFFECT (SUBTLE) ===== */

.hero-premium__left:hover .hero-ref__title {
  text-shadow: 0 10px 40px rgba(0,0,0,0.35);
  transition: text-shadow 0.4s ease;
}

.hero-premium__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 20, 40, 0.45),
    rgba(15, 20, 40, 0.65)
  );
}

/* ===== HERO IMAGE OVERLAY (make text/button clearer) ===== */
.hero-premium__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* overlay layer */
.hero-premium__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.85) 15%,
    rgba(0,0,0,.75) 45%,
    rgba(0,0,0,.45) 100%
  );
}

/* ensure content stays above overlay */
.hero-premium__container,
.hero-premium__left{
  position: relative;
  z-index: 2;
}

/* =========================================
   HERO – FINAL DARK OVERLAY (FIXED)
========================================= */

.hero-premium__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Strong readable overlay */
.hero-premium__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.68) 45%,
    rgba(0,0,0,0.45) 100%
  );
}

/* Keep text & buttons above overlay */
.hero-premium__container,
.hero-premium__left{
  position: relative;
  z-index: 2;
}

/* ===========================
   OUR PRODUCT (Premium Section)
   Full width bg + glass UI
=========================== */

.product-premium{
  position: relative;
  isolation: isolate;
  min-height: 640px;
  padding: 86px 0;
  color: #fff;
}

/* Background image layer */
.product-premium__bg{
  position:absolute;
  inset:0;
  background: var(--product-bg) center/cover no-repeat;
  z-index: -2;
}

/* Readability overlay (tune opacity if needed) */
.product-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 520px at 15% 20%, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,.22) 100%);
  z-index:-1;
}

/* Layout */
.product-premium__container{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items: center;
}

@media (max-width: 980px){
  .product-premium{
    padding: 70px 0;
    min-height: auto;
  }
  .product-premium__container{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* LEFT */
.product-premium__pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 14px;
  backdrop-filter: blur(10px);
}

.product-premium__title{
  margin: 0 0 14px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.03;
  letter-spacing: -.02em;
  font-weight: 950;
  text-shadow: 0 18px 38px rgba(0,0,0,.35);
}

.product-premium__accent{
  color: #fd7f07; /* your primary */
}

.product-premium__sub{
  max-width: 58ch;
  margin: 0 0 18px;
  color: rgba(255,255,255,.85);
  font-size: 15.5px;
  line-height: 1.6;
}

.product-premium__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.product-premium__btn{
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.product-premium__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  filter: brightness(1.03);
}

.product-premium__btn--ghost{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
}

.product-premium__meta{
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
}

/* RIGHT - glass card */
.product-premium__glass{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(20, 25, 28, .35);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
}

@media (max-width: 980px){
  .product-premium__glass{
    grid-template-columns: 1fr;
  }
}

/* Mock image */
.product-premium__mock{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-premium__mock img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Key results */
.product-premium__results{
  padding: 6px 6px 6px 4px;
}

.product-premium__resultsTitle{
  font-weight: 950;
  letter-spacing: .12em;
  font-size: 12px;
  text-transform: uppercase;
  margin: 4px 0 10px;
  color: rgba(255,255,255,.85);
}

.product-premium__list{
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display:grid;
  gap: 10px;
}

.product-premium__list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(255,255,255,.88);
  line-height: 1.35;
  font-size: 14px;
}

.product-premium__tick{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(253,127,7,.20);
  border: 1px solid rgba(253,127,7,.35);
  color: #fd7f07;
  font-weight: 950;
  flex: 0 0 auto;
  margin-top: 1px;
}

.product-premium__note{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 10px;
}

/* FIX: product section background should FIT (no crop) */
.product-premium__bg{
  background: var(--product-bg) center top / contain no-repeat !important;
  background-color: #0b0f12; /* fallback around the image */
}

/* keep it responsive */
@media (max-width: 980px){
  .product-premium__bg{
    background-position: center top !important;
    background-size: cover !important; /* on mobile, cover looks better */
  }
}

.product-premium__bg{
  background: var(--product-bg) center top / 100% auto no-repeat !important;
  background-color: #0b0f12;
}

.product-premium::before{
  background:
    radial-gradient(1000px 520px at 25% 40%, rgba(0,0,0,.45), rgba(0,0,0,.05) 20%),
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.18) 100%);
}

/* PRODUCT SECTION BG — show full map (no crop) */
.product-premium{
  position: relative;
  min-height: 760px;          /* gives room so bg can fully show */
  overflow: hidden;
}

.product-premium__bg{
  position:absolute;
  inset:0;
  background-image: var(--product-bg);
  background-repeat: no-repeat;

  /* IMPORTANT: do NOT crop */
  background-size: auto 100%;      /* fit full height, keeps full map */
  background-position: left center; /* keep map visible on left */
  background-color: #0b0f12;       /* fill empty area */
}

/* Mobile: better to crop a bit than look tiny */
@media (max-width: 980px){
  .product-premium{ min-height: 680px; }
  .product-premium__bg{
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 980px){
  .product-premium__bg{
    background-size: contain;
    background-position: center top;
  }
}

/* REMOVE the right preview card (circled area) */
.product-premium__right,
.product-premium__mock,
.product-premium__preview,
.product-premium__card {
  display: none !important;
}

/* Move left content a little to the right */
.product-premium__left,
.product-premium__content {
  margin-left: 60px;      /* increase/decrease to match */
  max-width: 560px;
}


/* Clean overlay so background is visible but text readable */
.product-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.5) 0%,
    rgba(0,0,0,.2) 45%,
    rgba(0,0,0,.1) 100%
  );
  pointer-events:none;
}

/* ================================
   REMOVE OVERLAY FROM PRODUCT SECTION
   ================================ */

.product-premium::before,
.product-premium::after,
.product-section::before,
.product-section::after {
  content: none !important;
  display: none !important;
}

/* PURE background – no darkening */
.product-premium,
.product-section {
  background-color: #ffffff !important;
  background-blend-mode: normal !important;
  filter: none !important;
}

.product-premium {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.product-premium * {
  filter: none !important;
}

/* Product section background comes from inline CSS var --product-bg */
.product-premium{
  position: relative;
  overflow: hidden;
}

/* The background layer reads the CSS variable */
.product-premium__bg{
  position: absolute;
  inset: 0;
  background-image: var(--product-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Content above the background */
.product-premium__container{
  position: relative;
  z-index: 1;
}

/* OUR PRODUCT (Premium) */
.product-premium{
  position: relative;
  width: 100%;
  padding: 90px 0;
  overflow: hidden;
}

.product-premium__bg{
  position: absolute;
  inset: 0;
  background-image: var(--product-bg);
  background-repeat: no-repeat;

  /* shows more of the map (not cropped) */
  background-size: contain;
  background-position: left center;

  /* IMPORTANT: no overlay/darkness */
  filter: none;
  opacity: 1;
  z-index: 0;
}

.product-premium .container{
  position: relative;
  z-index: 2;
}

.product-premium__container{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

/* LEFT */
.product-premium__left{
  max-width: 620px;
}

.product-premium__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  color: #111;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 12px;
}

.product-premium__title{
  margin: 18px 0 14px;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.02;
  font-weight: 900;
  color: #0b0f14;
}

.product-premium__accent{
  color: #fd7f07;
}

.product-premium__sub{
  color: rgba(11,15,20,.78);
  max-width: 560px;
}

.product-premium__actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.product-premium__btn--ghost{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,15,20,.12);
}

.product-premium__meta{
  margin-top: 12px;
  color: rgba(11,15,20,.55);
  font-size: 13px;
}

/* RIGHT wrapper */
.product-premium__right{
  position: relative;
  min-height: 420px;
}

/* Device images block */
.product-premium__devices{
  position: absolute;
  right: -10px;   /* move little to the right */
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 46vw);
  height: 420px;
  pointer-events: none;
}

.product-premium__device{
  position: absolute;
  display: block;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
}

/* Desktop screen */
.product-premium__device--desktop{
  width: 88%;
  right: 0;
  top: 0;
}

/* Mobile screen */
.product-premium__device--mobile{
  width: 28%;
  right: -2%;
  bottom: 2%;
}

/* Results card (sits in the right area too) */
.product-premium__results{
  position: relative;
  margin-left: auto;
  max-width: 520px;
  padding: 22px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,15,20,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.10);

  /* keep it away from device images */
  transform: translateX(-40px);
}

.product-premium__resultsTitle{
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 12px;
  color: rgba(11,15,20,.65);
  margin-bottom: 12px;
}

.product-premium__list{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 10px;
}

.product-premium__tick{
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(253,127,7,.16);
  color: #fd7f07;
  font-weight: 900;
  margin-right: 10px;
}

.product-premium__note{
  margin-top: 10px;
  color: rgba(11,15,20,.70);
  border-top: 1px solid rgba(11,15,20,.10);
  padding-top: 12px;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 980px){
  .product-premium__container{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .product-premium__right{
    min-height: 520px;
  }
  .product-premium__devices{
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: 420px;
    margin-top: 10px;
  }
  .product-premium__results{
    transform: none;
    margin: 18px 0 0;
    max-width: 100%;
  }
}

@media (max-width: 520px){
  .product-premium{
    padding: 70px 0;
  }
  .product-premium__devices{
    height: 320px;
  }
  .product-premium__device--desktop{ width: 92%; }
  .product-premium__device--mobile{ width: 34%; }
}

/* ================================
   OUR PRODUCT — FINAL OVERRIDE FIX
   Paste at VERY END of styles.css
================================ */

/* section */
.product-premium{
  position: relative !important;
  width: 100% !important;
  padding: 90px 0 !important;
  min-height: 720px !important;
  overflow: hidden !important;

  /* no section overlay at all */
  background: #ffffff !important;
}

/* kill any overlay rules from earlier CSS */
.product-premium::before,
.product-premium::after{
  content: none !important;
  display: none !important;
}

/* background layer uses CSS variable */
.product-premium__bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  background-image: var(--product-bg) !important;
  background-repeat: no-repeat !important;

  /* show the map fully (no crop) */
  background-size: auto 100% !important;     /* fit full HEIGHT */
  background-position: left center !important;

  /* pure white behind the image */
  background-color: #ffffff !important;

  opacity: 1 !important;
  filter: none !important;
}

/* ensure content above bg */
.product-premium__container{
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 48px !important;
  align-items: center !important;
}

/* move the left text block slightly to the right */
.product-premium__left{
  margin-left: 70px !important; /* adjust 40-90 if you want */
  max-width: 640px !important;
}

/* make sure right side is NOT hidden by old rules */
.product-premium__right,
.product-premium__devices,
.product-premium__results{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* device images positioning */
.product-premium__right{
  position: relative !important;
  min-height: 460px !important;
}

.product-premium__devices{
  position: absolute !important;
  right: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: min(680px, 52vw) !important;
  height: 460px !important;
  pointer-events: none !important;
}

.product-premium__device{
  position: absolute !important;
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.18)) !important;
}

.product-premium__device--desktop{
  width: 92% !important;
  right: 0 !important;
  top: 0 !important;
}

.product-premium__device--mobile{
  width: 30% !important;
  right: -2% !important;
  bottom: 2% !important;
}

/* results card */
.product-premium__results{
  position: relative !important;
  margin-left: auto !important;
  max-width: 520px !important;

  padding: 22px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(11,15,20,.10) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.10) !important;

  /* keep it away from devices a bit */
  transform: translateX(-44px) !important;
}

/* text colors for white background */
.product-premium__pill{
  background: rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  color: #0b1220 !important;
}

.product-premium__title{ color:#0b1220 !important; }
.product-premium__sub{ color: rgba(11,18,32,.78) !important; }
.product-premium__meta{ color: rgba(11,18,32,.55) !important; }

.product-premium__resultsTitle{ color: rgba(11,18,32,.65) !important; }
.product-premium__list li{ color: rgba(11,18,32,.86) !important; }
.product-premium__note{ color: rgba(11,18,32,.70) !important; border-top: 1px solid rgba(11,18,32,.10) !important; }

/* responsive */
@media (max-width: 980px){
  .product-premium{
    padding: 70px 0 !important;
    min-height: auto !important;
  }

  .product-premium__container{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .product-premium__left{
    margin-left: 0 !important;
  }

  .product-premium__right{
    min-height: 520px !important;
  }

  .product-premium__devices{
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 420px !important;
  }

  .product-premium__results{
    transform: none !important;
    max-width: 100% !important;
    margin-top: 18px !important;
  }

  /* mobile: map looks better centered */
  .product-premium__bg{
    background-size: contain !important;
    background-position: center top !important;
  }
}

/* ================================
   PRODUCT SECTION — POSITION + FULL BG
   Paste at VERY END of styles.css
================================ */

/* Make section truly full-bleed */
.product-premium{
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Ensure no overlay */
.product-premium::before,
.product-premium::after{
  content: none !important;
  display: none !important;
}

/* Full-width background across entire screen */
.product-premium__bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  background-image: var(--product-bg) !important;
  background-repeat: no-repeat !important;

  /* FULL WIDTH of screen */
  background-size: cover !important;
  background-position: center !important;

  background-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Content above background */
.product-premium__container{
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 48px !important;
  align-items: center !important;
}

/* Slightly move text to the right (as you want space for devices at far left) */
.product-premium__left{
  margin-left: 90px !important;  /* adjust 70–130 if needed */
  max-width: 650px !important;
}

/* RIGHT column stays normal */
.product-premium__right{
  position: relative !important;
  min-height: 520px !important;
}

/* Put desktop+mobile to the LEFT side of the SECTION */
.product-premium__devices{
  position: absolute !important;

  /* move to left side */
  left: -120px !important;     /* KEY: pull towards far-left */
  right: auto !important;

  top: 55% !important;
  transform: translateY(-50%) !important;

  width: min(760px, 58vw) !important;
  height: 520px !important;
  pointer-events: none !important;
}

/* images */
.product-premium__device{
  position: absolute !important;
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.16)) !important;
}

.product-premium__device--desktop{
  width: 92% !important;
  left: 0 !important;
  top: 0 !important;
}

.product-premium__device--mobile{
  width: 30% !important;
  left: 60% !important;     /* sits over desktop edge */
  bottom: 2% !important;
}

/* Key results card should NOT block the devices */
.product-premium__results{
  position: relative !important;
  max-width: 520px !important;
  margin-left: auto !important;

  padding: 22px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(11,15,20,.10) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.10) !important;

  /* push card to the right so it doesn't cover devices */
  transform: translateX(40px) !important;
}

/* Responsive */
@media (max-width: 980px){
  .product-premium__container{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .product-premium__left{
    margin-left: 0 !important;
  }

  .product-premium__right{
    min-height: 520px !important;
  }

  /* On mobile/tablet, center devices */
  .product-premium__devices{
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 420px !important;
  }

  .product-premium__results{
    transform: none !important;
    max-width: 100% !important;
    margin-top: 18px !important;
  }
}

/* ===============================
   PRODUCT PRICING BUTTON – FINAL
   =============================== */

.product-premium__btn--pricing{
  background: #2f393b;           /* brand color */
  color: #ffffff;                /* pure white text */
  border: none;
  box-shadow: 0 14px 32px rgba(253,127,7,.35);
}

/* hover animation – same feel as other buttons */
.product-premium__btn--pricing:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(253,127,7,.55);
  filter: brightness(1.06);
}

/* active click feedback */
.product-premium__btn--pricing:active{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(253,127,7,.35);
}

/* ===============================
   INLINE SVG ICONS (fix mojibake)
   =============================== */
.icon-inline{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -0.2em;
  flex: 0 0 auto;
}

/* Header phone: use SVG icon */
.header-phone{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-phone .icon-inline{
  width: 16px;
  height: 16px;
}

/* Contact pill icon spacing */
.pill{
  gap: 8px;
}
.pill .icon-inline{
  width: 14px;
  height: 14px;
}

/* Footer copyright icon */
.footer-copy{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-copy .icon-inline{
  width: 16px;
  height: 16px;
  opacity: .8;
}

/* === PRICING SECTION OVERRIDE (REFERENCE UI) === */

/* === PRICING SECTION OVERRIDE (REFERENCE UI) ===
   Paste at VERY END of styles.css
================================================= */
#pricing.pricing-premium{
  padding: 96px 0 78px;
}
#pricing.pricing-premium .pricing-premium__bg{
  background:
    radial-gradient(900px 420px at 50% 25%, rgba(247,147,30,.26), transparent 62%),
    radial-gradient(700px 340px at 18% 72%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(760px 380px at 82% 72%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #0f172a 55%, #0b1220 100%);
}

/* toggle like the mock */
#pricing .pricing-premium__toggle{
  margin: 0 auto 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.30);
}
#pricing .pricing-toggle{
  min-width: 128px;
  justify-content: center;
}

/* title spacing */
#pricing .pricing-premium__top{margin-bottom: 18px}
#pricing .pricing-premium__title{max-width: 980px; margin-left:auto; margin-right:auto}

/* cards layout */
#pricing .pricing-premium__grid{gap: 16px}
@media (min-width: 980px){
  #pricing .pricing-premium__grid{gap: 22px}
}

/* shared card look */
#pricing .price-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 24px 70px rgba(0,0,0,.40);
}
#pricing .price-card__head{
  padding: 20px 20px 14px;
  background: rgba(15,23,42,.08);
}
#pricing .price-card__name{
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -.03em;
  margin: 0;
}

/* price row */
#pricing .price-card__price{
  font-size: 46px;
  font-weight: 950;
  letter-spacing: -.04em;
  margin: 10px 0 16px;
}
#pricing .price-card__currency{transform: translateY(-10px)}
#pricing .price-card__suffix{transform: translateY(-6px)}

/* list tighter */
#pricing .price-card__list{gap: 12px}
#pricing .price-card__list li{font-weight: 750}

/* CTA buttons */
#pricing .price-card__cta.btn{
  height: 48px;
  border-radius: 14px;
}
#pricing .price-card__cta.btn-primary{
  color: #111827;
  box-shadow: 0 18px 44px rgba(247,147,30,.22);
}
#pricing .price-card__cta.btn-ghost{
  background: #fff;
}

/* featured card (center) */
#pricing .price-card.is-featured{
  transform: translateY(-10px);
  border: 1px solid rgba(247,147,30,.70);
  box-shadow: 0 34px 90px rgba(0,0,0,.55);
}
#pricing .price-card.is-featured .price-card__head{
  padding-top: 18px;
}
#pricing .price-card.is-featured .price-card__badge{
  font-size: 14px;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

/* Optional ribbon label (shown only if present in HTML) */
#pricing .price-card__ribbon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 auto 10px;
  width: fit-content;
}

/* mobile polish */
@media (max-width: 520px){
  #pricing.pricing-premium{padding: 76px 0 62px}
  #pricing .price-card__name{font-size: 26px}
  #pricing .price-card__price{font-size: 40px}
  #pricing .pricing-toggle{min-width: 118px; padding: 9px 14px}
}

/* === PRICING SECTION OVERRIDE (REFERENCE UI) ===
   Paste at VERY END of styles.css
================================================= */
#pricing.pricing-premium{
  padding: 96px 0 78px;
}
#pricing.pricing-premium .pricing-premium__bg{
  background:
    radial-gradient(900px 420px at 50% 25%, rgba(247,147,30,.26), transparent 62%),
    radial-gradient(700px 340px at 18% 72%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(760px 380px at 82% 72%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #0f172a 55%, #0b1220 100%);
}

/* toggle like the mock */
#pricing .pricing-premium__toggle{
  margin: 0 auto 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.30);
}
#pricing .pricing-toggle{
  min-width: 128px;
  justify-content: center;
}

/* title spacing */
#pricing .pricing-premium__top{margin-bottom: 18px}
#pricing .pricing-premium__title{max-width: 980px; margin-left:auto; margin-right:auto}

/* cards layout */
#pricing .pricing-premium__grid{gap: 16px}
@media (min-width: 980px){
  #pricing .pricing-premium__grid{gap: 22px}
}

/* shared card look */
#pricing .price-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 24px 70px rgba(0,0,0,.40);
}
#pricing .price-card__head{
  padding: 20px 20px 14px;
  background: rgba(15,23,42,.08);
}
#pricing .price-card__name{
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -.03em;
  margin: 0;
}

/* price row */
#pricing .price-card__price{
  font-size: 46px;
  font-weight: 950;
  letter-spacing: -.04em;
  margin: 10px 0 16px;
}
#pricing .price-card__currency{transform: translateY(-10px)}
#pricing .price-card__suffix{transform: translateY(-6px)}

/* list tighter */
#pricing .price-card__list{gap: 12px}
#pricing .price-card__list li{font-weight: 750}

/* CTA buttons */
#pricing .price-card__cta.btn{
  height: 48px;
  border-radius: 14px;
}
#pricing .price-card__cta.btn-primary{
  color: #111827;
  box-shadow: 0 18px 44px rgba(247,147,30,.22);
}
#pricing .price-card__cta.btn-ghost{
  background: #fff;
}

/* featured card (center) */
#pricing .price-card.is-featured{
  transform: translateY(-10px);
  border: 1px solid rgba(247,147,30,.70);
  box-shadow: 0 34px 90px rgba(0,0,0,.55);
}
#pricing .price-card.is-featured .price-card__head{
  padding-top: 18px;
}
#pricing .price-card.is-featured .price-card__badge{
  font-size: 14px;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

/* Optional ribbon label (shown only if present in HTML) */
#pricing .price-card__ribbon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 auto 10px;
  width: fit-content;
}

/* mobile polish */
@media (max-width: 520px){
  #pricing.pricing-premium{padding: 76px 0 62px}
  #pricing .price-card__name{font-size: 26px}
  #pricing .price-card__price{font-size: 40px}
  #pricing .pricing-toggle{min-width: 118px; padding: 9px 14px}
}

/* =========================================================
   PRICING (MATCH REFERENCE UI)
   Paste at VERY END of styles.css
========================================================= */

#pricing.pricing-premium{
  padding: 92px 0 78px;
  position: relative;
}

#pricing.pricing-premium .container{
  position: relative;
  z-index: 2;
}

/* Dark cosmic section BG */
#pricing.pricing-premium .pricing-premium__bg{
  background:
    radial-gradient(1200px 560px at 50% 30%, rgba(247,147,30,.18), transparent 62%),
    radial-gradient(900px 520px at 15% 70%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 520px at 85% 70%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #070b16 0%, #0a1022 50%, #070b16 100%);
}

/* Rounded panel around pricing block (like reference) */
#pricing .pricing-premium__wrap{
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 22px;
  padding: 34px 24px 26px;
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(247,147,30,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 110px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}

/* subtle star speckle */
#pricing .pricing-premium__wrap::before{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 55%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 72%, rgba(255,255,255,.12) 0 1px, transparent 2px);
  opacity:.25;
  filter: blur(.2px);
  pointer-events:none;
}

/* Toggle pill */
#pricing .pricing-premium__toggle{
  margin: 0 auto 18px;
  width: fit-content;
  border-radius: 999px;
  padding: 6px;
  background: rgba(10,16,34,.72);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

#pricing .pricing-toggle{
  min-width: 140px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .01em;
  color: rgba(255,255,255,.78);
  background: transparent;
  border: 0;
}

#pricing .pricing-toggle.is-active{
  color: #111827;
  background: linear-gradient(180deg, #ffd18a, #f6a62e);
  box-shadow: 0 16px 40px rgba(247,147,30,.28);
}

/* Title like reference */
#pricing .pricing-premium__top{
  text-align: center;
  margin-bottom: 18px;
}
#pricing .pricing-premium__title{
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 950;
  letter-spacing: -.03em;
  color: #fff;
  margin: 10px 0 8px;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}
#pricing .pricing-title-muted{
  color: rgba(255,255,255,.75);
  font-weight: 800;
}
#pricing .pricing-title-accent{
  color: #f7b548; /* gold */
}

/* Cards grid */
#pricing .pricing-premium__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 14px;
}

@media (min-width: 960px){
  #pricing .pricing-premium__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

/* Base card (side cards) */
#pricing .price-card{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}

#pricing .price-card__head{
  background: rgba(17,24,39,.06);
  padding: 18px 18px 14px;
}

#pricing .price-card__name{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.03em;
  margin: 0;
  color: #0f172a;
}

#pricing .price-card__body{ padding: 16px 18px 18px; }

#pricing .price-card__price{
  font-size: 48px;
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f172a;
  margin: 10px 0 14px;
}
#pricing .price-card__suffix{ color: rgba(15,23,42,.75); font-weight: 900; }

/* Check list = gold */
#pricing .price-card__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
#pricing .price-card__list li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(15,23,42,.92);
  font-weight: 800;
}
#pricing .price-card__list li::before{
  content: "✓";
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd18a, #f6a62e);
  color: #111827;
  font-weight: 950;
  font-size: 12px;
  margin-top: 2px;
}

/* CTA buttons */
#pricing .price-card__cta{
  margin-top: 16px;
  width: 100%;
  height: 46px;
  border-radius: 12px;
  font-weight: 950;
  letter-spacing: .01em;
}
#pricing .price-card__cta.btn-ghost{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.12);
  color: #111827;
}
#pricing .price-card__cta.btn-primary{
  background: linear-gradient(180deg, #ffd18a, #f6a62e);
  color: #111827;
  border: 0;
  box-shadow: 0 18px 44px rgba(247,147,30,.24);
}

/* Featured card (CENTER) — dark like reference */
#pricing .price-card.is-featured{
  background:
    radial-gradient(700px 360px at 50% 20%, rgba(247,147,30,.18), transparent 55%),
    linear-gradient(180deg, #0a0f1f 0%, #0b1223 55%, #0a0f1f 100%);
  border: 1px solid rgba(247,147,30,.55);
  box-shadow:
    0 40px 110px rgba(0,0,0,.65),
    0 0 0 2px rgba(247,147,30,.25),
    0 0 70px rgba(247,147,30,.22);
  transform: translateY(-10px);
}

#pricing .price-card.is-featured .price-card__head{
  background: transparent;
  padding-top: 22px;
}

#pricing .price-card.is-featured .price-card__name,
#pricing .price-card.is-featured .price-card__price{
  color: #fff;
}

#pricing .price-card.is-featured .price-card__suffix{
  color: rgba(255,255,255,.70);
}

#pricing .price-card.is-featured .price-card__list li{
  color: rgba(255,255,255,.88);
}

#pricing .price-card.is-featured .price-card__cta.btn-primary{
  background: linear-gradient(180deg, #ffd18a, #f6a62e);
  color: #111827;
}

/* Featured ribbon + badge */
#pricing .price-card__ribbon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  width: fit-content;
  margin: 0 auto 10px;
}

#pricing .price-card__badge{
  width: fit-content;
  margin: 0 auto 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(247,147,30,.16);
  border: 1px solid rgba(247,147,30,.32);
  color: #f7b548;
  font-weight: 950;
  letter-spacing: .02em;
}

/* bottom caption like reference */
#pricing .pricing-premium__note{
  margin-top: 18px;
  text-align: center;
  font-weight: 900;
  color: rgba(255,255,255,.86);
  font-size: 16px;
}

/* mobile tighten */
@media (max-width: 520px){
  #pricing .pricing-premium__wrap{ padding: 26px 14px 22px; }
  #pricing .pricing-toggle{ min-width: 120px; height: 38px; }
  #pricing .price-card__name{ font-size: 30px; }
  #pricing .price-card__price{ font-size: 42px; }
}

/* ===== FIX: PRICING DOUBLE CHECK ICON + HEIGHT ===== */

/* 1) Stop the CSS-generated tick (this caused double ticks) */
#pricing .price-card__list li::before{
  content: none !important;
  display: none !important;
}

/* 2) If your HTML already has an icon element inside li, align it nicely */
#pricing .price-card__list li{
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

/* 3) Style the existing icon inside li (supports common patterns) */
#pricing .price-card__list li i,
#pricing .price-card__list li svg,
#pricing .price-card__list li .tick,
#pricing .price-card__list li .check,
#pricing .price-card__list li .icon{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd18a, #f6a62e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* If the icon is an SVG, force it visible */
#pricing .price-card__list li svg{
  fill: #111827;
}

/* Tighten vertical spacing to match reference */
#pricing .price-card__head{ padding: 16px 18px 12px !important; }
#pricing .price-card__body{ padding: 14px 18px 16px !important; }

#pricing .price-card__price{ margin: 8px 0 12px !important; }
#pricing .price-card__list{ gap: 10px !important; }

#pricing .price-card__cta{ margin-top: 14px !important; height: 46px !important; }

/* Featured card: reduce extra top spacing */
#pricing .price-card.is-featured .price-card__head{ padding-top: 18px !important; }
#pricing .price-card__badge{ margin-bottom: 6px !important; }
#pricing .price-card__ribbon{ margin-bottom: 8px !important; }

/* =========================================================
   MOBILE HEADER (FENUVA-LIKE) — smooth 2-row layout
   Paste at VERY END of styles.css
========================================================= */

@media (max-width: 900px){

  /* Header container */
  .header{
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  /* 2-row grid:
     Row 1: logo + menu button
     Row 2: CTA buttons + phone
  */
  .header .header-inner{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 10px 12px !important;
    padding: 10px 12px !important;
  }

  /* Hide desktop nav links on mobile (drawer will be used) */
  .header .nav{
    display: none !important;
  }

  /* Logo tighter like Fenuva */
  .header .logo-img{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: inline-flex;
    align-items: center;
  }
  .header .logo-img img{
    height: 34px !important;
    width: auto !important;
    display: block;
  }

  /* Menu button: rounded square with 3 dots */
  .header .nav-toggle{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Turn hamburger spans into 3 dots */
  .header .nav-toggle span{
    width: 5px !important;
    height: 5px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    margin: 0 2px !important;
    background: rgba(15,23,42,.70) !important;
    transform: none !important;
  }

  /* CTA row (second line) */
  .header .header-right{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;          /* keeps it smooth on tiny phones */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header .header-right::-webkit-scrollbar{ display: none; }

  /* Make pills compact like reference */
  .header .header-right .btn,
  .header .header-phone{
    flex: 0 0 auto;
    height: 40px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    font-weight: 900;
    font-size: 13px !important;
    line-height: 40px !important;
  }

  /* Phone pill tighter */
  .header .header-phone{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    background: #fff !important;
  }
  .header .header-phone .icon-inline{
    width: 16px !important;
    height: 16px !important;
  }
}

/* Extra small phones: allow wrap instead of scroll if you prefer */
@media (max-width: 380px){
  .header .header-right{
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .header .header-right .btn,
  .header .header-phone{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   MOBILE HEADER (FENUVA-LIKE): logo -> nav -> buttons
   - remove "..." notch button
   - show top nav ALWAYS on mobile
   - buttons smaller and after nav
========================================================= */

@media (max-width: 900px){

  /* Remove any notch/rounded cut feeling */
  .header,
  .header .header-inner{
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* Header stays clean */
  .header{
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  /* FENUVA layout: stacked */
  .header .header-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
    align-items: start !important;
  }

  /* 1) Logo row */
  .header .logo-img{
    grid-row: 1;
    display: inline-flex;
    align-items: center;
  }
  .header .logo-img img{
    height: 34px !important;
    width: auto !important;
    display: block;
  }

  /* 2) NAV: always visible on mobile (like fenuva) */
  .header .nav{
    grid-row: 2;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 0 2px !important;

    /* smooth horizontal if it doesn't fit */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header .nav::-webkit-scrollbar{ display: none; }

  .header .nav a{
    white-space: nowrap !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: rgba(15,23,42,.78) !important;
    padding: 6px 0 !important;
  }
  .header .nav a:hover{
    color: rgba(15,23,42,.95) !important;
  }

  /* 3) Buttons after nav (smaller) */
  .header .header-right{
    grid-row: 3;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header .header-right::-webkit-scrollbar{ display: none; }

  .header .header-right .btn,
  .header .header-phone{
    flex: 0 0 auto;
    height: 36px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 36px !important;
  }

  /* Phone pill clean */
  .header .header-phone{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1px solid rgba(15,23,42,.12) !important;
  }

  /* Hide the mobile toggle ("...") completely */
  .header .nav-toggle{
    display: none !important;
  }

  /* Disable drawer menu on mobile since nav is now visible */
  .mobile-nav,
  .mobile-nav.is-open{
    display: none !important;
  }
}

/* Extra small phones: allow wrap instead of horizontal scroll */
@media (max-width: 380px){
  .header .header-right{
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .header .header-right .btn,
  .header .header-phone{
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 900px){
  header .nav,
  .header nav,
  .header .header-inner .nav{
    display: flex !important;
  }
}

/* =========================================================
   FOOTER SOCIAL ICONS — force ONE ROW on mobile
========================================================= */
@media (max-width: 600px){

  /* try common containers (covers most footer setups) */
  .footer .social,
  .footer .social-icons,
  .footer .footer-social,
  footer .social,
  footer .social-icons,
  footer .footer-social{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;

    flex-wrap: nowrap !important;     /* ✅ stops going to next line */
    white-space: nowrap !important;
    width: 100% !important;

    overflow-x: auto !important;      /* if very small screen, still one row */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .footer .social::-webkit-scrollbar,
  .footer .social-icons::-webkit-scrollbar,
  .footer .footer-social::-webkit-scrollbar,
  footer .social::-webkit-scrollbar,
  footer .social-icons::-webkit-scrollbar,
  footer .footer-social::-webkit-scrollbar{
    display: none;
  }

  /* ensure each icon stays same size and doesn't expand */
  .footer .social a,
  .footer .social-icons a,
  .footer .footer-social a,
  footer .social a,
  footer .social-icons a,
  footer .footer-social a{
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* if your viber icon is in its own wrapper, force it inline too */
  .footer .viber,
  footer .viber{
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}